diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 5a762fe224..4d173ab222 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -4,12 +4,13 @@
 /pnpm-lock.yaml           @element-hq/element-web-team
 
 /apps/web/src/SecurityManager.ts                                                 @element-hq/element-crypto-web-reviewers
-/apps/web/test/SecurityManager-test.ts                                           @element-hq/element-crypto-web-reviewers
+/apps/web/test/unit-tests/SecurityManager-test.ts                                @element-hq/element-crypto-web-reviewers
 /apps/web/src/async-components/views/dialogs/security/                           @element-hq/element-crypto-web-reviewers
+/apps/web/test/unit-tests/async-components/dialogs/security/                     @element-hq/element-crypto-web-reviewers
 /apps/web/src/components/views/dialogs/security/                                 @element-hq/element-crypto-web-reviewers
-/apps/web/test/components/views/dialogs/security/                                @element-hq/element-crypto-web-reviewers
+/apps/web/test/unit-tests/components/views/dialogs/security/                     @element-hq/element-crypto-web-reviewers
 /apps/web/src/stores/SetupEncryptionStore.ts                                     @element-hq/element-crypto-web-reviewers
-/apps/web/test/stores/SetupEncryptionStore-test.ts                               @element-hq/element-crypto-web-reviewers
+/apps/web/test/unit-tests/stores/SetupEncryptionStore-test.ts                    @element-hq/element-crypto-web-reviewers
 /apps/web/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx  @element-hq/element-crypto-web-reviewers
 /apps/web/src/components/views/settings/encryption/                              @element-hq/element-crypto-web-reviewers
 /apps/web/test/unit-tests/components/views/settings/encryption/                  @element-hq/element-crypto-web-reviewers
diff --git a/.github/actions/download-verify-element-tarball/action.yml b/.github/actions/download-verify-element-tarball/action.yml
index a64bc3241b..7a7265a2ae 100644
--- a/.github/actions/download-verify-element-tarball/action.yml
+++ b/.github/actions/download-verify-element-tarball/action.yml
@@ -11,7 +11,7 @@ runs:
     using: composite
     steps:
         - name: Download release tarball
-          uses: robinraju/release-downloader@daf26c55d821e836577a15f77d86ddc078948b05 # v1
+          uses: robinraju/release-downloader@28fc21f50d76778e7023361aa1f863e717d3d56f # v1
           with:
               tag: ${{ inputs.tag }}
               fileName: element-*.tar.gz*
@@ -31,7 +31,9 @@ runs:
 
         - name: Move webapp to out-file-path
           shell: bash
-          run: mv ${{ runner.temp }}/download-verify-element-tarball/webapp ${{ inputs.out-file-path }}
+          run: mv ${{ runner.temp }}/download-verify-element-tarball/webapp "$OUT_PATH"
+          env:
+              OUT_PATH: ${{ inputs.out-file-path }}
 
         - name: Clean up temp directory
           shell: bash
diff --git a/.github/actions/setup-playwright/action.yml b/.github/actions/setup-playwright/action.yml
new file mode 100644
index 0000000000..1276191d2b
--- /dev/null
+++ b/.github/actions/setup-playwright/action.yml
@@ -0,0 +1,49 @@
+name: Setup playwright
+description: Installs playwright browsers and sets up a cache
+inputs:
+    needs-webkit:
+        description: Whether to install the additional dependencies for webkit
+        required: false
+        default: "false"
+    write-cache:
+        description: Whether to write the cache back
+        required: true
+runs:
+    using: composite
+    steps:
+        - name: Calculate cache key
+          id: key
+          run: |
+              PW_VERSION=$(pnpm --silent -- playwright --version | awk '{print $2}')
+              echo "key=${PREFIX}-playwright-${PW_VERSION}" >> $GITHUB_OUTPUT
+          shell: bash
+          env:
+              PREFIX: ${{ runner.os }}-${{ runner.arch }}
+
+        - name: Cache playwright binaries
+          uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
+          if: inputs.write-cache == 'true'
+          id: cache
+          with:
+              path: ~/.cache/ms-playwright
+              key: ${{ steps.key.outputs.key }}
+
+        # When running in merge queue only restore the cache, never write it
+        - name: Restore playwright binaries cache
+          uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
+          if: inputs.write-cache != 'true'
+          id: cache-restore
+          with:
+              path: ~/.cache/ms-playwright
+              key: ${{ steps.key.outputs.key }}
+
+        - name: Install Playwright browsers
+          if: (steps.cache.outputs.cache-hit || steps.cache-restore.outputs.cache-hit) != 'true'
+          shell: bash
+          run: pnpm playwright install --with-deps
+
+        # Some WebKit dependencies seem to lay outside the cache and will need to be installed separately
+        - name: Install system dependencies for WebKit
+          if: inputs.needs-webkit == 'true' && (steps.cache.outputs.cache-hit || steps.cache-restore.outputs.cache-hit) == 'true'
+          shell: bash
+          run: pnpm playwright install-deps webkit
diff --git a/.github/renovate.json b/.github/renovate.json
index ded20f15d7..928cfd4ad0 100644
--- a/.github/renovate.json
+++ b/.github/renovate.json
@@ -2,22 +2,45 @@
     "$schema": "https://docs.renovatebot.com/renovate-schema.json",
     "extends": ["github>matrix-org/renovate-config-element-web"],
     "postUpdateOptions": ["pnpmDedupe"],
+    "stopUpdatingLabel": "X-Blocked",
     "packageRules": [
         {
+            "description": "Group all testcontainers docker digests",
             "groupName": "testcontainers docker digests",
-            "groupSlug": "{{manager}}-docker-digests",
-            "matchManagers": ["custom.regex"],
+            "groupSlug": "testcontainers-docker",
+            "matchDepTypes": ["testcontainers-docker"],
             "matchPackageNames": ["*"]
+        },
+        {
+            "description": "Separate updates to overrides from other groups",
+            "matchDepTypes": ["pnpm.overrides"],
+            "groupSlug": null
+        },
+        {
+            "description": "Disable any major updates to overrides as this almost always is wrong",
+            "matchDepTypes": ["pnpm.overrides"],
+            "matchUpdateTypes": ["major"],
+            "enabled": false
         }
     ],
     "customManagers": [
         {
+            "description": "Update testcontainers docker digests",
             "customType": "regex",
             "datasourceTemplate": "docker",
             "versioningTemplate": "loose",
-            "description": "Update testcontainers docker digests",
             "managerFilePatterns": ["**/testcontainers/*.ts"],
-            "matchStrings": ["\\s+\"(?<depName>[^@]+):(?<currentValue>[^@]+)@(?<currentDigest>sha256:[a-f0-9]+)\""]
+            "matchStrings": ["\\s+\"(?<depName>[^@]+):(?<currentValue>[^@]+)@(?<currentDigest>sha256:[a-f0-9]+)\""],
+            "depTypeTemplate": "testcontainers-docker"
+        },
+        {
+            "description": "Update element-desktop hakDependencies",
+            "customType": "jsonata",
+            "managerFilePatterns": ["/(^|/)package\\.json$/"],
+            "fileFormat": "json",
+            "matchStrings": ["hakDependencies.$each(function($v, $k) { { 'packageName': $k, 'currentValue': $v } })"],
+            "datasourceTemplate": "npm",
+            "depTypeTemplate": "hak"
         }
     ]
 }
diff --git a/.github/workflows/build-and-test.yaml b/.github/workflows/build-and-test.yaml
index e13c537d0e..c1ecb609f8 100644
--- a/.github/workflows/build-and-test.yaml
+++ b/.github/workflows/build-and-test.yaml
@@ -18,8 +18,6 @@ on:
     push:
         # We do not build on push to develop as the merge_group check handles that
         branches: [staging, master]
-    repository_dispatch:
-        types: [element-web-notify]
 
     # support triggering from other workflows
     workflow_call:
@@ -56,6 +54,8 @@ jobs:
         outputs:
             num-runners: ${{ env.NUM_RUNNERS }}
             runners-matrix: ${{ steps.runner-vars.outputs.matrix }}
+            # Skip pull_request runs on renovate PRs to speed up CI time, delegating to the full run in merge queue
+            skip: ${{ inputs.skip || (github.event_name == 'pull_request' && startsWith(github.head_ref, 'renovate/')) }}
         steps:
             - name: Checkout code
               uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
@@ -64,7 +64,7 @@ jobs:
                   persist-credentials: false
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
-            - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+            - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               with:
                   cache: "pnpm"
                   node-version: "lts/*"
@@ -86,7 +86,7 @@ jobs:
               run: VERSION=$(scripts/get-version-from-git.sh) pnpm run build
 
             - name: Upload Artifact
-              uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+              uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
                   name: webapp
                   path: apps/web/webapp
@@ -94,7 +94,7 @@ jobs:
 
             - name: Calculate runner variables
               id: runner-vars
-              uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+              uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9
               with:
                   script: |
                       const numRunners = parseInt(process.env.NUM_RUNNERS, 10);
@@ -104,7 +104,7 @@ jobs:
     playwright_ew:
         name: "Run Tests [${{ matrix.project }}] ${{ matrix.runner }}/${{ needs.build_ew.outputs.num-runners }}"
         needs: build_ew
-        if: inputs.skip != true
+        if: needs.build_ew.outputs.skip == 'false'
         runs-on: ubuntu-24.04
         permissions:
             actions: read
@@ -146,7 +146,7 @@ jobs:
                   path: apps/web/webapp
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
-            - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+            - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               with:
                   cache: "pnpm"
                   cache-dependency-path: pnpm-lock.yaml
@@ -155,33 +155,17 @@ jobs:
             - name: Install dependencies
               run: pnpm install --frozen-lockfile
 
-            - name: Get installed Playwright version
-              id: playwright
-              run: echo "version=$(pnpm --silent -- playwright --version | awk '{print $2}')" >> $GITHUB_OUTPUT
-
-            - name: Cache playwright binaries
-              uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5
-              id: playwright-cache
+            - name: Setup playwright
+              uses: ./.github/actions/setup-playwright
               with:
-                  path: ~/.cache/ms-playwright
-                  key: ${{ runner.os }}-${{ runner.arch }}-playwright-${{ steps.playwright.outputs.version }}
-
-            - name: Install Playwright browsers
-              if: steps.playwright-cache.outputs.cache-hit != 'true'
-              working-directory: apps/web
-              run: pnpm playwright install --with-deps --no-shell
-
-            - name: Install system dependencies for WebKit
-              # Some WebKit dependencies seem to lay outside the cache and will need to be installed separately
-              if: matrix.project == 'WebKit' && steps.playwright-cache.outputs.cache-hit == 'true'
-              working-directory: apps/web
-              run: pnpm playwright install-deps webkit
+                  needs-webkit: ${{ matrix.project == 'WebKit' }}
+                  write-cache: ${{ github.event_name != 'merge_group' }}
 
             # We skip tests tagged with @mergequeue when running on PRs, but run them in MQ and everywhere else
             - name: Run Playwright tests
               working-directory: apps/web
               run: |
-                  pnpm playwright test \
+                  pnpm test:playwright \
                       --shard "$SHARD" \
                       --project="${{ matrix.project }}" \
                       ${{ (github.event_name == 'pull_request' && matrix.runAllTests == false ) && '--grep-invert @mergequeue' || '' }}
@@ -190,7 +174,7 @@ jobs:
 
             - name: Upload blob report to GitHub Actions Artifacts
               if: always()
-              uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+              uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
                   name: blob-report-${{ matrix.project }}-${{ matrix.runner }}
                   path: apps/web/blob-report
@@ -200,28 +184,30 @@ jobs:
     downstream-modules:
         name: Downstream Playwright tests [element-modules]
         needs: build_ew
-        if: inputs.skip != true && github.event_name == 'merge_group'
+        if: needs.build_ew.outputs.skip == 'false' && github.event_name == 'merge_group'
         uses: element-hq/element-modules/.github/workflows/reusable-playwright-tests.yml@main # zizmor: ignore[unpinned-uses]
         with:
             webapp-artifact: webapp
+            reporter: blob
 
     prepare_ed:
         name: "Prepare Element Desktop"
         uses: ./.github/workflows/build_desktop_prepare.yaml
         needs: build_ew
-        if: inputs.skip != true
+        if: needs.build_ew.outputs.skip == 'false'
         permissions:
             contents: read
         with:
             config: ${{ (github.event.pull_request.base.ref || github.ref_name) == 'develop' && 'element.io/nightly' || 'element.io/release' }}
-            version: ${{ (github.event.pull_request.base.ref || github.ref_name) == 'develop' && 'develop' || '' }}
+            version: ${{ case((github.event.pull_request.base.ref || github.ref_name) == 'develop' || github.event_name == 'merge_group', 'develop', '') }}
             webapp-artifact: webapp
 
     build_ed_windows:
         needs: prepare_ed
         name: "Desktop Windows"
         uses: ./.github/workflows/build_desktop_windows.yaml
-        if: inputs.skip != true
+        # Skip Windows builds on PRs, as the Linux amd64 build is enough of a smoke test and includes the screenshot tests
+        if: github.event_name != 'pull_request' || contains(github.event.pull_request.labels.*.name, 'X-Run-All-Tests')
         strategy:
             matrix:
                 arch: [x64, ia32, arm64]
@@ -233,17 +219,19 @@ jobs:
         needs: prepare_ed
         name: "Desktop Linux"
         uses: ./.github/workflows/build_desktop_linux.yaml
-        if: inputs.skip != true
         strategy:
             matrix:
                 sqlcipher: [system, static]
                 arch: [amd64, arm64]
                 runAllTests:
                     - ${{ github.event_name != 'pull_request' || contains(github.event.pull_request.labels.*.name, 'X-Run-All-Tests') }}
-                # We ship static sqlcipher builds, so delegate testing the system builds to the merge queue
                 exclude:
+                    # We ship static sqlcipher builds, so delegate testing the system builds to the merge queue
                     - runAllTests: false
                       sqlcipher: system
+                    # Additionally skip arm64 system builds on PRs, as the amd64 test is enough for a smoke test and includes the screenshot tests
+                    - runAllTests: false
+                      arch: arm64
         with:
             sqlcipher: ${{ matrix.sqlcipher }}
             arch: ${{ matrix.arch }}
@@ -253,15 +241,19 @@ jobs:
         needs: prepare_ed
         name: "Desktop macOS"
         uses: ./.github/workflows/build_desktop_macos.yaml
-        if: inputs.skip != true
+        # Skip macOS builds on PRs, as the Linux amd64 build is enough of a smoke test and includes the screenshot tests
+        # and we have a very low limit of concurrent macos runners (5) across the Github org.
+        if: github.event_name != 'pull_request' || contains(github.event.pull_request.labels.*.name, 'X-Run-All-Tests')
         with:
             blob_report: true
 
     complete:
         name: end-to-end-tests
         needs:
+            - build_ew
             - playwright_ew
             - downstream-modules
+            - prepare_ed
             - build_ed_windows
             - build_ed_linux
             - build_ed_macos
@@ -269,25 +261,25 @@ jobs:
         runs-on: ubuntu-24.04
         steps:
             - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
-              if: inputs.skip != true
+              if: needs.build_ew.outputs.skip == 'false'
               with:
                   persist-credentials: false
                   repository: element-hq/element-web
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
-              if: inputs.skip != true
-            - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
-              if: inputs.skip != true
+              if: needs.build_ew.outputs.skip == 'false'
+            - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
+              if: needs.build_ew.outputs.skip == 'false'
               with:
                   cache: "pnpm"
                   node-version: "lts/*"
 
             - name: Install dependencies
-              if: inputs.skip != true
+              if: needs.build_ew.outputs.skip == 'false'
               run: pnpm install --frozen-lockfile
 
             - name: Download blob reports from GitHub Actions Artifacts
-              if: inputs.skip != true
+              if: needs.build_ew.outputs.skip == 'false'
               uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8
               with:
                   pattern: blob-report-*
@@ -295,7 +287,7 @@ jobs:
                   merge-multiple: true
 
             - name: Merge into HTML Report
-              if: inputs.skip != true
+              if: needs.build_ew.outputs.skip == 'false'
               run: |
                   pnpm playwright merge-reports \
                       --config=playwright-merge.config.ts \
@@ -307,8 +299,8 @@ jobs:
 
             # Upload the HTML report even if one of our reporters fails, this can happen when stale screenshots are detected
             - name: Upload HTML report
-              if: always() && inputs.skip != true
-              uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+              if: always() && needs.build_ew.outputs.skip == 'false'
+              uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
                   name: html-report
                   path: playwright-report
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index a78e4f25f8..5f93a94516 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -48,7 +48,7 @@ jobs:
                   persist-credentials: false
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
-            - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+            - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               with:
                   # Disable cache on Windows as it is slower than not caching
                   # https://github.com/actions/setup-node/issues/975
@@ -69,7 +69,7 @@ jobs:
               run: VERSION=$(scripts/get-version-from-git.sh) pnpm run build
 
             - name: Upload Artifact
-              uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+              uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
                   name: webapp-${{ matrix.image }}
                   path: apps/web/webapp
diff --git a/.github/workflows/build_debian.yaml b/.github/workflows/build_debian.yaml
index c924bb8949..24fe492e7c 100644
--- a/.github/workflows/build_debian.yaml
+++ b/.github/workflows/build_debian.yaml
@@ -69,7 +69,7 @@ jobs:
                   dpkg-gencontrol -v"$VERSION" -ldebian/tmp/DEBIAN/changelog
                   dpkg-deb -Zxz --root-owner-group --build debian/tmp element-web.deb
 
-            - uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+            - uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
                   name: element-web.deb
                   path: apps/web/element-web.deb
diff --git a/.github/workflows/build_desktop_and_deploy.yaml b/.github/workflows/build_desktop_and_deploy.yaml
index 0455b7e37c..5611b2d4fd 100644
--- a/.github/workflows/build_desktop_and_deploy.yaml
+++ b/.github/workflows/build_desktop_and_deploy.yaml
@@ -212,7 +212,7 @@ jobs:
 
             - name: Stash packages.element.io
               if: needs.prepare.outputs.deploy == 'false'
-              uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+              uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
                   name: packages.element.io
                   path: packages.element.io
@@ -250,7 +250,7 @@ jobs:
 
             - name: Stash debs
               if: needs.prepare.outputs.deploy == 'false' && needs.linux.result == 'success'
-              uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+              uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
                   name: debs
                   path: |
@@ -289,7 +289,7 @@ jobs:
             id-token: write # This is required for requesting the JWT
         steps:
             - name: Configure AWS credentials
-              uses: aws-actions/configure-aws-credentials@8df5847569e6427dd6c4fb1cf565c83acfa8afa7 # v6
+              uses: aws-actions/configure-aws-credentials@ec61189d14ec14c8efccab744f656cffd0e33f37 # v6
               with:
                   role-to-assume: arn:aws:iam::264135176173:role/Push-ElementDesktop-MSI
                   role-session-name: githubaction-run-${{ github.run_id }}
diff --git a/.github/workflows/build_desktop_linux.yaml b/.github/workflows/build_desktop_linux.yaml
index d045cc3d7e..436a5194ed 100644
--- a/.github/workflows/build_desktop_linux.yaml
+++ b/.github/workflows/build_desktop_linux.yaml
@@ -104,14 +104,14 @@ jobs:
 
             - name: Cache .hak
               id: cache
-              uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5
+              uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
               with:
                   key: ${{ runner.os }}-${{ github.ref_name }}-${{ inputs.sqlcipher }}-${{ inputs.arch }}-${{ hashFiles('apps/desktop/hakHash', 'apps/desktop/electronVersion', 'apps/desktop/dockerbuild/*') }}
                   path: |
                       apps/desktop/.hak
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
-            - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+            - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               with:
                   node-version-file: apps/desktop/.node-version
                   cache: "pnpm"
@@ -126,14 +126,14 @@ jobs:
             - name: "Get modified files"
               id: changed_files
               if: steps.cache.outputs.cache-hit != 'true' && github.event_name == 'pull_request' && github.repository == 'element-hq/element-web'
-              uses: tj-actions/changed-files@823fcebdb31bb35fdf2229d9f769b400309430d0 # v46
+              uses: tj-actions/changed-files@9426d40962ed5378910ee2e21d5f8c6fcbf2dd96 # v47
               with:
                   files: |
                       apps/desktop/dockerbuild/**
 
             # This allows contributors to test changes to the dockerbuild image within a pull request
             - name: Build docker image
-              uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294 # v7
+              uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7
               if: steps.changed_files.outputs.any_modified == 'true'
               with:
                   file: apps/desktop/dockerbuild/Dockerfile
@@ -216,7 +216,7 @@ jobs:
 
             # We exclude *-unpacked as it loses permissions and the tarball contains it with correct permissions
             - name: Upload Artifacts
-              uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+              uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
                   name: ${{ inputs.artifact-prefix }}linux-${{ inputs.arch }}-sqlcipher-${{ inputs.sqlcipher }}
                   path: |
diff --git a/.github/workflows/build_desktop_macos.yaml b/.github/workflows/build_desktop_macos.yaml
index bc5455b5a4..a32f674cfe 100644
--- a/.github/workflows/build_desktop_macos.yaml
+++ b/.github/workflows/build_desktop_macos.yaml
@@ -90,7 +90,7 @@ jobs:
 
             - name: Cache .hak
               id: cache
-              uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5
+              uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
               with:
                   key: ${{ runner.os }}-${{ hashFiles('apps/desktop/hakHash', 'apps/desktop/electronVersion') }}
                   path: |
@@ -114,7 +114,7 @@ jobs:
             - run: sudo pip3 install pyobjc-framework-Quartz
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
-            - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+            - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               with:
                   node-version-file: apps/desktop/.node-version
                   cache: "pnpm"
@@ -194,7 +194,7 @@ jobs:
 
             # We exclude mac-universal as the unpacked app takes forever to upload and zip and dmg already contains it
             - name: Upload Artifacts
-              uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+              uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
                   name: ${{ inputs.artifact-prefix }}macos
                   path: |
diff --git a/.github/workflows/build_desktop_prepare.yaml b/.github/workflows/build_desktop_prepare.yaml
index fe6c5a2624..2420e907cc 100644
--- a/.github/workflows/build_desktop_prepare.yaml
+++ b/.github/workflows/build_desktop_prepare.yaml
@@ -59,7 +59,7 @@ jobs:
                   repository: element-hq/element-web
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
-            - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+            - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               with:
                   node-version-file: apps/desktop/.node-version
                   cache: "pnpm"
@@ -185,7 +185,7 @@ jobs:
               env:
                   NIGHTLY_VERSION: ${{ steps.versions.outputs.nightly }}
 
-            - uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+            - uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
                   name: desktop-prepare
                   retention-days: 1
diff --git a/.github/workflows/build_desktop_test.yaml b/.github/workflows/build_desktop_test.yaml
index ba347fa5b3..1ec6d7bf73 100644
--- a/.github/workflows/build_desktop_test.yaml
+++ b/.github/workflows/build_desktop_test.yaml
@@ -38,11 +38,11 @@ jobs:
         steps:
             - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
               with:
-                  repository: ${{ github.repository == 'element-hq/element-web-pro' && 'element-hq/element-web' || github.repository }}
+                  repository: element-hq/element-web
                   persist-credentials: false
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
-            - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+            - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               with:
                   node-version-file: apps/desktop/.node-version
                   cache: "pnpm"
@@ -97,10 +97,11 @@ jobs:
                   PW_TAG: ${{ inputs.project }}
                   ELEMENT_DESKTOP_EXECUTABLE: ${{ steps.executable.outputs.path }}
                   ARGS: ${{ inputs.args }}
+                  DEBUG: pw:browser
 
             - name: Upload blob report
               if: always() && inputs.blob_report
-              uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+              uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
                   name: blob-report-${{ inputs.artifact }}
                   path: apps/desktop/blob-report
@@ -109,7 +110,7 @@ jobs:
 
             - name: Upload HTML report
               if: always() && inputs.blob_report == false
-              uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+              uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
                   name: ${{ inputs.artifact }}-test
                   path: apps/desktop/playwright-report
diff --git a/.github/workflows/build_desktop_windows.yaml b/.github/workflows/build_desktop_windows.yaml
index ebad3763f0..2cbaef9c8f 100644
--- a/.github/workflows/build_desktop_windows.yaml
+++ b/.github/workflows/build_desktop_windows.yaml
@@ -121,7 +121,7 @@ jobs:
 
             - name: Cache .hak
               id: cache
-              uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5
+              uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
               with:
                   key: ${{ runner.os }}-${{ inputs.arch }}-${{ hashFiles('apps/desktop/hakHash', 'apps/desktop/electronVersion') }}
                   path: |
@@ -153,7 +153,7 @@ jobs:
                   TARGET: ${{ steps.config.outputs.target }}
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
-            - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+            - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               with:
                   node-version-file: apps/desktop/.node-version
                   cache: "pnpm"
@@ -274,7 +274,7 @@ jobs:
                   | ForEach-Object -Process {. $env:SIGNTOOL_PATH verify /pa $_.FullName; if(!$?) { throw }}
 
             - name: Upload Artifacts
-              uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+              uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
                   name: ${{ inputs.artifact-prefix }}win-${{ inputs.arch }}
                   path: |
diff --git a/.github/workflows/build_develop.yml b/.github/workflows/build_develop.yml
index 12821aab1a..246363b1df 100644
--- a/.github/workflows/build_develop.yml
+++ b/.github/workflows/build_develop.yml
@@ -33,7 +33,7 @@ jobs:
                   persist-credentials: false
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
-            - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+            - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               with:
                   cache: "pnpm"
                   node-version: "lts/*"
@@ -60,7 +60,7 @@ jobs:
             - run: mv dist/element-*.tar.gz dist/develop.tar.gz
               working-directory: apps/web
 
-            - uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+            - uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
                   name: webapp
                   path: apps/web/dist/develop.tar.gz
@@ -111,7 +111,7 @@ jobs:
                   running-workflow-name: "Build & Deploy develop.element.io"
                   repo-token: ${{ secrets.GITHUB_TOKEN }}
                   wait-interval: 10
-                  check-regexp: ^((?!SonarCloud|SonarQube|issue|board|label|Release|prepare|GitHub Pages|Upload|Netlify).)*$
+                  check-regexp: ^((?!SonarCloud|SonarQube|issue|board|label|Release|prepare|GitHub Pages|Upload|Netlify|Report).)*$
 
             # We keep the latest develop.tar.gz on R2 instead of relying on the github artifact uploaded earlier
             # as the expires after 24h and requires auth to download.
diff --git a/.github/workflows/cd.yaml b/.github/workflows/cd.yaml
index e00296abf1..46800f02f0 100644
--- a/.github/workflows/cd.yaml
+++ b/.github/workflows/cd.yaml
@@ -31,7 +31,7 @@ jobs:
                   persist-credentials: false
 
             - name: Install Cosign
-              uses: sigstore/cosign-installer@398d4b0eeef1380460a10c8013a76f728fb906ac # v3
+              uses: sigstore/cosign-installer@cad07c2e89fa2edd6e2d7bab4c1aa38e53f76003 # v4.1.1
 
             - name: Set up QEMU
               uses: docker/setup-qemu-action@ce360397dd3f832beb865e1373c09c0e9f86d70a # v4
@@ -41,7 +41,7 @@ jobs:
               uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
-            - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+            - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               with:
                   node-version-file: package.json
                   cache: "pnpm"
@@ -50,7 +50,7 @@ jobs:
               run: "pnpm install --frozen-lockfile"
 
             - name: Login to GitHub Container Registry
-              uses: docker/login-action@b45d80f862d83dbcd57f89517bcf500b2ab88fb2 # v4
+              uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4
               with:
                   registry: ghcr.io
                   username: ${{ github.repository_owner }}
diff --git a/.github/workflows/docker.yaml b/.github/workflows/docker.yaml
index e276754640..97726eb6ef 100644
--- a/.github/workflows/docker.yaml
+++ b/.github/workflows/docker.yaml
@@ -26,7 +26,7 @@ jobs:
                   persist-credentials: false
 
             - name: Install Cosign
-              uses: sigstore/cosign-installer@398d4b0eeef1380460a10c8013a76f728fb906ac # v3
+              uses: sigstore/cosign-installer@cad07c2e89fa2edd6e2d7bab4c1aa38e53f76003 # v4.1.1
               if: github.event_name != 'pull_request'
 
             - name: Set up QEMU
@@ -39,7 +39,7 @@ jobs:
 
             - name: Build and load
               id: test-build
-              uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294 # v7
+              uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7
               with:
                   context: .
                   file: apps/web/Dockerfile
@@ -97,14 +97,14 @@ jobs:
                       latest=${{ contains(github.ref_name, '-rc.') && 'false' || 'auto' }}
 
             - name: Login to Docker Hub
-              uses: docker/login-action@b45d80f862d83dbcd57f89517bcf500b2ab88fb2 # v4
+              uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4
               if: github.event_name != 'pull_request'
               with:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
 
             - name: Login to GitHub Container Registry
-              uses: docker/login-action@b45d80f862d83dbcd57f89517bcf500b2ab88fb2 # v4
+              uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4
               if: github.event_name != 'pull_request'
               with:
                   registry: ghcr.io
@@ -140,7 +140,7 @@ jobs:
                       services/web-repositories/secret/data/oci.element.io password | OCI_PASSWORD ;
 
             - name: Login to oci.element.io Registry
-              uses: docker/login-action@b45d80f862d83dbcd57f89517bcf500b2ab88fb2 # v4
+              uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4
               if: github.event_name != 'pull_request'
               with:
                   registry: oci-push.vpn.infra.element.io
@@ -149,7 +149,7 @@ jobs:
 
             - name: Build and push
               id: build-and-push
-              uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294 # v7
+              uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7
               if: github.event_name != 'pull_request'
               with:
                   context: .
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index bf24169461..9439989919 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -23,7 +23,7 @@ jobs:
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
               with:
                   package_json_file: package.json
-            - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+            - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               with:
                   cache: "pnpm"
                   cache-dependency-path: pnpm-lock.yaml
@@ -36,7 +36,7 @@ jobs:
               run: pnpm run docs:build
 
             - name: Upload artifact
-              uses: actions/upload-pages-artifact@7b1f4a764d45c48632c6b24a0339c27f5614fb0b # v4
+              uses: actions/upload-pages-artifact@fc324d3547104276b827a68afc52ff2a11cc49c9 # v5
               with:
                   path: ./docs/.vitepress/dist
 
diff --git a/.github/workflows/issue_closed.yml b/.github/workflows/issue_closed.yml
index 375c2e7184..e42d54dc65 100644
--- a/.github/workflows/issue_closed.yml
+++ b/.github/workflows/issue_closed.yml
@@ -10,7 +10,7 @@ jobs:
         name: Tidy closed issues
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+            - uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9
               id: main
               with:
                   # PAT needed as the GITHUB_TOKEN won't be able to see cross-references from other orgs (matrix-org)
@@ -142,7 +142,7 @@ jobs:
                           });
                         }
                       }
-            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+            - uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9
               name: Close duplicate as Not Planned
               if: steps.main.outputs.closeAsNotPlanned
               with:
diff --git a/.github/workflows/shared-component-publish.yaml b/.github/workflows/npm-publish.yaml
similarity index 62%
rename from .github/workflows/shared-component-publish.yaml
rename to .github/workflows/npm-publish.yaml
index c728c303d5..55a1f37ed7 100644
--- a/.github/workflows/shared-component-publish.yaml
+++ b/.github/workflows/npm-publish.yaml
@@ -1,6 +1,16 @@
-name: Publish shared component npm package
+name: Publish npm package
+run-name: Publish ${{ inputs.package }}
 on:
-    workflow_dispatch: {}
+    workflow_dispatch:
+        inputs:
+            package:
+                description: Which package to release
+                required: true
+                type: choice
+                options:
+                    - playwright-common
+                    - shared-components
+                    - module-api
 
 concurrency: release
 jobs:
@@ -19,7 +29,7 @@ jobs:
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
             - name: 🔧 Set up node environment
-              uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+              uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               with:
                   cache: "pnpm"
                   node-version-file: ".node-version"
@@ -29,10 +39,9 @@ jobs:
             - name: Update npm
               run: npm install -g npm@latest
 
-            # Need to setup element web too as it needs the translations
-            - name: 🛠️ Setup EW
+            - name: 🛠️ Install dependencies
               run: pnpm install --frozen-lockfile
 
             - name: 🚀 Publish to npm
-              working-directory: packages/shared-components
+              working-directory: packages/${{ inputs.package }}
               run: npm publish --access public --provenance
diff --git a/.github/workflows/pull_request_base_branch.yaml b/.github/workflows/pull_request_base_branch.yaml
index e79c37783b..32c79071ef 100644
--- a/.github/workflows/pull_request_base_branch.yaml
+++ b/.github/workflows/pull_request_base_branch.yaml
@@ -8,7 +8,7 @@ jobs:
         name: Check PR base branch
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+            - uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9
               with:
                   script: |
                       const baseBranch = context.payload.pull_request.base.ref;
diff --git a/.github/workflows/shared-component-storybook-build.yml b/.github/workflows/shared-component-storybook-build.yml
index 0a19e215dd..13b16a239e 100644
--- a/.github/workflows/shared-component-storybook-build.yml
+++ b/.github/workflows/shared-component-storybook-build.yml
@@ -18,7 +18,7 @@ jobs:
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
             - name: 🔧 Pnpm cache
-              uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+              uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               with:
                   cache: "pnpm"
                   node-version-file: package.json
@@ -31,7 +31,7 @@ jobs:
               working-directory: packages/shared-components
               run: pnpm build:storybook
 
-            - uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+            - uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
                   name: shared-components-storybook
                   path: packages/shared-components/storybook-static
diff --git a/.github/workflows/shared-component-storybook-publish.yaml b/.github/workflows/shared-component-storybook-publish.yaml
index 6193c5af74..1a365c6b6b 100644
--- a/.github/workflows/shared-component-storybook-publish.yaml
+++ b/.github/workflows/shared-component-storybook-publish.yaml
@@ -26,7 +26,7 @@ jobs:
                   path: storybook-static
 
             - name: 🚀 Deploy to Cloudflare Pages
-              uses: cloudflare/wrangler-action@da0e0dfe58b7a431659754fdf3f186c529afbe65 # v3
+              uses: cloudflare/wrangler-action@9acf94ace14e7dc412b076f2c5c20b8ce93c79cd # v3
               with:
                   apiToken: ${{ secrets.CF_PAGES_TOKEN }}
                   accountId: ${{ secrets.CF_PAGES_ACCOUNT_ID }}
diff --git a/.github/workflows/shared-component-visual-tests-netlify.yaml b/.github/workflows/shared-component-visual-tests-netlify.yaml
index 1f9ae76826..e4b830406d 100644
--- a/.github/workflows/shared-component-visual-tests-netlify.yaml
+++ b/.github/workflows/shared-component-visual-tests-netlify.yaml
@@ -2,7 +2,9 @@
 # It uploads the received images and diffs to netlify, printing the URLs to the console
 name: Upload Shared Component Visual Test Diffs
 on:
-    workflow_run:
+    # Privilege escalation necessary to deploy to Netlify
+    # 🚨 We must not execute any checked out code here.
+    workflow_run: # zizmor: ignore[dangerous-triggers]
         workflows: ["Shared Component Visual Tests"]
         types:
             - completed
diff --git a/.github/workflows/shared-component-visual-tests.yaml b/.github/workflows/shared-component-visual-tests.yaml
index 06b2d11b1c..f9d0e34fa8 100644
--- a/.github/workflows/shared-component-visual-tests.yaml
+++ b/.github/workflows/shared-component-visual-tests.yaml
@@ -27,7 +27,7 @@ jobs:
                   repository: element-hq/element-web
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
-            - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+            - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               with:
                   cache: "pnpm"
                   node-version: "lts/*"
@@ -36,22 +36,10 @@ jobs:
               working-directory: packages/shared-components
               run: pnpm install --frozen-lockfile
 
-            - name: Get installed Playwright version
-              working-directory: packages/shared-components
-              id: playwright
-              run: echo "version=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[].devDependencies["@playwright/test"].version')" >> $GITHUB_OUTPUT
-
-            - name: Cache playwright binaries
-              uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5
-              id: playwright-cache
+            - name: Setup playwright
+              uses: ./.github/actions/setup-playwright
               with:
-                  path: ~/.cache/ms-playwright
-                  key: ${{ runner.os }}-${{ runner.arch }}-playwright-${{ steps.playwright.outputs.version }}-onlyshell
-
-            - name: Install Playwright browsers
-              working-directory: packages/shared-components
-              if: steps.playwright-cache.outputs.cache-hit != 'true'
-              run: "pnpm playwright install --with-deps --only-shell"
+                  write-cache: ${{ github.event_name != 'merge_group' }}
 
             - name: Run Visual tests
               working-directory: packages/shared-components
@@ -65,7 +53,7 @@ jobs:
 
             - name: Upload received images & diffs
               if: always()
-              uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+              uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
                   name: received-images
                   path: packages/shared-components/__vis__/linux
diff --git a/.github/workflows/sonarqube.yml b/.github/workflows/sonarqube.yml
index 73efd48ba3..e934f05ad1 100644
--- a/.github/workflows/sonarqube.yml
+++ b/.github/workflows/sonarqube.yml
@@ -1,6 +1,8 @@
 name: SonarQube
 on:
-    workflow_run:
+    # Privilege escalation necessary to call upon SonarCloud
+    # 🚨 We must not execute any checked out code here.
+    workflow_run: # zizmor: ignore[dangerous-triggers]
         workflows: ["Tests"]
         types:
             - completed
diff --git a/.github/workflows/static_analysis.yaml b/.github/workflows/static_analysis.yaml
index f3052ff373..895ea83dc2 100644
--- a/.github/workflows/static_analysis.yaml
+++ b/.github/workflows/static_analysis.yaml
@@ -5,8 +5,6 @@ on:
         branches: [develop, master]
     merge_group:
         types: [checks_requested]
-    repository_dispatch:
-        types: [element-web-notify]
 concurrency:
     group: ${{ github.workflow }}-${{ github.ref }}-${{ github.event_name }}
     cancel-in-progress: true
@@ -56,7 +54,7 @@ jobs:
                   persist-credentials: false
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
-            - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+            - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               if: matrix.install != ''
               with:
                   cache: "pnpm"
@@ -89,7 +87,7 @@ jobs:
                   persist-credentials: false
 
             - name: Run zizmor
-              uses: zizmorcore/zizmor-action@71321a20a9ded102f6e9ce5718a2fcec2c4f70d8 # v0.5.2
+              uses: zizmorcore/zizmor-action@b1d7e1fb5de872772f31590499237e7cce841e8e # v0.5.3
 
     i18n:
         strategy:
@@ -105,7 +103,7 @@ jobs:
                           voip|element_call
                           error|invalid_json
                           error|misconfigured
-                          welcome_to_element
+                          welcome|title_element
                           devtools|settings|elementCallUrl
                           labs|sliding_sync_description
                           settings|voip|noise_suppression_description
@@ -127,7 +125,9 @@ jobs:
     # Dummy job to simplify branch protections
     ci:
         name: Static Analysis
-        needs: [lint, i18n]
+        needs: [lint, i18n, zizmor]
+        if: always()
         runs-on: ubuntu-24.04
         steps:
-            - run: echo "Ok"
+            - if: contains(needs.*.result, 'failure') || contains(needs.*.result, 'cancelled')
+              run: exit 1
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index b9ffa23c99..8a237b6950 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -5,8 +5,6 @@ on:
         types: [checks_requested]
     push:
         branches: [develop, master]
-    repository_dispatch:
-        types: [element-web-notify]
     workflow_call:
         inputs:
             disable_coverage:
@@ -47,7 +45,7 @@ jobs:
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
             - name: pnpm cache
-              uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+              uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               with:
                   node-version: "lts/*"
                   cache: "pnpm"
@@ -58,7 +56,7 @@ jobs:
                   JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
 
             - name: Jest Cache
-              uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5
+              uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
               with:
                   path: /tmp/jest_cache
                   key: ${{ hashFiles('**/pnpm-lock.yaml') }}
@@ -93,7 +91,7 @@ jobs:
 
             - name: Upload Artifact
               if: env.ENABLE_COVERAGE == 'true'
-              uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+              uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
                   name: coverage-${{ matrix.runner }}
                   path: |
@@ -102,7 +100,7 @@ jobs:
 
     complete:
         name: jest-tests
-        needs: [jest_ew, vitest_sc]
+        needs: [jest_ew, vitest]
         if: always()
         runs-on: ubuntu-24.04
         permissions:
@@ -122,8 +120,13 @@ jobs:
                   sha: ${{ github.sha }}
                   target_url: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
 
-    vitest_sc:
-        name: Vitest (Shared Components)
+    vitest:
+        name: Vitest
+        strategy:
+            matrix:
+                package:
+                    - shared-components
+                    - module-api
         runs-on: ubuntu-24.04
         steps:
             - name: Checkout code
@@ -134,49 +137,42 @@ jobs:
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
             - name: pnpm cache
-              uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+              uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               with:
                   node-version: "lts/*"
                   cache: "pnpm"
 
-            - name: Install Shared Component Deps
-              working-directory: "packages/shared-components"
+            - name: Install Deps
               run: "pnpm install"
 
             - name: Cache storybook & vitest
-              uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5
+              uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
               with:
                   path: |
-                      packages/shared-components/node_modules/.cache
-                      packages/shared-components/node_modules/.vite/vitest
+                      packages/${{ matrix.package }}/node_modules/.cache
+                      packages/${{ matrix.package }}/node_modules/.vite/vitest
                   key: ${{ hashFiles('pnpm-lock.yaml') }}
 
-            - name: Get installed Playwright version
-              working-directory: packages/shared-components
-              id: playwright
-              run: echo "version=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[].devDependencies["@playwright/test"].version')" >> $GITHUB_OUTPUT
-
-            - name: Cache playwright binaries
-              uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5
-              id: playwright-cache
+            - name: Setup playwright
+              uses: ./.github/actions/setup-playwright
+              if: matrix.package == 'shared-components'
               with:
-                  path: ~/.cache/ms-playwright
-                  key: ${{ runner.os }}-${{ runner.arch }}-playwright-${{ steps.playwright.outputs.version }}-onlyshell
-
-            - name: Install Playwright browsers
-              working-directory: packages/shared-components
-              if: steps.playwright-cache.outputs.cache-hit != 'true'
-              run: "pnpm playwright install --with-deps --only-shell"
+                  write-cache: ${{ github.event_name != 'merge_group' }}
 
             - name: Run tests
-              working-directory: "packages/shared-components"
+              working-directory: "packages/${{ matrix.package }}"
               run: pnpm test:unit --coverage=$ENABLE_COVERAGE
 
+            # Dump the disk usage on failure, because this job seems to fail with disk fills sometimes
+            - name: df
+              run: df
+              if: ${{ failure() }}
+
             - name: Upload Artifact
               if: env.ENABLE_COVERAGE == 'true'
-              uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+              uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
               with:
-                  name: coverage-sharedcomponents
+                  name: coverage-${{ matrix.package }}
                   path: |
-                      packages/shared-components/coverage
-                      !packages/shared-components/coverage/lcov-report
+                      packages/${{ matrix.package }}/coverage
+                      !packages/${{ matrix.package }}/coverage/lcov-report
diff --git a/.github/workflows/triage-labelled.yml b/.github/workflows/triage-labelled.yml
index 496cfd53df..582207dc14 100644
--- a/.github/workflows/triage-labelled.yml
+++ b/.github/workflows/triage-labelled.yml
@@ -27,7 +27,7 @@ jobs:
             contains(github.event.issue.labels.*.name, 'A-Rich-Text-Editor') ||
             contains(github.event.issue.labels.*.name, 'A-Element-Call')
         steps:
-            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+            - uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9
               with:
                   script: |
                       github.rest.issues.addLabels({
@@ -44,7 +44,7 @@ jobs:
             contains(github.event.issue.labels.*.name, 'good first issue') ||
             contains(github.event.issue.labels.*.name, 'Hacktoberfest')
         steps:
-            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+            - uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9
               with:
                   script: |
                       github.rest.issues.addLabels({
diff --git a/.github/workflows/triage-unlabelled.yml b/.github/workflows/triage-unlabelled.yml
index 71396be804..04f312ab32 100644
--- a/.github/workflows/triage-unlabelled.yml
+++ b/.github/workflows/triage-unlabelled.yml
@@ -43,7 +43,7 @@ jobs:
             contains(github.event.issue.labels.*.name, 'A-Element-Call')) &&
             contains(github.event.issue.labels.*.name, 'Z-Labs')
         steps:
-            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+            - uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9
               with:
                   script: |
                       github.rest.issues.removeLabel({
diff --git a/.github/workflows/update-jitsi.yml b/.github/workflows/update-jitsi.yml
index 2e52b08cbf..7d56d6d418 100644
--- a/.github/workflows/update-jitsi.yml
+++ b/.github/workflows/update-jitsi.yml
@@ -14,7 +14,7 @@ jobs:
                   persist-credentials: false
 
             - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5
-            - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+            - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
               with:
                   cache: "pnpm"
                   node-version: "lts/*"
@@ -27,7 +27,7 @@ jobs:
               run: "pnpm vendor:jitsi"
 
             - name: Create Pull Request
-              uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8
+              uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8
               with:
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   branch: actions/jitsi-update
diff --git a/.github/workflows/update-topics.yaml b/.github/workflows/update-topics.yaml
index c1fb78e3b8..698c8da804 100644
--- a/.github/workflows/update-topics.yaml
+++ b/.github/workflows/update-topics.yaml
@@ -22,7 +22,7 @@ jobs:
         runs-on: ubuntu-24.04
         environment: Matrix
         steps:
-            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+            - uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9
               env:
                   HS_URL: ${{ secrets.BETABOT_HS_URL }}
                   LOBBY_ROOM_ID: ${{ secrets.ROOM_ID }}
diff --git a/.prettierignore b/.prettierignore
index ca5fe9afd8..e0a9e4fc57 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -14,7 +14,8 @@ webpack-stats.json
 .vscode/
 .env
 coverage
-# Auto-generated file
+# Auto-generated files
+*.api.md
 /apps/web/src/modules.ts
 /apps/web/src/modules.js
 src/i18n/strings
@@ -49,6 +50,7 @@ CHANGELOG.md
 /apps/desktop/dist/
 /apps/desktop/build/
 /apps/desktop/dockerbuild/
+/apps/desktop/deploys/
 /apps/desktop/lib/
 /apps/desktop/webapp
 /apps/desktop/playwright/html-report
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 8f628628ce..615e496938 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -49,6 +49,21 @@ As for your PR description, it should include these things:
 Please **_do not use force push_** in your PRs. Doing so means we can't see what
 has changed. We use squash merge to get a "clean" git history.
 
+### Adding a new feature or enhancement
+
+To make a great product with a great user experience, all the small efforts need to go in the same direction and be aligned and consistent with each other.
+
+Before making your contribution, please consider the following:
+
+- One product can’t do everything well. Element is focusing on private end-to-end encrypted messaging and voice - this can either be for consumers (e.g. friends and family) or for professional teams and organizations. Public forums and other types of chats without E2EE remain supported but are not the primary use case in case UX compromises need to be made.
+- There are 3 platforms - Web/Desktop, [Android](https://github.com/element-hq/element-x-android) and [iOS](https://github.com/element-hq/element-x-ios). These platforms need to have feature parity and design consistency. For some features, supporting all platforms is a must have, in some cases exceptions can be made to have it on one platform only.
+- To make sure your idea fits both from a design/solution and use case perspective, please open a new issue (or find an existing issue) in [element-meta](https://github.com/element-hq/element-meta/issues) repository describing the use case and how you plan to tackle it. Do not just describe what feature is missing, explain why the users need it with a couple of real life examples from the field.
+    - In case of an existing issue, please comment that you're planning to contribute. If you create a new issue, please specify that in the issue. In such a case we will try to review the issue ASAP and provide you with initial feedback so you can be confident if and at which conditions your contributions will be accepted.
+
+Once we know that you want to contribute and have confirmed that the new feature is overall aligned with the product direction, the designers of the core team will help you with the designs and any other type of guidance when it comes to the user experience. We will try to unblock you as quickly as we can, but it may not be instant. Having a clear understanding of the use case and the impact of the feature will help us with the prioritization and faster responses.
+
+Only once all of the above is met should you open a PR with your proposed changes.
+
 ### Changelogs
 
 There's no need to manually add Changelog entries: we use information in the
diff --git a/apps/desktop/.node-version b/apps/desktop/.node-version
index 8e35034890..5bf4400f22 100644
--- a/apps/desktop/.node-version
+++ b/apps/desktop/.node-version
@@ -1 +1 @@
-24.14.1
+24.15.0
diff --git a/apps/desktop/dockerbuild/Dockerfile b/apps/desktop/dockerbuild/Dockerfile
index 0acea0e60d..f9521745ba 100644
--- a/apps/desktop/dockerbuild/Dockerfile
+++ b/apps/desktop/dockerbuild/Dockerfile
@@ -1,7 +1,7 @@
 # Docker image to facilitate building Element Desktop's native bits using a glibc version (2.31)
 # with broader compatibility, down to Debian bullseye & Ubuntu focal.
 
-FROM rust:bullseye@sha256:bc19574c121fe10c1bc68fc2b1ea9b420d87d047a0c50fb1622b282199700cee
+FROM rust:bullseye@sha256:949b0903defbfc4e374dc85f947b153859e9ee0104e425cd9a74d94474a9a335
 
 ENV DEBIAN_FRONTEND=noninteractive
 
diff --git a/apps/desktop/hak/tsconfig.json b/apps/desktop/hak/tsconfig.json
index f547523e48..b762dda71a 100644
--- a/apps/desktop/hak/tsconfig.json
+++ b/apps/desktop/hak/tsconfig.json
@@ -1,6 +1,7 @@
 {
     "compilerOptions": {
-        "moduleResolution": "node",
+        "moduleResolution": "node16",
+        "module": "Node16",
         "esModuleInterop": true,
         "target": "es2022",
         "sourceMap": false,
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index a4f9c68437..158bb1a284 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -28,7 +28,7 @@
         "mkdirs": "mkdirp packages deploys",
         "fetch": "pnpm run mkdirs && node scripts/fetch-package.ts",
         "asar-webapp": "asar p webapp webapp.asar",
-        "start": "pnpm run build:ts && pnpm run build:res && electron .",
+        "start": "nx start",
         "lint": "pnpm lint:types && pnpm lint:js",
         "lint:js": "eslint --max-warnings 0 src hak playwright scripts",
         "lint:js-fix": "eslint --fix --max-warnings 0 src hak playwright scripts && prettier --log-level=warn --write .",
@@ -39,22 +39,19 @@
         "lint:types:hak": "tsc --noEmit -p hak/tsconfig.json",
         "build:native": "pnpm run hak",
         "build:native:universal": "pnpm run hak --target x86_64-apple-darwin fetchandbuild && pnpm run hak --target aarch64-apple-darwin fetchandbuild && pnpm run hak --target x86_64-apple-darwin --target aarch64-apple-darwin copyandlink",
-        "build:32": "pnpm run build:ts && pnpm run build:res && electron-builder --ia32",
-        "build:64": "pnpm run build:ts && pnpm run build:res && electron-builder --x64",
-        "build:universal": "pnpm run build:ts && pnpm run build:res && electron-builder --universal",
-        "build": "pnpm run build:ts && pnpm run build:res && electron-builder",
-        "build:ts": "tsc",
-        "build:res": "node scripts/copy-res.ts",
+        "build:32": "nx build --ia32",
+        "build:64": "nx build --x64",
+        "build:universal": "nx build --universal",
+        "build": "nx build --",
         "docker:setup": "docker build --platform linux/amd64 -t element-desktop-dockerbuild -f dockerbuild/Dockerfile .",
         "docker:build:native": "scripts/in-docker.sh pnpm run hak",
         "docker:build": "scripts/in-docker.sh pnpm run build",
         "docker:install": "scripts/in-docker.sh pnpm install",
         "clean": "rimraf webapp.asar dist packages deploys lib",
         "hak": "node scripts/hak/index.ts",
-        "test": "playwright test",
-        "test:open": "pnpm test --ui",
-        "test:screenshots:build": "docker build playwright -t element-desktop-playwright --platform linux/amd64",
-        "test:screenshots:run": "docker run --rm --network host -v $(pwd):/work/element-desktop -v element-desktop-playwright:/work/element-desktop/node_modules -v /var/run/docker.sock:/var/run/docker.sock --platform linux/amd64 -it element-desktop-playwright",
+        "test:playwright": "nx test:playwright --",
+        "test:playwright:open": "nx test:playwright -- --ui",
+        "test:playwright:screenshots": "nx test:playwright:screenshots --",
         "sane-postinstall": "electron-builder install-app-deps"
     },
     "dependencies": {
@@ -65,13 +62,14 @@
         "electron-window-state": "^5.0.3",
         "minimist": "^1.2.6",
         "png-to-ico": "^3.0.0",
-        "uuid": "^13.0.0"
+        "uuid": "^14.0.0"
     },
     "devDependencies": {
         "@babel/core": "^7.18.10",
         "@babel/preset-env": "^7.18.10",
         "@babel/preset-typescript": "^7.18.6",
-        "@electron/asar": "4.1.2",
+        "@electron/asar": "4.2.0",
+        "@electron/fuses": "^2.1.1",
         "@playwright/test": "catalog:",
         "@stylistic/eslint-plugin": "^5.0.0",
         "@types/auto-launch": "^5.0.1",
@@ -81,12 +79,12 @@
         "@types/pacote": "^11.1.1",
         "@typescript-eslint/eslint-plugin": "^8.0.0",
         "@typescript-eslint/parser": "^8.0.0",
-        "app-builder-lib": "26.8.2",
+        "app-builder-lib": "26.9.0",
         "chokidar": "^5.0.0",
         "detect-libc": "^2.0.0",
-        "electron": "41.1.0",
-        "electron-builder": "26.8.2",
-        "electron-builder-squirrel-windows": "26.8.2",
+        "electron": "41.2.2",
+        "electron-builder": "26.9.0",
+        "electron-builder-squirrel-windows": "26.9.0",
         "electron-devtools-installer": "^4.0.0",
         "eslint": "^8.26.0",
         "eslint-config-google": "^0.14.0",
@@ -102,10 +100,13 @@
         "prettier": "^3.0.0",
         "rimraf": "^6.0.0",
         "tar": "^7.5.8",
-        "typescript": "5.9.3"
+        "typescript": "6.0.3"
     },
     "hakDependencies": {
-        "matrix-seshat": "^4.0.1"
+        "matrix-seshat": "4.2.0"
     },
-    "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319"
+    "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319",
+    "nx": {
+        "includedScripts": []
+    }
 }
diff --git a/apps/desktop/playwright/Dockerfile b/apps/desktop/playwright/Dockerfile
index dabf89dd46..212eeb3438 100644
--- a/apps/desktop/playwright/Dockerfile
+++ b/apps/desktop/playwright/Dockerfile
@@ -1,13 +1,19 @@
 FROM mcr.microsoft.com/playwright:v1.59.1-jammy@sha256:8a0360d39d1973be506dd59002904a774f6d697d4946c94063b3fd006461c8ff
 
-WORKDIR /work/element-desktop
+WORKDIR /work
 
-RUN apt-get update && apt-get -y install xvfb dbus-x11 && apt-get purge -y --auto-remove && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && \
+    apt-get -y install xvfb dbus-x11 && \
+    apt-get purge -y --auto-remove && \
+    rm -rf /var/lib/apt/lists/* && \
+    corepack enable
 
-# Create node_modules & dist dirs so that the volumes have the correct permissions
-RUN mkdir node_modules dist && chown 1000:1000 node_modules dist
+ENV COREPACK_ENABLE_DOWNLOAD_PROMPT=0
+ENV GITHUB_ACTIONS=1
+ENV DEBUG=pw:browser
 
+# switch to node user
 USER 1000:1000
 
-COPY docker-entrypoint.sh /opt/docker-entrypoint.sh
+COPY apps/desktop/playwright/docker-entrypoint.sh /opt/docker-entrypoint.sh
 ENTRYPOINT ["bash", "/opt/docker-entrypoint.sh"]
diff --git a/apps/desktop/playwright/docker-entrypoint.sh b/apps/desktop/playwright/docker-entrypoint.sh
index 68deb4af9a..fd846cb2fa 100644
--- a/apps/desktop/playwright/docker-entrypoint.sh
+++ b/apps/desktop/playwright/docker-entrypoint.sh
@@ -8,11 +8,5 @@ sleep 2
 
 export DISPLAY=:99
 
-pnpm install --frozen-lockfile
-pnpm build -l --dir
-
 PLAYWRIGHT_HTML_OPEN=never ELEMENT_DESKTOP_EXECUTABLE="./dist/linux-unpacked/element-desktop" \
-  npx playwright test --update-snapshots --reporter line,html "$1"
-
-# Clean up
-rm -R core qemu_* || exit 0
+  exec pnpm -C apps/desktop exec playwright test --update-snapshots --reporter line,html "$1"
diff --git a/apps/desktop/playwright/element-desktop-test.ts b/apps/desktop/playwright/element-desktop-test.ts
index 743be8da6f..b2fa3c983e 100644
--- a/apps/desktop/playwright/element-desktop-test.ts
+++ b/apps/desktop/playwright/element-desktop-test.ts
@@ -17,14 +17,14 @@ import { PassThrough } from "node:stream";
  * A PassThrough stream that captures all data written to it.
  */
 class CapturedPassThrough extends PassThrough {
-    private _chunks = [];
+    private _chunks: any[] = [];
 
     public constructor() {
         super();
         super.on("data", this.onData);
     }
 
-    private onData = (chunk): void => {
+    private onData = (chunk: any): void => {
         this._chunks.push(chunk);
     };
 
@@ -69,7 +69,13 @@ export const test = base.extend<Fixtures>({
         const args = ["--profile-dir", tmpDir, ...extraArgs];
 
         if (process.env.GITHUB_ACTIONS) {
+            args.push("--disable-gpu");
+
             if (process.platform === "linux") {
+                if (process.getuid() === 0) {
+                    args.push("--no-sandbox");
+                }
+
                 // GitHub Actions hosted runner lacks dbus and a compatible keyring, so we need to force plaintext storage
                 args.push("--storage-mode", "force-plaintext");
             } else if (process.platform === "darwin") {
diff --git a/apps/desktop/playwright/snapshots/launch/launch.spec.ts/App-launch-should-launch-and-render-the-welcome-view-successfully-1-linux.png b/apps/desktop/playwright/snapshots/launch/launch.spec.ts/App-launch-should-launch-and-render-the-welcome-view-successfully-1-linux.png
index 7bcf260d52..baec548402 100644
Binary files a/apps/desktop/playwright/snapshots/launch/launch.spec.ts/App-launch-should-launch-and-render-the-welcome-view-successfully-1-linux.png and b/apps/desktop/playwright/snapshots/launch/launch.spec.ts/App-launch-should-launch-and-render-the-welcome-view-successfully-1-linux.png differ
diff --git a/apps/desktop/playwright/tsconfig.json b/apps/desktop/playwright/tsconfig.json
index 4c9756442b..931ff18075 100644
--- a/apps/desktop/playwright/tsconfig.json
+++ b/apps/desktop/playwright/tsconfig.json
@@ -1,11 +1,12 @@
 {
     "compilerOptions": {
         "resolveJsonModule": true,
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "esModuleInterop": true,
         "target": "es2022",
-        "module": "es2022",
-        "lib": ["es2022", "dom"],
+        "module": "ESNext",
+        "lib": ["es2024", "dom", "dom.iterable"],
+        "strictNullChecks": false,
         "types": ["node"]
     },
     "include": ["**/*.ts"]
diff --git a/apps/desktop/project.json b/apps/desktop/project.json
index cb43a99d61..ae1bd1453e 100644
--- a/apps/desktop/project.json
+++ b/apps/desktop/project.json
@@ -19,6 +19,65 @@
                     "tags": ["type=ref,event=branch"]
                 }
             }
+        },
+        "build:ts": {
+            "cache": true,
+            "command": "tsc",
+            "inputs": ["src", "{projectRoot}/tsconfig.json"],
+            "outputs": ["{projectRoot}/lib/*.js", "{projectRoot}/lib/*.d.ts"],
+            "options": { "cwd": "apps/desktop" }
+        },
+        "build:res": {
+            "cache": true,
+            "command": "node scripts/copy-res.ts",
+            "inputs": ["{projectRoot}/i18n"],
+            "outputs": ["{projectRoot}/lib/i18n"],
+            "options": { "cwd": "apps/desktop" }
+        },
+        "build": {
+            "cache": true,
+            "command": "pnpm exec electron-builder",
+            "inputs": [
+                "src",
+                "{projectRoot}/.hak/hakModules",
+                "{projectRoot}/electron-builder.json",
+                "{projectRoot}/webapp.asar"
+            ],
+            "outputs": ["{projectRoot}/dist"],
+            "options": { "cwd": "apps/desktop" },
+            "dependsOn": ["build:*"]
+        },
+        "start": {
+            "command": "electron .",
+            "options": { "cwd": "apps/desktop" },
+            "dependsOn": ["build:*"]
+        },
+        "test:playwright": {
+            "command": "playwright test",
+            "options": { "cwd": "apps/desktop" }
+        },
+        "test:playwright:screenshots:build-app": {
+            "executor": "nx:run-commands",
+            "options": {
+                "commands": [
+                    "pnpm run build -l --x64 --dir --publish=never",
+                    "pnpm exec electron-fuses write --app ./dist/linux-unpacked/element-desktop EnableNodeCliInspectArguments=on"
+                ],
+                "parallel": false,
+                "cwd": "apps/desktop"
+            },
+            "dependsOn": ["build:*"]
+        },
+        "test:playwright:screenshots:build-docker": {
+            "cache": true,
+            "command": "docker build -f playwright/Dockerfile -t element-desktop-playwright --platform linux/amd64 ../..",
+            "inputs": ["{projectRoot}/playwright/Dockerfile", "{projectRoot}/playwright/docker-entrypoint.sh"],
+            "options": { "cwd": "apps/desktop" }
+        },
+        "test:playwright:screenshots": {
+            "command": "docker run --rm --network host -v $(pwd)/../../:/work/ --platform linux/amd64 -it element-desktop-playwright",
+            "options": { "cwd": "apps/desktop" },
+            "dependsOn": ["test:playwright:screenshots:*"]
         }
     }
 }
diff --git a/apps/desktop/src/i18n/strings/zh_Hans.json b/apps/desktop/src/i18n/strings/zh_Hans.json
index 448412456d..d9b6be5832 100644
--- a/apps/desktop/src/i18n/strings/zh_Hans.json
+++ b/apps/desktop/src/i18n/strings/zh_Hans.json
@@ -22,7 +22,9 @@
         "about": "关于",
         "brand_help": "%(brand)s帮助",
         "help": "帮助",
-        "preferences": "偏好"
+        "no": "否",
+        "preferences": "偏好",
+        "yes": "是"
     },
     "confirm_quit": "你确定要退出吗？",
     "edit_menu": {
@@ -30,9 +32,20 @@
         "speech_start_speaking": "开始讲话",
         "speech_stop_speaking": "停止讲话"
     },
+    "eol": {
+        "no_more_updates": "你正在使用的 macOS 版本不受支持。请升级以获取 %(brand)s 更新。",
+        "title": "不受支持的系统",
+        "warning": "你正在使用的 macOS 版本不受支持。请升级系统以确保 %(brand)s 能保持运行。"
+    },
     "file_menu": {
         "label": "文件"
     },
+    "icon_overlay": {
+        "description_error": "错误",
+        "description_notifications": {
+            "other": "你有 %(count)s 条未读通知。"
+        }
+    },
     "menu": {
         "hide": "隐藏",
         "hide_others": "隐藏其他",
@@ -49,6 +62,21 @@
         "save_image_as_error_description": "图片保存失败",
         "save_image_as_error_title": "图片保存失败"
     },
+    "store": {
+        "error": {
+            "backend_changed": "清除数据并重新加载？",
+            "backend_changed_detail": "无法从系统密钥环访问密钥，该密钥似乎已被更改。",
+            "backend_changed_title": "数据库加载失败",
+            "backend_no_encryption": "你的系统支持密钥环，但加密功能不可用。",
+            "backend_no_encryption_detail": "Electron 检测到你的密钥环 %(backend)s 的加密不可用。请确保已安装该密钥环。若已安装请重启设备后重试。也可选择允许 %(brand)s 使用弱加密方式。",
+            "backend_no_encryption_title": "不支持加密",
+            "unsupported_keyring": "你的系统存在不受支持的密钥环，这意味着无法打开数据库。",
+            "unsupported_keyring_detail": "Electron 的密钥环检测未找到受支持的后端。你可以尝试通过命令行参数启动 %(brand)s 来手动配置后端，此操作仅需执行一次。详情请参阅：%(link)s。",
+            "unsupported_keyring_title": "不受支持的系统",
+            "unsupported_keyring_use_basic_text": "使用弱加密",
+            "unsupported_keyring_use_plaintext": "不使用加密"
+        }
+    },
     "view_menu": {
         "actual_size": "实际大小",
         "toggle_developer_tools": "切换开发者工具",
diff --git a/apps/web/Dockerfile b/apps/web/Dockerfile
index ca8d04950d..2cc7e22fdb 100644
--- a/apps/web/Dockerfile
+++ b/apps/web/Dockerfile
@@ -1,8 +1,8 @@
-# syntax=docker.io/docker/dockerfile:1.22-labs@sha256:4c116b618ed48404d579b5467127b20986f2a6b29e4b9be2fee841f632db6a86
+# syntax=docker.io/docker/dockerfile:1.23-labs@sha256:7eca9451d94f9b8ad22e44988b92d595d3e4d65163794237949a8c3413fbed5d
 # Context must be the root of the monorepo
 
 # Builder
-FROM --platform=$BUILDPLATFORM node:24-bullseye@sha256:27e462f5db2402700867dfa8ec35e3a68b127fdf61b505db0dd6ab98c38284bb AS builder
+FROM --platform=$BUILDPLATFORM node:24-bullseye@sha256:d2059a9c157c9f70739736979fa3635008bf3ca74560b30930dc181228bc427f AS builder
 
 # Support custom branch of the js-sdk. This also helps us build images of element-web develop.
 ARG USE_CUSTOM_SDKS=false
@@ -25,7 +25,7 @@ RUN --mount=type=bind,source=.git,target=/src/.git /src/scripts/docker-package.s
 RUN cp /src/apps/web/config.sample.json /src/apps/web/webapp/config.json
 
 # App
-FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:b5831ee7f7aa827cbae87df4a30a642f62c747d8525f5674365389f3adab278d
+FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:360465db60105a4cbf5215cd9e5a2ba40ef956978dd94f99707e9674050e38ea
 
 # Need root user to install packages & manipulate the usr directory
 USER root
diff --git a/apps/web/Dockerfile.dockerignore b/apps/web/Dockerfile.dockerignore
index 403d667eaa..f43268b142 100644
--- a/apps/web/Dockerfile.dockerignore
+++ b/apps/web/Dockerfile.dockerignore
@@ -10,6 +10,7 @@
 **/.pnpm-store
 **/tsconfig.node.tsbuildinfo
 **/*.md
+!**/*.api.md
 **/*.rst
 
 .idea/
@@ -22,6 +23,8 @@ apps/web/webpack-stats.json
 apps/web/playwright/
 apps/web/webapp/
 apps/web/debian/
+apps/desktop
+!apps/desktop/package.json
 
 packages/shared-components/__vis__/
 packages/shared-components/storybook-static/
diff --git a/apps/web/package.json b/apps/web/package.json
index 98b6f8c876..d6d8c9b17b 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -30,15 +30,15 @@
         "lint:types": "nx lint:types",
         "lint:style": "stylelint \"res/css/**/*.pcss\"",
         "test": "nx test:unit",
-        "test:playwright": "playwright test",
-        "test:playwright:open": "pnpm test:playwright --ui",
-        "test:playwright:screenshots": "playwright-screenshots-experimental pnpm playwright test --update-snapshots --project=Chrome --grep @screenshot",
+        "test:playwright": "nx test:playwright --",
+        "test:playwright:open": "nx test:playwright -- --ui",
+        "test:playwright:screenshots": "nx test:playwright:screenshots --",
         "coverage": "pnpm test --coverage",
         "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp"
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@element-hq/element-web-module-api": "catalog:",
+        "@element-hq/element-web-module-api": "workspace:*",
         "@element-hq/web-shared-components": "workspace:*",
         "@fontsource/fira-code": "^5",
         "@fontsource/inter": "catalog:",
@@ -72,7 +72,7 @@
         "glob-to-regexp": "^0.4.1",
         "highlight.js": "^11.3.1",
         "html-entities": "^2.0.0",
-        "html-react-parser": "^5.2.2",
+        "html-react-parser": "^6.0.0",
         "is-ip": "^5.0.0",
         "js-xxhash": "^5.0.0",
         "jsrsasign": "^11.0.0",
@@ -89,7 +89,7 @@
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.364.7",
+        "posthog-js": "1.369.3",
         "qrcode": "1.5.4",
         "re-resizable": "6.11.2",
         "react": "catalog:",
@@ -101,10 +101,9 @@
         "react-transition-group": "^4.4.1",
         "rfc4648": "^1.4.0",
         "sanitize-filename": "^1.6.3",
-        "sanitize-html": "2.17.2",
+        "sanitize-html": "2.17.3",
         "tar-js": "^0.3.0",
         "ua-parser-js": "1.0.40",
-        "uuid": "^13.0.0",
         "what-input": "^5.2.10"
     },
     "devDependencies": {
@@ -125,10 +124,9 @@
         "@babel/preset-env": "^7.12.11",
         "@babel/preset-react": "^7.12.10",
         "@babel/preset-typescript": "^7.12.7",
-        "@casualbot/jest-sonar-reporter": "2.5.0",
-        "@element-hq/element-call-embedded": "0.18.0",
-        "@element-hq/element-web-playwright-common": "catalog:",
-        "@element-hq/element-web-playwright-common-local": "workspace:*",
+        "@casualbot/jest-sonar-reporter": "2.6.0",
+        "@element-hq/element-call-embedded": "0.19.1",
+        "@element-hq/element-web-playwright-common": "workspace:*",
         "@fetch-mock/jest": "^0.2.20",
         "@jest/globals": "^30.2.0",
         "@peculiar/webcrypto": "^1.4.3",
@@ -206,17 +204,17 @@
         "mini-css-extract-plugin": "2.10.2",
         "modernizr": "^3.12.0",
         "playwright-core": "catalog:",
-        "postcss": "8.5.8",
+        "postcss": "8.5.10",
         "postcss-easings": "4.0.0",
         "postcss-hexrgba": "2.1.0",
         "postcss-import": "16.1.1",
         "postcss-loader": "8.2.1",
         "postcss-mixins": "12.1.2",
         "postcss-nested": "7.0.2",
-        "postcss-preset-env": "11.2.0",
+        "postcss-preset-env": "11.2.1",
         "postcss-scss": "4.0.9",
         "postcss-simple-vars": "7.0.1",
-        "prettier": "3.8.1",
+        "prettier": "3.8.3",
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
         "semver": "^7.5.2",
diff --git a/apps/web/playwright.config.ts b/apps/web/playwright.config.ts
index f6d15f4e79..6120557148 100644
--- a/apps/web/playwright.config.ts
+++ b/apps/web/playwright.config.ts
@@ -91,7 +91,7 @@ export default defineConfig<{}, WorkerOptions>({
         trace: "on-first-retry",
     },
     webServer: {
-        command: process.env.CI ? "npx serve -p 8080 -L ./webapp" : "pnpm start",
+        command: process.env.CI ? "npx serve -p 8080 -L ./webapp" : "nx --outputStyle stream start",
         url: `${baseURL}/config.json`,
         reuseExistingServer: true,
         timeout: (process.env.CI ? 30 : 120) * 1000,
diff --git a/apps/web/playwright/e2e/app-loading/guest-registration.spec.ts b/apps/web/playwright/e2e/app-loading/guest-registration.spec.ts
index 960b6a6692..d5679bc017 100644
--- a/apps/web/playwright/e2e/app-loading/guest-registration.spec.ts
+++ b/apps/web/playwright/e2e/app-loading/guest-registration.spec.ts
@@ -20,7 +20,7 @@ test.use({
 
 test("Shows the welcome page by default", async ({ page }) => {
     await page.goto("/");
-    await expect(page.getByRole("heading", { name: "Welcome to Element!" })).toBeVisible();
+    await expect(page.getByRole("heading", { name: "Be in your element" })).toBeVisible();
     await expect(page.getByRole("link", { name: "Sign in" })).toBeVisible();
 });
 
diff --git a/apps/web/playwright/e2e/audio-player/audio-player.spec.ts b/apps/web/playwright/e2e/audio-player/audio-player.spec.ts
index f042b07993..e0b707e9cd 100644
--- a/apps/web/playwright/e2e/audio-player/audio-player.spec.ts
+++ b/apps/web/playwright/e2e/audio-player/audio-player.spec.ts
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import type { Locator, Page } from "@playwright/test";
-import { test, expect } from "../../element-web-test";
+import { test, expect, type ExtendedToMatchScreenshotOptions } from "../../element-web-test";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
 import { Layout } from "../../../src/settings/enums/Layout";
 import { type ElementAppPage } from "../../pages/ElementAppPage";
@@ -94,7 +94,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         // Assert that rendering of the player settled and the play button is visible before taking a snapshot
         await checkPlayerVisibility(ircTile);
 
-        const screenshotOptions = {
+        const screenshotOptions: ExtendedToMatchScreenshotOptions = {
             css: `
                 /* The timestamp is of inconsistent width depending on the time the test runs at */
                 .mx_MessageTimestamp {
@@ -120,7 +120,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         };
 
         // Take a snapshot of mx_EventTile_last on IRC layout
-        screenshotOptions.clip = await page.locator(".mx_EventTile_last").boundingBox();
+        screenshotOptions.clip = (await page.locator(".mx_EventTile_last").boundingBox()) ?? undefined;
         await scrollToBottomOfTimeline(page);
         await expect(page).toMatchScreenshot(`${detail.replaceAll(" ", "-")}-irc-layout.png`, screenshotOptions);
 
@@ -129,7 +129,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         const groupTile = page.locator(".mx_EventTile_last[data-layout='group']");
         await groupTile.locator(".mx_MessageTimestamp").click();
         await checkPlayerVisibility(groupTile);
-        screenshotOptions.clip = await page.locator(".mx_EventTile_last").boundingBox();
+        screenshotOptions.clip = (await page.locator(".mx_EventTile_last").boundingBox()) ?? undefined;
         await scrollToBottomOfTimeline(page);
         await expect(page).toMatchScreenshot(`${detail.replaceAll(" ", "-")}-group-layout.png`, screenshotOptions);
 
@@ -138,7 +138,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         const bubbleTile = page.locator(".mx_EventTile_last[data-layout='bubble']");
         await bubbleTile.locator(".mx_MessageTimestamp").click();
         await checkPlayerVisibility(bubbleTile);
-        screenshotOptions.clip = await page.locator(".mx_EventTile_last").boundingBox();
+        screenshotOptions.clip = (await page.locator(".mx_EventTile_last").boundingBox()) ?? undefined;
         await scrollToBottomOfTimeline(page);
         await expect(page).toMatchScreenshot(`${detail.replaceAll(" ", "-")}-bubble-layout.png`, screenshotOptions);
     };
diff --git a/apps/web/playwright/e2e/crypto/crypto.spec.ts b/apps/web/playwright/e2e/crypto/crypto.spec.ts
index d03fa1454e..a5dfd32755 100644
--- a/apps/web/playwright/e2e/crypto/crypto.spec.ts
+++ b/apps/web/playwright/e2e/crypto/crypto.spec.ts
@@ -27,6 +27,9 @@ const startDMWithBob = async (page: Page, bob: Bot) => {
     await page.getByRole("option", { name: bob.credentials.displayName }).click();
     await expect(page.getByTestId("invite-dialog-input-wrapper").getByText("Bob")).toBeVisible();
     await page.getByRole("button", { name: "Go" }).click();
+
+    await expect(page.getByRole("heading", { name: "Start a chat with this new contact?" })).toBeVisible();
+    await page.getByRole("button", { name: "Continue" }).click();
 };
 
 const testMessages = async (page: Page, bob: Bot, bobRoomId: string) => {
@@ -44,7 +47,7 @@ const bobJoin = async (page: Page, bob: Bot) => {
         const bobRooms = cli.getRooms();
         if (!bobRooms.length) {
             await new Promise<void>((resolve) => {
-                const onMembership = (_event) => {
+                const onMembership = () => {
                     cli.off(window.matrixcs.RoomMemberEvent.Membership, onMembership);
                     resolve();
                 };
diff --git a/apps/web/playwright/e2e/crypto/decryption-failure-messages.spec.ts b/apps/web/playwright/e2e/crypto/decryption-failure-messages.spec.ts
index 728b3bf620..1dc04ee905 100644
--- a/apps/web/playwright/e2e/crypto/decryption-failure-messages.spec.ts
+++ b/apps/web/playwright/e2e/crypto/decryption-failure-messages.spec.ts
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import type { EmittedEvents, Preset } from "matrix-js-sdk/src/matrix";
+import type { Preset, RoomMemberEvent, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { expect, test } from "../../element-web-test";
 import {
     createRoom,
@@ -122,7 +122,7 @@ test.describe("Cryptography", function () {
                 const roomId = await bob.evaluate(
                     async (client, { alice }) => {
                         const encryptionStatePromise = new Promise<void>((resolve) => {
-                            client.on("RoomState.events" as EmittedEvents, (event, _state, _lastStateEvent) => {
+                            client.on("RoomState.events" as RoomStateEvent.Events, (event, _state, _lastStateEvent) => {
                                 if (event.getType() === "m.room.encryption") {
                                     resolve();
                                 }
@@ -253,11 +253,14 @@ test.describe("Cryptography", function () {
 
                         // invite Alice
                         const inviteAlicePromise = new Promise<void>((resolve) => {
-                            client.on("RoomMember.membership" as EmittedEvents, (_event, member, _oldMembership?) => {
-                                if (member.userId === alice.userId && member.membership === "invite") {
-                                    resolve();
-                                }
-                            });
+                            client.on(
+                                "RoomMember.membership" as RoomMemberEvent.Membership,
+                                (_event, member, _oldMembership?) => {
+                                    if (member.userId === alice.userId && member.membership === "invite") {
+                                        resolve();
+                                    }
+                                },
+                            );
                         });
                         await client.invite(roomId, alice.userId);
                         // wait for the invite to come back so that we encrypt to Alice
@@ -271,11 +274,14 @@ test.describe("Cryptography", function () {
 
                         // kick Alice
                         const kickAlicePromise = new Promise<void>((resolve) => {
-                            client.on("RoomMember.membership" as EmittedEvents, (_event, member, _oldMembership?) => {
-                                if (member.userId === alice.userId && member.membership === "leave") {
-                                    resolve();
-                                }
-                            });
+                            client.on(
+                                "RoomMember.membership" as RoomMemberEvent.Membership,
+                                (_event, member, _oldMembership?) => {
+                                    if (member.userId === alice.userId && member.membership === "leave") {
+                                        resolve();
+                                    }
+                                },
+                            );
                         });
                         await client.kick(roomId, alice.userId);
                         await kickAlicePromise;
diff --git a/apps/web/playwright/e2e/crypto/dehydration.spec.ts b/apps/web/playwright/e2e/crypto/dehydration.spec.ts
index 2707e2d45d..ccb98e89df 100644
--- a/apps/web/playwright/e2e/crypto/dehydration.spec.ts
+++ b/apps/web/playwright/e2e/crypto/dehydration.spec.ts
@@ -166,13 +166,9 @@ async function getDehydratedDeviceIds(client: Client): Promise<string[]> {
     return await client.evaluate(async (client) => {
         const userId = client.getUserId();
         const devices = await client.getCrypto().getUserDeviceInfo([userId]);
-        return Array.from(
-            devices
-                .get(userId)
-                .values()
-                .filter((d) => d.dehydrated)
-                .map((d) => d.deviceId),
-        );
+        return Array.from(devices.get(userId).values())
+            .filter((d) => d.dehydrated)
+            .map((d) => d.deviceId);
     });
 }
 
diff --git a/apps/web/playwright/e2e/crypto/device-verification.spec.ts b/apps/web/playwright/e2e/crypto/device-verification.spec.ts
index 1a1731e6ae..07fa4ed9d8 100644
--- a/apps/web/playwright/e2e/crypto/device-verification.spec.ts
+++ b/apps/web/playwright/e2e/crypto/device-verification.spec.ts
@@ -21,7 +21,6 @@ import {
     waitForVerificationRequest,
 } from "./utils";
 import { type Bot } from "../../pages/bot";
-import { Toasts } from "../../pages/toasts.ts";
 import type { ElementAppPage } from "../../pages/ElementAppPage.ts";
 
 test.describe("Device verification", { tag: "@no-webkit" }, () => {
@@ -82,7 +81,11 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
     );
 
     // Regression test for https://github.com/element-hq/element-web/issues/29110
-    test("No toast after verification, even if the secrets take a while to arrive", async ({ page, credentials }) => {
+    test("No toast after verification, even if the secrets take a while to arrive", async ({
+        page,
+        credentials,
+        toasts,
+    }) => {
         // Before we log in, the bot creates an encrypted room, so that we can test the toast behaviour that only happens
         // when we are in an encrypted room.
         await aliceBotClient.createRoom({
@@ -121,7 +124,6 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         await infoDialog.getByRole("button", { name: "Got it" }).click();
 
         // There should be no toast (other than the notifications one)
-        const toasts = new Toasts(page);
         await toasts.rejectToast("Notifications");
         await toasts.assertNoToasts();
 
diff --git a/apps/web/playwright/e2e/crypto/history-sharing.spec.ts b/apps/web/playwright/e2e/crypto/history-sharing.spec.ts
index 3974ba79c5..29676036ba 100644
--- a/apps/web/playwright/e2e/crypto/history-sharing.spec.ts
+++ b/apps/web/playwright/e2e/crypto/history-sharing.spec.ts
@@ -49,7 +49,7 @@ test.describe("History sharing", function () {
             await sendMessageInCurrentRoom(alicePage, "A message from Alice");
 
             // Send the invite to Bob
-            await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId);
+            await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId, { confirmUnknownUser: true });
 
             // Bob accepts the invite
             await bobPage.getByRole("option", { name: "TestRoom" }).click();
@@ -105,7 +105,7 @@ test.describe("History sharing", function () {
 
         // Alice invites Bob, and Bob accepts
         const roomId = await aliceElementApp.getCurrentRoomIdFromUrl();
-        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId);
+        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId, { confirmUnknownUser: true });
         await bobPage.getByRole("option", { name: "TestRoom" }).click();
         await bobPage.getByRole("button", { name: "Accept" }).click();
 
@@ -143,7 +143,7 @@ test.describe("History sharing", function () {
         await sendMessageInCurrentRoom(bobPage, "Message3: 'shared' visibility, but Bob thinks it is still 'joined'");
 
         // Alice now invites Charlie
-        await aliceElementApp.inviteUserToCurrentRoom(charlieCredentials.userId);
+        await aliceElementApp.inviteUserToCurrentRoom(charlieCredentials.userId, { confirmUnknownUser: true });
         await charliePage.getByRole("option", { name: "TestRoom" }).click();
         await charliePage.getByRole("button", { name: "Accept" }).click();
 
diff --git a/apps/web/playwright/e2e/crypto/toasts.spec.ts b/apps/web/playwright/e2e/crypto/toasts.spec.ts
index 876000009b..9ce1b8a5ae 100644
--- a/apps/web/playwright/e2e/crypto/toasts.spec.ts
+++ b/apps/web/playwright/e2e/crypto/toasts.spec.ts
@@ -43,11 +43,7 @@ test.describe("Key storage out of sync toast", () => {
     });
 
     test("should prompt for recovery key if 'enter recovery key' pressed", { tag: "@screenshot" }, async ({ page }) => {
-        // We need to wait for there to be two toasts as the wait below won't work in isolation:
-        // playwright only evaluates the 'first()' call initially, not subsequent times it checks, so
-        // it would always be checking the same toast, even if another one is now the first.
-        await expect(page.getByRole("alert")).toHaveCount(2);
-        await expect(page.getByRole("alert").first()).toMatchScreenshot(
+        await expect(page.getByRole("alert").filter({ hasText: "Your key storage is out of sync." })).toMatchScreenshot(
             "key-storage-out-of-sync-toast.png",
             screenshotOptions,
         );
diff --git a/apps/web/playwright/e2e/crypto/utils.ts b/apps/web/playwright/e2e/crypto/utils.ts
index 56378358ea..479ae12a78 100644
--- a/apps/web/playwright/e2e/crypto/utils.ts
+++ b/apps/web/playwright/e2e/crypto/utils.ts
@@ -579,8 +579,8 @@ export async function deleteCachedSecrets(page: Page) {
     await page.evaluate(async () => {
         const removeCachedSecrets = new Promise((resolve) => {
             const request = window.indexedDB.open("matrix-js-sdk::matrix-sdk-crypto");
-            request.onsuccess = (event: Event & { target: { result: IDBDatabase } }) => {
-                const db = event.target.result;
+            request.onsuccess = function (this: IDBRequest) {
+                const db = this.result as IDBDatabase;
                 const request = db.transaction("core", "readwrite").objectStore("core").delete("private_identity");
                 request.onsuccess = () => {
                     db.close();
diff --git a/apps/web/playwright/e2e/invite/invite-dialog.spec.ts b/apps/web/playwright/e2e/invite/invite-dialog.spec.ts
index 42588f37c7..60fb6bf4af 100644
--- a/apps/web/playwright/e2e/invite/invite-dialog.spec.ts
+++ b/apps/web/playwright/e2e/invite/invite-dialog.spec.ts
@@ -9,6 +9,15 @@ Please see LICENSE files in the repository root for full details.
 
 import { test, expect } from "../../element-web-test";
 
+/**
+ * CSS which will hide the mxid in the user list of the "unknown users" confirmation dialog. This is useful because the
+ * MXID is not stable and the screenshot tests will otherwise fail.
+ *
+ * Ideally RichItem would give us a way to do this that doesn't involve gnarly CSS.
+ */
+const UNKNOWN_IDENTITY_USERS_DIALOG_HIDE_MXID_CSS =
+    '[data-testid="userlist"] li > span:nth-last-child(1) { display: none }';
+
 test.describe("Invite dialog", function () {
     test.use({
         displayName: "Hanako",
@@ -62,6 +71,15 @@ test.describe("Invite dialog", function () {
         // Invite the bot
         await other.getByRole("button", { name: "Invite" }).click();
 
+        // Expect a confirmation dialog, screenshot, and dismiss
+        await expect(
+            page.locator(".mx_Dialog").getByRole("heading", { name: "Invite new contacts to this room?" }),
+        ).toBeVisible();
+        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("confirm-invite-new-contact.png", {
+            css: UNKNOWN_IDENTITY_USERS_DIALOG_HIDE_MXID_CSS,
+        });
+        await page.locator(".mx_Dialog").getByRole("button", { name: "Invite" }).click();
+
         // Assert that the invite dialog disappears
         await expect(page.locator(".mx_InviteDialog_other")).not.toBeVisible();
 
@@ -104,6 +122,15 @@ test.describe("Invite dialog", function () {
             // Open a direct message UI
             await other.getByRole("button", { name: "Go" }).click();
 
+            // Expect a confirmation dialog, screenshot, and dismiss
+            await expect(
+                page.locator(".mx_Dialog").getByRole("heading", { name: "Start a chat with this new contact?" }),
+            ).toBeVisible();
+            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("confirm-chat-with-new-contact.png", {
+                css: UNKNOWN_IDENTITY_USERS_DIALOG_HIDE_MXID_CSS,
+            });
+            await page.locator(".mx_Dialog").getByRole("button", { name: "Continue" }).click();
+
             // Assert that the invite dialog disappears
             await expect(page.locator(".mx_InviteDialog_other")).not.toBeVisible();
 
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-custom-sections.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-custom-sections.spec.ts
new file mode 100644
index 0000000000..01146ef0dd
--- /dev/null
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-custom-sections.spec.ts
@@ -0,0 +1,267 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { type Page } from "@playwright/test";
+
+import { expect, test } from "../../../element-web-test";
+import { getRoomList, getRoomListHeader, getSectionHeader } from "./utils";
+
+test.describe("Room list custom sections", () => {
+    test.use({
+        displayName: "Alice",
+        labsFlags: ["feature_new_room_list", "feature_room_list_sections"],
+        botCreateOpts: {
+            displayName: "BotBob",
+            autoAcceptInvites: true,
+        },
+    });
+
+    /**
+     * Create a custom section via the header compose menu and dialog.
+     * @param page
+     * @param sectionName The name of the section to create
+     */
+    async function createCustomSection(page: Page, sectionName: string): Promise<void> {
+        const composeMenu = getRoomListHeader(page).getByRole("button", { name: "New conversation" });
+        await composeMenu.click();
+        await page.getByRole("menuitem", { name: "New section" }).click();
+
+        // Fill in the section name in the dialog
+        const dialog = page.getByRole("dialog", { name: "Create a section" });
+        await expect(dialog).toBeVisible();
+        await dialog.getByRole("textbox", { name: "Section name" }).fill(sectionName);
+        await dialog.getByRole("button", { name: "Create section" }).click();
+
+        // Wait for the dialog to close
+        await expect(dialog).not.toBeVisible();
+    }
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+
+        // Focus the user menu to avoid hover decoration
+        await page.getByRole("button", { name: "User menu" }).focus();
+    });
+
+    test.describe("Section creation", () => {
+        test("should create a custom section via the header compose menu", async ({ page, app }) => {
+            await app.client.createRoom({ name: "my room" });
+
+            await createCustomSection(page, "Work");
+
+            // The custom section header should be visible (even though it is empty)
+            await expect(getSectionHeader(page, "Work")).toBeVisible();
+            // The Chats section should also be visible
+            await expect(getSectionHeader(page, "Chats")).toBeVisible();
+        });
+
+        test("should show 'Section created' toast after creating a section", async ({ page, app }) => {
+            await app.client.createRoom({ name: "my room" });
+
+            await createCustomSection(page, "Personal");
+
+            // The "Section created" toast should appear
+            await expect(page.getByText("Section created")).toBeVisible();
+        });
+
+        test("should create a custom section via the room option menu", async ({ page, app }) => {
+            await app.client.createRoom({ name: "my room" });
+
+            const roomList = getRoomList(page);
+            const roomItem = roomList.getByRole("option", { name: "Open room my room" });
+            await expect(roomItem).toBeVisible();
+
+            // Open the More Options menu
+            await roomItem.hover();
+            await roomItem.getByRole("button", { name: "More Options" }).click();
+
+            // Open the "Move to" submenu
+            await page.getByRole("menuitem", { name: "Move to" }).hover();
+
+            // Click on "New section"
+            await page.getByRole("menuitem", { name: "New section" }).click();
+
+            // Fill in the section name in the dialog
+            const dialog = page.getByRole("dialog", { name: "Create a section" });
+            await expect(dialog).toBeVisible();
+            await dialog.getByRole("textbox", { name: "Section name" }).fill("Projects");
+            await dialog.getByRole("button", { name: "Create section" }).click();
+
+            // Wait for the dialog to close
+            await expect(dialog).not.toBeVisible();
+
+            // The custom section should be created
+            await expect(getSectionHeader(page, "Projects")).toBeVisible();
+        });
+
+        test("should cancel section creation when dialog is dismissed", async ({ page, app }) => {
+            await app.client.createRoom({ name: "my room" });
+
+            const composeMenu = getRoomListHeader(page).getByRole("button", { name: "New conversation" });
+            await composeMenu.click();
+            await page.getByRole("menuitem", { name: "New section" }).click();
+
+            // The dialog should appear
+            const dialog = page.getByRole("dialog", { name: "Create a section" });
+            await expect(dialog).toBeVisible();
+
+            // Cancel the dialog
+            await dialog.getByRole("button", { name: "Cancel" }).click();
+
+            // The dialog should close
+            await expect(dialog).not.toBeVisible();
+
+            // No custom section should be created - should remain a flat list
+            await expect(getSectionHeader(page, "Chats")).not.toBeVisible();
+        });
+
+        test("should create multiple custom sections", async ({ page, app }) => {
+            await app.client.createRoom({ name: "my room" });
+
+            await createCustomSection(page, "Work");
+            await createCustomSection(page, "Personal");
+
+            // Both custom sections should be visible
+            await expect(getSectionHeader(page, "Work")).toBeVisible();
+            await expect(getSectionHeader(page, "Personal")).toBeVisible();
+            await expect(getSectionHeader(page, "Chats")).toBeVisible();
+        });
+    });
+
+    test.describe("Custom section display", () => {
+        test("should show empty custom sections", async ({ page, app }) => {
+            // Create a room so the Chats section has something
+            await app.client.createRoom({ name: "my room" });
+
+            await createCustomSection(page, "Empty Section");
+
+            // The custom section should be visible even with no rooms
+            await expect(getSectionHeader(page, "Empty Section")).toBeVisible();
+            // The room should still be in the Chats section
+            const roomList = getRoomList(page);
+            await expect(roomList.getByRole("row", { name: "Open room my room" })).toBeVisible();
+        });
+
+        test("should display custom sections between Favourites and Chats", async ({ page, app }) => {
+            // Create a favourite room
+            const favouriteId = await app.client.createRoom({ name: "favourite room" });
+            await app.client.evaluate(async (client, roomId) => {
+                await client.setRoomTag(roomId, "m.favourite");
+            }, favouriteId);
+
+            // Create a low priority room
+            const lowPrioId = await app.client.createRoom({ name: "low prio room" });
+            await app.client.evaluate(async (client, roomId) => {
+                await client.setRoomTag(roomId, "m.lowpriority");
+            }, lowPrioId);
+
+            // Create a regular room
+            await app.client.createRoom({ name: "regular room" });
+
+            // Create a custom section
+            await createCustomSection(page, "Work");
+
+            // All section headers should be visible
+            await expect(getSectionHeader(page, "Favourites")).toBeVisible();
+            await expect(getSectionHeader(page, "Work")).toBeVisible();
+            // Should be expanded by default
+            await expect(getSectionHeader(page, "Work")).toHaveAttribute("aria-expanded", "true");
+            await expect(getSectionHeader(page, "Chats")).toBeVisible();
+            await expect(getSectionHeader(page, "Low Priority")).toBeVisible();
+        });
+    });
+
+    test.describe("Adding a room to a custom section", () => {
+        /**
+         * Asserts a room is nested under a specific section using the treegrid aria-level hierarchy.
+         * Section header rows sit at aria-level=1; room rows nested within a section sit at aria-level=2.
+         * Verifies that the closest preceding aria-level=1 row is the expected section header.
+         */
+        async function assertRoomInSection(page: Page, sectionName: string, roomName: string): Promise<void> {
+            const roomList = getRoomList(page);
+            const roomRow = roomList.getByRole("row", { name: `Open room ${roomName}` });
+            // Room row must be at aria-level=2 (i.e. inside a section)
+            await expect(roomRow).toHaveAttribute("aria-level", "2");
+            // The closest preceding aria-level=1 row must be the expected section header.
+            // XPath preceding:: axis returns nodes before the context in document order; [1] picks the nearest one.
+            const closestSectionHeader = roomRow.locator(`xpath=preceding::*[@role="row" and @aria-level="1"][1]`);
+            await expect(closestSectionHeader).toContainText(sectionName);
+        }
+
+        test("should add a room to a custom section via the More Options menu", async ({ page, app }) => {
+            await app.client.createRoom({ name: "my room" });
+            await createCustomSection(page, "Work");
+
+            const roomList = getRoomList(page);
+
+            // Room starts in Chats section (aria-level=2)
+            const roomItem = roomList.getByRole("row", { name: "Open room my room" });
+            await expect(roomItem).toBeVisible();
+
+            // Open More Options and move to the Work section
+            await roomItem.hover();
+            await roomItem.getByRole("button", { name: "More Options" }).click();
+            await page.getByRole("menuitem", { name: "Move to" }).hover();
+            await page.getByRole("menuitem", { name: "Work" }).click();
+
+            // Room should now be nested under the Work section header (aria-level=1 → aria-level=2)
+            await assertRoomInSection(page, "Work", "my room");
+        });
+
+        test(
+            "should show 'Chat moved' toast when adding a room to a custom section",
+            { tag: "@screenshot" },
+            async ({ page, app }) => {
+                await app.client.createRoom({ name: "my room" });
+                await createCustomSection(page, "Work");
+
+                const roomList = getRoomList(page);
+                const roomItem = roomList.getByRole("row", { name: "Open room my room" });
+
+                await roomItem.hover();
+                await roomItem.getByRole("button", { name: "More Options" }).click();
+                await page.getByRole("menuitem", { name: "Move to" }).hover();
+                await page.getByRole("menuitem", { name: "Work" }).click();
+
+                // The "Chat moved" toast should appear
+                await expect(page.getByText("Chat moved")).toBeVisible();
+
+                // Remove focus outline from the room item before taking the screenshot
+                await page.getByRole("button", { name: "User menu" }).focus();
+
+                await expect(roomList).toMatchScreenshot("room-list-sections-chat-moved-toast.png");
+            },
+        );
+
+        test("should remove a room from a custom section when toggling the same section", async ({ page, app }) => {
+            await app.client.createRoom({ name: "my room" });
+            await createCustomSection(page, "Work");
+
+            const roomList = getRoomList(page);
+
+            // Move to Work section and verify placement via aria-level
+            let roomItem = roomList.getByRole("row", { name: "Open room my room" });
+            await roomItem.hover();
+            await roomItem.getByRole("button", { name: "More Options" }).click();
+            await page.getByRole("menuitem", { name: "Move to" }).hover();
+            await page.getByRole("menuitem", { name: "Work" }).click();
+
+            await assertRoomInSection(page, "Work", "my room");
+
+            // Toggle off by selecting the same section again
+            roomItem = roomList.getByRole("row", { name: "Open room my room" });
+            await roomItem.hover();
+            await roomItem.getByRole("button", { name: "More Options" }).click();
+            await page.getByRole("menuitem", { name: "Move to" }).hover();
+            await page.getByRole("menuitem", { name: "Work" }).click();
+
+            // Room is back in the Chats section
+            await assertRoomInSection(page, "Chats", "my room");
+        });
+    });
+});
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
index 99ffed3ff8..7356a2e6bf 100644
--- a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
@@ -6,10 +6,11 @@
  */
 
 import { type Visibility } from "matrix-js-sdk/src/matrix";
-import { type Locator, type Page } from "@playwright/test";
+import { type Page } from "@playwright/test";
 
 import { expect, test } from "../../../element-web-test";
 import { SettingLevel } from "../../../../src/settings/SettingLevel";
+import { getFilterCollapseButton, getFilterExpandButton, getPrimaryFilters, getRoomOptionsMenu } from "./utils";
 
 test.describe("Room list filters and sort", () => {
     test.use({
@@ -21,22 +22,6 @@ test.describe("Room list filters and sort", () => {
         labsFlags: ["feature_new_room_list"],
     });
 
-    function getPrimaryFilters(page: Page): Locator {
-        return page.getByTestId("primary-filters");
-    }
-
-    function getRoomOptionsMenu(page: Page): Locator {
-        return page.getByRole("button", { name: "Room Options" });
-    }
-
-    function getFilterExpandButton(page: Page): Locator {
-        return getPrimaryFilters(page).getByRole("button", { name: "Expand filter list" });
-    }
-
-    function getFilterCollapseButton(page: Page): Locator {
-        return getPrimaryFilters(page).getByRole("button", { name: "Collapse filter list" });
-    }
-
     /**
      * Get the room list
      * @param page
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-header.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-header.spec.ts
index 96e0ca8597..1ffa49429d 100644
--- a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-header.spec.ts
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-header.spec.ts
@@ -6,21 +6,13 @@
  */
 
 import { test, expect } from "../../../element-web-test";
-import type { Page } from "@playwright/test";
+import { getHeaderSection } from "./utils";
 
 test.describe("Header section of the room list", () => {
     test.use({
         labsFlags: ["feature_new_room_list"],
     });
 
-    /**
-     * Get the header section of the room list
-     * @param page
-     */
-    function getHeaderSection(page: Page) {
-        return page.getByTestId("room-list-header");
-    }
-
     test.beforeEach(async ({ page, app, user }) => {
         // The notification toast is displayed above the search section
         await app.closeNotificationToast();
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts
index bc1387cbce..ad87eac89b 100644
--- a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts
@@ -5,23 +5,14 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { type Page } from "@playwright/test";
-
 import { test, expect } from "../../../element-web-test";
+import { getRoomListView } from "./utils";
 
 test.describe("Room list panel", () => {
     test.use({
         labsFlags: ["feature_new_room_list"],
     });
 
-    /**
-     * Get the room list view
-     * @param page
-     */
-    function getRoomListView(page: Page) {
-        return page.getByRole("navigation", { name: "Room list" });
-    }
-
     test.beforeEach(async ({ page, app, user }) => {
         // The notification toast is displayed above the search section
         await app.closeNotificationToast();
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-search.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-search.spec.ts
index 028503f622..37263d9b67 100644
--- a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-search.spec.ts
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-search.spec.ts
@@ -5,23 +5,14 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { type Page } from "@playwright/test";
-
 import { test, expect } from "../../../element-web-test";
+import { getSearchSection } from "./utils";
 
 test.describe("Search section of the room list", () => {
     test.use({
         labsFlags: ["feature_new_room_list"],
     });
 
-    /**
-     * Get the search section of the room list
-     * @param page
-     */
-    function getSearchSection(page: Page) {
-        return page.getByRole("search");
-    }
-
     test.beforeEach(async ({ page, app, user }) => {
         // The notification toast is displayed above the search section
         await app.closeNotificationToast();
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-sections.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-sections.spec.ts
index 9bc9bbe2b0..80651c409f 100644
--- a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-sections.spec.ts
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-sections.spec.ts
@@ -5,9 +5,8 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { type Locator, type Page } from "@playwright/test";
-
 import { expect, test } from "../../../element-web-test";
+import { getPrimaryFilters, getRoomList, getSectionHeader } from "./utils";
 
 test.describe("Room list sections", () => {
     test.use({
@@ -19,34 +18,6 @@ test.describe("Room list sections", () => {
         },
     });
 
-    /**
-     * Get the room list
-     * @param page
-     */
-    function getRoomList(page: Page): Locator {
-        return page.getByTestId("room-list");
-    }
-
-    /**
-     * Get the primary filters
-     * @param page
-     */
-    function getPrimaryFilters(page: Page): Locator {
-        return page.getByTestId("primary-filters");
-    }
-
-    /**
-     * Get a section header toggle button by section name
-     * @param page
-     * @param sectionName The display name of the section (e.g. "Favourites", "Chats", "Low Priority")
-     * @param isUnread Whether to look for the unread version of the section header
-     */
-    function getSectionHeader(page: Page, sectionName: string, isUnread = false): Locator {
-        return getRoomList(page).getByRole("gridcell", {
-            name: isUnread ? `Toggle ${sectionName} section with unread room(s)` : `Toggle ${sectionName} section`,
-        });
-    }
-
     test.beforeEach(async ({ page, app, user }) => {
         // The notification toast is displayed above the search section
         await app.closeNotificationToast();
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
index 5907ad6d97..30dd461041 100644
--- a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
@@ -10,6 +10,7 @@ import { type Page } from "@playwright/test";
 import { expect, test } from "../../../element-web-test";
 import { type Bot } from "../../../pages/bot";
 import { type ElementAppPage } from "../../../pages/ElementAppPage";
+import { getRoomList } from "./utils";
 
 test.describe("Room list", () => {
     test.use({
@@ -20,14 +21,6 @@ test.describe("Room list", () => {
         },
     });
 
-    /**
-     * Get the room list
-     * @param page
-     */
-    function getRoomList(page: Page) {
-        return page.getByTestId("room-list");
-    }
-
     test.beforeEach(async ({ page, app, user }) => {
         // The notification toast is displayed above the search section
         await app.closeNotificationToast();
@@ -328,11 +321,11 @@ test.describe("Room list", () => {
 
             const roomListView = getRoomList(page);
             const videoRoom = roomListView.getByRole("option", { name: "video room" });
+            await expect(videoRoom).toHaveAttribute("aria-selected", "true"); // wait for room list update
 
             // focus the user menu to avoid to have hover decoration
             await page.getByRole("button", { name: "User menu" }).focus();
 
-            await expect(videoRoom).toBeVisible();
             await expect(videoRoom).toMatchScreenshot("room-list-item-video.png");
         });
     });
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/utils.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/utils.ts
new file mode 100644
index 0000000000..523b268c80
--- /dev/null
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/utils.ts
@@ -0,0 +1,92 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { type Locator, type Page } from "@playwright/test";
+
+/**
+ * Get the room list
+ * @param page
+ */
+export function getRoomList(page: Page): Locator {
+    return page.getByTestId("room-list");
+}
+
+/**
+ * Get the room list header
+ * @param page
+ */
+export function getRoomListHeader(page: Page): Locator {
+    return page.getByTestId("room-list-header");
+}
+
+/**
+ * Get a section header toggle button by section name
+ * @param page
+ * @param sectionName The display name of the section
+ * @param isUnread Whether to look for the unread version of the section header
+ */
+export function getSectionHeader(page: Page, sectionName: string, isUnread = false): Locator {
+    return getRoomList(page).getByRole("gridcell", {
+        name: isUnread ? `Toggle ${sectionName} section with unread room(s)` : `Toggle ${sectionName} section`,
+    });
+}
+
+/**
+ * Get the primary filters container
+ * @param page
+ */
+export function getPrimaryFilters(page: Page): Locator {
+    return page.getByTestId("primary-filters");
+}
+
+/**
+ * Get the room options menu button in the room list header
+ * @param page
+ */
+export function getRoomOptionsMenu(page: Page): Locator {
+    return page.getByRole("button", { name: "Room Options" });
+}
+
+/**
+ * Get the filter list expand button in the room list header
+ * @param page
+ */
+export function getFilterExpandButton(page: Page): Locator {
+    return getPrimaryFilters(page).getByRole("button", { name: "Expand filter list" });
+}
+
+/**
+ * Get the filter list collapse button in the room list header
+ * @param page
+ */
+export function getFilterCollapseButton(page: Page): Locator {
+    return getPrimaryFilters(page).getByRole("button", { name: "Collapse filter list" });
+}
+
+/**
+ * Get the header section of the room list
+ * @param page
+ */
+export function getHeaderSection(page: Page) {
+    return page.getByTestId("room-list-header");
+}
+
+/**
+ * Get the room list view
+ * @param page
+ */
+export function getRoomListView(page: Page) {
+    return page.getByRole("navigation", { name: "Room list" });
+}
+
+/**
+ * Get the search section of the room list
+ * @param page
+ */
+export function getSearchSection(page: Page) {
+    return page.getByRole("search");
+}
diff --git a/apps/web/playwright/e2e/login/login-consent.spec.ts b/apps/web/playwright/e2e/login/login-consent.spec.ts
index 19e095f50a..be8b9669a2 100644
--- a/apps/web/playwright/e2e/login/login-consent.spec.ts
+++ b/apps/web/playwright/e2e/login/login-consent.spec.ts
@@ -126,7 +126,7 @@ test.describe("Login", () => {
             await page.goto("/");
 
             // Should give us the welcome page initially
-            await expect(page.getByRole("heading", { name: "Welcome to Element!" })).toBeVisible();
+            await expect(page.getByRole("heading", { name: "Be in your element" })).toBeVisible();
 
             // Start the login process
             await expect(axe).toHaveNoViolations();
diff --git a/apps/web/playwright/e2e/messages/messages.spec.ts b/apps/web/playwright/e2e/messages/messages.spec.ts
index 67af9edb42..2115dc3394 100644
--- a/apps/web/playwright/e2e/messages/messages.spec.ts
+++ b/apps/web/playwright/e2e/messages/messages.spec.ts
@@ -252,6 +252,7 @@ test.describe("Message url previews", () => {
                         "og:title": "A simple site",
                         "og:description": "And with a brief description",
                         "og:image": mxc,
+                        "og:image:alt": "The riot logo",
                     },
                 });
             });
diff --git a/apps/web/playwright/e2e/oidc/oidc-native.spec.ts b/apps/web/playwright/e2e/oidc/oidc-native.spec.ts
index 81964c4e64..6d6c4612c1 100644
--- a/apps/web/playwright/e2e/oidc/oidc-native.spec.ts
+++ b/apps/web/playwright/e2e/oidc/oidc-native.spec.ts
@@ -148,7 +148,8 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
 
             const userId = `alice_${testInfo.testId}`;
             await registerAccountMas(page, mailpitClient, userId, `${userId}@email.com`, "Pa$sW0rD!");
-            await expect(page.getByText("Welcome")).toBeVisible();
+            // richvdh: This takes several seconds to happen on a dev instance
+            await expect(page.getByText("Welcome")).toBeVisible({ timeout: 10000 });
 
             // Log out
             await page.getByRole("button", { name: "User menu" }).click();
@@ -162,11 +163,14 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
 
             // Log in again
             await page.goto("/#/login");
+            await expect(page.getByText("Sign in")).toBeVisible();
             await page.getByRole("button", { name: "Continue" }).click();
+            await expect(page.getByText("Continue to Element?")).toBeVisible();
             await page.getByRole("button", { name: "Continue" }).click();
 
             // We should be being warned that we need to verify (but we can't)
-            await expect(page.getByText("Confirm your digital identity")).toBeVisible();
+            // richvdh: Again, Element takes several seconds to load on a dev instance
+            await expect(page.getByText("Confirm your digital identity")).toBeVisible({ timeout: 10000 });
 
             // And there should be no way to close this prompt
             await expect(page.getByRole("button", { name: "Skip verification for now" })).not.toBeVisible();
diff --git a/apps/web/playwright/e2e/read-receipts/read-receipts.spec.ts b/apps/web/playwright/e2e/read-receipts/read-receipts.spec.ts
index b1142bae59..9e38cd4d71 100644
--- a/apps/web/playwright/e2e/read-receipts/read-receipts.spec.ts
+++ b/apps/web/playwright/e2e/read-receipts/read-receipts.spec.ts
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import type { JSHandle } from "@playwright/test";
-import type { MatrixEvent, ISendEventResponse, ReceiptType } from "matrix-js-sdk/src/matrix";
+import type { MatrixEvent, ISendEventResponse, ReceiptType, RelationType } from "matrix-js-sdk/src/matrix";
 import { expect } from "../../element-web-test";
 import { type ElementAppPage } from "../../pages/ElementAppPage";
 import { type Bot } from "../../pages/bot";
@@ -47,7 +47,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
                     getId: () => eventResponse.event_id,
                     threadRootId,
                     getTs: () => 1,
-                    isRelation: (relType) => {
+                    isRelation: (relType: RelationType) => {
                         return !relType || relType === "m.thread";
                     },
                 } as any as MatrixEvent;
diff --git a/apps/web/playwright/e2e/room-directory/room-directory.spec.ts b/apps/web/playwright/e2e/room-directory/room-directory.spec.ts
index 741fde3505..6eea5abce7 100644
--- a/apps/web/playwright/e2e/room-directory/room-directory.spec.ts
+++ b/apps/web/playwright/e2e/room-directory/room-directory.spec.ts
@@ -48,9 +48,9 @@ test.describe("Room Directory", () => {
             await app.closeDialog();
 
             const resp = await bot.publicRooms({});
-            expect(resp.total_room_count_estimate).toEqual(1);
-            expect(resp.chunk).toHaveLength(1);
-            expect(resp.chunk[0].room_id).toEqual(roomId);
+            expect(resp.total_room_count_estimate).toBeGreaterThanOrEqual(1);
+            expect(resp.chunk).toHaveLength(resp.total_room_count_estimate);
+            expect(resp.chunk.find((r) => r.room_id === roomId)).toBeTruthy();
         },
     );
 
diff --git a/apps/web/playwright/e2e/room/create-room.spec.ts b/apps/web/playwright/e2e/room/create-room.spec.ts
index 554f972c7d..fd699dcec8 100644
--- a/apps/web/playwright/e2e/room/create-room.spec.ts
+++ b/apps/web/playwright/e2e/room/create-room.spec.ts
@@ -57,6 +57,9 @@ test.describe("Create Room", () => {
 
         await page.getByRole("button", { name: "Go" }).click();
 
+        await expect(page.getByRole("heading", { name: "Start a chat with this new contact?" })).toBeVisible();
+        await page.getByRole("button", { name: "Continue" }).click();
+
         await expect(page.getByText("Encryption enabled")).toBeVisible();
         await expect(page.getByText("Send your first message to")).toBeVisible();
 
diff --git a/apps/web/playwright/e2e/room/room-status-bar.spec.ts b/apps/web/playwright/e2e/room/room-status-bar.spec.ts
index 78d5c49a30..dc11333753 100644
--- a/apps/web/playwright/e2e/room/room-status-bar.spec.ts
+++ b/apps/web/playwright/e2e/room/room-status-bar.spec.ts
@@ -163,6 +163,10 @@ test.describe("Room Status Bar", () => {
                 ).toBeVisible();
                 await other.getByRole("option", { name: "Alice" }).click();
                 await other.getByRole("button", { name: "Go" }).click();
+
+                await expect(page.getByRole("heading", { name: "Start a chat with this new contact?" })).toBeVisible();
+                await page.getByRole("button", { name: "Continue" }).click();
+
                 // Send a message to invite the bots
                 const composer = app.getComposerField();
                 await composer.fill("Hello");
diff --git a/apps/web/playwright/e2e/settings/encryption-user-tab/other-devices.spec.ts b/apps/web/playwright/e2e/settings/encryption-user-tab/other-devices.spec.ts
index 6c20af2d9a..a46e6eef36 100644
--- a/apps/web/playwright/e2e/settings/encryption-user-tab/other-devices.spec.ts
+++ b/apps/web/playwright/e2e/settings/encryption-user-tab/other-devices.spec.ts
@@ -33,7 +33,7 @@ test.describe("Other people's devices section in Encryption tab", () => {
 
         // Create the room and invite bob
         await createRoom(alicePage, "TestRoom", true);
-        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId);
+        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId, { confirmUnknownUser: true });
 
         // Bob accepts the invite
         await bobPage.getByRole("option", { name: "TestRoom" }).click();
@@ -72,7 +72,7 @@ test.describe("Other people's devices section in Encryption tab", () => {
 
         // Create the room and invite bob
         await createRoom(alicePage, "TestRoom", true);
-        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId);
+        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId, { confirmUnknownUser: true });
 
         // Bob accepts the invite
         await bobPage.getByRole("option", { name: "TestRoom" }).click();
@@ -115,7 +115,7 @@ test.describe("Other people's devices section in Encryption tab", () => {
 
         // Create the room and invite bob
         await createRoom(alicePage, "TestRoom", true);
-        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId);
+        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId, { confirmUnknownUser: true });
 
         // Bob accepts the invite and dismisses the warnings.
         await bobPage.getByRole("option", { name: "TestRoom" }).click();
@@ -149,7 +149,7 @@ test.describe("Other people's devices section in Encryption tab", () => {
 
         // Alice creates the room and invite Bob.
         await createRoom(alicePage, "TestRoom", true);
-        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId);
+        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId, { confirmUnknownUser: true });
 
         // Bob accepts the invite.
         await bobPage.getByRole("option", { name: "TestRoom" }).click();
@@ -214,7 +214,7 @@ test.describe("Other people's devices section in Encryption tab", () => {
 
         // Alice creates the room and invite Bob.
         await createRoom(alicePage, "TestRoom", true);
-        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId);
+        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId, { confirmUnknownUser: true });
 
         // Bob accepts the invite.
         await bobPage.getByRole("option", { name: "TestRoom" }).click();
diff --git a/apps/web/playwright/e2e/timeline/timeline.spec.ts b/apps/web/playwright/e2e/timeline/timeline.spec.ts
index 8a1c51b45f..f468baf776 100644
--- a/apps/web/playwright/e2e/timeline/timeline.spec.ts
+++ b/apps/web/playwright/e2e/timeline/timeline.spec.ts
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import type { Locator, Page } from "@playwright/test";
-import type { ISendEventResponse, EventType, MsgType } from "matrix-js-sdk/src/matrix";
+import type { ISendEventResponse, EventType, MsgType, IContent } from "matrix-js-sdk/src/matrix";
 import { test, expect } from "../../element-web-test";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
 import { Layout } from "../../../src/settings/enums/Layout";
@@ -50,11 +50,9 @@ const expectAvatar = async (cli: Client, e: Locator, avatarUrl: string): Promise
 };
 
 const sendEvent = async (client: Client, roomId: string, html = false): Promise<ISendEventResponse> => {
-    const content = {
+    const content: IContent = {
         msgtype: "m.text" as MsgType,
         body: "Message",
-        format: undefined,
-        formatted_body: undefined,
     };
     if (html) {
         content.format = "org.matrix.custom.html";
diff --git a/apps/web/playwright/e2e/utils.ts b/apps/web/playwright/e2e/utils.ts
index 49561ed1b4..6c30bf1856 100644
--- a/apps/web/playwright/e2e/utils.ts
+++ b/apps/web/playwright/e2e/utils.ts
@@ -42,7 +42,7 @@ export async function waitForRoom(
             return new Promise<Room>((resolve) => {
                 const room = matrixClient.getRoom(roomId);
 
-                if (window[predicateId](room)) {
+                if ((<any>window)[predicateId](room)) {
                     resolve(room);
                     return;
                 }
@@ -50,7 +50,7 @@ export async function waitForRoom(
                 function onEvent(ev: MatrixEvent) {
                     if (ev.getRoomId() !== roomId) return;
 
-                    if (window[predicateId](room)) {
+                    if ((<any>window)[predicateId](room)) {
                         matrixClient.removeListener("event" as ClientEvent, onEvent);
                         resolve(room);
                     }
diff --git a/apps/web/playwright/element-web-test.ts b/apps/web/playwright/element-web-test.ts
index f7c6f5b8e2..62e6515f62 100644
--- a/apps/web/playwright/element-web-test.ts
+++ b/apps/web/playwright/element-web-test.ts
@@ -24,7 +24,6 @@ import type { IConfigOptions } from "../src/IConfigOptions";
 import { type Credentials } from "./plugins/homeserver";
 import { ElementAppPage } from "./pages/ElementAppPage";
 import { Crypto } from "./pages/crypto";
-import { Toasts } from "./pages/toasts";
 import { Bot, type CreateBotOpts } from "./pages/bot";
 import { Webserver } from "./plugins/webserver";
 import { type WorkerOptions, type Services, test as base } from "./services";
@@ -52,7 +51,6 @@ export interface TestFixtures extends BaseTestFixtures {
 
     crypto: Crypto;
     room?: { roomId: string };
-    toasts: Toasts;
     uut?: Locator; // Unit Under Test, useful place to refer a prepared locator
     botCreateOpts: CreateBotOpts;
     bot: Bot;
@@ -92,9 +90,6 @@ export const test = base.extend<TestFixtures>({
     crypto: async ({ page, homeserver, request }, use) => {
         await use(new Crypto(page, homeserver, request));
     },
-    toasts: async ({ page }, use) => {
-        await use(new Toasts(page));
-    },
 
     botCreateOpts: {},
     bot: async ({ page, homeserver, botCreateOpts, user }, use, testInfo) => {
@@ -112,7 +107,7 @@ export const test = base.extend<TestFixtures>({
     },
 });
 
-interface ExtendedToMatchScreenshotOptions extends ToMatchScreenshotOptions {
+export interface ExtendedToMatchScreenshotOptions extends ToMatchScreenshotOptions {
     includeDialogBackground?: boolean;
     showTooltips?: boolean;
     timeout?: number;
diff --git a/apps/web/playwright/pages/ElementAppPage.ts b/apps/web/playwright/pages/ElementAppPage.ts
index e5a1aab31c..1d28507010 100644
--- a/apps/web/playwright/pages/ElementAppPage.ts
+++ b/apps/web/playwright/pages/ElementAppPage.ts
@@ -233,15 +233,30 @@ export class ElementAppPage {
      * Open the room info panel, and use it to send an invite to the given user.
      *
      * @param userId - The user to invite to the room.
+     * @param options - Options object
      */
-    public async inviteUserToCurrentRoom(userId: string): Promise<void> {
+    public async inviteUserToCurrentRoom(
+        userId: string,
+        options?: {
+            /** If true, expect and acknowledge "Confirm inviting new users" page */
+            confirmUnknownUser?: boolean;
+        },
+    ): Promise<void> {
         const rightPanel = await this.openRoomInfoPanel();
         await rightPanel.getByRole("menuitem", { name: "Invite" }).click();
 
-        const input = this.page.getByRole("dialog").getByTestId("invite-dialog-input");
+        const dialogLocator = this.page.getByRole("dialog");
+        const input = dialogLocator.getByTestId("invite-dialog-input");
         await input.fill(userId);
         await input.press("Enter");
-        await this.page.getByRole("dialog").getByRole("button", { name: "Invite" }).click();
+        await dialogLocator.getByRole("button", { name: "Invite" }).click();
+
+        if (options?.confirmUnknownUser) {
+            await expect(
+                dialogLocator.getByRole("heading", { name: "Invite new contacts to this room?" }),
+            ).toBeVisible();
+            await dialogLocator.getByRole("button", { name: "Invite" }).click();
+        }
     }
 
     /**
diff --git a/apps/web/playwright/pages/client.ts b/apps/web/playwright/pages/client.ts
index 76f2733820..39275085f7 100644
--- a/apps/web/playwright/pages/client.ts
+++ b/apps/web/playwright/pages/client.ts
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type JSHandle, type Page } from "@playwright/test";
-import { type PageFunctionOn } from "playwright-core/types/structs";
+import { type ElementHandle } from "playwright-core";
 
 import { Network } from "./network";
 import type {
@@ -30,6 +30,34 @@ import type {
 import type { RoomMessageEventContent } from "matrix-js-sdk/src/types";
 import { type CredentialsOptionalAccessToken } from "./bot";
 
+/** Types cribbed from playwright-core/types/structs as they are not importable */
+export type NoHandles<Arg> = Arg extends JSHandle
+    ? never
+    : Arg extends object
+      ? { [Key in keyof Arg]: NoHandles<Arg[Key]> }
+      : Arg;
+export type Unboxed<Arg> =
+    Arg extends ElementHandle<infer T>
+        ? T
+        : Arg extends JSHandle<infer T>
+          ? T
+          : Arg extends NoHandles<Arg>
+            ? Arg
+            : Arg extends [infer A0]
+              ? [Unboxed<A0>]
+              : Arg extends [infer A0, infer A1]
+                ? [Unboxed<A0>, Unboxed<A1>]
+                : Arg extends [infer A0, infer A1, infer A2]
+                  ? [Unboxed<A0>, Unboxed<A1>, Unboxed<A2>]
+                  : Arg extends [infer A0, infer A1, infer A2, infer A3]
+                    ? [Unboxed<A0>, Unboxed<A1>, Unboxed<A2>, Unboxed<A3>]
+                    : Arg extends Array<infer T>
+                      ? Array<Unboxed<T>>
+                      : Arg extends object
+                        ? { [Key in keyof Arg]: Unboxed<Arg[Key]> }
+                        : Arg;
+export type PageFunctionOn<On, Arg2, R> = string | ((on: On, arg2: Unboxed<Arg2>) => R | Promise<R>);
+
 export class Client {
     public network: Network;
     protected client: JSHandle<MatrixClient>;
diff --git a/apps/web/playwright/pages/toasts.ts b/apps/web/playwright/pages/toasts.ts
deleted file mode 100644
index 80ee3c9f26..0000000000
--- a/apps/web/playwright/pages/toasts.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type Page, expect, type Locator } from "@playwright/test";
-
-export class Toasts {
-    public constructor(private readonly page: Page) {}
-
-    /**
-     * Assert that a toast with the given title exists, and return it
-     *
-     * @param expectedTitle - Expected title of the toast
-     * @param timeout Time to retry the assertion for in milliseconds. Defaults to `timeout` in `TestConfig.expect`.
-     * @returns the Locator for the matching toast
-     */
-    public async getToast(expectedTitle: string, timeout?: number): Promise<Locator> {
-        const toast = this.page.locator(".mx_Toast_toast", { hasText: expectedTitle }).first();
-        await expect(toast).toBeVisible({ timeout });
-        return toast;
-    }
-
-    /**
-     * Assert that no toasts exist
-     */
-    public async assertNoToasts(): Promise<void> {
-        await expect(this.page.locator(".mx_Toast_toast")).not.toBeVisible();
-    }
-
-    /**
-     * Accept a toast with the given title, only works for the first toast in the stack
-     *
-     * @param expectedTitle - Expected title of the toast
-     */
-    public async acceptToast(expectedTitle: string): Promise<void> {
-        const toast = await this.getToast(expectedTitle);
-        await toast.locator('.mx_Toast_buttons button[data-kind="primary"]').click();
-    }
-
-    /**
-     * Reject a toast with the given title, only works for the first toast in the stack
-     *
-     * @param expectedTitle - Expected title of the toast
-     */
-    public async rejectToast(expectedTitle: string): Promise<void> {
-        const toast = await this.getToast(expectedTitle);
-        await toast.locator('.mx_Toast_buttons button[data-kind="secondary"]').click();
-    }
-}
diff --git a/apps/web/playwright/snapshots/crypto/complete-security.spec.ts/complete-security-linux.png b/apps/web/playwright/snapshots/crypto/complete-security.spec.ts/complete-security-linux.png
index dcdd2cb0f7..904e23c35a 100644
Binary files a/apps/web/playwright/snapshots/crypto/complete-security.spec.ts/complete-security-linux.png and b/apps/web/playwright/snapshots/crypto/complete-security.spec.ts/complete-security-linux.png differ
diff --git a/apps/web/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png b/apps/web/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png
index 3be7831755..0a99a4cf86 100644
Binary files a/apps/web/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png and b/apps/web/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png differ
diff --git a/apps/web/playwright/snapshots/crypto/device-verification.spec.ts/recovery-key-linux.png b/apps/web/playwright/snapshots/crypto/device-verification.spec.ts/recovery-key-linux.png
index 78ff359a99..f2e5ab1350 100644
Binary files a/apps/web/playwright/snapshots/crypto/device-verification.spec.ts/recovery-key-linux.png and b/apps/web/playwright/snapshots/crypto/device-verification.spec.ts/recovery-key-linux.png differ
diff --git a/apps/web/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png b/apps/web/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png
index b84cdd4e8f..adea2eac4e 100644
Binary files a/apps/web/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png and b/apps/web/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png differ
diff --git a/apps/web/playwright/snapshots/crypto/toasts.spec.ts/verify-this-device-linux.png b/apps/web/playwright/snapshots/crypto/toasts.spec.ts/verify-this-device-linux.png
index 7aeac7a9a9..01ad3384c1 100644
Binary files a/apps/web/playwright/snapshots/crypto/toasts.spec.ts/verify-this-device-linux.png and b/apps/web/playwright/snapshots/crypto/toasts.spec.ts/verify-this-device-linux.png differ
diff --git a/apps/web/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png b/apps/web/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png
index f764311250..771157a11a 100644
Binary files a/apps/web/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png and b/apps/web/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png differ
diff --git a/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/confirm-chat-with-new-contact-linux.png b/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/confirm-chat-with-new-contact-linux.png
new file mode 100644
index 0000000000..4cdb24a173
Binary files /dev/null and b/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/confirm-chat-with-new-contact-linux.png differ
diff --git a/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/confirm-invite-new-contact-linux.png b/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/confirm-invite-new-contact-linux.png
new file mode 100644
index 0000000000..cf961af67a
Binary files /dev/null and b/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/confirm-invite-new-contact-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-custom-sections.spec.ts/room-list-sections-chat-moved-toast-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-custom-sections.spec.ts/room-list-sections-chat-moved-toast-linux.png
new file mode 100644
index 0000000000..4da4571cbc
Binary files /dev/null and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-custom-sections.spec.ts/room-list-sections-chat-moved-toast-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-sections-collapsed-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-sections-collapsed-linux.png
index 6ebcef8532..1f5246ceaf 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-sections-collapsed-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-sections-collapsed-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-sections-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-sections-linux.png
index bd61342d60..28f00a9614 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-sections-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-sections-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png
index d651340ace..77345fe6fe 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-basic-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-basic-linux.png
index 6d004c8da2..5651405d53 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-basic-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-basic-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-with-thumb-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-with-thumb-linux.png
index aa36fca9e9..fa149ef399 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-with-thumb-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-with-thumb-linux.png differ
diff --git a/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png b/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png
index ada2b8a60e..7fb7e011bb 100644
Binary files a/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png and b/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
index 98de99bf98..15da4c7c02 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/change-key-1-encryption-tab-linux.png b/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/change-key-1-encryption-tab-linux.png
index a42cb394d7..a6b0afc57d 100644
Binary files a/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/change-key-1-encryption-tab-linux.png and b/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/change-key-1-encryption-tab-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/change-key-2-encryption-tab-linux.png b/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/change-key-2-encryption-tab-linux.png
index a9f601e822..2fa939ff85 100644
Binary files a/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/change-key-2-encryption-tab-linux.png and b/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/change-key-2-encryption-tab-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/set-up-key-1-encryption-tab-linux.png b/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/set-up-key-1-encryption-tab-linux.png
index be1a42d63f..f340588e3e 100644
Binary files a/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/set-up-key-1-encryption-tab-linux.png and b/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/set-up-key-1-encryption-tab-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/set-up-key-2-encryption-tab-linux.png b/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/set-up-key-2-encryption-tab-linux.png
index 9108514219..5700565252 100644
Binary files a/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/set-up-key-2-encryption-tab-linux.png and b/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/set-up-key-2-encryption-tab-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/set-up-key-3-encryption-tab-linux.png b/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/set-up-key-3-encryption-tab-linux.png
index 87d1cc85a4..bd69b42ab1 100644
Binary files a/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/set-up-key-3-encryption-tab-linux.png and b/apps/web/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/set-up-key-3-encryption-tab-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png b/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png
index 48625def3a..e5b81c1973 100644
Binary files a/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png and b/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png b/apps/web/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png
index 8487b5a381..79a9efe5cf 100644
Binary files a/apps/web/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png and b/apps/web/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png b/apps/web/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png
index 21198098a4..efec129b55 100644
Binary files a/apps/web/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png and b/apps/web/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/apps/web/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
index 2a998720e9..2519cee3ef 100644
Binary files a/apps/web/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png and b/apps/web/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png b/apps/web/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png
index 5248968436..c12d1a8808 100644
Binary files a/apps/web/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png and b/apps/web/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png differ
diff --git a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png
index a1d376d62f..1551195fd5 100644
Binary files a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png and b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png differ
diff --git a/apps/web/playwright/testcontainers/dendrite.ts b/apps/web/playwright/testcontainers/dendrite.ts
index 68a356027e..03e34856a9 100644
--- a/apps/web/playwright/testcontainers/dendrite.ts
+++ b/apps/web/playwright/testcontainers/dendrite.ts
@@ -21,7 +21,7 @@ const DEFAULT_CONFIG = {
     global: {
         server_name: "localhost",
         private_key: "matrix_key.pem",
-        old_private_keys: null,
+        old_private_keys: null as any,
         key_validity_period: "168h0m0s",
         cache: {
             max_size_estimated: "1gb",
@@ -47,7 +47,7 @@ const DEFAULT_CONFIG = {
             room_name: "Server Alerts",
         },
         jetstream: {
-            addresses: null,
+            addresses: null as any,
             disable_tls_validation: false,
             storage_path: "./",
             topic_prefix: "Dendrite",
@@ -67,7 +67,7 @@ const DEFAULT_CONFIG = {
     },
     app_service_api: {
         disable_tls_validation: false,
-        config_files: null,
+        config_files: null as any,
     },
     client_api: {
         registration_disabled: false,
@@ -79,14 +79,14 @@ const DEFAULT_CONFIG = {
         recaptcha_bypass_secret: "",
         turn: {
             turn_user_lifetime: "5m",
-            turn_uris: null,
+            turn_uris: null as any,
             turn_shared_secret: "",
         },
         rate_limiting: {
             enabled: true,
             threshold: 20,
             cooloff_ms: 500,
-            exempt_user_ids: null,
+            exempt_user_ids: null as any,
         },
     },
     federation_api: {
@@ -140,7 +140,7 @@ const DEFAULT_CONFIG = {
         },
     },
     mscs: {
-        mscs: null,
+        mscs: null as any,
         database: {
             connection_string: "file:dendrite-msc.db",
         },
@@ -157,7 +157,7 @@ const DEFAULT_CONFIG = {
     },
     user_api: {
         bcrypt_cost: 10,
-        auto_join_rooms: null,
+        auto_join_rooms: null as any,
         account_database: {
             connection_string: "file:dendrite-userapi.db",
         },
@@ -183,12 +183,12 @@ const DEFAULT_CONFIG = {
             serviceName: "",
             disabled: false,
             rpc_metrics: false,
-            tags: [],
-            sampler: null,
-            reporter: null,
-            headers: null,
-            baggage_restrictions: null,
-            throttler: null,
+            tags: [] as any[],
+            sampler: null as any,
+            reporter: null as any,
+            headers: null as any,
+            baggage_restrictions: null as any,
+            throttler: null as any,
         },
     },
     logging: [
diff --git a/apps/web/playwright/testcontainers/mas.ts b/apps/web/playwright/testcontainers/mas.ts
index 45752fc10e..85b727189f 100644
--- a/apps/web/playwright/testcontainers/mas.ts
+++ b/apps/web/playwright/testcontainers/mas.ts
@@ -11,7 +11,7 @@ import {
 } from "@element-hq/element-web-playwright-common/lib/testcontainers/index.js";
 
 const DOCKER_IMAGE =
-    "ghcr.io/element-hq/matrix-authentication-service:main@sha256:f54c2214354ec3294694a525523debb5f38c8580c1a5afc8cdec0f8372374ef3";
+    "ghcr.io/element-hq/matrix-authentication-service:main@sha256:034500c4797287bfcdc4d13304e89ac65ce44a0fa33664836aea6e42c33535fb";
 
 /**
  * MatrixAuthenticationServiceContainer which freezes the docker digest to
diff --git a/apps/web/playwright/testcontainers/synapse.ts b/apps/web/playwright/testcontainers/synapse.ts
index f67d51659a..5fb1c27bfd 100644
--- a/apps/web/playwright/testcontainers/synapse.ts
+++ b/apps/web/playwright/testcontainers/synapse.ts
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import { SynapseContainer as BaseSynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers/index.js";
 
 const DOCKER_IMAGE =
-    "ghcr.io/element-hq/synapse:develop@sha256:73fe964d854412cd905f4f0e668b2a9d10edc86891036e03656714de0311f6f6";
+    "ghcr.io/element-hq/synapse:develop@sha256:b2fec2c9460f5b297a3a4ce78037902590240a1978301ed1d4bc97918c451041";
 
 /**
  * SynapseContainer which freezes the docker digest to stabilise tests,
diff --git a/apps/web/playwright/tsconfig.json b/apps/web/playwright/tsconfig.json
index 968d903fa4..4f3f437a9a 100644
--- a/apps/web/playwright/tsconfig.json
+++ b/apps/web/playwright/tsconfig.json
@@ -2,12 +2,14 @@
     "compilerOptions": {
         "target": "es2022",
         "jsx": "react",
-        "lib": ["ESNext", "es2022", "dom", "dom.iterable"],
+        "lib": ["es2024", "dom", "dom.iterable"],
         "resolveJsonModule": true,
         "esModuleInterop": true,
-        "moduleResolution": "node",
-        "module": "es2022",
+        "moduleResolution": "bundler",
+        "module": "ESNext",
         "allowImportingTsExtensions": true,
+        "strictNullChecks": false,
+        "noImplicitAny": false,
         "types": ["node"]
     },
     "include": [
diff --git a/apps/web/project.json b/apps/web/project.json
index 95f9a6828d..abb5fc4757 100644
--- a/apps/web/project.json
+++ b/apps/web/project.json
@@ -44,15 +44,23 @@
                 "parallel": false,
                 "cwd": "apps/web"
             },
-            "dependsOn": ["^build"]
+            "dependsOn": ["^build", "^build:playwright"]
         },
         "test:unit": {
-            "executor": "@nx/jest:jest",
-            "options": {
-                "jestConfig": "{projectRoot}/jest.config.ts",
-                "cwd": "apps/web"
-            },
+            // We avoid the jest executor because it doesn't seem to give any benefit, and it mangles the summary of failing tests.
+            "command": "jest",
+            "options": { "cwd": "apps/web" },
             "dependsOn": ["^build"]
+        },
+        "test:playwright": {
+            "command": "playwright test",
+            "options": { "cwd": "apps/web" },
+            "dependsOn": ["^build:playwright"]
+        },
+        "test:playwright:screenshots": {
+            "command": "playwright-screenshots playwright test --update-snapshots --project=Chrome --grep @screenshot",
+            "options": { "cwd": "apps/web" },
+            "dependsOn": ["^build:playwright"]
         }
     }
 }
diff --git a/apps/web/res/css/_common.pcss b/apps/web/res/css/_common.pcss
index 4cadbe71c6..d55cb07606 100644
--- a/apps/web/res/css/_common.pcss
+++ b/apps/web/res/css/_common.pcss
@@ -598,6 +598,7 @@ legend {
         .mx_AccessSecretStorageDialog button,
         .mx_InviteDialog_section button,
         .mx_InviteDialog_editor button,
+        .mx_UnknownIdentityUsersWarningDialog button,
         [class|="maplibregl"]
     ),
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton),
@@ -625,7 +626,8 @@ legend {
         .mx_ThemeChoicePanel_CustomTheme button,
         .mx_UnpinAllDialog button,
         .mx_ShareDialog button,
-        .mx_EncryptionUserSettingsTab button
+        .mx_EncryptionUserSettingsTab button,
+        .mx_UnknownIdentityUsersWarningDialog button
     ):last-child {
     margin-right: 0px;
 }
@@ -641,7 +643,8 @@ legend {
         .mx_ShareDialog button,
         .mx_EncryptionUserSettingsTab button,
         .mx_InviteDialog_section button,
-        .mx_InviteDialog_editor button
+        .mx_InviteDialog_editor button,
+        .mx_UnknownIdentityUsersWarningDialog button
     ):focus,
 .mx_Dialog input[type="submit"]:focus,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):focus,
@@ -659,7 +662,8 @@ legend {
         .mx_ThemeChoicePanel_CustomTheme button,
         .mx_UnpinAllDialog button,
         .mx_ShareDialog button,
-        .mx_EncryptionUserSettingsTab button
+        .mx_EncryptionUserSettingsTab button,
+        .mx_UnknownIdentityUsersWarningDialog button
     ),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
     color: var(--cpd-color-text-on-solid-primary);
@@ -678,7 +682,8 @@ legend {
         .mx_ThemeChoicePanel_CustomTheme button,
         .mx_UnpinAllDialog button,
         .mx_ShareDialog button,
-        .mx_EncryptionUserSettingsTab button
+        .mx_EncryptionUserSettingsTab button,
+        .mx_UnknownIdentityUsersWarningDialog button
     ),
 .mx_Dialog_buttons input[type="submit"].danger {
     background-color: var(--cpd-color-bg-critical-primary);
@@ -701,7 +706,8 @@ legend {
         .mx_ThemeChoicePanel_CustomTheme button,
         .mx_UnpinAllDialog button,
         .mx_ShareDialog button,
-        .mx_EncryptionUserSettingsTab button
+        .mx_EncryptionUserSettingsTab button,
+        .mx_UnknownIdentityUsersWarningDialog button
     ):disabled,
 .mx_Dialog input[type="submit"]:disabled,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):disabled,
@@ -834,18 +840,6 @@ legend {
     }
 }
 
-@define-mixin ButtonResetDefault {
-    appearance: none;
-    background: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-    font-size: inherit;
-    font-family: inherit;
-    line-height: inherit;
-    cursor: pointer;
-}
-
 @define-mixin LegacyCallButton {
     box-sizing: border-box;
     font-weight: var(--cpd-font-weight-semibold);
diff --git a/apps/web/res/css/_components.pcss b/apps/web/res/css/_components.pcss
index 1197cbabe6..bac006d7f5 100644
--- a/apps/web/res/css/_components.pcss
+++ b/apps/web/res/css/_components.pcss
@@ -68,8 +68,8 @@
 @import "./structures/_LeftPanel.pcss";
 @import "./structures/_MainSplit.pcss";
 @import "./structures/_MatrixChat.pcss";
-@import "./structures/_MessagePanel.pcss";
 @import "./structures/_NonUrgentToastContainer.pcss";
+@import "./structures/_PictureInPictureDragger.pcss";
 @import "./structures/_QuickSettingsButton.pcss";
 @import "./structures/_RightPanel.pcss";
 @import "./structures/_RoomSearch.pcss";
@@ -105,6 +105,7 @@
 @import "./views/auth/_AuthPage.pcss";
 @import "./views/auth/_CompleteSecurityBody.pcss";
 @import "./views/auth/_CountryDropdown.pcss";
+@import "./views/auth/_DefaultWelcome.pcss";
 @import "./views/auth/_InteractiveAuthEntryComponents.pcss";
 @import "./views/auth/_LanguageSelector.pcss";
 @import "./views/auth/_LoginWithQR.pcss";
@@ -128,6 +129,7 @@
 @import "./views/dialogs/_ConfirmSpaceUserActionDialog.pcss";
 @import "./views/dialogs/_ConfirmUserActionDialog.pcss";
 @import "./views/dialogs/_CreateRoomDialog.pcss";
+@import "./views/dialogs/_CreateSectionDialog.pcss";
 @import "./views/dialogs/_CreateSubspaceDialog.pcss";
 @import "./views/dialogs/_Crypto.pcss";
 @import "./views/dialogs/_DeactivateAccountDialog.pcss";
@@ -169,6 +171,7 @@
 @import "./views/dialogs/_UserSettingsDialog.pcss";
 @import "./views/dialogs/_VerifyEMailDialog.pcss";
 @import "./views/dialogs/_WidgetCapabilitiesPromptDialog.pcss";
+@import "./views/dialogs/invite/_UnknownIdentityUsersWarningDialog.pcss";
 @import "./views/dialogs/security/_AccessSecretStorageDialog.pcss";
 @import "./views/dialogs/security/_CreateCrossSigningDialog.pcss";
 @import "./views/dialogs/security/_CreateSecretStorageDialog.pcss";
@@ -375,7 +378,6 @@
 @import "./views/voip/_DialPad.pcss";
 @import "./views/voip/_DialPadContextMenu.pcss";
 @import "./views/voip/_DialPadModal.pcss";
-@import "./views/voip/_LegacyCallPreview.pcss";
 @import "./views/voip/_LegacyCallView.pcss";
 @import "./views/voip/_LegacyCallViewForRoom.pcss";
 @import "./views/voip/_LegacyCallViewHeader.pcss";
diff --git a/apps/web/res/css/components/views/location/_ShareDialogButtons.pcss b/apps/web/res/css/components/views/location/_ShareDialogButtons.pcss
index d0c419accb..1c1d379f89 100644
--- a/apps/web/res/css/components/views/location/_ShareDialogButtons.pcss
+++ b/apps/web/res/css/components/views/location/_ShareDialogButtons.pcss
@@ -13,8 +13,7 @@ Please see LICENSE files in the repository root for full details.
     top: 0;
 }
 
-.mx_ShareDialogButtons_button {
-    @mixin ButtonResetDefault;
+button.mx_ShareDialogButtons_button {
     height: 24px;
     width: 24px;
     border-radius: 50%;
diff --git a/apps/web/res/css/structures/_MessagePanel.pcss b/apps/web/res/css/structures/_MessagePanel.pcss
deleted file mode 100644
index fb2830bce7..0000000000
--- a/apps/web/res/css/structures/_MessagePanel.pcss
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_MessagePanel_myReadMarker {
-    height: 0;
-    margin: 0;
-    padding: 0;
-    border: 0;
-
-    hr {
-        border-top: solid 1px $accent;
-        border-bottom: solid 1px $accent;
-        margin-top: 0;
-        position: relative;
-        top: -1px;
-        z-index: 1;
-        will-change: width;
-        transition:
-            width 400ms easeinsine 1s,
-            opacity 400ms easeinsine 1s;
-        width: 99%;
-        opacity: 1;
-    }
-}
diff --git a/apps/web/res/css/structures/_PictureInPictureDragger.pcss b/apps/web/res/css/structures/_PictureInPictureDragger.pcss
new file mode 100644
index 0000000000..d6effd3b20
--- /dev/null
+++ b/apps/web/res/css/structures/_PictureInPictureDragger.pcss
@@ -0,0 +1,20 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_PictureInPictureDragger {
+    cursor: grab;
+    user-select: none;
+    left: 0;
+    position: fixed;
+    top: 0;
+    /* Display above any widget elements */
+    z-index: 102;
+}
+
+.mx_PictureInPictureDragger:active {
+    cursor: grabbing;
+}
diff --git a/apps/web/res/css/views/auth/_DefaultWelcome.pcss b/apps/web/res/css/views/auth/_DefaultWelcome.pcss
new file mode 100644
index 0000000000..08183e77b1
--- /dev/null
+++ b/apps/web/res/css/views/auth/_DefaultWelcome.pcss
@@ -0,0 +1,43 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_DefaultWelcome {
+    text-align: center;
+
+    .mx_DefaultWelcome_logo img {
+        height: 48px;
+        aspect-ratio: auto;
+        display: block;
+        margin: 0 auto;
+    }
+
+    h1 {
+        margin: var(--cpd-space-4x) 0 var(--cpd-space-2x);
+    }
+
+    p {
+        color: var(--cpd-color-text-secondary);
+        margin-top: var(--cpd-space-2x);
+    }
+
+    .mx_DefaultWelcome_buttons {
+        margin: var(--cpd-space-6x) 0 var(--cpd-space-1x);
+        padding-bottom: var(--cpd-space-4x);
+        border-bottom: 1px solid var(--cpd-color-separator-primary);
+
+        a {
+            width: 380px;
+            margin-bottom: var(--cpd-space-4x);
+        }
+    }
+}
+
+.mx_WelcomePage_registrationDisabled {
+    .mx_DefaultWelcome_buttons_register {
+        display: none;
+    }
+}
diff --git a/apps/web/res/css/views/auth/_Welcome.pcss b/apps/web/res/css/views/auth/_Welcome.pcss
index 50a91aa767..12598f3293 100644
--- a/apps/web/res/css/views/auth/_Welcome.pcss
+++ b/apps/web/res/css/views/auth/_Welcome.pcss
@@ -9,6 +9,10 @@ Please see LICENSE files in the repository root for full details.
     display: flex;
     flex-direction: column;
     align-items: center;
+    background-color: var(--cpd-color-bg-canvas-default);
+    box-sizing: border-box;
+    padding: var(--cpd-space-11x) var(--cpd-space-12x) var(--cpd-space-4x);
+
     &.mx_WelcomePage_registrationDisabled {
         .mx_ButtonCreateAccount {
             display: none;
@@ -18,7 +22,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_Welcome .mx_AuthBody_language {
     width: 160px;
-    margin-bottom: 10px;
+    margin: var(--cpd-space-1x) 0;
 }
 
 /* Invert image colours in dark mode. */
diff --git a/apps/web/res/css/views/dialogs/_CreateSectionDialog.pcss b/apps/web/res/css/views/dialogs/_CreateSectionDialog.pcss
new file mode 100644
index 0000000000..7c941be39f
--- /dev/null
+++ b/apps/web/res/css/views/dialogs/_CreateSectionDialog.pcss
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_CreateSectionDialog {
+    color: var(--cpd-color-text-primary);
+
+    &.mx_Dialog_fixedWidth {
+        /* 576px coming from Figma and remove external padding */
+        max-width: calc(576px - var(--cpd-space-20x));
+    }
+
+    .mx_CreateSectionDialog_content {
+        min-height: 346px;
+    }
+
+    .mx_CreateSectionDialog_form {
+        width: 100%;
+    }
+}
diff --git a/apps/web/res/css/views/dialogs/invite/_UnknownIdentityUsersWarningDialog.pcss b/apps/web/res/css/views/dialogs/invite/_UnknownIdentityUsersWarningDialog.pcss
new file mode 100644
index 0000000000..085d9dfa5d
--- /dev/null
+++ b/apps/web/res/css/views/dialogs/invite/_UnknownIdentityUsersWarningDialog.pcss
@@ -0,0 +1,45 @@
+/*
+ Copyright 2026 Element Creations Ltd.
+
+ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UnknownIdentityUsersWarningDialog {
+    display: flex;
+    flex-direction: column;
+    height: 600px; /* Consistency with InviteDialog */
+}
+
+.mx_UnknownIdentityUsersWarningDialog_headerContainer {
+    /* Centre the PageHeader component horizontally */
+    display: flex;
+    justify-content: center;
+
+    /* Styling for the regular text inside the header */
+    font: var(--cpd-font-body-lg-regular);
+
+    /* Space before the list */
+    padding-bottom: var(--cpd-space-6x);
+}
+
+.mx_UnknownIdentityUsersWarningDialog_userList {
+    width: 100%;
+    overflow: auto;
+
+    /* Fill available vertical space, but don't allow it to shrink to less than 60px (about the height of a single tile) */
+    flex: 1 0 60px;
+
+    /* Remove browser default ul padding/margin */
+    padding: 0;
+    margin: 0;
+}
+
+.mx_UnknownIdentityUsersWarningDialog_buttons {
+    display: flex;
+    gap: var(--cpd-space-4x);
+
+    > button {
+        flex: 1;
+    }
+}
diff --git a/apps/web/res/css/views/elements/_AccessibleButton.pcss b/apps/web/res/css/views/elements/_AccessibleButton.pcss
index fafe75c642..e79a858d49 100644
--- a/apps/web/res/css/views/elements/_AccessibleButton.pcss
+++ b/apps/web/res/css/views/elements/_AccessibleButton.pcss
@@ -9,6 +9,19 @@ Please see LICENSE files in the repository root for full details.
 .mx_AccessibleButton {
     cursor: pointer;
 
+    &:where(button) {
+        /* Clear default button styling */
+        appearance: none;
+        background: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: inherit;
+        font-family: inherit;
+        line-height: inherit;
+        box-sizing: content-box;
+    }
+
     &.mx_AccessibleButton_disabled {
         cursor: not-allowed;
 
diff --git a/apps/web/res/css/views/elements/_CopyableText.pcss b/apps/web/res/css/views/elements/_CopyableText.pcss
index 6219055085..e5cf1c51da 100644
--- a/apps/web/res/css/views/elements/_CopyableText.pcss
+++ b/apps/web/res/css/views/elements/_CopyableText.pcss
@@ -28,7 +28,6 @@ Please see LICENSE files in the repository root for full details.
         /* using em here to adapt to the local font size */
         width: 1em;
         height: 1em;
-        cursor: pointer;
         padding-left: 12px;
         padding-right: 10px;
         display: block;
diff --git a/apps/web/res/css/views/rooms/_EventTile.pcss b/apps/web/res/css/views/rooms/_EventTile.pcss
index 5bea427961..63d1bdaee2 100644
--- a/apps/web/res/css/views/rooms/_EventTile.pcss
+++ b/apps/web/res/css/views/rooms/_EventTile.pcss
@@ -1378,6 +1378,10 @@ $left-gutter: 64px;
     display: flex;
 }
 
+.mx_EventTile_annotatedInline {
+    display: inline-flex;
+}
+
 .mx_EventTile_footer {
     display: flex;
     gap: var(--cpd-space-2x);
diff --git a/apps/web/res/css/views/settings/_NotificationSettings2.pcss b/apps/web/res/css/views/settings/_NotificationSettings2.pcss
index db439f0706..8a41322615 100644
--- a/apps/web/res/css/views/settings/_NotificationSettings2.pcss
+++ b/apps/web/res/css/views/settings/_NotificationSettings2.pcss
@@ -12,12 +12,6 @@ Please see LICENSE files in the repository root for full details.
         gap: 32px;
         display: flex;
         flex-direction: column;
-
-        > form {
-            gap: 32px;
-            display: flex;
-            flex-direction: column;
-        }
     }
 
     .mx_SettingsSubsection_description {
diff --git a/apps/web/res/css/views/settings/tabs/_SettingsTab.pcss b/apps/web/res/css/views/settings/tabs/_SettingsTab.pcss
index 92a392950f..c92e454e05 100644
--- a/apps/web/res/css/views/settings/tabs/_SettingsTab.pcss
+++ b/apps/web/res/css/views/settings/tabs/_SettingsTab.pcss
@@ -14,12 +14,13 @@ Please see LICENSE files in the repository root for full details.
         color: $links;
     }
 
-    form:not(.mx_EncryptionUserSettingsTab form) {
+    form {
         display: flex;
         flex-direction: column;
-        gap: $spacing-8;
+        gap: var(--cpd-space-3x);
         flex-grow: 1;
     }
+
     // never want full width buttons
     // event when other content is 100% width
     .mx_AccessibleButton {
diff --git a/apps/web/res/css/views/voip/_LegacyCallPreview.pcss b/apps/web/res/css/views/voip/_LegacyCallPreview.pcss
deleted file mode 100644
index 3a8bf5af9f..0000000000
--- a/apps/web/res/css/views/voip/_LegacyCallPreview.pcss
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_LegacyCallPreview {
-    align-items: flex-end;
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-16;
-    left: 0;
-    position: fixed;
-    top: 0;
-    /* Display above any widget elements */
-    z-index: 102;
-
-    .mx_VideoFeed_remote.mx_VideoFeed_voice {
-        min-height: 150px;
-    }
-
-    .mx_VideoFeed_local {
-        border-radius: 8px;
-        overflow: hidden;
-    }
-}
diff --git a/apps/web/res/welcome.html b/apps/web/res/welcome.html
deleted file mode 100644
index f1cf3911f4..0000000000
--- a/apps/web/res/welcome.html
+++ /dev/null
@@ -1,191 +0,0 @@
-<style type="text/css">
-    /* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
- * voodoo where we have to set display: none by default
- */
-
-    .mx_Header_title::after {
-        content: "!";
-    }
-
-    .mx_Parent {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-        -webkit-box-align: center;
-        -webkit-align-items: center;
-        -ms-flex-align: center;
-        align-items: center;
-        text-align: center;
-        padding: 25px 35px;
-    }
-
-    .mx_Logo {
-        height: 54px;
-        margin-top: 2px;
-    }
-
-    .mx_ButtonGroup {
-        margin-top: 10px;
-    }
-
-    .mx_ButtonRow {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-justify-content: space-around;
-        -ms-flex-pack: distribute;
-        -webkit-box-align: center;
-        -webkit-align-items: center;
-        -ms-flex-align: center;
-        align-items: center;
-        justify-content: space-between;
-        box-sizing: border-box;
-        margin: 12px 0 0;
-    }
-
-    .mx_ButtonRow > * {
-        margin: 0 10px;
-    }
-
-    .mx_ButtonRow > *:first-child {
-        margin-left: 0;
-    }
-
-    .mx_ButtonRow > *:last-child {
-        margin-right: 0;
-    }
-
-    .mx_ButtonParent {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        padding: 10px 20px;
-        -webkit-box-orient: horizontal;
-        -webkit-box-direction: normal;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-        -webkit-box-align: center;
-        -webkit-align-items: center;
-        -ms-flex-align: center;
-        align-items: center;
-        border-radius: 4px;
-        width: 150px;
-        background-repeat: no-repeat;
-        background-position: 10px center;
-        text-decoration: none;
-        color: #2e2f32 !important;
-    }
-
-    .mx_ButtonLabel {
-        margin-left: 20px;
-    }
-
-    .mx_Header_title {
-        font-size: 24px;
-        font-weight: 600;
-        margin: 20px 0 0;
-    }
-
-    .mx_Header_subtitle {
-        font-size: 12px;
-        font-weight: normal;
-        margin: 8px 0 0;
-    }
-
-    .mx_ButtonSignIn {
-        background-color: #368bd6;
-        color: white !important;
-    }
-
-    .mx_ButtonCreateAccount {
-        background-color: #0dbd8b;
-        color: white !important;
-    }
-
-    .mx_SecondaryButton {
-        background-color: #ffffff;
-        color: #2e2f32;
-    }
-
-    .mx_Button_iconSignIn {
-        background-image: url("welcome/images/icon-sign-in.svg");
-    }
-    .mx_Button_iconCreateAccount {
-        background-image: url("welcome/images/icon-create-account.svg");
-    }
-    .mx_Button_iconHelp {
-        background-image: url("welcome/images/icon-help.svg");
-    }
-    .mx_Button_iconRoomDirectory {
-        background-image: url("welcome/images/icon-room-directory.svg");
-    }
-
-    /*
-.mx_WelcomePage_loggedIn is applied by EmbeddedPage from the Welcome component
-If it is set on the page, we should show the buttons. Otherwise, we have to assume
-we don't have an account and should hide them. No account == no guest account either.
- */
-    .mx_WelcomePage:not(.mx_WelcomePage_loggedIn) .mx_WelcomePage_guestFunctions {
-        display: none;
-    }
-
-    .mx_ButtonRow.mx_WelcomePage_guestFunctions {
-        margin-top: 20px;
-    }
-    .mx_ButtonRow.mx_WelcomePage_guestFunctions > div {
-        margin: 0 auto;
-    }
-
-    @media only screen and (max-width: 480px) {
-        .mx_ButtonRow {
-            flex-direction: column;
-        }
-
-        .mx_ButtonRow > * {
-            margin: 0 0 10px 0;
-        }
-    }
-</style>
-
-<div class="mx_Parent">
-    <a href="https://element.io" target="_blank" rel="noopener">
-        <img src="$logoUrl" alt="$brand" class="mx_Logo" />
-    </a>
-    <h1 class="mx_Header_title">_t("welcome_to_element")</h1>
-    <!-- XXX: Our translations system isn't smart enough to recognize variables in the HTML, so we manually do it -->
-    <h2 class="mx_Header_subtitle">_t("powered_by_matrix_with_logo")</h2>
-    <div class="mx_ButtonGroup">
-        <div class="mx_ButtonRow">
-            <a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn">
-                <div class="mx_ButtonLabel">_t("action|sign_in")</div>
-            </a>
-            <a href="#/register" class="mx_ButtonParent mx_ButtonCreateAccount mx_Button_iconCreateAccount">
-                <div class="mx_ButtonLabel">_t("action|create_account")</div>
-            </a>
-        </div>
-        <div class="mx_ButtonRow mx_WelcomePage_guestFunctions">
-            <div>
-                <a href="#/directory" class="mx_ButtonParent mx_SecondaryButton mx_Button_iconRoomDirectory">
-                    <div class="mx_ButtonLabel">_t("action|explore_rooms")</div>
-                </a>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/apps/web/res/welcome/images/icon-create-account.svg b/apps/web/res/welcome/images/icon-create-account.svg
deleted file mode 100644
index 7bbef7f632..0000000000
--- a/apps/web/res/welcome/images/icon-create-account.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9ZM5.25 9C5.25 8.58579 5.58579 8.25 6 8.25H8.25V6C8.25 5.58579 8.58579 5.25 9 5.25C9.41421 5.25 9.75 5.58579 9.75 6V8.25H12C12.4142 8.25 12.75 8.58579 12.75 9C12.75 9.41421 12.4142 9.75 12 9.75H9.75V12C9.75 12.4142 9.41421 12.75 9 12.75C8.58579 12.75 8.25 12.4142 8.25 12V9.75H6C5.58579 9.75 5.25 9.41421 5.25 9Z" fill="white"/>
-</svg>
diff --git a/apps/web/res/welcome/images/icon-help.svg b/apps/web/res/welcome/images/icon-help.svg
deleted file mode 100644
index dc96f8e0cf..0000000000
--- a/apps/web/res/welcome/images/icon-help.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-
-<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Experiments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Home" transform="translate(-672.000000, -577.000000)" stroke="#000000" stroke-width="1.6">
-            <g id="Group-11" transform="translate(621.000000, 176.000000)">
-                <g id="Group-10" transform="translate(39.000000, 391.000000)">
-                    <g id="help-circle" transform="translate(13.000000, 11.000000)">
-                        <circle id="Oval" cx="10" cy="10" r="10"></circle>
-                        <path d="M7.09,7 C7.57543688,5.62004444 8.98538362,4.79140632 10.4271763,5.0387121 C11.868969,5.28601788 12.9221794,6.53715293 12.92,8 C12.92,10 9.92,11 9.92,11" id="Path"></path>
-                        <path d="M10,15 L10.0050017,15.0050017" id="Path"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/apps/web/res/welcome/images/icon-room-directory.svg b/apps/web/res/welcome/images/icon-room-directory.svg
deleted file mode 100644
index 3786ce1153..0000000000
--- a/apps/web/res/welcome/images/icon-room-directory.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9ZM13.375 5.3266C13.5583 4.92826 13.0716 4.44152 12.6733 4.62491L7.66968 6.9285C7.33893 7.08077 7.08014 7.33956 6.92787 7.67031L4.62428 12.6739C4.44089 13.0722 4.92763 13.559 5.32597 13.3756L10.3295 11.072C10.6603 10.9197 10.9191 10.6609 11.0714 10.3302L13.375 5.3266Z" fill="black"/>
-<path d="M9.8835 9.88413C9.39534 10.3723 8.60389 10.3723 8.11573 9.88413C7.62757 9.39597 7.62757 8.60452 8.11573 8.11636C8.60389 7.62821 9.39534 7.62821 9.8835 8.11636C10.3717 8.60452 10.3717 9.39597 9.8835 9.88413Z" fill="black"/>
-</svg>
diff --git a/apps/web/res/welcome/images/icon-sign-in.svg b/apps/web/res/welcome/images/icon-sign-in.svg
deleted file mode 100644
index 9bc2fefa3f..0000000000
--- a/apps/web/res/welcome/images/icon-sign-in.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 8.25C1.58579 8.25 1.25 8.58579 1.25 9C1.25 9.41421 1.58579 9.75 2 9.75L2 8.25ZM2 9.75C2.0026 9.75 2.00521 9.75 2.00781 9.75C2.01042 9.75 2.01302 9.75 2.01562 9.75C2.01823 9.75 2.02083 9.75 2.02344 9.75C2.02604 9.75 2.02865 9.75 2.03125 9.75C2.03385 9.75 2.03646 9.75 2.03906 9.75C2.04167 9.75 2.04427 9.75 2.04688 9.75C2.04948 9.75 2.05208 9.75 2.05469 9.75C2.05729 9.75 2.0599 9.75 2.0625 9.75C2.0651 9.75 2.06771 9.75 2.07031 9.75C2.07292 9.75 2.07552 9.75 2.07813 9.75C2.08073 9.75 2.08333 9.75 2.08594 9.75C2.08854 9.75 2.09115 9.75 2.09375 9.75C2.09635 9.75 2.09896 9.75 2.10156 9.75C2.10417 9.75 2.10677 9.75 2.10938 9.75C2.11198 9.75 2.11458 9.75 2.11719 9.75C2.11979 9.75 2.1224 9.75 2.125 9.75C2.1276 9.75 2.13021 9.75 2.13281 9.75C2.13542 9.75 2.13802 9.75 2.14062 9.75C2.14323 9.75 2.14583 9.75 2.14844 9.75C2.15104 9.75 2.15365 9.75 2.15625 9.75C2.15885 9.75 2.16146 9.75 2.16406 9.75C2.16667 9.75 2.16927 9.75 2.17188 9.75C2.17448 9.75 2.17708 9.75 2.17969 9.75C2.18229 9.75 2.1849 9.75 2.1875 9.75C2.1901 9.75 2.19271 9.75 2.19531 9.75C2.19792 9.75 2.20052 9.75 2.20313 9.75C2.20573 9.75 2.20833 9.75 2.21094 9.75C2.21354 9.75 2.21615 9.75 2.21875 9.75C2.22135 9.75 2.22396 9.75 2.22656 9.75C2.22917 9.75 2.23177 9.75 2.23438 9.75C2.23698 9.75 2.23958 9.75 2.24219 9.75C2.24479 9.75 2.2474 9.75 2.25 9.75C2.2526 9.75 2.25521 9.75 2.25781 9.75C2.26042 9.75 2.26302 9.75 2.26562 9.75C2.26823 9.75 2.27083 9.75 2.27344 9.75C2.27604 9.75 2.27865 9.75 2.28125 9.75C2.28385 9.75 2.28646 9.75 2.28906 9.75C2.29167 9.75 2.29427 9.75 2.29688 9.75C2.29948 9.75 2.30208 9.75 2.30469 9.75C2.30729 9.75 2.3099 9.75 2.3125 9.75C2.3151 9.75 2.31771 9.75 2.32031 9.75C2.32292 9.75 2.32552 9.75 2.32813 9.75C2.33073 9.75 2.33333 9.75 2.33594 9.75C2.33854 9.75 2.34115 9.75 2.34375 9.75C2.34635 9.75 2.34896 9.75 2.35156 9.75C2.35417 9.75 2.35677 9.75 2.35938 9.75C2.36198 9.75 2.36458 9.75 2.36719 9.75C2.36979 9.75 2.3724 9.75 2.375 9.75C2.3776 9.75 2.38021 9.75 2.38281 9.75C2.38542 9.75 2.38802 9.75 2.39063 9.75C2.39323 9.75 2.39583 9.75 2.39844 9.75C2.40104 9.75 2.40365 9.75 2.40625 9.75C2.40885 9.75 2.41146 9.75 2.41406 9.75C2.41667 9.75 2.41927 9.75 2.42188 9.75C2.42448 9.75 2.42708 9.75 2.42969 9.75C2.43229 9.75 2.4349 9.75 2.4375 9.75C2.4401 9.75 2.44271 9.75 2.44531 9.75C2.44792 9.75 2.45052 9.75 2.45313 9.75C2.45573 9.75 2.45833 9.75 2.46094 9.75C2.46354 9.75 2.46615 9.75 2.46875 9.75C2.47135 9.75 2.47396 9.75 2.47656 9.75C2.47917 9.75 2.48177 9.75 2.48438 9.75C2.48698 9.75 2.48958 9.75 2.49219 9.75C2.49479 9.75 2.4974 9.75 2.5 9.75C2.5026 9.75 2.50521 9.75 2.50781 9.75C2.51042 9.75 2.51302 9.75 2.51562 9.75C2.51823 9.75 2.52083 9.75 2.52344 9.75C2.52604 9.75 2.52865 9.75 2.53125 9.75C2.53385 9.75 2.53646 9.75 2.53906 9.75C2.54167 9.75 2.54427 9.75 2.54688 9.75C2.54948 9.75 2.55208 9.75 2.55469 9.75C2.55729 9.75 2.5599 9.75 2.5625 9.75C2.5651 9.75 2.56771 9.75 2.57031 9.75C2.57292 9.75 2.57552 9.75 2.57812 9.75C2.58073 9.75 2.58333 9.75 2.58594 9.75C2.58854 9.75 2.59115 9.75 2.59375 9.75C2.59635 9.75 2.59896 9.75 2.60156 9.75C2.60417 9.75 2.60677 9.75 2.60938 9.75C2.61198 9.75 2.61458 9.75 2.61719 9.75C2.61979 9.75 2.6224 9.75 2.625 9.75C2.6276 9.75 2.63021 9.75 2.63281 9.75C2.63542 9.75 2.63802 9.75 2.64062 9.75C2.64323 9.75 2.64583 9.75 2.64844 9.75C2.65104 9.75 2.65365 9.75 2.65625 9.75C2.65885 9.75 2.66146 9.75 2.66406 9.75C2.66667 9.75 2.66927 9.75 2.67188 9.75C2.67448 9.75 2.67708 9.75 2.67969 9.75C2.68229 9.75 2.6849 9.75 2.6875 9.75C2.6901 9.75 2.69271 9.75 2.69531 9.75C2.69792 9.75 2.70052 9.75 2.70312 9.75C2.70573 9.75 2.70833 9.75 2.71094 9.75C2.71354 9.75 2.71615 9.75 2.71875 9.75C2.72135 9.75 2.72396 9.75 2.72656 9.75C2.72917 9.75 2.73177 9.75 2.73438 9.75C2.73698 9.75 2.73958 9.75 2.74219 9.75C2.74479 9.75 2.7474 9.75 2.75 9.75C2.7526 9.75 2.75521 9.75 2.75781 9.75C2.76042 9.75 2.76302 9.75 2.76563 9.75C2.76823 9.75 2.77083 9.75 2.77344 9.75C2.77604 9.75 2.77865 9.75 2.78125 9.75C2.78385 9.75 2.78646 9.75 2.78906 9.75C2.79167 9.75 2.79427 9.75 2.79688 9.75C2.79948 9.75 2.80208 9.75 2.80469 9.75C2.80729 9.75 2.8099 9.75 2.8125 9.75C2.8151 9.75 2.81771 9.75 2.82031 9.75C2.82292 9.75 2.82552 9.75 2.82813 9.75C2.83073 9.75 2.83333 9.75 2.83594 9.75C2.83854 9.75 2.84115 9.75 2.84375 9.75C2.84635 9.75 2.84896 9.75 2.85156 9.75C2.85417 9.75 2.85677 9.75 2.85938 9.75C2.86198 9.75 2.86458 9.75 2.86719 9.75C2.86979 9.75 2.8724 9.75 2.875 9.75C2.8776 9.75 2.88021 9.75 2.88281 9.75C2.88542 9.75 2.88802 9.75 2.89063 9.75C2.89323 9.75 2.89583 9.75 2.89844 9.75C2.90104 9.75 2.90365 9.75 2.90625 9.75C2.90885 9.75 2.91146 9.75 2.91406 9.75C2.91667 9.75 2.91927 9.75 2.92188 9.75C2.92448 9.75 2.92708 9.75 2.92969 9.75C2.93229 9.75 2.9349 9.75 2.9375 9.75C2.9401 9.75 2.94271 9.75 2.94531 9.75C2.94792 9.75 2.95052 9.75 2.95313 9.75C2.95573 9.75 2.95833 9.75 2.96094 9.75C2.96354 9.75 2.96615 9.75 2.96875 9.75C2.97135 9.75 2.97396 9.75 2.97656 9.75C2.97917 9.75 2.98177 9.75 2.98438 9.75C2.98698 9.75 2.98958 9.75 2.99219 9.75C2.99479 9.75 2.9974 9.75 3 9.75C3.0026 9.75 3.00521 9.75 3.00781 9.75C3.01042 9.75 3.01302 9.75 3.01562 9.75C3.01823 9.75 3.02083 9.75 3.02344 9.75C3.02604 9.75 3.02865 9.75 3.03125 9.75C3.03385 9.75 3.03646 9.75 3.03906 9.75C3.04167 9.75 3.04427 9.75 3.04688 9.75C3.04948 9.75 3.05208 9.75 3.05469 9.75C3.05729 9.75 3.0599 9.75 3.0625 9.75C3.0651 9.75 3.06771 9.75 3.07031 9.75C3.07292 9.75 3.07552 9.75 3.07812 9.75C3.08073 9.75 3.08333 9.75 3.08594 9.75C3.08854 9.75 3.09115 9.75 3.09375 9.75C3.09635 9.75 3.09896 9.75 3.10156 9.75C3.10417 9.75 3.10677 9.75 3.10938 9.75C3.11198 9.75 3.11458 9.75 3.11719 9.75C3.11979 9.75 3.1224 9.75 3.125 9.75C3.1276 9.75 3.13021 9.75 3.13281 9.75C3.13542 9.75 3.13802 9.75 3.14062 9.75C3.14323 9.75 3.14583 9.75 3.14844 9.75C3.15104 9.75 3.15365 9.75 3.15625 9.75C3.15885 9.75 3.16146 9.75 3.16406 9.75C3.16667 9.75 3.16927 9.75 3.17188 9.75C3.17448 9.75 3.17708 9.75 3.17969 9.75C3.18229 9.75 3.1849 9.75 3.1875 9.75C3.1901 9.75 3.19271 9.75 3.19531 9.75C3.19792 9.75 3.20052 9.75 3.20312 9.75C3.20573 9.75 3.20833 9.75 3.21094 9.75C3.21354 9.75 3.21615 9.75 3.21875 9.75C3.22135 9.75 3.22396 9.75 3.22656 9.75C3.22917 9.75 3.23177 9.75 3.23438 9.75C3.23698 9.75 3.23958 9.75 3.24219 9.75C3.24479 9.75 3.2474 9.75 3.25 9.75C3.2526 9.75 3.25521 9.75 3.25781 9.75C3.26042 9.75 3.26302 9.75 3.26562 9.75C3.26823 9.75 3.27083 9.75 3.27344 9.75C3.27604 9.75 3.27865 9.75 3.28125 9.75C3.28385 9.75 3.28646 9.75 3.28906 9.75C3.29167 9.75 3.29427 9.75 3.29688 9.75C3.29948 9.75 3.30208 9.75 3.30469 9.75C3.30729 9.75 3.3099 9.75 3.3125 9.75C3.3151 9.75 3.31771 9.75 3.32031 9.75C3.32292 9.75 3.32552 9.75 3.32812 9.75C3.33073 9.75 3.33333 9.75 3.33594 9.75C3.33854 9.75 3.34115 9.75 3.34375 9.75C3.34635 9.75 3.34896 9.75 3.35156 9.75C3.35417 9.75 3.35677 9.75 3.35938 9.75C3.36198 9.75 3.36458 9.75 3.36719 9.75C3.36979 9.75 3.3724 9.75 3.375 9.75C3.3776 9.75 3.38021 9.75 3.38281 9.75C3.38542 9.75 3.38802 9.75 3.39062 9.75C3.39323 9.75 3.39583 9.75 3.39844 9.75C3.40104 9.75 3.40365 9.75 3.40625 9.75C3.40885 9.75 3.41146 9.75 3.41406 9.75C3.41667 9.75 3.41927 9.75 3.42188 9.75C3.42448 9.75 3.42708 9.75 3.42969 9.75C3.43229 9.75 3.4349 9.75 3.4375 9.75C3.4401 9.75 3.44271 9.75 3.44531 9.75C3.44792 9.75 3.45052 9.75 3.45312 9.75C3.45573 9.75 3.45833 9.75 3.46094 9.75C3.46354 9.75 3.46615 9.75 3.46875 9.75C3.47135 9.75 3.47396 9.75 3.47656 9.75C3.47917 9.75 3.48177 9.75 3.48438 9.75C3.48698 9.75 3.48958 9.75 3.49219 9.75C3.49479 9.75 3.4974 9.75 3.5 9.75C3.5026 9.75 3.50521 9.75 3.50781 9.75C3.51042 9.75 3.51302 9.75 3.51562 9.75C3.51823 9.75 3.52083 9.75 3.52344 9.75C3.52604 9.75 3.52865 9.75 3.53125 9.75C3.53385 9.75 3.53646 9.75 3.53906 9.75C3.54167 9.75 3.54427 9.75 3.54688 9.75C3.54948 9.75 3.55208 9.75 3.55469 9.75C3.55729 9.75 3.5599 9.75 3.5625 9.75C3.5651 9.75 3.56771 9.75 3.57031 9.75C3.57292 9.75 3.57552 9.75 3.57812 9.75C3.58073 9.75 3.58333 9.75 3.58594 9.75C3.58854 9.75 3.59115 9.75 3.59375 9.75C3.59635 9.75 3.59896 9.75 3.60156 9.75C3.60417 9.75 3.60677 9.75 3.60938 9.75C3.61198 9.75 3.61458 9.75 3.61719 9.75C3.61979 9.75 3.6224 9.75 3.625 9.75C3.6276 9.75 3.63021 9.75 3.63281 9.75C3.63542 9.75 3.63802 9.75 3.64062 9.75C3.64323 9.75 3.64583 9.75 3.64844 9.75C3.65104 9.75 3.65365 9.75 3.65625 9.75C3.65885 9.75 3.66146 9.75 3.66406 9.75C3.66667 9.75 3.66927 9.75 3.67188 9.75C3.67448 9.75 3.67708 9.75 3.67969 9.75C3.68229 9.75 3.6849 9.75 3.6875 9.75C3.6901 9.75 3.69271 9.75 3.69531 9.75C3.69792 9.75 3.70052 9.75 3.70312 9.75C3.70573 9.75 3.70833 9.75 3.71094 9.75C3.71354 9.75 3.71615 9.75 3.71875 9.75C3.72135 9.75 3.72396 9.75 3.72656 9.75C3.72917 9.75 3.73177 9.75 3.73438 9.75C3.73698 9.75 3.73958 9.75 3.74219 9.75C3.74479 9.75 3.7474 9.75 3.75 9.75C3.7526 9.75 3.75521 9.75 3.75781 9.75C3.76042 9.75 3.76302 9.75 3.76562 9.75C3.76823 9.75 3.77083 9.75 3.77344 9.75C3.77604 9.75 3.77865 9.75 3.78125 9.75C3.78385 9.75 3.78646 9.75 3.78906 9.75C3.79167 9.75 3.79427 9.75 3.79688 9.75C3.79948 9.75 3.80208 9.75 3.80469 9.75C3.80729 9.75 3.8099 9.75 3.8125 9.75C3.8151 9.75 3.81771 9.75 3.82031 9.75C3.82292 9.75 3.82552 9.75 3.82812 9.75C3.83073 9.75 3.83333 9.75 3.83594 9.75C3.83854 9.75 3.84115 9.75 3.84375 9.75C3.84635 9.75 3.84896 9.75 3.85156 9.75C3.85417 9.75 3.85677 9.75 3.85938 9.75C3.86198 9.75 3.86458 9.75 3.86719 9.75C3.86979 9.75 3.8724 9.75 3.875 9.75C3.8776 9.75 3.88021 9.75 3.88281 9.75C3.88542 9.75 3.88802 9.75 3.89062 9.75C3.89323 9.75 3.89583 9.75 3.89844 9.75C3.90104 9.75 3.90365 9.75 3.90625 9.75C3.90885 9.75 3.91146 9.75 3.91406 9.75C3.91667 9.75 3.91927 9.75 3.92188 9.75C3.92448 9.75 3.92708 9.75 3.92969 9.75C3.93229 9.75 3.9349 9.75 3.9375 9.75C3.9401 9.75 3.94271 9.75 3.94531 9.75C3.94792 9.75 3.95052 9.75 3.95312 9.75C3.95573 9.75 3.95833 9.75 3.96094 9.75C3.96354 9.75 3.96615 9.75 3.96875 9.75C3.97135 9.75 3.97396 9.75 3.97656 9.75C3.97917 9.75 3.98177 9.75 3.98438 9.75C3.98698 9.75 3.98958 9.75 3.99219 9.75C3.99479 9.75 3.9974 9.75 4 9.75C4.0026 9.75 4.00521 9.75 4.00781 9.75C4.01042 9.75 4.01302 9.75 4.01562 9.75C4.01823 9.75 4.02083 9.75 4.02344 9.75C4.02604 9.75 4.02865 9.75 4.03125 9.75C4.03385 9.75 4.03646 9.75 4.03906 9.75C4.04167 9.75 4.04427 9.75 4.04688 9.75C4.04948 9.75 4.05208 9.75 4.05469 9.75C4.05729 9.75 4.0599 9.75 4.0625 9.75C4.0651 9.75 4.06771 9.75 4.07031 9.75C4.07292 9.75 4.07552 9.75 4.07812 9.75C4.08073 9.75 4.08333 9.75 4.08594 9.75C4.08854 9.75 4.09115 9.75 4.09375 9.75C4.09635 9.75 4.09896 9.75 4.10156 9.75C4.10417 9.75 4.10677 9.75 4.10938 9.75C4.11198 9.75 4.11458 9.75 4.11719 9.75C4.11979 9.75 4.1224 9.75 4.125 9.75C4.1276 9.75 4.13021 9.75 4.13281 9.75C4.13542 9.75 4.13802 9.75 4.14062 9.75C4.14323 9.75 4.14583 9.75 4.14844 9.75C4.15104 9.75 4.15365 9.75 4.15625 9.75C4.15885 9.75 4.16146 9.75 4.16406 9.75C4.16667 9.75 4.16927 9.75 4.17188 9.75C4.17448 9.75 4.17708 9.75 4.17969 9.75C4.18229 9.75 4.1849 9.75 4.1875 9.75C4.1901 9.75 4.19271 9.75 4.19531 9.75C4.19792 9.75 4.20052 9.75 4.20312 9.75C4.20573 9.75 4.20833 9.75 4.21094 9.75C4.21354 9.75 4.21615 9.75 4.21875 9.75C4.22135 9.75 4.22396 9.75 4.22656 9.75C4.22917 9.75 4.23177 9.75 4.23438 9.75C4.23698 9.75 4.23958 9.75 4.24219 9.75C4.24479 9.75 4.2474 9.75 4.25 9.75C4.2526 9.75 4.25521 9.75 4.25781 9.75C4.26042 9.75 4.26302 9.75 4.26562 9.75C4.26823 9.75 4.27083 9.75 4.27344 9.75C4.27604 9.75 4.27865 9.75 4.28125 9.75C4.28385 9.75 4.28646 9.75 4.28906 9.75C4.29167 9.75 4.29427 9.75 4.29688 9.75C4.29948 9.75 4.30208 9.75 4.30469 9.75C4.30729 9.75 4.3099 9.75 4.3125 9.75C4.3151 9.75 4.31771 9.75 4.32031 9.75C4.32292 9.75 4.32552 9.75 4.32812 9.75C4.33073 9.75 4.33333 9.75 4.33594 9.75C4.33854 9.75 4.34115 9.75 4.34375 9.75C4.34635 9.75 4.34896 9.75 4.35156 9.75C4.35417 9.75 4.35677 9.75 4.35938 9.75C4.36198 9.75 4.36458 9.75 4.36719 9.75C4.36979 9.75 4.3724 9.75 4.375 9.75C4.3776 9.75 4.38021 9.75 4.38281 9.75C4.38542 9.75 4.38802 9.75 4.39062 9.75C4.39323 9.75 4.39583 9.75 4.39844 9.75C4.40104 9.75 4.40365 9.75 4.40625 9.75C4.40885 9.75 4.41146 9.75 4.41406 9.75C4.41667 9.75 4.41927 9.75 4.42188 9.75C4.42448 9.75 4.42708 9.75 4.42969 9.75C4.43229 9.75 4.4349 9.75 4.4375 9.75C4.4401 9.75 4.44271 9.75 4.44531 9.75C4.44792 9.75 4.45052 9.75 4.45312 9.75C4.45573 9.75 4.45833 9.75 4.46094 9.75C4.46354 9.75 4.46615 9.75 4.46875 9.75C4.47135 9.75 4.47396 9.75 4.47656 9.75C4.47917 9.75 4.48177 9.75 4.48438 9.75C4.48698 9.75 4.48958 9.75 4.49219 9.75C4.49479 9.75 4.4974 9.75 4.5 9.75C4.5026 9.75 4.50521 9.75 4.50781 9.75C4.51042 9.75 4.51302 9.75 4.51562 9.75C4.51823 9.75 4.52083 9.75 4.52344 9.75C4.52604 9.75 4.52865 9.75 4.53125 9.75C4.53385 9.75 4.53646 9.75 4.53906 9.75C4.54167 9.75 4.54427 9.75 4.54688 9.75C4.54948 9.75 4.55208 9.75 4.55469 9.75C4.55729 9.75 4.5599 9.75 4.5625 9.75C4.5651 9.75 4.56771 9.75 4.57031 9.75C4.57292 9.75 4.57552 9.75 4.57812 9.75C4.58073 9.75 4.58333 9.75 4.58594 9.75C4.58854 9.75 4.59115 9.75 4.59375 9.75C4.59635 9.75 4.59896 9.75 4.60156 9.75C4.60417 9.75 4.60677 9.75 4.60938 9.75C4.61198 9.75 4.61458 9.75 4.61719 9.75C4.61979 9.75 4.6224 9.75 4.625 9.75C4.6276 9.75 4.63021 9.75 4.63281 9.75C4.63542 9.75 4.63802 9.75 4.64062 9.75C4.64323 9.75 4.64583 9.75 4.64844 9.75C4.65104 9.75 4.65365 9.75 4.65625 9.75C4.65885 9.75 4.66146 9.75 4.66406 9.75C4.66667 9.75 4.66927 9.75 4.67188 9.75C4.67448 9.75 4.67708 9.75 4.67969 9.75C4.68229 9.75 4.6849 9.75 4.6875 9.75C4.6901 9.75 4.69271 9.75 4.69531 9.75C4.69792 9.75 4.70052 9.75 4.70312 9.75C4.70573 9.75 4.70833 9.75 4.71094 9.75C4.71354 9.75 4.71615 9.75 4.71875 9.75C4.72135 9.75 4.72396 9.75 4.72656 9.75C4.72917 9.75 4.73177 9.75 4.73438 9.75C4.73698 9.75 4.73958 9.75 4.74219 9.75C4.74479 9.75 4.7474 9.75 4.75 9.75C4.7526 9.75 4.75521 9.75 4.75781 9.75C4.76042 9.75 4.76302 9.75 4.76562 9.75C4.76823 9.75 4.77083 9.75 4.77344 9.75C4.77604 9.75 4.77865 9.75 4.78125 9.75C4.78385 9.75 4.78646 9.75 4.78906 9.75C4.79167 9.75 4.79427 9.75 4.79688 9.75C4.79948 9.75 4.80208 9.75 4.80469 9.75C4.80729 9.75 4.8099 9.75 4.8125 9.75C4.8151 9.75 4.81771 9.75 4.82031 9.75C4.82292 9.75 4.82552 9.75 4.82812 9.75C4.83073 9.75 4.83333 9.75 4.83594 9.75C4.83854 9.75 4.84115 9.75 4.84375 9.75C4.84635 9.75 4.84896 9.75 4.85156 9.75C4.85417 9.75 4.85677 9.75 4.85938 9.75C4.86198 9.75 4.86458 9.75 4.86719 9.75C4.86979 9.75 4.8724 9.75 4.875 9.75C4.8776 9.75 4.88021 9.75 4.88281 9.75C4.88542 9.75 4.88802 9.75 4.89062 9.75C4.89323 9.75 4.89583 9.75 4.89844 9.75C4.90104 9.75 4.90365 9.75 4.90625 9.75C4.90885 9.75 4.91146 9.75 4.91406 9.75C4.91667 9.75 4.91927 9.75 4.92188 9.75C4.92448 9.75 4.92708 9.75 4.92969 9.75C4.93229 9.75 4.9349 9.75 4.9375 9.75C4.9401 9.75 4.94271 9.75 4.94531 9.75C4.94792 9.75 4.95052 9.75 4.95312 9.75C4.95573 9.75 4.95833 9.75 4.96094 9.75C4.96354 9.75 4.96615 9.75 4.96875 9.75C4.97135 9.75 4.97396 9.75 4.97656 9.75C4.97917 9.75 4.98177 9.75 4.98438 9.75C4.98698 9.75 4.98958 9.75 4.99219 9.75C4.99479 9.75 4.9974 9.75 5 9.75C5.0026 9.75 5.00521 9.75 5.00781 9.75C5.01042 9.75 5.01302 9.75 5.01562 9.75C5.01823 9.75 5.02083 9.75 5.02344 9.75C5.02604 9.75 5.02865 9.75 5.03125 9.75C5.03385 9.75 5.03646 9.75 5.03906 9.75C5.04167 9.75 5.04427 9.75 5.04688 9.75C5.04948 9.75 5.05208 9.75 5.05469 9.75C5.05729 9.75 5.0599 9.75 5.0625 9.75C5.0651 9.75 5.06771 9.75 5.07031 9.75C5.07292 9.75 5.07552 9.75 5.07812 9.75C5.08073 9.75 5.08333 9.75 5.08594 9.75C5.08854 9.75 5.09115 9.75 5.09375 9.75C5.09635 9.75 5.09896 9.75 5.10156 9.75C5.10417 9.75 5.10677 9.75 5.10938 9.75C5.11198 9.75 5.11458 9.75 5.11719 9.75C5.11979 9.75 5.1224 9.75 5.125 9.75C5.1276 9.75 5.13021 9.75 5.13281 9.75C5.13542 9.75 5.13802 9.75 5.14062 9.75C5.14323 9.75 5.14583 9.75 5.14844 9.75C5.15104 9.75 5.15365 9.75 5.15625 9.75C5.15885 9.75 5.16146 9.75 5.16406 9.75C5.16667 9.75 5.16927 9.75 5.17188 9.75C5.17448 9.75 5.17708 9.75 5.17969 9.75C5.18229 9.75 5.1849 9.75 5.1875 9.75C5.1901 9.75 5.19271 9.75 5.19531 9.75C5.19792 9.75 5.20052 9.75 5.20312 9.75C5.20573 9.75 5.20833 9.75 5.21094 9.75C5.21354 9.75 5.21615 9.75 5.21875 9.75C5.22135 9.75 5.22396 9.75 5.22656 9.75C5.22917 9.75 5.23177 9.75 5.23438 9.75C5.23698 9.75 5.23958 9.75 5.24219 9.75C5.24479 9.75 5.2474 9.75 5.25 9.75C5.2526 9.75 5.25521 9.75 5.25781 9.75C5.26042 9.75 5.26302 9.75 5.26562 9.75C5.26823 9.75 5.27083 9.75 5.27344 9.75C5.27604 9.75 5.27865 9.75 5.28125 9.75C5.28385 9.75 5.28646 9.75 5.28906 9.75C5.29167 9.75 5.29427 9.75 5.29688 9.75C5.29948 9.75 5.30208 9.75 5.30469 9.75C5.30729 9.75 5.3099 9.75 5.3125 9.75C5.3151 9.75 5.31771 9.75 5.32031 9.75C5.32292 9.75 5.32552 9.75 5.32812 9.75C5.33073 9.75 5.33333 9.75 5.33594 9.75C5.33854 9.75 5.34115 9.75 5.34375 9.75C5.34635 9.75 5.34896 9.75 5.35156 9.75C5.35417 9.75 5.35677 9.75 5.35938 9.75C5.36198 9.75 5.36458 9.75 5.36719 9.75C5.36979 9.75 5.3724 9.75 5.375 9.75C5.3776 9.75 5.38021 9.75 5.38281 9.75C5.38542 9.75 5.38802 9.75 5.39062 9.75C5.39323 9.75 5.39583 9.75 5.39844 9.75C5.40104 9.75 5.40365 9.75 5.40625 9.75C5.40885 9.75 5.41146 9.75 5.41406 9.75C5.41667 9.75 5.41927 9.75 5.42188 9.75C5.42448 9.75 5.42708 9.75 5.42969 9.75C5.43229 9.75 5.4349 9.75 5.4375 9.75C5.4401 9.75 5.44271 9.75 5.44531 9.75C5.44792 9.75 5.45052 9.75 5.45312 9.75C5.45573 9.75 5.45833 9.75 5.46094 9.75C5.46354 9.75 5.46615 9.75 5.46875 9.75C5.47135 9.75 5.47396 9.75 5.47656 9.75C5.47917 9.75 5.48177 9.75 5.48438 9.75C5.48698 9.75 5.48958 9.75 5.49219 9.75C5.49479 9.75 5.4974 9.75 5.5 9.75C5.5026 9.75 5.50521 9.75 5.50781 9.75C5.51042 9.75 5.51302 9.75 5.51562 9.75C5.51823 9.75 5.52083 9.75 5.52344 9.75C5.52604 9.75 5.52865 9.75 5.53125 9.75C5.53385 9.75 5.53646 9.75 5.53906 9.75C5.54167 9.75 5.54427 9.75 5.54688 9.75C5.54948 9.75 5.55208 9.75 5.55469 9.75C5.55729 9.75 5.5599 9.75 5.5625 9.75C5.5651 9.75 5.56771 9.75 5.57031 9.75C5.57292 9.75 5.57552 9.75 5.57812 9.75C5.58073 9.75 5.58333 9.75 5.58594 9.75C5.58854 9.75 5.59115 9.75 5.59375 9.75C5.59635 9.75 5.59896 9.75 5.60156 9.75C5.60417 9.75 5.60677 9.75 5.60938 9.75C5.61198 9.75 5.61458 9.75 5.61719 9.75C5.61979 9.75 5.6224 9.75 5.625 9.75C5.6276 9.75 5.63021 9.75 5.63281 9.75C5.63542 9.75 5.63802 9.75 5.64062 9.75C5.64323 9.75 5.64583 9.75 5.64844 9.75C5.65104 9.75 5.65365 9.75 5.65625 9.75C5.65885 9.75 5.66146 9.75 5.66406 9.75C5.66667 9.75 5.66927 9.75 5.67188 9.75C5.67448 9.75 5.67708 9.75 5.67969 9.75C5.68229 9.75 5.6849 9.75 5.6875 9.75C5.6901 9.75 5.69271 9.75 5.69531 9.75C5.69792 9.75 5.70052 9.75 5.70312 9.75C5.70573 9.75 5.70833 9.75 5.71094 9.75C5.71354 9.75 5.71615 9.75 5.71875 9.75C5.72135 9.75 5.72396 9.75 5.72656 9.75C5.72917 9.75 5.73177 9.75 5.73438 9.75C5.73698 9.75 5.73958 9.75 5.74219 9.75C5.74479 9.75 5.7474 9.75 5.75 9.75C5.7526 9.75 5.75521 9.75 5.75781 9.75C5.76042 9.75 5.76302 9.75 5.76562 9.75C5.76823 9.75 5.77083 9.75 5.77344 9.75C5.77604 9.75 5.77865 9.75 5.78125 9.75C5.78385 9.75 5.78646 9.75 5.78906 9.75C5.79167 9.75 5.79427 9.75 5.79688 9.75C5.79948 9.75 5.80208 9.75 5.80469 9.75C5.80729 9.75 5.8099 9.75 5.8125 9.75C5.8151 9.75 5.81771 9.75 5.82031 9.75C5.82292 9.75 5.82552 9.75 5.82812 9.75C5.83073 9.75 5.83333 9.75 5.83594 9.75C5.83854 9.75 5.84115 9.75 5.84375 9.75C5.84635 9.75 5.84896 9.75 5.85156 9.75C5.85417 9.75 5.85677 9.75 5.85938 9.75C5.86198 9.75 5.86458 9.75 5.86719 9.75C5.86979 9.75 5.8724 9.75 5.875 9.75C5.8776 9.75 5.88021 9.75 5.88281 9.75C5.88542 9.75 5.88802 9.75 5.89062 9.75C5.89323 9.75 5.89583 9.75 5.89844 9.75C5.90104 9.75 5.90365 9.75 5.90625 9.75C5.90885 9.75 5.91146 9.75 5.91406 9.75C5.91667 9.75 5.91927 9.75 5.92188 9.75C5.92448 9.75 5.92708 9.75 5.92969 9.75C5.93229 9.75 5.9349 9.75 5.9375 9.75C5.9401 9.75 5.94271 9.75 5.94531 9.75C5.94792 9.75 5.95052 9.75 5.95312 9.75C5.95573 9.75 5.95833 9.75 5.96094 9.75C5.96354 9.75 5.96615 9.75 5.96875 9.75C5.97135 9.75 5.97396 9.75 5.97656 9.75C5.97917 9.75 5.98177 9.75 5.98438 9.75C5.98698 9.75 5.98958 9.75 5.99219 9.75C5.99479 9.75 5.9974 9.75 6 9.75V8.25C5.9974 8.25 5.99479 8.25 5.99219 8.25C5.98958 8.25 5.98698 8.25 5.98438 8.25C5.98177 8.25 5.97917 8.25 5.97656 8.25C5.97396 8.25 5.97135 8.25 5.96875 8.25C5.96615 8.25 5.96354 8.25 5.96094 8.25C5.95833 8.25 5.95573 8.25 5.95312 8.25C5.95052 8.25 5.94792 8.25 5.94531 8.25C5.94271 8.25 5.9401 8.25 5.9375 8.25C5.9349 8.25 5.93229 8.25 5.92969 8.25C5.92708 8.25 5.92448 8.25 5.92188 8.25C5.91927 8.25 5.91667 8.25 5.91406 8.25C5.91146 8.25 5.90885 8.25 5.90625 8.25C5.90365 8.25 5.90104 8.25 5.89844 8.25C5.89583 8.25 5.89323 8.25 5.89062 8.25C5.88802 8.25 5.88542 8.25 5.88281 8.25C5.88021 8.25 5.8776 8.25 5.875 8.25C5.8724 8.25 5.86979 8.25 5.86719 8.25C5.86458 8.25 5.86198 8.25 5.85938 8.25C5.85677 8.25 5.85417 8.25 5.85156 8.25C5.84896 8.25 5.84635 8.25 5.84375 8.25C5.84115 8.25 5.83854 8.25 5.83594 8.25C5.83333 8.25 5.83073 8.25 5.82812 8.25C5.82552 8.25 5.82292 8.25 5.82031 8.25C5.81771 8.25 5.8151 8.25 5.8125 8.25C5.8099 8.25 5.80729 8.25 5.80469 8.25C5.80208 8.25 5.79948 8.25 5.79688 8.25C5.79427 8.25 5.79167 8.25 5.78906 8.25C5.78646 8.25 5.78385 8.25 5.78125 8.25C5.77865 8.25 5.77604 8.25 5.77344 8.25C5.77083 8.25 5.76823 8.25 5.76562 8.25C5.76302 8.25 5.76042 8.25 5.75781 8.25C5.75521 8.25 5.7526 8.25 5.75 8.25C5.7474 8.25 5.74479 8.25 5.74219 8.25C5.73958 8.25 5.73698 8.25 5.73438 8.25C5.73177 8.25 5.72917 8.25 5.72656 8.25C5.72396 8.25 5.72135 8.25 5.71875 8.25C5.71615 8.25 5.71354 8.25 5.71094 8.25C5.70833 8.25 5.70573 8.25 5.70312 8.25C5.70052 8.25 5.69792 8.25 5.69531 8.25C5.69271 8.25 5.6901 8.25 5.6875 8.25C5.6849 8.25 5.68229 8.25 5.67969 8.25C5.67708 8.25 5.67448 8.25 5.67188 8.25C5.66927 8.25 5.66667 8.25 5.66406 8.25C5.66146 8.25 5.65885 8.25 5.65625 8.25C5.65365 8.25 5.65104 8.25 5.64844 8.25C5.64583 8.25 5.64323 8.25 5.64062 8.25C5.63802 8.25 5.63542 8.25 5.63281 8.25C5.63021 8.25 5.6276 8.25 5.625 8.25C5.6224 8.25 5.61979 8.25 5.61719 8.25C5.61458 8.25 5.61198 8.25 5.60938 8.25C5.60677 8.25 5.60417 8.25 5.60156 8.25C5.59896 8.25 5.59635 8.25 5.59375 8.25C5.59115 8.25 5.58854 8.25 5.58594 8.25C5.58333 8.25 5.58073 8.25 5.57812 8.25C5.57552 8.25 5.57292 8.25 5.57031 8.25C5.56771 8.25 5.5651 8.25 5.5625 8.25C5.5599 8.25 5.55729 8.25 5.55469 8.25C5.55208 8.25 5.54948 8.25 5.54688 8.25C5.54427 8.25 5.54167 8.25 5.53906 8.25C5.53646 8.25 5.53385 8.25 5.53125 8.25C5.52865 8.25 5.52604 8.25 5.52344 8.25C5.52083 8.25 5.51823 8.25 5.51562 8.25C5.51302 8.25 5.51042 8.25 5.50781 8.25C5.50521 8.25 5.5026 8.25 5.5 8.25C5.4974 8.25 5.49479 8.25 5.49219 8.25C5.48958 8.25 5.48698 8.25 5.48438 8.25C5.48177 8.25 5.47917 8.25 5.47656 8.25C5.47396 8.25 5.47135 8.25 5.46875 8.25C5.46615 8.25 5.46354 8.25 5.46094 8.25C5.45833 8.25 5.45573 8.25 5.45312 8.25C5.45052 8.25 5.44792 8.25 5.44531 8.25C5.44271 8.25 5.4401 8.25 5.4375 8.25C5.4349 8.25 5.43229 8.25 5.42969 8.25C5.42708 8.25 5.42448 8.25 5.42188 8.25C5.41927 8.25 5.41667 8.25 5.41406 8.25C5.41146 8.25 5.40885 8.25 5.40625 8.25C5.40365 8.25 5.40104 8.25 5.39844 8.25C5.39583 8.25 5.39323 8.25 5.39062 8.25C5.38802 8.25 5.38542 8.25 5.38281 8.25C5.38021 8.25 5.3776 8.25 5.375 8.25C5.3724 8.25 5.36979 8.25 5.36719 8.25C5.36458 8.25 5.36198 8.25 5.35938 8.25C5.35677 8.25 5.35417 8.25 5.35156 8.25C5.34896 8.25 5.34635 8.25 5.34375 8.25C5.34115 8.25 5.33854 8.25 5.33594 8.25C5.33333 8.25 5.33073 8.25 5.32812 8.25C5.32552 8.25 5.32292 8.25 5.32031 8.25C5.31771 8.25 5.3151 8.25 5.3125 8.25C5.3099 8.25 5.30729 8.25 5.30469 8.25C5.30208 8.25 5.29948 8.25 5.29688 8.25C5.29427 8.25 5.29167 8.25 5.28906 8.25C5.28646 8.25 5.28385 8.25 5.28125 8.25C5.27865 8.25 5.27604 8.25 5.27344 8.25C5.27083 8.25 5.26823 8.25 5.26562 8.25C5.26302 8.25 5.26042 8.25 5.25781 8.25C5.25521 8.25 5.2526 8.25 5.25 8.25C5.2474 8.25 5.24479 8.25 5.24219 8.25C5.23958 8.25 5.23698 8.25 5.23438 8.25C5.23177 8.25 5.22917 8.25 5.22656 8.25C5.22396 8.25 5.22135 8.25 5.21875 8.25C5.21615 8.25 5.21354 8.25 5.21094 8.25C5.20833 8.25 5.20573 8.25 5.20312 8.25C5.20052 8.25 5.19792 8.25 5.19531 8.25C5.19271 8.25 5.1901 8.25 5.1875 8.25C5.1849 8.25 5.18229 8.25 5.17969 8.25C5.17708 8.25 5.17448 8.25 5.17188 8.25C5.16927 8.25 5.16667 8.25 5.16406 8.25C5.16146 8.25 5.15885 8.25 5.15625 8.25C5.15365 8.25 5.15104 8.25 5.14844 8.25C5.14583 8.25 5.14323 8.25 5.14062 8.25C5.13802 8.25 5.13542 8.25 5.13281 8.25C5.13021 8.25 5.1276 8.25 5.125 8.25C5.1224 8.25 5.11979 8.25 5.11719 8.25C5.11458 8.25 5.11198 8.25 5.10938 8.25C5.10677 8.25 5.10417 8.25 5.10156 8.25C5.09896 8.25 5.09635 8.25 5.09375 8.25C5.09115 8.25 5.08854 8.25 5.08594 8.25C5.08333 8.25 5.08073 8.25 5.07812 8.25C5.07552 8.25 5.07292 8.25 5.07031 8.25C5.06771 8.25 5.0651 8.25 5.0625 8.25C5.0599 8.25 5.05729 8.25 5.05469 8.25C5.05208 8.25 5.04948 8.25 5.04688 8.25C5.04427 8.25 5.04167 8.25 5.03906 8.25C5.03646 8.25 5.03385 8.25 5.03125 8.25C5.02865 8.25 5.02604 8.25 5.02344 8.25C5.02083 8.25 5.01823 8.25 5.01562 8.25C5.01302 8.25 5.01042 8.25 5.00781 8.25C5.00521 8.25 5.0026 8.25 5 8.25C4.9974 8.25 4.99479 8.25 4.99219 8.25C4.98958 8.25 4.98698 8.25 4.98438 8.25C4.98177 8.25 4.97917 8.25 4.97656 8.25C4.97396 8.25 4.97135 8.25 4.96875 8.25C4.96615 8.25 4.96354 8.25 4.96094 8.25C4.95833 8.25 4.95573 8.25 4.95312 8.25C4.95052 8.25 4.94792 8.25 4.94531 8.25C4.94271 8.25 4.9401 8.25 4.9375 8.25C4.9349 8.25 4.93229 8.25 4.92969 8.25C4.92708 8.25 4.92448 8.25 4.92188 8.25C4.91927 8.25 4.91667 8.25 4.91406 8.25C4.91146 8.25 4.90885 8.25 4.90625 8.25C4.90365 8.25 4.90104 8.25 4.89844 8.25C4.89583 8.25 4.89323 8.25 4.89062 8.25C4.88802 8.25 4.88542 8.25 4.88281 8.25C4.88021 8.25 4.8776 8.25 4.875 8.25C4.8724 8.25 4.86979 8.25 4.86719 8.25C4.86458 8.25 4.86198 8.25 4.85938 8.25C4.85677 8.25 4.85417 8.25 4.85156 8.25C4.84896 8.25 4.84635 8.25 4.84375 8.25C4.84115 8.25 4.83854 8.25 4.83594 8.25C4.83333 8.25 4.83073 8.25 4.82812 8.25C4.82552 8.25 4.82292 8.25 4.82031 8.25C4.81771 8.25 4.8151 8.25 4.8125 8.25C4.8099 8.25 4.80729 8.25 4.80469 8.25C4.80208 8.25 4.79948 8.25 4.79688 8.25C4.79427 8.25 4.79167 8.25 4.78906 8.25C4.78646 8.25 4.78385 8.25 4.78125 8.25C4.77865 8.25 4.77604 8.25 4.77344 8.25C4.77083 8.25 4.76823 8.25 4.76562 8.25C4.76302 8.25 4.76042 8.25 4.75781 8.25C4.75521 8.25 4.7526 8.25 4.75 8.25C4.7474 8.25 4.74479 8.25 4.74219 8.25C4.73958 8.25 4.73698 8.25 4.73438 8.25C4.73177 8.25 4.72917 8.25 4.72656 8.25C4.72396 8.25 4.72135 8.25 4.71875 8.25C4.71615 8.25 4.71354 8.25 4.71094 8.25C4.70833 8.25 4.70573 8.25 4.70312 8.25C4.70052 8.25 4.69792 8.25 4.69531 8.25C4.69271 8.25 4.6901 8.25 4.6875 8.25C4.6849 8.25 4.68229 8.25 4.67969 8.25C4.67708 8.25 4.67448 8.25 4.67188 8.25C4.66927 8.25 4.66667 8.25 4.66406 8.25C4.66146 8.25 4.65885 8.25 4.65625 8.25C4.65365 8.25 4.65104 8.25 4.64844 8.25C4.64583 8.25 4.64323 8.25 4.64062 8.25C4.63802 8.25 4.63542 8.25 4.63281 8.25C4.63021 8.25 4.6276 8.25 4.625 8.25C4.6224 8.25 4.61979 8.25 4.61719 8.25C4.61458 8.25 4.61198 8.25 4.60938 8.25C4.60677 8.25 4.60417 8.25 4.60156 8.25C4.59896 8.25 4.59635 8.25 4.59375 8.25C4.59115 8.25 4.58854 8.25 4.58594 8.25C4.58333 8.25 4.58073 8.25 4.57812 8.25C4.57552 8.25 4.57292 8.25 4.57031 8.25C4.56771 8.25 4.5651 8.25 4.5625 8.25C4.5599 8.25 4.55729 8.25 4.55469 8.25C4.55208 8.25 4.54948 8.25 4.54688 8.25C4.54427 8.25 4.54167 8.25 4.53906 8.25C4.53646 8.25 4.53385 8.25 4.53125 8.25C4.52865 8.25 4.52604 8.25 4.52344 8.25C4.52083 8.25 4.51823 8.25 4.51562 8.25C4.51302 8.25 4.51042 8.25 4.50781 8.25C4.50521 8.25 4.5026 8.25 4.5 8.25C4.4974 8.25 4.49479 8.25 4.49219 8.25C4.48958 8.25 4.48698 8.25 4.48438 8.25C4.48177 8.25 4.47917 8.25 4.47656 8.25C4.47396 8.25 4.47135 8.25 4.46875 8.25C4.46615 8.25 4.46354 8.25 4.46094 8.25C4.45833 8.25 4.45573 8.25 4.45312 8.25C4.45052 8.25 4.44792 8.25 4.44531 8.25C4.44271 8.25 4.4401 8.25 4.4375 8.25C4.4349 8.25 4.43229 8.25 4.42969 8.25C4.42708 8.25 4.42448 8.25 4.42188 8.25C4.41927 8.25 4.41667 8.25 4.41406 8.25C4.41146 8.25 4.40885 8.25 4.40625 8.25C4.40365 8.25 4.40104 8.25 4.39844 8.25C4.39583 8.25 4.39323 8.25 4.39062 8.25C4.38802 8.25 4.38542 8.25 4.38281 8.25C4.38021 8.25 4.3776 8.25 4.375 8.25C4.3724 8.25 4.36979 8.25 4.36719 8.25C4.36458 8.25 4.36198 8.25 4.35938 8.25C4.35677 8.25 4.35417 8.25 4.35156 8.25C4.34896 8.25 4.34635 8.25 4.34375 8.25C4.34115 8.25 4.33854 8.25 4.33594 8.25C4.33333 8.25 4.33073 8.25 4.32812 8.25C4.32552 8.25 4.32292 8.25 4.32031 8.25C4.31771 8.25 4.3151 8.25 4.3125 8.25C4.3099 8.25 4.30729 8.25 4.30469 8.25C4.30208 8.25 4.29948 8.25 4.29688 8.25C4.29427 8.25 4.29167 8.25 4.28906 8.25C4.28646 8.25 4.28385 8.25 4.28125 8.25C4.27865 8.25 4.27604 8.25 4.27344 8.25C4.27083 8.25 4.26823 8.25 4.26562 8.25C4.26302 8.25 4.26042 8.25 4.25781 8.25C4.25521 8.25 4.2526 8.25 4.25 8.25C4.2474 8.25 4.24479 8.25 4.24219 8.25C4.23958 8.25 4.23698 8.25 4.23438 8.25C4.23177 8.25 4.22917 8.25 4.22656 8.25C4.22396 8.25 4.22135 8.25 4.21875 8.25C4.21615 8.25 4.21354 8.25 4.21094 8.25C4.20833 8.25 4.20573 8.25 4.20312 8.25C4.20052 8.25 4.19792 8.25 4.19531 8.25C4.19271 8.25 4.1901 8.25 4.1875 8.25C4.1849 8.25 4.18229 8.25 4.17969 8.25C4.17708 8.25 4.17448 8.25 4.17188 8.25C4.16927 8.25 4.16667 8.25 4.16406 8.25C4.16146 8.25 4.15885 8.25 4.15625 8.25C4.15365 8.25 4.15104 8.25 4.14844 8.25C4.14583 8.25 4.14323 8.25 4.14062 8.25C4.13802 8.25 4.13542 8.25 4.13281 8.25C4.13021 8.25 4.1276 8.25 4.125 8.25C4.1224 8.25 4.11979 8.25 4.11719 8.25C4.11458 8.25 4.11198 8.25 4.10938 8.25C4.10677 8.25 4.10417 8.25 4.10156 8.25C4.09896 8.25 4.09635 8.25 4.09375 8.25C4.09115 8.25 4.08854 8.25 4.08594 8.25C4.08333 8.25 4.08073 8.25 4.07812 8.25C4.07552 8.25 4.07292 8.25 4.07031 8.25C4.06771 8.25 4.0651 8.25 4.0625 8.25C4.0599 8.25 4.05729 8.25 4.05469 8.25C4.05208 8.25 4.04948 8.25 4.04688 8.25C4.04427 8.25 4.04167 8.25 4.03906 8.25C4.03646 8.25 4.03385 8.25 4.03125 8.25C4.02865 8.25 4.02604 8.25 4.02344 8.25C4.02083 8.25 4.01823 8.25 4.01562 8.25C4.01302 8.25 4.01042 8.25 4.00781 8.25C4.00521 8.25 4.0026 8.25 4 8.25C3.9974 8.25 3.99479 8.25 3.99219 8.25C3.98958 8.25 3.98698 8.25 3.98438 8.25C3.98177 8.25 3.97917 8.25 3.97656 8.25C3.97396 8.25 3.97135 8.25 3.96875 8.25C3.96615 8.25 3.96354 8.25 3.96094 8.25C3.95833 8.25 3.95573 8.25 3.95312 8.25C3.95052 8.25 3.94792 8.25 3.94531 8.25C3.94271 8.25 3.9401 8.25 3.9375 8.25C3.9349 8.25 3.93229 8.25 3.92969 8.25C3.92708 8.25 3.92448 8.25 3.92188 8.25C3.91927 8.25 3.91667 8.25 3.91406 8.25C3.91146 8.25 3.90885 8.25 3.90625 8.25C3.90365 8.25 3.90104 8.25 3.89844 8.25C3.89583 8.25 3.89323 8.25 3.89062 8.25C3.88802 8.25 3.88542 8.25 3.88281 8.25C3.88021 8.25 3.8776 8.25 3.875 8.25C3.8724 8.25 3.86979 8.25 3.86719 8.25C3.86458 8.25 3.86198 8.25 3.85938 8.25C3.85677 8.25 3.85417 8.25 3.85156 8.25C3.84896 8.25 3.84635 8.25 3.84375 8.25C3.84115 8.25 3.83854 8.25 3.83594 8.25C3.83333 8.25 3.83073 8.25 3.82812 8.25C3.82552 8.25 3.82292 8.25 3.82031 8.25C3.81771 8.25 3.8151 8.25 3.8125 8.25C3.8099 8.25 3.80729 8.25 3.80469 8.25C3.80208 8.25 3.79948 8.25 3.79688 8.25C3.79427 8.25 3.79167 8.25 3.78906 8.25C3.78646 8.25 3.78385 8.25 3.78125 8.25C3.77865 8.25 3.77604 8.25 3.77344 8.25C3.77083 8.25 3.76823 8.25 3.76562 8.25C3.76302 8.25 3.76042 8.25 3.75781 8.25C3.75521 8.25 3.7526 8.25 3.75 8.25C3.7474 8.25 3.74479 8.25 3.74219 8.25C3.73958 8.25 3.73698 8.25 3.73438 8.25C3.73177 8.25 3.72917 8.25 3.72656 8.25C3.72396 8.25 3.72135 8.25 3.71875 8.25C3.71615 8.25 3.71354 8.25 3.71094 8.25C3.70833 8.25 3.70573 8.25 3.70312 8.25C3.70052 8.25 3.69792 8.25 3.69531 8.25C3.69271 8.25 3.6901 8.25 3.6875 8.25C3.6849 8.25 3.68229 8.25 3.67969 8.25C3.67708 8.25 3.67448 8.25 3.67188 8.25C3.66927 8.25 3.66667 8.25 3.66406 8.25C3.66146 8.25 3.65885 8.25 3.65625 8.25C3.65365 8.25 3.65104 8.25 3.64844 8.25C3.64583 8.25 3.64323 8.25 3.64062 8.25C3.63802 8.25 3.63542 8.25 3.63281 8.25C3.63021 8.25 3.6276 8.25 3.625 8.25C3.6224 8.25 3.61979 8.25 3.61719 8.25C3.61458 8.25 3.61198 8.25 3.60938 8.25C3.60677 8.25 3.60417 8.25 3.60156 8.25C3.59896 8.25 3.59635 8.25 3.59375 8.25C3.59115 8.25 3.58854 8.25 3.58594 8.25C3.58333 8.25 3.58073 8.25 3.57812 8.25C3.57552 8.25 3.57292 8.25 3.57031 8.25C3.56771 8.25 3.5651 8.25 3.5625 8.25C3.5599 8.25 3.55729 8.25 3.55469 8.25C3.55208 8.25 3.54948 8.25 3.54688 8.25C3.54427 8.25 3.54167 8.25 3.53906 8.25C3.53646 8.25 3.53385 8.25 3.53125 8.25C3.52865 8.25 3.52604 8.25 3.52344 8.25C3.52083 8.25 3.51823 8.25 3.51562 8.25C3.51302 8.25 3.51042 8.25 3.50781 8.25C3.50521 8.25 3.5026 8.25 3.5 8.25C3.4974 8.25 3.49479 8.25 3.49219 8.25C3.48958 8.25 3.48698 8.25 3.48438 8.25C3.48177 8.25 3.47917 8.25 3.47656 8.25C3.47396 8.25 3.47135 8.25 3.46875 8.25C3.46615 8.25 3.46354 8.25 3.46094 8.25C3.45833 8.25 3.45573 8.25 3.45312 8.25C3.45052 8.25 3.44792 8.25 3.44531 8.25C3.44271 8.25 3.4401 8.25 3.4375 8.25C3.4349 8.25 3.43229 8.25 3.42969 8.25C3.42708 8.25 3.42448 8.25 3.42188 8.25C3.41927 8.25 3.41667 8.25 3.41406 8.25C3.41146 8.25 3.40885 8.25 3.40625 8.25C3.40365 8.25 3.40104 8.25 3.39844 8.25C3.39583 8.25 3.39323 8.25 3.39062 8.25C3.38802 8.25 3.38542 8.25 3.38281 8.25C3.38021 8.25 3.3776 8.25 3.375 8.25C3.3724 8.25 3.36979 8.25 3.36719 8.25C3.36458 8.25 3.36198 8.25 3.35938 8.25C3.35677 8.25 3.35417 8.25 3.35156 8.25C3.34896 8.25 3.34635 8.25 3.34375 8.25C3.34115 8.25 3.33854 8.25 3.33594 8.25C3.33333 8.25 3.33073 8.25 3.32812 8.25C3.32552 8.25 3.32292 8.25 3.32031 8.25C3.31771 8.25 3.3151 8.25 3.3125 8.25C3.3099 8.25 3.30729 8.25 3.30469 8.25C3.30208 8.25 3.29948 8.25 3.29688 8.25C3.29427 8.25 3.29167 8.25 3.28906 8.25C3.28646 8.25 3.28385 8.25 3.28125 8.25C3.27865 8.25 3.27604 8.25 3.27344 8.25C3.27083 8.25 3.26823 8.25 3.26562 8.25C3.26302 8.25 3.26042 8.25 3.25781 8.25C3.25521 8.25 3.2526 8.25 3.25 8.25C3.2474 8.25 3.24479 8.25 3.24219 8.25C3.23958 8.25 3.23698 8.25 3.23438 8.25C3.23177 8.25 3.22917 8.25 3.22656 8.25C3.22396 8.25 3.22135 8.25 3.21875 8.25C3.21615 8.25 3.21354 8.25 3.21094 8.25C3.20833 8.25 3.20573 8.25 3.20312 8.25C3.20052 8.25 3.19792 8.25 3.19531 8.25C3.19271 8.25 3.1901 8.25 3.1875 8.25C3.1849 8.25 3.18229 8.25 3.17969 8.25C3.17708 8.25 3.17448 8.25 3.17188 8.25C3.16927 8.25 3.16667 8.25 3.16406 8.25C3.16146 8.25 3.15885 8.25 3.15625 8.25C3.15365 8.25 3.15104 8.25 3.14844 8.25C3.14583 8.25 3.14323 8.25 3.14062 8.25C3.13802 8.25 3.13542 8.25 3.13281 8.25C3.13021 8.25 3.1276 8.25 3.125 8.25C3.1224 8.25 3.11979 8.25 3.11719 8.25C3.11458 8.25 3.11198 8.25 3.10938 8.25C3.10677 8.25 3.10417 8.25 3.10156 8.25C3.09896 8.25 3.09635 8.25 3.09375 8.25C3.09115 8.25 3.08854 8.25 3.08594 8.25C3.08333 8.25 3.08073 8.25 3.07812 8.25C3.07552 8.25 3.07292 8.25 3.07031 8.25C3.06771 8.25 3.0651 8.25 3.0625 8.25C3.0599 8.25 3.05729 8.25 3.05469 8.25C3.05208 8.25 3.04948 8.25 3.04688 8.25C3.04427 8.25 3.04167 8.25 3.03906 8.25C3.03646 8.25 3.03385 8.25 3.03125 8.25C3.02865 8.25 3.02604 8.25 3.02344 8.25C3.02083 8.25 3.01823 8.25 3.01562 8.25C3.01302 8.25 3.01042 8.25 3.00781 8.25C3.00521 8.25 3.0026 8.25 3 8.25C2.9974 8.25 2.99479 8.25 2.99219 8.25C2.98958 8.25 2.98698 8.25 2.98438 8.25C2.98177 8.25 2.97917 8.25 2.97656 8.25C2.97396 8.25 2.97135 8.25 2.96875 8.25C2.96615 8.25 2.96354 8.25 2.96094 8.25C2.95833 8.25 2.95573 8.25 2.95313 8.25C2.95052 8.25 2.94792 8.25 2.94531 8.25C2.94271 8.25 2.9401 8.25 2.9375 8.25C2.9349 8.25 2.93229 8.25 2.92969 8.25C2.92708 8.25 2.92448 8.25 2.92188 8.25C2.91927 8.25 2.91667 8.25 2.91406 8.25C2.91146 8.25 2.90885 8.25 2.90625 8.25C2.90365 8.25 2.90104 8.25 2.89844 8.25C2.89583 8.25 2.89323 8.25 2.89063 8.25C2.88802 8.25 2.88542 8.25 2.88281 8.25C2.88021 8.25 2.8776 8.25 2.875 8.25C2.8724 8.25 2.86979 8.25 2.86719 8.25C2.86458 8.25 2.86198 8.25 2.85938 8.25C2.85677 8.25 2.85417 8.25 2.85156 8.25C2.84896 8.25 2.84635 8.25 2.84375 8.25C2.84115 8.25 2.83854 8.25 2.83594 8.25C2.83333 8.25 2.83073 8.25 2.82813 8.25C2.82552 8.25 2.82292 8.25 2.82031 8.25C2.81771 8.25 2.8151 8.25 2.8125 8.25C2.8099 8.25 2.80729 8.25 2.80469 8.25C2.80208 8.25 2.79948 8.25 2.79688 8.25C2.79427 8.25 2.79167 8.25 2.78906 8.25C2.78646 8.25 2.78385 8.25 2.78125 8.25C2.77865 8.25 2.77604 8.25 2.77344 8.25C2.77083 8.25 2.76823 8.25 2.76563 8.25C2.76302 8.25 2.76042 8.25 2.75781 8.25C2.75521 8.25 2.7526 8.25 2.75 8.25C2.7474 8.25 2.74479 8.25 2.74219 8.25C2.73958 8.25 2.73698 8.25 2.73438 8.25C2.73177 8.25 2.72917 8.25 2.72656 8.25C2.72396 8.25 2.72135 8.25 2.71875 8.25C2.71615 8.25 2.71354 8.25 2.71094 8.25C2.70833 8.25 2.70573 8.25 2.70312 8.25C2.70052 8.25 2.69792 8.25 2.69531 8.25C2.69271 8.25 2.6901 8.25 2.6875 8.25C2.6849 8.25 2.68229 8.25 2.67969 8.25C2.67708 8.25 2.67448 8.25 2.67188 8.25C2.66927 8.25 2.66667 8.25 2.66406 8.25C2.66146 8.25 2.65885 8.25 2.65625 8.25C2.65365 8.25 2.65104 8.25 2.64844 8.25C2.64583 8.25 2.64323 8.25 2.64062 8.25C2.63802 8.25 2.63542 8.25 2.63281 8.25C2.63021 8.25 2.6276 8.25 2.625 8.25C2.6224 8.25 2.61979 8.25 2.61719 8.25C2.61458 8.25 2.61198 8.25 2.60938 8.25C2.60677 8.25 2.60417 8.25 2.60156 8.25C2.59896 8.25 2.59635 8.25 2.59375 8.25C2.59115 8.25 2.58854 8.25 2.58594 8.25C2.58333 8.25 2.58073 8.25 2.57812 8.25C2.57552 8.25 2.57292 8.25 2.57031 8.25C2.56771 8.25 2.5651 8.25 2.5625 8.25C2.5599 8.25 2.55729 8.25 2.55469 8.25C2.55208 8.25 2.54948 8.25 2.54688 8.25C2.54427 8.25 2.54167 8.25 2.53906 8.25C2.53646 8.25 2.53385 8.25 2.53125 8.25C2.52865 8.25 2.52604 8.25 2.52344 8.25C2.52083 8.25 2.51823 8.25 2.51562 8.25C2.51302 8.25 2.51042 8.25 2.50781 8.25C2.50521 8.25 2.5026 8.25 2.5 8.25C2.4974 8.25 2.49479 8.25 2.49219 8.25C2.48958 8.25 2.48698 8.25 2.48438 8.25C2.48177 8.25 2.47917 8.25 2.47656 8.25C2.47396 8.25 2.47135 8.25 2.46875 8.25C2.46615 8.25 2.46354 8.25 2.46094 8.25C2.45833 8.25 2.45573 8.25 2.45313 8.25C2.45052 8.25 2.44792 8.25 2.44531 8.25C2.44271 8.25 2.4401 8.25 2.4375 8.25C2.4349 8.25 2.43229 8.25 2.42969 8.25C2.42708 8.25 2.42448 8.25 2.42188 8.25C2.41927 8.25 2.41667 8.25 2.41406 8.25C2.41146 8.25 2.40885 8.25 2.40625 8.25C2.40365 8.25 2.40104 8.25 2.39844 8.25C2.39583 8.25 2.39323 8.25 2.39063 8.25C2.38802 8.25 2.38542 8.25 2.38281 8.25C2.38021 8.25 2.3776 8.25 2.375 8.25C2.3724 8.25 2.36979 8.25 2.36719 8.25C2.36458 8.25 2.36198 8.25 2.35938 8.25C2.35677 8.25 2.35417 8.25 2.35156 8.25C2.34896 8.25 2.34635 8.25 2.34375 8.25C2.34115 8.25 2.33854 8.25 2.33594 8.25C2.33333 8.25 2.33073 8.25 2.32813 8.25C2.32552 8.25 2.32292 8.25 2.32031 8.25C2.31771 8.25 2.3151 8.25 2.3125 8.25C2.3099 8.25 2.30729 8.25 2.30469 8.25C2.30208 8.25 2.29948 8.25 2.29688 8.25C2.29427 8.25 2.29167 8.25 2.28906 8.25C2.28646 8.25 2.28385 8.25 2.28125 8.25C2.27865 8.25 2.27604 8.25 2.27344 8.25C2.27083 8.25 2.26823 8.25 2.26562 8.25C2.26302 8.25 2.26042 8.25 2.25781 8.25C2.25521 8.25 2.2526 8.25 2.25 8.25C2.2474 8.25 2.24479 8.25 2.24219 8.25C2.23958 8.25 2.23698 8.25 2.23438 8.25C2.23177 8.25 2.22917 8.25 2.22656 8.25C2.22396 8.25 2.22135 8.25 2.21875 8.25C2.21615 8.25 2.21354 8.25 2.21094 8.25C2.20833 8.25 2.20573 8.25 2.20313 8.25C2.20052 8.25 2.19792 8.25 2.19531 8.25C2.19271 8.25 2.1901 8.25 2.1875 8.25C2.1849 8.25 2.18229 8.25 2.17969 8.25C2.17708 8.25 2.17448 8.25 2.17188 8.25C2.16927 8.25 2.16667 8.25 2.16406 8.25C2.16146 8.25 2.15885 8.25 2.15625 8.25C2.15365 8.25 2.15104 8.25 2.14844 8.25C2.14583 8.25 2.14323 8.25 2.14062 8.25C2.13802 8.25 2.13542 8.25 2.13281 8.25C2.13021 8.25 2.1276 8.25 2.125 8.25C2.1224 8.25 2.11979 8.25 2.11719 8.25C2.11458 8.25 2.11198 8.25 2.10938 8.25C2.10677 8.25 2.10417 8.25 2.10156 8.25C2.09896 8.25 2.09635 8.25 2.09375 8.25C2.09115 8.25 2.08854 8.25 2.08594 8.25C2.08333 8.25 2.08073 8.25 2.07813 8.25C2.07552 8.25 2.07292 8.25 2.07031 8.25C2.06771 8.25 2.0651 8.25 2.0625 8.25C2.0599 8.25 2.05729 8.25 2.05469 8.25C2.05208 8.25 2.04948 8.25 2.04688 8.25C2.04427 8.25 2.04167 8.25 2.03906 8.25C2.03646 8.25 2.03385 8.25 2.03125 8.25C2.02865 8.25 2.02604 8.25 2.02344 8.25C2.02083 8.25 2.01823 8.25 2.01562 8.25C2.01302 8.25 2.01042 8.25 2.00781 8.25C2.00521 8.25 2.0026 8.25 2 8.25L2 9.75Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7 1C6.44772 1 6 1.44772 6 2V8.99268L6.00092 8.24268L6.01459 8.24269L6.02826 8.24271L6.04193 8.24273L6.0556 8.24274L6.06927 8.24276L6.08295 8.24278L6.09662 8.24279L6.11029 8.24281L6.12396 8.24283L6.13763 8.24284L6.15131 8.24286L6.16498 8.24288L6.17865 8.24289L6.19232 8.24291L6.20599 8.24293L6.21967 8.24294L6.23334 8.24296L6.24701 8.24298L6.26068 8.24299L6.27435 8.24301L6.28802 8.24303L6.3017 8.24304L6.31537 8.24306L6.32904 8.24308L6.34271 8.24309L6.35638 8.24311L6.37006 8.24313L6.38373 8.24314L6.3974 8.24316L6.41107 8.24318L6.42474 8.24319L6.43842 8.24321L6.45209 8.24323L6.46576 8.24324L6.47943 8.24326L6.4931 8.24328L6.50677 8.24329L6.52045 8.24331L6.53412 8.24333L6.54779 8.24334L6.56146 8.24336L6.57513 8.24338L6.58881 8.24339L6.60248 8.24341L6.61615 8.24343L6.62982 8.24344L6.64349 8.24346L6.65717 8.24348L6.67084 8.24349L6.68451 8.24351L6.69818 8.24353L6.71185 8.24354L6.72552 8.24356L6.7392 8.24358L6.75287 8.24359L6.76654 8.24361L6.78021 8.24363L6.79388 8.24364L6.80756 8.24366L6.82123 8.24368L6.8349 8.24369L6.84857 8.24371L6.86224 8.24373L6.87592 8.24374L6.88959 8.24376L6.90326 8.24378L6.91693 8.24379L6.9306 8.24381L6.94427 8.24383L6.95795 8.24384L6.97162 8.24386L6.98529 8.24388L6.99896 8.24389L7.01263 8.24391L7.02631 8.24393L7.03998 8.24394L7.05365 8.24396L7.06732 8.24398L7.08099 8.24399L7.09467 8.24401L7.10834 8.24403L7.12201 8.24404L7.13568 8.24406L7.14935 8.24408L7.16302 8.24409L7.1767 8.24411L7.19037 8.24413L7.20404 8.24414L7.21771 8.24416L7.23138 8.24418L7.24506 8.24419L7.25873 8.24421L7.2724 8.24423L7.28607 8.24425L7.29974 8.24426L7.31342 8.24428L7.32709 8.2443L7.34076 8.24431L7.35443 8.24433L7.3681 8.24435L7.38177 8.24436L7.39545 8.24438L7.40912 8.2444L7.42279 8.24441L7.43646 8.24443L7.45013 8.24445L7.46381 8.24446L7.47748 8.24448L7.49115 8.2445L7.50482 8.24451L7.51849 8.24453L7.53217 8.24455L7.54584 8.24456L7.55951 8.24458L7.57318 8.2446L7.58685 8.24461L7.60052 8.24463L7.6142 8.24465L7.62787 8.24466L7.64154 8.24468L7.65521 8.2447L7.66888 8.24471L7.68256 8.24473L7.69623 8.24475L7.7099 8.24476L7.72357 8.24478L7.73724 8.2448L7.75092 8.24481L7.76459 8.24483L7.77826 8.24485L7.79193 8.24486L7.8056 8.24488L7.81927 8.2449L7.83295 8.24491L7.84662 8.24493L7.86029 8.24495L7.87396 8.24496L7.88763 8.24498L7.90131 8.245L7.91498 8.24501L7.92865 8.24503L7.94232 8.24505L7.95599 8.24506L7.96967 8.24508L7.98334 8.2451L7.99701 8.24511L8.01068 8.24513L8.02435 8.24515L8.03802 8.24516L8.0517 8.24518L8.06537 8.2452L8.07904 8.24521L8.09271 8.24523L8.10638 8.24525L8.12006 8.24526L8.13373 8.24528L8.1474 8.2453L8.16107 8.24531L8.17474 8.24533L8.18842 8.24535L8.20209 8.24536L8.21576 8.24538L8.22943 8.2454L8.2431 8.24541L8.25677 8.24543L8.27045 8.24545L8.28412 8.24546L8.29779 8.24548L8.31146 8.2455L8.32513 8.24551L8.33881 8.24553L8.35248 8.24555L8.36615 8.24556L8.37982 8.24558L8.39349 8.2456L8.40717 8.24561L8.42084 8.24563L8.43451 8.24565L8.44818 8.24566L8.46185 8.24568L8.47552 8.2457L8.4892 8.24571L8.50287 8.24573L8.51654 8.24575L8.53021 8.24576L8.54388 8.24578L8.55756 8.2458L8.57123 8.24581L8.5849 8.24583L8.59857 8.24585L8.61224 8.24586L8.62592 8.24588L8.63959 8.2459L8.65326 8.24591L8.66693 8.24593L8.6806 8.24595L8.69427 8.24596L8.70795 8.24598L8.72162 8.246L8.73529 8.24601L8.74896 8.24603L8.76263 8.24605L8.77631 8.24606L8.78998 8.24608L8.80365 8.2461L8.81732 8.24611L8.83099 8.24613L8.84467 8.24615L8.85834 8.24616L8.87201 8.24618L8.88568 8.2462L8.89935 8.24621L8.91302 8.24623L8.9267 8.24625L8.94037 8.24626L8.95404 8.24628L8.96771 8.2463L8.98138 8.24631L8.99506 8.24633L9.00873 8.24635L9.0224 8.24636L9.03607 8.24638L9.04974 8.2464L9.06342 8.24641L9.07709 8.24643L9.09076 8.24645L9.10443 8.24646L9.1181 8.24648L9.13177 8.2465L9.14545 8.24651L9.15912 8.24653L9.17279 8.24655L9.18646 8.24656L9.20013 8.24658L9.21381 8.2466L9.22748 8.24661L9.24115 8.24663L9.25482 8.24665L9.26849 8.24667L9.28217 8.24668L9.29584 8.2467L9.30951 8.24672L9.32318 8.24673L9.33685 8.24675L9.35052 8.24677L9.3642 8.24678L9.37787 8.2468L9.39154 8.24682L9.40521 8.24683L9.41888 8.24685L9.43256 8.24687L9.44623 8.24688L9.4599 8.2469L9.47357 8.24692L9.48724 8.24693L9.50091 8.24695L9.51459 8.24697L9.52826 8.24698L9.54193 8.247L9.5556 8.24702L9.56927 8.24703L9.58295 8.24705L9.59662 8.24707L9.61029 8.24708L9.62396 8.2471L9.63763 8.24712L9.65131 8.24713L9.66498 8.24715L9.67865 8.24717L9.69232 8.24718L9.70599 8.2472L9.71966 8.24722L9.73334 8.24723L9.74701 8.24725L9.76068 8.24727L9.77435 8.24728L9.78802 8.2473L9.8017 8.24732L9.81537 8.24733L9.82904 8.24735L9.84271 8.24737L9.85638 8.24738L9.87006 8.2474L9.88373 8.24742L9.8974 8.24743L9.91107 8.24745L9.92474 8.24747L9.93841 8.24748L9.95209 8.2475L9.96576 8.24752L9.97943 8.24753L9.9931 8.24755L10.0068 8.24757L10.0204 8.24758L10.0341 8.2476L10.0478 8.24762L10.0615 8.24763L10.0751 8.24765L10.0888 8.24767L10.1025 8.24768L10.1161 8.2477L10.1298 8.24772L10.1435 8.24773L10.1572 8.24775L10.1708 8.24777L10.1845 8.24778L10.1982 8.2478L10.2119 8.24782L10.2255 8.24783L10.2392 8.24785L10.2529 8.24787L10.2665 8.24788L10.2802 8.2479L10.2939 8.24792L10.3076 8.24793L10.3212 8.24795L10.3349 8.24797L10.3486 8.24798L10.3622 8.248L10.3759 8.24802L10.3896 8.24803L10.4033 8.24805L10.4169 8.24807L10.4306 8.24808L10.4443 8.2481L10.4579 8.24812L10.4716 8.24813L10.4853 8.24815L10.499 8.24817L10.5126 8.24818L10.5263 8.2482L10.54 8.24822L10.5536 8.24823L10.5673 8.24825L10.581 8.24827L10.5947 8.24828L10.6083 8.2483L10.622 8.24832L10.6357 8.24833L10.6494 8.24835L10.663 8.24837L10.6767 8.24838L10.6904 8.2484L10.704 8.24842L10.7177 8.24843L10.7314 8.24845L10.7451 8.24847L10.7587 8.24848L10.7724 8.2485L10.7861 8.24852L10.7997 8.24853L10.8134 8.24855L10.8271 8.24857L10.8408 8.24858L10.8544 8.2486L10.8681 8.24862L10.8818 8.24863L10.8954 8.24865L10.9091 8.24867L10.9228 8.24868L10.9365 8.2487L10.9501 8.24872L10.9638 8.24873L10.9775 8.24875L10.9911 8.24877L11.0048 8.24878L11.0185 8.2488L11.0322 8.24882L11.0458 8.24883L11.0595 8.24885L11.0732 8.24887L11.0869 8.24888L11.1005 8.2489L11.1142 8.24892L11.1279 8.24893L11.1415 8.24895L11.1552 8.24897L11.1689 8.24898L11.1826 8.249L11.1962 8.24902L11.2099 8.24903L11.2236 8.24905L11.2372 8.24907L11.2509 8.24908L11.2646 8.2491L11.2783 8.24912L11.2919 8.24914L11.3056 8.24915L11.3193 8.24917L11.3329 8.24919L11.3466 8.2492L11.3603 8.24922L11.374 8.24924L11.3876 8.24925L11.4013 8.24927L11.415 8.24929L11.4286 8.2493L11.4423 8.24932L11.456 8.24934L11.4697 8.24935L11.4833 8.24937L11.497 8.24939L11.5107 8.2494L11.5244 8.24942L11.538 8.24944L11.5517 8.24945L11.5654 8.24947L11.579 8.24949L11.5927 8.2495L11.6064 8.24952L11.6201 8.24954L11.6337 8.24955L11.6474 8.24957L11.6611 8.24959L11.6747 8.2496L11.6884 8.24962L11.7021 8.24964L11.7158 8.24965L11.7294 8.24967L11.7431 8.24969L11.7568 8.2497L11.7704 8.24972L11.7841 8.24974L11.7978 8.24975L11.8115 8.24977L11.8251 8.24979L11.8388 8.2498L11.8525 8.24982L11.8661 8.24984L11.8798 8.24985L11.8935 8.24987L11.9072 8.24989L11.9208 8.2499L11.9345 8.24992L11.9482 8.24994L11.9619 8.24995L11.9755 8.24997L11.9892 8.24999L12.0029 8.25L12.0165 8.25002L12.0302 8.25004L12.0439 8.25005L12.0576 8.25007L12.0712 8.25009L12.0849 8.2501L12.0986 8.25012L12.1122 8.25014L12.1259 8.25015L12.1396 8.25017L12.1533 8.25019L12.1669 8.2502L12.1806 8.25022L12.1943 8.25024L12.2044 8.25025L9.47343 5.51931C9.18053 5.22642 9.18053 4.75154 9.47343 4.45865C9.76632 4.16576 10.2412 4.16576 10.5341 4.45865L14.5378 8.46231C14.8306 8.7552 14.8306 9.23008 14.5378 9.52297L10.5341 13.5266C10.2412 13.8195 9.76632 13.8195 9.47343 13.5266C9.18053 13.2337 9.18053 12.7589 9.47343 12.466L12.1892 9.75023L12.1788 9.75022L12.1651 9.7502L12.1514 9.75019L12.1378 9.75017L12.1241 9.75015L12.1104 9.75014L12.0967 9.75012L12.0831 9.7501L12.0694 9.75008L12.0557 9.75007L12.0421 9.75005L12.0284 9.75004L12.0147 9.75002L12.001 9.75L11.9874 9.74998L11.9737 9.74997L11.96 9.74995L11.9463 9.74994L11.9327 9.74992L11.919 9.7499L11.9053 9.74988L11.8917 9.74987L11.878 9.74985L11.8643 9.74984L11.8506 9.74982L11.837 9.7498L11.8233 9.74978L11.8096 9.74977L11.796 9.74975L11.7823 9.74973L11.7686 9.74972L11.7549 9.7497L11.7413 9.74968L11.7276 9.74967L11.7139 9.74965L11.7003 9.74963L11.6866 9.74962L11.6729 9.7496L11.6592 9.74958L11.6456 9.74957L11.6319 9.74955L11.6182 9.74953L11.6046 9.74952L11.5909 9.7495L11.5772 9.74948L11.5635 9.74947L11.5499 9.74945L11.5362 9.74943L11.5225 9.74942L11.5088 9.7494L11.4952 9.74938L11.4815 9.74937L11.4678 9.74935L11.4542 9.74933L11.4405 9.74932L11.4268 9.7493L11.4131 9.74928L11.3995 9.74927L11.3858 9.74925L11.3721 9.74923L11.3585 9.74922L11.3448 9.7492L11.3311 9.74918L11.3174 9.74917L11.3038 9.74915L11.2901 9.74913L11.2764 9.74912L11.2628 9.7491L11.2491 9.74908L11.2354 9.74907L11.2217 9.74905L11.2081 9.74903L11.1944 9.74902L11.1807 9.749L11.1671 9.74898L11.1534 9.74897L11.1397 9.74895L11.126 9.74893L11.1124 9.74892L11.0987 9.7489L11.085 9.74888L11.0713 9.74887L11.0577 9.74885L11.044 9.74883L11.0303 9.74882L11.0167 9.7488L11.003 9.74878L10.9893 9.74877L10.9756 9.74875L10.962 9.74873L10.9483 9.74872L10.9346 9.7487L10.921 9.74868L10.9073 9.74867L10.8936 9.74865L10.8799 9.74863L10.8663 9.74862L10.8526 9.7486L10.8389 9.74858L10.8253 9.74857L10.8116 9.74855L10.7979 9.74853L10.7842 9.74852L10.7706 9.7485L10.7569 9.74848L10.7432 9.74847L10.7296 9.74845L10.7159 9.74843L10.7022 9.74842L10.6885 9.7484L10.6749 9.74838L10.6612 9.74837L10.6475 9.74835L10.6338 9.74833L10.6202 9.74832L10.6065 9.7483L10.5928 9.74828L10.5792 9.74827L10.5655 9.74825L10.5518 9.74823L10.5381 9.74822L10.5245 9.7482L10.5108 9.74818L10.4971 9.74817L10.4835 9.74815L10.4698 9.74813L10.4561 9.74812L10.4424 9.7481L10.4288 9.74808L10.4151 9.74807L10.4014 9.74805L10.3878 9.74803L10.3741 9.74802L10.3604 9.748L10.3467 9.74798L10.3331 9.74797L10.3194 9.74795L10.3057 9.74793L10.2921 9.74792L10.2784 9.7479L10.2647 9.74788L10.251 9.74787L10.2374 9.74785L10.2237 9.74783L10.21 9.74782L10.1963 9.7478L10.1827 9.74778L10.169 9.74777L10.1553 9.74775L10.1417 9.74773L10.128 9.74771L10.1143 9.7477L10.1006 9.74768L10.087 9.74767L10.0733 9.74765L10.0596 9.74763L10.046 9.74761L10.0323 9.7476L10.0186 9.74758L10.0049 9.74757L9.99127 9.74755L9.9776 9.74753L9.96393 9.74751L9.95026 9.7475L9.93658 9.74748L9.92291 9.74747L9.90924 9.74745L9.89557 9.74743L9.8819 9.74741L9.86822 9.7474L9.85455 9.74738L9.84088 9.74736L9.82721 9.74735L9.81354 9.74733L9.79987 9.74731L9.78619 9.7473L9.77252 9.74728L9.75885 9.74726L9.74518 9.74725L9.73151 9.74723L9.71783 9.74721L9.70416 9.7472L9.69049 9.74718L9.67682 9.74716L9.66315 9.74715L9.64947 9.74713L9.6358 9.74711L9.62213 9.7471L9.60846 9.74708L9.59479 9.74706L9.58112 9.74705L9.56744 9.74703L9.55377 9.74701L9.5401 9.747L9.52643 9.74698L9.51276 9.74696L9.49908 9.74695L9.48541 9.74693L9.47174 9.74691L9.45807 9.7469L9.4444 9.74688L9.43072 9.74686L9.41705 9.74685L9.40338 9.74683L9.38971 9.74681L9.37604 9.7468L9.36237 9.74678L9.34869 9.74676L9.33502 9.74675L9.32135 9.74673L9.30768 9.74671L9.29401 9.7467L9.28033 9.74668L9.26666 9.74666L9.25299 9.74665L9.23932 9.74663L9.22565 9.74661L9.21197 9.7466L9.1983 9.74658L9.18463 9.74656L9.17096 9.74655L9.15729 9.74653L9.14362 9.74651L9.12994 9.7465L9.11627 9.74648L9.1026 9.74646L9.08893 9.74645L9.07526 9.74643L9.06158 9.74641L9.04791 9.7464L9.03424 9.74638L9.02057 9.74636L9.0069 9.74635L8.99322 9.74633L8.97955 9.74631L8.96588 9.7463L8.95221 9.74628L8.93854 9.74626L8.92487 9.74625L8.91119 9.74623L8.89752 9.74621L8.88385 9.7462L8.87018 9.74618L8.85651 9.74616L8.84283 9.74615L8.82916 9.74613L8.81549 9.74611L8.80182 9.7461L8.78815 9.74608L8.77447 9.74606L8.7608 9.74605L8.74713 9.74603L8.73346 9.74601L8.71979 9.746L8.70612 9.74598L8.69244 9.74596L8.67877 9.74595L8.6651 9.74593L8.65143 9.74591L8.63776 9.7459L8.62408 9.74588L8.61041 9.74586L8.59674 9.74585L8.58307 9.74583L8.5694 9.74581L8.55572 9.7458L8.54205 9.74578L8.52838 9.74576L8.51471 9.74575L8.50104 9.74573L8.48737 9.74571L8.47369 9.7457L8.46002 9.74568L8.44635 9.74566L8.43268 9.74565L8.41901 9.74563L8.40533 9.74561L8.39166 9.7456L8.37799 9.74558L8.36432 9.74556L8.35065 9.74555L8.33697 9.74553L8.3233 9.74551L8.30963 9.7455L8.29596 9.74548L8.28229 9.74546L8.26862 9.74545L8.25494 9.74543L8.24127 9.74541L8.2276 9.7454L8.21393 9.74538L8.20026 9.74536L8.18658 9.74535L8.17291 9.74533L8.15924 9.74531L8.14557 9.7453L8.1319 9.74528L8.11822 9.74526L8.10455 9.74524L8.09088 9.74523L8.07721 9.74521L8.06354 9.7452L8.04987 9.74518L8.03619 9.74516L8.02252 9.74514L8.00885 9.74513L7.99518 9.74511L7.98151 9.7451L7.96783 9.74508L7.95416 9.74506L7.94049 9.74504L7.92682 9.74503L7.91315 9.74501L7.89947 9.745L7.8858 9.74498L7.87213 9.74496L7.85846 9.74494L7.84479 9.74493L7.83112 9.74491L7.81744 9.74489L7.80377 9.74488L7.7901 9.74486L7.77643 9.74484L7.76276 9.74483L7.74908 9.74481L7.73541 9.74479L7.72174 9.74478L7.70807 9.74476L7.6944 9.74474L7.68072 9.74473L7.66705 9.74471L7.65338 9.74469L7.63971 9.74468L7.62604 9.74466L7.61237 9.74464L7.59869 9.74463L7.58502 9.74461L7.57135 9.74459L7.55768 9.74458L7.54401 9.74456L7.53033 9.74454L7.51666 9.74453L7.50299 9.74451L7.48932 9.74449L7.47565 9.74448L7.46197 9.74446L7.4483 9.74444L7.43463 9.74443L7.42096 9.74441L7.40729 9.74439L7.39362 9.74438L7.37994 9.74436L7.36627 9.74434L7.3526 9.74433L7.33893 9.74431L7.32526 9.74429L7.31158 9.74428L7.29791 9.74426L7.28424 9.74424L7.27057 9.74423L7.2569 9.74421L7.24322 9.74419L7.22955 9.74418L7.21588 9.74416L7.20221 9.74414L7.18854 9.74413L7.17487 9.74411L7.16119 9.74409L7.14752 9.74408L7.13385 9.74406L7.12018 9.74404L7.10651 9.74403L7.09283 9.74401L7.07916 9.74399L7.06549 9.74398L7.05182 9.74396L7.03815 9.74394L7.02447 9.74393L7.0108 9.74391L6.99713 9.74389L6.98346 9.74388L6.96979 9.74386L6.95612 9.74384L6.94244 9.74383L6.92877 9.74381L6.9151 9.74379L6.90143 9.74378L6.88776 9.74376L6.87408 9.74374L6.86041 9.74373L6.84674 9.74371L6.83307 9.74369L6.8194 9.74368L6.80572 9.74366L6.79205 9.74364L6.77838 9.74363L6.76471 9.74361L6.75104 9.74359L6.73737 9.74358L6.72369 9.74356L6.71002 9.74354L6.69635 9.74353L6.68268 9.74351L6.66901 9.74349L6.65533 9.74348L6.64166 9.74346L6.62799 9.74344L6.61432 9.74343L6.60065 9.74341L6.58698 9.74339L6.5733 9.74338L6.55963 9.74336L6.54596 9.74334L6.53229 9.74333L6.51862 9.74331L6.50494 9.74329L6.49127 9.74328L6.4776 9.74326L6.46393 9.74324L6.45026 9.74323L6.43658 9.74321L6.42291 9.74319L6.40924 9.74318L6.39557 9.74316L6.3819 9.74314L6.36823 9.74313L6.35455 9.74311L6.34088 9.74309L6.32721 9.74308L6.31354 9.74306L6.29987 9.74304L6.28619 9.74303L6.27252 9.74301L6.25885 9.74299L6.24518 9.74298L6.23151 9.74296L6.21783 9.74294L6.20416 9.74293L6.19049 9.74291L6.17682 9.74289L6.16315 9.74288L6.14948 9.74286L6.1358 9.74284L6.12213 9.74283L6.10846 9.74281L6.09479 9.74279L6.08112 9.74277L6.06744 9.74276L6.05377 9.74274L6.0401 9.74273L6.02643 9.74271L6.01276 9.74269L6 9.74268V16C6 16.5523 6.44771 17 7 17H16C16.5523 17 17 16.5523 17 16V2C17 1.44772 16.5523 1 16 1H7Z" fill="white"/>
-</svg>
diff --git a/apps/web/src/@types/common.ts b/apps/web/src/@types/common.ts
index 4c8c707c4a..bfb4f64c16 100644
--- a/apps/web/src/@types/common.ts
+++ b/apps/web/src/@types/common.ts
@@ -52,3 +52,13 @@ export type AtLeastOne<T, U = { [K in keyof T]: Pick<T, K> }> = Partial<T> & U[k
 export type Assignable<Object, Item> = {
     [Key in keyof Object]: Object[Key] extends Item ? Key : never;
 }[keyof Object];
+
+/**
+ * Like `Partial` but for applied to all nested objects.
+ * Based on https://dev.to/perennialautodidact/adventures-in-typescript-deeppartial-2f2a
+ */
+export type DeepPartial<T> = T extends object
+    ? {
+          [P in keyof T]?: DeepPartial<T[P]>;
+      }
+    : T;
diff --git a/apps/web/src/@types/css.d.ts b/apps/web/src/@types/css.d.ts
new file mode 100644
index 0000000000..a37139aa72
--- /dev/null
+++ b/apps/web/src/@types/css.d.ts
@@ -0,0 +1,8 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+declare module "*.css";
diff --git a/apps/web/src/@types/global.d.ts b/apps/web/src/@types/global.d.ts
index f6b9ff81f9..99cd6d4ba4 100644
--- a/apps/web/src/@types/global.d.ts
+++ b/apps/web/src/@types/global.d.ts
@@ -8,7 +8,6 @@ Please see LICENSE files in the repository root for full details.
 
 // eslint-disable-next-line no-restricted-imports
 import "matrix-js-sdk/src/@types/global"; // load matrix-js-sdk's type extensions first
-import "@types/modernizr";
 
 import type { ModuleLoader } from "@element-hq/element-web-module-api";
 import type { logger } from "matrix-js-sdk/src/logger";
@@ -186,14 +185,6 @@ declare global {
         readonly port: MessagePort;
     }
 
-    /**
-     * In future, browsers will support focusVisible option.
-     * See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible
-     */
-    interface FocusOptions {
-        focusVisible: boolean;
-    }
-
     // https://github.com/microsoft/TypeScript/issues/28308#issuecomment-650802278
     function registerProcessor(
         name: string,
diff --git a/apps/web/src/@types/pcss.d.ts b/apps/web/src/@types/pcss.d.ts
new file mode 100644
index 0000000000..64680d80cf
--- /dev/null
+++ b/apps/web/src/@types/pcss.d.ts
@@ -0,0 +1,8 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+declare module "*.pcss";
diff --git a/apps/web/src/IConfigOptions.ts b/apps/web/src/IConfigOptions.ts
index fd39e2f8df..a3a6a32c91 100644
--- a/apps/web/src/IConfigOptions.ts
+++ b/apps/web/src/IConfigOptions.ts
@@ -52,8 +52,9 @@ export interface IConfigOptions {
     disable_3pid_login?: boolean;
 
     brand: string;
-    branding?: {
-        welcome_background_url?: string | string[]; // chosen at random if array
+    branding: {
+        welcome_background_url: string | string[]; // chosen at random if array
+        logo_link_url: string;
         auth_header_logo_url?: string;
         auth_footer_links?: { text: string; url: string }[];
     };
diff --git a/apps/web/src/Lifecycle.ts b/apps/web/src/Lifecycle.ts
index 78c6cc2de6..32d113adc8 100644
--- a/apps/web/src/Lifecycle.ts
+++ b/apps/web/src/Lifecycle.ts
@@ -18,7 +18,6 @@ import {
     decodeBase64,
 } from "matrix-js-sdk/src/matrix";
 import { type AESEncryptedSecretStoragePayload } from "matrix-js-sdk/src/types";
-import { type QueryDict } from "matrix-js-sdk/src/utils";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { type IMatrixClientCreds, MatrixClientPeg, type MatrixClientPegAssignOpts } from "./MatrixClientPeg";
@@ -81,6 +80,7 @@ import {
 } from "./utils/tokens/tokens";
 import { TokenRefresher } from "./utils/oidc/TokenRefresher";
 import { checkBrowserSupport } from "./SupportedBrowser";
+import { type URLParams } from "./vector/url_utils.ts";
 
 const HOMESERVER_URL_KEY = "mx_hs_url";
 const ID_SERVER_URL_KEY = "mx_is_url";
@@ -148,7 +148,7 @@ interface ILoadSessionOpts {
     guestIsUrl?: string;
     ignoreGuest?: boolean;
     defaultDeviceDisplayName?: string;
-    fragmentQueryParams?: QueryDict;
+    urlParams?: URLParams;
     abortSignal?: AbortSignal;
 }
 
@@ -187,7 +187,7 @@ export async function loadSession(opts: ILoadSessionOpts = {}): Promise<boolean>
         let enableGuest = opts.enableGuest || false;
         const guestHsUrl = opts.guestHsUrl;
         const guestIsUrl = opts.guestIsUrl;
-        const fragmentQueryParams = opts.fragmentQueryParams || {};
+        const urlParams = opts.urlParams;
         const defaultDeviceDisplayName = opts.defaultDeviceDisplayName;
 
         if (enableGuest && !guestHsUrl) {
@@ -195,12 +195,12 @@ export async function loadSession(opts: ILoadSessionOpts = {}): Promise<boolean>
             enableGuest = false;
         }
 
-        if (enableGuest && guestHsUrl && fragmentQueryParams.guest_user_id && fragmentQueryParams.guest_access_token) {
+        if (enableGuest && guestHsUrl && urlParams?.guest?.guest_user_id && urlParams?.guest?.guest_access_token) {
             logger.log("Using guest access credentials");
             await doSetLoggedIn(
                 {
-                    userId: fragmentQueryParams.guest_user_id as string,
-                    accessToken: fragmentQueryParams.guest_access_token as string,
+                    userId: urlParams.guest.guest_user_id,
+                    accessToken: urlParams.guest.guest_access_token,
                     homeserverUrl: guestHsUrl,
                     identityServerUrl: guestIsUrl,
                     guest: true,
@@ -264,38 +264,43 @@ export async function getStoredSessionOwner(): Promise<[string, boolean] | [null
  * If query string includes OIDC authorization code flow parameters attempt to login using oidc flow
  * Else, we may be returning from SSO - attempt token login
  *
- * @param {Object} queryParams    string->string map of the
- *     query-parameters extracted from the real query-string of the starting
- *     URI.
+ * @param urlParams the parameters read in at app load time from the url
  *
- * @param {string} defaultDeviceDisplayName
- * @param {string} fragmentAfterLogin path to go to after a successful login, only used for "Try again"
+ * @param defaultDeviceDisplayName
+ * @param fragmentAfterLogin path to go to after a successful login, only used for "Try again"
  *
- * @returns {Promise} promise which resolves to true if we completed the delegated auth login
+ * @returns promise which resolves to true if we completed the delegated auth login
  *      else false
  */
 export async function attemptDelegatedAuthLogin(
-    queryParams: QueryDict,
+    urlParams: URLParams,
     defaultDeviceDisplayName?: string,
     fragmentAfterLogin?: string,
 ): Promise<boolean> {
-    if (queryParams.code && queryParams.state) {
-        console.log("We have OIDC params - attempting OIDC login");
-        return attemptOidcNativeLogin(queryParams);
+    if (urlParams.oidc_fragment) {
+        return attemptOidcNativeLogin(urlParams.oidc_fragment, "fragment");
+    } else if (urlParams.oidc_query) {
+        return attemptOidcNativeLogin(urlParams.oidc_query, "query");
     }
 
-    return attemptTokenLogin(queryParams, defaultDeviceDisplayName, fragmentAfterLogin);
+    return attemptTokenLogin(urlParams["legacy_sso"], defaultDeviceDisplayName, fragmentAfterLogin);
 }
 
 /**
  * Attempt to login by completing OIDC authorization code flow
- * @param queryParams string->string map of the query-parameters extracted from the real query-string of the starting URI.
- * @returns Promise that resolves to true when login succceeded, else false
+ * @param urlParams subset of app-load url parameters relating to oidc auth
+ * @param responseMode - the response_mode used in the auth request
+ * @returns Promise that resolves to true when login succeeded, else false
  */
-async function attemptOidcNativeLogin(queryParams: QueryDict): Promise<boolean> {
+async function attemptOidcNativeLogin(
+    urlParams: NonNullable<URLParams["oidc_fragment"]>,
+    responseMode: "fragment" | "query",
+): Promise<boolean> {
+    console.log("We have OIDC params - attempting OIDC login");
+
     try {
         const { accessToken, refreshToken, homeserverUrl, identityServerUrl, idToken, clientId, issuer } =
-            await completeOidcLogin(queryParams);
+            await completeOidcLogin(urlParams, responseMode);
 
         const {
             user_id: userId,
@@ -354,22 +359,20 @@ async function getUserIdFromAccessToken(
 }
 
 /**
- * @param {QueryDict} queryParams    string->string map of the
- *     query-parameters extracted from the real query-string of the starting
- *     URI.
+ @param urlParams subset of app-load url parameters relating to legacy sso auth
  *
- * @param {string} defaultDeviceDisplayName
- * @param {string} fragmentAfterLogin path to go to after a successful login, only used for "Try again"
+ * @param defaultDeviceDisplayName
+ * @param fragmentAfterLogin path to go to after a successful login, only used for "Try again"
  *
- * @returns {Promise} promise which resolves to true if we completed the token
+ * @returns promise which resolves to true if we completed the token
  *    login, else false
  */
 export function attemptTokenLogin(
-    queryParams: QueryDict,
+    urlParams: URLParams["legacy_sso"],
     defaultDeviceDisplayName?: string,
     fragmentAfterLogin?: string,
 ): Promise<boolean> {
-    if (!queryParams.loginToken) {
+    if (!urlParams?.loginToken) {
         return Promise.resolve(false);
     }
 
@@ -384,7 +387,7 @@ export function attemptTokenLogin(
     }
 
     return sendLoginRequest(homeserver, identityServer, "m.login.token", {
-        token: queryParams.loginToken as string,
+        token: urlParams.loginToken,
         initial_device_display_name: defaultDeviceDisplayName,
     })
         .then(async function (creds) {
@@ -1040,7 +1043,7 @@ export function isLoggingOut(): boolean {
  * By the time this method is called, we have successfully logged in if necessary, and the client has been set up with
  * the access token.
  *
- * Emits {@link Acction.WillStartClient} before starting the client, and {@link Action.ClientStarted} when the client has
+ * Emits {@link Action.WillStartClient} before starting the client, and {@link Action.ClientStarted} when the client has
  * been started.
  *
  * @param client the matrix client to start
diff --git a/apps/web/src/Notifier.ts b/apps/web/src/Notifier.ts
index dbe890909e..b0a2ce5b42 100644
--- a/apps/web/src/Notifier.ts
+++ b/apps/web/src/Notifier.ts
@@ -81,6 +81,59 @@ const msgTypeHandlers: Record<string, (event: MatrixEvent) => string | null> = {
     },
 };
 
+/**
+ * Extracts plain text from a message body, replacing any spoilered content
+ * with '[Spoiler]' to prevent spoilers in desktop notifications.
+ */
+function getNotificationBodyWithoutSpoilers(ev: MatrixEvent): string {
+    const content = ev.getContent();
+    const plainBody = content.body ?? "";
+    const formattedBody = content.formatted_body;
+
+    if (typeof formattedBody !== "string" || !formattedBody.length) {
+        return plainBody;
+    }
+
+    /** Recursively walks HTML tree to hide spoilers. */
+    function replaceSpoilers(node: Node): Node {
+        if (node.nodeType !== Node.ELEMENT_NODE || !(node instanceof Element)) {
+            return node;
+        }
+
+        if (node.hasAttribute("data-mx-spoiler")) {
+            const e = document.createElement("span");
+            e.appendChild(document.createTextNode("[Spoiler]"));
+            return e;
+        }
+
+        for (const childNode of node.childNodes) {
+            node.replaceChild(replaceSpoilers(childNode), childNode);
+        }
+
+        return node;
+    }
+
+    try {
+        // Dev note: ideally we would reuse more of the existing rendering stack
+        // rather than re-parsing and updating the generated HTML here. However,
+        // that rendering stack is currently quite consolidated and cannot
+        // easily be refactored to allow the call-site to control how spoilers
+        // are rendered. The problem is that we now need two different output
+        // formats:
+        // - The existing format where spoilers are wrapped in html <span> tags
+        // - The new format where the spoilered text is replaced with [Spoiler]
+
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(formattedBody, "text/html");
+
+        // Use textContent rather than innerHTML/outerHTML since textContent is
+        // XSS-safe and the input is untrusted.
+        return replaceSpoilers(doc.body).textContent ?? plainBody;
+    } catch {
+        return plainBody;
+    }
+}
+
 export const enum NotifierEvent {
     NotificationHiddenChange = "notification_hidden_change",
 }
@@ -134,7 +187,7 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
             // notificationMessageForEvent includes sender, but we already have the sender here
             const msgType = ev.getContent().msgtype;
             if (ev.getContent().body && (!msgType || !msgTypeHandlers.hasOwnProperty(msgType))) {
-                msg = stripPlainReply(ev.getContent().body);
+                msg = stripPlainReply(getNotificationBodyWithoutSpoilers(ev));
             }
         } else if (ev.getType() === "m.room.member") {
             // context is all in the message here, we don't need
@@ -145,7 +198,7 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
             // notificationMessageForEvent includes sender, but we've just out sender in the title
             const msgType = ev.getContent().msgtype;
             if (ev.getContent().body && (!msgType || !msgTypeHandlers.hasOwnProperty(msgType))) {
-                msg = stripPlainReply(ev.getContent().body);
+                msg = stripPlainReply(getNotificationBodyWithoutSpoilers(ev));
             }
         }
 
diff --git a/apps/web/src/PosthogTrackers.ts b/apps/web/src/PosthogTrackers.ts
index cc531bde9b..19bb900b7c 100644
--- a/apps/web/src/PosthogTrackers.ts
+++ b/apps/web/src/PosthogTrackers.ts
@@ -13,7 +13,6 @@ import { type Interaction as InteractionEvent } from "@matrix-org/analytics-even
 import { type PinUnpinAction } from "@matrix-org/analytics-events/types/typescript/PinUnpinAction";
 import { type RoomListSortingAlgorithmChanged } from "@matrix-org/analytics-events/types/typescript/RoomListSortingAlgorithmChanged";
 import { type UrlPreviewRendered } from "@matrix-org/analytics-events/types/typescript/UrlPreviewRendered";
-import { type UrlPreview } from "@element-hq/web-shared-components";
 
 import PageType from "./PageTypes";
 import Views from "./Views";
@@ -151,7 +150,7 @@ export default class PosthogTrackers {
      * @param isEncrypted Whether the event (and effectively the room) was encrypted.
      * @param previews The previews generated from the event.
      */
-    public trackUrlPreview(eventId: string, isEncrypted: boolean, previews: UrlPreview[]): void {
+    public trackUrlPreview(eventId: string, isEncrypted: boolean, previews: { image?: unknown }[]): void {
         // Discount any previews that we have already tracked.
         if (this.previewedEventIds.get(eventId)) {
             return;
diff --git a/apps/web/src/RoomInvite.tsx b/apps/web/src/RoomInvite.tsx
index feefdf7244..0b789a5766 100644
--- a/apps/web/src/RoomInvite.tsx
+++ b/apps/web/src/RoomInvite.tsx
@@ -7,9 +7,10 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type ComponentProps } from "react";
-import { EventType, type MatrixClient, type MatrixEvent, type Room, type User } from "matrix-js-sdk/src/matrix";
+import { EventType, type MatrixEvent, type Room, type User } from "matrix-js-sdk/src/matrix";
 
-import MultiInviter, { type CompletionStates, type MultiInviterOptions } from "./utils/MultiInviter";
+import type MultiInviter from "./utils/MultiInviter";
+import { type CompletionStates } from "./utils/MultiInviter";
 import Modal from "./Modal";
 import { _t } from "./languageHandler";
 import InviteDialog from "./components/views/dialogs/InviteDialog";
@@ -19,33 +20,6 @@ import ErrorDialog from "./components/views/dialogs/ErrorDialog";
 import { InviteKind } from "./components/views/dialogs/InviteDialogTypes";
 import { type Member } from "./utils/direct-messages";
 
-export interface IInviteResult {
-    states: CompletionStates;
-    inviter: MultiInviter;
-}
-
-/**
- * Invites multiple addresses to a room.
- *
- * Simpler interface to {@link MultiInviter}.
- *
- * Any failures are returned via the `states` in the result.
- *
- * @param {string} roomId The ID of the room to invite to
- * @param {string[]} addresses Array of strings of addresses to invite. May be matrix IDs or 3pids.
- * @param options Options object.
- * @returns {Promise} Promise
- */
-export async function inviteMultipleToRoom(
-    client: MatrixClient,
-    roomId: string,
-    addresses: string[],
-    options: MultiInviterOptions = {},
-): Promise<IInviteResult> {
-    const inviter = new MultiInviter(client, roomId, options);
-    return { states: await inviter.invite(addresses), inviter };
-}
-
 export function showStartChatInviteDialog(initialText = ""): void {
     // This dialog handles the room creation internally - we don't need to worry about it.
     Modal.createDialog(
diff --git a/apps/web/src/SdkConfig.ts b/apps/web/src/SdkConfig.ts
index 1a26e4f815..4be64648d8 100644
--- a/apps/web/src/SdkConfig.ts
+++ b/apps/web/src/SdkConfig.ts
@@ -12,11 +12,16 @@ import { mergeWith } from "lodash";
 import { SnakedObject } from "./utils/SnakedObject";
 import { type IConfigOptions } from "./IConfigOptions";
 import { isObject, objectClone } from "./utils/objects";
-import { type DeepReadonly, type Defaultize } from "./@types/common";
+import { type DeepPartial, type DeepReadonly, type Defaultize } from "./@types/common";
 
 // see element-web config.md for docs, or the IConfigOptions interface for dev docs
 export const DEFAULTS: DeepReadonly<IConfigOptions> = {
     brand: "Element",
+    branding: {
+        logo_link_url: "https://element.io",
+        auth_header_logo_url: "themes/element/img/logos/element-logo.svg",
+        welcome_background_url: "themes/element/img/backgrounds/lake.jpg",
+    },
     help_url: "https://element.io/help",
     help_encryption_url: "https://element.io/help#encryption",
     help_key_storage_url: "https://element.io/help#encryption5",
@@ -70,7 +75,7 @@ export type ConfigOptions = Defaultize<IConfigOptions, typeof DEFAULTS>;
 
 function mergeConfig(
     config: DeepReadonly<IConfigOptions>,
-    changes: DeepReadonly<Partial<IConfigOptions>>,
+    changes: DeepReadonly<DeepPartial<IConfigOptions>>,
 ): DeepReadonly<IConfigOptions> {
     // return { ...config, ...changes };
     return mergeWith(objectClone(config), changes, (objValue, srcValue) => {
@@ -136,7 +141,7 @@ export default class SdkConfig {
         SdkConfig.setInstance(mergeConfig(DEFAULTS, {})); // safe to cast - defaults will be applied
     }
 
-    public static add(cfg: Partial<ConfigOptions>): void {
+    public static add(cfg: DeepPartial<ConfigOptions>): void {
         SdkConfig.put(mergeConfig(SdkConfig.get(), cfg));
     }
 }
diff --git a/apps/web/src/audio/VoiceRecording.ts b/apps/web/src/audio/VoiceRecording.ts
index 705b96375a..44a016b995 100644
--- a/apps/web/src/audio/VoiceRecording.ts
+++ b/apps/web/src/audio/VoiceRecording.ts
@@ -103,10 +103,14 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
 
     private async makeRecorder(): Promise<void> {
         try {
+            const requestedDeviceId = MediaDeviceHandler.getAudioInput();
+            const deviceIdConstraint =
+                requestedDeviceId && requestedDeviceId !== "default" ? { deviceId: { exact: requestedDeviceId } } : {};
+
             this.recorderStream = await navigator.mediaDevices.getUserMedia({
                 audio: {
                     channelCount: CHANNELS,
-                    deviceId: MediaDeviceHandler.getAudioInput(),
+                    ...deviceIdConstraint,
                     autoGainControl: { ideal: MediaDeviceHandler.getAudioAutoGainControl() },
                     echoCancellation: { ideal: MediaDeviceHandler.getAudioEchoCancellation() },
                     noiseSuppression: { ideal: MediaDeviceHandler.getAudioNoiseSuppression() },
diff --git a/apps/web/src/branding.ts b/apps/web/src/branding.ts
new file mode 100644
index 0000000000..fd231479e6
--- /dev/null
+++ b/apps/web/src/branding.ts
@@ -0,0 +1,20 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import SdkConfig from "./SdkConfig.ts";
+
+const ELEMENT_BRAND = "Element";
+
+/**
+ * Returns whether the app is currently branded.
+ * This is currently a naive check of whether the `brand` config starts with the substring `Element ` or is the literal `Element`,
+ * which correctly covers `Element` (release), `Element Nightly` & `Element Pro`.
+ */
+export const isElementBranded = (): boolean => {
+    const brand = SdkConfig.get("brand");
+    return brand === ELEMENT_BRAND || brand.startsWith(ELEMENT_BRAND + " ");
+};
diff --git a/apps/web/src/components/structures/MatrixChat.tsx b/apps/web/src/components/structures/MatrixChat.tsx
index ce5bfd4598..14e726e532 100644
--- a/apps/web/src/components/structures/MatrixChat.tsx
+++ b/apps/web/src/components/structures/MatrixChat.tsx
@@ -20,7 +20,6 @@ import {
     type SyncStateData,
     type TimelineEvents,
 } from "matrix-js-sdk/src/matrix";
-import { type QueryDict } from "matrix-js-sdk/src/utils";
 import { logger } from "matrix-js-sdk/src/logger";
 import { throttle } from "lodash";
 import { CryptoEvent, type KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
@@ -141,6 +140,8 @@ import Markdown from "../../Markdown";
 import { LinkedTextConfiguration, sanitizeHtmlParams } from "../../Linkify";
 import { isOnlyAdmin } from "../../utils/membership";
 import { ModuleApi } from "../../modules/Api.ts";
+import { type IScreen } from "../../vector/routing.ts";
+import { type URLParams } from "../../vector/url_utils.ts";
 
 // legacy export
 export { default as Views } from "../../Views";
@@ -152,21 +153,14 @@ const AUTH_SCREENS = ["register", "mobile_register", "login", "forgot_password",
 // re-factoring to be included in this list in future.
 const ONBOARDING_FLOW_STARTERS = [Action.ViewUserSettings, Action.CreateChat, Action.CreateRoom];
 
-interface IScreen {
-    screen: string;
-    params?: QueryDict;
-}
-
 interface IProps {
     config: ConfigOptions;
     onNewScreen: (screen: string, replaceLast: boolean) => void;
     enableGuest?: boolean;
-    // the queryParams extracted from the [real] query-string of the URI
-    realQueryParams: QueryDict;
-    // the initial queryParams extracted from the hash-fragment of the URI
-    startingFragmentQueryParams?: QueryDict;
+    // the params extracted from the [real] query-string & fragment of the URI
+    urlParams: URLParams;
     // called when we have completed a token login
-    onTokenLoginCompleted: () => void;
+    onTokenLoginCompleted: (urlParams: URLParams, fragmentAfterLogin: string) => void;
     // Represents the screen to display as a result of parsing the initial window.location
     initialScreenAfterLogin?: IScreen;
     // displayname, if any, to set on the device when logging in/registering.
@@ -227,11 +221,8 @@ interface IState {
 export default class MatrixChat extends React.PureComponent<IProps, IState> {
     public static displayName = "MatrixChat";
 
-    public static defaultProps = {
-        realQueryParams: {},
-        startingFragmentQueryParams: {},
+    public static defaultProps: Partial<IProps> = {
         config: {},
-        onTokenLoginCompleted: (): void => {},
     };
 
     private firstSyncComplete = false;
@@ -353,18 +344,18 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
         // Otherwise, the first thing to do is to try the token params in the query-string
         const delegatedAuthSucceeded = await Lifecycle.attemptDelegatedAuthLogin(
-            this.props.realQueryParams,
+            this.props.urlParams,
             this.props.defaultDeviceDisplayName,
             this.getFragmentAfterLogin(),
         );
 
         // remove the loginToken or auth code from the URL regardless
         if (
-            this.props.realQueryParams?.loginToken ||
-            this.props.realQueryParams?.code ||
-            this.props.realQueryParams?.state
+            !!this.props.urlParams.legacy_sso ||
+            !!this.props.urlParams.oidc_fragment ||
+            !!this.props.urlParams.oidc_query
         ) {
-            this.props.onTokenLoginCompleted();
+            this.props.onTokenLoginCompleted(this.props.urlParams, this.getFragmentAfterLogin());
         }
 
         if (delegatedAuthSucceeded) {
@@ -421,7 +412,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
      * {@link onWillStartClient} and {@link onClientStarted} will already have been called (but not necessarily
      * completed).
      *
-     * This method either calls {@link onLiggedIn} directly, or switches to {@link Views.E2E_SETUP} or
+     * This method either calls {@link onLoggedIn} directly, or switches to {@link Views.E2E_SETUP} or
      * {@link Views.COMPLETE_SECURITY}, which will later call {@link onCompleteSecurityE2eSetupFinished}.
      */
     private async postLoginSetup(): Promise<void> {
@@ -592,7 +583,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         return Promise.resolve()
             .then(() => {
                 return Lifecycle.loadSession({
-                    fragmentQueryParams: this.props.startingFragmentQueryParams,
+                    urlParams: this.props.urlParams,
                     enableGuest: this.props.enableGuest,
                     guestHsUrl: this.getServerProperties().serverConfig.hsUrl,
                     guestIsUrl: this.getServerProperties().serverConfig.isUrl,
@@ -1835,7 +1826,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         }
     }
 
-    public showScreen(screen: string, params?: { [key: string]: any }): void {
+    public showScreen(screen: string, params?: Record<string, any>): void {
         logger.debug(`showScreen ${screen}`);
 
         const cli = MatrixClientPeg.get();
@@ -2267,14 +2258,14 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     onForgotPasswordClick={showPasswordReset ? this.onForgotPasswordClick : undefined}
                     onServerConfigChange={this.onServerConfigChange}
                     fragmentAfterLogin={fragmentAfterLogin}
-                    defaultUsername={this.props.startingFragmentQueryParams?.defaultUsername as string | undefined}
+                    defaultUsername={this.props.urlParams?.defaults?.defaultUsername}
                     {...this.getServerProperties()}
                 />
             );
         } else if (this.state.view === Views.SOFT_LOGOUT) {
             view = (
                 <SoftLogout
-                    realQueryParams={this.props.realQueryParams}
+                    urlParams={this.props.urlParams}
                     onTokenLoginCompleted={this.props.onTokenLoginCompleted}
                     fragmentAfterLogin={fragmentAfterLogin}
                 />
diff --git a/apps/web/src/components/structures/MessagePanel.tsx b/apps/web/src/components/structures/MessagePanel.tsx
index 629b9d3c7a..a38f264aab 100644
--- a/apps/web/src/components/structures/MessagePanel.tsx
+++ b/apps/web/src/components/structures/MessagePanel.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, createRef, type ReactNode, type TransitionEvent } from "react";
+import React, { type JSX, createRef, type ReactNode, type TransitionEventHandler } from "react";
 import classNames from "classnames";
 import {
     type Room,
@@ -20,6 +20,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { isSupportedReceiptType } from "matrix-js-sdk/src/utils";
 import {
     DateSeparatorView,
+    ReadMarker,
     TimelineSeparator,
     useCreateAutoDisposedViewModel,
 } from "@element-hq/web-shared-components";
@@ -271,7 +272,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     private readonly _showHiddenEvents: boolean;
     private unmounted = false;
 
-    private readMarkerNode = createRef<HTMLLIElement>();
+    private readMarkerNode: HTMLLIElement | null = null;
     private whoIsTyping = createRef<WhoIsTypingTile>();
     public scrollPanel = createRef<ScrollPanel>();
 
@@ -403,7 +404,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     //   0: read marker is within the window
     //  +1: read marker is below the window
     public getReadMarkerPosition(): number | null {
-        const readMarker = this.readMarkerNode.current;
+        const readMarker = this.readMarkerNode;
         const messageWrapper = this.scrollPanel.current?.divScroll;
 
         if (!readMarker || !messageWrapper) {
@@ -507,29 +508,18 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     public readMarkerForEvent(eventId: string, isLastEvent: boolean): ReactNode {
         if (this.context.timelineRenderingType === TimelineRenderingType.File) return null;
 
-        const visible = !isLastEvent && this.props.readMarkerVisible;
+        const showLine = !isLastEvent && !!this.props.readMarkerVisible;
 
         if (this.props.readMarkerEventId === eventId) {
-            let hr;
-            // if the read marker comes at the end of the timeline (except
-            // for local echoes, which are excluded from RMs, because they
-            // don't have useful event ids), we don't want to show it, but
-            // we still want to create the <li/> for it so that the
-            // algorithms which depend on its position on the screen aren't
-            // confused.
-            if (visible) {
-                hr = <hr style={{ opacity: 1, width: "99%" }} />;
-            }
-
             return (
-                <li
+                <ReadMarker
                     key={"readMarker_" + eventId}
-                    ref={this.readMarkerNode}
+                    eventId={eventId}
+                    kind="current"
+                    showLine={showLine}
+                    onCurrentMarkerRef={this.collectReadMarker}
                     className="mx_MessagePanel_myReadMarker"
-                    data-scroll-tokens={eventId}
-                >
-                    {hr}
-                </li>
+                />
             );
         } else if (this.state.ghostReadMarkers.includes(eventId)) {
             // We render 'ghost' read markers in the DOM while they
@@ -542,28 +532,30 @@ export default class MessagePanel extends React.Component<IProps, IState> {
             // case is a little more complex because only some of the items
             // transition (ie. the read markers do but the event tiles do not)
             // and TransitionGroup requires that all its children are Transitions.
-            const hr = (
-                <hr
-                    ref={this.collectGhostReadMarker}
-                    onTransitionEnd={this.onGhostTransitionEnd}
-                    data-eventid={eventId}
-                />
-            );
-
             // give it a key which depends on the event id. That will ensure that
             // we get a new DOM node (restarting the animation) when the ghost
             // moves to a different event.
             return (
-                <li key={"_readuptoghost_" + eventId} className="mx_MessagePanel_myReadMarker">
-                    {hr}
-                </li>
+                <ReadMarker
+                    key={"_readuptoghost_" + eventId}
+                    eventId={eventId}
+                    kind="ghost"
+                    showLine={true}
+                    onGhostLineRef={this.collectGhostReadMarker}
+                    onGhostTransitionEnd={this.onGhostTransitionEnd}
+                    className="mx_MessagePanel_myReadMarker"
+                />
             );
         }
 
         return null;
     }
 
-    private collectGhostReadMarker = (node: HTMLElement | null): void => {
+    private collectReadMarker = (node: HTMLLIElement | null): void => {
+        this.readMarkerNode = node;
+    };
+
+    private collectGhostReadMarker = (node: HTMLHRElement | null): void => {
         if (node) {
             // now the element has appeared, change the style which will trigger the CSS transition
             requestAnimationFrame(() => {
@@ -573,7 +565,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         }
     };
 
-    private onGhostTransitionEnd = (ev: TransitionEvent): void => {
+    private onGhostTransitionEnd: TransitionEventHandler<HTMLHRElement> = (ev): void => {
         // we can now clean up the ghost element
         const finishedEventId = (ev.target as HTMLElement).dataset.eventid;
         this.setState({
diff --git a/apps/web/src/components/structures/PictureInPictureDragger.tsx b/apps/web/src/components/structures/PictureInPictureDragger.tsx
index 2cadc59a7b..d9f472c311 100644
--- a/apps/web/src/components/structures/PictureInPictureDragger.tsx
+++ b/apps/web/src/components/structures/PictureInPictureDragger.tsx
@@ -37,9 +37,7 @@ interface IChildrenOptions {
 }
 
 interface IProps {
-    className?: string;
     children: Array<CreatePipChildren>;
-    draggable: boolean;
     onDoubleClick?: () => void;
     onMove?: () => void;
 }
@@ -181,9 +179,6 @@ export default class PictureInPictureDragger extends React.Component<IProps> {
     };
 
     private onStartMoving = (event: React.MouseEvent | MouseEvent): void => {
-        event.preventDefault();
-        event.stopPropagation();
-
         this.mouseHeld = true;
         this.startingPositionX = event.clientX;
         this.startingPositionY = event.clientY;
@@ -217,9 +212,6 @@ export default class PictureInPictureDragger extends React.Component<IProps> {
     private onEndMoving = (event: MouseEvent): void => {
         if (!this.mouseHeld) return;
 
-        event.preventDefault();
-        event.stopPropagation();
-
         this.mouseHeld = false;
         // Delaying this to the next event loop tick is necessary for click
         // event cancellation to work
@@ -250,7 +242,7 @@ export default class PictureInPictureDragger extends React.Component<IProps> {
 
         return (
             <aside
-                className={this.props.className}
+                className="mx_PictureInPictureDragger"
                 style={style}
                 ref={this.callViewWrapper}
                 onClickCapture={this.onClickCapture}
diff --git a/apps/web/src/components/structures/PipContainer.tsx b/apps/web/src/components/structures/PipContainer.tsx
index 2eab9efc93..12920fb8a7 100644
--- a/apps/web/src/components/structures/PipContainer.tsx
+++ b/apps/web/src/components/structures/PipContainer.tsx
@@ -266,12 +266,7 @@ class PipContainerInner extends React.Component<IProps, IState> {
 
         if (pipContent.length) {
             return (
-                <PictureInPictureDragger
-                    className="mx_LegacyCallPreview"
-                    draggable={pipMode}
-                    onDoubleClick={this.onDoubleClick}
-                    onMove={this.onMove}
-                >
+                <PictureInPictureDragger onDoubleClick={this.onDoubleClick} onMove={this.onMove}>
                     {pipContent}
                 </PictureInPictureDragger>
             );
diff --git a/apps/web/src/components/structures/RoomView.tsx b/apps/web/src/components/structures/RoomView.tsx
index fec7b12064..a9ee394fce 100644
--- a/apps/web/src/components/structures/RoomView.tsx
+++ b/apps/web/src/components/structures/RoomView.tsx
@@ -1380,12 +1380,12 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         if (data.timeline.getTimelineSet() !== room.getUnfilteredTimelineSet()) return;
 
         if (ev.getType() === "org.matrix.room.preview_urls") {
-            this.updatePreviewUrlVisibility(room);
+            this.updatePreviewUrlVisibility();
         }
 
         if (ev.getType() === "m.room.encryption") {
             this.updateE2EStatus(room);
-            this.updatePreviewUrlVisibility(room);
+            this.updatePreviewUrlVisibility();
         }
 
         // ignore anything but real-time updates at the end of the room:
@@ -1541,15 +1541,14 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         });
     }
 
-    private updatePreviewUrlVisibility(room: Room): void {
+    private updatePreviewUrlVisibility(): void {
         this.setState(({ isRoomEncrypted }) => ({
-            showUrlPreview: this.getPreviewUrlVisibility(room, isRoomEncrypted),
+            showUrlPreview: this.getPreviewUrlVisibility(isRoomEncrypted),
         }));
     }
 
-    private getPreviewUrlVisibility({ roomId }: Room, isRoomEncrypted: boolean | null): boolean {
-        const key = isRoomEncrypted ? "urlPreviewsEnabled_e2ee" : "urlPreviewsEnabled";
-        return SettingsStore.getValue(key, roomId);
+    private getPreviewUrlVisibility(isRoomEncrypted: boolean | null): boolean {
+        return SettingsStore.getValue(isRoomEncrypted ? "urlPreviewsEnabled_e2ee" : "urlPreviewsEnabled");
     }
 
     private onRoom = (room: Room): void => {
@@ -1608,9 +1607,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     }
 
     private onUrlPreviewsEnabledChange = (): void => {
-        if (this.state.room) {
-            this.updatePreviewUrlVisibility(this.state.room);
-        }
+        this.updatePreviewUrlVisibility();
     };
 
     private onRoomStateEvents = async (ev: MatrixEvent, state: RoomState): Promise<void> => {
@@ -1661,7 +1658,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
         this.setState({
             isRoomEncrypted,
-            showUrlPreview: this.getPreviewUrlVisibility(room, isRoomEncrypted),
+            showUrlPreview: this.getPreviewUrlVisibility(isRoomEncrypted),
             ...(newE2EStatus && { e2eStatus: newE2EStatus }),
         });
     }
diff --git a/apps/web/src/components/structures/SpaceHierarchy.tsx b/apps/web/src/components/structures/SpaceHierarchy.tsx
index 779ac9f5c2..c1d5976869 100644
--- a/apps/web/src/components/structures/SpaceHierarchy.tsx
+++ b/apps/web/src/components/structures/SpaceHierarchy.tsx
@@ -184,6 +184,10 @@ const Tile: React.FC<ITileProps> = ({
                     aria-labelledby={checkboxLabelId}
                     checked={!!selected}
                     tabIndex={-1}
+                    onChange={(e) => {
+                        e.stopPropagation();
+                        onToggleClick();
+                    }}
                 />
             );
         } else {
@@ -311,9 +315,9 @@ const Tile: React.FC<ITileProps> = ({
             };
 
             childSection = (
-                <div className="mx_SpaceHierarchy_subspace_children" onKeyDown={onChildrenKeyDown} role="group">
+                <ul className="mx_SpaceHierarchy_subspace_children" onKeyDown={onChildrenKeyDown} role="group">
                     {children}
-                </div>
+                </ul>
             );
         }
 
diff --git a/apps/web/src/components/structures/SpaceRoomView.tsx b/apps/web/src/components/structures/SpaceRoomView.tsx
index 7b7b79c126..9bb04ce552 100644
--- a/apps/web/src/components/structures/SpaceRoomView.tsx
+++ b/apps/web/src/components/structures/SpaceRoomView.tsx
@@ -34,7 +34,7 @@ import { useFeatureEnabled } from "../../hooks/useSettings";
 import { useStateArray } from "../../hooks/useStateArray";
 import { _t } from "../../languageHandler";
 import PosthogTrackers from "../../PosthogTrackers";
-import { inviteMultipleToRoom, showRoomInviteDialog } from "../../RoomInvite";
+import { showRoomInviteDialog } from "../../RoomInvite";
 import { UIComponent } from "../../settings/UIFeature";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import RightPanelStore from "../../stores/right-panel/RightPanelStore";
@@ -76,6 +76,7 @@ import SpaceHierarchy, { showRoom } from "./SpaceHierarchy";
 import { type RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
 import SpacePillButton from "./SpacePillButton.tsx";
 import { useRoomName } from "../../hooks/useRoomName.ts";
+import MultiInviter from "../../utils/MultiInviter.ts";
 
 interface IProps {
     space: Room;
@@ -538,11 +539,12 @@ const SpaceSetupPrivateInvite: React.FC<{
         setBusy(true);
         const targetIds = emailAddresses.map((name) => name.trim()).filter(Boolean);
         try {
-            const result = await inviteMultipleToRoom(space.client, space.roomId, targetIds);
+            const inviter = new MultiInviter(space.client, space.roomId);
+            const states = await inviter.invite(targetIds);
 
-            const failedUsers = Object.keys(result.states).filter((a) => result.states[a] === "error");
+            const failedUsers = Object.keys(states).filter((a) => states[a] === "error");
             if (failedUsers.length > 0) {
-                logger.log("Failed to invite users to space: ", result);
+                logger.log("Failed to invite users to space:", states);
                 setError(
                     _t("create_space|failed_invite_users", {
                         csvUsers: failedUsers.join(", "),
diff --git a/apps/web/src/components/structures/auth/ForgotPassword.tsx b/apps/web/src/components/structures/auth/ForgotPassword.tsx
index c9d5466801..8f246e17cb 100644
--- a/apps/web/src/components/structures/auth/ForgotPassword.tsx
+++ b/apps/web/src/components/structures/auth/ForgotPassword.tsx
@@ -12,7 +12,7 @@ import React, { type JSX, type ReactNode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { sleep } from "matrix-js-sdk/src/utils";
 import { LockSolidIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { Button } from "@vector-im/compound-web";
+import { Button, Form } from "@vector-im/compound-web";
 
 import { _t, _td } from "../../../languageHandler";
 import Modal from "../../../Modal";
@@ -380,7 +380,7 @@ export default class ForgotPassword extends React.Component<Props, State> {
             <>
                 <LockSolidIcon className="mx_AuthBody_lockIcon" />
                 <h1>{_t("auth|reset_password_title")}</h1>
-                <form onSubmit={this.onSubmitForm}>
+                <Form.Root onSubmit={this.onSubmitForm}>
                     <fieldset disabled={this.state.phase === Phase.ResettingPassword}>
                         <div className="mx_AuthBody_fieldRow">
                             <PassphraseField
@@ -413,6 +413,7 @@ export default class ForgotPassword extends React.Component<Props, State> {
                             <StyledCheckbox
                                 onChange={() => this.setState({ logoutDevices: !this.state.logoutDevices })}
                                 checked={this.state.logoutDevices}
+                                formWrap={false}
                             >
                                 {_t("auth|reset_password|sign_out_other_devices")}
                             </StyledCheckbox>
@@ -422,7 +423,7 @@ export default class ForgotPassword extends React.Component<Props, State> {
                             {submitButtonChild}
                         </Button>
                     </fieldset>
-                </form>
+                </Form.Root>
             </>
         );
     }
diff --git a/apps/web/src/components/structures/auth/SoftLogout.tsx b/apps/web/src/components/structures/auth/SoftLogout.tsx
index a307078658..95d83e9d2b 100644
--- a/apps/web/src/components/structures/auth/SoftLogout.tsx
+++ b/apps/web/src/components/structures/auth/SoftLogout.tsx
@@ -26,6 +26,7 @@ import Spinner from "../../views/elements/Spinner";
 import AuthHeader from "../../views/auth/AuthHeader";
 import AuthBody from "../../views/auth/AuthBody";
 import { SDKContext } from "../../../contexts/SDKContext";
+import { type URLParams } from "../../../vector/url_utils.ts";
 
 enum LoginView {
     Loading,
@@ -43,14 +44,11 @@ const STATIC_FLOWS_TO_VIEWS: Record<string, LoginView> = {
 };
 
 interface IProps {
-    // Query parameters from MatrixChat
-    realQueryParams: {
-        loginToken?: string;
-    };
-    fragmentAfterLogin?: string;
+    urlParams: URLParams;
+    fragmentAfterLogin: string;
 
     // Called when the SSO login completes
-    onTokenLoginCompleted: () => void;
+    onTokenLoginCompleted: (urlParams: URLParams, fragmentAfterLogin: string) => void;
 }
 
 interface IState {
@@ -98,8 +96,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
     };
 
     private async initLogin(): Promise<void> {
-        const queryParams = this.props.realQueryParams;
-        const hasAllParams = queryParams?.["loginToken"];
+        const hasAllParams = !!this.props.urlParams?.legacy_sso;
         if (hasAllParams) {
             this.setState({ loginView: LoginView.Loading });
 
@@ -189,7 +186,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
         const isUrl = localStorage.getItem(SSO_ID_SERVER_URL_KEY) || MatrixClientPeg.safeGet().getIdentityServerUrl();
         const loginType = "m.login.token";
         const loginParams = {
-            token: this.props.realQueryParams["loginToken"],
+            token: this.props.urlParams?.legacy_sso?.loginToken,
             device_id: MatrixClientPeg.safeGet().getDeviceId() ?? undefined,
         };
 
@@ -204,9 +201,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
 
         return Lifecycle.hydrateSession(credentials)
             .then(() => {
-                if (this.props.onTokenLoginCompleted) {
-                    this.props.onTokenLoginCompleted();
-                }
+                this.props.onTokenLoginCompleted(this.props.urlParams, this.props.fragmentAfterLogin);
                 return true;
             })
             .catch((e) => {
diff --git a/apps/web/src/components/views/auth/AuthPage.tsx b/apps/web/src/components/views/auth/AuthPage.tsx
index adc901f6c9..8d1c56ea7c 100644
--- a/apps/web/src/components/views/auth/AuthPage.tsx
+++ b/apps/web/src/components/views/auth/AuthPage.tsx
@@ -31,16 +31,13 @@ export default class AuthPage extends React.PureComponent<React.PropsWithChildre
         if (AuthPage.welcomeBackgroundUrl) return AuthPage.welcomeBackgroundUrl;
 
         const brandingConfig = SdkConfig.getObject("branding");
-        AuthPage.welcomeBackgroundUrl = "themes/element/img/backgrounds/lake.jpg";
 
-        const configuredUrl = brandingConfig?.get("welcome_background_url");
-        if (configuredUrl) {
-            if (Array.isArray(configuredUrl)) {
-                const index = Math.floor(Math.random() * configuredUrl.length);
-                AuthPage.welcomeBackgroundUrl = configuredUrl[index];
-            } else {
-                AuthPage.welcomeBackgroundUrl = configuredUrl;
-            }
+        const urls = brandingConfig.get("welcome_background_url");
+        if (Array.isArray(urls)) {
+            const index = Math.floor(Math.random() * urls.length);
+            AuthPage.welcomeBackgroundUrl = urls[index];
+        } else {
+            AuthPage.welcomeBackgroundUrl = urls;
         }
 
         return AuthPage.welcomeBackgroundUrl;
diff --git a/apps/web/src/components/views/auth/DefaultWelcome.tsx b/apps/web/src/components/views/auth/DefaultWelcome.tsx
new file mode 100644
index 0000000000..8b63dddcb7
--- /dev/null
+++ b/apps/web/src/components/views/auth/DefaultWelcome.tsx
@@ -0,0 +1,51 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { Button, Heading, Text } from "@vector-im/compound-web";
+
+import { _t } from "../../../languageHandler";
+import SdkConfig from "../../../SdkConfig.ts";
+import { MatrixClientPeg } from "../../../MatrixClientPeg.ts";
+import { isElementBranded } from "../../../branding.ts";
+
+const DefaultWelcome: React.FC = () => {
+    const brand = SdkConfig.get("brand");
+    const branding = SdkConfig.getObject("branding");
+    const logoUrl = branding.get("auth_header_logo_url");
+
+    const showGuestFunctions = !!MatrixClientPeg.get();
+    const isElement = isElementBranded();
+
+    return (
+        <div className="mx_DefaultWelcome">
+            <a href={branding.get("logo_link_url")} target="_blank" rel="noopener" className="mx_DefaultWelcome_logo">
+                <img src={logoUrl} alt={brand} />
+            </a>
+            <Heading as="h1" weight="semibold">
+                {isElement ? _t("welcome|title_element") : _t("welcome|title_generic", { brand })}
+            </Heading>
+            {isElement && <Text size="md">{_t("welcome|tagline_element")}</Text>}
+
+            <div className="mx_DefaultWelcome_buttons">
+                <Button as="a" href="#/login" kind="primary" size="sm">
+                    {_t("action|sign_in")}
+                </Button>
+                <Button as="a" href="#/register" kind="secondary" size="sm">
+                    {_t("action|create_account")}
+                </Button>
+                {showGuestFunctions && (
+                    <Button as="a" href="#/directory" kind="tertiary" size="sm">
+                        {_t("action|explore_rooms")}
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default DefaultWelcome;
diff --git a/apps/web/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/apps/web/src/components/views/auth/InteractiveAuthEntryComponents.tsx
index 49443bdd2e..edd44019ba 100644
--- a/apps/web/src/components/views/auth/InteractiveAuthEntryComponents.tsx
+++ b/apps/web/src/components/views/auth/InteractiveAuthEntryComponents.tsx
@@ -459,8 +459,8 @@ export class EmailIdentityAuthEntry extends React.Component<
                                 {
                                     a: (text: string) => (
                                         <Fragment>
-                                            <AccessibleButton kind="link_inline" onClick={null} disabled>
-                                                {text} <Spinner size={14} />
+                                            <AccessibleButton element="a" kind="link_inline" onClick={null} disabled>
+                                                {text} <Spinner as="span" size={14} />
                                             </AccessibleButton>
                                         </Fragment>
                                     ),
@@ -475,6 +475,7 @@ export class EmailIdentityAuthEntry extends React.Component<
                                 {
                                     a: (text: string) => (
                                         <AccessibleButton
+                                            element="a"
                                             kind="link_inline"
                                             title={
                                                 this.state.requested ? _t("auth|uia|email_resent") : _t("action|resend")
diff --git a/apps/web/src/components/views/auth/Welcome.tsx b/apps/web/src/components/views/auth/Welcome.tsx
index e2b64028e4..f8c00b2127 100644
--- a/apps/web/src/components/views/auth/Welcome.tsx
+++ b/apps/web/src/components/views/auth/Welcome.tsx
@@ -5,9 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type ReactNode } from "react";
 import classNames from "classnames";
 import { type EmptyObject } from "matrix-js-sdk/src/matrix";
+import { Glass } from "@vector-im/compound-web";
 
 import SdkConfig from "../../../SdkConfig";
 import AuthPage from "./AuthPage";
@@ -16,14 +17,12 @@ import { UIFeature } from "../../../settings/UIFeature";
 import LanguageSelector from "./LanguageSelector";
 import EmbeddedPage from "../../structures/EmbeddedPage";
 import { MATRIX_LOGO_HTML } from "../../structures/static-page-vars";
+import DefaultWelcome from "./DefaultWelcome.tsx";
 
 export default class Welcome extends React.PureComponent<EmptyObject> {
     public render(): React.ReactNode {
         const pagesConfig = SdkConfig.getObject("embedded_pages");
-        let pageUrl: string | undefined;
-        if (pagesConfig) {
-            pageUrl = pagesConfig.get("welcome_url");
-        }
+        const pageUrl = pagesConfig?.get("welcome_url");
 
         const replaceMap: Record<string, string> = {
             "$brand": SdkConfig.get("brand"),
@@ -33,25 +32,25 @@ export default class Welcome extends React.PureComponent<EmptyObject> {
             "[matrix]": MATRIX_LOGO_HTML,
         };
 
-        if (!pageUrl) {
-            // Fall back to default and replace $logoUrl in welcome.html
-            const brandingConfig = SdkConfig.getObject("branding");
-            const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.svg";
-            replaceMap["$logoUrl"] = logoUrl;
-            pageUrl = "welcome.html";
+        let body: ReactNode;
+        if (pageUrl) {
+            body = <EmbeddedPage className="mx_WelcomePage" url={pageUrl} replaceMap={replaceMap} />;
+        } else {
+            body = <DefaultWelcome />;
         }
 
         return (
-            <AuthPage>
-                <div
-                    className={classNames("mx_Welcome", {
-                        mx_WelcomePage_registrationDisabled: !SettingsStore.getValue(UIFeature.Registration),
-                    })}
-                    data-testid="mx_welcome_screen"
-                >
-                    <EmbeddedPage className="mx_WelcomePage" url={pageUrl} replaceMap={replaceMap} />
-                    <LanguageSelector />
-                </div>
+            <AuthPage addBlur={false}>
+                <Glass>
+                    <div
+                        className={classNames("mx_Welcome", {
+                            mx_WelcomePage_registrationDisabled: !SettingsStore.getValue(UIFeature.Registration),
+                        })}
+                    >
+                        {body}
+                        <LanguageSelector />
+                    </div>
+                </Glass>
             </AuthPage>
         );
     }
diff --git a/apps/web/src/components/views/dialogs/BaseDialog.tsx b/apps/web/src/components/views/dialogs/BaseDialog.tsx
index 4c08c80560..22cbbedfaa 100644
--- a/apps/web/src/components/views/dialogs/BaseDialog.tsx
+++ b/apps/web/src/components/views/dialogs/BaseDialog.tsx
@@ -50,9 +50,13 @@ interface IProps {
     // CSS class to apply to dialog div
     "className"?: string;
 
-    // if true, dialog container is 60% of the viewport width. Otherwise,
-    // the container will have no fixed size, allowing its contents to
-    // determine its size. Default: true.
+    /**
+     * If true, dialog container is between 60% of the viewport width and 704 pixels (depending on screen size and dialog contents).
+     *
+     * Otherwise, the container will have no fixed width, allowing its contents to determine its size.
+     *
+     * Default: true.
+     */
     "fixedWidth"?: boolean;
 
     // To be displayed at the top of the dialog. Even above the title.
diff --git a/apps/web/src/components/views/dialogs/BugReportDialog.tsx b/apps/web/src/components/views/dialogs/BugReportDialog.tsx
index 2977570957..1b108bcb52 100644
--- a/apps/web/src/components/views/dialogs/BugReportDialog.tsx
+++ b/apps/web/src/components/views/dialogs/BugReportDialog.tsx
@@ -120,7 +120,7 @@ export default class BugReportDialog extends React.Component<BugReportDialogProp
                 <>
                     <p>{errorText}</p>
                     {error.policyURL && (
-                        <Link size="medium" target="_blank" href={error.policyURL}>
+                        <Link size="md" target="_blank" href={error.policyURL}>
                             {_t("action|learn_more")}
                         </Link>
                     )}
diff --git a/apps/web/src/components/views/dialogs/CreateSectionDialog.tsx b/apps/web/src/components/views/dialogs/CreateSectionDialog.tsx
new file mode 100644
index 0000000000..295aa9c643
--- /dev/null
+++ b/apps/web/src/components/views/dialogs/CreateSectionDialog.tsx
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { useState, type JSX } from "react";
+import { Flex } from "@element-hq/web-shared-components";
+import { Form, Text } from "@vector-im/compound-web";
+
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+import { _t } from "../../../languageHandler";
+
+interface CreateSectionDialogProps {
+    /**
+     * Callback called when the dialog is closed.
+     * @param shouldCreateSection Whether a section should be created or not. This will be false if the user cancels the dialog.
+     * @param sectionName The name of the section to create.
+     */
+    onFinished: (shouldCreateSection: boolean, sectionName: string) => void;
+}
+
+/**
+ * Dialog shown to the user to create a new section in the room list.
+ */
+export function CreateSectionDialog({ onFinished }: CreateSectionDialogProps): JSX.Element {
+    const [value, setValue] = useState("");
+    const isInvalid = Boolean(value.trim().length === 0);
+
+    return (
+        <BaseDialog
+            className="mx_CreateSectionDialog"
+            onFinished={() => onFinished(false, value)}
+            title={_t("create_section_dialog|title")}
+            hasCancel={true}
+        >
+            <Flex gap="var(--cpd-space-6x)" direction="column" className="mx_CreateSectionDialog_content">
+                <Text as="span" weight="semibold">
+                    {_t("create_section_dialog|description")}
+                </Text>
+                <Form.Root
+                    className="mx_CreateSectionDialog_form"
+                    onSubmit={(e) => {
+                        onFinished(true, value);
+                        e.preventDefault();
+                    }}
+                >
+                    <Form.Field name="sectionName">
+                        <Form.Label> {_t("create_section_dialog|label")}</Form.Label>
+                        <Form.TextControl onChange={(evt) => setValue(evt.target.value)} required={true} />
+                    </Form.Field>
+                </Form.Root>
+            </Flex>
+            <DialogButtons
+                primaryButton={_t("create_section_dialog|create_section")}
+                primaryDisabled={isInvalid}
+                hasCancel={true}
+                onCancel={() => onFinished(false, "")}
+                onPrimaryButtonClick={() => onFinished(true, value)}
+            />
+        </BaseDialog>
+    );
+}
diff --git a/apps/web/src/components/views/dialogs/InviteDialog.tsx b/apps/web/src/components/views/dialogs/InviteDialog.tsx
index f23aadcdad..a927129241 100644
--- a/apps/web/src/components/views/dialogs/InviteDialog.tsx
+++ b/apps/web/src/components/views/dialogs/InviteDialog.tsx
@@ -12,10 +12,9 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import { type MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import { logger } from "matrix-js-sdk/src/logger";
 import { uniqBy } from "lodash";
-import { RichList, RichItem, PillInput, Pill } from "@element-hq/web-shared-components";
+import { Pill, PillInput, RichList } from "@element-hq/web-shared-components";
 import { DialPadIcon, UserProfileSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { Icon as EmailPillAvatarIcon } from "../../../../res/img/icon-email-pill-avatar.svg";
 import { _t, _td } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { makeRoomPermalink, makeUserPermalink } from "../../../utils/permalinks/Permalinks";
@@ -25,14 +24,12 @@ import { getDefaultIdentityServerUrl, setToDefaultIdentityServer } from "../../.
 import { buildActivityScores, buildMemberScores, compareMembers } from "../../../utils/SortMembers";
 import { abbreviateUrl } from "../../../utils/UrlUtils";
 import IdentityAuthClient from "../../../IdentityAuthClient";
-import { type IInviteResult, inviteMultipleToRoom, showAnyInviteErrors } from "../../../RoomInvite";
+import { showAnyInviteErrors } from "../../../RoomInvite";
 import { Action } from "../../../dispatcher/actions";
 import { DefaultTagID } from "../../../stores/room-list-v3/skip-list/tag";
 import RoomListStore from "../../../stores/room-list/RoomListStore";
 import SettingsStore from "../../../settings/SettingsStore";
 import { UIFeature } from "../../../settings/UIFeature";
-import { mediaFromMxc } from "../../../customisations/Media";
-import BaseAvatar from "../avatars/BaseAvatar";
 import { SearchResultAvatar } from "../avatars/SearchResultAvatar";
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
 import { selectText } from "../../../utils/strings";
@@ -43,7 +40,6 @@ import QuestionDialog from "./QuestionDialog";
 import BaseDialog from "./BaseDialog";
 import DialPadBackspaceButton from "../elements/DialPadBackspaceButton";
 import LegacyCallHandler from "../../../LegacyCallHandler";
-import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
 import CopyableText from "../elements/CopyableText";
 import { type ScreenName } from "../../../PosthogTrackers";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
@@ -63,9 +59,11 @@ import { type NonEmptyArray } from "../../../@types/common";
 import { SdkContextClass } from "../../../contexts/SDKContext";
 import { type UserProfilesStore } from "../../../stores/UserProfilesStore";
 import InviteProgressBody from "./InviteProgressBody.tsx";
-
-// we have a number of types defined from the Matrix spec which can't reasonably be altered here.
-/* eslint-disable camelcase */
+import MultiInviter, { type CompletionStates as MultiInviterCompletionStates } from "../../../utils/MultiInviter.ts";
+import { DMRoomTile } from "./invite/DMRoomTile.tsx";
+import { logErrorAndShowErrorDialog } from "../../../utils/ErrorUtils.tsx";
+import UnknownIdentityUsersWarningDialog from "./invite/UnknownIdentityUsersWarningDialog.tsx";
+import { AddressType, getAddressType } from "../../../UserAddress.ts";
 
 interface Result {
     userId: string;
@@ -116,62 +114,6 @@ const toMember = (member: RoomMember | Member): Member => {
         : member;
 };
 
-interface IDMRoomTileProps {
-    member: Member;
-    lastActiveTs?: number;
-    onToggle(member: Member): void;
-    isSelected: boolean;
-}
-
-class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
-    private onClick = (e: ButtonEvent): void => {
-        // Stop the browser from highlighting text
-        e.preventDefault();
-        e.stopPropagation();
-
-        this.props.onToggle(this.props.member);
-    };
-
-    public render(): React.ReactNode {
-        const avatarSize = "32px";
-        const avatar = (this.props.member as ThreepidMember).isEmail ? (
-            <EmailPillAvatarIcon width={avatarSize} height={avatarSize} />
-        ) : (
-            <BaseAvatar
-                url={
-                    this.props.member.getMxcAvatarUrl()
-                        ? mediaFromMxc(this.props.member.getMxcAvatarUrl()!).getSquareThumbnailHttp(
-                              parseInt(avatarSize, 10),
-                          )
-                        : null
-                }
-                name={this.props.member.name}
-                idName={this.props.member.userId}
-                size={avatarSize}
-            />
-        );
-
-        const userIdentifier = UserIdentifierCustomisations.getDisplayUserIdentifier(this.props.member.userId, {
-            withDisplayName: true,
-        });
-
-        const caption = (this.props.member as ThreepidMember).isEmail
-            ? _t("invite|email_caption")
-            : userIdentifier || this.props.member.userId;
-
-        return (
-            <RichItem
-                avatar={avatar}
-                title={this.props.member.name}
-                description={caption}
-                timestamp={this.props.lastActiveTs}
-                onClick={this.onClick}
-                selected={this.props.isSelected}
-            />
-        );
-    }
-}
-
 interface BaseProps {
     // Takes a boolean which is true if a user / users were invited /
     // a call transfer was initiated or false if the dialog was cancelled
@@ -222,6 +164,14 @@ interface IInviteDialogState {
     dialPadValue: string;
     currentTabId: TabId;
 
+    /**
+     * If we tried to invite some users whose identity we don't know, we will show a warning.
+     * This is the list of users. (If it is `null`, we are not showing that warning.)
+     *
+     * Will never be the empty list.
+     */
+    unknownIdentityUsers: Member[] | null;
+
     /**
      * True if we are sending the invites.
      *
@@ -291,7 +241,8 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
             dialPadValue: "",
             currentTabId: TabId.UserDirectory,
 
-            // These two flags are used for the 'Go' button to communicate what is going on.
+            unknownIdentityUsers: null,
+
             busy: false,
         };
     }
@@ -409,10 +360,14 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
             .map((member) => ({ userId: member.userId, user: toMember(member) }));
     }
 
-    private shouldAbortAfterInviteError(result: IInviteResult, room: Room): boolean {
+    private shouldAbortAfterInviteError(
+        states: MultiInviterCompletionStates,
+        inviter: MultiInviter,
+        room: Room,
+    ): boolean {
         this.setState({ busy: false });
         const userMap = new Map<string, Member>(this.state.targets.map((member) => [member.userId, member]));
-        return !showAnyInviteErrors(result.states, room, result.inviter, userMap);
+        return !showAnyInviteErrors(states, room, inviter, userMap);
     }
 
     private convertFilter(): Member[] {
@@ -483,11 +438,12 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
 
         try {
-            const result = await inviteMultipleToRoom(cli, this.props.roomId, targetIds, {
+            const inviter = new MultiInviter(cli, this.props.roomId, {
                 // We show our own progress body, so don't pop up a separate dialog.
                 inhibitProgressDialog: true,
             });
-            if (!this.shouldAbortAfterInviteError(result, room)) {
+            const states = await inviter.invite(targetIds);
+            if (!this.shouldAbortAfterInviteError(states, inviter, room)) {
                 // handles setting error message too
                 this.props.onFinished(true);
             }
@@ -500,6 +456,21 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
     };
 
+    /**
+     * Start the process of actually sending invites or creating a DM.
+     *
+     * Called once we have shown the user all the necessary warnings.
+     */
+    private async startDmOrSendInvites(): Promise<void> {
+        if (this.props.kind === InviteKind.Dm) {
+            await this.startDm();
+        } else if (this.props.kind === InviteKind.Invite) {
+            await this.inviteUsers();
+        } else {
+            throw new Error("Unknown InviteKind: " + this.props.kind);
+        }
+    }
+
     private transferCall = async (): Promise<void> => {
         if (this.props.kind !== InviteKind.CallTransfer) return;
         if (this.state.currentTabId == TabId.UserDirectory) {
@@ -1180,14 +1151,48 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
     }
 
     /**
-     * Render content of the common "users" tab that is shown whether we have a regular invite dialog or a
-     * "CallTransfer" one.
+     * Handle the user pressing the Go/Invite button in the "Start Chat" or "Invite users" view.
+     *
+     * We check if any of the users lack a known cryptographic identity, and show a warning if so.
+     */
+    private async onGoButtonPressed(): Promise<void> {
+        this.setBusy(true);
+
+        const targets = this.convertFilter();
+        const unknownIdentityUsers: Member[] = [];
+        const cli = MatrixClientPeg.safeGet();
+        const crypto = cli.getCrypto();
+        if (crypto) {
+            for (const t of targets) {
+                const addressType = getAddressType(t.userId);
+                if (
+                    addressType !== AddressType.MatrixUserId ||
+                    !(await crypto.getUserVerificationStatus(t.userId)).known
+                ) {
+                    unknownIdentityUsers.push(t);
+                }
+            }
+        }
+
+        // If we have some users with unknown identities, show the warning page.
+        if (unknownIdentityUsers.length > 0) {
+            logger.debug(
+                "InviteDialog: Warning about users with unknown identities:",
+                unknownIdentityUsers.map((u) => u.userId),
+            );
+            this.setState({ unknownIdentityUsers: unknownIdentityUsers, busy: false });
+        } else {
+            // Otherwise, transition directly to sending the relevant invites.
+            await this.startDmOrSendInvites();
+        }
+    }
+
+    /**
+     * Render content of the "users" that is used for both invites and "start chat".
      */
     private renderMainTab(): JSX.Element {
         let helpText;
         let buttonText;
-        let goButtonFn: (() => Promise<void>) | null = null;
-
         const identityServersEnabled = SettingsStore.getValue(UIFeature.IdentityServer);
 
         const cli = MatrixClientPeg.safeGet();
@@ -1224,7 +1229,6 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
             }
 
             buttonText = _t("action|go");
-            goButtonFn = this.startDm;
         } else if (this.props.kind === InviteKind.Invite) {
             const roomId = this.props.roomId;
             const room = MatrixClientPeg.get()?.getRoom(roomId);
@@ -1268,39 +1272,76 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
             );
 
             buttonText = _t("action|invite");
-            goButtonFn = this.inviteUsers;
+        } else {
+            throw new Error("Unknown InviteDialog kind: " + this.props.kind);
         }
 
-        const goButton =
-            this.props.kind == InviteKind.CallTransfer ? null : (
-                <AccessibleButton
-                    kind="primary"
-                    onClick={goButtonFn}
-                    className="mx_InviteDialog_goButton"
-                    disabled={this.state.busy || !this.hasSelection()}
-                >
-                    {buttonText}
-                </AccessibleButton>
-            );
+        const onGoButtonPressed = (): void => {
+            this.onGoButtonPressed().catch((e) => logErrorAndShowErrorDialog("Error processing invites", e));
+        };
 
         return (
             <React.Fragment>
                 <p className="mx_InviteDialog_helpText">{helpText}</p>
                 <div className="mx_InviteDialog_addressBar">
                     {this.renderEditor()}
-                    {goButton}
+                    <AccessibleButton
+                        kind="primary"
+                        onClick={onGoButtonPressed}
+                        className="mx_InviteDialog_goButton"
+                        disabled={this.state.busy || !this.hasSelection()}
+                    >
+                        {buttonText}
+                    </AccessibleButton>
                 </div>
                 {this.state.busy ? <InviteProgressBody /> : this.renderSuggestions()}
             </React.Fragment>
         );
     }
 
+    /** Callback function, which handles the user clicking "Remove" on the {@link UnknwownIdentityUsersWarningDialog}. */
+    private onRemoveUnknownIdentityUsersClicked = (): void => {
+        // Remove the unknown identity users, then return to the previous screen
+        const newTargets: Member[] = [];
+        for (const target of this.state.targets) {
+            if (!this.state.unknownIdentityUsers?.find((m) => m.userId == target.userId)) {
+                newTargets.push(target);
+            }
+        }
+        this.setState({
+            targets: newTargets,
+            unknownIdentityUsers: null,
+        });
+    };
+
     /**
      * Render the complete dialog, given this is not a call transfer dialog.
      *
      * See also: {@link renderCallTransferDialog}.
      */
     private renderRegularDialog(): React.ReactNode {
+        if (this.props.kind !== InviteKind.Dm && this.props.kind !== InviteKind.Invite) {
+            throw new Error("Unsupported InviteDialog kind: " + this.props.kind);
+        }
+
+        if (this.state.unknownIdentityUsers !== null) {
+            return (
+                <UnknownIdentityUsersWarningDialog
+                    onCancel={this.props.onFinished}
+                    onContinue={() => {
+                        this.setState({ unknownIdentityUsers: null });
+                        this.startDmOrSendInvites().catch((e) =>
+                            logErrorAndShowErrorDialog("Error processing invites", e),
+                        );
+                    }}
+                    onRemove={this.onRemoveUnknownIdentityUsersClicked}
+                    screenName={this.screenName}
+                    kind={this.props.kind}
+                    users={this.state.unknownIdentityUsers}
+                />
+            );
+        }
+
         let title;
         if (this.props.kind === InviteKind.Dm) {
             title = _t("space|add_existing_room_space|dm_heading");
@@ -1336,7 +1377,12 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
      * See also: {@link renderRegularDialog}.
      */
     private renderCallTransferDialog(): React.ReactNode {
-        const usersSection = this.renderMainTab();
+        const usersSection = (
+            <React.Fragment>
+                <div className="mx_InviteDialog_addressBar">{this.renderEditor()}</div>
+                {this.state.busy ? <InviteProgressBody /> : this.renderSuggestions()}
+            </React.Fragment>
+        );
 
         const tabs: NonEmptyArray<Tab<TabId>> = [
             new Tab(
diff --git a/apps/web/src/components/views/dialogs/RoomSettingsDialog.tsx b/apps/web/src/components/views/dialogs/RoomSettingsDialog.tsx
index 10e4a3e428..4488c6bf93 100644
--- a/apps/web/src/components/views/dialogs/RoomSettingsDialog.tsx
+++ b/apps/web/src/components/views/dialogs/RoomSettingsDialog.tsx
@@ -42,6 +42,7 @@ import { type NonEmptyArray } from "../../../@types/common";
 import { PollHistoryTab } from "../settings/tabs/room/PollHistoryTab";
 import ErrorBoundary from "../elements/ErrorBoundary";
 import { PeopleRoomSettingsTab } from "../settings/tabs/room/PeopleRoomSettingsTab";
+import { SDKContext, type SdkContextClass } from "../../../contexts/SDKContext";
 
 export const enum RoomSettingsTab {
     General = "ROOM_GENERAL_TAB",
@@ -59,6 +60,7 @@ interface IProps {
     roomId: string;
     onFinished: (success?: boolean) => void;
     initialTabId?: RoomSettingsTab;
+    sdkContext: SdkContextClass;
 }
 
 interface IState {
@@ -238,21 +240,23 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
     public render(): React.ReactNode {
         const roomName = this.state.room.name;
         return (
-            <BaseDialog
-                className="mx_RoomSettingsDialog"
-                hasCancel={true}
-                onFinished={this.props.onFinished}
-                title={_t("room_settings|title", { roomName })}
-            >
-                <div className="mx_SettingsDialog_content">
-                    <TabbedView
-                        tabs={this.getTabs()}
-                        activeTabId={this.state.activeTabId}
-                        screenName="RoomSettings"
-                        onChange={this.onTabChange}
-                    />
-                </div>
-            </BaseDialog>
+            <SDKContext.Provider value={this.props.sdkContext}>
+                <BaseDialog
+                    className="mx_RoomSettingsDialog"
+                    hasCancel={true}
+                    onFinished={this.props.onFinished}
+                    title={_t("room_settings|title", { roomName })}
+                >
+                    <div className="mx_SettingsDialog_content">
+                        <TabbedView
+                            tabs={this.getTabs()}
+                            activeTabId={this.state.activeTabId}
+                            screenName="RoomSettings"
+                            onChange={this.onTabChange}
+                        />
+                    </div>
+                </BaseDialog>
+            </SDKContext.Provider>
         );
     }
 }
diff --git a/apps/web/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx b/apps/web/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
index 33ca9c510b..6f71f0762c 100644
--- a/apps/web/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
+++ b/apps/web/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
@@ -104,7 +104,12 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
 
             return (
                 <div className="mx_WidgetCapabilitiesPromptDialog_cap" key={cap + i}>
-                    <StyledCheckbox checked={isChecked} onChange={() => this.onToggle(cap)} description={text.byline}>
+                    <StyledCheckbox
+                        checked={isChecked}
+                        onChange={() => this.onToggle(cap)}
+                        description={text.byline}
+                        formWrap={false}
+                    >
                         {text.primary}
                     </StyledCheckbox>
                 </div>
diff --git a/apps/web/src/components/views/dialogs/devtools/Crypto.tsx b/apps/web/src/components/views/dialogs/devtools/Crypto.tsx
index 1c02f062c3..3e4cda666e 100644
--- a/apps/web/src/components/views/dialogs/devtools/Crypto.tsx
+++ b/apps/web/src/components/views/dialogs/devtools/Crypto.tsx
@@ -110,7 +110,11 @@ function KeyStorage(): JSX.Element {
 
     return (
         <table aria-label={_t("devtools|crypto|key_storage")}>
-            <thead>{_t("devtools|crypto|key_storage")}</thead>
+            <thead>
+                <tr>
+                    <th colSpan={2}>{_t("devtools|crypto|key_storage")}</th>
+                </tr>
+            </thead>
             <tbody>
                 <tr>
                     <th scope="row">{_t("devtools|crypto|key_backup_latest_version")}</th>
@@ -212,7 +216,11 @@ function CrossSigning(): JSX.Element {
 
     return (
         <table aria-label={_t("devtools|crypto|cross_signing")}>
-            <thead>{_t("devtools|crypto|cross_signing")}</thead>
+            <thead>
+                <tr>
+                    <th colSpan={2}>{_t("devtools|crypto|cross_signing")}</th>
+                </tr>
+            </thead>
             <tbody>
                 <tr>
                     <th scope="row">{_t("devtools|crypto|cross_signing_status")}</th>
@@ -303,7 +311,11 @@ function Session(): JSX.Element {
 
     return (
         <table aria-label={_t("devtools|crypto|session")}>
-            <thead>{_t("devtools|crypto|session")}</thead>
+            <thead>
+                <tr>
+                    <th colSpan={2}>{_t("devtools|crypto|session")}</th>
+                </tr>
+            </thead>
             <tbody>
                 <tr>
                     <th scope="row">{_t("devtools|crypto|device_id")}</th>
diff --git a/apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx b/apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx
index 159fbc113b..96bebd5953 100644
--- a/apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx
+++ b/apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx
@@ -9,7 +9,6 @@ import React, { type ChangeEvent, useContext, useEffect, useMemo, useState } fro
 import { Pill } from "@element-hq/web-shared-components";
 import { MatrixEvent, type IContent, RoomStickyEventsEvent } from "matrix-js-sdk/src/matrix";
 import { Alert, Form, SettingsToggleInput } from "@vector-im/compound-web";
-import { v4 as uuidv4 } from "uuid";
 
 import BaseTool, { DevtoolsContext, type IDevtoolsProps } from "./BaseTool.tsx";
 import { _t, _td, UserFriendlyError } from "../../../../languageHandler.tsx";
@@ -330,7 +329,7 @@ export const StickyEventEditor: React.FC<IEditorProps> = ({ mxEvent, onBack }) =
     const defaultContent = mxEvent
         ? stringify(mxEvent.getContent())
         : stringify({
-              msc4354_sticky_key: uuidv4(),
+              msc4354_sticky_key: window.crypto.randomUUID(),
           });
     return <EventEditor fieldDefs={fields} defaultContent={defaultContent} onSend={onSend} onBack={onBack} />;
 };
diff --git a/apps/web/src/components/views/dialogs/invite/DMRoomTile.tsx b/apps/web/src/components/views/dialogs/invite/DMRoomTile.tsx
new file mode 100644
index 0000000000..8998977cf2
--- /dev/null
+++ b/apps/web/src/components/views/dialogs/invite/DMRoomTile.tsx
@@ -0,0 +1,74 @@
+/*
+ Copyright 2026 Element Creations Ltd.
+
+ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { RichItem } from "@element-hq/web-shared-components";
+
+import { type Member, type ThreepidMember } from "../../../../utils/direct-messages.ts";
+import type { ButtonEvent } from "../../elements/AccessibleButton.tsx";
+import BaseAvatar from "../../avatars/BaseAvatar.tsx";
+import { mediaFromMxc } from "../../../../customisations/Media.ts";
+import UserIdentifierCustomisations from "../../../../customisations/UserIdentifier.ts";
+import { _t } from "../../../../languageHandler.tsx";
+import { Icon as EmailPillAvatarIcon } from "../../../../../res/img/icon-email-pill-avatar.svg";
+
+interface IDMRoomTileProps {
+    member: Member;
+    lastActiveTs?: number;
+    onToggle?(member: Member): void;
+    isSelected?: boolean;
+}
+
+/** A tile representing a single user in the "suggestions"/"recents" section of the invite dialog. */
+export class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
+    private onClick = (e: ButtonEvent): void => {
+        // Stop the browser from highlighting text
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.props.onToggle?.(this.props.member);
+    };
+
+    public render(): React.ReactNode {
+        const avatarSize = "32px";
+        const avatar = (this.props.member as ThreepidMember).isEmail ? (
+            <EmailPillAvatarIcon width={avatarSize} height={avatarSize} />
+        ) : (
+            <BaseAvatar
+                url={
+                    this.props.member.getMxcAvatarUrl()
+                        ? mediaFromMxc(this.props.member.getMxcAvatarUrl()!).getSquareThumbnailHttp(
+                              parseInt(avatarSize, 10),
+                          )
+                        : null
+                }
+                name={this.props.member.name}
+                idName={this.props.member.userId}
+                size={avatarSize}
+            />
+        );
+
+        const userIdentifier = UserIdentifierCustomisations.getDisplayUserIdentifier(this.props.member.userId, {
+            withDisplayName: true,
+        });
+
+        const caption = (this.props.member as ThreepidMember).isEmail
+            ? _t("invite|email_caption")
+            : userIdentifier || this.props.member.userId;
+
+        return (
+            <RichItem
+                avatar={avatar}
+                title={this.props.member.name}
+                description={caption}
+                timestamp={this.props.lastActiveTs}
+                onClick={this.onClick}
+                selected={this.props.isSelected}
+            />
+        );
+    }
+}
diff --git a/apps/web/src/components/views/dialogs/invite/UnknownIdentityUsersWarningDialog.tsx b/apps/web/src/components/views/dialogs/invite/UnknownIdentityUsersWarningDialog.tsx
new file mode 100644
index 0000000000..a2c4b4a01a
--- /dev/null
+++ b/apps/web/src/components/views/dialogs/invite/UnknownIdentityUsersWarningDialog.tsx
@@ -0,0 +1,121 @@
+/*
+ Copyright 2026 Element Creations Ltd.
+
+ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX, useCallback } from "react";
+import { CheckIcon, CloseIcon, UserAddSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Button, PageHeader } from "@vector-im/compound-web";
+
+import { InviteKind } from "../InviteDialogTypes.ts";
+import { type Member } from "../../../../utils/direct-messages.ts";
+import BaseDialog from "../BaseDialog.tsx";
+import { type ScreenName } from "../../../../PosthogTrackers.ts";
+import { DMRoomTile } from "./DMRoomTile.tsx";
+import { _t } from "../../../../languageHandler.tsx";
+
+interface Props {
+    /** Callback that will be called when the 'Continue' or 'Invite' button is clicked. */
+    onContinue: () => void;
+
+    /** Callback that will be called when the 'Cancel' button is clicked. Unused unless {@link kind} is {@link InviteKind.Dm}. */
+    onCancel: () => void;
+
+    /** Callback that will be called when the 'Remove' button is clicked. Unused unless {@link kind} is {@link InviteKind.Invite}. */
+    onRemove: () => void;
+
+    /** Optional Posthog ScreenName to supply during the lifetime of this dialog. */
+    screenName: ScreenName | undefined;
+
+    /** The type of invite dialog: whether we are starting a new DM, or inviting users to an existing room */
+    kind: InviteKind.Dm | InviteKind.Invite;
+
+    /** The users whose identities we don't know */
+    users: Member[];
+}
+
+/**
+ * Part of the invite dialog: a screen that appears if there are any users whose cryptographic identity we don't know,
+ * to confirm that they are the right users.
+ *
+ * Figma: https://www.figma.com/design/chAcaQAluTuRg6BsG4Npc0/-3163--Inviting-Unknown-People?node-id=150-17719&t=ISAikbnj97LM4NwT-0
+ */
+const UnknownIdentityUsersWarningDialog: React.FC<Props> = (props) => {
+    const userListItem = useCallback((u: Member) => <DMRoomTile member={u} key={u.userId} />, []);
+
+    let title: string;
+    let headerText: string;
+    let buttons: JSX.Element;
+
+    switch (props.kind) {
+        case InviteKind.Invite:
+            title = _t("invite|confirm_unknown_users|invite_title");
+            headerText = _t("invite|confirm_unknown_users|invite_subtitle");
+            buttons = <InviteButtons onInvite={props.onContinue} onRemove={props.onRemove} />;
+            break;
+
+        case InviteKind.Dm:
+            title =
+                props.users.length == 1
+                    ? _t("invite|confirm_unknown_users|start_chat_title_one_user")
+                    : _t("invite|confirm_unknown_users|start_chat_title_multiple_users");
+
+            headerText =
+                props.users.length == 1
+                    ? _t("invite|confirm_unknown_users|start_chat_subtitle_one_user")
+                    : _t("invite|confirm_unknown_users|start_chat_subtitle_multiple_users");
+
+            buttons = <DmButtons onCancel={props.onCancel} onContinue={props.onContinue} />;
+            break;
+    }
+
+    return (
+        <BaseDialog
+            onFinished={props.onCancel}
+            className="mx_UnknownIdentityUsersWarningDialog"
+            screenName={props.screenName}
+        >
+            <div className="mx_UnknownIdentityUsersWarningDialog_headerContainer">
+                <PageHeader Icon={UserAddSolidIcon} heading={title}>
+                    <p>{headerText}</p>
+                </PageHeader>
+            </div>
+
+            <ul className="mx_UnknownIdentityUsersWarningDialog_userList" data-testid="userlist">
+                {props.users.map(userListItem)}
+            </ul>
+
+            <div className="mx_UnknownIdentityUsersWarningDialog_buttons">{buttons}</div>
+        </BaseDialog>
+    );
+};
+
+const DmButtons: React.FC<{ onContinue: () => void; onCancel: () => void }> = (props) => {
+    return (
+        <>
+            <Button size="lg" kind="secondary" onClick={props.onCancel}>
+                {_t("action|cancel")}
+            </Button>
+            <Button size="lg" kind="primary" onClick={props.onContinue}>
+                {_t("action|continue")}
+            </Button>
+        </>
+    );
+};
+
+const InviteButtons: React.FC<{ onInvite: () => void; onRemove: () => void }> = (props) => {
+    return (
+        <>
+            <Button size="lg" kind="secondary" onClick={props.onRemove} Icon={CloseIcon}>
+                {_t("action|remove")}
+            </Button>
+            <Button size="lg" kind="primary" onClick={props.onInvite} Icon={CheckIcon}>
+                {_t("action|invite")}
+            </Button>
+        </>
+    );
+};
+
+export default UnknownIdentityUsersWarningDialog;
diff --git a/apps/web/src/components/views/elements/AccessibleButton.tsx b/apps/web/src/components/views/elements/AccessibleButton.tsx
index a2018b2211..3032312b32 100644
--- a/apps/web/src/components/views/elements/AccessibleButton.tsx
+++ b/apps/web/src/components/views/elements/AccessibleButton.tsx
@@ -152,46 +152,49 @@ const AccessibleButton = function AccessibleButton<T extends ElementType = typeo
         } else {
             newProps.onClick = onClick ?? undefined;
         }
-        // We need to consume enter onKeyDown and space onKeyUp
-        // otherwise we are risking also activating other keyboard focusable elements
-        // that might receive focus as a result of the AccessibleButtonClick action
-        // It's because we are using html buttons at a few places e.g. inside dialogs
-        // And divs which we report as role button to assistive technologies.
-        // Browsers handle space and enter key presses differently and we are only adjusting to the
-        // inconsistencies here
-        newProps.onKeyDown = (e: KeyboardEvent<never>) => {
-            const action = getKeyBindingsManager().getAccessibilityAction(e);
 
-            switch (action) {
-                case KeyBindingAction.Enter:
-                    e.stopPropagation();
-                    e.preventDefault();
-                    return onClick?.(e);
-                case KeyBindingAction.Space:
-                    e.stopPropagation();
-                    e.preventDefault();
-                    break;
-                default:
-                    onKeyDown?.(e);
-            }
-        };
-        newProps.onKeyUp = (e: KeyboardEvent<never>) => {
-            const action = getKeyBindingsManager().getAccessibilityAction(e);
+        if (element !== "button") {
+            // We need to consume enter onKeyDown and space onKeyUp
+            // otherwise we are risking also activating other keyboard focusable elements
+            // that might receive focus as a result of the AccessibleButtonClick action
+            // It's because we are using html buttons at a few places e.g. inside dialogs
+            // And divs which we report as role button to assistive technologies.
+            // Browsers handle space and enter key presses differently and we are only adjusting to the
+            // inconsistencies here
+            newProps.onKeyDown = (e: KeyboardEvent<never>) => {
+                const action = getKeyBindingsManager().getAccessibilityAction(e);
 
-            switch (action) {
-                case KeyBindingAction.Enter:
-                    e.stopPropagation();
-                    e.preventDefault();
-                    break;
-                case KeyBindingAction.Space:
-                    e.stopPropagation();
-                    e.preventDefault();
-                    return onClick?.(e);
-                default:
-                    onKeyUp?.(e);
-                    break;
-            }
-        };
+                switch (action) {
+                    case KeyBindingAction.Enter:
+                        e.stopPropagation();
+                        e.preventDefault();
+                        return onClick?.(e);
+                    case KeyBindingAction.Space:
+                        e.stopPropagation();
+                        e.preventDefault();
+                        break;
+                    default:
+                        onKeyDown?.(e);
+                }
+            };
+            newProps.onKeyUp = (e: KeyboardEvent<never>) => {
+                const action = getKeyBindingsManager().getAccessibilityAction(e);
+
+                switch (action) {
+                    case KeyBindingAction.Enter:
+                        e.stopPropagation();
+                        e.preventDefault();
+                        break;
+                    case KeyBindingAction.Space:
+                        e.stopPropagation();
+                        e.preventDefault();
+                        return onClick?.(e);
+                    default:
+                        onKeyUp?.(e);
+                        break;
+                }
+            };
+        }
     }
 
     // Pass through the ref - used for keyboard shortcut access to some buttons
diff --git a/apps/web/src/components/views/elements/AppTile.tsx b/apps/web/src/components/views/elements/AppTile.tsx
index c35a77489f..9f3a203666 100644
--- a/apps/web/src/components/views/elements/AppTile.tsx
+++ b/apps/web/src/components/views/elements/AppTile.tsx
@@ -63,7 +63,7 @@ import { toWidgetDescriptor } from "../../../modules/WidgetLifecycleApi";
 import { parseUrl } from "../../../utils/UrlUtils";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore.ts";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases.ts";
-import { WidgetContextMenu } from "../../../viewmodels/right-panel/WidgetContextMenuViewModel.tsx";
+import { WidgetContextMenu } from "../../../viewmodels/room/right-panel/WidgetContextMenuViewModel.tsx";
 
 // Note that there is advice saying allow-scripts shouldn't be used with allow-same-origin
 // because that would allow the iframe to programmatically remove the sandbox attribute, but
diff --git a/apps/web/src/components/views/elements/CopyableText.tsx b/apps/web/src/components/views/elements/CopyableText.tsx
index 8deaad1d4f..834386e450 100644
--- a/apps/web/src/components/views/elements/CopyableText.tsx
+++ b/apps/web/src/components/views/elements/CopyableText.tsx
@@ -44,6 +44,7 @@ export const CopyTextButton: React.FC<Pick<IProps, "getTextToCopy" | "className"
 
     return (
         <AccessibleButton
+            element="button"
             title={tooltip ?? _t("action|copy")}
             onClick={onCopyClickInternal}
             className={className}
@@ -62,12 +63,12 @@ const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border = true
     });
 
     return (
-        <div className={combinedClassName} {...props}>
+        <span className={combinedClassName} {...props}>
             {children}
             <CopyTextButton getTextToCopy={getTextToCopy} className="mx_CopyableText_copyButton">
                 <CopyIcon />
             </CopyTextButton>
-        </div>
+        </span>
     );
 };
 
diff --git a/apps/web/src/components/views/elements/LearnMore.tsx b/apps/web/src/components/views/elements/LearnMore.tsx
index 7e61bcc789..71ae561ed4 100644
--- a/apps/web/src/components/views/elements/LearnMore.tsx
+++ b/apps/web/src/components/views/elements/LearnMore.tsx
@@ -13,7 +13,7 @@ import Modal from "../../../Modal";
 import InfoDialog from "../dialogs/InfoDialog";
 import AccessibleButton, { type ButtonProps } from "./AccessibleButton";
 
-type Props = Omit<ButtonProps<"div">, "element" | "kind" | "onClick" | "className"> & {
+type Props = Omit<ButtonProps<"button">, "element" | "kind" | "onClick" | "className"> & {
     title: string;
     description: string | React.ReactNode;
 };
@@ -29,7 +29,13 @@ const LearnMore: React.FC<Props> = ({ title, description, ...rest }) => {
     };
 
     return (
-        <AccessibleButton {...rest} kind="link_inline" onClick={onClick} className="mx_LearnMore_button">
+        <AccessibleButton
+            {...rest}
+            element="button"
+            kind="link_inline"
+            onClick={onClick}
+            className="mx_LearnMore_button"
+        >
             {_t("action|learn_more")}
         </AccessibleButton>
     );
diff --git a/apps/web/src/components/views/elements/SettingsFlag.tsx b/apps/web/src/components/views/elements/SettingsFlag.tsx
index eb05301270..3e09b298ce 100644
--- a/apps/web/src/components/views/elements/SettingsFlag.tsx
+++ b/apps/web/src/components/views/elements/SettingsFlag.tsx
@@ -25,6 +25,7 @@ interface IProps {
     label?: string;
     isExplicit?: boolean;
     hideIfCannotSet?: boolean;
+    requires?: BooleanSettingKey[];
     onChange?(checked: boolean): void;
 }
 
@@ -45,6 +46,12 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
 
     public componentDidMount(): void {
         defaultWatchManager.watchSetting(this.props.name, this.props.roomId ?? null, this.onSettingChange);
+        if (this.props.requires) {
+            // If we have any dependencies for this feature, also watch those features to ensure we catch the disabled state.
+            for (const flag of this.props.requires) {
+                defaultWatchManager.watchSetting(flag, this.props.roomId ?? null, this.onSettingChange);
+            }
+        }
     }
 
     public componentWillUnmount(): void {
diff --git a/apps/web/src/components/views/elements/Spinner.tsx b/apps/web/src/components/views/elements/Spinner.tsx
index a3ba625e89..4df3177976 100644
--- a/apps/web/src/components/views/elements/Spinner.tsx
+++ b/apps/web/src/components/views/elements/Spinner.tsx
@@ -15,6 +15,11 @@ interface IProps {
     size?: number;
     message?: string;
     onFinished: any; // XXX: Spinner pretends to be a dialog so it must accept an onFinished, but it never calls it
+    /**
+     * Whether to render the content in a div or span.
+     * @default "div"
+     */
+    as?: "span" | "div";
 }
 
 export default class Spinner extends React.PureComponent<IProps> {
@@ -23,16 +28,16 @@ export default class Spinner extends React.PureComponent<IProps> {
     };
 
     public render(): React.ReactNode {
-        const { size, message } = this.props;
+        const { size, message, as: Component = "div" } = this.props;
         return (
-            <div className="mx_Spinner">
+            <Component className="mx_Spinner">
                 {message && (
                     <React.Fragment>
                         <div className="mx_Spinner_Msg">{message}</div>&nbsp;
                     </React.Fragment>
                 )}
                 <InlineSpinner size={size} aria-label={_t("common|loading")} role="progressbar" data-testid="spinner" />
-            </div>
+            </Component>
         );
     }
 }
diff --git a/apps/web/src/components/views/elements/StyledCheckbox.tsx b/apps/web/src/components/views/elements/StyledCheckbox.tsx
index e4cde65d16..97f2166cc1 100644
--- a/apps/web/src/components/views/elements/StyledCheckbox.tsx
+++ b/apps/web/src/components/views/elements/StyledCheckbox.tsx
@@ -14,6 +14,7 @@ interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
     inputRef?: Ref<HTMLInputElement>;
     id?: string;
     description?: ReactNode;
+    formWrap?: boolean;
 }
 
 const StyledCheckbox: React.FC<IProps> = ({
@@ -22,30 +23,36 @@ const StyledCheckbox: React.FC<IProps> = ({
     className,
     inputRef,
     description,
+    formWrap = true,
     ...otherProps
 }) => {
     const id = initialId || "checkbox_" + secureRandomString(10);
     const name = useId();
     const descriptionId = useId();
-    return (
-        <Form.Root>
-            <InlineField
-                className={className}
-                name={name}
-                control={
-                    <CheckboxInput
-                        ref={inputRef}
-                        aria-describedby={description ? descriptionId : undefined}
-                        id={id}
-                        {...otherProps}
-                    />
-                }
-            >
-                {label && <Label htmlFor={id}>{label}</Label>}
-                {description && <HelpMessage id={descriptionId}>{description}</HelpMessage>}
-            </InlineField>
-        </Form.Root>
+
+    const field = (
+        <InlineField
+            className={className}
+            name={name}
+            control={
+                <CheckboxInput
+                    ref={inputRef}
+                    aria-describedby={description ? descriptionId : undefined}
+                    id={id}
+                    {...otherProps}
+                />
+            }
+        >
+            {label && <Label htmlFor={id}>{label}</Label>}
+            {description && <HelpMessage id={descriptionId}>{description}</HelpMessage>}
+        </InlineField>
     );
+
+    if (formWrap) {
+        return <Form.Root>{field}</Form.Root>;
+    }
+
+    return field;
 };
 
 export default StyledCheckbox;
diff --git a/apps/web/src/components/views/messages/CodeBlock.tsx b/apps/web/src/components/views/messages/CodeBlock.tsx
index 026cbba886..04916a9140 100644
--- a/apps/web/src/components/views/messages/CodeBlock.tsx
+++ b/apps/web/src/components/views/messages/CodeBlock.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type JSX, useState } from "react";
 import classNames from "classnames";
-import { type DOMNode, Element as ParserElement, domToReact } from "html-react-parser";
+import { type DOMNode, type Element as ParserElement, domToReact } from "html-react-parser";
 import { textContent, getInnerHTML } from "domutils";
 import { CollapseIcon, CopyIcon, ExpandIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
@@ -113,7 +113,7 @@ const CodeBlock: React.FC<Props> = ({ preNode }) => {
     let content = domToReact(preNode.children as DOMNode[]);
 
     // Add code element if it's missing since we depend on it
-    if (!preNode.children.some((child) => child instanceof ParserElement && child.tagName.toUpperCase() === "CODE")) {
+    if (!preNode.children.some((child) => child.type === "tag" && child.tagName.toUpperCase() === "CODE")) {
         content = <code>{content}</code>;
     }
 
diff --git a/apps/web/src/components/views/messages/TextualBody.tsx b/apps/web/src/components/views/messages/TextualBody.tsx
index 7fadf33510..caf5df344d 100644
--- a/apps/web/src/components/views/messages/TextualBody.tsx
+++ b/apps/web/src/components/views/messages/TextualBody.tsx
@@ -301,6 +301,9 @@ class InnerTextualBody extends React.Component<Props> {
         const isCaption = [MsgType.Image, MsgType.File, MsgType.Audio, MsgType.Video].includes(
             content.msgtype as MsgType,
         );
+        const annotatedClassName = isEmote
+            ? "mx_EventTile_annotated mx_EventTile_annotatedInline"
+            : "mx_EventTile_annotated";
 
         const willHaveWrapper =
             this.props.replacingEventId || this.props.isSeeingThroughMessageHiddenForModeration || isEmote;
@@ -315,7 +318,7 @@ class InnerTextualBody extends React.Component<Props> {
 
         if (this.props.replacingEventId) {
             body = (
-                <div dir="auto" className="mx_EventTile_annotated">
+                <div dir="auto" className={annotatedClassName}>
                     {body}
                     {this.renderEditedMarker()}
                 </div>
@@ -323,7 +326,7 @@ class InnerTextualBody extends React.Component<Props> {
         }
         if (this.props.isSeeingThroughMessageHiddenForModeration) {
             body = (
-                <div dir="auto" className="mx_EventTile_annotated">
+                <div dir="auto" className={annotatedClassName}>
                     {body}
                     {this.renderPendingModerationMarker()}
                 </div>
diff --git a/apps/web/src/components/views/right_panel/ExtensionsCard.tsx b/apps/web/src/components/views/right_panel/ExtensionsCard.tsx
index 25aabadd55..51cd5599e9 100644
--- a/apps/web/src/components/views/right_panel/ExtensionsCard.tsx
+++ b/apps/web/src/components/views/right_panel/ExtensionsCard.tsx
@@ -31,7 +31,7 @@ import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import EmptyState from "./EmptyState";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents.ts";
 import { UIComponent } from "../../../settings/UIFeature.ts";
-import { WidgetContextMenu } from "../../../viewmodels/right-panel/WidgetContextMenuViewModel.tsx";
+import { WidgetContextMenu } from "../../../viewmodels/room/right-panel/WidgetContextMenuViewModel.tsx";
 
 interface Props {
     room: Room;
diff --git a/apps/web/src/components/views/right_panel/VerificationPanel.tsx b/apps/web/src/components/views/right_panel/VerificationPanel.tsx
index fa3a4dc4db..d369f98d3a 100644
--- a/apps/web/src/components/views/right_panel/VerificationPanel.tsx
+++ b/apps/web/src/components/views/right_panel/VerificationPanel.tsx
@@ -255,7 +255,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
         } else {
             body = (
                 <p>
-                    <Spinner />
+                    <Spinner as="span" />
                 </p>
             );
         }
diff --git a/apps/web/src/components/views/right_panel/WidgetCard.tsx b/apps/web/src/components/views/right_panel/WidgetCard.tsx
index b9c7c23957..12b65e0702 100644
--- a/apps/web/src/components/views/right_panel/WidgetCard.tsx
+++ b/apps/web/src/components/views/right_panel/WidgetCard.tsx
@@ -18,7 +18,7 @@ import { ContextMenuButton, useContextMenu } from "../../structures/ContextMenu"
 import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import Heading from "../typography/Heading";
-import { WidgetContextMenu } from "../../../viewmodels/right-panel/WidgetContextMenuViewModel";
+import { WidgetContextMenu } from "../../../viewmodels/room/right-panel/WidgetContextMenuViewModel";
 
 interface IProps {
     room: Room;
diff --git a/apps/web/src/components/views/room_settings/RoomPublishSetting.tsx b/apps/web/src/components/views/room_settings/RoomPublishSetting.tsx
index cac8a55e24..b23ecfc49c 100644
--- a/apps/web/src/components/views/room_settings/RoomPublishSetting.tsx
+++ b/apps/web/src/components/views/room_settings/RoomPublishSetting.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type ChangeEventHandler } from "react";
 import { JoinRule, Visibility } from "matrix-js-sdk/src/matrix";
-import { SettingsToggleInput } from "@vector-im/compound-web";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../languageHandler";
@@ -16,6 +16,7 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import DirectoryCustomisations from "../../../customisations/Directory";
 import Modal from "../../../Modal";
 import ErrorDialog from "../dialogs/ErrorDialog";
+import { onSubmitPreventDefault } from "../../../utils/form.ts";
 
 interface IProps {
     roomId: string;
@@ -90,16 +91,18 @@ export default class RoomPublishSetting extends React.PureComponent<IProps, ISta
         const enabled = canSetCanonicalAlias && (isRoomPublishable || this.state.isRoomPublished);
 
         return (
-            <SettingsToggleInput
-                name="room-publish"
-                checked={this.state.isRoomPublished}
-                onChange={this.onRoomPublishChange}
-                disabled={!enabled || this.state.busy}
-                disabledMessage={disabledMessage}
-                label={_t("room_settings|general|publish_toggle", {
-                    domain: client.getDomain(),
-                })}
-            />
+            <Form.Root onSubmit={onSubmitPreventDefault}>
+                <SettingsToggleInput
+                    name="room-publish"
+                    checked={this.state.isRoomPublished}
+                    onChange={this.onRoomPublishChange}
+                    disabled={!enabled || this.state.busy}
+                    disabledMessage={disabledMessage}
+                    label={_t("room_settings|general|publish_toggle", {
+                        domain: client.getDomain(),
+                    })}
+                />
+            </Form.Root>
         );
     }
 }
diff --git a/apps/web/src/components/views/room_settings/UrlPreviewSettings.tsx b/apps/web/src/components/views/room_settings/UrlPreviewSettings.tsx
deleted file mode 100644
index d200f487eb..0000000000
--- a/apps/web/src/components/views/room_settings/UrlPreviewSettings.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019 The Matrix.org Foundation C.I.C.
-Copyright 2018, 2019 New Vector Ltd
-Copyright 2017 Travis Ralston
-Copyright 2016 OpenMarket Ltd
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type ReactNode, type JSX } from "react";
-import { type Room } from "matrix-js-sdk/src/matrix";
-import { InlineSpinner } from "@vector-im/compound-web";
-
-import { _t } from "../../../languageHandler";
-import SettingsStore from "../../../settings/SettingsStore";
-import dis from "../../../dispatcher/dispatcher";
-import { Action } from "../../../dispatcher/actions";
-import { SettingLevel } from "../../../settings/SettingLevel";
-import SettingsFlag from "../elements/SettingsFlag";
-import SettingsFieldset from "../settings/SettingsFieldset";
-import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
-import { useIsEncrypted } from "../../../hooks/useIsEncrypted.ts";
-import { useMatrixClientContext } from "../../../contexts/MatrixClientContext.tsx";
-import { useSettingValueAt } from "../../../hooks/useSettings.ts";
-
-/**
- * The URL preview settings for a room
- */
-interface UrlPreviewSettingsProps {
-    /**
-     * The room.
-     */
-    room: Room;
-}
-
-export function UrlPreviewSettings({ room }: UrlPreviewSettingsProps): JSX.Element {
-    const { roomId } = room;
-    const matrixClient = useMatrixClientContext();
-    const isEncrypted = useIsEncrypted(matrixClient, room);
-    const isLoading = isEncrypted === null;
-
-    return (
-        <SettingsFieldset
-            legend={_t("room_settings|general|url_previews_section")}
-            description={!isLoading && <Description isEncrypted={isEncrypted} />}
-        >
-            {isLoading ? (
-                <InlineSpinner />
-            ) : (
-                <>
-                    <PreviewsForRoom isEncrypted={isEncrypted} roomId={roomId} />
-                    <SettingsFlag
-                        name={isEncrypted ? "urlPreviewsEnabled_e2ee" : "urlPreviewsEnabled"}
-                        level={SettingLevel.ROOM_DEVICE}
-                        roomId={roomId}
-                    />
-                </>
-            )}
-        </SettingsFieldset>
-    );
-}
-
-/**
- * Click handler for the user settings link
- * @param e
- */
-function onClickUserSettings(e: ButtonEvent): void {
-    e.preventDefault();
-    e.stopPropagation();
-    dis.fire(Action.ViewUserSettings);
-}
-
-/**
- * The description for the URL preview settings
- */
-interface DescriptionProps {
-    /**
-     * Whether the room is encrypted
-     */
-    isEncrypted: boolean;
-}
-
-function Description({ isEncrypted }: DescriptionProps): JSX.Element {
-    const urlPreviewsEnabled = useSettingValueAt(SettingLevel.ACCOUNT, "urlPreviewsEnabled");
-
-    let previewsForAccount: ReactNode | undefined;
-    if (isEncrypted) {
-        previewsForAccount = _t("room_settings|general|url_preview_encryption_warning");
-    } else {
-        const button = {
-            a: (sub: string) => (
-                <AccessibleButton kind="link_inline" onClick={onClickUserSettings}>
-                    {sub}
-                </AccessibleButton>
-            ),
-        };
-
-        previewsForAccount = urlPreviewsEnabled
-            ? _t("room_settings|general|user_url_previews_default_on", {}, button)
-            : _t("room_settings|general|user_url_previews_default_off", {}, button);
-    }
-
-    return (
-        <>
-            <p>{_t("room_settings|general|url_preview_explainer")}</p>
-            <p>{previewsForAccount}</p>
-        </>
-    );
-}
-
-/**
- * The description for the URL preview settings
- */
-interface PreviewsForRoomProps {
-    /**
-     * Whether the room is encrypted
-     */
-    isEncrypted: boolean;
-    /**
-     * The room ID
-     */
-    roomId: string;
-}
-
-function PreviewsForRoom({ isEncrypted, roomId }: PreviewsForRoomProps): JSX.Element | null {
-    const urlPreviewsEnabled = useSettingValueAt(
-        SettingLevel.ACCOUNT,
-        "urlPreviewsEnabled",
-        roomId,
-        /*explicit=*/ true,
-    );
-    if (isEncrypted) return null;
-
-    let previewsForRoom: ReactNode;
-    if (SettingsStore.canSetValue("urlPreviewsEnabled", roomId, SettingLevel.ROOM)) {
-        previewsForRoom = (
-            <SettingsFlag name="urlPreviewsEnabled" level={SettingLevel.ROOM} roomId={roomId} isExplicit={true} />
-        );
-    } else {
-        previewsForRoom = (
-            <div>
-                {urlPreviewsEnabled
-                    ? _t("room_settings|general|default_url_previews_on")
-                    : _t("room_settings|general|default_url_previews_off")}
-            </div>
-        );
-    }
-
-    return previewsForRoom;
-}
diff --git a/apps/web/src/components/views/settings/EventIndexPanel.tsx b/apps/web/src/components/views/settings/EventIndexPanel.tsx
index 24acd0f8a6..4cd7a7d015 100644
--- a/apps/web/src/components/views/settings/EventIndexPanel.tsx
+++ b/apps/web/src/components/views/settings/EventIndexPanel.tsx
@@ -220,7 +220,12 @@ export default class EventIndexPanel extends React.Component<EmptyObject, IState
                                         : _t("error|unknown")}
                                 </code>
                                 <p>
-                                    <AccessibleButton key="delete" kind="danger" onClick={this.confirmEventStoreReset}>
+                                    <AccessibleButton
+                                        element="button"
+                                        key="delete"
+                                        kind="danger"
+                                        onClick={this.confirmEventStoreReset}
+                                    >
                                         {_t("action|reset")}
                                     </AccessibleButton>
                                 </p>
diff --git a/apps/web/src/components/views/settings/Notifications.tsx b/apps/web/src/components/views/settings/Notifications.tsx
index 15e530c57b..c52753907d 100644
--- a/apps/web/src/components/views/settings/Notifications.tsx
+++ b/apps/web/src/components/views/settings/Notifications.tsx
@@ -52,6 +52,7 @@ import { SettingsSubsectionHeading } from "./shared/SettingsSubsectionHeading";
 import { SettingsSubsection } from "./shared/SettingsSubsection";
 import { doesRoomHaveUnreadMessages } from "../../../Unread";
 import SettingsFlag from "../elements/SettingsFlag";
+import { onSubmitPreventDefault } from "../../../utils/form.ts";
 
 // TODO: this "view" component still has far too much application logic in it,
 // which should be factored out to other files.
@@ -651,7 +652,7 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
 
         // If all the rules are inhibited, don't show anything.
         if (this.isInhibited) {
-            return masterSwitch;
+            return <Form.Root onSubmit={onSubmitPreventDefault}>{masterSwitch}</Form.Root>;
         }
 
         const emailSwitches = (this.state.threepids || [])
@@ -669,19 +670,21 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
 
         return (
             <SettingsSubsection>
-                {masterSwitch}
+                <Form.Root onSubmit={onSubmitPreventDefault}>
+                    {masterSwitch}
 
-                <SettingsFlag name="deviceNotificationsEnabled" level={SettingLevel.DEVICE} />
+                    <SettingsFlag name="deviceNotificationsEnabled" level={SettingLevel.DEVICE} />
 
-                {this.state.deviceNotificationsEnabled && (
-                    <>
-                        <SettingsFlag name="notificationsEnabled" level={SettingLevel.DEVICE} />
-                        <SettingsFlag name="notificationBodyEnabled" level={SettingLevel.DEVICE} />
-                        <SettingsFlag name="audioNotificationsEnabled" level={SettingLevel.DEVICE} />
-                    </>
-                )}
+                    {this.state.deviceNotificationsEnabled && (
+                        <>
+                            <SettingsFlag name="notificationsEnabled" level={SettingLevel.DEVICE} />
+                            <SettingsFlag name="notificationBodyEnabled" level={SettingLevel.DEVICE} />
+                            <SettingsFlag name="audioNotificationsEnabled" level={SettingLevel.DEVICE} />
+                        </>
+                    )}
 
-                {emailSwitches}
+                    {emailSwitches}
+                </Form.Root>
             </SettingsSubsection>
         );
     }
diff --git a/apps/web/src/components/views/settings/encryption/ChangeRecoveryKey.tsx b/apps/web/src/components/views/settings/encryption/ChangeRecoveryKey.tsx
index f62a429aa7..ca5651ee4d 100644
--- a/apps/web/src/components/views/settings/encryption/ChangeRecoveryKey.tsx
+++ b/apps/web/src/components/views/settings/encryption/ChangeRecoveryKey.tsx
@@ -47,7 +47,8 @@ type State =
     | "save_key_setup_flow"
     | "save_key_change_flow"
     | "confirm_key_setup_flow"
-    | "confirm_key_change_flow";
+    | "confirm_key_change_flow"
+    | "custom_recovery_flow";
 
 interface ChangeRecoveryKeyProps {
     /**
@@ -55,6 +56,15 @@ interface ChangeRecoveryKeyProps {
      * If false,the component will display the flow to set up a new recovery key.
      */
     userHasRecoveryKey: boolean;
+
+    /**
+     * If true, the user wants to enter a custom recovery key instead of having
+     * one generated. TODO: AJB: the state of this is probably mixed up with
+     * userHasRecoveryKey, so it would probably be better to make an enum or
+     * something.
+     */
+    changeToCustom?: boolean;
+
     /**
      * Called when the recovery key is successfully changed.
      */
@@ -70,14 +80,19 @@ interface ChangeRecoveryKeyProps {
  */
 export function ChangeRecoveryKey({
     userHasRecoveryKey,
+    changeToCustom,
     onFinish,
     onCancelClick,
 }: ChangeRecoveryKeyProps): JSX.Element | null {
     const matrixClient = useMatrixClientContext();
 
-    // If the user is setting up recovery for the first time, we first show them a panel explaining what
-    // "recovery" is about. Otherwise, we jump straight to showing the user the new key.
-    const [state, setState] = useState<State>(userHasRecoveryKey ? "save_key_change_flow" : "inform_user");
+    // If the user is changing to a custom recovery key, show them the panel
+    // allowing them to enter it. Otherwise, if the user is setting up recovery
+    // for the first time, we first show them a panel explaining what "recovery"
+    // is about. Otherwise, we jump straight to showing the user the new key.
+    const [state, setState] = useState<State>(
+        changeToCustom ? "custom_recovery_flow" : userHasRecoveryKey ? "save_key_change_flow" : "inform_user",
+    );
 
     const onCancelClickWrapper = useCallback(() => {
         logger.debug("ChangeRecoveryKey: user cancelled");
@@ -96,6 +111,7 @@ export function ChangeRecoveryKey({
             content = (
                 <InformationPanel
                     onContinueClick={() => setState("save_key_setup_flow")}
+                    onCustomClick={() => setState("custom_recovery_flow")}
                     onCancelClick={onCancelClickWrapper}
                 />
             );
@@ -172,6 +188,69 @@ export function ChangeRecoveryKey({
                     }
                 />
             );
+            break;
+        case "custom_recovery_flow":
+            // Show a custom passphrase box ask the user to enter it.
+            // TODO: AJB: copied and pasted from confirm_key_setup_flow
+            // TODO: AJB: no strength indicator as shown in designs: https://www.figma.com/design/qTWRfItpO3RdCjnTKPu4mL/Settings?node-id=4042-60586&t=qPSzLrnaXepwOY84-0
+            content = (
+                <KeyForm
+                    // encodedPrivateKey is always defined, the optional typing is incorrect
+                    recoveryKey={null}
+                    onCancelClick={onCancelClickWrapper}
+                    onSubmit={async (filledKey) => {
+                        const crypto = matrixClient.getCrypto();
+                        if (!crypto) return onFinish();
+
+                        // Since we set recoveryKey to null, we should always receive a filledKey.
+                        // If not, bail out
+                        if (filledKey === undefined) {
+                            logger.error("Unexpectedly received an undefined filledKey in custom_recover_flow");
+                            return onFinish();
+                        }
+
+                        try {
+                            const deviceListener = DeviceListener.sharedInstance();
+
+                            // we need to call keyStorageOutOfSyncNeedsBackupReset here because
+                            // deviceListener.whilePaused() sets its client to undefined, so
+                            // keyStorageOutOfSyncNeedsBackupReset won't be able to check
+                            // the backup state.
+                            const needsBackupReset = await deviceListener.keyStorageOutOfSyncNeedsBackupReset(true);
+                            logger.debug(
+                                `ChangeRecoveryKey: user entered recovery passphrase; now doing change. needsBackupReset: ${needsBackupReset}`,
+                            );
+                            await deviceListener.whilePaused(async () => {
+                                // We need to enable the cache to avoid to prompt the user to enter the new key
+                                // when we will try to access the secret storage during the bootstrap
+                                await withSecretStorageKeyCache(async () => {
+                                    // TODO: AJB: generate key
+                                    const generatedKey = crypto.createRecoveryKeyFromPassphrase(filledKey);
+
+                                    await crypto.bootstrapSecretStorage({
+                                        setupNewSecretStorage: true,
+                                        createSecretStorageKey: async () => generatedKey,
+                                    });
+                                    // Reset the key backup if needed
+                                    if (needsBackupReset) {
+                                        await resetKeyBackupAndWait(crypto);
+                                    }
+                                    await initialiseDehydrationIfEnabled(matrixClient, { createNewKey: true });
+                                });
+                            });
+
+                            // Record the fact that the user explicitly enabled recovery.
+                            await matrixClient.setAccountData(RECOVERY_ACCOUNT_DATA_KEY, { enabled: true });
+
+                            onFinish();
+                        } catch (e) {
+                            logErrorAndShowErrorDialog("Failed to set up secret storage", e);
+                        }
+                    }}
+                    submitButtonLabel="Continue"
+                />
+            );
+            break;
     }
 
     const pages = [
@@ -246,14 +325,31 @@ function getLabels(state: State): Labels {
                 title: _t("settings|encryption|recovery|change_recovery_confirm_title"),
                 description: _t("settings|encryption|recovery|change_recovery_confirm_description"),
             };
+        case "custom_recovery_flow":
+            // TODO: AJB: hard-coded strings
+            return {
+                title: "Enter a custom recovery key",
+                description:
+                    "Use a custom recovery key if you do not have a safe place to save it, and you have to memorize it.",
+            };
     }
 }
 
 interface InformationPanelProps {
     /**
-     * Called when the continue button is clicked.
+     * Called when the "Generate recovery key" button is clicked.
+     *
+     * TODO: AJB: rename this
      */
     onContinueClick: MouseEventHandler<HTMLButtonElement>;
+
+    /**
+     * Called when the "Generate recovery key" button is clicked.
+     *
+     * TODO: AJB: rename this
+     */
+    onCustomClick: MouseEventHandler<HTMLButtonElement>;
+
     /**
      * Called when the cancel button is clicked.
      */
@@ -263,14 +359,18 @@ interface InformationPanelProps {
 /**
  * The panel to display information about the recovery key.
  */
-function InformationPanel({ onContinueClick, onCancelClick }: InformationPanelProps): JSX.Element {
+function InformationPanel({ onContinueClick, onCustomClick, onCancelClick }: InformationPanelProps): JSX.Element {
+    // TODO: AJB: hard-coded strings
     return (
         <>
             <Text as="span" weight="medium" className="mx_InformationPanel_description">
                 {_t("settings|encryption|recovery|set_up_recovery_secondary_description")}
             </Text>
             <EncryptionCardButtons>
-                <Button onClick={onContinueClick}>{_t("action|continue")}</Button>
+                <Button onClick={onContinueClick}>Generate recovery key</Button>
+                <Button kind="secondary" onClick={onCustomClick}>
+                    Custom recovery key
+                </Button>
                 <Button kind="tertiary" onClick={onCancelClick}>
                     {_t("action|cancel")}
                 </Button>
@@ -333,12 +433,14 @@ interface KeyFormProps {
     onCancelClick: MouseEventHandler;
     /**
      * Called when the form is submitted.
+     * TODO: AJB: I made this take the entered key, which may not be a good choice
      */
-    onSubmit: () => Promise<void>;
+    onSubmit: (filledKey?: string) => Promise<void>;
     /**
      * The recovery key to confirm.
+     * TODO: AJB: I made this nullable, which may not be a good choice
      */
-    recoveryKey: string;
+    recoveryKey: string | null;
     /**
      * The label for the submit button.
      */
@@ -366,7 +468,8 @@ function KeyForm({ onCancelClick, onSubmit, recoveryKey, submitButtonLabel }: Ke
                     return;
                 }
                 setIsKeyChangeInProgress(true);
-                onSubmit().finally(() => {
+                const filledKey = new FormData(evt.currentTarget).get("recoveryKey") as string | "";
+                onSubmit(filledKey).finally(() => {
                     setIsKeyChangeInProgress(false);
                 });
             }}
@@ -375,8 +478,14 @@ function KeyForm({ onCancelClick, onSubmit, recoveryKey, submitButtonLabel }: Ke
                 evt.stopPropagation();
 
                 // We don't have any file in the form, we can cast it as string safely
-                const filledKey = new FormData(evt.currentTarget).get("recoveryKey") as string | "";
-                setIsKeyValid(filledKey.trim() === recoveryKey);
+                const filledKeyRaw = new FormData(evt.currentTarget).get("recoveryKey") as string | "";
+                const filledKey = filledKeyRaw.trim();
+
+                // TODO: AJB: validate a good passphrase here
+                const isValidPassphrase = recoveryKey === null && filledKey.length > 0;
+                const isCorrectRecoveryKey = filledKey === recoveryKey;
+
+                setIsKeyValid(isValidPassphrase || isCorrectRecoveryKey);
             }}
         >
             <Field name="recoveryKey" serverInvalid={isKeyInvalidAndFilled}>
diff --git a/apps/web/src/components/views/settings/encryption/EncryptionCard.tsx b/apps/web/src/components/views/settings/encryption/EncryptionCard.tsx
index 89ce2cbb17..3d96979f96 100644
--- a/apps/web/src/components/views/settings/encryption/EncryptionCard.tsx
+++ b/apps/web/src/components/views/settings/encryption/EncryptionCard.tsx
@@ -46,7 +46,7 @@ export function EncryptionCard({
     return (
         <div className={classNames("mx_EncryptionCard", className)}>
             <div className="mx_EncryptionCard_header">
-                <BigIcon destructive={destructive}>
+                <BigIcon kind={destructive ? "critical" : "primary"}>
                     <Icon />
                 </BigIcon>
                 <Heading as="h2" size="sm" weight="semibold">
diff --git a/apps/web/src/components/views/settings/encryption/RecoveryPanel.tsx b/apps/web/src/components/views/settings/encryption/RecoveryPanel.tsx
index 9c7f12efc8..735276c2fc 100644
--- a/apps/web/src/components/views/settings/encryption/RecoveryPanel.tsx
+++ b/apps/web/src/components/views/settings/encryption/RecoveryPanel.tsx
@@ -31,12 +31,17 @@ interface RecoveryPanelProps {
      *                      "Set up recovery" rather than "Change recovery key").
      */
     onChangeRecoveryKeyClick: (setupNewKey: boolean) => void;
+
+    /**
+     * Callback for when the user wants to change their recovery key by entering a new custom one.
+     */
+    onCustomRecoveryKeyClick: () => void;
 }
 
 /**
  * This component allows the user to set up or change their recovery key.
  */
-export function RecoveryPanel({ onChangeRecoveryKeyClick }: RecoveryPanelProps): JSX.Element {
+export function RecoveryPanel({ onChangeRecoveryKeyClick, onCustomRecoveryKeyClick }: RecoveryPanelProps): JSX.Element {
     const matrixClient = useMatrixClientContext();
     const state = useAsyncMemo<State>(
         async () => {
@@ -64,9 +69,14 @@ export function RecoveryPanel({ onChangeRecoveryKeyClick }: RecoveryPanelProps):
             break;
         case "good":
             content = (
-                <Button size="sm" kind="secondary" Icon={KeyIcon} onClick={() => onChangeRecoveryKeyClick(false)}>
-                    {_t("settings|encryption|recovery|change_recovery_key")}
-                </Button>
+                <>
+                    <Button size="sm" kind="secondary" Icon={KeyIcon} onClick={() => onChangeRecoveryKeyClick(false)}>
+                        Generate new recovery key
+                    </Button>
+                    <Button size="sm" kind="secondary" Icon={KeyIcon} onClick={() => onCustomRecoveryKeyClick()}>
+                        Enter new custom recovery key
+                    </Button>
+                </>
             );
     }
 
diff --git a/apps/web/src/components/views/settings/notifications/NotificationSettings2.tsx b/apps/web/src/components/views/settings/notifications/NotificationSettings2.tsx
index c316d46129..7619e5acea 100644
--- a/apps/web/src/components/views/settings/notifications/NotificationSettings2.tsx
+++ b/apps/web/src/components/views/settings/notifications/NotificationSettings2.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type JSX, useState } from "react";
-import { SettingsToggleInput } from "@vector-im/compound-web";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 
 import NewAndImprovedIcon from "../../../../../res/img/element-icons/new-and-improved.svg";
 import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
@@ -33,6 +33,7 @@ import { SettingsSubsection } from "../shared/SettingsSubsection";
 import { NotificationPusherSettings } from "./NotificationPusherSettings";
 import SettingsFlag from "../../elements/SettingsFlag";
 import { SettingsSubsectionHeading } from "../shared/SettingsSubsectionHeading";
+import { onSubmitPreventDefault } from "../../../../utils/form.ts";
 
 enum NotificationDefaultLevels {
     AllMessages = "all_messages",
@@ -111,7 +112,7 @@ export default function NotificationSettings2(): JSX.Element {
                 </SettingsBanner>
             )}
             <SettingsSection>
-                <div className="mx_SettingsSubsection_content mx_NotificationSettings2_flags">
+                <Form.Root className="mx_SettingsSubsection_content" onSubmit={onSubmitPreventDefault}>
                     <SettingsToggleInput
                         name="enable_notifications_account"
                         label={_t("settings|notifications|enable_notifications_account")}
@@ -131,7 +132,7 @@ export default function NotificationSettings2(): JSX.Element {
                         level={SettingLevel.DEVICE}
                     />
                     <SettingsFlag name="audioNotificationsEnabled" level={SettingLevel.DEVICE} />
-                </div>
+                </Form.Root>
                 <SettingsSubsection
                     heading={
                         <SettingsSubsectionHeading
@@ -346,8 +347,10 @@ export default function NotificationSettings2(): JSX.Element {
                         placeholder={_t("notifications|keyword_new")}
                     />
 
-                    <SettingsFlag name="Notifications.showbold" level={SettingLevel.DEVICE} />
-                    <SettingsFlag name="Notifications.tac_only_notifications" level={SettingLevel.DEVICE} />
+                    <Form.Root onSubmit={onSubmitPreventDefault}>
+                        <SettingsFlag name="Notifications.showbold" level={SettingLevel.DEVICE} />
+                        <SettingsFlag name="Notifications.tac_only_notifications" level={SettingLevel.DEVICE} />
+                    </Form.Root>
                 </SettingsSubsection>
                 <NotificationPusherSettings />
                 <SettingsSubsection heading={_t("settings|notifications|quick_actions_section")}>
diff --git a/apps/web/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx
index 4b04e4bcf3..224a70e62d 100644
--- a/apps/web/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx
@@ -8,21 +8,17 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ContextType } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
-import { Form } from "@vector-im/compound-web";
 
 import { _t } from "../../../../../languageHandler";
 import RoomProfileSettings from "../../../room_settings/RoomProfileSettings";
 import AccessibleButton, { type ButtonEvent } from "../../../elements/AccessibleButton";
 import dis from "../../../../../dispatcher/dispatcher";
 import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
-import SettingsStore from "../../../../../settings/SettingsStore";
-import { UIFeature } from "../../../../../settings/UIFeature";
 import AliasSettings from "../../../room_settings/AliasSettings";
 import PosthogTrackers from "../../../../../PosthogTrackers";
 import { SettingsSubsection } from "../../shared/SettingsSubsection";
 import SettingsTab from "../SettingsTab";
 import { SettingsSection } from "../../shared/SettingsSection";
-import { UrlPreviewSettings } from "../../../room_settings/UrlPreviewSettings";
 import { MediaPreviewAccountSettings } from "../user/MediaPreviewAccountSettings";
 
 interface IProps {
@@ -62,10 +58,6 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
         const canSetCanonical = room.currentState.mayClientSendStateEvent("m.room.canonical_alias", client);
         const canonicalAliasEv = room.currentState.getStateEvents("m.room.canonical_alias", "") ?? undefined;
 
-        const urlPreviewSettings = SettingsStore.getValue(UIFeature.URLPreviews) ? (
-            <UrlPreviewSettings room={room} />
-        ) : null;
-
         let leaveSection;
         if (room.getMyMembership() === KnownMembership.Join) {
             leaveSection = (
@@ -79,33 +71,25 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
 
         return (
             <SettingsTab data-testid="General">
-                <Form.Root
-                    onSubmit={(evt) => {
-                        evt.preventDefault();
-                        evt.stopPropagation();
-                    }}
-                >
-                    <SettingsSection heading={_t("common|general")}>
-                        <RoomProfileSettings roomId={room.roomId} />
-                    </SettingsSection>
+                <SettingsSection heading={_t("common|general")}>
+                    <RoomProfileSettings roomId={room.roomId} />
+                </SettingsSection>
 
-                    <SettingsSection heading={_t("room_settings|general|aliases_section")}>
-                        <AliasSettings
-                            roomId={room.roomId}
-                            canSetCanonicalAlias={canSetCanonical}
-                            canSetAliases={canSetAliases}
-                            canonicalAliasEvent={canonicalAliasEv}
-                        />
-                    </SettingsSection>
+                <SettingsSection heading={_t("room_settings|general|aliases_section")}>
+                    <AliasSettings
+                        roomId={room.roomId}
+                        canSetCanonicalAlias={canSetCanonical}
+                        canSetAliases={canSetAliases}
+                        canonicalAliasEvent={canonicalAliasEv}
+                    />
+                </SettingsSection>
 
-                    <SettingsSection heading={_t("room_settings|general|other_section")}>
-                        {urlPreviewSettings}
-                        <SettingsSubsection heading={_t("common|moderation_and_safety")} legacy={false}>
-                            <MediaPreviewAccountSettings roomId={room.roomId} />
-                        </SettingsSubsection>
-                        {leaveSection}
-                    </SettingsSection>
-                </Form.Root>
+                <SettingsSection heading={_t("room_settings|general|other_section")}>
+                    <SettingsSubsection heading={_t("common|moderation_and_safety")} legacy={false}>
+                        <MediaPreviewAccountSettings roomId={room.roomId} />
+                    </SettingsSubsection>
+                    {leaveSection}
+                </SettingsSection>
             </SettingsTab>
         );
     }
diff --git a/apps/web/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
index 2c4244cba6..ea85464baa 100644
--- a/apps/web/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
@@ -138,6 +138,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
                                 {
                                     a: (sub) => (
                                         <AccessibleButton
+                                            element="a"
                                             kind="link_inline"
                                             onClick={() => {
                                                 dialog.close();
@@ -335,6 +336,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
                             {_t("room_settings|security|encrypted_room_public_confirm_description_2", undefined, {
                                 a: (sub) => (
                                     <AccessibleButton
+                                        element="a"
                                         kind="link_inline"
                                         onClick={(): void => {
                                             dialog.close();
diff --git a/apps/web/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx
index a41e257b8c..0b5160675f 100644
--- a/apps/web/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx
@@ -43,6 +43,7 @@ import { useKeyStoragePanelViewModel } from "../../../../viewmodels/settings/enc
 export type State =
     | "main"
     | "change_recovery_key"
+    | "change_to_custom_recovery_key"
     | "set_recovery_key"
     | "reset_identity_compromised"
     | "reset_identity_forgot"
@@ -114,6 +115,7 @@ export function EncryptionUserSettingsTab({ initialState = "main" }: Readonly<Pr
                                         onChangeRecoveryKeyClick={(setupNewKey) =>
                                             setupNewKey ? setState("set_recovery_key") : setState("change_recovery_key")
                                         }
+                                        onCustomRecoveryKeyClick={() => setState("change_to_custom_recovery_key")}
                                     />
                                     <Separator kind="section" />
                                 </>
@@ -126,9 +128,11 @@ export function EncryptionUserSettingsTab({ initialState = "main" }: Readonly<Pr
             break;
         case "change_recovery_key":
         case "set_recovery_key":
+        case "change_to_custom_recovery_key":
             content = (
                 <ChangeRecoveryKey
                     userHasRecoveryKey={state === "change_recovery_key"}
+                    changeToCustom={state === "change_to_custom_recovery_key"}
                     onCancelClick={() => setState("main")}
                     onFinish={() => setState("main")}
                 />
diff --git a/apps/web/src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx
index 6d6c25e122..b63e790736 100644
--- a/apps/web/src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx
@@ -7,7 +7,6 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { Form } from "@vector-im/compound-web";
 
 import { Features } from "../../../../../settings/Settings";
 import SettingsStore from "../../../../../settings/SettingsStore";
@@ -22,20 +21,13 @@ export default class NotificationUserSettingsTab extends React.Component {
 
         return (
             <SettingsTab>
-                <Form.Root
-                    onSubmit={(evt) => {
-                        evt.preventDefault();
-                        evt.stopPropagation();
-                    }}
-                >
-                    {newNotificationSettingsEnabled ? (
-                        <NotificationSettings2 />
-                    ) : (
-                        <SettingsSection>
-                            <Notifications />
-                        </SettingsSection>
-                    )}
-                </Form.Root>
+                {newNotificationSettingsEnabled ? (
+                    <NotificationSettings2 />
+                ) : (
+                    <SettingsSection>
+                        <Notifications />
+                    </SettingsSection>
+                )}
             </SettingsTab>
         );
     }
diff --git a/apps/web/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
index cab58ee085..51ccb7bd3e 100644
--- a/apps/web/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
@@ -147,11 +147,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
         "showCodeLineNumbers",
     ];
 
-    private static IMAGES_AND_VIDEOS_SETTINGS: BooleanSettingKey[] = [
-        "urlPreviewsEnabled",
-        "autoplayGifs",
-        "autoplayVideo",
-    ];
+    private static IMAGES_AND_VIDEOS_SETTINGS: BooleanSettingKey[] = ["autoplayGifs", "autoplayVideo"];
 
     private static TIMELINE_SETTINGS: BooleanSettingKey[] = [
         "showTypingNotifications",
@@ -350,6 +346,19 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                         {this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)}
                     </SettingsSubsection>
 
+                    <SettingsSubsection
+                        heading={_t("settings|preferences|link_previews_heading")}
+                        description={_t("settings|preferences|link_previews_description")}
+                        formWrap
+                    >
+                        <SettingsFlag name="urlPreviewsEnabled" level={SettingLevel.DEVICE} />
+                        <SettingsFlag
+                            name="urlPreviewsEnabled_e2ee"
+                            level={SettingLevel.DEVICE}
+                            requires={["urlPreviewsEnabled"]}
+                        />
+                    </SettingsSubsection>
+
                     <SettingsSubsection heading={_t("settings|preferences|media_heading")} formWrap>
                         {this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
                     </SettingsSubsection>
diff --git a/apps/web/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx b/apps/web/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
index 8aeae9234a..caa379ba2e 100644
--- a/apps/web/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
+++ b/apps/web/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
@@ -184,14 +184,7 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
                     </Form.Root>
                 </SettingsFieldset>
 
-                <Form.Root
-                    onSubmit={(evt) => {
-                        evt.preventDefault();
-                        evt.stopPropagation();
-                    }}
-                >
-                    {addressesSection}
-                </Form.Root>
+                {addressesSection}
             </SettingsSection>
         </SettingsTab>
     );
diff --git a/apps/web/src/device-listener/DeviceListenerCurrentDevice.ts b/apps/web/src/device-listener/DeviceListenerCurrentDevice.ts
index 7dbb976489..0460d82366 100644
--- a/apps/web/src/device-listener/DeviceListenerCurrentDevice.ts
+++ b/apps/web/src/device-listener/DeviceListenerCurrentDevice.ts
@@ -228,21 +228,25 @@ export class DeviceListenerCurrentDevice {
                     logSpan.info("No default 4S key but backup disabled: no toast needed");
                     await this.setDeviceState("ok", logSpan);
                 }
-            } else {
-                // If we get here, then we are verified, have key backup, and
-                // 4S, but allSystemsReady is false, which means that either
-                // secretStorageStatus.ready is false (which means that 4S
-                // doesn't have all the secrets), or we don't have the backup
-                // key cached locally. If any of the cross-signing keys are
-                // missing locally, that is handled by the
-                // `!allCrossSigningSecretsCached` branch above.
-                logSpan.warn("4S is missing secrets or backup key not cached", {
+            } else if (!recoveryIsOk) {
+                logSpan.warn("4S is missing secrets: setting state to KEY_STORAGE_OUT_OF_SYNC", {
                     secretStorageStatus,
                     allCrossSigningSecretsCached,
                     isCurrentDeviceTrusted,
                     keyBackupDownloadIsOk,
                 });
                 await this.setDeviceState("key_storage_out_of_sync", logSpan);
+            } else if (!keyBackupDownloadIsOk) {
+                logSpan.warn("Backup key is not cached locally: setting state to KEY_STORAGE_OUT_OF_SYNC", {
+                    secretStorageStatus,
+                    allCrossSigningSecretsCached,
+                    isCurrentDeviceTrusted,
+                    keyBackupDownloadIsOk,
+                });
+                await this.setDeviceState("key_storage_out_of_sync", logSpan);
+            } else {
+                // We should not get here
+                logSpan.error("DeviceListenerCurrentDevice: allSystemsReady was false, but no case matched.");
             }
         }
     }
diff --git a/apps/web/src/i18n/strings/cs.json b/apps/web/src/i18n/strings/cs.json
index 218fa3b6c4..3f291cac32 100644
--- a/apps/web/src/i18n/strings/cs.json
+++ b/apps/web/src/i18n/strings/cs.json
@@ -2227,8 +2227,6 @@
             "aliases_section": "Adresy místnosti",
             "avatar_field_label": "Avatar místnosti",
             "canonical_alias_field_label": "Hlavní adresa",
-            "default_url_previews_off": "Ve výchozím nastavení jsou náhledy URL adres zakázané pro členy této místnosti.",
-            "default_url_previews_on": "Ve výchozím nastavení jsou náhledy URL adres povolené pro členy této místnosti.",
             "description_space": "Upravte nastavení týkající se vašeho prostoru.",
             "error_creating_alias_description": "Při vytváření adresy došlo k chybě. Mohl to zakázat server, nebo mohlo dojít k dočasnému selhání.",
             "error_creating_alias_title": "Chyba při tvorbě adresy",
@@ -2259,12 +2257,7 @@
             "published_aliases_explainer_space": "Zveřejněné adresy může použít kdokoli na jakémkoli serveru, aby se připojil k vašemu prostoru.",
             "published_aliases_section": "Publikovaná adresa",
             "save": "Uložit změny",
-            "topic_field_label": "Téma místnosti",
-            "url_preview_encryption_warning": "V šifrovaných místnostech, jako je tato, jsou URL náhledy ve výchozím nastavení vypnuté, aby bylo možné zajistit, že váš domovský server neshromažďuje informace o odkazech, které v této místnosti vidíte.",
-            "url_preview_explainer": "Když někdo ve zprávě pošle URL adresu, může být zobrazen její náhled obsahující informace jako titulek, popis a obrázek z cílové stránky.",
-            "url_previews_section": "Náhledy webových adres",
-            "user_url_previews_default_off": "<a>Vypnuli</a> jste automatické náhledy webových adres.",
-            "user_url_previews_default_on": "<a>Zapnuli</a> jste automatické náhledy webových adres."
+            "topic_field_label": "Téma místnosti"
         },
         "notifications": {
             "browse_button": "Procházet",
@@ -2687,8 +2680,6 @@
             "username": "Uživatelské jméno"
         },
         "inline_url_previews_default": "Nastavit povolení náhledů URL adres jako výchozí",
-        "inline_url_previews_room": "Povolit náhledy URL adres pro členy této místnosti jako výchozí",
-        "inline_url_previews_room_account": "Povolit náhledy URL adres pro tuto místnost (ovlivňuje pouze vás)",
         "insert_trailing_colon_mentions": "Vložit dvojtečku za zmínku o uživateli na začátku zprávy",
         "invite_controls": {
             "default_label": "Povolit uživatelům pozvat vás do místností"
diff --git a/apps/web/src/i18n/strings/cy.json b/apps/web/src/i18n/strings/cy.json
index 4277fe0f92..00df88dfcd 100644
--- a/apps/web/src/i18n/strings/cy.json
+++ b/apps/web/src/i18n/strings/cy.json
@@ -2227,8 +2227,6 @@
             "aliases_section": "Cyfeiriadau Ystafell",
             "avatar_field_label": "Afatar ystafell",
             "canonical_alias_field_label": "Prif gyfeiriad",
-            "default_url_previews_off": "Mae rhagolygon URL wedi'u hanalluogi fel rhagosodiad ar gyfer cyfranogwyr yn yr ystafell hon.",
-            "default_url_previews_on": "Mae rhagolygon URL wedi'u galluogi fel rhagosodiad ar gyfer cyfranogwyr yn yr ystafell hon.",
             "description_space": "Golygu gosodiadau sy'n ymwneud â'ch gofod.",
             "error_creating_alias_description": "Bu gwall wrth greu'r cyfeiriad hwnnw. Mae'n bosib na chaiff ei ganiatáu gan y gweinydd neu fe ddigwyddodd methiant dros dro.",
             "error_creating_alias_title": "Gwall wrth greu cyfeiriad",
@@ -2259,12 +2257,7 @@
             "published_aliases_explainer_space": "Gall unrhyw un ar unrhyw weinydd ddefnyddio cyfeiriadau cyhoeddedig i ymuno â'ch gofod.",
             "published_aliases_section": "Cyfeiriadau Cyhoeddedig",
             "save": "Cadw'r Newidiadau",
-            "topic_field_label": "Pwnc yr Ystafell",
-            "url_preview_encryption_warning": "Mewn ystafelloedd wedi'u hamgryptio, fel yr un hon, mae rhagolygon URL yn cael eu hanalluogi fel rhagosodiad i sicrhau na all eich gweinydd cartref (lle mae'r rhagolygon yn cael eu cynhyrchu) gasglu gwybodaeth am ddolenni welwch yn yr ystafell hon.",
-            "url_preview_explainer": "Pan fydd rhywun yn rhoi URL yn eu neges, mae modd dangos rhagolwg URL i roi mwy o wybodaeth am y ddolen honno fel y teitl, disgrifiad, a delwedd o'r wefan.",
-            "url_previews_section": "Rhagolygon URL",
-            "user_url_previews_default_off": "Rydych wedi <a>analluogi</a> rhagolygon URL fel rhagosodiad.",
-            "user_url_previews_default_on": "Rydych chi wedi <a>galluogi</a> rhagolygon URL fel rhagosodiad."
+            "topic_field_label": "Pwnc yr Ystafell"
         },
         "notifications": {
             "browse_button": "Pori",
@@ -2685,8 +2678,6 @@
             "username": "Enw defnyddiwr"
         },
         "inline_url_previews_default": "Galluogi rhagolygon URL mewnol fel rhagosodiad",
-        "inline_url_previews_room": "Galluogi rhagolygon URL fel rhagosodiad ar gyfer cyfranogwyr yn yr ystafell hon",
-        "inline_url_previews_room_account": "Galluogi rhagolygon URL ar gyfer yr ystafell hon (yn effeithio arnoch chi yn unig)",
         "insert_trailing_colon_mentions": "Mewnosod colon sy'n llusgo ar ôl i'r defnyddiwr sôn amdano ar ddechrau neges",
         "invite_controls": {
             "default_label": "Caniatáu i ddefnyddwyr eich gwahodd i ystafelloedd"
diff --git a/apps/web/src/i18n/strings/da.json b/apps/web/src/i18n/strings/da.json
index 1229114876..d10c9d15c7 100644
--- a/apps/web/src/i18n/strings/da.json
+++ b/apps/web/src/i18n/strings/da.json
@@ -114,7 +114,7 @@
         "show_advanced": "Vis avanceret",
         "show_all": "Vis alle",
         "sign_in": "Log ind",
-        "sign_out": "Log ud",
+        "sign_out": "Fjern denne enhed",
         "skip": "Spring over",
         "start": "Start",
         "start_chat": "Start samtale",
@@ -705,6 +705,7 @@
     "decline_invitation_dialog": {
         "title": "Afvis invitation"
     },
+    "desktop_default_device_name": "%(brand)s Skrivebord: %(platformName)s",
     "devtools": {
         "active_widgets": "Aktive widgets",
         "category_other": "Andre",
@@ -979,6 +980,8 @@
         "unknown_error_code": "Ukendt fejlkode",
         "update_power_level": "Kunne ikke ændre effektniveau"
     },
+    "error_app_open_in_another_tab_title": "%(brand)s er åbnet i et andet faneblad",
+    "error_app_opened_in_another_window": "%(brand)s er åben i et andet vindue. Klik på \"%(label)s\" for at bruge %(brand)s her og frakoble det andet vindue.",
     "error_database_closed_description": {
         "for_desktop": "Din disk er måske fyldt. Vær venlig at rydde noget plads og genindlæse.",
         "for_web": "Hvis du har ryddet browserdata, er denne meddelelse forventet. %(brand)s kan også være åben i en anden fane, eller din disk er fuld. Ryd venligst lidt plads og genindlæs"
@@ -1146,6 +1149,7 @@
         "continue": "Fortsæt alligevel",
         "linux": "Linux",
         "macos": "Mac",
+        "title": "%(brand)s understøtter ikke denne browser",
         "windows_64bit": "Windows (64-bit)",
         "windows_arm_64bit": "Windows (ARM 64-bit)"
     },
@@ -1938,8 +1942,6 @@
             "aliases_section": "Rummets adresser",
             "avatar_field_label": "Avatar for rummet",
             "canonical_alias_field_label": "Hovedadresse",
-            "default_url_previews_off": "URL-forhåndsvisninger er som standard deaktiveret for deltagere i dette rum.",
-            "default_url_previews_on": "URL-forhåndsvisninger er som standard aktiveret for deltagere i dette rum.",
             "description_space": "Redigér indstillinger for din klynge.",
             "error_creating_alias_description": "Der opstod en fejl under oprettelsen af ​​adressen. Den er muligvis ikke tilladt af serveren, eller der er opstået en midlertidig fejl.",
             "error_creating_alias_title": "Fejl ved oprettelse af adresse",
@@ -1966,12 +1968,7 @@
             "published_aliases_explainer_space": "Publicerede adresser kan bruges af alle til at tilslutte sig din klynge.",
             "published_aliases_section": "Offentliggjorte adresser",
             "save": "Gem ændringer",
-            "topic_field_label": "Rummets emne",
-            "url_preview_encryption_warning": "I krypterede rum, som dette, er URL-forhåndsvisninger som standard deaktiveret for at sikre, at din hjemmeserver (hvor forhåndsvisningerne genereres) ikke kan indsamle oplysninger om links, du ser i dette rum.",
-            "url_preview_explainer": "Når nogen indtaster en URL i sin besked, kan der vises en forhåndsvisning af URL'en, der giver flere oplysninger om linket, f.eks. titel, beskrivelse og et billede fra webstedet.",
-            "url_previews_section": "URL-forhåndsvisninger",
-            "user_url_previews_default_off": "Du har <a>deaktiveret</a> URL-forhåndsvisning som standard.",
-            "user_url_previews_default_on": "Du har <a>aktiveret</a> URL-forhåndsvisninger som standard."
+            "topic_field_label": "Rummets emne"
         },
         "notifications": {
             "browse_button": "Gennemse",
@@ -2291,9 +2288,7 @@
             "remove_msisdn_prompt": "Fjern %(phone)s?",
             "spell_check_locale_placeholder": "Vælg en lokalitet"
         },
-        "inline_url_previews_default": "Aktivér indbyggede URL-forhåndsvisninger som standard",
-        "inline_url_previews_room": "Aktivér forhåndsvisning af URL-adresser som standard for deltagere i dette rum",
-        "inline_url_previews_room_account": "Aktivér forhåndsvisning af URL-adresser for dette rum (påvirker kun dig)",
+        "inline_url_previews_default": "Aktivér forhåndsvisninger",
         "insert_trailing_colon_mentions": "Indsæt et afsluttende kolon efter brugeromtaler i starten af en meddelelse",
         "jump_to_bottom_on_send": "Gå til bunden af tidslinjen, når du sender en besked",
         "key_backup": {
@@ -2462,20 +2457,20 @@
             "best_security_note": "For at opnå den bedste sikkerhed skal du bekræfte dine sessioner og logge ud fra enhver session, som du ikke genkender eller bruger længere.",
             "browser": "Browser",
             "confirm_sign_out": {
-                "one": "Bekræft, at du logger af denne enhed",
-                "other": "Bekræft, at du logger af disse enheder"
+                "one": "Bekræft fjernelse af denne enhed",
+                "other": "Bekræft fjernelse af disse enheder"
             },
             "confirm_sign_out_body": {
-                "one": "Klik på knappen herunder for at bekræfte, at du logger af denne enhed.",
-                "other": "Klik på knappen herunder for at bekræfte, at du logger af disse enheder."
+                "one": "Klik på knappen nedenfor for at bekræfte fjernelse af denne enhed.",
+                "other": "Klik på knappen nedenfor for at bekræfte fjernelse af disse enheder."
             },
             "confirm_sign_out_continue": {
-                "one": "Log ud af enheden",
-                "other": "Log ud af enheder"
+                "one": "Fjern enhed",
+                "other": "Fjern enheder"
             },
             "confirm_sign_out_sso": {
-                "one": "Bekræft, at du logger af denne enhed ved at bruge Single Sign On for at bevise din identitet.",
-                "other": "Bekræft, at du logger af disse enheder ved at bruge Single Sign On for at bevise din identitet."
+                "one": "Bekræft fjernelse af denne enhed ved at bruge Single Sign-On til at bevise din identitet.",
+                "other": "Bekræft fjernelse af disse enheder ved at bruge Single Sign-On til at bevise din identitet."
             },
             "current_session": "Nuværende session",
             "desktop_session": "Skrivebordssession",
@@ -2526,7 +2521,7 @@
             "sign_in_with_qr": "Forbind ny enhed",
             "sign_in_with_qr_button": "Vis QR-kode",
             "sign_in_with_qr_description": "Brug en QR-kode til at logge ind på en anden enhed og opsætte sikker beskedkommunikation.",
-            "sign_out": "Log ud af denne session",
+            "sign_out": "Fjern denne session",
             "sign_out_all_other_sessions": "Log ud af alle andre sessioner (%(otherSessionsCount)s)",
             "sign_out_confirm_description": {
                 "one": "Er du sikker på, at du vil logge ud af %(count)s sessionen?",
@@ -3284,6 +3279,9 @@
     "truncated_list_n_more": {
         "other": "Og %(count)s mere..."
     },
+    "unsupported_browser": {
+        "title": "%(brand)s understøtter ikke denne browser"
+    },
     "unsupported_server_description": "Denne server bruger en ældre version af Matrix. Opgrader til Matrix %(version)s for at kunne bruge %(brand)s uden fejl.",
     "unsupported_server_title": "Din server er ikke understøttet",
     "update": {
@@ -3487,6 +3485,7 @@
         "voice_call": "Stemmeopkald",
         "you_are_presenting": "Du præsenterer"
     },
+    "web_default_device_name": "%(appName)s: %(browserName)s på %(osName)s",
     "welcome_to_element": "Velkommen til Element",
     "widget": {
         "added_by": "Widget tilføjet af",
diff --git a/apps/web/src/i18n/strings/de_DE.json b/apps/web/src/i18n/strings/de_DE.json
index a14cca6ee9..945fb8e718 100644
--- a/apps/web/src/i18n/strings/de_DE.json
+++ b/apps/web/src/i18n/strings/de_DE.json
@@ -2219,8 +2219,6 @@
             "aliases_section": "Chatadressen",
             "avatar_field_label": "Chat Avatar",
             "canonical_alias_field_label": "Primäre Adresse",
-            "default_url_previews_off": "URL-Vorschau ist für Mitglieder des Chats standardmäßig deaktiviert.",
-            "default_url_previews_on": "URL-Vorschau ist für Mitglieder des Chats standardmäßig aktiviert.",
             "description_space": "Einstellungen vom Space bearbeiten.",
             "error_creating_alias_description": "Es gab einen Fehler beim Anlegen der Adresse. Entweder erlaubt es der Server nicht oder es gab ein temporäres Problem.",
             "error_creating_alias_title": "Fehler beim Anlegen der Adresse",
@@ -2251,12 +2249,7 @@
             "published_aliases_explainer_space": "Veröffentlichte Adressen erlauben jedem, den Space zu betreten.",
             "published_aliases_section": "Öffentliche Adresse",
             "save": "Speichern",
-            "topic_field_label": "Chat-Thema",
-            "url_preview_encryption_warning": "In verschlüsselten Chats wie diesem ist die Linkvorschau standardmäßig deaktiviert, damit dein Homeserver (der die Vorschau erzeugt) keine Informationen über Links in diesem Chat erhält.",
-            "url_preview_explainer": "Die URL-Vorschau kann Informationen wie den Titel, die Beschreibung sowie ein Vorschaubild der Website enthalten.",
-            "url_previews_section": "URL-Vorschau",
-            "user_url_previews_default_off": "Du hast die URL-Vorschau <a>standardmäßig deaktiviert</a>.",
-            "user_url_previews_default_on": "Du hast die URL-Vorschau <a>standardmäßig aktiviert</a>."
+            "topic_field_label": "Chat-Thema"
         },
         "notifications": {
             "browse_button": "Durchsuchen",
@@ -2678,8 +2671,6 @@
             "username": "Benutzername"
         },
         "inline_url_previews_default": "URL-Vorschau standardmäßig aktivieren",
-        "inline_url_previews_room": "URL-Vorschau für Chat Mitglieder",
-        "inline_url_previews_room_account": "URL-Vorschau für dich in diesem Chat",
         "insert_trailing_colon_mentions": "Doppelpunkt nach Erwähnungen einfügen",
         "invite_controls": {
             "default_label": "Nutzern erlauben, dich in Chats einzuladen"
diff --git a/apps/web/src/i18n/strings/el.json b/apps/web/src/i18n/strings/el.json
index f2d21753cb..8565897d1f 100644
--- a/apps/web/src/i18n/strings/el.json
+++ b/apps/web/src/i18n/strings/el.json
@@ -1728,8 +1728,6 @@
             "aliases_section": "Διευθύνσεις δωματίων",
             "avatar_field_label": "Εικόνα δωματίου",
             "canonical_alias_field_label": "Κύρια διεύθυνση",
-            "default_url_previews_off": "Η προεπισκόπηση διευθύνσεων URL είναι απενεργοποιημένη από προεπιλογή για τους συμμετέχοντες σε αυτό το δωμάτιο.",
-            "default_url_previews_on": "Η προεπισκόπηση διευθύνσεων URL είναι ενεργοποιημένη από προεπιλογή για τους συμμετέχοντες σε αυτό το δωμάτιο.",
             "description_space": "Επεξεργαστείτε τις ρυθμίσεις που σχετίζονται με τον χώρο σας.",
             "error_creating_alias_description": "Παρουσιάστηκε σφάλμα κατά τη δημιουργία αυτής της διεύθυνσης. Ενδέχεται να μην επιτρέπεται από τον διακομιστή ή να έχει παρουσιαστεί προσωρινή αποτυχία.",
             "error_creating_alias_title": "Σφάλμα δημιουργίας διεύθυνσης",
@@ -1756,12 +1754,7 @@
             "published_aliases_explainer_space": "Οι δημοσιευμένες διευθύνσεις μπορούν να χρησιμοποιηθούν από οποιονδήποτε σε οποιονδήποτε διακομιστή για να συμμετάσχει στο χώρο σας.",
             "published_aliases_section": "Δημοσιευμένες Διευθύνσεις",
             "save": "Αποθήκευση Αλλαγών",
-            "topic_field_label": "Θέμα Δωματίου",
-            "url_preview_encryption_warning": "Σε κρυπτογραφημένα δωμάτια, όπως αυτό, οι προεπισκόπηση URL είναι απενεργοποιημένη από προεπιλογή για να διασφαλιστεί ότι ο κεντρικός σας διακομιστής (όπου δημιουργείται μια προεπισκόπηση) δεν μπορεί να συγκεντρώσει πληροφορίες σχετικά με συνδέσμους που βλέπετε σε αυτό το δωμάτιο.",
-            "url_preview_explainer": "Όταν κάποιος εισάγει μια διεύθυνση URL στο μήνυμά του, μπορεί να εμφανιστεί μια προεπισκόπηση του URL για να δώσει περισσότερες πληροφορίες σχετικά με αυτόν τον σύνδεσμο, όπως τον τίτλο, την περιγραφή και μια εικόνα από τον ιστότοπο.",
-            "url_previews_section": "Προεπισκόπηση συνδέσμων",
-            "user_url_previews_default_off": "Έχετε <a>απενεργοποιημένη</a> από προεπιλογή την προεπισκόπηση συνδέσμων.",
-            "user_url_previews_default_on": "Έχετε <a>ενεργοποιημένη</a> από προεπιλογή την προεπισκόπηση συνδέσμων."
+            "topic_field_label": "Θέμα Δωματίου"
         },
         "notifications": {
             "browse_button": "Εξερεύνηση",
@@ -2039,8 +2032,6 @@
             "spell_check_locale_placeholder": "Επιλογή τοπικών ρυθμίσεων"
         },
         "inline_url_previews_default": "Ενεργοποιήστε τις ενσωματωμένες προεπισκοπήσεις URL από προεπιλογή",
-        "inline_url_previews_room": "Ενεργοποιήστε τις προεπισκοπήσεις URL από προεπιλογή για τους συμμετέχοντες σε αυτό το δωμάτιο",
-        "inline_url_previews_room_account": "Ενεργοποίηση προεπισκόπισης URL για αυτό το δωμάτιο (επηρεάζει μόνο εσάς)",
         "insert_trailing_colon_mentions": "Εισαγάγετε άνω και κάτω τελεία μετά την αναφορά του χρήστη στην αρχή ενός μηνύματος",
         "jump_to_bottom_on_send": "Μεταβείτε στο τέλος του χρονολογίου όταν στέλνετε ένα μήνυμα",
         "key_backup": {
diff --git a/apps/web/src/i18n/strings/en_EN.json b/apps/web/src/i18n/strings/en_EN.json
index 3fad87c427..af472bc1ee 100644
--- a/apps/web/src/i18n/strings/en_EN.json
+++ b/apps/web/src/i18n/strings/en_EN.json
@@ -42,7 +42,7 @@
         "copy_link": "Copy link",
         "create": "Create",
         "create_a_room": "Create a room",
-        "create_account": "Create Account",
+        "create_account": "Create account",
         "decline": "Decline",
         "decline_and_block": "Decline and block",
         "decline_invite": "Decline invite",
@@ -681,6 +681,12 @@
         "unfederated_label_default_on": "You might disable this if the room will be used for collaborating with external teams who have their own homeserver. This cannot be changed later.",
         "unsupported_version": "The server does not support the room version specified."
     },
+    "create_section_dialog": {
+        "create_section": "Create section",
+        "description": "Sections are only for you",
+        "label": "Section name",
+        "title": "Create a section"
+    },
     "create_space": {
         "add_details_prompt": "Add some details to help people recognise it.",
         "add_details_prompt_2": "You can change these anytime.",
@@ -1114,7 +1120,7 @@
         "verification_requested_toast_title": "Verification requested",
         "verified_identity_changed": "%(displayName)s's (<b>%(userId)s</b>) digital identity was reset. <a>Learn more</a>",
         "verified_identity_changed_no_displayname": "<b>%(userId)s</b>'s digital identity was reset. <a>Learn more</a>",
-        "verify_toast_description": "As of end of April 2026, unverified devices will not be able to send and receive messages. <a>Learn more</a>",
+        "verify_toast_description": "As of end of October 2026, unverified devices will not be able to send and receive messages. <a>Learn more</a>",
         "verify_toast_title": "Verify this device",
         "withdraw_verification_action": "Withdraw verification"
     },
@@ -1362,6 +1368,14 @@
         "impossible_dialog_title": "Integrations not allowed"
     },
     "invite": {
+        "confirm_unknown_users": {
+            "invite_subtitle": "You currently don't have any chats with these contacts. Confirm inviting them to this room before continuing.",
+            "invite_title": "Invite new contacts to this room?",
+            "start_chat_subtitle_multiple_users": "You currently don't have any chats with these people. Confirm inviting them before continuing.",
+            "start_chat_subtitle_one_user": "You currently don't have any chats with this person. Confirm inviting them before continuing.",
+            "start_chat_title_multiple_users": "Start a chat with these new contacts?",
+            "start_chat_title_one_user": "Start a chat with this new contact?"
+        },
         "email_caption": "Invite by email",
         "email_limit_one": "Invites by email can only be sent one at a time",
         "email_use_default_is": "Use an identity server to invite by email. <default>Use the default (%(defaultIdentityServerName)s)</default> or manage in <settings>Settings</settings>.",
@@ -1810,7 +1824,6 @@
         "restricted": "Restricted"
     },
     "powered_by_matrix": "Powered by Matrix",
-    "powered_by_matrix_with_logo": "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo",
     "presence": {
         "away": "Away",
         "busy": "Busy",
@@ -2238,8 +2251,6 @@
             "aliases_section": "Room Addresses",
             "avatar_field_label": "Room avatar",
             "canonical_alias_field_label": "Main address",
-            "default_url_previews_off": "URL previews are disabled by default for participants in this room.",
-            "default_url_previews_on": "URL previews are enabled by default for participants in this room.",
             "description_space": "Edit settings relating to your space.",
             "error_creating_alias_description": "There was an error creating that address. It may not be allowed by the server or a temporary failure occurred.",
             "error_creating_alias_title": "Error creating address",
@@ -2270,12 +2281,7 @@
             "published_aliases_explainer_space": "Published addresses can be used by anyone on any server to join your space.",
             "published_aliases_section": "Published Addresses",
             "save": "Save Changes",
-            "topic_field_label": "Room Topic",
-            "url_preview_encryption_warning": "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.",
-            "url_preview_explainer": "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.",
-            "url_previews_section": "URL Previews",
-            "user_url_previews_default_off": "You have <a>disabled</a> URL previews by default.",
-            "user_url_previews_default_on": "You have <a>enabled</a> URL previews by default."
+            "topic_field_label": "Room Topic"
         },
         "notifications": {
             "browse_button": "Browse",
@@ -2596,7 +2602,7 @@
                 "key_storage_warning": "Your key storage is out of sync. Click one of the buttons below to fix the problem.",
                 "save_key_description": "Do not share this with anyone!",
                 "save_key_title": "Recovery key",
-                "set_up_recovery": "Get recovery key",
+                "set_up_recovery": "Set up recovery",
                 "set_up_recovery_confirm_button": "Finish set up",
                 "set_up_recovery_confirm_description": "Enter the recovery key shown on the previous screen to finish setting up recovery.",
                 "set_up_recovery_confirm_title": "Enter your recovery key to confirm",
@@ -2697,9 +2703,8 @@
             "unable_to_load_msisdns": "Unable to load phone numbers",
             "username": "Username"
         },
-        "inline_url_previews_default": "Enable inline URL previews by default",
-        "inline_url_previews_room": "Enable URL previews by default for participants in this room",
-        "inline_url_previews_room_account": "Enable URL previews for this room (only affects you)",
+        "inline_url_previews_default": "Enable previews",
+        "inline_url_previews_encrypted": "Enable previews in encrypted rooms",
         "insert_trailing_colon_mentions": "Insert a trailing colon after user mentions at the start of a message",
         "invite_controls": {
             "default_label": "Allow users to invite you to rooms"
@@ -2837,6 +2842,8 @@
             "enable_tray_icon": "Show tray icon and minimise window to it on close",
             "keyboard_heading": "Keyboard shortcuts",
             "keyboard_view_shortcuts_button": "To view all keyboard shortcuts, <a>click here</a>.",
+            "link_previews_description": "Shows information about links underneath messages",
+            "link_previews_heading": "Link previews",
             "media_heading": "Images, GIFs and videos",
             "presence_description": "Share your activity and status with others.",
             "publish_timezone": "Publish timezone on public profile",
@@ -3981,7 +3988,11 @@
         "you_are_presenting": "You are presenting"
     },
     "web_default_device_name": "%(appName)s: %(browserName)s on %(osName)s",
-    "welcome_to_element": "Welcome to Element",
+    "welcome": {
+        "tagline_element": "Supercharged for speed and simplicity.",
+        "title_element": "Be in your element",
+        "title_generic": "Welcome to %(brand)s"
+    },
     "widget": {
         "added_by": "Widget added by",
         "capabilities_dialog": {
@@ -4003,6 +4014,7 @@
             "change_name_this_room": "Change the name of this room",
             "change_topic_active_room": "Change the topic of your active room",
             "change_topic_this_room": "Change the topic of this room",
+            "download_file": "Download files from the media repository",
             "receive_membership_active_room": "See when people join, leave, or are invited to your active room",
             "receive_membership_this_room": "See when people join, leave, or are invited to this room",
             "remove_ban_invite_leave_active_room": "Remove, ban, or invite people to your active room, and make you leave",
diff --git a/apps/web/src/i18n/strings/eo.json b/apps/web/src/i18n/strings/eo.json
index a4fba455da..40f0c10f28 100644
--- a/apps/web/src/i18n/strings/eo.json
+++ b/apps/web/src/i18n/strings/eo.json
@@ -1381,8 +1381,6 @@
             "aliases_section": "Adresoj de ĉambro",
             "avatar_field_label": "Profilbildo de ĉambro",
             "canonical_alias_field_label": "Ĉefa adreso",
-            "default_url_previews_off": "Antaŭrigardoj de URL-oj estas implicite malŝaltitaj por anoj de tiu ĉi ĉambro.",
-            "default_url_previews_on": "Antaŭrigardoj de URL-oj estas implicite ŝaltitaj por anoj de tiu ĉi ĉambro.",
             "description_space": "Redaktu agordojn pri via aro.",
             "error_creating_alias_description": "Eraris kreado de tiu adreso. Eble ĝi ne estas permesata de la servilo, aŭ okazis portempa fiasko.",
             "error_creating_alias_title": "Eraris kreado de adreso",
@@ -1409,12 +1407,7 @@
             "published_aliases_explainer_space": "Publikigitajn adresojn povas uzi ajna persono sur ajna servilo por aliĝi al via aro.",
             "published_aliases_section": "Publikigitaj adresoj",
             "save": "Konservi ŝanĝojn",
-            "topic_field_label": "Temo de ĉambro",
-            "url_preview_encryption_warning": "En ĉifritaj ĉambroj, kiel ĉi tiu, antaŭrigardoj al URL-oj estas implicite malŝaltitaj por certigi, ke via hejmservilo (kie la antaŭrigardoj estas generataj) ne povas kolekti informojn pri ligiloj en ĉi tiu ĉambro.",
-            "url_preview_explainer": "Kiam iu metas URL-on en sian mesaĝon, antaŭrigardo al tiu URL povas montriĝi, por doni pliajn informojn pri tiu ligilo, kiel ekzemple la titolon, priskribon, kaj bildon el la retejo.",
-            "url_previews_section": "Antaŭrigardoj al retpaĝoj",
-            "user_url_previews_default_off": "Vi <a>malŝaltis</a> implicitajn antaŭrigardojn al retpaĝoj.",
-            "user_url_previews_default_on": "Vi <a>ŝaltis</a> implicitajn antaŭrigardojn al retpaĝoj."
+            "topic_field_label": "Temo de ĉambro"
         },
         "notifications": {
             "browse_button": "Foliumi",
@@ -1657,8 +1650,6 @@
             "remove_msisdn_prompt": "Ĉu forigi %(phone)s?"
         },
         "inline_url_previews_default": "Ŝalti entekstan antaŭrigardon al retadresoj",
-        "inline_url_previews_room": "Ŝalti URL-antaŭrigardon por anoj de ĉi tiu ĉambro",
-        "inline_url_previews_room_account": "Ŝalti URL-antaŭrigardon en ĉi tiu ĉambro (nur por vi)",
         "jump_to_bottom_on_send": "Salti al subo de historio sendinte mesaĝon",
         "key_backup": {
             "setup_secure_backup": {
diff --git a/apps/web/src/i18n/strings/es.json b/apps/web/src/i18n/strings/es.json
index e7857db6e1..e45d26f78f 100644
--- a/apps/web/src/i18n/strings/es.json
+++ b/apps/web/src/i18n/strings/es.json
@@ -1847,8 +1847,6 @@
             "aliases_section": "Direcciones de la sala",
             "avatar_field_label": "Avatar de la sala",
             "canonical_alias_field_label": "Dirección principal",
-            "default_url_previews_off": "La vista previa de URLs se desactiva por defecto para los participantes de esta sala.",
-            "default_url_previews_on": "La vista previa de URLs se activa por defecto en los participantes de esta sala.",
             "description_space": "Edita los ajustes de tu espacio.",
             "error_creating_alias_description": "Hubo un error al crear esa dirección. Es posible que el servidor no lo permita o que haya ocurrido una falla temporal.",
             "error_creating_alias_title": "Error al crear la dirección",
@@ -1875,12 +1873,7 @@
             "published_aliases_explainer_space": "Los espacios publicados pueden usarse por cualquiera, independientemente de su servidor base.",
             "published_aliases_section": "Direcciones publicadas",
             "save": "Guardar cambios",
-            "topic_field_label": "Asunto de la sala",
-            "url_preview_encryption_warning": "En salas cifradas como ésta, la vista previa de las URLs se desactiva por defecto para asegurar que el servidor base (donde se generan) no pueda recopilar información de los enlaces que veas en esta sala.",
-            "url_preview_explainer": "Cuando alguien incluya una dirección URL en su mensaje, puede mostrarse una vista previa para ofrecer información sobre el enlace, que incluirá el título, descripción, y una imagen del sitio web.",
-            "url_previews_section": "Vista previa de enlaces",
-            "user_url_previews_default_off": "Has <a>desactivado</a> la vista previa de URLs por defecto.",
-            "user_url_previews_default_on": "Has <a>activado</a> las vista previa de URLs por defecto."
+            "topic_field_label": "Asunto de la sala"
         },
         "notifications": {
             "browse_button": "Seleccionar",
@@ -2172,8 +2165,6 @@
             "spell_check_locale_placeholder": "Elige un idioma"
         },
         "inline_url_previews_default": "Activar la vista previa de URLs en línea por defecto",
-        "inline_url_previews_room": "Activar la vista previa de URLs por defecto para los participantes de esta sala",
-        "inline_url_previews_room_account": "Activar la vista previa de URLs en esta sala (solo para ti)",
         "insert_trailing_colon_mentions": "Inserta automáticamente dos puntos después de las menciones que hagas al principio de los mensajes",
         "jump_to_bottom_on_send": "Saltar abajo del todo al enviar un mensaje",
         "key_backup": {
diff --git a/apps/web/src/i18n/strings/et.json b/apps/web/src/i18n/strings/et.json
index bd0ded64ac..683c5a2421 100644
--- a/apps/web/src/i18n/strings/et.json
+++ b/apps/web/src/i18n/strings/et.json
@@ -305,7 +305,7 @@
             "rate_limit_error_with_time": "Liiga palju päringuid napis ajavahemikus. Enne uuesti proovimist palun oota %(timeout)s sekundit.",
             "reset_successful": "Sinu salasõna on muudetud.",
             "return_to_login": "Mine tagasi sisselogimisvaatele",
-            "sign_out_other_devices": "Logi kõik oma seadmed võrgust välja"
+            "sign_out_other_devices": "Eemalda muud seadmed"
         },
         "reset_password_action": "Lähtesta salasõna",
         "reset_password_button": "Unustasid salasõna?",
@@ -692,7 +692,7 @@
         "creating_rooms": "Loon jututube…",
         "done_action": "Palun vaata minu kogukonnakeskust",
         "done_action_first_room": "Mine minu esimese jututoa juurde",
-        "explainer": "Kogukonnad on uus võimalus jututubade ja inimeste liitmiseks. Missugust kogukonda sa tahaksid luua? Sa saad seda hiljem muuta.",
+        "explainer": "Kogukonnad on võimalus jututubade haldamiseks ja leidmiseks. Missugust kogukonda sa tahaksid luua?",
         "failed_create_initial_rooms": "Algsete jututubade loomine ei õnnestunud",
         "failed_invite_users": "Järgnevate kasutajate kutsumine kogukonnakeskusesse ei õnnestunud: %(csvUsers)s",
         "invite_teammates_by_username": "Kutsu kasutajanime alusel",
@@ -703,20 +703,20 @@
         "name_required": "Palun sisesta kogukonnakeskuse nimi",
         "personal_space": "Vaid mina",
         "personal_space_description": "Privaatne kogukonnakeskus jututubade koondamiseks",
-        "private_description": "Liitumine vaid kutse alusel, sobib sulle ja sinu lähematele kaaslastele",
+        "private_description": "Liitumine vaid kutse alusel, kas sulle või sinu tiimile",
         "private_heading": "Sinu privaatne kogukond",
         "private_only_heading": "Sinu kogukond",
         "private_personal_description": "Palun kontrolli, et vajalikel inimestel oleks ligipääs siia - %(name)s",
         "private_personal_heading": "Kellega sa koos töötad?",
         "private_space": "Mina ja minu kaasteelised",
         "private_space_description": "Privaatne kogukonnakeskus sinu ja sinu kaasteeliste jaoks",
-        "public_description": "Avaliku ligipääsuga kogukonnakeskus",
+        "public_description": "Kõik võivad liituda, sobib kõige paremini kogukondadele",
         "public_heading": "Sinu avalik kogukonnakeskus",
         "search_public_button": "Avalike kogukondade otsing",
-        "setup_rooms_community_description": "Teeme siis iga teema jaoks oma jututoa.",
+        "setup_rooms_community_description": "Teeme siis alustuseks mõned jututoad.",
         "setup_rooms_community_heading": "Mida sa sooviksid arutada %(spaceName)s kogukonnakeskuses?",
         "setup_rooms_description": "Sa võid ka hiljem siia luua uusi jututubasid või lisada olemasolevaid.",
-        "setup_rooms_private_description": "Loome siis igaühe jaoks oma jututoa.",
+        "setup_rooms_private_description": "Loome siis alustuseks mõned jututoad.",
         "setup_rooms_private_heading": "Missuguste projektidega sinu tiim tegeleb?",
         "share_description": "Hetkel oled siin vaid sina, aga aina paremaks läheb, kui teised liituvad.",
         "share_heading": "Jaga %(name)s",
@@ -990,7 +990,7 @@
         "set_up_recovery_toast_description": "Kui peaksid kaotama ligipääsu oma seadmetele, siis siinloodava taastevõtmega saad taastada ligipääsu oma krüptitud sõnumitele.",
         "set_up_toast_title": "Võta kasutusele turvaline varundus",
         "setup_secure_backup": {
-            "explainer": "Vältimaks nende kaotamist, varunda krüptovõtmed enne väljalogimist."
+            "explainer": "Vältimaks nende kaotamist, varunda krüptovõtmed enne seadme eemaldamist."
         },
         "turn_on_key_storage": "Võta krüptovõtmete hoidla kasutusele",
         "turn_on_key_storage_description": "Salvesta oma krüptoidentiteet ja sõnumite krüptovõtmed turvaliselt serveris. See tagab, et sinu sõnumite ajalugu on alati loetav, ka kõikides uutes seadmetes.",
@@ -1017,7 +1017,7 @@
             "complete_description": "Sa oled edukalt verifitseerinud selle kasutaja.",
             "complete_title": "Verifitseeritud!",
             "confirm_identity_description": "Krüptitud sõnumivahetuse tagamiseks verifitseeri see seade",
-            "confirm_identity_title": "Kinnita, et see oled sina",
+            "confirm_identity_title": "Kinnita oma digitaalne identiteet",
             "confirm_the_emojis": "Kinnita, et kõik järgnevalt kuvatud emojid on täpselt samad, mida sa näed oma teises sessioonis.",
             "error_starting_description": "Meil ei õnnestunud alustada vestlust teise kasutajaga.",
             "error_starting_title": "Viga verifitseerimise alustamisel",
@@ -1101,10 +1101,10 @@
             "waiting_other_user": "Ootan kasutaja %(displayName)s verifitseerimist…"
         },
         "verification_requested_toast_title": "Verifitseerimistaotlus on saadetud",
-        "verified_identity_changed": "Kasutaja %(displayName)s (<b>%(userId)s</b>) verifitseeritud identiteet on muutunud. <a>Lisateave</a>",
+        "verified_identity_changed": "Kasutaja %(displayName)s (<b>%(userId)s</b>) verifitseeritud võrguidentiteet on muutunud. <a>Lisateave</a>",
         "verified_identity_changed_no_displayname": "Kasutaja <b>%(userId)s</b> verifitseeritud identiteet on muutunud. <a>Lisateave</a>",
         "verify_toast_description": "Teised kasutajad ei pruugi seda usaldada",
-        "verify_toast_title": "Verifitseeri see sessioon",
+        "verify_toast_title": "Verifitseeri see seade",
         "withdraw_verification_action": "Eemalda verifitseerimine"
     },
     "error": {
@@ -2219,8 +2219,6 @@
             "aliases_section": "Jututubade aadressid",
             "avatar_field_label": "Jututoa tunnuspilt ehk avatar",
             "canonical_alias_field_label": "Põhiaadress",
-            "default_url_previews_off": "URL'ide eelvaated on vaikimisi lülitatud välja selles jututoas osalejate jaoks.",
-            "default_url_previews_on": "URL'ide eelvaated on vaikimisi kasutusel selles jututoas osalejate jaoks.",
             "description_space": "Muuda oma kogukonnakeskuse seadistusi.",
             "error_creating_alias_description": "Aadressi loomisel tekkis viga. See kas on serveri poolt keelatud või tekkis ajutine tõrge.",
             "error_creating_alias_title": "Viga aadressi loomisel",
@@ -2251,12 +2249,7 @@
             "published_aliases_explainer_space": "Avaldatud aadresse saab igaüks igast serverist kasutada liitumiseks sinu kogukonnakeskusega.",
             "published_aliases_section": "Avaldatud aadressid",
             "save": "Salvesta muutused",
-            "topic_field_label": "Jututoa teema",
-            "url_preview_encryption_warning": "Krüptitud jututubades, nagu see praegune, URL'ide eelvaated ei ole vaikimisi kasutusel. See tagab, et sinu koduserver (kus eelvaated luuakse) ei saaks koguda teavet viidete kohta, mida sa siin jututoas näed.",
-            "url_preview_explainer": "Kui keegi lisab oma sõnumisse URL'i, siis võidakse näidata selle URL'i eelvaadet, mis annab lisateavet tema kohta, nagu näiteks pealkiri, kirjeldus ja kuidas ta välja näeb.",
-            "url_previews_section": "URL'ide eelvaated",
-            "user_url_previews_default_off": "Vaikimisi oled URL'ide eelvaated <a>lülitanud välja</a>.",
-            "user_url_previews_default_on": "Vaikimisi oled URL'ide eelvaated <a>võtnud kasutusele</a>."
+            "topic_field_label": "Jututoa teema"
         },
         "notifications": {
             "browse_button": "Sirvi",
@@ -2350,7 +2343,7 @@
             "join_rule_invite_description": "Liitumine toimub vaid kutse alusel.",
             "join_rule_knock": "Küsi võimalust liitumiseks",
             "join_rule_knock_description": "Kasutajade ei saa liituda enne, kui selleks vastav luba on antud.",
-            "join_rule_public_description": "Kõik saavad jututuba leida ja sellega liituda.",
+            "join_rule_public_description": "Kõik võivad jututoaga liituda.",
             "join_rule_restricted": "Kogukonna liikmed",
             "join_rule_restricted_description": "Kõik kogukonnakeskuse liikmed saavad jututuba leida ja sellega liituda. <a>Muuda lubatud kogukonnakeskuste loendit.</a>",
             "join_rule_restricted_description_active_space": "Kõik <spaceName/> kogukonnakeskuse liikmed saavad leida ja liituda. Sa võid valida ka muid kogukonnakeskuseid.",
@@ -2364,14 +2357,14 @@
             "join_rule_restricted_dialog_heading_room": "Sulle teadaolevad kogukonnakeskused, millesse kuulub see jututuba",
             "join_rule_restricted_dialog_heading_space": "Sulle teadaolevad kogukonnakeskused, millesse kuulub see kogukond",
             "join_rule_restricted_dialog_heading_unknown": "Ilmselt on tegemist nendega, mille liikmed on teiste jututubade haldajad.",
-            "join_rule_restricted_dialog_title": "Vali kogukonnakeskused",
+            "join_rule_restricted_dialog_title": "Halda kogukondi",
             "join_rule_restricted_n_more": {
                 "other": "ja veel %(count)s",
                 "one": "ja veel %(count)s"
             },
             "join_rule_restricted_summary": {
-                "other": "Hetkel on ligipääs %(count)s'l kogukonnakeskusel",
-                "one": "Hetkel sellel kogukonnal on ligipääs"
+                "one": "Hetkel on ühel kogukonnal ligipääs",
+                "other": "Hetkel on %(count)s-l kogukonnal ligipääs"
             },
             "join_rule_restricted_upgrade_description": "Antud uuendusega on valitud kogukonnakeskuste liikmetel võimalik selle jututoaga ilma kutseta liituda.",
             "join_rule_restricted_upgrade_warning": "See jututuba on mõne sellise kogukonnakeskuse osa, kus sul pole haldaja õigusi. Selliselt juhul vana jututuba jätkuvalt kuvatakse, kuid selle asutajatele pakutakse võimalust uuega liituda.",
@@ -2407,7 +2400,7 @@
             "history_visibility_anyone_space_description": "Luba huvilistel enne liitumist näha kogukonnakeskuse eelvaadet.",
             "history_visibility_anyone_space_disabled": "Sul pole õigust muuta ajaloo nähtavust.",
             "history_visibility_anyone_space_recommendation": "Soovitame avalike kogukonnakeskuste puhul.",
-            "title": "Nähtavus"
+            "title": "Turvalisus ja privaatsus"
         },
         "voip": {
             "call_type_section": "Kõne tüüp",
@@ -2525,9 +2518,9 @@
                 "breadcrumb_page": "Lähtesta krüptimine",
                 "breadcrumb_second_description": "Sa kaotad ligipääsu sõnumite ajalooole, mis on salvestatud vaid serveris",
                 "breadcrumb_third_description": "Sa pead kõik oma olemasolevad seadmed ja kontaktid uuesti verifitseerima",
-                "breadcrumb_title": "Kas sa oled kindel, et soovid oma krüptoidentiteeti lähtestada?",
+                "breadcrumb_title": "Kas sa oled kindel, et soovid oma võrguidentiteeti lähtestada?",
                 "breadcrumb_title_cant_confirm": "Sa pead oma võrguidentiteedi lähtestama",
-                "breadcrumb_title_forgot": "Kas unustasid oma taastevõtme? Pead oma identiteedi lähtestama.",
+                "breadcrumb_title_forgot": "Kas unustasid oma taastevõtme? Pead oma võrguidentiteedi lähtestama.",
                 "breadcrumb_title_sync_failed": "Võtmehoidla sünkroniseerimine ei õnnestunud. Sa pead võrguidentiteedi lähtestama.",
                 "breadcrumb_warning": "Tee seda ainult siis, kui arvad, et sinu kasutajakonto võib olla ohustatud kolmandate osapoolet poolt.",
                 "details_title": "Krüptimise üksikasjad",
@@ -2544,7 +2537,7 @@
                 "title": "Täiendav teave"
             },
             "confirm_key_storage_off": "Kas sa oled kindel, et tahad krüptovõtmete hoidlat mitte kasutada?",
-            "confirm_key_storage_off_description": "Kui sa logid välja kõikidest oma seadmetest, siis kaotad ligipääsu oma sõnumite ajaloole ning pead kõik olemasolevad kontaktid uuesti verifitseerima. <a>Lisateave</a>",
+            "confirm_key_storage_off_description": "Kui sa eemaldad kõik oma seadmed, siis kaotad ligipääsu oma sõnumite ajaloole ning pead kõik olemasolevad kontaktid uuesti verifitseerima. <a>Lisateave</a>",
             "delete_key_storage": {
                 "breadcrumb_page": "Kustuta krüptovõtmete hoidla",
                 "confirm": "Kustuta krüptovõtmete hoidla",
@@ -2576,7 +2569,7 @@
                 "key_storage_warning": "Sinu võtmehoidla pole sünkroonis. Vea parandamiseks palun klõpsi ühte järgnevatest nuppudest.",
                 "save_key_description": "Ära jaga seda mitte kellegagi!",
                 "save_key_title": "Taastevõti",
-                "set_up_recovery": "Seadista taastamine",
+                "set_up_recovery": "Seadista taastevõti",
                 "set_up_recovery_confirm_button": "Lõpeta seadistamine",
                 "set_up_recovery_confirm_description": "Taastamise seadistamise lõpetamiseks palun sisesta eelmises vaates näidatud taastevõti.",
                 "set_up_recovery_confirm_title": "Kinnitamiseks sisesta oma taastevõti",
@@ -2584,7 +2577,7 @@
                 "set_up_recovery_save_key_description": "Palun märgi see taastevõti üles ja hoia teda turvaliselt, näiteks digitaalses salasõnalaekas, krüptitud märkmetes või vana kooli seifis.",
                 "set_up_recovery_save_key_title": "Salvesta oma taastevõti turvalisel viisil",
                 "set_up_recovery_secondary_description": "Kui klõpsid nuppu „Jätka“, loome me sulle uue taastevõtme.",
-                "title": "Taastamine"
+                "title": "Varundus"
             },
             "title": "Krüptimine"
         },
@@ -2678,8 +2671,6 @@
             "username": "Kasutajanimi"
         },
         "inline_url_previews_default": "Luba URL'ide vaikimisi eelvaated",
-        "inline_url_previews_room": "Luba URL'ide vaikimisi eelvaated selles jututoas osalejate jaoks",
-        "inline_url_previews_room_account": "Luba URL'ide eelvaated selle jututoa jaoks (mõjutab vaid sind)",
         "insert_trailing_colon_mentions": "Mainimiste järel näita sõnumi alguses koolonit",
         "invite_controls": {
             "default_label": "Luba kasutajatel sind kutsida jututubadesse"
@@ -2951,8 +2942,8 @@
                 "other": "Kas sa oled kindel et soovid %(count)s sessiooni võrgust välja logida?"
             },
             "sign_out_n_sessions": {
-                "one": "Logi %(count)s'st sessioonist välja",
-                "other": "Logi %(count)s'st sessioonist välja"
+                "one": "Eemalda %(count)s sessioon",
+                "other": "Eemalda %(count)s sessiooni"
             },
             "title": "Sessioonid",
             "unknown_session": "Tundmatu sessioonitüüp",
@@ -3138,7 +3129,7 @@
         "view": "Vaata sellise aadressiga jututuba",
         "whois": "Näitab teavet kasutaja kohta"
     },
-    "sliding_sync_legacy_no_longer_supported": "Järkjärgulise sünkroniseerimise (Sliding sync) varasem lahendus pole enam toetatud: uue lahenduse kasutamiseks palun logi rakendusest välja ja uuesti sisse",
+    "sliding_sync_legacy_no_longer_supported": "Järkjärgulise sünkroniseerimise (Sliding sync) varasem lahendus pole enam toetatud: uue lahenduse kasutamiseks palun logi rakendusesse uuesti sisse",
     "space": {
         "add_existing_room_space": {
             "create": "Kas sa selle asemel soovid lisada jututuba?",
diff --git a/apps/web/src/i18n/strings/fa.json b/apps/web/src/i18n/strings/fa.json
index 1caa6dee48..14ada631b6 100644
--- a/apps/web/src/i18n/strings/fa.json
+++ b/apps/web/src/i18n/strings/fa.json
@@ -1253,8 +1253,6 @@
             "aliases_section": "آدرس‌های اتاق",
             "avatar_field_label": "آواتار اتاق",
             "canonical_alias_field_label": "آدرس اصلی",
-            "default_url_previews_off": "پیش نمایش URL به طور پیش فرض برای شرکت کنندگان در این اتاق غیرفعال است.",
-            "default_url_previews_on": "پیش نمایش URL به طور پیش فرض برای شرکت کنندگان در این اتاق فعال است.",
             "description_space": "تنظیمات مربوط به فضای کاری خود را ویرایش کنید.",
             "error_creating_alias_description": "هنگام ایجاد آدرس خطایی روی داد. ممکن است سرور مجاز نباشد و یا اینکه خطایی موقت رخ داده باشد.",
             "error_creating_alias_title": "خطا در ایجاد آدرس",
@@ -1276,12 +1274,7 @@
             "publish_toggle": "این اتاق را در فهرست اتاق %(domain)s برای عموم منتشر شود؟",
             "published_aliases_section": "آدرس‌های منتشر شده",
             "save": "ذخیره تغییرات",
-            "topic_field_label": "موضوع اتاق",
-            "url_preview_encryption_warning": "در اتاق های رمزگذاری شده، مانند این اتاق، پیش نمایش URL به طور پیش فرض غیرفعال است تا اطمینان حاصل شود که سرور شما (جایی که پیش نمایش ها ایجاد می شود) نمی تواند اطلاعات مربوط به پیوندهایی را که در این اتاق مشاهده می کنید جمع آوری کند.",
-            "url_preview_explainer": "هنگامی که فردی یک URL را در پیام خود قرار می دهد، می توان با مشاهده پیش نمایش آن URL، اطلاعات بیشتری در مورد آن پیوند مانند عنوان ، توضیحات و یک تصویر از وب سایت دریافت کرد.",
-            "url_previews_section": "پیش‌نمایش URL",
-            "user_url_previews_default_off": "شما به طور پیش فرض پیش نمایش url را <a>غیر فعال</a> کرده اید.",
-            "user_url_previews_default_on": "شما به طور پیش فرض پیش نمایش url را <a>فعال</a> کرده اید."
+            "topic_field_label": "موضوع اتاق"
         },
         "notifications": {
             "browse_button": "جستجو",
@@ -1460,8 +1453,6 @@
             "remove_msisdn_prompt": "%(phone)s را پاک می‌کنید؟"
         },
         "inline_url_previews_default": "فعال‌سازی پیش‌نمایش URL به صورت پیش‌فرض",
-        "inline_url_previews_room": "امکان پیش‌نمایش URL را به صورت پیش‌فرض برای اعضای این اتاق فعال کن",
-        "inline_url_previews_room_account": "فعال‌سازی پیش‌نمایش URL برای این اتاق (تنها شما را تحت تاثیر قرار می‌دهد)",
         "jump_to_bottom_on_send": "زمانی که پیام ارسال می‌کنید، به صورت خودکار به آخرین پیام پرش کن",
         "key_backup": {
             "setup_secure_backup": {
diff --git a/apps/web/src/i18n/strings/fi.json b/apps/web/src/i18n/strings/fi.json
index b5b7f8055e..88ff7501a9 100644
--- a/apps/web/src/i18n/strings/fi.json
+++ b/apps/web/src/i18n/strings/fi.json
@@ -113,7 +113,7 @@
         "show_advanced": "Näytä lisäasetukset",
         "show_all": "Näytä kaikki",
         "sign_in": "Kirjaudu sisään",
-        "sign_out": "Kirjaudu ulos",
+        "sign_out": "Poista tämä laite",
         "skip": "Ohita",
         "start": "Aloita",
         "start_chat": "Aloita keskustelu",
@@ -213,7 +213,7 @@
         "incorrect_password": "Virheellinen salasana",
         "log_in_new_account": "<a>Kirjaudu</a> uudelle tilillesi.",
         "logout_dialog": {
-            "description": "Haluatko varmasti kirjautua ulos?",
+            "description": "Haluatko varmasti poistaa tämän laitteen?",
             "megolm_export": "Vie avaimet käsin",
             "setup_key_backup_title": "Menetät pääsyn salattuihin viesteihisi",
             "setup_secure_backup_description_1": "Salatut viestit turvataan päästä päähän -salauksella. Vain sinä ja viestien vastaanottaja(t) omaavat avaimet näiden viestien lukemiseen.",
@@ -289,14 +289,14 @@
         "registration_username_validation": "Käytä ainoastaan pieniä kirjaimia, numeroita, yhdysviivoja ja alaviivoja",
         "reset_password": {
             "confirm_new_password": "Vahvista uusi salasana",
-            "devices_logout_success": "Sinut on kirjattu ulos kaikilta laitteilta, etkä enää vastaanota push-ilmoituksia. Ota ilmoitukset uudelleen käyttöön kirjautumalla jokaiselle haluamallesi laitteelle.",
+            "devices_logout_success": "Kaikki laitteesi on poistettu, etkä enää vastaanota push-ilmoituksia. Ota ilmoitukset uudelleen käyttöön kirjautumalla jokaiselle haluamallesi laitteelle.",
             "password_not_entered": "Sinun täytyy syöttää uusi salasana.",
             "passwords_mismatch": "Uusien salasanojen on vastattava toisiaan.",
             "rate_limit_error": "Liikaa yrityksiä lyhyessä ajassa. Odota hetki, ennen kuin yrität uudelleen.",
             "rate_limit_error_with_time": "Liikaa yrityksiä lyhyessä ajassa. Yritä uudelleen, kun %(timeout)s on kulunut.",
             "reset_successful": "Salasanasi on nollattu.",
             "return_to_login": "Palaa kirjautumissivulle",
-            "sign_out_other_devices": "Kirjaudu ulos kaikista laitteista"
+            "sign_out_other_devices": "Poista muut laitteet"
         },
         "reset_password_action": "Nollaa salasana",
         "reset_password_button": "Unohditko salasanan?",
@@ -317,8 +317,8 @@
         "server_picker_title": "Kirjaudu sisään kotipalvelimellesi",
         "server_picker_title_default": "Palvelinasetukset",
         "server_picker_title_registration": "Ylläpidä tiliä osoitteessa",
-        "session_logged_out_description": "Turvallisuussyistä tämä istunto on kirjattu ulos. Ole hyvä ja kirjaudu uudestaan.",
-        "session_logged_out_title": "Uloskirjautunut",
+        "session_logged_out_description": "Turvallisuussyistä tämä laite on poistettu. Ole hyvä ja kirjaudu sisään uudelleen.",
+        "session_logged_out_title": "Istunto poistettu",
         "set_email": {
             "description": "Tämä sallii sinun uudelleenalustaa salasanasi ja vastaanottaa ilmoituksia.",
             "verification_pending_description": "Ole hyvä ja tarkista sähköpostisi ja seuraa sen sisältämää linkkiä. Kun olet valmis, napsauta Jatka.",
@@ -726,7 +726,7 @@
         "failed_to_send": "Tapahtuman lähettäminen epäonnistui!",
         "invalid_json": "Ei vaikuta kelvolliselta JSON:ilta.",
         "level": "Taso",
-        "low_bandwidth_mode_description": "Vaatii yhteensopivan kotipalvelimen.",
+        "low_bandwidth_mode_description": "Poistaa käytöstä salauksen, läsnäolon, avatarit, lukukuittaukset ja kirjoitusilmoitukset",
         "main_timeline": "Pääaikajana",
         "no_receipt_found": "Kuittausta ei löytynyt",
         "number_of_users": "Käyttäjämäärä",
@@ -819,11 +819,11 @@
             "title": "Palautustapa poistettu",
             "warning": "Jos et poistanut palautustapaa, hyökkääjä saattaa yrittää käyttää tiliäsi. Vaihda tilisi salasana ja aseta uusi palautustapa asetuksissa välittömästi."
         },
-        "set_up_recovery": "Määritä palautus",
-        "set_up_recovery_toast_description": "Luo palautusavain, jota voit käyttää salatun viestihistorian palauttamiseen, jos menetät pääsyn laitteisiisi.",
+        "set_up_recovery": "Varmuuskopioi keskustelusi",
+        "set_up_recovery_toast_description": "Keskustelusi varmuuskopioidaan automaattisesti päästä päähän -salauksella. Jotta voit palauttaa tämän varmuuskopion ja säilyttää digitaalisen identiteettisi, kun menetät pääsyn kaikkiin laitteisiisi, tarvitset palautusavaimesi.",
         "set_up_toast_title": "Määritä turvallinen varmuuskopio",
         "setup_secure_backup": {
-            "explainer": "Varmuuskopioi avaimesi ennen kuin kirjaudut ulos välttääksesi avainten menetyksen."
+            "explainer": "Varmuuskopioi avaimesi ennen kuin poistat tämän laitteen välttääksesi avainten menetyksen."
         },
         "udd": {
             "interactive_verification_button": "Vahvista vuorovaikutteisesti emojilla",
@@ -890,8 +890,8 @@
             "waiting_other_user": "Odotetaan käyttäjän %(displayName)s varmennusta…"
         },
         "verification_requested_toast_title": "Vahvistus pyydetty",
-        "verify_toast_description": "Muut eivät välttämättä luota siihen",
-        "verify_toast_title": "Vahvista tämä istunto"
+        "verify_toast_description": "Lokakuun 2026 lopusta lähtien vahvistamattomat laitteet eivät voi lähettää ja vastaanottaa viestejä. <a>Lue lisää</a>",
+        "verify_toast_title": "Vahvista tämä laite"
     },
     "error": {
         "admin_contact": "<a>Ota yhteyttä palvelun ylläpitäjään</a> jatkaaksesi palvelun käyttöä.",
@@ -913,15 +913,15 @@
         "non_urgent_echo_failure_toast": "Palvelimesi ei vastaa joihinkin <a>pyyntöihin</a>.",
         "resource_limits": "Tämä kotipalvelin on ylittänyt yhden rajoistaan.",
         "session_restore": {
-            "clear_storage_button": "Tyhjennä varasto ja kirjaudu ulos",
-            "clear_storage_description": "Kirjaudu ulos ja poista salausavaimet?",
-            "description_1": "Törmäsimme ongelmaan yrittäessämme palauttaa edellistä istuntoasi.",
+            "clear_storage_button": "Poista tämä laite",
+            "clear_storage_description": "Poistetaanko tämä laite ja sen salausavaimet?",
+            "description_1": "Istuntosi palauttamisessa tapahtui virhe.",
             "description_2": "Jos olet aikaisemmin käyttänyt uudempaa versiota %(brand)sista, istuntosi voi olla epäyhteensopiva tämän version kanssa. Sulje tämä ikkuna ja yritä uudemman version kanssa.",
-            "description_3": "Selaimen varaston tyhjentäminen saattaa korjata ongelman, mutta kirjaa sinut samalla ulos ja estää sinua lukemasta salattuja keskusteluita.",
+            "description_3": "Selaimen tallennustilan tyhjentäminen saattaa korjata ongelman, mutta se poistaa tämän laitteen ja tekee salatusta keskusteluhistoriasta lukukelvottoman.",
             "title": "Istunnon palautus epäonnistui"
         },
         "something_went_wrong": "Jokin meni vikaan!",
-        "storage_evicted_description_1": "Istunnon dataa, mukaan lukien salausavaimia, puuttuu. Kirjaudu ulos ja sisään, jolloin avaimet palautetaan varmuuskopiosta.",
+        "storage_evicted_description_1": "Jotkin istuntotiedot, mukaan lukien salattujen viestien avaimet, puuttuvat. Poista tämä laite ja kirjaudu sisään uudelleen korjataksesi tämän ja palauttaaksesi avaimet varmuuskopiosta.",
         "storage_evicted_description_2": "Selaimesi luultavasti poisti tämän datan, kun levytila oli vähissä.",
         "storage_evicted_title": "Istunnon dataa puuttuu",
         "sync": "Kotipalvelimeen yhdistäminen ei onnistunut. Yritetään uudelleen…",
@@ -1280,7 +1280,7 @@
         "report_to_moderators_description": "Moderointia tukevissa huoneissa väärinkäytökset voi ilmoittaa Ilmoita-painikkeella huoneen moderaattoreille.",
         "sliding_sync": "Liukuvan synkronoinnin tila",
         "sliding_sync_description": "Työn alla, käytöstä poistaminen ei ole mahdollista.",
-        "sliding_sync_disabled_notice": "Poista käytöstä kirjautumalla ulos ja takaisin sisään",
+        "sliding_sync_disabled_notice": "Kirjaudu uudelleen sisään poistaaksesi käytöstä",
         "sliding_sync_server_no_support": "Palvelimellasi ei ole tukea",
         "under_active_development": "Aktiivisen kehityksen kohteena.",
         "video_rooms": "Videohuoneet",
@@ -1839,8 +1839,6 @@
             "aliases_section": "Huoneen osoitteet",
             "avatar_field_label": "Huoneen kuva",
             "canonical_alias_field_label": "Pääosoite",
-            "default_url_previews_off": "URL-esikatselut ovat oletuksena pois päältä tämän huoneen jäsenillä.",
-            "default_url_previews_on": "URL-esikatselut on päällä oletusarvoisesti tämän huoneen jäsenillä.",
             "description_space": "Muokkaa tilaasi liittyviä asetuksia.",
             "error_creating_alias_description": "Osoitetta luotaessa tapahtui virhe. Voi olla, että palvelin ei salli sitä tai kyseessä oli tilapäinen virhe.",
             "error_creating_alias_title": "Virhe osoitetta luotaessa",
@@ -1869,12 +1867,7 @@
             "published_aliases_explainer_space": "Julkaistuja osoitteita voi käyttää kuka tahansa millä tahansa palvelimella liittyäkseen tilaasi.",
             "published_aliases_section": "Julkaistut osoitteet",
             "save": "Tallenna muutokset",
-            "topic_field_label": "Huoneen aihe",
-            "url_preview_encryption_warning": "Salatuissa huoneissa, kuten tässä, osoitteiden esikatselut ovat oletuksena pois käytöstä, jotta kotipalvelimesi (missä osoitteiden esikatselut luodaan) ei voi kerätä tietoa siitä, mitä linkkejä näet tässä huoneessa.",
-            "url_preview_explainer": "Kun joku asettaa osoitteen linkiksi viestiinsä, URL-esikatselu voi näyttää tietoja linkistä kuten otsikon, kuvauksen ja kuvan verkkosivulta.",
-            "url_previews_section": "URL-esikatselut",
-            "user_url_previews_default_off": "Olet oletusarvoisesti ottanut URL-esikatselut <a>pois käytöstä</a>.",
-            "user_url_previews_default_on": "Olet oletusarvoisesti ottanut URL-esikatselut <a>käyttöön</a>."
+            "topic_field_label": "Huoneen aihe"
         },
         "notifications": {
             "browse_button": "Selaa",
@@ -2124,17 +2117,17 @@
                 "change_recovery_confirm_title": "Anna uusi palautusavain",
                 "change_recovery_key": "Vaihda palautusavain",
                 "change_recovery_key_title": "Vaihdetaanko palautusavain?",
-                "description": "Palauta kryptografinen identiteettisi ja viestihistoriasi palautusavaimella, jos olet kadottanut kaikki olemassa olevat laitteesi.",
+                "description": "Keskustelusi varmuuskopioidaan automaattisesti päästä päähän -salauksella. Jotta voit palauttaa tämän varmuuskopion ja säilyttää digitaalisen identiteettisi, kun menetät pääsyn kaikkiin laitteisiisi, tarvitset palautusavaimesi.",
                 "enter_key_error": "Kirjoittamasi palautusavain ei ole oikein.",
                 "enter_recovery_key": "Kirjoita palautusavain",
                 "forgot_recovery_key": "Unohditko palautusavaimen?",
                 "save_key_description": "Älä jaa tätä kenenkään kanssa!",
                 "save_key_title": "Palautusavain",
-                "set_up_recovery": "Määritä palautus",
+                "set_up_recovery": "Hanki palautusavain",
                 "set_up_recovery_confirm_title": "Anna palautusavain vahvistaaksesi",
                 "set_up_recovery_save_key_title": "Tallenna palautusavain turvalliseen paikkaan",
                 "set_up_recovery_secondary_description": "Kun napsautat Jatka, sinulle luodaan palautusavain.",
-                "title": "Palautuminen"
+                "title": "Varmuuskopio"
             },
             "title": "Salaus"
         },
@@ -2221,9 +2214,7 @@
             "unable_to_load_msisdns": "Puhelinnumeroita ei voi ladata",
             "username": "Käyttäjätunnus"
         },
-        "inline_url_previews_default": "Ota linkkien esikatselu käyttöön oletusarvoisesti",
-        "inline_url_previews_room": "Ota linkkien esikatselu käyttöön kaikille huoneen jäsenille",
-        "inline_url_previews_room_account": "Ota linkkien esikatselut käyttöön tässä huoneessa (koskee ainoastaan sinua)",
+        "inline_url_previews_default": "Ota esikatselu käyttöön",
         "insert_trailing_colon_mentions": "Lisää kaksoispiste käyttäjän maininnan perään viestin alussa",
         "jump_to_bottom_on_send": "Siirry aikajanan pohjalle, kun lähetät viestin",
         "key_backup": {
@@ -2380,28 +2371,28 @@
         "send_read_receipts_unsupported": "Palvelimesi ei tue lukukuittausten lähettämisen poistamista käytöstä.",
         "send_typing_notifications": "Lähetä kirjoitusilmoituksia",
         "sessions": {
-            "best_security_note": "Parhaan turvallisuuden takaamiseksi vahvista istunnot ja kirjaudu ulos istunnoista, joita et tunnista tai et enää käytä.",
+            "best_security_note": "Parhaan turvallisuuden takaamiseksi vahvista istuntosi ja poista istunnot, joita et tunnista tai et enää käytä.",
             "browser": "Selain",
             "confirm_sign_out": {
-                "one": "Vahvista uloskirjautuminen tältä laitteelta",
-                "other": "Vahvista uloskirjautuminen näiltä laitteilta"
+                "one": "Vahvista tämän laitteen poistaminen",
+                "other": "Vahvista näiden laitteiden poistaminen"
             },
             "confirm_sign_out_body": {
-                "one": "Napsauta alla olevaa painiketta vahvistaaksesi tämän laitteen uloskirjauksen.",
-                "other": "Napsauta alla olevaa painiketta vahvistaaksesi näiden laitteiden uloskirjauksen."
+                "one": "Napsauta alla olevaa painiketta vahvistaaksesi tämän laitteen poistamisen.",
+                "other": "Napsauta alla olevaa painiketta vahvistaaksesi näiden laitteiden poistamisen."
             },
             "confirm_sign_out_continue": {
-                "one": "Kirjaa laite ulos",
-                "other": "Kirjaa laitteet ulos"
+                "one": "Poista laite",
+                "other": "Poista laitteet"
             },
             "confirm_sign_out_sso": {
-                "one": "Vahvista tämän laitteen uloskirjaaminen todistamalla henkilöllisyytesi kertakirjautumista käyttäen.",
-                "other": "Vahvista näiden laitteiden uloskirjaaminen todistamalla henkilöllisyytesi kertakirjautumista käyttäen."
+                "one": "Vahvista tämän laitteen poistaminen todistamalla henkilöllisyytesi kertakirjautumista käyttäen.",
+                "other": "Vahvista näiden laitteiden poistaminen todistamalla henkilöllisyytesi kertakirjautumista käyttäen."
             },
             "current_session": "Nykyinen istunto",
             "desktop_session": "Työpöytäistunto",
             "details_heading": "Istunnon tiedot",
-            "device_unverified_description": "Vahvista tämä istunto tai kirjaudu ulos siitä tietoturvan ja luotettavuuden parantamiseksi.",
+            "device_unverified_description": "Vahvista tai poista tämä istunto parhaan turvallisuuden ja luotettavuuden takaamiseksi.",
             "device_verified_description": "Tämä istunto on valmis turvallista viestintää varten.",
             "device_verified_description_current": "Nykyinen istuntosi on valmis turvalliseen viestintään.",
             "dialog_title": "<strong>Asetukset:</strong> Istunnot",
@@ -2415,7 +2406,7 @@
             "hide_details": "Piilota yksityiskohdat",
             "inactive_days": "Passiivinen %(inactiveAgeDays)s+ päivää",
             "inactive_sessions": "Passiiviset istunnot",
-            "inactive_sessions_list_description": "Harkitse vanhoista (%(inactiveAgeDays)s tai useamman päivän ikäisistä), käyttämättömistä istunnoista uloskirjautumista.",
+            "inactive_sessions_list_description": "Harkitse vanhojen (%(inactiveAgeDays)s tai useamman päivän ikäisiä), käyttämättömien istuntojen poistamista.",
             "ip": "IP-osoite",
             "last_activity": "Viimeisin toiminta",
             "manage": "Hallitse tätä istuntoa",
@@ -2446,15 +2437,15 @@
             "sign_in_with_qr_button": "Näytä QR-koodi",
             "sign_in_with_qr_description": "Kirjaudu QR-koodin avulla toiseen laitteeseen ja määritä suojattu viestinvälitys.",
             "sign_in_with_qr_unsupported": "Palveluntarjoajasi ei tue tätä",
-            "sign_out": "Kirjaudu ulos tästä istunnosta",
-            "sign_out_all_other_sessions": "Kirjaudu ulos kaikista muista istunnoista (%(otherSessionsCount)s)",
+            "sign_out": "Poista tämä istunto",
+            "sign_out_all_other_sessions": "Poista kaikki muut istunnot (%(otherSessionsCount)s )",
             "sign_out_confirm_description": {
-                "one": "Haluatko varmasti kirjautua ulos %(count)s istunnosta?",
-                "other": "Haluatko varmasti kirjautua ulos %(count)s istunnosta?"
+                "one": "Haluatko varmasti poistaa %(count)s istunnon?",
+                "other": "Haluatko varmasti poistaa %(count)s istuntoa?"
             },
             "sign_out_n_sessions": {
-                "one": "Kirjaudu ulos %(count)s istunnosta",
-                "other": "Kirjaudu ulos %(count)s istunnosta"
+                "one": "Poista %(count)s istunto",
+                "other": "Poista %(count)s istuntoa"
             },
             "title": "Istunnot",
             "unknown_session": "Tuntematon istunnon tyyppi",
@@ -2466,7 +2457,7 @@
             "url": "Verkko-osoite",
             "verified_session": "Vahvistettu istunto",
             "verified_sessions": "Vahvistetut istunnot",
-            "verified_sessions_list_description": "Parhaan turvallisuuden takaamiseksi kirjaudu ulos istunnoista, joita et tunnista tai et enää käytä.",
+            "verified_sessions_list_description": "Parhaan turvallisuuden takaamiseksi poista istunnot, joita et tunnista tai et enää käytä.",
             "verify_session": "Vahvista istunto",
             "web_session": "Web-istunto"
         },
@@ -2925,8 +2916,10 @@
         "m.room.member": {
             "accepted_3pid_invite": "%(targetName)s hyväksyi kutsun %(displayName)s:tä",
             "accepted_invite": "%(targetName)s hyväksyi kutsun",
-            "ban": "%(senderName)s antoi porttikiellon käyttäjälle %(targetName)s",
-            "ban_reason": "%(senderName)s antoi porttikiellon käyttäjälle %(targetName)s: %(reason)s",
+            "ban": "%(senderName)s antoi porttikiellon",
+            "ban_reason": "%(senderName)s antoi porttikiellon: %(reason)s",
+            "ban_reason_spoiler": "%(senderName)s antoi porttikiellon käyttäjälle <user/>: %(reason)s",
+            "ban_spoiler": "%(senderName)s antoi porttikiellon käyttäjälle <user/>",
             "change_avatar": "%(senderName)s vaihtoi profiilikuvansa",
             "change_name": "%(oldDisplayName)s vaihtoi näyttönimekseen %(displayName)s",
             "change_name_avatar": "%(oldDisplayName)s vaihtoi näyttönimensä ja profiilikuvansa",
@@ -3225,7 +3218,7 @@
         "ban_room_confirm_title": "Anna porttikielto huoneeseen %(roomName)s",
         "ban_space_everything": "Anna porttikielto kaikkeen, mihin pystyn",
         "deactivate_confirm_action": "Poista käyttäjä pysyvästi",
-        "deactivate_confirm_description": "Käyttäjän poistaminen kirjaa hänet ulos ja estää häntä kirjautumasta takaisin sisään. Lisäksi hän poistuu kaikista huoneista, joissa hän on. Tätä toimintoa ei voi kumota. Oletko varma, että haluat pysyvästi poistaa tämän käyttäjän?",
+        "deactivate_confirm_description": "Käyttäjän poistaminen poistaa hänen laitteensa ja estää häntä kirjautumasta takaisin sisään. Lisäksi hän poistuu kaikista huoneista, joissa hän on. Tätä toimintoa ei voi kumota. Oletko varma, että haluat pysyvästi poistaa tämän käyttäjän?",
         "deactivate_confirm_title": "Poista käyttäjä pysyvästi?",
         "demote_button": "Alenna",
         "demote_self_confirm_description_space": "Et voi perua tätä muutosta, koska olet alentamassa itseäsi. Jos olet viimeinen oikeutettu henkilö tässä tilassa, oikeuksia ei voi enää saada takaisin.",
diff --git a/apps/web/src/i18n/strings/fr.json b/apps/web/src/i18n/strings/fr.json
index ec23bc8a48..bef6cbf469 100644
--- a/apps/web/src/i18n/strings/fr.json
+++ b/apps/web/src/i18n/strings/fr.json
@@ -829,7 +829,7 @@
         "invalid_json": "Ne semble pas être du JSON valide.",
         "level": "Rang",
         "low_bandwidth_mode": "Mode faible bande passante",
-        "low_bandwidth_mode_description": "Nécessite un serveur d’accueil compatible.",
+        "low_bandwidth_mode_description": "Désactive le chiffrement, la présence, les avatars, les accusés de lecture et les notifications de saisie.",
         "main_timeline": "Historique principal",
         "manual_device_verification": "Vérification manuelle de l'appareil",
         "no_receipt_found": "Aucun accusé disponible",
@@ -1114,7 +1114,7 @@
         "verification_requested_toast_title": "Vérification requise",
         "verified_identity_changed": "L'identité numérique de %(displayName)s (<b>%(userId)s</b>) a été réinitialisée. <a>En savoir plus</a>",
         "verified_identity_changed_no_displayname": "L'identité de <b>%(userId)s</b> a été réinitialisée. <a>En savoir plus </a>",
-        "verify_toast_description": "À compter de fin avril 2026, les appareils non vérifiés ne pourront plus envoyer ni recevoir de messages.<a>En savoir plus</a>",
+        "verify_toast_description": "À compter de fin octobre 2026, les appareils non vérifiés ne pourront plus envoyer ni recevoir de messages.<a>En savoir plus</a>",
         "verify_toast_title": "Vérifiez cet appareil",
         "withdraw_verification_action": "Révoquer la vérification"
     },
@@ -2237,8 +2237,6 @@
             "aliases_section": "Adresses du salon",
             "avatar_field_label": "Avatar du salon",
             "canonical_alias_field_label": "Adresse principale",
-            "default_url_previews_off": "Les aperçus d'URL sont désactivés par défaut pour les participants de ce salon.",
-            "default_url_previews_on": "Les aperçus d'URL sont activés par défaut pour les participants de ce salon.",
             "description_space": "Modifiez les paramètres de votre espace.",
             "error_creating_alias_description": "Une erreur est survenue lors de la création de l’adresse. Ce n’est peut-être pas autorisé par le serveur ou une erreur temporaire est survenue.",
             "error_creating_alias_title": "Erreur lors de la création de l’adresse",
@@ -2269,12 +2267,7 @@
             "published_aliases_explainer_space": "Les adresses publiées peuvent être utilisées par tout le monde sur tous les serveurs pour rejoindre votre espace.",
             "published_aliases_section": "Adresses publiées",
             "save": "Enregistrer les modifications",
-            "topic_field_label": "Sujet du salon",
-            "url_preview_encryption_warning": "Dans les salons chiffrés, comme celui-ci, l’aperçu des liens est désactivé par défaut pour s’assurer que le serveur d’accueil (où sont générés les aperçus) ne puisse pas collecter d’informations sur les liens qui apparaissent dans ce salon.",
-            "url_preview_explainer": "Quand quelqu’un met un lien dans son message, un aperçu du lien peut être affiché afin de fournir plus d’informations sur ce lien comme le titre, la description et une image du site.",
-            "url_previews_section": "Aperçus des liens",
-            "user_url_previews_default_off": "Vous avez <a>désactivé</a> les aperçus d’URL par défaut.",
-            "user_url_previews_default_on": "Vous avez <a>activé</a> les aperçus d’URL par défaut."
+            "topic_field_label": "Sujet du salon"
         },
         "notifications": {
             "browse_button": "Parcourir",
@@ -2696,9 +2689,8 @@
             "unable_to_load_msisdns": "Impossible de charger les numéros de téléphone",
             "username": "Nom d’utilisateur"
         },
-        "inline_url_previews_default": "Activer l’aperçu des URL par défaut",
-        "inline_url_previews_room": "Activer l’aperçu des URL par défaut pour les participants de ce salon",
-        "inline_url_previews_room_account": "Activer l’aperçu des URL pour ce salon (n’affecte que vous)",
+        "inline_url_previews_default": "Activer les aperçus",
+        "inline_url_previews_encrypted": "Activer les aperçus dans les sallons chiffrés",
         "insert_trailing_colon_mentions": "Insérer deux-points après les mentions de l'utilisateur au début d'un message",
         "invite_controls": {
             "default_label": "Autoriser les utilisateurs à vous inviter dans les salons"
@@ -2836,6 +2828,8 @@
             "enable_tray_icon": "Afficher l’icône dans la barre d’état et minimiser la fenêtre lors de la fermeture",
             "keyboard_heading": "Raccourcis clavier",
             "keyboard_view_shortcuts_button": "Pour voir tous les raccourcis claviers, <a>cliquez ici</a>.",
+            "link_previews_description": "Affiche des informations sur les liens sous les messages",
+            "link_previews_heading": "Aperçus des liens",
             "media_heading": "Images, GIF et vidéos",
             "presence_description": "Partager votre activité et votre statut avec les autres.",
             "publish_timezone": "Publier le fuseau horaire sur le profil public",
@@ -4002,6 +3996,7 @@
             "change_name_this_room": "Changer le nom de ce salon",
             "change_topic_active_room": "Changer le sujet dans le salon actuel",
             "change_topic_this_room": "Changer le sujet de ce salon",
+            "download_file": "Télécharger des fichiers depuis le dépôt multimédia",
             "receive_membership_active_room": "Afficher quand des personnes rejoignent, partent, ou sont invités dans votre salon actif",
             "receive_membership_this_room": "Voir quand une personne rejoint, quitte ou est invitée sur ce salon",
             "remove_ban_invite_leave_active_room": "Expulser, bannir ou inviter des personnes dans votre salon actif et en partir",
diff --git a/apps/web/src/i18n/strings/gl.json b/apps/web/src/i18n/strings/gl.json
index a1d49ff9f4..4c57a53c69 100644
--- a/apps/web/src/i18n/strings/gl.json
+++ b/apps/web/src/i18n/strings/gl.json
@@ -1608,8 +1608,6 @@
             "aliases_section": "Enderezos da sala",
             "avatar_field_label": "Avatar da sala",
             "canonical_alias_field_label": "Enderezo principal",
-            "default_url_previews_off": "As vistas previas de URL están desactivadas por defecto para as participantes desta sala.",
-            "default_url_previews_on": "As vistas previas de URL están activas por defecto para os participantes desta sala.",
             "description_space": "Editar os axustes relativos ao teu espazo.",
             "error_creating_alias_description": "Algo fallou ao crear ese enderezo. Podería non estar autorizado polo servidor ou ser un fallo temporal.",
             "error_creating_alias_title": "Fallo ao crear o enderezo",
@@ -1636,12 +1634,7 @@
             "published_aliases_explainer_space": "Os enderezos publicados podense usar por calquera en calquera servidor para unirse ao teu espazo.",
             "published_aliases_section": "Enderezos publicados",
             "save": "Gardar cambios",
-            "topic_field_label": "Asunto da sala",
-            "url_preview_encryption_warning": "Nas salas cifradas, como é esta, está desactivado por defecto a previsualización das URL co fin de asegurarse de que o servidor local (que é onde se gardan as previsualizacións) non poida recoller información sobre das ligazóns que se ven nesta sala.",
-            "url_preview_explainer": "Cando alguén pon unha URL na mensaxe, esta previsualízarase para que así se coñezan xa cousas delas como o título, a descrición ou as imaxes que inclúe ese sitio web.",
-            "url_previews_section": "Vista previa de URL",
-            "user_url_previews_default_off": "<a>Desactivou</a> a vista previa de URL por defecto.",
-            "user_url_previews_default_on": "<a>Activou</a> a vista previa de URL por defecto."
+            "topic_field_label": "Asunto da sala"
         },
         "notifications": {
             "browse_button": "Buscar",
@@ -1907,8 +1900,6 @@
             "spell_check_locale_placeholder": "Elixe o idioma"
         },
         "inline_url_previews_default": "Activar por defecto as vistas previas en liña de URL",
-        "inline_url_previews_room": "Activar a vista previa de URL por defecto para as participantes nesta sala",
-        "inline_url_previews_room_account": "Activar vista previa de URL nesta sala (só che afecta a ti)",
         "insert_trailing_colon_mentions": "Inserir dous puntos tras mencionar a outra usuaria no inicio da mensaxe",
         "jump_to_bottom_on_send": "Ir ao final da cronoloxía cando envías unha mensaxe",
         "key_backup": {
diff --git a/apps/web/src/i18n/strings/he.json b/apps/web/src/i18n/strings/he.json
index 40028d2387..a25d699131 100644
--- a/apps/web/src/i18n/strings/he.json
+++ b/apps/web/src/i18n/strings/he.json
@@ -1325,8 +1325,6 @@
             "aliases_section": "כתובות חדרים",
             "avatar_field_label": "אוואטר של החדר",
             "canonical_alias_field_label": "כתובת ראשית",
-            "default_url_previews_off": "תצוגות מקדימות של כתובות אתרים מושבתות כברירת מחדל עבור משתתפים בחדר זה.",
-            "default_url_previews_on": "תצוגות מקדימות של כתובות אתרים מופעלות כברירת מחדל עבור משתתפים בחדר זה.",
             "description_space": "שינוי הגדרות הנוגעות למרחב העבודה שלכם.",
             "error_creating_alias_description": "אירעה שגיאה ביצירת כתובת זו. ייתכן שהשרת אינו מאפשר זאת או שהתרחש כשל זמני.",
             "error_creating_alias_title": "שגיאה ביצירת כתובת",
@@ -1353,12 +1351,7 @@
             "published_aliases_explainer_space": "כל אחד בכל שרת יכול להשתמש בכתובות שפורסמו כדי להצטרף למרחב העבודה שלכם.",
             "published_aliases_section": "כתובות מפורסמות",
             "save": "שמור שינוייים",
-            "topic_field_label": "נושא החדר",
-            "url_preview_encryption_warning": "בחדרים מוצפנים, כמו זה, תצוגות מקדימות של כתובות אתרים מושבתות כברירת מחדל כדי להבטיח ששרת הבית שלך (במקום בו נוצרות התצוגות המקדימות) אינו יכול לאסוף מידע על קישורים שאתה רואה בחדר זה.",
-            "url_preview_explainer": "כאשר מישהו מכניס כתובת URL להודעה שלו, ניתן להציג תצוגה מקדימה של כתובת אתר כדי לתת מידע נוסף על קישור זה, כמו הכותרת, התיאור והתמונה מהאתר.",
-            "url_previews_section": "תצוגת קישורים",
-            "user_url_previews_default_off": "יש לך <a> השבת </a> תצוגות מקדימות של כתובות אתרים כברירת מחדל.",
-            "user_url_previews_default_on": "כברירת מחדל, <a> הפעלת </a> תצוגה מקדימה של כתובות אתרים."
+            "topic_field_label": "נושא החדר"
         },
         "notifications": {
             "browse_button": "דפדף",
@@ -1587,8 +1580,6 @@
             "remove_msisdn_prompt": "הסר מספרי %(phone)s ?"
         },
         "inline_url_previews_default": "אפשר צפייה של תצוגת קישורים בצאט כברירת מחדל",
-        "inline_url_previews_room": "אפשר לחברים בחדר זה לצפות בתצוגת קישורים",
-        "inline_url_previews_room_account": "הראה תצוגה מקדימה של קישורים בחדר זה (משפיע רק עליכם)",
         "insert_trailing_colon_mentions": "הוסף נקודתיים לאחר אזכור המשתמש בתחילת ההודעה",
         "jump_to_bottom_on_send": "קפוץ לתחתית השיחה בעת שליחת הודעה",
         "key_backup": {
diff --git a/apps/web/src/i18n/strings/hr.json b/apps/web/src/i18n/strings/hr.json
index 473875bc76..01a38d5c33 100644
--- a/apps/web/src/i18n/strings/hr.json
+++ b/apps/web/src/i18n/strings/hr.json
@@ -2250,8 +2250,6 @@
             "aliases_section": "Adrese soba",
             "avatar_field_label": "Avatar sobe",
             "canonical_alias_field_label": "Glavna adresa",
-            "default_url_previews_off": "Pregledi URL-ova zadano su onemogućeni za sudionike u ovoj sobi.",
-            "default_url_previews_on": "Pregledi URL-ova zadano su omogućeni za sudionike u ovoj sobi.",
             "description_space": "Uredite postavke koje se odnose na vaš prostor.",
             "error_creating_alias_description": "Došlo je do pogreške prilikom izrade te adrese. Poslužitelj to možda ne dopušta ili je došlo do privremenog kvara.",
             "error_creating_alias_title": "Pogreška prilikom izrade adrese",
@@ -2282,12 +2280,7 @@
             "published_aliases_explainer_space": "Objavljene adrese može upotrebljavati svatko na svakom poslužitelju kako bi se pridružio vašem prostoru.",
             "published_aliases_section": "Objavljene adrese",
             "save": "Spremi promjene",
-            "topic_field_label": "Tema sobe",
-            "url_preview_encryption_warning": "U šifriranim sobama, poput ove, pregledi URL-ova zadano su onemogućeni kako bi se osiguralo da vaš matični poslužitelj (na kojem se generiraju pregledi) ne može prikupljati informacije o poveznicama koje vidite u ovoj sobi.",
-            "url_preview_explainer": "Kada netko u svoju poruku unese URL, može se prikazati pregled URL-a kako bi se dobile dodatne informacije o toj poveznici, kao što su naslov, opis i slika s mrežnog mjesta.",
-            "url_previews_section": "Pregledi URL-ova",
-            "user_url_previews_default_off": "Zadano <a>onemogućili</a> preglede URL-ova.",
-            "user_url_previews_default_on": "Zadano ste <a>omogućili</a> preglede URL-ova."
+            "topic_field_label": "Tema sobe"
         },
         "notifications": {
             "browse_button": "Pregledaj",
@@ -2713,8 +2706,6 @@
             "username": "Korisničko ime"
         },
         "inline_url_previews_default": "Zadano omogući umetnute pretpreglede URL-ova",
-        "inline_url_previews_room": "Omogući preglede URL-ova prema zadanim postavkama za sudionike u ovoj sobi",
-        "inline_url_previews_room_account": "Omogući preglede URL-ova za ovu sobu (utječe samo na vas)",
         "insert_trailing_colon_mentions": "Umetni dvotočku nakon što spominjanja korisnika na početku poruke",
         "invite_controls": {
             "default_label": "Dopustite korisnicima da vas pozovu u sobe"
diff --git a/apps/web/src/i18n/strings/hu.json b/apps/web/src/i18n/strings/hu.json
index 5b9765dc7e..78e9cf2222 100644
--- a/apps/web/src/i18n/strings/hu.json
+++ b/apps/web/src/i18n/strings/hu.json
@@ -2219,8 +2219,6 @@
             "aliases_section": "Szobacímek",
             "avatar_field_label": "Szoba profilképe",
             "canonical_alias_field_label": "Fő cím",
-            "default_url_previews_off": "A webcím-előnézet alapértelmezetten tiltva van a szobában lévőknek.",
-            "default_url_previews_on": "A webcím-előnézet alapértelmezetten engedélyezve van a szobában lévőknek.",
             "description_space": "A tér beállításainak szerkesztése.",
             "error_creating_alias_description": "Hiba történt a cím létrehozása során. Nincs engedélyezve a kiszolgálón, vagy átmeneti hiba történt.",
             "error_creating_alias_title": "Cím beállítási hiba",
@@ -2251,12 +2249,7 @@
             "published_aliases_explainer_space": "A közzétett címet bárki használhatja a térbe való belépéshez, bármelyik kiszolgálóról.",
             "published_aliases_section": "Nyilvánosságra hozott cím",
             "save": "Változtatások mentése",
-            "topic_field_label": "Szoba témája",
-            "url_preview_encryption_warning": "A titkosított szobákban, mint például ez is, a webcím-előnézet alapértelmezetten ki van kapcsolva, hogy biztosított legyen, hogy a Matrix-kiszolgáló (amelyen az előnézet készül) ne tudjon információt gyűjteni arról, hogy milyen hivatkozásokat lát ebben a szobában.",
-            "url_preview_explainer": "Ha valaki webcímet helyez az üzenetébe, akkor lehetőség van egy előnézet megjelenítésére, amellyel további információt kaphat a hivatkozásról, mint a cím, a leírás és a weboldal képe.",
-            "url_previews_section": "Webcím-előnézet",
-            "user_url_previews_default_off": "A webcím-előnézet alapból <a>tiltva</a> van.",
-            "user_url_previews_default_on": "A webcím-előnézet alapból <a>engedélyezve</a> van."
+            "topic_field_label": "Szoba témája"
         },
         "notifications": {
             "browse_button": "Böngészés",
@@ -2678,8 +2671,6 @@
             "username": "Felhasználónév"
         },
         "inline_url_previews_default": "Beágyazott webcím-előnézetek alapértelmezett engedélyezése",
-        "inline_url_previews_room": "Webcím-előnézetek alapértelmezett engedélyezése a szobatagok számára",
-        "inline_url_previews_room_account": "Webcím-előnézetek engedélyezése ebben a szobában (csak Önt érinti)",
         "insert_trailing_colon_mentions": "Záró kettőspont beszúrása egy felhasználó üzenet elején való megemlítésekor",
         "invite_controls": {
             "default_label": "Felhasználók meghívhatják szobákba"
diff --git a/apps/web/src/i18n/strings/hy.json b/apps/web/src/i18n/strings/hy.json
index 5180b09bde..c75bef0ccb 100644
--- a/apps/web/src/i18n/strings/hy.json
+++ b/apps/web/src/i18n/strings/hy.json
@@ -2143,8 +2143,6 @@
             "aliases_section": "Սենյակի հասցեներ",
             "avatar_field_label": "Սենյակի ավատար",
             "canonical_alias_field_label": "Հիմնական հասցե",
-            "default_url_previews_off": "URL նախադիտումները լռելյայն անջատված են այս սենյակի մասնակիցների համար:",
-            "default_url_previews_on": "URL- ի նախադիտումները միացված են լռելյայն այս սենյակի մասնակիցների համար:",
             "description_space": "Խմբագրել ձեր տարածքին վերաբերող կարգավորումները:",
             "error_creating_alias_description": "Այդ հասցեն ստեղծելիս սխալ տեղի ունեցավ։ Հնարավոր է՝ սերվերը թույլ չի տվել դա, կամ ժամանակավոր խափանում է տեղի ունեցել։",
             "error_creating_alias_title": "Հասցեի ստեղծման սխալ",
@@ -2173,12 +2171,7 @@
             "published_aliases_explainer_space": "Հրապարակված հասցեները կարող են օգտագործվել ցանկացած մեկի կողմից ցանկացած սերվերում` ձեր տարածքին միանալու համար:",
             "published_aliases_section": "Հրապարակված հասցեներ",
             "save": "Պահպանել փոփոխությունները",
-            "topic_field_label": "Սենյակի թեմա",
-            "url_preview_encryption_warning": "Գաղտնագրված սենյակներում, ինչպես այս մեկը, URL նախադիտումները անջատվում են լռելյայն `ապահովելու համար, որ ձեր homeserver-ը (որտեղ առաջանում են նախադիտումները) չկարողանա տեղեկություններ հավաքել այս սենյակում տեսած հղումների մասին:",
-            "url_preview_explainer": "Երբ ինչոր մեկը URL է դնում իր հաղորդագրության մեջ, URL- ի նախադիտումը կարող է ցուցադրվել` այդ հղման մասին լրացուցիչ տեղեկություններ տալու համար, ինչպիսիք են վերնագիրը, նկարագրությունը և կայքէջից պատկերը:",
-            "url_previews_section": "URL- ի նախադիտումներ",
-            "user_url_previews_default_off": "Դուք լռելյայն <a>անջատել եք</a> URL- ի նախադիտումները:",
-            "user_url_previews_default_on": "Դուք լռելյայն <a>միացրել եք</a> URL- ի նախադիտումները:"
+            "topic_field_label": "Սենյակի թեմա"
         },
         "notifications": {
             "browse_button": "Զննել",
@@ -2591,8 +2584,6 @@
             "username": "Օգտանուն"
         },
         "inline_url_previews_default": "Լռելյայն միացնել URL- ի ներդիրային նախադիտումները",
-        "inline_url_previews_room": "Միացնել URL-ների նախադիտումները լռելյայնորեն այս սենյակի մասնակիցների համար",
-        "inline_url_previews_room_account": "Միացնել URL-ների նախադիտումները այս սենյակի համար (ազդում է միայն ձեզ վրա)",
         "insert_trailing_colon_mentions": "Հաղորդագրության սկզբում գտնվող օգտատիրոջ հիշատակումից հետո ավելացնել երկկետ",
         "invite_controls": {
             "default_label": "Թույլատրել օգտատերերին հրավիրել ձեզ սենյակներ"
diff --git a/apps/web/src/i18n/strings/id.json b/apps/web/src/i18n/strings/id.json
index e38a50f039..f38c311c4c 100644
--- a/apps/web/src/i18n/strings/id.json
+++ b/apps/web/src/i18n/strings/id.json
@@ -115,7 +115,7 @@
         "show_advanced": "Tampilkan lanjutan",
         "show_all": "Tampilkan semua",
         "sign_in": "Masuk",
-        "sign_out": "Keluar",
+        "sign_out": "Hapus perangkat ini",
         "skip": "Lewat",
         "start": "Mulai",
         "start_chat": "Mulai obrolan",
@@ -2208,8 +2208,6 @@
             "aliases_section": "Alamat Ruangan",
             "avatar_field_label": "Avatar ruangan",
             "canonical_alias_field_label": "Alamat utama",
-            "default_url_previews_off": "Tampilan URL dinonaktifkan secara bawaan untuk anggota di ruangan ini.",
-            "default_url_previews_on": "Tampilan URL diaktifkan secara bawaan untuk anggota di ruangan ini.",
             "description_space": "Edit pengaturan yang berkaitan dengan space Anda.",
             "error_creating_alias_description": "Terjadi sebuah kesalahan membuat alamat. Ini mungkin tidak diperbolehkan oleh servernya atau ada kegagalan sementara.",
             "error_creating_alias_title": "Terjadi kesalahan membuat alamat",
@@ -2240,12 +2238,7 @@
             "published_aliases_explainer_space": "Alamat yang dipublikasikan dapat digunakan oleh siapa saja di server apa saja untuk bergabung dengan space Anda.",
             "published_aliases_section": "Alamat yang Dipublikasikan",
             "save": "Simpan Perubahan",
-            "topic_field_label": "Topik Ruangan",
-            "url_preview_encryption_warning": "Di ruangan terenkripsi, seperti ruangan ini, tampilan URL dinonaktifkan secara bawaan untuk memastikan homeserver Anda (di mana tampilannya dibuat) tidak mendapatkan informasi tentang tautan yang Anda lihat di ruangan ini.",
-            "url_preview_explainer": "Ketika seseorang menambahkan URL di pesannya, sebuah tampilan URL dapat ditampilkan untuk memberikan informasi lainnya tentang tautan itu seperti judul, deskripsi, dan sebuah gambar dari website.",
-            "url_previews_section": "Tampilan URL",
-            "user_url_previews_default_off": "Anda telah <a>menonaktifkan</a> tampilan URL secara bawaan.",
-            "user_url_previews_default_on": "Anda telah <a>mengaktifkan</a> tampilan URL secara bawaan."
+            "topic_field_label": "Topik Ruangan"
         },
         "notifications": {
             "browse_button": "Jelajahi",
@@ -2667,8 +2660,6 @@
             "username": "Nama pengguna"
         },
         "inline_url_previews_default": "Aktifkan tampilan URL secara bawaan",
-        "inline_url_previews_room": "Aktifkan tampilan URL secara bawaan untuk anggota di ruangan ini",
-        "inline_url_previews_room_account": "Aktifkan tampilan URL secara bawaan (hanya memengaruhi Anda)",
         "insert_trailing_colon_mentions": "Tambahkan sebuah karakter titik dua sesudah sebutan pengguna dari awal pesan",
         "invite_controls": {
             "default_label": "Izinkan pengguna mengundang Anda ke ruangan"
diff --git a/apps/web/src/i18n/strings/is.json b/apps/web/src/i18n/strings/is.json
index afe6602bcc..9eba2eb287 100644
--- a/apps/web/src/i18n/strings/is.json
+++ b/apps/web/src/i18n/strings/is.json
@@ -1543,8 +1543,6 @@
             "aliases_section": "Vistföng spjallrása",
             "avatar_field_label": "Auðkennismynd spjallrásar",
             "canonical_alias_field_label": "Aðalvistfang",
-            "default_url_previews_off": "Forskoðun vefslóða er sjálfgefið óvirk fyrir þátttakendur í þessari spjallrás.",
-            "default_url_previews_on": "Forskoðun vefslóða er sjálfgefið virk fyrir þátttakendur í þessari spjallrás.",
             "description_space": "Breyta stillingum viðkomandi svæðinu þínu.",
             "error_creating_alias_title": "Villa við að búa til vistfang",
             "error_deleting_alias_description_forbidden": "Þú hefur ekki heimild til að eyða vistfanginu.",
@@ -1564,11 +1562,7 @@
             "publish_toggle": "Birta þessa spjallrás opinberlega á skrá %(domain)s yfir spjallrásir?",
             "published_aliases_section": "Birt vistföng",
             "save": "Vista breytingar",
-            "topic_field_label": "Umfjöllunarefni spjallrásar",
-            "url_preview_encryption_warning": "Í dulrituðum spjallrásum, eins og þessari, er sjálfgefið slökkt á forskoðun vefslóða til að tryggja að heimaþjónn þinn (þar sem forskoðunin myndast) geti ekki safnað upplýsingum um tengla sem þú sérð í þessari spjallrás.",
-            "url_previews_section": "Forskoðun vefslóða",
-            "user_url_previews_default_off": "Þú hefur <a>óvirkt</a> forskoðun vefslóða sjálfgefið.",
-            "user_url_previews_default_on": "Þú hefur <a>virkt</a> forskoðun vefslóða sjálfgefið."
+            "topic_field_label": "Umfjöllunarefni spjallrásar"
         },
         "notifications": {
             "browse_button": "Skoða",
@@ -1809,8 +1803,6 @@
             "spell_check_locale_placeholder": "Veldu staðfærslu"
         },
         "inline_url_previews_default": "Sjálfgefið virkja forskoðun innfelldra vefslóða",
-        "inline_url_previews_room": "Virkja forskoðun vefslóða sjálfgefið fyrir þátttakendur í þessari spjallrás",
-        "inline_url_previews_room_account": "Virkja forskoðun vefslóða fyrir þessa spjallrás (einungis fyrir þig)",
         "insert_trailing_colon_mentions": "Setja tvípunkt á eftir þar sem minnst er á notanda í upphafi skilaboða",
         "jump_to_bottom_on_send": "Hoppa neðst á tímalínuna þegar þú sendir skilaboð",
         "key_backup": {
diff --git a/apps/web/src/i18n/strings/it.json b/apps/web/src/i18n/strings/it.json
index 9d76f15d7d..8189af9104 100644
--- a/apps/web/src/i18n/strings/it.json
+++ b/apps/web/src/i18n/strings/it.json
@@ -1908,8 +1908,6 @@
             "aliases_section": "Indirizzi stanza",
             "avatar_field_label": "Avatar della stanza",
             "canonical_alias_field_label": "Indirizzo principale",
-            "default_url_previews_off": "Le anteprime degli URL sono inattive in modo predefinito per i partecipanti di questa stanza.",
-            "default_url_previews_on": "Le anteprime degli URL sono attive in modo predefinito per i partecipanti di questa stanza.",
             "description_space": "Modifica le impostazioni relative al tuo spazio.",
             "error_creating_alias_description": "Si è verificato un errore creando l'indirizzo. Potrebbe non essere permesso dal server o un problema temporaneo.",
             "error_creating_alias_title": "Errore creazione indirizzo",
@@ -1936,12 +1934,7 @@
             "published_aliases_explainer_space": "Gli indirizzi pubblicati possono essere usati da chiunque su tutti i server per entrare nel tuo spazio.",
             "published_aliases_section": "Indirizzi pubblicati",
             "save": "Salva modifiche",
-            "topic_field_label": "Argomento stanza",
-            "url_preview_encryption_warning": "Nelle stanze criptate, come questa, le anteprime degli URL sono disattivate in modo predefinito per garantire che il tuo homeserver (dove vengono generate le anteprime) non possa raccogliere informazioni sui collegamenti che vedi in questa stanza.",
-            "url_preview_explainer": "Quando qualcuno inserisce un URL nel proprio messaggio, è possibile mostrare un'anteprima dell'URL per fornire maggiori informazioni su quel collegamento, come il titolo, la descrizione e un'immagine dal sito web.",
-            "url_previews_section": "Anteprime URL",
-            "user_url_previews_default_off": "Hai <a>disattivato</a> le anteprime degli URL in modo predefinito.",
-            "user_url_previews_default_on": "Hai <a>attivato</a> le anteprime degli URL in modo predefinito."
+            "topic_field_label": "Argomento stanza"
         },
         "notifications": {
             "browse_button": "Sfoglia",
@@ -2247,8 +2240,6 @@
             "spell_check_locale_placeholder": "Scegli una lingua"
         },
         "inline_url_previews_default": "Attiva le anteprime URL in modo predefinito",
-        "inline_url_previews_room": "Attiva le anteprime URL in modo predefinito per i partecipanti in questa stanza",
-        "inline_url_previews_room_account": "Attiva le anteprime URL in questa stanza (riguarda solo te)",
         "insert_trailing_colon_mentions": "Inserisci dei due punti dopo le citazioni degli utenti all'inizio di un messaggio",
         "jump_to_bottom_on_send": "Salta in fondo alla linea temporale quando invii un messaggio",
         "key_backup": {
diff --git a/apps/web/src/i18n/strings/ja.json b/apps/web/src/i18n/strings/ja.json
index 966462b0cd..490416472f 100644
--- a/apps/web/src/i18n/strings/ja.json
+++ b/apps/web/src/i18n/strings/ja.json
@@ -1739,8 +1739,6 @@
             "aliases_section": "ルームのアドレス",
             "avatar_field_label": "ルームのアバター",
             "canonical_alias_field_label": "メインアドレス",
-            "default_url_previews_off": "このルームの参加者には、既定でURLプレビューが無効です。",
-            "default_url_previews_on": "このルームの参加者には、既定でURLプレビューが有効です。",
             "description_space": "スペースの設定を変更します。",
             "error_creating_alias_description": "アドレスを作成する際にエラーが発生しました。サーバーで許可されていないか、一時的な障害が発生した可能性があります。",
             "error_creating_alias_title": "アドレスを作成する際にエラーが発生しました",
@@ -1767,12 +1765,7 @@
             "published_aliases_explainer_space": "公開アドレスを設定すると、どのサーバーのユーザーでも、あなたのスペースに参加できるようになります。",
             "published_aliases_section": "公開アドレス",
             "save": "変更を保存",
-            "topic_field_label": "ルームのトピック",
-            "url_preview_encryption_warning": "このルームを含めて、暗号化されたルームでは、あなたのホームサーバー（これがプレビューを作成します）によるリンクの情報の収集を防ぐため、URLプレビューは既定で無効になっています。",
-            "url_preview_explainer": "メッセージにURLが含まれる場合、タイトル、説明、ウェブサイトの画像などがURLプレビューとして表示されます。",
-            "url_previews_section": "URLプレビュー",
-            "user_url_previews_default_off": "URLプレビューが既定で<a>無効</a>です。",
-            "user_url_previews_default_on": "URLプレビューが既定で<a>有効</a>です。"
+            "topic_field_label": "ルームのトピック"
         },
         "notifications": {
             "browse_button": "参照",
@@ -2048,8 +2041,6 @@
             "spell_check_locale_placeholder": "ロケールを選択"
         },
         "inline_url_previews_default": "既定でインラインURLプレビューを有効にする",
-        "inline_url_previews_room": "このルームの参加者のために既定でURLプレビューを有効にする",
-        "inline_url_previews_room_account": "このルームのURLプレビューを有効にする（あなたにのみ適用）",
         "insert_trailing_colon_mentions": "ユーザーをメンションする際にコロンを挿入",
         "jump_to_bottom_on_send": "メッセージを送信する際にタイムラインの最下部に移動",
         "key_backup": {
diff --git a/apps/web/src/i18n/strings/ka.json b/apps/web/src/i18n/strings/ka.json
index 5d43204f97..9c14feaf3a 100644
--- a/apps/web/src/i18n/strings/ka.json
+++ b/apps/web/src/i18n/strings/ka.json
@@ -1386,8 +1386,6 @@
             "aliases_section": "ოთახის მისამართები",
             "avatar_field_label": "ოთახის ავატარი",
             "canonical_alias_field_label": "მთავარი მისამართი",
-            "default_url_previews_off": "URL-ის გადახედვა ნაგულისხმევად გამორთულია ამ ოთახში მონაწილეებისთვის.",
-            "default_url_previews_on": "URL-ის გადახედვა ნაგულისხმევად ჩართულია ამ ოთახში მონაწილეებისთვის.",
             "description_space": "შეცვალეთ პარამეტრები, რომლებიც დაკავშირებულია თქვენს სივრცესთან.",
             "error_creating_alias_description": "ამ მისამართის შექმნისას მოხდა შეცდომა. ეს შეიძლება არ იყოს დაშვებული სერვერის მიერ ან მოხდა დროებითი უკმარისობა.",
             "error_creating_alias_title": "შეცდომა მისამართის შექმნისას",
@@ -1414,12 +1412,7 @@
             "published_aliases_explainer_space": "გამოქვეყნებული მისამართები შეიძლება გამოყენებულ იქნას ნებისმიერ სერვერზე, რათა შეუერთდეს თქვენს სივრცეს.",
             "published_aliases_section": "გამოქვეყნებული მისამართები",
             "save": "ცვლილებების შენახვა",
-            "topic_field_label": "ოთახის თემა",
-            "url_preview_encryption_warning": "დაშიფრულ ოთახებში, როგორიცაა ეს, URL-ის გადახედვა ნაგულისხმევად გამორთულია, რათა უზრუნველყოს, რომ თქვენი სახლის სერვერი (სადაც იქმნება გადახედვები) ვერ შეაგროვებს ინფორმაციას ამ ოთახში ნახულ ბმულებზე.",
-            "url_preview_explainer": "როდესაც ვინმე ათავსებს URL-ს თავის შეტყობინებაში, URL-ის გადახედვა შეიძლება ნაჩვენები იყოს ამ ბმულის შესახებ მეტი ინფორმაციის მისაღებად, როგორიცაა სათაური, აღწერა და სურათი ვებსაიტიდან.",
-            "url_previews_section": "URL გადახედვები",
-            "user_url_previews_default_off": "თქვენ გაქვთ<a> ინვალიდი</a> URL-ის გადახედვა ნაგულისხმევად.",
-            "user_url_previews_default_on": "თქვენ გაქვთ<a> ჩართულია</a> URL-ის გადახედვა ნაგულისხმევად."
+            "topic_field_label": "ოთახის თემა"
         },
         "notifications": {
             "browse_button": "დათვალიერება",
@@ -1685,8 +1678,6 @@
             "spell_check_locale_placeholder": "აირჩიეთ ლოკალი"
         },
         "inline_url_previews_default": "ნაგულისხმევად ჩართული URL-ის გადახედვის ჩართვა",
-        "inline_url_previews_room": "URL-ის გადახედვის ჩართვა ნაგულისხმევად ამ ოთახში მონაწილეებისთვის",
-        "inline_url_previews_room_account": "ამ ოთახისთვის URL-ის გადახედვის ჩართვა (მხოლოდ თქვენზე მოქმედებს)",
         "insert_trailing_colon_mentions": "ჩადეთ ბოლო ორწერტილი მას შემდეგ, რაც მომხმარებელი აღნიშნავს შეტყობინების დასაწყისში",
         "jump_to_bottom_on_send": "შეტყობინების გაგზავნისას გადადით ქრონოლოგიის ბოლოში",
         "key_backup": {
diff --git a/apps/web/src/i18n/strings/ko.json b/apps/web/src/i18n/strings/ko.json
index 987969ea21..474b3f567f 100644
--- a/apps/web/src/i18n/strings/ko.json
+++ b/apps/web/src/i18n/strings/ko.json
@@ -2196,8 +2196,6 @@
             "aliases_section": "방 주소",
             "avatar_field_label": "방 아바타",
             "canonical_alias_field_label": "기본 주소",
-            "default_url_previews_off": "기본으로 URL 미리 보기가 이 방에 참여한 사람들 모두에게 꺼졌습니다.",
-            "default_url_previews_on": "기본으로 URL 미리 보기가 이 방에 참여한 사람들 모두에게 켜졌습니다.",
             "description_space": "스페이스와 관련된 설정을 편집하세요.",
             "error_creating_alias_description": "해당 주소를 생성하는 과정에서 오류가 발생했습니다. 서버에서 허용하지 않거나 일시적인 오류가 발생했을 수 있습니다.",
             "error_creating_alias_title": "주소 생성 중 오류 발생",
@@ -2226,12 +2224,7 @@
             "published_aliases_explainer_space": "공개된 주소는 어떤 서버의 누구든지 귀하의 공간에 참여하는 데 사용할 수 있습니다.",
             "published_aliases_section": "공개된 주소",
             "save": "변경 사항 저장",
-            "topic_field_label": "방 주제",
-            "url_preview_encryption_warning": "지금 이 방처럼, 암호화된 방에서는 홈서버 (미리 보기가 만들어지는 곳)에서 이 방에서 보여지는 링크에 대해 알 수 없도록 기본으로 URL 미리 보기가 꺼집니다.",
-            "url_preview_explainer": "누군가 메시지에 URL을 넣으면, URL 미리 보기로 웹사이트에서 온 제목, 설명, 그리고 이미지 등 그 링크에 대한 정보가 표시됩니다.",
-            "url_previews_section": "URL 미리보기",
-            "user_url_previews_default_off": "기본으로 URL 미리 보기를 <a>껐습니다</a>.",
-            "user_url_previews_default_on": "기본으로 URL 미리 보기를 <a>켰습니다</a>."
+            "topic_field_label": "방 주제"
         },
         "notifications": {
             "browse_button": "찾기",
@@ -2648,8 +2641,6 @@
             "username": "사용자 이름"
         },
         "inline_url_previews_default": "기본으로 인라인 URL 미리 보기 사용하기",
-        "inline_url_previews_room": "이 방에 참여한 모두에게 기본으로 URL 미리보기 사용하기",
-        "inline_url_previews_room_account": "이 방에서 URL 미리보기 사용하기 (오직 나만 영향을 받음)",
         "insert_trailing_colon_mentions": "메시지 시작 부분에 사용자 언급 뒤에 콜론을 추가합니다",
         "invite_controls": {
             "default_label": "사용자가 방에 초대할 수 있도록 허용"
diff --git a/apps/web/src/i18n/strings/lo.json b/apps/web/src/i18n/strings/lo.json
index 23be8ff319..4ae16559a0 100644
--- a/apps/web/src/i18n/strings/lo.json
+++ b/apps/web/src/i18n/strings/lo.json
@@ -1574,8 +1574,6 @@
             "aliases_section": "ທີ່ຢູ່ຂອງຫ້ອງ",
             "avatar_field_label": "ຮູບ avatar ຫ້ອງ",
             "canonical_alias_field_label": "ທີ່ຢູ່ຫຼັກ",
-            "default_url_previews_off": "ການສະແດງຕົວຢ່າງ URL ຖືກປິດການນຳໃຊ້ໂດຍຄ່າເລີ່ມຕົ້ນສຳລັບຜູ້ເຂົ້າຮ່ວມໃນຫ້ອງນີ້.",
-            "default_url_previews_on": "ການສະແດງຕົວຢ່າງ URL ຖືກເປີດໃຊ້ໂດຍຄ່າເລີ່ມຕົ້ນສໍາລັບຜູ້ເຂົ້າຮ່ວມໃນຫ້ອງນີ້.",
             "description_space": "ແກ້ໄຂການຕັ້ງຄ່າທີ່ກ່ຽວຂ້ອງກັບພື້ນທີ່ຂອງທ່ານ.",
             "error_creating_alias_description": "ເກີດຄວາມຜິດພາດໃນການສ້າງທີ່ຢູ່ນັ້ນ. ມັນອາດຈະບໍ່ໄດ້ຮັບການອະນຸຍາດຈາກເຊີບເວີ ຫຼືບໍ່ສຳເລັດ ຊົ່ວຄາວເກີດຂຶ້ນ.",
             "error_creating_alias_title": "ເກີດຄວາມຜິດພາດໃນການສ້າງທີ່ຢູ່",
@@ -1602,12 +1600,7 @@
             "published_aliases_explainer_space": "ທີ່ຢູ່ທີ່ເຜີຍແຜ່ສາມາດຖືກນໍາໃຊ້ໂດຍຜູ້ໃດຜູ້ຫນຶ່ງໃນເຊີບເວີຂອງການເຂົ້າຮ່ວມຊ່ອງຂອງທ່ານ.",
             "published_aliases_section": "ທີ່ຢູ່ເຜີຍແຜ່",
             "save": "ບັນທຶກການປ່ຽນແປງ",
-            "topic_field_label": "ຫົວຂໍ້ຫ້ອງ",
-            "url_preview_encryption_warning": "ໃນຫ້ອງທີ່ເຂົ້າລະຫັດ, ເຊັ່ນດຽວກັບ, ການສະແດງຕົວຢ່າງ URLໄດ້ປິດໃຊ້ງານໂດຍຄ່າເລີ່ມຕົ້ນເພື່ອຮັບປະກັນວ່າ homeserver ຂອງທ່ານ (ບ່ອນສະແດງຕົວຢ່າງ) ບໍ່ສາມາດລວບລວມຂໍ້ມູນກ່ຽວກັບການເຊື່ອມຕໍ່ທີ່ທ່ານເຫັນຢູ່ໃນຫ້ອງນີ້.",
-            "url_preview_explainer": "ເມື່ອຜູ້ໃດຜູ້ນຶ່ງໃສ່ URL ໃນຂໍ້ຄວາມຂອງພວກເຂົາ, ການສະແດງຕົວຢ່າງ URL ສາມາດສະແດງເພື່ອໃຫ້ຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບການເຊື່ອມຕໍ່ນັ້ນເຊັ່ນຫົວຂໍ້, ຄໍາອະທິບາຍແລະຮູບພາບຈາກເວັບໄຊທ໌.",
-            "url_previews_section": "ຕົວຢ່າງ URL",
-            "user_url_previews_default_off": "ທ່ານໄດ້ <a>ປິດໃຊ້ງານ</a> ຕົວຢ່າງ URL ຕາມຄ່າເລີ່ມຕົ້ນ.",
-            "user_url_previews_default_on": "ທ່ານໄດ້ <a>ເປີດໃຊ້ງານ</a> ຕົວຢ່າງ URL ຕາມຄ່າເລີ່ມຕົ້ນ."
+            "topic_field_label": "ຫົວຂໍ້ຫ້ອງ"
         },
         "notifications": {
             "browse_button": "ຄົ້ນຫາ",
@@ -1869,8 +1862,6 @@
             "remove_msisdn_prompt": "ລຶບ %(phone)sອອກບໍ?"
         },
         "inline_url_previews_default": "ເປີດໃຊ້ການສະແດງຕົວຢ່າງ URL ໃນແຖວຕາມຄ່າເລີ່ມຕົ້ນ",
-        "inline_url_previews_room": "ເປີດໃຊ້ການສະແດງຕົວຢ່າງ URL ໂດຍຄ່າເລີ່ມຕົ້ນສໍາລັບຜູ້ເຂົ້າຮ່ວມໃນຫ້ອງນີ້",
-        "inline_url_previews_room_account": "ເປີດໃຊ້ຕົວຢ່າງ URL ສໍາລັບຫ້ອງນີ້ (ມີຜົນຕໍ່ທ່ານເທົ່ານັ້ນ)",
         "insert_trailing_colon_mentions": "ຈໍ້າສອງເມັດພາຍຫຼັງຈາກຜູ້ໃຊ້ກ່າວເຖິງໃນຕອນເລີ່ມຕົ້ນຂອງຂໍ້ຄວາມ",
         "jump_to_bottom_on_send": "ໄປຫາລຸ່ມສຸດຂອງທາມລາຍເມື່ອທ່ານສົ່ງຂໍ້ຄວາມ",
         "key_backup": {
diff --git a/apps/web/src/i18n/strings/lt.json b/apps/web/src/i18n/strings/lt.json
index a0bc2f2b9c..9b90d0b829 100644
--- a/apps/web/src/i18n/strings/lt.json
+++ b/apps/web/src/i18n/strings/lt.json
@@ -1197,8 +1197,6 @@
             "aliases_section": "Kambario Adresai",
             "avatar_field_label": "Kambario pseudoportretas",
             "canonical_alias_field_label": "Pagrindinis adresas",
-            "default_url_previews_off": "URL nuorodų peržiūros šio kambario dalyviams yra išjungtos kaip numatytosios.",
-            "default_url_previews_on": "URL nuorodų peržiūros šio kambario dalyviams yra įjungtos kaip numatytosios.",
             "description_space": "Redaguoti su savo erdve susijusius nustatymus.",
             "error_creating_alias_description": "Kuriant šį adresą įvyko klaida. Gali būti, kad serveris jo neleidžia arba įvyko laikina klaida.",
             "error_creating_alias_title": "Klaida kuriant adresą",
@@ -1225,12 +1223,7 @@
             "published_aliases_explainer_space": "Paskelbtus adresus gali naudoti bet kas bet kuriame serveryje, prisijungimui prie jūsų erdvės.",
             "published_aliases_section": "Paskelbti Adresai",
             "save": "Išsaugoti Pakeitimus",
-            "topic_field_label": "Kambario Tema",
-            "url_preview_encryption_warning": "Šifruotuose kambariuose, tokiuose kaip šis, URL nuorodų peržiūros pagal numatymą yra išjungtos, kad būtų užtikrinta, jog jūsų serveris (kur yra generuojamos peržiūros) negali rinkti informacijos apie jūsų šiame kambaryje peržiūrėtas nuorodas.",
-            "url_preview_explainer": "Kai kas nors į savo žinutę įtraukia URL, gali būti rodoma URL peržiūra, suteikianti daugiau informacijos apie tą nuorodą, tokios kaip pavadinimas, aprašymas ir vaizdas iš svetainės.",
-            "url_previews_section": "URL nuorodų peržiūros",
-            "user_url_previews_default_off": "Jūs <a>išjungėte</a> URL nuorodų peržiūras kaip numatytasias.",
-            "user_url_previews_default_on": "Jūs <a>įjungėte</a> URL nuorodų peržiūras kaip numatytasias."
+            "topic_field_label": "Kambario Tema"
         },
         "notifications": {
             "browse_button": "Naršyti",
@@ -1475,8 +1468,6 @@
             "remove_msisdn_prompt": "Pašalinti %(phone)s?"
         },
         "inline_url_previews_default": "Įjungti URL nuorodų peržiūras kaip numatytasias",
-        "inline_url_previews_room": "Įjungti URL nuorodų peržiūras kaip numatytasias šiame kambaryje esantiems dalyviams",
-        "inline_url_previews_room_account": "Įjungti URL nuorodų peržiūras šiame kambaryje (įtakoja tik jus)",
         "insert_trailing_colon_mentions": "Įterpti dvitaškį po naudotojo paminėjimų žinutės pradžioje",
         "jump_to_bottom_on_send": "Peršokti į laiko juostos apačią, kai siunčiate žinutę",
         "key_backup": {
diff --git a/apps/web/src/i18n/strings/lv.json b/apps/web/src/i18n/strings/lv.json
index 6ebf006013..d0c60566f7 100644
--- a/apps/web/src/i18n/strings/lv.json
+++ b/apps/web/src/i18n/strings/lv.json
@@ -1841,8 +1841,6 @@
             "aliases_section": "Istabas adreses",
             "avatar_field_label": "Istabas avatars",
             "canonical_alias_field_label": "Galvenā adrese",
-            "default_url_previews_off": "ULR priekšskatījumi šīs istabas dalībniekiem pēc noklusējuma ir atspējoti.",
-            "default_url_previews_on": "URL priekšskatījumi šīs istabas dalībniekiem pēc noklusējuma ir iespējoti.",
             "description_space": "Rediģējiet ar jūsu telpu saistītos iestatījumus.",
             "error_creating_alias_description": "Veidojot šo adresi, radās kļūda. Iespējams, serveris to neatļauj vai arī ir radusies īslaicīga kļūme.",
             "error_creating_alias_title": "Veidojot adresi, radās kļūda",
@@ -1869,12 +1867,7 @@
             "published_aliases_explainer_space": "Publicētās adreses var izmantot ikviens jebkurā serverī, lai pievienotos jūsu telpai.",
             "published_aliases_section": "Publiskotās adreses",
             "save": "Saglabāt izmaiņas",
-            "topic_field_label": "Istabas temats",
-            "url_preview_encryption_warning": "Šifrētās istabās, tādās kā šī, URL priekšskatījumi pēc noklusējumi ir atspējoti, lai nodrošinātu, ka mājasserveris (kurā priekšskatījumi tiek izveidoti) nevar iegūt informāciju par šajā istabā redzamajām saitēm.",
-            "url_preview_explainer": "Kad kāds savā ziņā ievieto URL, var tikt parādīts priekšskatījums, lai sniegtu vairāk informācijas par saiti, kā piemēram, virsraksts, apraksts un attēls no tīmekļvietnes.",
-            "url_previews_section": "URL priekšskatījumi",
-            "user_url_previews_default_off": "Tu pēc noklusējuma esi <a>atspējojis</a> URL priekšskatījumus.",
-            "user_url_previews_default_on": "Tu pēc noklusējuma esi <a>iespējojis</a> URL priekšskatījumus."
+            "topic_field_label": "Istabas temats"
         },
         "notifications": {
             "browse_button": "Pārlūkot",
@@ -2164,8 +2157,6 @@
             "spell_check_locale_placeholder": "Izvēlieties lokalizāciju"
         },
         "inline_url_previews_default": "Iespējot URL priekšskatījumus pēc noklusējuma",
-        "inline_url_previews_room": "Iespējot URL priekšskatījumus pēc noklusējuma visiem šīs istabas dalībniekiem",
-        "inline_url_previews_room_account": "Iespējot URL priekšskatījumus šajā istabā (ietekmē tikai Tevi)",
         "insert_trailing_colon_mentions": "Jāievieto beigu kols pēc lietotāja pieminēšanas ziņas sākumā",
         "jump_to_bottom_on_send": "Nosūtot ziņu, pāriet uz laika skalas beigām",
         "key_backup": {
diff --git a/apps/web/src/i18n/strings/mg_MG.json b/apps/web/src/i18n/strings/mg_MG.json
index 9012242c9f..c290f91b3e 100644
--- a/apps/web/src/i18n/strings/mg_MG.json
+++ b/apps/web/src/i18n/strings/mg_MG.json
@@ -1892,8 +1892,6 @@
             "aliases_section": "Adiresy ao amin'ny efitrano",
             "avatar_field_label": "Avatar efitra",
             "canonical_alias_field_label": "Adiresy lehibe",
-            "default_url_previews_off": "Ny fijeriny URL dia esorina hoany mpandray anjara amin'ity efitrano ity.",
-            "default_url_previews_on": "Ny fijerena URL dia alefa amin'ny alàlany default hoany mpandray anjara amin'ity efitrano ity.",
             "description_space": "Ahitsio ny kira mifandraika amin'ny habakabaka.",
             "error_creating_alias_description": "Nisy lesoka tamin'ny famoronana io adiresy io. Mety tsy avelany mpizara izany na nisy tsy fahombiazana vonjimaika.",
             "error_creating_alias_title": "Hadisoana tamin'ny famoronana adiresy",
@@ -1920,12 +1918,7 @@
             "published_aliases_explainer_space": "Ny adiresy navoaka dia azon'ny olona ampiasaina aminy mpizara rehetra mba hiditra amin'ny habakao.",
             "published_aliases_section": "Adiresy navoaka",
             "save": "Alaina ny fanovana",
-            "topic_field_label": "Lohahevitra Efitrano",
-            "url_preview_encryption_warning": "Ao aminy efitrano misy miafina, toa an'ity iray ity, ny fijerena URL dia kilemaina amin'ny alàlany default mba hahazoana antoka fa tsy afaka manangona fampahalalana momba ny rohy hitanao ao amin'ity efitrano ity ny mpampiantrano anao (izay anaovana ny preview).",
-            "url_preview_explainer": "Rehefa misy olona mametraka URL ao amin'ny hafany, dia azo aseho ny fijerena URL mba hanomezana fampahalalana bebe kokoa momba an'io rohy io toy ny lohateny, famaritana, ary sary avy aminy tranokala.",
-            "url_previews_section": "Topi-maso amin'ny Url",
-            "user_url_previews_default_off": "Ianao dia manana<a> sembana</a> Zahao ny URL amin'ny alàlany default.",
-            "user_url_previews_default_on": "Ianao dia manana<a> afaka</a> Zahao ny URL aminy alàlan'ny default."
+            "topic_field_label": "Lohahevitra Efitrano"
         },
         "notifications": {
             "browse_button": "Mikaroka",
@@ -2231,8 +2224,6 @@
             "spell_check_locale_placeholder": "Misafidiana toerana iray"
         },
         "inline_url_previews_default": "Alefaso ny fijerena URL an-tserasera aminy alàlan'ny default",
-        "inline_url_previews_room": "Alefaso amin'ny alàlany ara-pototra hoany mpandray anjara amin'ity efitrano ity ny fijerena URL",
-        "inline_url_previews_room_account": "Alefaso ny fijerena URL ho an'ity efitrano ity (miantraika aminao ihany)",
         "insert_trailing_colon_mentions": "Ampidiro tsangambato aoriana aorian'ny fiteny mpampiasa eo am-piandohany hafatra",
         "jump_to_bottom_on_send": "Mankanesa any amin'ny farany fandaharam-potoana rehefa mandefa hafatra ianao",
         "key_backup": {
diff --git a/apps/web/src/i18n/strings/nb_NO.json b/apps/web/src/i18n/strings/nb_NO.json
index 0c1a647d0e..70c828465e 100644
--- a/apps/web/src/i18n/strings/nb_NO.json
+++ b/apps/web/src/i18n/strings/nb_NO.json
@@ -2218,8 +2218,6 @@
             "aliases_section": "Rom-adresser",
             "avatar_field_label": "Rommets avatar",
             "canonical_alias_field_label": "Hovedadresse",
-            "default_url_previews_off": "URL-forhåndsvisninger er skrudd av som standard for deltakerene i dette rommet.",
-            "default_url_previews_on": "URL-forhåndsvisninger er skrudd på som standard for deltakerene i dette rommet.",
             "description_space": "Rediger innstillinger knyttet til området ditt.",
             "error_creating_alias_description": "Det oppstod en feil ved opprettelsen av adressen. Det kan hende at serveren ikke tillater det, eller at det oppstod en midlertidig feil.",
             "error_creating_alias_title": "Feil ved oppretting av adresse",
@@ -2250,12 +2248,7 @@
             "published_aliases_explainer_space": "Publiserte adresser kan brukes av hvem som helst på hvilken som helst server for å bli med i ditt område.",
             "published_aliases_section": "Publiserte adresser",
             "save": "Lagre endringer",
-            "topic_field_label": "Rommets tema",
-            "url_preview_encryption_warning": "I krypterte rom som denne, er URL-forhåndsvisninger skrudd av som standard for å sikre at hjemmeserveren din (der forhåndsvisningene blir generert) ikke kan samle inn informasjon om lenkene som du ser i dette rommet.",
-            "url_preview_explainer": "Når noen legger til en URL i meldingene deres, kan en URL-forhåndsvisning bli vist for å gi mere informasjonen om den lenken, f.eks. tittelen, beskrivelsen, og et bilde fra nettstedet.",
-            "url_previews_section": "URL-forhåndsvisninger",
-            "user_url_previews_default_off": "Du har <a>skrudd av</a> URL-forhåndsvisninger som standard.",
-            "user_url_previews_default_on": "Du har <a>skrudd på</a> URL-forhåndsvisninger som standard."
+            "topic_field_label": "Rommets tema"
         },
         "notifications": {
             "browse_button": "Bla",
@@ -2677,8 +2670,6 @@
             "username": "Brukernavn"
         },
         "inline_url_previews_default": "Skru på URL-forhåndsvisninger inni meldinger som standard",
-        "inline_url_previews_room": "Skru på URL-forhåndsvisninger som standard for deltakerne i dette rommet",
-        "inline_url_previews_room_account": "Skru på URL-forhåndsvisninger for dette rommet (Påvirker bare deg)",
         "insert_trailing_colon_mentions": "Sett inn et etterfølgende kolon etter at brukeromtaler i starten av en melding",
         "invite_controls": {
             "default_label": "Tillat brukere å invitere deg til rom"
diff --git a/apps/web/src/i18n/strings/nl.json b/apps/web/src/i18n/strings/nl.json
index d1262d0bb1..39df2fb253 100644
--- a/apps/web/src/i18n/strings/nl.json
+++ b/apps/web/src/i18n/strings/nl.json
@@ -1619,8 +1619,6 @@
             "aliases_section": "Kameradressen",
             "avatar_field_label": "Kamerafbeelding",
             "canonical_alias_field_label": "Hoofdadres",
-            "default_url_previews_off": "URL-voorvertoningen zijn voor deelnemers van deze kamer standaard uitgeschakeld.",
-            "default_url_previews_on": "URL-voorvertoningen zijn voor deelnemers van deze kamer standaard ingeschakeld.",
             "description_space": "Bewerk instellingen gerelateerd aan jouw space.",
             "error_creating_alias_description": "Er is een fout opgetreden bij het aanmaken van dit adres. Dit wordt mogelijk niet toegestaan door de server, of er is een tijdelijk probleem opgetreden.",
             "error_creating_alias_title": "Fout bij aanmaken van het adres",
@@ -1647,12 +1645,7 @@
             "published_aliases_explainer_space": "Gepubliceerde adressen kunnen door iedereen op elke server gebruikt worden om jouw Space te betreden.",
             "published_aliases_section": "Gepubliceerde adressen",
             "save": "Wijzigingen opslaan",
-            "topic_field_label": "Kameronderwerp",
-            "url_preview_encryption_warning": "In versleutelde kamers zoals deze zijn URL-voorvertoningen standaard uitgeschakeld, om te voorkomen dat jouw homeserver (waar de voorvertoningen worden gemaakt) informatie kan verzamelen over de koppelingen die je hier ziet.",
-            "url_preview_explainer": "Als iemand een URL in een bericht invoegt, kan er een URL-voorvertoning weergegeven worden met meer informatie over de koppeling, zoals de titel, omschrijving en een afbeelding van de website.",
-            "url_previews_section": "URL-voorvertoningen",
-            "user_url_previews_default_off": "Je hebt URL-voorvertoningen standaard <a>uitgeschakeld</a>.",
-            "user_url_previews_default_on": "Je hebt URL-voorvertoningen standaard <a>ingeschakeld</a>."
+            "topic_field_label": "Kameronderwerp"
         },
         "notifications": {
             "browse_button": "Bladeren",
@@ -1924,8 +1917,6 @@
             "spell_check_locale_placeholder": "Kies een landinstelling"
         },
         "inline_url_previews_default": "Inline URL-voorvertoning standaard inschakelen",
-        "inline_url_previews_room": "URL-voorvertoning voor alle deelnemers aan deze kamer standaard inschakelen",
-        "inline_url_previews_room_account": "URL-voorvertoning in dit kamer inschakelen (geldt alleen voor jou)",
         "insert_trailing_colon_mentions": "Voeg een dubbele punt in nadat de persoon het aan het begin van een bericht heeft vermeld",
         "jump_to_bottom_on_send": "Naar de onderkant van de tijdlijn springen wanneer je een bericht verstuurd",
         "key_backup": {
diff --git a/apps/web/src/i18n/strings/pl.json b/apps/web/src/i18n/strings/pl.json
index 7ca20bc041..53a1edb041 100644
--- a/apps/web/src/i18n/strings/pl.json
+++ b/apps/web/src/i18n/strings/pl.json
@@ -2184,8 +2184,6 @@
             "aliases_section": "Adresy pokoju",
             "avatar_field_label": "Awatar pokoju",
             "canonical_alias_field_label": "Główny adres",
-            "default_url_previews_off": "Podgląd linków są domyślnie wyłączone dla uczestników tego pokoju.",
-            "default_url_previews_on": "Podgląd linków są domyślnie włączone dla uczestników tego pokoju.",
             "description_space": "Edytuj ustawienia powiązane z twoją przestrzenią.",
             "error_creating_alias_description": "Wystąpił błąd podczas aktualizowania tego adresu. Serwer mógł odrzucić żądanie lub wystąpił błąd tymczasowy.",
             "error_creating_alias_title": "Wystąpił błąd podczas tworzenia adresu",
@@ -2214,12 +2212,7 @@
             "published_aliases_explainer_space": "Opublikowane adresy mogą być używane przez każdego, kto dołączył do Twojej przestrzeni.",
             "published_aliases_section": "Opublikowane adresy",
             "save": "Zapisz zmiany",
-            "topic_field_label": "Temat pokoju",
-            "url_preview_encryption_warning": "W pokojach szyfrowanych, takich jak ten, podgląd adresów URL jest domyślnie wyłączony, aby upewnić się, że serwer (na którym generowane są podglądy) nie może zbierać informacji o linkach, które widzisz w pokoju.",
-            "url_preview_explainer": "Gdy ktoś umieści URL w wiadomości, można wyświetlić podgląd adresu URL, aby podać więcej informacji o tym łączu, takich jak tytuł, opis i obraz ze strony internetowej.",
-            "url_previews_section": "Podgląd linków",
-            "user_url_previews_default_off": "Podgląd linków jest domyślnie <a>wyłączony</a>.",
-            "user_url_previews_default_on": "Podgląd linków jest domyślnie <a>włączony</a>."
+            "topic_field_label": "Temat pokoju"
         },
         "notifications": {
             "browse_button": "Przeglądaj",
@@ -2639,8 +2632,6 @@
             "username": "Nazwa użytkownika"
         },
         "inline_url_previews_default": "Włącz domyślny podgląd URL w tekście",
-        "inline_url_previews_room": "Włącz domyślny podgląd URL dla uczestników w tym pokoju",
-        "inline_url_previews_room_account": "Włącz podgląd URL dla tego pokoju (dotyczy tylko Ciebie)",
         "insert_trailing_colon_mentions": "Wstawiaj dwukropek po wzmiance użytkownika na początku wiadomości",
         "invite_controls": {
             "default_label": "Zezwól użytkownikom na zapraszanie Cię do pokojów"
diff --git a/apps/web/src/i18n/strings/pt.json b/apps/web/src/i18n/strings/pt.json
index 9c5b4ca25f..64957224e6 100644
--- a/apps/web/src/i18n/strings/pt.json
+++ b/apps/web/src/i18n/strings/pt.json
@@ -2082,8 +2082,6 @@
             "aliases_section": "Endereços de salas",
             "avatar_field_label": "Avatar da sala",
             "canonical_alias_field_label": "Endereço principal",
-            "default_url_previews_off": "As pré-visualizações de URL estão desactivadas por predefinição para os participantes nesta sala.",
-            "default_url_previews_on": "As pré-visualizações de URL estão activadas por predefinição para os participantes nesta sala.",
             "description_space": "Edita as definições relativas ao teu espaço.",
             "error_creating_alias_description": "Ocorreu um erro ao criares esse endereço. Pode não ser permitido pelo servidor ou ocorreu uma falha temporária.",
             "error_creating_alias_title": "Erro ao criar o endereço",
@@ -2112,12 +2110,7 @@
             "published_aliases_explainer_space": "Os endereços publicados podem ser usados por qualquer pessoa em qualquer servidor para se juntar ao teu espaço.",
             "published_aliases_section": "Endereços publicados",
             "save": "Salvar Alterações",
-            "topic_field_label": "Tópico da sala",
-            "url_preview_encryption_warning": "Em salas encriptadas, como esta, as pré-visualizações de URL são desactivadas por predefinição para garantir que o teu servidor doméstico (onde as pré-visualizações são geradas) não pode recolher informações sobre as ligações que vês nesta sala.",
-            "url_preview_explainer": "Quando alguém coloca um URL na sua mensagem, pode ser mostrada uma pré-visualização do URL para dar mais informações sobre essa ligação, como o título, a descrição e uma imagem do sítio Web.",
-            "url_previews_section": "Pré-visualização de links",
-            "user_url_previews_default_off": "Você <a>desabilitou</a> pré-visualizações de links por padrão.",
-            "user_url_previews_default_on": "Você <a>habilitou</a> pré-visualizações de links por padrão."
+            "topic_field_label": "Tópico da sala"
         },
         "notifications": {
             "browse_button": "Navegar",
@@ -2520,8 +2513,6 @@
             "username": "Nome de utilizador"
         },
         "inline_url_previews_default": "Ativar pré-visualizações de URL embutidas por predefinição",
-        "inline_url_previews_room": "Ativar pré-visualizações de URL por defeito para os participantes nesta sala",
-        "inline_url_previews_room_account": "Ativar pré-visualizações URL para esta sala (só te afeta a ti)",
         "insert_trailing_colon_mentions": "Insere dois pontos após as menções do utilizador no início de uma mensagem",
         "jump_to_bottom_on_send": "Salta para o fundo da linha de tempo quando enviar uma mensagem",
         "key_backup": {
diff --git a/apps/web/src/i18n/strings/pt_BR.json b/apps/web/src/i18n/strings/pt_BR.json
index 3f8d69fed1..6941da75d6 100644
--- a/apps/web/src/i18n/strings/pt_BR.json
+++ b/apps/web/src/i18n/strings/pt_BR.json
@@ -2195,8 +2195,6 @@
             "aliases_section": "Endereços da sala",
             "avatar_field_label": "Foto da sala",
             "canonical_alias_field_label": "Endereço principal",
-            "default_url_previews_off": "Pré-visualizações de links estão desativadas por padrão para participantes desta sala.",
-            "default_url_previews_on": "Pré-visualizações de links estão ativadas por padrão para participantes desta sala.",
             "description_space": "Editar configurações relacionadas ao seu espaço.",
             "error_creating_alias_description": "Ocorreu um erro ao criar esse endereço. Isso pode não ser permitido pelo servidor ou houve um problema temporário.",
             "error_creating_alias_title": "Erro ao criar o endereço",
@@ -2225,12 +2223,7 @@
             "published_aliases_explainer_space": "Endereços publicados podem ser usados por qualquer um em qualquer servidor para entrar em seu espaço.",
             "published_aliases_section": "Endereços publicados",
             "save": "Salvar alterações",
-            "topic_field_label": "Descrição da sala",
-            "url_preview_encryption_warning": "Em salas criptografadas, como esta, as pré-visualizações de links estão desativadas por padrão para garantir que o seu servidor local (onde as visualizações são geradas) não possa coletar informações sobre os links que você vê nesta sala.",
-            "url_preview_explainer": "Quando alguém inclui um link em uma mensagem, a pré-visualização do link pode ser exibida para fornecer mais informações sobre esse link, como o título, a descrição e uma imagem do site.",
-            "url_previews_section": "Pré-visualização de links",
-            "user_url_previews_default_off": "Você <a>desativou</a> pré-visualizações de links por padrão.",
-            "user_url_previews_default_on": "Você <a>ativou</a> pré-visualizações de links por padrão."
+            "topic_field_label": "Descrição da sala"
         },
         "notifications": {
             "browse_button": "Buscar",
@@ -2650,8 +2643,6 @@
             "username": "Nome de usuário"
         },
         "inline_url_previews_default": "Ativar, por padrão, a visualização de resumo de links",
-        "inline_url_previews_room": "Ativar, para todos os participantes desta sala, a visualização de links",
-        "inline_url_previews_room_account": "Ativar, para esta sala, a visualização de links (só afeta você)",
         "insert_trailing_colon_mentions": "Insira dois pontos à direita após o usuário mencionar no início de uma mensagem",
         "invite_controls": {
             "default_label": "Permitir que usuários convidem você para salas"
diff --git a/apps/web/src/i18n/strings/ru.json b/apps/web/src/i18n/strings/ru.json
index d89f064ffc..0cc7277f64 100644
--- a/apps/web/src/i18n/strings/ru.json
+++ b/apps/web/src/i18n/strings/ru.json
@@ -11,18 +11,18 @@
             "other": "%(count)s непрочитанных сообщения(-й), включая упоминания.",
             "one": "1 непрочитанное упоминание."
         },
-        "recent_rooms": "Недавние комнаты",
-        "room_name": "Комната %(name)s",
-        "room_status_bar": "Строка состояния комнаты",
+        "recent_rooms": "Недавние чаты",
+        "room_name": "Чат %(name)s",
+        "room_status_bar": "Строка состояния чата",
         "seek_bar_label": "Панель поиска аудио",
         "unread_messages": "Непрочитанные сообщения.",
         "user_menu": "Меню пользователя"
     },
-    "a11y_jump_first_unread_room": "Перейти в первую непрочитанную комнату.",
+    "a11y_jump_first_unread_room": "Перейти в первый непрочитанный чат.",
     "action": {
         "accept": "Принять",
         "add": "Добавить",
-        "add_existing_room": "Добавить существующую комнату",
+        "add_existing_room": "Добавить существующий чат",
         "add_people": "Добавить людей",
         "apply": "Применить",
         "approve": "Согласиться",
@@ -41,7 +41,7 @@
         "copy": "Копировать",
         "copy_link": "Копировать ссылку",
         "create": "Создать",
-        "create_a_room": "Создать комнату",
+        "create_a_room": "Создать чат",
         "create_account": "Создать учётную запись",
         "decline": "Отклонить",
         "decline_and_block": "Отклонить и заблокировать",
@@ -58,7 +58,7 @@
         "enter_fullscreen": "Перейти в полноэкранный режим",
         "exit_fullscreeen": "Выйти из полноэкранного режима",
         "expand": "Развернуть",
-        "explore_public_rooms": "Просмотреть публичные комнаты",
+        "explore_public_rooms": "Просмотреть публичные групповые чаты",
         "explore_rooms": "Обзор комнат",
         "export": "Экспорт",
         "forward": "Переслать",
@@ -75,14 +75,14 @@
         "join": "Войти",
         "learn_more": "Узнать больше",
         "leave": "Покинуть",
-        "leave_room": "Покинуть комнату",
+        "leave_room": "Покинуть чат",
         "logout": "Выйти",
         "manage": "Управление",
         "maximise": "Развернуть",
         "mention": "Упомянуть",
         "minimise": "Свернуть",
-        "new_room": "Новая комната",
-        "new_video_room": "Новая видеокомната",
+        "new_room": "Новый чат",
+        "new_video_room": "Новый видеочат",
         "next": "Далее",
         "no": "Нет",
         "ok": "ОК",
@@ -147,7 +147,7 @@
     },
     "analytics": {
         "accept_button": "Всё в порядке",
-        "bullet_1": "Мы <<Bold>не</Bold> записываем и <Bold>не</Bold> профилируем любые данные учетной записи",
+        "bullet_1": "Мы <Bold>не</Bold> записываем и <Bold>не</Bold> профилируем любые данные аккаунта",
         "bullet_2": "Мы <Bold>не</Bold> передаем информацию третьим лицам",
         "consent_migration": "Ранее вы давали согласие на передачу нам анонимных данных об использовании. Мы изменили порядок предоставления этих данных.",
         "disable_prompt": "Вы можете отключить это в любое время в настройках",
@@ -219,7 +219,7 @@
         "incorrect_password": "Неверный пароль",
         "log_in_new_account": "<a>Войти</a> в новую учётную запись.",
         "logout_dialog": {
-            "description": "Уверены, что хотите выйти?",
+            "description": "Вы уверены, что хотите удалить это устройство?",
             "megolm_export": "Выгрузить ключи вручную",
             "setup_key_backup_title": "Вы потеряете доступ к вашим шифрованным сообщениям",
             "setup_secure_backup_description_1": "Эти сообщения защищены сквозным шифрованием. Только вы и ваш собеседник имеете ключи для их расшифровки и чтения.",
@@ -229,7 +229,7 @@
         "misconfigured_body": "Попросите администратора %(brand)s проверить <a>конфигурационный файл</a> на наличие неправильных или повторяющихся записей.",
         "misconfigured_title": "Ваш %(brand)s неправильно настроен",
         "mobile_create_account_title": "Вы собираетесь создать учетную запись на %(hsName)s",
-        "msisdn_field_description": "Другие пользователи могут приглашать вас в комнаты, используя ваши контактные данные",
+        "msisdn_field_description": "Другие пользователи могут приглашать вас в чаты, используя ваши контактные данные",
         "msisdn_field_label": "Телефон",
         "msisdn_field_number_invalid": "Этот номер телефона неправильный, проверьте его и повторите попытку",
         "msisdn_field_required_invalid": "Введите номер телефона",
@@ -298,7 +298,7 @@
             "confirm_new_password": "Подтвердите новый пароль",
             "devices_logout_success": "Вы вышли из всех устройств и больше не будете получать push-уведомления. Для повторного включения уведомлений снова войдите на каждом устройстве.",
             "other_devices_logout_warning_1": "При выходе из устройств удаляются хранящиеся на них ключи шифрования сообщений, что сделает зашифрованную историю чатов нечитаемой.",
-            "other_devices_logout_warning_2": "Если вы хотите сохранить доступ к истории общения в зашифрованных комнатах, настройте резервное копирование ключей или экспортируйте ключи сообщений с одного из других ваших устройств, прежде чем продолжить.",
+            "other_devices_logout_warning_2": "Если вы хотите сохранить доступ к истории общения в зашифрованных чатах, настройте резервное копирование ключей или экспортируйте ключи сообщений с одного из других ваших устройств, прежде чем продолжить.",
             "password_not_entered": "Введите новый пароль.",
             "passwords_mismatch": "Новые пароли должны совпадать.",
             "rate_limit_error": "Слишком много попыток за короткое время. Подождите некоторое время, прежде чем повторить попытку.",
@@ -329,7 +329,7 @@
         "server_picker_title_default": "Параметры сервера",
         "server_picker_title_registration": "Ваша учётная запись обслуживается",
         "session_logged_out_description": "Для обеспечения безопасности ваш сеанс был завершён. Пожалуйста, войдите снова.",
-        "session_logged_out_title": "Выполнен выход",
+        "session_logged_out_title": "Сеанс удалён",
         "set_email": {
             "description": "Это позволит при необходимости сбросить пароль и получать уведомления.",
             "verification_pending_description": "Проверьте свою электронную почту и нажмите на ссылку в письме. После этого нажмите кнопку Продолжить.",
@@ -359,7 +359,7 @@
         "sso_complete_in_browser_dialog_title": "Перейдите в браузер для завершения входа",
         "sso_failed_missing_storage": "Мы попросили браузер запомнить, какой домашний сервер вы используете для входа в систему, но, к сожалению, ваш браузер забыл об этом. Перейдите на страницу входа и попробуйте ещё раз.",
         "sso_or_username_password": "%(ssoButtons)s или %(usernamePassword)s",
-        "sync_footer_subtitle": "Если вы присоединились к большому количеству комнат, это может занять некоторое время",
+        "sync_footer_subtitle": "Если вы присоединились к большому количеству чатов, это может занять некоторое время",
         "syncing": "Синхронизация…",
         "uia": {
             "code": "Код",
@@ -369,8 +369,8 @@
             "email_resent": "Отправлено повторно!",
             "fallback_button": "Начать аутентификацию",
             "mas_cross_signing_reset_cta": "Перейти к учетной записи",
-            "mas_cross_signing_reset_description": "Сбросьте свои данные через поставщика учетной записи, а затем вернитесь и нажмите «Повторить».",
-            "mas_cross_signing_reset_title": "Перейдите в свою учетную запись, чтобы сбросить свою личность",
+            "mas_cross_signing_reset_description": "Вы собираетесь перейти в свой аккаунт %(serverName)s, чтобы сбросить настройки своей идентификации. Как только вы завершите сброс настроек в аккаунте, вернитесь сюда и нажми «Повторить».",
+            "mas_cross_signing_reset_title": "Перейдите в свою учетную запись, чтобы сбросить идентификацию",
             "msisdn": "Текстовое сообщение отправлено на %(msisdn)s",
             "msisdn_token_incorrect": "Неверный код проверки",
             "msisdn_token_prompt": "Введите полученный код:",
@@ -529,7 +529,7 @@
         "offline": "Не в сети",
         "on": "Включить",
         "options": "Дополнительно",
-        "orphan_rooms": "Прочие комнаты",
+        "orphan_rooms": "Прочие чаты",
         "password": "Пароль",
         "people": "Люди",
         "preferences": "Параметры",
@@ -537,20 +537,20 @@
         "preview_message": "Эй! Ты лучший!",
         "privacy": "Конфиденциальность",
         "private": "Приватное",
-        "private_room": "Приватная комната",
+        "private_room": "Приватный чат",
         "private_space": "Приватное пространство",
         "profile": "Профиль",
         "public": "Публичное",
-        "public_room": "Публичная комната",
+        "public_room": "Публичный чат",
         "public_space": "Публичное пространство",
         "qr_code": "QR-код",
         "random": "Случайный",
         "reactions": "Реакции",
         "recommended": "Рекомендуемое",
         "report_a_bug": "Сообщить об ошибке",
-        "room": "Комната",
-        "room_name": "Название комнаты",
-        "rooms": "Комнаты",
+        "room": "Чат",
+        "room_name": "Название чата",
+        "rooms": "Чаты",
         "save": "Сохранить",
         "saved": "Сохранено",
         "saving": "Сохранение…",
@@ -577,7 +577,7 @@
         "unavailable": "недоступен",
         "unencrypted": "Не зашифровано",
         "unmute": "Вернуть право речи",
-        "unnamed_room": "Комната без названия",
+        "unnamed_room": "Чат без названия",
         "unnamed_space": "Безымянное пространство",
         "unverified": "Не заверено",
         "updating": "Обновление…",
@@ -587,20 +587,20 @@
         "verified": "Заверено",
         "version": "Версия",
         "video": "Видео",
-        "video_room": "Видеокомната",
+        "video_room": "Видеочат",
         "view_message": "Посмотреть сообщение",
         "voice": "Голос",
         "warning": "Внимание"
     },
     "composer": {
         "autocomplete": {
-            "@room_description": "Уведомить всю комнату",
+            "@room_description": "Уведомить весь чат",
             "command_a11y": "Автозаполнение команды",
             "command_description": "Команды",
             "emoji_a11y": "Автодополнение смайлов",
             "notification_a11y": "Автозаполнение уведомлений",
-            "notification_description": "Уведомления комнаты",
-            "room_a11y": "Автозаполнение комнаты",
+            "notification_description": "Уведомления чата",
+            "room_a11y": "Автозаполнение чата",
             "space_a11y": "Автозаполнение пространства",
             "user_a11y": "Автозаполнение пользователя",
             "user_description": "Пользователи"
@@ -629,7 +629,7 @@
         },
         "mode_plain": "Скрыть форматирование",
         "mode_rich_text": "Показать форматирование",
-        "no_perms_notice": "Вы не можете писать в эту комнату",
+        "no_perms_notice": "Вы не можете писать в этот чат",
         "placeholder": "Отправить незашифрованное сообщение...",
         "placeholder_encrypted": "Отправить зашифрованное сообщение…",
         "placeholder_reply": "Отправить незашифрованный ответ…",
@@ -637,12 +637,12 @@
         "placeholder_thread": "Ответить в небезопасном обсуждение…",
         "placeholder_thread_encrypted": "Ответить в обсуждение…",
         "poll_button": "Опрос",
-        "poll_button_no_perms_description": "У вас нет разрешения начинать опросы в этой комнате.",
+        "poll_button_no_perms_description": "У вас нет разрешения начинать опросы в этом чате",
         "poll_button_no_perms_title": "Требуется разрешение",
         "replying_title": "Отвечает",
         "room_unencrypted": "Сообщения в этой комнате не защищены сквозным шифрованием.",
         "room_upgraded_link": "Разговор продолжается здесь.",
-        "room_upgraded_notice": "Эта комната заменена и более неактивна.",
+        "room_upgraded_notice": "Этот чат заменён и более неактивен.",
         "send_button_title": "Отправить сообщение",
         "send_button_voice_message": "Отправить голосовое сообщение",
         "send_voice_message": "Отправить голосовое сообщение",
@@ -653,33 +653,33 @@
     "console_scam_warning": "Если кто-то сказал вам скопировать/вставить что-то здесь, велика вероятность, что вас пытаются обмануть!",
     "console_wait": "Подождите!",
     "create_room": {
-        "action_create_room": "Создать комнату",
-        "action_create_video_room": "Создать видеокомнату",
-        "encrypted_video_room_warning": "Вы не сможете отключить это позже. Комната будет зашифрована, а встроенный вызов — нет.",
+        "action_create_room": "Создать чат",
+        "action_create_video_room": "Создать видеочат",
+        "encrypted_video_room_warning": "Вы не сможете отключить это позже. Чат будет зашифрован, а встроенный вызов — нет.",
         "encrypted_warning": "Вы не сможете отключить это позже. Мосты и большинство ботов пока не будут работать.",
-        "encryption_forced": "Вашему серверу необходимо включить шифрование в приватных комнатах.",
+        "encryption_forced": "Вашему серверу необходимо включить шифрование в приватных чатах.",
         "encryption_label": "Включить сквозное шифрование",
-        "error_title": "Не удалось создать комнату",
+        "error_title": "Не удалось создать чат",
         "generic_error": "Возможно, сервер недоступен, перегружен или случилась ошибка.",
-        "join_rule_change_notice": "Вы можете изменить это в любое время из настроек комнаты.",
-        "join_rule_invite": "Приватная комната (только по приглашению)",
-        "join_rule_invite_label": "Только приглашенные люди смогут найти и присоединиться к этой комнате.",
+        "join_rule_change_notice": "Вы можете изменить это в любое время из настроек чата.",
+        "join_rule_invite": "Приватный чат (только по приглашению)",
+        "join_rule_invite_label": "Только приглашенные люди смогут найти и присоединиться к этому чату.",
         "join_rule_knock_label": "Любой желающий может подать заявку на участие, но администраторы или модераторы должны предоставить доступ. Это можно изменить позже.",
-        "join_rule_public_label": "Любой желающий сможет найти эту комнату и присоединиться к ней.",
-        "join_rule_public_parent_space_label": "Любой сможет найти и присоединиться к этой комнате, а не только участники <SpaceName/>.",
+        "join_rule_public_label": "Любой желающий сможет найти этот чат и присоединиться к нему.",
+        "join_rule_public_parent_space_label": "Любой сможет найти и присоединиться к этому чату, а не только участники <SpaceName/>.",
         "join_rule_restricted": "Стандартная",
         "join_rule_restricted_label": "Любой может присоединиться в <SpaceName/>.",
-        "name_validation_required": "Пожалуйста, введите название комнаты",
-        "room_visibility_label": "Видимость комнаты",
+        "name_validation_required": "Пожалуйста, введите название чата",
+        "room_visibility_label": "Видимость чата",
         "state_encryption_label": "Шифровать события состояния",
-        "title_private_room": "Создать приватную комнату",
-        "title_public_room": "Создать публичную комнату",
+        "title_private_room": "Создать приватный чат",
+        "title_public_room": "Создать групповой чат",
         "title_video_room": "Создайте видеокомнату",
         "topic_label": "Тема (опционально)",
-        "unfederated": "Запретить кому-либо, не входящему в %(serverName)s, когда-либо присоединяться к этой комнате.",
+        "unfederated": "Запретить кому-либо, не входящему в %(serverName)s, когда-либо присоединяться к этому чату.",
         "unfederated_label_default_off": "Вы можете включить это, если комната будет использоваться только для совместной работы с внутренними командами на вашем домашнем сервере. Это не может быть изменено позже.",
         "unfederated_label_default_on": "Вы можете отключить это, если комната будет использоваться для совместной работы с внешними командами, у которых есть собственный домашний сервер. Это не может быть изменено позже.",
-        "unsupported_version": "Сервер не поддерживает указанную версию комнаты."
+        "unsupported_version": "Сервер не поддерживает указанную версию чата."
     },
     "create_space": {
         "add_details_prompt": "Добавьте некоторые подробности, чтобы помочь людям узнать его.",
@@ -689,11 +689,11 @@
         "address_label": "Адрес",
         "address_placeholder": "например, my-space",
         "creating": "Создание…",
-        "creating_rooms": "Создание комнат…",
+        "creating_rooms": "Создание чата…",
         "done_action": "В моё пространство",
-        "done_action_first_room": "Перейти в мою первую комнату",
-        "explainer": "Пространства — это новый способ организации комнат и людей. Какой вид пространства вы хотите создать? Вы можете изменить это позже.",
-        "failed_create_initial_rooms": "Не удалось создать первоначальные комнаты пространства",
+        "done_action_first_room": "Перейти в мой первый чат",
+        "explainer": "Пространства — это новый способ организации комнат. Какой тип пространства вы хотите создать?",
+        "failed_create_initial_rooms": "Не удалось создать первоначальные чаты пространства",
         "failed_invite_users": "Не удалось пригласить следующих пользователей в ваше пространство: %(csvUsers)s",
         "invite_teammates_by_username": "Пригласить по имени пользователя",
         "invite_teammates_description": "Убедитесь, что правильные люди имеют доступ. Вы можете пригласить больше людей позже.",
@@ -703,20 +703,20 @@
         "name_required": "Пожалуйста, введите название пространства",
         "personal_space": "Только я",
         "personal_space_description": "Приватное пространство для организации ваших комнат",
-        "private_description": "Только по приглашениям, лучший вариант для себя или команды",
+        "private_description": "Только по приглашению, для личного пользования или для команды.",
         "private_heading": "Ваше приватное пространство",
         "private_only_heading": "Ваше пространство",
         "private_personal_description": "Убедитесь, что правильные люди имеют доступ к %(name)s",
         "private_personal_heading": "С кем вы работаете?",
         "private_space": "Я и мои товарищи по команде",
         "private_space_description": "Приватное пространство для вас и ваших товарищей по команде",
-        "public_description": "Открытое пространство для всех, лучший вариант для сообществ",
+        "public_description": "Присоединиться может кто угодно, лучший вариант для создания сообществ.",
         "public_heading": "Ваше публичное пространство",
         "search_public_button": "Поиск публичных пространств",
-        "setup_rooms_community_description": "Давайте создадим для каждого из них отдельную комнату.",
+        "setup_rooms_community_description": "Для начала создайте несколько чатов.",
         "setup_rooms_community_heading": "Какие вещи вы хотите обсуждать в %(spaceName)s?",
         "setup_rooms_description": "Позже можно добавить и другие, в том числе уже существующие.",
-        "setup_rooms_private_description": "Мы создадим комнаты для каждого из них.",
+        "setup_rooms_private_description": "Для начала создайте несколько комнат.",
         "setup_rooms_private_heading": "Над какими проектами ваша команда работает?",
         "share_description": "Сейчас здесь только ты, с другими будет ещё лучше.",
         "share_heading": "Поделиться %(name)s",
@@ -738,16 +738,16 @@
     },
     "decline_invitation_dialog": {
         "confirm": "Вы действительно хотите отклонить приглашение присоединиться \"%(roomName)s\"?",
-        "ignore_user_help": "Вы не увидите сообщений или приглашений в комнату от этого пользователя.",
+        "ignore_user_help": "Вы не увидите сообщений или приглашений в чатах от этого пользователя.",
         "reason_description": "Опишите причину сообщения о проблеме.",
-        "report_room_description": "Сообщите об этой комнате своему поставщику учетной записи.",
+        "report_room_description": "Сообщите об этом чате своему поставщику учетной записи.",
         "title": "Отклонить приглашение"
     },
     "desktop_default_device_name": "%(brand)s Рабочий стол: %(platformName)s",
     "devtools": {
         "active_widgets": "Активные виджеты",
         "category_other": "Другие",
-        "category_room": "Комната",
+        "category_room": "Чат",
         "caution_colon": "Предупреждение:",
         "client_versions": "Версия клиента",
         "crypto": {
@@ -810,9 +810,10 @@
         "event_sent": "Событие отправлено!",
         "event_type": "Тип события",
         "expired": "Срок действия истек",
+        "expires_in": "Истекает через",
         "explore_account_data": "Посмотреть данные учётной записи",
-        "explore_room_account_data": "Посмотреть данные учётной записи комнаты",
-        "explore_room_state": "Посмотреть состояние комнаты",
+        "explore_room_account_data": "Посмотреть данные учётной записи чата",
+        "explore_room_state": "Посмотреть состояние чата",
         "failed_to_find_widget": "При обнаружении этого виджета произошла ошибка.",
         "failed_to_load": "Не удалось загрузить.",
         "failed_to_save": "Не удалось сохранить настройки.",
@@ -832,9 +833,9 @@
         "only_joined_members": "Только зарегистрированные пользователи",
         "original_event_source": "Оригинальный исходный код",
         "restore_from_backup": "Восстановить из резервной копии",
-        "room_encrypted": "Комната <strong> зашифрована ✅</strong>",
-        "room_id": "ID комнаты: %(roomId)s",
-        "room_not_encrypted": "Комната <strong> не имеет шифрования 🚨</strong>",
+        "room_encrypted": "Чат <strong> зашифрован ✅</strong>",
+        "room_id": "ID чата: %(roomId)s",
+        "room_not_encrypted": "Чат <strong> не имеет шифрования 🚨</strong>",
         "room_notifications_dot": "Точка: ",
         "room_notifications_highlight": "Выделение: ",
         "room_notifications_last_event": "Последнее событие:",
@@ -842,7 +843,7 @@
         "room_notifications_thread_id": "Id обсуждения: ",
         "room_notifications_total": "Всего: ",
         "room_notifications_type": "Тип: ",
-        "room_status": "Статус комнаты",
+        "room_status": "Статус чата",
         "room_unread_status_count": {
             "one": "Статус непрочитанной комнаты: <strong>%(status)s</strong>, количество: <strong>%(count)s</strong>",
             "few": "Статус непрочитанных комнат: <strong>%(status)s</strong>, количество: <strong>%(count)s</strong>",
@@ -851,13 +852,13 @@
         "save_setting_values": "Сохранить значения настроек",
         "see_history": "Посмотреть историю",
         "send_custom_account_data_event": "Отправить пользовательское событие данных учётной записи",
-        "send_custom_room_account_data_event": "Отправить пользовательское событие данных учётной записи комнаты",
+        "send_custom_room_account_data_event": "Отправить пользовательское событие данных учётной записи чата",
         "send_custom_state_event": "Оправить пользовательское событие состояния",
         "send_custom_timeline_event": "Отправить пользовательское событие ленты сообщений",
         "server_info": "Информация сервера",
         "server_versions": "Версия сервера",
         "settable_global": "Устанавливается на глобальном уровне",
-        "settable_room": "Устанавливается для комнаты",
+        "settable_room": "Устанавливается для чата",
         "setting_colon": "Настройки:",
         "setting_definition": "Установка определения:",
         "setting_id": "ID настроек",
@@ -898,7 +899,7 @@
         "users": "Пользователи",
         "value": "Значение",
         "value_colon": "Значение:",
-        "value_in_this_room": "Значение в этой комнате",
+        "value_in_this_room": "Значение в этом чате",
         "value_this_room_colon": "Значение в этой комнате:",
         "values_explicit": "Значения на явных уровнях",
         "values_explicit_colon": "Значения на явных уровнях:",
@@ -959,7 +960,7 @@
         "event_shield_reason_unverified_identity": "Зашифровано неподтвержденным пользователем.",
         "export_unsupported": "Ваш браузер не поддерживает необходимые криптографические расширения",
         "forgot_recovery_key": "Забыли ключ восстановления?",
-        "identity_needs_reset_description": "Для обеспечения доступа к истории сообщений необходимо сбросить криптографическую идентификацию.",
+        "identity_needs_reset_description": "Для обеспечения доступа к истории сообщений необходимо сбросить идентификацию.",
         "import_invalid_keyfile": "Недействительный файл ключей %(brand)s",
         "import_invalid_passphrase": "Ошибка аутентификации: возможно, неправильный пароль?",
         "key_storage_out_of_sync": "Хранилище ключей не синхронизировано.",
@@ -986,7 +987,7 @@
             "title": "Метод восстановления удален",
             "warning": "Если вы не убрали метод восстановления, злоумышленник может получить доступ к вашей учётной записи. Смените пароль учётной записи и сразу задайте новый способ восстановления в настройках."
         },
-        "set_up_recovery": "Настроить восстановление",
+        "set_up_recovery": "Создать резервную копию своих чатов.",
         "set_up_recovery_toast_description": "Создайте ключ восстановления, который можно использовать для восстановления зашифрованной истории сообщений в случае потери доступа к своим устройствам.",
         "set_up_toast_title": "Настроить безопасное резервное копирование",
         "setup_secure_backup": {
@@ -1114,7 +1115,7 @@
         "cannot_load_config": "Не удалось загрузить файл конфигурации. Попробуйте обновить страницу.",
         "connection": "Возникла проблема при обмене данными с домашним сервером. Повторите попытку позже.",
         "dialog_description_default": "Произошла ошибка.",
-        "download_media": "Не удалось загрузить исходный медиафайл, исходный URL-адрес не найден",
+        "download_media": "Не удалось скачать исходный медиафайл, исходный URL-адрес не найден",
         "edit_history_unsupported": "Ваш сервер, похоже, не поддерживает эту возможность.",
         "failed_copy": "Не удалось скопировать",
         "hs_blocked": "Доступ к этому домашнему серверу заблокирован вашим администратором.",
@@ -1129,7 +1130,7 @@
         "non_urgent_echo_failure_toast": "Ваш сервер не отвечает на некоторые <a>запросы</a>.",
         "resource_limits": "Превышен один из лимитов на ресурсы сервера.",
         "session_restore": {
-            "clear_storage_button": "Очистить хранилище и выйти",
+            "clear_storage_button": "Удалить это устройство",
             "clear_storage_description": "Выйти и удалить ключи шифрования?",
             "description_1": "Произошла ошибка при попытке восстановить предыдущий сеанс.",
             "description_2": "Если вы использовали более новую версию %(brand)s, то ваш сеанс может быть несовместим с ней. Закройте это окно и вернитесь к более новой версии.",
@@ -1549,7 +1550,8 @@
         "render_reaction_images": "Обработка пользовательских изображений в реакциях",
         "render_reaction_images_description": "Иногда их называют \"пользовательскими эмодзи\".",
         "report_to_moderators": "Пожаловаться модераторам",
-        "report_to_moderators_description": "В поддерживающих модерирование комнатах, кнопка \"Пожаловаться\" позволит вам сообщить о нарушении модераторам комнаты.",
+        "report_to_moderators_description": "В поддерживающих модерирование чатах, кнопка \"Пожаловаться\" позволит вам сообщить о нарушении модераторам комнаты.",
+        "room_list_sections": "Разделы списка чатов",
         "share_history_on_invite": "Поделиться зашифрованной историей с новыми участниками",
         "share_history_on_invite_description": "Приглашая пользователя в зашифрованную комнату, для которой установлена видимость истории как «общая», поделитесь зашифрованной историей с этим пользователем и примите зашифрованную историю, когда вас приглашают в такую комнату.",
         "share_history_on_invite_warning": "Эта функция ЭКСПЕРИМЕНТАЛЬНАЯ и в ней реализованы не все меры безопасности. Не включайте её в рабочих учётных записях.",
@@ -1754,6 +1756,11 @@
         "failed_send_poll_title": "Не удалось отправить опрос",
         "notes": "Результаты отображаются только после завершения опроса",
         "option_label": "Вариант %(number)s, %(answer)s",
+        "option_label_with_total": {
+            "one": "Вариант %(number)s, %(answer)s, %(count)s голос",
+            "few": "Вариант %(number)s, %(answer)s, %(count)s голоса",
+            "many": "Вариант %(number)s, %(answer)s, %(count)s голосов"
+        },
         "options_add_button": "Добавить вариант",
         "options_heading": "Создать варианты",
         "options_label": "Вариант %(number)s",
@@ -1976,6 +1983,7 @@
         "error_join_incompatible_version_1": "К сожалению, ваш домашний сервер слишком старый для участия.",
         "error_join_incompatible_version_2": "Пожалуйста, свяжитесь с администратором вашего сервера.",
         "error_join_title": "Не удалось войти",
+        "error_join_unknown": "Произошла неизвестная ошибка.",
         "error_jump_to_date": "Сервер вернул %(statusCode)s с кодом ошибки %(errorCode)s",
         "error_jump_to_date_connection": "При попытке найти указанную дату и перейти к ней, произошла сетевая ошибка. Возможно, ваш домашний сервер не работает или возникла временная проблема с подключением к Интернету. Пожалуйста, попробуйте еще раз. Если это продолжится, обратитесь к администратору homeserver.",
         "error_jump_to_date_details": "Сведения об ошибке",
@@ -2005,7 +2013,9 @@
                 "few": "%(count)s пользователя запрашивают присоединения",
                 "many": "%(count)s пользователей запрашивают присоединения"
             },
-            "room_is_public": "Это публичная комната"
+            "room_is_public": "Это публичная комната",
+            "shared_history_tooltip": "Новые участники могут видеть историю",
+            "world_readable_history_tooltip": "Кто угодно может видеть историю"
         },
         "header_avatar_open_settings_label": "Открыть настройки комнаты",
         "header_face_pile_tooltip": "Люди",
@@ -2034,11 +2044,11 @@
         "invite_email_mismatch_suggestion": "Введите адрес эл.почты в Настройках, чтобы получать приглашения прямо в %(brand)s.",
         "invite_sent_to_email": "Это приглашение было отправлено на %(email)s",
         "invite_sent_to_email_room": "Это приглашение в %(roomName)s было отправлено на %(email)s",
-        "invite_subtitle": "<userName/> пригласил(а) вас",
+        "invite_subtitle": "<userName/> приглашает вас",
         "invite_this_room": "Пригласить в комнату",
         "invite_title": "Хотите присоединиться к %(roomName)s?",
         "inviter_unknown": "Неизвестно",
-        "invites_you_text": "<inviter/> пригласил(а) тебя",
+        "invites_you_text": "<inviter/> приглашает вас",
         "join_button_account": "Зарегистрироваться",
         "join_failed_needs_invite": "Для просмотра %(roomName)s необходимо приглашение",
         "join_the_discussion": "Войти в комнату",
@@ -2050,7 +2060,7 @@
         "jump_read_marker": "Перейти к первому непрочитанному сообщению.",
         "jump_to_bottom_button": "Перейти к последним сообщениям",
         "kick_reason": "Причина: %(reason)s",
-        "kicked_by": "%(memberName)s исключил(а) вас",
+        "kicked_by": "%(memberName)s исключил вас",
         "kicked_from_room_by": "%(memberName)s удалил(а) вас из %(roomName)s",
         "knock_cancel_action": "Отменить запрос",
         "knock_denied_subtitle": "Поскольку вам отказали в доступе, вы не сможете присоединиться к группе, пока вас не пригласит администратор или модератор группы.",
@@ -2079,6 +2089,7 @@
             "button_view_all": "Посмотреть все",
             "description": "Закрепленные сообщения",
             "go_to_newest_message": "Посмотрите закрепленное сообщение на временной шкале и самое новое закрепленное сообщение здесь.",
+            "go_to_next_message": "Просмотрите это и предыдущее закрепленное сообщение в истории сообщений здесь",
             "title": "<bold>%(index)s из %(length)s</bold> Закрепленные сообщения"
         },
         "read_topic": "Нажмите, чтобы увидеть тему",
@@ -2129,8 +2140,9 @@
         "home_menu_label": "Параметры раздела \"Главная\"",
         "join_public_room_label": "Присоединиться к публичной комнате",
         "joining_rooms_status": {
-            "one": "Сейчас вы состоите в %(count)s комнате",
-            "other": "Сейчас вы состоите в %(count)s комнатах"
+            "one": "Сейчас вы состоите в %(count)s чате",
+            "few": "Сейчас вы состоите в %(count)s чатах",
+            "many": "Сейчас вы состоите в %(count)s чатах"
         },
         "list_title": "Список комнат",
         "more_options": {
@@ -2141,6 +2153,11 @@
             "one": "Удаляются сообщения в %(count)s комнате",
             "other": "Удаляются сообщения в %(count)s комнатах"
         },
+        "section": {
+            "chats": "Чаты",
+            "favourites": "Избранное",
+            "low_priority": "Низкий приоритет"
+        },
         "show_less": "Показать меньше",
         "show_n_more": {
             "other": "Показать ещё %(count)s",
@@ -2214,8 +2231,6 @@
             "aliases_section": "Адреса комнаты",
             "avatar_field_label": "Аватар комнаты",
             "canonical_alias_field_label": "Главный адрес",
-            "default_url_previews_off": "Предпросмотр ссылок по умолчанию выключен для участников этой комнаты.",
-            "default_url_previews_on": "Предпросмотр ссылок по умолчанию включен для участников этой комнаты.",
             "description_space": "Редактировать настройки, относящиеся к вашему пространству.",
             "error_creating_alias_description": "При создании этого адреса произошла ошибка. Это может быть запрещено сервером или произошел временный сбой.",
             "error_creating_alias_title": "Ошибка при создании адреса",
@@ -2246,12 +2261,7 @@
             "published_aliases_explainer_space": "Опубликованные адреса могут быть использованы любым человеком на любом сервере для присоединения к вашему пространству.",
             "published_aliases_section": "Публичные адреса",
             "save": "Сохранить изменения",
-            "topic_field_label": "Тема комнаты",
-            "url_preview_encryption_warning": "В зашифрованных комнатах, подобных этой, предварительный просмотр URL-адресов отключен по умолчанию, чтобы гарантировать, что ваш сервер (где создаются предварительные просмотры) не может собирать информацию о ссылках, которые вы видите в этой комнате.",
-            "url_preview_explainer": "Когда кто-то вставляет URL-адрес в свое сообщение, то можно просмотреть его, чтобы получить дополнительную информацию об этой ссылке, такую как название, описание и изображение с веб-сайта.",
-            "url_previews_section": "Предпросмотр содержимого ссылок",
-            "user_url_previews_default_off": "Предпросмотр ссылок по умолчанию <a>выключен</a> для вас.",
-            "user_url_previews_default_on": "Предпросмотр ссылок по умолчанию <a>включен</a> для вас."
+            "topic_field_label": "Тема комнаты"
         },
         "notifications": {
             "browse_button": "Просматривать",
@@ -2283,7 +2293,7 @@
             "error_unbanning": "Не удалось разблокировать",
             "events_default": "Отправить сообщения",
             "invite": "Пригласить пользователей",
-            "kick": "Удалять пользователей",
+            "kick": "Исключить пользователей",
             "m.call": "Начать %(brand)s звонок",
             "m.call.member": "Присоединяйтесь к %(brand)s звонку",
             "m.reaction": "Отправлять реакции",
@@ -2341,25 +2351,26 @@
             "history_visibility_warning": "Изменения не затронут старые сообщения, только новые. <a>Подробнее</a>",
             "history_visibility_world_readable": "Любой (история общедоступна)",
             "join_rule_description": "Укажите, кто может присоединиться к %(roomName)s.",
-            "join_rule_invite": "Приватное (только по приглашению)",
+            "join_rule_invite": "Только по приглашению",
             "join_rule_invite_description": "Присоединиться могут только приглашенные люди.",
             "join_rule_knock": "Присоединиться",
             "join_rule_knock_description": "Люди не могут присоединиться до тех пор, пока им не будет предоставлен доступ.",
-            "join_rule_public_description": "Любой желающий может найти и присоединиться.",
+            "join_rule_public": "Любой",
+            "join_rule_public_description": "Любой желающий может присоединиться.",
             "join_rule_restricted": "Участники пространства",
-            "join_rule_restricted_description": "Любой человек в пространстве может найти и присоединиться. <a>Укажите здесь, какие пространства могут получить доступ.</a>",
-            "join_rule_restricted_description_active_space": "Любой человек в <spaceName/> может найти и присоединиться. Вы можете выбрать и другие пространства.",
-            "join_rule_restricted_description_prompt": "Любой человек в пространстве может найти и присоединиться. Вы можете выбрать несколько пространств.",
-            "join_rule_restricted_description_spaces": "Пространства с доступом",
+            "join_rule_restricted_description": "Любой человек в пространстве может присоединиться без приглашения. <a>Укажите здесь, какие пространства могут получить доступ.</a>",
+            "join_rule_restricted_description_active_space": "Любой человек в <spaceName/> может присоединиться.",
+            "join_rule_restricted_description_prompt": "Любой человек в пространстве может присоединиться.",
+            "join_rule_restricted_description_spaces": "Разрешённые пространства",
             "join_rule_restricted_dialog_description": "Определите, какие пространства могут получить доступ к этой комнате. Если пространство выбрано, его члены могут найти и присоединиться к <RoomName/>.",
             "join_rule_restricted_dialog_empty_warning": "Вы удаляете все пространства. Доступ будет по умолчанию только по приглашениям",
             "join_rule_restricted_dialog_filter_placeholder": "Поиск пространств",
-            "join_rule_restricted_dialog_heading_known": "Другие пространства, которые вы знаете",
-            "join_rule_restricted_dialog_heading_other": "Другие пространства или комнаты, которые вы могли не знать",
-            "join_rule_restricted_dialog_heading_room": "Пространства, которые вы знаете, уже содержат эту комнату",
+            "join_rule_restricted_dialog_heading_known": "Ваши пространства, которые не содержат эту комнату",
+            "join_rule_restricted_dialog_heading_other": "Другие пространства, в которых вы не участвуете",
+            "join_rule_restricted_dialog_heading_room": "Ваши пространства, которые содержат эту комнату",
             "join_rule_restricted_dialog_heading_space": "Пространства, которые вы знаете, уже содержат эту комнату",
             "join_rule_restricted_dialog_heading_unknown": "Это, скорее всего, те, в которых участвуют другие администраторы комнат.",
-            "join_rule_restricted_dialog_title": "Выберите места",
+            "join_rule_restricted_dialog_title": "Выберите пространства",
             "join_rule_restricted_n_more": {
                 "one": "и еще %(count)s",
                 "few": "и еще %(count)s",
@@ -2396,7 +2407,7 @@
         "upload_avatar_label": "Загрузить аватар",
         "visibility": {
             "alias_section": "Адрес",
-            "error_failed_save": "Не удалось обновить видимость этого пространства",
+            "error_failed_save": "Не удалось обновить параметры этого пространства",
             "error_update_guest_access": "Не удалось обновить гостевой доступ к этому пространству",
             "error_update_history_visibility": "Не удалось обновить видимость истории этого пространства",
             "guest_access_disabled": "У тебя нет прав на изменение гостевого доступа.",
@@ -2406,7 +2417,7 @@
             "history_visibility_anyone_space_description": "Дайте людям возможность предварительно ознакомиться с вашим пространством, прежде чем они присоединятся к нему.",
             "history_visibility_anyone_space_disabled": "У тебя нет прав на изменение видимости истории.",
             "history_visibility_anyone_space_recommendation": "Рекомендуется для публичных пространств.",
-            "title": "Видимость"
+            "title": "Безопасность и приватность"
         },
         "voip": {
             "call_type_section": "Тип звонка",
@@ -2476,7 +2487,7 @@
     "settings": {
         "account": {
             "dialog_title": "<strong>Настройки:</strong> Учетная запись",
-            "title": "Учетная запись"
+            "title": "Аккаунт"
         },
         "all_rooms_home": "Показывать все комнаты на Главной",
         "all_rooms_home_description": "Все комнаты, в которых вы находитесь, будут отображаться на Главной.",
@@ -2490,8 +2501,8 @@
             "custom_font_name": "Название системного шрифта",
             "custom_font_size": "Использовать другой размер",
             "custom_theme_add": "Добавить пользовательскую тему",
-            "custom_theme_downloading": "Загрузка пользовательской темы…",
-            "custom_theme_error_downloading": "Ошибка при загрузке темы",
+            "custom_theme_downloading": "Скачивание пользовательской темы…",
+            "custom_theme_error_downloading": "Ошибка при скачивании темы",
             "custom_theme_help": "Введите URL-адрес пользовательской темы, которую вы хотите применить.",
             "custom_theme_invalid": "Неверная схема темы.",
             "dialog_title": "<strong>Настройки:</strong> Внешний вид",
@@ -2534,7 +2545,7 @@
                 "export_keys": "Экспортировать ключи",
                 "import_keys": "Импортировать ключи",
                 "other_people_device_description": "Внимание: пользователи, которые явно не подтвердили вашу личность (например, с помощью эмодзи), не получат ваши зашифрованные сообщения. Кроме того, неверифицированные устройства верифицированных пользователей не будут получать ваши зашифрованные сообщения.",
-                "other_people_device_label": "В зашифрованных комнатах отправляйте сообщения только проверенным пользователям",
+                "other_people_device_label": "В зашифрованных чатах отправляйте сообщения только проверенным пользователям",
                 "other_people_device_title": "Устройства других людей",
                 "reset_identity": "Сбросить криптографическую идентификацию",
                 "reset_in_progress": "Выполняется сброс...",
@@ -2575,7 +2586,7 @@
                 "key_storage_warning": "Хранилище ключей не синхронизировано. Нажмите кнопку ниже, чтобы устранить проблему.",
                 "save_key_description": "Не сообщайте эту информацию никому!",
                 "save_key_title": "Ключ восстановления",
-                "set_up_recovery": "Настройка восстановления",
+                "set_up_recovery": "Получить ключ восстановления",
                 "set_up_recovery_confirm_button": "Завершить настройку",
                 "set_up_recovery_confirm_description": "Введите ключ восстановления, показанный на предыдущем экране, чтобы завершить настройку восстановления.",
                 "set_up_recovery_confirm_title": "Для подтверждения введите ключ восстановления",
@@ -2677,8 +2688,7 @@
             "username": "Имя пользователя"
         },
         "inline_url_previews_default": "Предпросмотр ссылок по умолчанию",
-        "inline_url_previews_room": "Включить предпросмотр ссылок для участников этой комнаты по умолчанию",
-        "inline_url_previews_room_account": "Включить предпросмотр ссылок в этой комнате (влияет только на вас)",
+        "inline_url_previews_encrypted": "Включить предварительный просмотр в зашифрованных комнатах",
         "insert_trailing_colon_mentions": "Вставлять двоеточие после упоминания пользователя в начале сообщения",
         "invite_controls": {
             "default_label": "Разрешить пользователям приглашать вас в комнаты"
@@ -2823,7 +2833,7 @@
             "rm_lifetime_offscreen": "Задержка прочтения сообщения при отсутствии активности (мс)",
             "room_directory_heading": "Каталог комнат",
             "room_list_heading": "Список комнат",
-            "show_avatars_pills": "Показывать аватары в упоминаниях пользователей, комнатах и событиях",
+            "show_avatars_pills": "Показывать аватары в упоминаниях пользователей, чатах и событиях",
             "show_polls_button": "Показывать кнопку опроса",
             "startup_window_behaviour_label": "Запуск и поведение окна",
             "surround_text": "Обводить выделенный текст при вводе специальных символов",
@@ -2841,7 +2851,7 @@
             "dehydrated_device_enabled": "Устройство в автономном режиме",
             "dialog_title": "<strong>Настройки:</strong> Безопасность и конфиденциальность",
             "e2ee_default_disabled_warning": "Администратор вашего сервера отключил сквозное шифрование по умолчанию в приватных комнатах и диалогах.",
-            "enable_message_search": "Включить поиск сообщений в зашифрованных комнатах",
+            "enable_message_search": "Включить поиск сообщений в зашифрованных чатах",
             "encryption_section": "Шифрование",
             "ignore_users_empty": "У вас нет игнорируемых пользователей.",
             "ignore_users_section": "Игнорируемые пользователи",
@@ -2861,7 +2871,7 @@
             "message_search_pending_rooms": "Комнаты, ожидающие индексации: %(pendingRooms)s",
             "message_search_room_progress": "%(doneRooms)s из %(totalRooms)s",
             "message_search_section": "Поиск по сообщениям",
-            "message_search_sleep_time": "Как быстро сообщения должны быть загружены.",
+            "message_search_sleep_time": "Как быстро сообщения должны быть скачаны.",
             "message_search_space_used": "Занято места:",
             "message_search_unsupported": "Отсутствуют некоторые необходимые компоненты для %(brand)s, чтобы безопасно кэшировать шифрованные сообщения локально. Если вы хотите попробовать эту возможность, соберите самостоятельно %(brand)s Desktop с <nativeLink>добавлением поисковых компонентов</nativeLink>.",
             "message_search_unsupported_web": "%(brand)s не может безопасно кэшировать зашифрованные сообщения локально во время работы в веб-браузере. Используйте <desktopLink>%(brand)s Desktop</desktopLink>, чтобы зашифрованные сообщения появились в результатах поиска.",
@@ -2938,7 +2948,7 @@
             "rename_form_caption": "Пожалуйста, имейте в виду, что названия сеансов также видны людям, с которыми вы общаетесь.",
             "rename_form_heading": "Переименовать сеанс",
             "rename_form_learn_more": "Переименование сеансов",
-            "rename_form_learn_more_description_1": "Другие пользователи, будучи в личных сообщениях и посещаемых вами комнатах, могут видеть полный перечень ваших сеансов.",
+            "rename_form_learn_more_description_1": "Другие пользователи, будучи в личных сообщениях и посещаемых вами чатах, могут видеть полный перечень ваших сеансов.",
             "rename_form_learn_more_description_2": "Это даёт им уверенности в том, с кем они общаются, но также означает, что они могут видеть вводимое здесь название сеанса.",
             "security_recommendations": "Рекомендации по безопасности",
             "security_recommendations_description": "Усильте защиту учётной записи, следуя этим рекомендациям.",
@@ -2964,7 +2974,7 @@
             "unknown_session": "Неизвестный тип сеанса",
             "unverified_session": "Незаверенный сеанс",
             "unverified_session_explainer_1": "Этот сеанс не поддерживает шифрование, потому и не может быть подтверждён.",
-            "unverified_session_explainer_2": "Через этот сеанс вы не можете участвовать в комнатах с шифрованием.",
+            "unverified_session_explainer_2": "Через этот сеанс вы не можете участвовать в чатах с шифрованием.",
             "unverified_session_explainer_3": "Для лучшей безопасности и конфиденциальности, рекомендуется использовать клиенты Matrix с поддержкой шифрования.",
             "unverified_sessions": "Незаверенные сеансы",
             "unverified_sessions_explainer_1": "Неподтверждённые сеансы — это сеансы, вошедшие с вашими учётными данными, но до сих пор не подтверждённые.",
@@ -3029,11 +3039,13 @@
             "connection_section": "Соединение",
             "dialog_title": "<strong>Настройки:</strong> Голос и видео",
             "echo_cancellation": "Эхоподавление",
+            "echo_cancellation_description": "Устраняет эхо микрофона во время звонков. Эта настройка также влияет на Element Call.",
             "enable_fallback_ice_server": "Разрешить резервный сервер помощи при вызове (%(server)s)",
             "enable_fallback_ice_server_description": "Только применяется, когда у домашнего сервера нет своего TURN-сервера. Ваш IP-адрес будет виден на время звонка.",
             "mirror_local_feed": "Зеркально отражать видео со своей камеры",
             "missing_permissions_prompt": "Отсутствуют разрешения для доступа к камере/микрофону. Нажмите кнопку ниже, чтобы запросить их.",
             "noise_suppression": "Подавление шума",
+            "noise_suppression_description": "Уменьшает фоновый шум микрофона во время звонков. Эта настройка также влияет на Element Call.",
             "request_permissions": "Запросить доступ к медиа устройству",
             "title": "Голос и видео",
             "video_input_empty": "Веб-камера не обнаружена",
@@ -3100,7 +3112,7 @@
         "manual_device_verification_confirm_title": "Внимание: ручная проверка устройства",
         "me": "Отображение действий",
         "msg": "Отправить сообщение данному пользователю",
-        "myavatar": "Меняет изображение профиля во всех комнатах",
+        "myavatar": "Меняет изображение профиля во всех чатах",
         "myroomavatar": "Меняет изображение профиля только в текущей комнате",
         "myroomnick": "Изменяет ваш псевдоним только для текущей комнаты",
         "nick": "Изменяет ваш псевдоним",
@@ -3341,9 +3353,9 @@
             "unable_to_decrypt": "Не удалось расшифровать сообщение"
         },
         "disambiguated_profile": "%(displayName)s (%(matrixId)s)",
-        "download_action_downloading": "Загрузка",
-        "download_failed": "Загрузка не удалась",
-        "download_failed_description": "Произошла ошибка при загрузке этого файла",
+        "download_action_downloading": "Скачивание",
+        "download_failed": "Скачивание не удалось",
+        "download_failed_description": "Произошла ошибка при скачивании этого файла",
         "e2e_state": "Состояние сквозного шифрования",
         "edits": {
             "tooltip_label": "Изменено %(date)s. Нажмите для посмотра истории изменений.",
@@ -3362,7 +3374,7 @@
             "unable_to_find": "Попытка загрузить выбранный интервал истории чата этой комнаты не удалась, так как запрошенный элемент не найден."
         },
         "m.audio": {
-            "error_downloading_audio": "Ошибка загрузки аудио",
+            "error_downloading_audio": "Ошибка скачивания аудио",
             "error_processing_audio": "Ошибка обработки звукового сообщения",
             "error_processing_voice_message": "Ошибка при обработке голосового сообщения"
         },
@@ -3459,7 +3471,7 @@
         "m.room.history_visibility": {
             "invited": "%(senderName)s сделал(а) историю разговора видимой для всех собеседников с момента их приглашения.",
             "joined": "%(senderName)s сделал(а) историю разговора видимой для всех собеседников с момента их входа в комнату.",
-            "shared": "%(senderName)s сделал(а) историю разговора видимой для всех собеседников.",
+            "shared": "%(senderName)s делает историю разговора видимой для всех собеседников.",
             "unknown": "%(senderName)s сделал(а) историю комнаты видимой в неизвестном режиме (%(visibility)s).",
             "world_readable": "%(senderName)s сделал(а) историю разговора видимой для всех."
         },
@@ -3481,11 +3493,11 @@
             "change_name_avatar": "%(oldDisplayName)s изменил(а) имя и аватар",
             "invite": "%(senderName)s пригласил(а) %(targetName)s",
             "join": "%(targetName)s теперь с нами",
-            "kick": "%(senderName)s удалил(а) %(targetName)s",
-            "kick_reason": "%(senderName)s удалил(а) %(targetName)s: %(reason)s",
+            "kick": "%(senderName)s исключает %(targetName)s",
+            "kick_reason": "%(senderName)s исключил %(targetName)s: %(reason)s",
             "left": "%(targetName)s покинул(а) комнату",
             "left_reason": "%(targetName)s покинул(а) комнату: %(reason)s",
-            "no_change": "%(senderName)s не сделал(а) изменений",
+            "no_change": "%(senderName)s не сделано изменений",
             "reject_invite": "%(targetName)s отклонил(а) приглашение",
             "reject_invite_reason": "%(targetName)s отклонил приглашение: %(reason)s",
             "remove_avatar": "%(senderName)s удалил(а) аватар",
@@ -3651,8 +3663,9 @@
                 "one": "%(oneUser)s присоединился(лась)"
             },
             "joined_and_left": {
-                "other": "%(oneUser)s присоединился(лась) и покинул(а) %(count)s раз(а)",
-                "one": "%(oneUser)s присоединился(лась) и покинул(а)"
+                "one": "%(oneUser)s присоединяется и покидает",
+                "few": "%(oneUser)s присоединяется и покидает %(count)s раза",
+                "many": "%(oneUser)s присоединяется и покидает %(count)s раз"
             },
             "joined_and_left_multiple": {
                 "other": "%(severalUsers)s присоединились и покинули %(count)s раз(а)",
@@ -3663,16 +3676,18 @@
                 "one": "%(severalUsers)s присоединились"
             },
             "kicked": {
-                "one": "был удалён",
-                "other": "удалено %(count)s раз(а)"
+                "one": "исключили",
+                "few": "исключили %(count)s раза",
+                "many": "исключили %(count)s раз"
             },
             "kicked_multiple": {
                 "one": "были удалены",
                 "other": "удалены %(count)s раз(а)"
             },
             "left": {
-                "other": "%(oneUser)s покинул(а) %(count)s раз(а)",
-                "one": "%(oneUser)s покинул(а)"
+                "one": "%(oneUser)s покидает",
+                "few": "%(oneUser)s покидает %(count)s раза",
+                "many": "%(oneUser)s покидает %(count)s раз"
             },
             "left_multiple": {
                 "other": "%(severalUsers)s покинули %(count)s раз(а)",
@@ -3753,7 +3768,7 @@
         "changelog": "История изменений",
         "check_action": "Проверить наличие обновлений",
         "checking": "Проверка наличия обновлений…",
-        "downloading": "Загрузка обновления…",
+        "downloading": "Скачивание обновления…",
         "error_encountered": "Обнаружена ошибка (%(errorDetail)s).",
         "error_unable_load_commit": "Не возможно загрузить детали подтверждения:: %(msg)s",
         "new_version_available": "Доступна новая версия. <a>Обновить сейчас.</a>",
@@ -3808,7 +3823,7 @@
         "disinvite_button_space": "Отозвать приглашение в пространство",
         "error_ban_user": "Не удалось заблокировать пользователя",
         "error_deactivate": "Не удалось деактивировать пользователя",
-        "error_kicking_user": "Не удалось удалить пользователя",
+        "error_kicking_user": "Не удалось исключить пользователя",
         "error_mute_user": "Не удалось заглушить пользователя",
         "error_revoke_3pid_invite_description": "Не удалось отозвать приглашение. Возможно, на сервере возникла вре́менная проблема или у вас недостаточно прав для отзыва приглашения.",
         "error_revoke_3pid_invite_title": "Не удалось отменить приглашение",
@@ -3817,11 +3832,11 @@
         "ignore_confirm_title": "Игнорировать %(user)s",
         "invited_by": "Приглашен %(sender)s",
         "jump_to_rr_button": "Перейти к последнему прочитанному сообщению",
-        "kick_button_room": "Удалить из комнаты",
-        "kick_button_room_name": "Удалить из %(roomName)s",
+        "kick_button_room": "Исключить из комнаты",
+        "kick_button_room_name": "Исключить из %(roomName)s",
         "kick_button_space": "Исключить из пространства",
-        "kick_button_space_everything": "Удалить их отовсюду, где я могу",
-        "kick_space_specific": "Удалить их из некоторых мест, где я могу",
+        "kick_button_space_everything": "Исключить участника отовсюду, где я могу",
+        "kick_space_specific": "Исключить участника из некоторых мест, где я могу",
         "kick_space_warning": "Они по-прежнему смогут получить доступ ко всему, где вы не являетесь администратором.",
         "promote_warning": "Вы не сможете отменить это действие, так как этот пользователь получит уровень прав, равный вашему.",
         "redact": {
@@ -3845,7 +3860,7 @@
         "room_encrypted": "Сообщения в этой комнате защищены сквозным шифрованием.",
         "room_encrypted_detail": "Ваши сообщения в безопасности, ключи для расшифровки есть только у вас и получателя.",
         "room_unencrypted": "Сообщения в этой комнате не защищены сквозным шифрованием.",
-        "room_unencrypted_detail": "В зашифрованных комнатах ваши сообщения в безопасности: только у вас и у получателя есть ключи для расшифровки.",
+        "room_unencrypted_detail": "В зашифрованных чатах ваши сообщения в безопасности: только у вас и у получателя есть ключи для расшифровки.",
         "send_message": "Отправить сообщение",
         "share_button": "Поделиться профилем",
         "unban_button_room": "Разблокировать в комнате",
@@ -4021,8 +4036,8 @@
             "see_videos_sent_active_room": "Посмотрите видео размещённые в вашей активной комнате",
             "see_videos_sent_this_room": "Посмотрите видео размещённые в этой комнате",
             "send_emotes_active_room": "Отправляйте эмоции от своего имени в активную комнату",
-            "send_emotes_this_room": "Отправляйте эмоции от своего имени в эту комнату",
-            "send_event_type_active_room": "Отправляйте <b>%(eventType)s</b> события от своего имени в вашей активной комнате",
+            "send_emotes_this_room": "Отправляйте смайлики от своего имени в это чат",
+            "send_event_type_active_room": "Отправляйте события <b>%(eventType)s</b> от своего имени в вашем активном чате",
             "send_event_type_this_room": "Отправляйте события <b>%(eventType)s</b> от своего имени в этой комнате",
             "send_files_active_room": "Отправьте файлы от своего имени в активной комнате",
             "send_files_this_room": "Отправьте файлы от своего имени в этой комнате",
@@ -4053,7 +4068,7 @@
             "remove": "Убрать для всех",
             "revoke": "Отозвать разрешения",
             "screenshot": "Сделать снимок",
-            "start_audio_stream": "Запустить аудио трансляцию"
+            "start_audio_stream": "Запустить аудиотрансляцию"
         },
         "cookie_warning": "Этот виджет может использовать куки.",
         "error_hangup_description": "Вас отключили от звонка. (Ошибка: %(message)s)",
@@ -4118,10 +4133,10 @@
             "recentYears": "Последние года легко угадываемы",
             "sequences": "Последовательности типа abc или 6543 легко угадываемы",
             "similarToCommon": "Это похоже на распространённый пароль",
-            "simpleRepeat": "Повторы типа \"ааа\" легко угадываемы",
+            "simpleRepeat": "Повторы типа «ааа» легко угадываемы",
             "straightRow": "Прямые ряды клавиш легко угадываемы",
-            "topHundred": "Это топ-100 распространённых паролей",
-            "topTen": "Это топ-10 распространённых паролей",
+            "topHundred": "Это 100 самых распространённых паролей",
+            "topTen": "Это 10 самых распространённых паролей",
             "userInputs": "Не должно быть никаких личных данных или данных, связанных со страницами.",
             "wordByItself": "Общеупотребительные слова легко угадываемы"
         }
diff --git a/apps/web/src/i18n/strings/sk.json b/apps/web/src/i18n/strings/sk.json
index 47d4474b1c..3ba4c4db1e 100644
--- a/apps/web/src/i18n/strings/sk.json
+++ b/apps/web/src/i18n/strings/sk.json
@@ -2251,8 +2251,6 @@
             "aliases_section": "Adresy miestnosti",
             "avatar_field_label": "Obrázok miestnosti",
             "canonical_alias_field_label": "Hlavná adresa",
-            "default_url_previews_off": "Náhľady URL adries sú predvolene zakázané pre členov tejto miestnosti.",
-            "default_url_previews_on": "Náhľady URL adries sú predvolene povolené pre členov tejto miestnosti.",
             "description_space": "Upravte nastavenia týkajúce sa vášho priestoru.",
             "error_creating_alias_description": "Pri vytváraní tejto adresy došlo k chybe. Je možné, že ju server nepovoľuje alebo došlo k dočasnému zlyhaniu.",
             "error_creating_alias_title": "Chyba pri vytváraní adresy",
@@ -2283,12 +2281,7 @@
             "published_aliases_explainer_space": "Zverejnené adresy môže použiť ktokoľvek na akomkoľvek serveri, aby sa pripojil k vášmu priestoru.",
             "published_aliases_section": "Zverejnené adresy",
             "save": "Uložiť zmeny",
-            "topic_field_label": "Téma miestnosti",
-            "url_preview_encryption_warning": "Náhľady URL adries sú v šifrovaných miestnostiach ako je táto predvolene zakázané, aby ste si mohli byť istí, že obsah odkazov z vašej konverzácii nebude zaznamenaný na vašom domovskom serveri počas ich generovania.",
-            "url_preview_explainer": "Ak niekto vo svojej správe pošle URL adresu, môže byť zobrazený jej náhľad obsahujúci názov, popis a obrázok z cieľovej web stránky.",
-            "url_previews_section": "Náhľady URL adries",
-            "user_url_previews_default_off": "Predvolene máte <a>zakázané</a> náhľady URL adries.",
-            "user_url_previews_default_on": "Predvolene máte <a>povolené</a> náhľady URL adries."
+            "topic_field_label": "Téma miestnosti"
         },
         "notifications": {
             "browse_button": "Prechádzať",
@@ -2713,8 +2706,6 @@
             "username": "Používateľské meno"
         },
         "inline_url_previews_default": "Predvolene povoliť náhľady URL adries",
-        "inline_url_previews_room": "Predvolene povoliť náhľady URL adries pre členov tejto miestnosti",
-        "inline_url_previews_room_account": "Povoliť náhľady URL adries pre túto miestnosť (ovplyvňuje len vás)",
         "insert_trailing_colon_mentions": "Vložiť na koniec dvojbodku za zmienkou používateľa na začiatku správy",
         "invite_controls": {
             "default_label": "Povoliť používateľom pozývať vás do miestností"
diff --git a/apps/web/src/i18n/strings/sq.json b/apps/web/src/i18n/strings/sq.json
index 7a41ab152a..cef1c7e45e 100644
--- a/apps/web/src/i18n/strings/sq.json
+++ b/apps/web/src/i18n/strings/sq.json
@@ -1786,8 +1786,6 @@
             "aliases_section": "Adresa Dhomash",
             "avatar_field_label": "Avatar dhome",
             "canonical_alias_field_label": "Adresë kryesore",
-            "default_url_previews_off": "Për pjesëmarrësit në këtë dhomë paraparja e URL-ve është e çaktivizuar, si parazgjedhje.",
-            "default_url_previews_on": "Për pjesëmarrësit në këtë dhomë paraparja e URL-ve është e aktivizuar, si parazgjedhje.",
             "description_space": "Përpunoni rregullime që lidhen me hapësirën tuaj.",
             "error_creating_alias_description": "Pati një gabim në krijimin e asaj adrese. Mund të mos lejohet nga shërbyesi, ose ndodhi një gabim i përkohshëm.",
             "error_creating_alias_title": "Gabim në krijim adrese",
@@ -1814,12 +1812,7 @@
             "published_aliases_explainer_space": "Adresat e publikuara mund të përdoren nga cilido, në cilindo shërbyes, për të hyrë në hapësirën tuaj.",
             "published_aliases_section": "Adresa të Publikuara",
             "save": "Ruaji Ndryshimet",
-            "topic_field_label": "Temë Dhome",
-            "url_preview_encryption_warning": "Në dhoma të fshehtëzuara, si kjo, paraparja e URL-ve është e çaktivizuar, si parazgjedhje, për të garantuar që shërbyesi juaj home (ku edhe prodhohen paraparjet) të mos grumbullojë të dhëna rreth lidhjesh që shihni në këtë dhomë.",
-            "url_preview_explainer": "Kur dikush vë një URL në mesazh, për të dhënë rreth lidhjes më tepër të dhëna, të tilla si titulli, përshkrimi dhe një figurë e sajtit, do të shfaqet një paraparje e URL-së.",
-            "url_previews_section": "Paraparje URL-sh",
-            "user_url_previews_default_off": "E keni <a>çaktivizuar</a>, si parazgjedhje, paraparjen e URL-ve.",
-            "user_url_previews_default_on": "E keni <a>aktivizuar</a>, si parazgjedhje, paraparjen e URL-ve."
+            "topic_field_label": "Temë Dhome"
         },
         "notifications": {
             "browse_button": "Shfletoni",
@@ -2108,8 +2101,6 @@
             "spell_check_locale_placeholder": "Zgjidhni vendore"
         },
         "inline_url_previews_default": "Aktivizo, si parazgjedhje, paraparje URL-sh brendazi",
-        "inline_url_previews_room": "Aktivizo, si parazgjedhje, paraparje URL-sh për pjesëmarrësit në këtë dhomë",
-        "inline_url_previews_room_account": "Aktivizo paraparje URL-sh për këtë dhomë (prek vetëm ju)",
         "insert_trailing_colon_mentions": "Fut dy pika pas përmendjesh përdoruesi, në fillim të një mesazhi",
         "jump_to_bottom_on_send": "Kalo te fundi i rrjedhës kohore, kur dërgoni një mesazh",
         "key_backup": {
diff --git a/apps/web/src/i18n/strings/sv.json b/apps/web/src/i18n/strings/sv.json
index a50fddfe6c..48715ab1ae 100644
--- a/apps/web/src/i18n/strings/sv.json
+++ b/apps/web/src/i18n/strings/sv.json
@@ -2141,8 +2141,6 @@
             "aliases_section": "Rumsadresser",
             "avatar_field_label": "Rumsavatar",
             "canonical_alias_field_label": "Huvudadress",
-            "default_url_previews_off": "URL-förhandsgranskning är inaktiverat som förval för deltagare i detta rum.",
-            "default_url_previews_on": "URL-förhandsgranskning är aktiverat som förval för deltagare i detta rum.",
             "description_space": "Redigera inställningar relaterat till ditt utrymme.",
             "error_creating_alias_description": "Ett fel inträffade vid skapande av adressen. Det kanske inte tillåts av servern, eller så inträffade ett tillfälligt fel.",
             "error_creating_alias_title": "Fel vid skapande av adress",
@@ -2171,12 +2169,7 @@
             "published_aliases_explainer_space": "Publicerade adresser kan användas av vem som helst på vilken server som helst för att gå med i ditt utrymme.",
             "published_aliases_section": "Publicerade adresser",
             "save": "Spara ändringar",
-            "topic_field_label": "Rumsämne",
-            "url_preview_encryption_warning": "I krypterade rum, som detta, är URL-förhandsgranskning inaktiverad som förval för att säkerställa att din hemserver (där förhandsgranskningar genereras) inte kan samla information om länkar du ser i rummet.",
-            "url_preview_explainer": "När någon lägger en URL i sitt meddelande, kan URL-förhandsgranskning ge mer information om länken, såsom titel, beskrivning, och en bild från webbplatsen.",
-            "url_previews_section": "URL-förhandsgranskning",
-            "user_url_previews_default_off": "Du har <a>inaktiverat</a> URL-förhandsgranskning som förval.",
-            "user_url_previews_default_on": "Du har <a>aktiverat</a> URL-förhandsgranskning som förval."
+            "topic_field_label": "Rumsämne"
         },
         "notifications": {
             "browse_button": "Bläddra",
@@ -2589,8 +2582,6 @@
             "username": "Användarnamn"
         },
         "inline_url_previews_default": "Aktivera inbäddad URL-förhandsgranskning som standard",
-        "inline_url_previews_room": "Aktivera URL-förhandsgranskning som standard för deltagare i detta rum",
-        "inline_url_previews_room_account": "Aktivera URL-förhandsgranskning för detta rum (påverkar bara dig)",
         "insert_trailing_colon_mentions": "Infoga kolon efter användaromnämnande på början av ett meddelande",
         "invite_controls": {
             "default_label": "Tillåt användare att bjuda in dig till rum"
diff --git a/apps/web/src/i18n/strings/tr.json b/apps/web/src/i18n/strings/tr.json
index 3b5b7e2a4f..142d45f61f 100644
--- a/apps/web/src/i18n/strings/tr.json
+++ b/apps/web/src/i18n/strings/tr.json
@@ -2078,8 +2078,6 @@
             "aliases_section": "Oda Adresleri",
             "avatar_field_label": "Oda avatarı",
             "canonical_alias_field_label": "Ana adres",
-            "default_url_previews_off": "URL ön izlemeleri, bu odadaki kullanıcılar için varsayılan olarak devre dışı bıraktırılmıştır.",
-            "default_url_previews_on": "URL önizlemeleri, bu odadaki katılımcılar için varsayılan olarak etkin.",
             "description_space": "Alanınızla ilgili ayarları düzenleyin.",
             "error_creating_alias_description": "Adres oluşturulurken hata ile karşılaşıldı. Sunucu tarafından izin verilmemiş yada geçici bir hata olabilir.",
             "error_creating_alias_title": "Adres oluşturulurken hata",
@@ -2108,12 +2106,7 @@
             "published_aliases_explainer_space": "Yayınlanan adresler, herhangi bir sunucudaki herkes tarafından alanınıza katılmak için kullanılabilir.",
             "published_aliases_section": "Yayınlanmış adresler",
             "save": "Değişiklikleri Kaydet",
-            "topic_field_label": "Oda Başlığı",
-            "url_preview_encryption_warning": "Bunun gibi şifreli odalarda, ana sunucunuzun (önizlemelerin oluşturulduğu yer) bu odada gördüğünüz bağlantılar hakkında bilgi toplayamamasını sağlamak için URL önizlemeleri varsayılan olarak devre dışı bırakılır.",
-            "url_preview_explainer": "Birisi mesajına bir URL eklediğinde, bu bağlantı hakkında başlık, açıklama ve web sitesinden bir görüntü gibi daha fazla bilgi vermek için bir URL önizlemesi gösterilebilir.",
-            "url_previews_section": "URL önizlemeleri",
-            "user_url_previews_default_off": "URL önizlemelerini varsayılan olarak <a> devre dışı </a> bıraktınız.",
-            "user_url_previews_default_on": "URL önizlemelerini varsayılan olarak <a>etkinleştirdiniz</a>."
+            "topic_field_label": "Oda Başlığı"
         },
         "notifications": {
             "browse_button": "Gözat",
@@ -2510,8 +2503,6 @@
             "username": "Kullanıcı Adı"
         },
         "inline_url_previews_default": "Varsayılan olarak satır içi URL önizlemeleri aç",
-        "inline_url_previews_room": "Bu odadaki katılımcılar için URL önizlemeyi varsayılan olarak açık hale getir",
-        "inline_url_previews_room_account": "Bu oda için URL önizlemeyi aç (sadece sizi etkiler)",
         "insert_trailing_colon_mentions": "Mesajın başında kullanıcı etiketlerinden sonra iki nokta üst üste ekle",
         "jump_to_bottom_on_send": "Mesaj gönderdiğinizde zaman çizelgesinin en sonuna atla",
         "key_backup": {
diff --git a/apps/web/src/i18n/strings/uk.json b/apps/web/src/i18n/strings/uk.json
index 0ed408e2f9..d1a9e78af1 100644
--- a/apps/web/src/i18n/strings/uk.json
+++ b/apps/web/src/i18n/strings/uk.json
@@ -2215,8 +2215,6 @@
             "aliases_section": "Адреси кімнати",
             "avatar_field_label": "Аватар кімнати",
             "canonical_alias_field_label": "Основна адреса",
-            "default_url_previews_off": "Попередній перегляд URL-адрес типово вимкнений для учасників цієї кімнати.",
-            "default_url_previews_on": "Попередній перегляд URL-адрес типово увімкнений для учасників цієї кімнати.",
             "description_space": "Змінити налаштування, що стосуються вашого простору.",
             "error_creating_alias_description": "Помилка створення такої адреси. Можливо, сервер цього не дозволяє або стався тимчасовий збій.",
             "error_creating_alias_title": "Помилка створення адреси",
@@ -2247,12 +2245,7 @@
             "published_aliases_explainer_space": "Загальнодоступні адреси можуть бути використані будь-ким на будь-якому сервері для приєднання до вашого простору.",
             "published_aliases_section": "Загальнодоступні адреси",
             "save": "Зберегти зміни",
-            "topic_field_label": "Тема кімнати",
-            "url_preview_encryption_warning": "У кімнатах з шифруванням, як у цій, попередній перегляд посилань усталено вимкнено. Це робиться, щоб гарантувати, що ваш домашній сервер (на якому генеруються перегляди) не матиме змоги збирати дані щодо посилань, які ви бачите у цій кімнаті.",
-            "url_preview_explainer": "Коли хтось додає URL-адресу у повідомлення, можливо автоматично показувати для цієї URL-адресу попередній перегляд його заголовку, опису й зображення.",
-            "url_previews_section": "Попередній перегляд URL-адрес",
-            "user_url_previews_default_off": "Ви <a>вимкнули</a> усталений попередній перегляд URL-адрес.",
-            "user_url_previews_default_on": "Ви <a>увімкнули</a> усталений попередній перегляд URL-адрес."
+            "topic_field_label": "Тема кімнати"
         },
         "notifications": {
             "browse_button": "Огляд",
@@ -2674,8 +2667,6 @@
             "username": "Ім'я користувача"
         },
         "inline_url_previews_default": "Увімкнути вбудований перегляд гіперпосилань за умовчанням",
-        "inline_url_previews_room": "Увімкнути попередній перегляд гіперпосилань за умовчанням для учасників цієї кімнати",
-        "inline_url_previews_room_account": "Увімкнути попередній перегляд гіперпосилань в цій кімнаті (стосується тільки вас)",
         "insert_trailing_colon_mentions": "Додавати двокрапку після згадки користувача на початку повідомлення",
         "invite_controls": {
             "default_label": "Дозволити користувачам запрошувати вас до кімнат"
diff --git a/apps/web/src/i18n/strings/vi.json b/apps/web/src/i18n/strings/vi.json
index 945a7054ea..109d09a3aa 100644
--- a/apps/web/src/i18n/strings/vi.json
+++ b/apps/web/src/i18n/strings/vi.json
@@ -1726,8 +1726,6 @@
             "aliases_section": "Các địa chỉ Phòng",
             "avatar_field_label": "Hình đại diện phòng",
             "canonical_alias_field_label": "Địa chỉ chính",
-            "default_url_previews_off": "Xem trước URL bị tắt theo mặc định đối với những người tham gia trong phòng này.",
-            "default_url_previews_on": "Xem trước URL được bật theo mặc định cho những người tham gia trong phòng này.",
             "description_space": "Chỉnh sửa cài đặt liên quan đến space của bạn.",
             "error_creating_alias_description": "Đã xảy ra lỗi khi tạo địa chỉ đó. Nó có thể không được máy chủ cho phép hoặc xảy ra lỗi tạm thời.",
             "error_creating_alias_title": "Lỗi khi tạo địa chỉ",
@@ -1754,12 +1752,7 @@
             "published_aliases_explainer_space": "Địa chỉ đã xuất bản có thể được sử dụng bởi bất kỳ ai trên bất kỳ máy chủ nào để tham gia space của bạn.",
             "published_aliases_section": "Các địa chỉ công khai",
             "save": "Lưu thay đổi",
-            "topic_field_label": "Chủ đề phòng",
-            "url_preview_encryption_warning": "Trong các phòng được mã hóa, như phòng này, tính năng xem trước URL bị tắt theo mặc định để đảm bảo rằng máy chủ của bạn (nơi tạo bản xem trước) không thể thu thập thông tin về các liên kết mà bạn nhìn thấy trong phòng này.",
-            "url_preview_explainer": "Khi ai đó đặt URL trong tin nhắn của họ, bản xem trước URL có thể được hiển thị để cung cấp thêm thông tin về liên kết đó như tiêu đề, mô tả và hình ảnh từ trang web.",
-            "url_previews_section": "Xem trước URL",
-            "user_url_previews_default_off": "Bạn đã tắt <a>disabled</a> xem trước URL theo mặc định.",
-            "user_url_previews_default_on": "Bạn đã bật <a>enabled</a> URL xem trước URL theo mặc định."
+            "topic_field_label": "Chủ đề phòng"
         },
         "notifications": {
             "browse_button": "Duyệt qua",
@@ -2053,8 +2046,6 @@
             "spell_check_locale_placeholder": "Chọn vùng miền"
         },
         "inline_url_previews_default": "Bật xem trước nội dung liên kết theo mặc định",
-        "inline_url_previews_room": "Bật xem trước nội dung liên kết cho mọi người trong phòng này",
-        "inline_url_previews_room_account": "Bật xem trước nội dung liên kết trong phòng này (chỉ với bạn)",
         "insert_trailing_colon_mentions": "Chèn dấu hai chấm phía sau các đề cập người dùng ở đầu một tin nhắn",
         "jump_to_bottom_on_send": "Chuyển đến cuối dòng thời gian khi bạn gửi tin nhắn",
         "key_backup": {
diff --git a/apps/web/src/i18n/strings/zh_Hans.json b/apps/web/src/i18n/strings/zh_Hans.json
index 1202dd5930..f82f4b3d6f 100644
--- a/apps/web/src/i18n/strings/zh_Hans.json
+++ b/apps/web/src/i18n/strings/zh_Hans.json
@@ -1,24 +1,29 @@
 {
     "a11y": {
-        "jump_first_invite": "跳转至第一个邀请。",
+        "emoji_picker": "Emoji 选择器",
+        "jump_first_invite": "跳转到首个邀请",
+        "message_composer": "消息编辑器",
         "n_unread_messages": {
-            "other": "%(count)s 个未读消息。",
-            "one": "1 个未读消息。"
+            "one": "1 个未读消息",
+            "other": "%(count)s 个未读消息。"
         },
         "n_unread_messages_mentions": {
-            "other": "包括提及在内有 %(count)s 个未读消息。",
-            "one": "1 个未读提及。"
+            "one": "1 个未读提及",
+            "other": "%(count)s 个包含提及在内的未读消息"
         },
+        "recent_rooms": "最近的房间",
         "room_name": "房间 %(name)s",
+        "room_status_bar": "房间状态栏",
+        "seek_bar_label": "音频搜索栏",
         "unread_messages": "未读消息。",
         "user_menu": "用户菜单"
     },
-    "a11y_jump_first_unread_room": "跳转至第一个未读房间。",
+    "a11y_jump_first_unread_room": "跳转到首个未读房间。",
     "action": {
         "accept": "接受",
         "add": "添加",
-        "add_existing_room": "添加现有的房间",
-        "add_people": "加人",
+        "add_existing_room": "添加现有房间",
+        "add_people": "添加人员",
         "apply": "应用",
         "approve": "批准",
         "ask_to_join": "申请加入",
@@ -39,6 +44,8 @@
         "create_a_room": "创建房间",
         "create_account": "创建账户",
         "decline": "拒绝",
+        "decline_and_block": "拒绝并屏蔽",
+        "decline_invite": "拒绝邀请",
         "delete": "删除",
         "deny": "拒绝",
         "disable": "禁用",
@@ -51,15 +58,15 @@
         "enter_fullscreen": "进入全屏",
         "exit_fullscreeen": "退出全屏",
         "expand": "展开",
-        "explore_public_rooms": "查找公开房间",
+        "explore_public_rooms": "浏览公共房间",
         "explore_rooms": "查找房间",
         "export": "导出",
         "forward": "转发",
         "go": "前往",
-        "go_back": "返回",
-        "got_it": "知道了",
-        "hide_advanced": "隐藏高级",
-        "hold": "挂起",
+        "go_back": "后退",
+        "got_it": "明白",
+        "hide_advanced": "隐藏高级选项",
+        "hold": "保持",
         "ignore": "忽略",
         "import": "导入",
         "invite": "邀请",
@@ -69,7 +76,7 @@
         "learn_more": "了解更多",
         "leave": "离开",
         "leave_room": "离开房间",
-        "logout": "登出",
+        "logout": "注销",
         "manage": "管理",
         "maximise": "最大化",
         "mention": "提及",
@@ -77,53 +84,56 @@
         "new_room": "新建房间",
         "new_video_room": "新视频房间",
         "next": "下一个",
-        "no": "不",
+        "no": "否",
         "ok": "确定",
         "open": "打开",
-        "pin": "别针",
+        "pin": "置顶",
         "proceed": "继续",
-        "quote": "引述",
+        "quote": "引用",
         "react": "回应",
         "refresh": "刷新",
         "register": "注册",
-        "reload": "重加载",
+        "reload": "重新载入",
         "remove": "移除",
         "rename": "重命名",
         "reply": "回复",
         "reply_in_thread": "在消息列中回复",
         "report_content": "举报内容",
+        "report_room": "举报房间",
         "resend": "重新发送",
         "reset": "重置",
         "resume": "恢复",
         "retry": "重试",
-        "review": "开始验证",
-        "revoke": "撤销",
+        "review": "审阅",
+        "revoke": "撤消",
         "save": "保存",
         "search": "搜索",
-        "send_report": "发送报告",
+        "send_report": "发送举报",
+        "set_avatar": "设置个人资料图像",
         "share": "分享",
         "show": "显示",
-        "show_advanced": "显示高级",
+        "show_advanced": "显示高级选项",
         "show_all": "显示全部",
         "sign_in": "登录",
-        "sign_out": "注销",
+        "sign_out": "移除此设备",
         "skip": "跳过",
         "start": "开始",
         "start_chat": "开始聊天",
-        "start_new_chat": "开始新的聊天",
+        "start_new_chat": "开始新聊天",
         "stop": "停止",
         "submit": "提交",
         "subscribe": "订阅",
         "transfer": "传输",
         "trust": "信任",
         "try_again": "重试",
-        "unban": "解除封禁",
-        "unignore": "取消忽略",
+        "unban": "解封",
+        "unignore": "解除忽略",
         "unpin": "取消置顶",
-        "unsubscribe": "取消订阅",
+        "unsubscribe": "退订",
         "update": "更新",
-        "upgrade": "升级加密",
+        "upgrade": "升级",
         "upload": "上传",
+        "upload_file": "上传文件",
         "verify": "验证",
         "view": "查看",
         "view_all": "查看全部",
@@ -131,334 +141,398 @@
         "view_message": "查看消息",
         "view_source": "查看源码",
         "yes": "是",
+        "yes_dismiss": "是，忽略",
         "zoom_in": "放大",
         "zoom_out": "缩小"
     },
     "analytics": {
-        "accept_button": "没问题",
-        "bullet_1": "我们<Bold>不会</Bold>记录或配置任何账户数据",
-        "bullet_2": "我们<Bold>不会</Bold>与第三方共享信息",
-        "consent_migration": "你之前同意与我们分享匿名使用数据。我们正在更新其工作方式。",
-        "disable_prompt": "您可以随时在设置中关闭此功能",
+        "accept_button": "良好",
+        "bullet_1": "我们<Bold>不</Bold>记录或分析任何个人数据",
+        "bullet_2": "我们<Bold>不</Bold>分享数据给第三方",
+        "consent_migration": "你已于之前同意我们分享匿名使用情况数据。我们正在更新其运作方式。",
+        "disable_prompt": "你可以随时在设置中关闭此选项。",
         "enable_prompt": "帮助改进 %(analyticsOwner)s",
-        "learn_more": "共享匿名数据帮助我们发现问题。无个人数据。 没有第三方。<LearnMoreLink>了解更多</LearnMoreLink>",
-        "privacy_policy": "你可以在<PrivacyPolicyUrl>此处</PrivacyPolicyUrl>阅读我们所有的条款",
-        "pseudonymous_usage_data": "通过共享匿名使用数据，帮助我们发现问题并改进%(analyticsOwner)s。为了了解人们如何使用多台设备，我们将生成一个由您的设备共享的随机标识符。",
-        "shared_data_heading": "以下数据之一可能被分享："
+        "learn_more": "分享匿名数据已帮助我们识别问题。不涉及个人隐私及第三方。<LearnMoreLink>了解更多</LearnMoreLink>",
+        "privacy_policy": "你可以阅读我们的所有条款 <PrivacyPolicyUrl>点击此处</PrivacyPolicyUrl>",
+        "pseudonymous_usage_data": "通过分享匿名使用数据，帮助我们发现问题并改进 %(analyticsOwner)s。为了解用户如何使用多台设备，我们将生成一个由你的设备共享的随机标识符。",
+        "shared_data_heading": "以下任何数据都可能被分享："
     },
     "auth": {
-        "3pid_in_use": "该电子邮件地址或电话号码已被使用。",
-        "account_clash": "你的新账户（%(newAccountId)s）已注册，但你已经登录了一个不同的账户（%(loggedInUserId)s）。",
-        "account_clash_previous_account": "用之前的账户继续",
+        "3pid_in_use": "该邮件地址或电话号码已被使用。",
+        "account_clash": "你的新账户 (%(newAccountId)s) 已注册，但你已登录到其它账户 (%(loggedInUserId)s)。",
+        "account_clash_previous_account": "使用上一个账户继续",
         "account_deactivated": "此账户已被停用。",
-        "autodiscovery_generic_failure": "从服务器获取自动发现配置时失败",
-        "autodiscovery_hs_incompatible": "您的服务器版本太旧，不支持所需的最低API版本。请与服务器所有者联系，或者升级您的服务器。",
-        "autodiscovery_invalid": "无效的家服务器搜索响应",
-        "autodiscovery_invalid_hs": "家服务器链接不像是有效的 Matrix 家服务器",
-        "autodiscovery_invalid_hs_base_url": "m.homeserver 的 base_url 无效",
-        "autodiscovery_invalid_is": "身份服务器链接不像是有效的身份服务器",
-        "autodiscovery_invalid_is_base_url": "m.identity_server 的 base_url 无效",
-        "autodiscovery_invalid_is_response": "无效的身份服务器搜索响应",
-        "autodiscovery_invalid_json": "无效的 JSON",
-        "autodiscovery_no_well_known": "找不到.well-known JSON文件",
-        "autodiscovery_unexpected_error_hs": "解析家服务器配置时发生未知错误",
-        "autodiscovery_unexpected_error_is": "解析身份服务器配置时发生未知错误",
-        "captcha_description": "此家服务器想要确认你不是机器人。",
-        "change_password_action": "修改密码",
-        "change_password_confirm_invalid": "密码不匹配",
+        "autodiscovery_generic_failure": "从服务器获取自动发现配置失败",
+        "autodiscovery_hs_incompatible": "你的主服务器版本太旧，不支持所需的最低 API 版本。请联系你的服务器所有者或升级你的服务器。",
+        "autodiscovery_invalid": "主服务器发现响应无效",
+        "autodiscovery_invalid_hs": "主服务器 URL 似乎不是有效的 Matrix 主服务器",
+        "autodiscovery_invalid_hs_base_url": "“m.homeserver”中的“base_url”无效",
+        "autodiscovery_invalid_is": "身份服务器 URL 似乎不是有效的身份服务器",
+        "autodiscovery_invalid_is_base_url": "“m.identity_server”中的“base_url”无效",
+        "autodiscovery_invalid_is_response": "身份服务器发现响应无效",
+        "autodiscovery_invalid_json": "JSON 无效",
+        "autodiscovery_no_well_known": ".well-known JSON 文件未找到",
+        "autodiscovery_unexpected_error_hs": "解析主服务器配置时出现未知错误",
+        "autodiscovery_unexpected_error_is": "解析身份服务器配置时出现未知错误",
+        "captcha_description": "此主服务器需要确认你是否为机器人。",
+        "change_password_action": "更改密码",
+        "change_password_confirm_invalid": "两次输入的密码不匹配",
         "change_password_confirm_label": "确认密码",
         "change_password_current_label": "当前密码",
         "change_password_empty": "密码不能为空",
         "change_password_error": "更改密码时出错：%(error)s",
-        "change_password_mismatch": "两次输入的新密码不符",
-        "change_password_new_label": "新密码",
-        "check_email_explainer": "按已发到<b>%(email)s</b>的说明操作",
-        "check_email_resend_prompt": "没收到？",
-        "check_email_resend_tooltip": "验证链接电子邮件已重新发送！",
-        "check_email_wrong_email_button": "重新输入电子邮件地址",
-        "check_email_wrong_email_prompt": "电子邮件地址错误？",
+        "change_password_mismatch": "新密码不匹配",
+        "change_password_new_label": "新密码不匹配",
+        "check_email_explainer": "按说明发送到 <b>%(email)s</b>",
+        "check_email_resend_prompt": "未收到？",
+        "check_email_resend_tooltip": "验证链接邮件已重新发送！",
+        "check_email_wrong_email_button": "重新输入邮件地址",
+        "check_email_wrong_email_prompt": "邮件地址有误？",
         "continue_with_idp": "使用 %(provider)s 继续",
         "continue_with_sso": "使用 %(ssoButtons)s 继续",
-        "country_dropdown": "国家下拉菜单",
+        "country_dropdown": "国家与地区下拉菜单",
         "create_account_prompt": "新来的？<a>创建账户</a>",
         "create_account_title": "创建账户",
-        "email_discovery_text": "使用电子邮箱以选择性地被现有联系人搜索。",
-        "email_field_label": "电子邮箱",
-        "email_field_label_invalid": "看起来不像有效的邮件地址",
-        "email_field_label_required": "输入邮箱地址",
-        "email_help_text": "添加电子邮箱以重置你的密码。",
-        "email_phone_discovery_text": "使用电子邮箱或电话以选择性地被现有联系人搜索。",
-        "enter_email_explainer": "<b>%(homeserver)s</b> 会向您发送一个验证链接，让您重置密码。",
-        "enter_email_heading": "输入您的邮箱以重置您的密码",
-        "failed_connect_identity_server": "无法连接到身份服务器",
-        "failed_connect_identity_server_other": "你可以登录，但部分功能在身份服务器重新上线之前不可用。如果持续看到此警告，请检查配置或联系服务器管理员。",
-        "failed_connect_identity_server_register": "你可以注册，但部分功能在身份服务器重新上线之前不可用。如果持续看到此警告，请检查配置或联系服务器管理员。",
-        "failed_connect_identity_server_reset_password": "你可以重置密码，但部分功能在身份服务器重新上线之前不可用。如果持续看到此警告，请检查配置或联系服务器管理员。",
-        "failed_homeserver_discovery": "无法执行家服务器搜索",
+        "email_discovery_text": "使用邮件可选择让现有联系人发现。",
+        "email_field_label": "邮件",
+        "email_field_label_invalid": "似乎不是有效的邮件地址",
+        "email_field_label_required": "输入邮件地址",
+        "email_help_text": "添加邮件地址以用于重置密码",
+        "email_phone_discovery_text": "使用邮件地址或电话号码可选择让现有联系人发现。",
+        "enter_email_explainer": "<b>%(homeserver)s</b> 将向你发送验证链接以重置密码。",
+        "enter_email_heading": "输入邮件地址以重置密码",
+        "failed_connect_identity_server": "无法连接身份服务器",
+        "failed_connect_identity_server_other": "你可以登录，但某些功能在身份服务器恢复正常之前将不可用。如果你持续看到此警告，请检查你的配置或联系服务器管理员。",
+        "failed_connect_identity_server_register": "你可以注册，但某些功能在身份服务器恢复正常之前将不可用。如果你持续看到此警告，请检查你的配置或联系服务器管理员。",
+        "failed_connect_identity_server_reset_password": "你可以重置密码，但某些功能在身份服务器恢复正常之前将不可用。如果你持续看到此警告，请检查你的配置或联系服务器管理员。",
+        "failed_homeserver_discovery": "无法执行主服务器发现",
         "failed_query_registration_methods": "无法查询支持的注册方法。",
         "failed_soft_logout_auth": "重新认证失败",
-        "failed_soft_logout_homeserver": "由于家服务器的问题，重新认证失败",
-        "forgot_password_email_invalid": "电子邮件地址似乎无效。",
-        "forgot_password_email_required": "必须输入和你账户关联的邮箱地址。",
-        "forgot_password_prompt": "忘记你的密码了吗？",
-        "forgot_password_send_email": "发送重置连接",
-        "identifier_label": "登录方式",
+        "failed_soft_logout_homeserver": "由于服务器的问题，重新认证失败",
+        "forgot_password_email_invalid": "邮件地址似乎无效。",
+        "forgot_password_email_required": "必须输入与你的账户关联的邮件地址",
+        "forgot_password_prompt": "忘记密码？",
+        "forgot_password_send_email": "发送邮件",
+        "identifier_label": "登录选项",
         "incorrect_credentials": "用户名或密码错误。",
-        "incorrect_credentials_detail": "请注意，你正在登录 %(hs)s，而非 matrix.org。",
-        "incorrect_password": "密码错误",
+        "incorrect_credentials_detail": "请留意你登录的服务器为 %(hs)s 而不是 matrix.org",
+        "incorrect_password": "密码不正确",
         "log_in_new_account": "<a>登录</a>到你的新账户。",
         "logout_dialog": {
-            "description": "你确定要登出吗？",
+            "description": "你确定要注销吗？",
             "megolm_export": "手动导出密钥",
-            "setup_key_backup_title": "你将失去你的加密消息的访问权",
-            "setup_secure_backup_description_1": "加密消息已使用端到端加密保护。只有你和拥有密钥的收件人可以阅读这些消息。",
-            "setup_secure_backup_description_2": "当你登出时，这些密钥会从此设备删除。这意味着你将无法查阅已加密消息，除非你在其他设备上有那些消息的密钥，或者已将其备份到服务器。",
-            "skip_key_backup": "我不想要我的加密消息"
+            "setup_key_backup_title": "你将失去加密消息的访问权",
+            "setup_secure_backup_description_1": "加密消息采用端到端加密技术确保安全。只有你与收件人拥有读取这些消息的密钥。",
+            "setup_secure_backup_description_2": "当你移除此设备时，这些密钥将从此设备中删除，这意味着你将无法读取加密消息，除非你在其他设备上拥有这些密钥，或者将它们备份到服务器。",
+            "skip_key_backup": "我要丢弃加密消息"
         },
-        "misconfigured_body": "跟你的%(brand)s管理员确认<a>你的配置</a>不正确或重复的条目。",
-        "misconfigured_title": "你的 %(brand)s 配置有错误",
-        "msisdn_field_description": "别的用户可以使用你的联系人详情邀请你加入房间",
+        "misconfigured_body": "请 %(brand)s 的管理员检查<a>你的配置</a>中是否存在错误或重复的条目。",
+        "misconfigured_title": "你的 %(brand)s 配置错误",
+        "mobile_create_account_title": "你即将在 %(hsName)s 创建账户",
+        "msisdn_field_description": "其他用户可以使用你的联系方式邀请你进入房间",
         "msisdn_field_label": "电话",
-        "msisdn_field_number_invalid": "电话号码看起来不太对，请检查并重试",
+        "msisdn_field_number_invalid": "电话号码看起来不正确，请检查并重试",
         "msisdn_field_required_invalid": "输入电话号码",
-        "no_hs_url_provided": "未输入家服务器链接",
+        "no_hs_url_provided": "未提供主服务器 URL",
         "oidc": {
-            "error_title": "我们无法使你登入",
-            "generic_auth_error": "验证时出了问题。前往登录页面并重试。",
-            "missing_or_invalid_stored_state": "我们已要求浏览器记住你使用的家服务器，但不幸的是你的浏览器已忘记。请前往登录页面重试。"
+            "error_title": "我们无法让你登录",
+            "generic_auth_error": "身份验证期间出现问题。请转到登录页面并重试。",
+            "missing_or_invalid_stored_state": "我们要求浏览器记住你用于登录的主服务器，但很遗憾，你的浏览器忘记了它。请转到登录页面并重试。"
         },
-        "password_field_keep_going_prompt": "继续前进……",
+        "password_field_keep_going_prompt": "保持…",
         "password_field_label": "输入密码",
-        "password_field_strong_label": "不错，是个强密码！",
-        "password_field_weak_label": "密码允许但不安全",
+        "password_field_strong_label": "很好，高强度密码！",
+        "password_field_weak_label": "允许使用密码，但不安全",
         "phone_label": "电话",
         "phone_optional_label": "电话号码（可选）",
         "qr_code_login": {
-            "completing_setup": "完成新设备的设置"
+            "check_code_explainer": "这将验证与其它设备的关联是否安全。",
+            "check_code_heading": "输入其它设备上显示的数字",
+            "check_code_input_label": "2 位数代码",
+            "check_code_mismatch": "数字不匹配",
+            "completing_setup": "完成新设备的设置",
+            "error_etag_missing": "发生意外错误。这可能是由于浏览器扩展、代理服务器或服务器配置错误造成的。",
+            "error_expired": "登录已过期。请重试。",
+            "error_expired_title": "登录未及时完成",
+            "error_insecure_channel_detected": "无法与新设备建立安全连接。你的现有设备仍然安全，无需担心。",
+            "error_insecure_channel_detected_instructions": "现在怎么办？",
+            "error_insecure_channel_detected_instructions_1": "如果是网络问题，请尝试使用二维码再次登录到其它设备。",
+            "error_insecure_channel_detected_instructions_2": "如果你遇到同样的问题，请尝试其它 Wi-Fi 网络或使用移动数据流量。",
+            "error_insecure_channel_detected_instructions_3": "如果未能生效，请手动登录",
+            "error_insecure_channel_detected_title": "不安全连接",
+            "error_other_device_already_signed_in": "你不需要做其他任何事情。",
+            "error_other_device_already_signed_in_title": "你的其它设备已登录",
+            "error_rate_limited": "短时间内尝试次数过多。请稍后再试。",
+            "error_unexpected": "发生意外错误。连接你其它设备的请求已被取消。",
+            "error_unsupported_protocol": "此设备不支持使用二维码登录其它设备。",
+            "error_unsupported_protocol_title": "其它设备不兼容",
+            "error_user_cancelled": "已在另一设备上取消登录。",
+            "error_user_cancelled_title": "登录请求已取消",
+            "error_user_declined": "你或账户提供者拒绝了登录请求。",
+            "error_user_declined_title": "登录被拒绝",
+            "follow_remaining_instructions": "按剩余说明操作",
+            "open_element_other_device": "在你的其它设备上打开 %(brand)s",
+            "point_the_camera": "扫描此处显示的二维码",
+            "scan_code_instruction": "使用其它设备扫描二维码",
+            "scan_qr_code": "使用二维码登录",
+            "security_code": "安全代码",
+            "security_code_prompt": "如有要求，请在其它设备上输入以下代码。",
+            "select_qr_code": "选择“%(scanQRCode)s”",
+            "unsupported_explainer": "你的账户提供者不支持通过二维码登录到新设备。",
+            "unsupported_heading": "二维码不受支持",
+            "waiting_for_device": "等待设备登录"
         },
         "register_action": "创建账户",
         "registration": {
-            "continue_without_email_description": "请注意，如果你不添加电子邮箱并且忘记密码，你将<b>永远失去对你账户的访问权</b>。",
-            "continue_without_email_field_label": "电子邮箱（可选）",
-            "continue_without_email_title": "不使用电子邮箱并继续"
+            "continue_without_email_description": "请注意，如果你未添加邮件地址并忘记了密码，你可能会<b>永久失去账户访问权</b>。",
+            "continue_without_email_field_label": "邮件地址（可选）",
+            "continue_without_email_title": "在不使用邮件的情况下继续"
         },
-        "registration_disabled": "此家服务器已禁止注册。",
-        "registration_msisdn_field_required_invalid": "输入电话号码（此家服务器上必须）",
+        "registration_disabled": "此主服务器已禁用注册。",
+        "registration_msisdn_field_required_invalid": "输入电话号码（在此主服务器为必需）",
         "registration_successful": "注册成功",
-        "registration_username_in_use": "该名称已被占用。 尝试另一个，或者如果是您，请在下面登录。",
-        "registration_username_unable_check": "无法检查用户名是否已被使用。稍后再试。",
-        "registration_username_validation": "仅使用小写字母，数字，横杠和下划线",
+        "registration_username_in_use": "该用户名已被使用。请尝试其它用户名，如果是你本人，请在下方登录。",
+        "registration_username_unable_check": "无法检查用户名是否被占用。稍后再试。",
+        "registration_username_validation": "只能使用小写字母、数字、破折号与下划线",
         "reset_password": {
-            "devices_logout_success": "你已登出全部设备，并将不再收到推送通知。要重新启用通知，请在每台设备上再次登入。",
-            "other_devices_logout_warning_1": "登出你的设备会删除存储在其上的消息加密密钥，使加密的聊天历史不可读。",
-            "other_devices_logout_warning_2": "若想保留对加密房间的聊天历史的访问权，请设置密钥备份或从其他设备导出消息密钥，然后再继续。",
+            "confirm_new_password": "确认新密码",
+            "devices_logout_success": "你已移除所有设备，将不再接收推送通知。要重新启用通知，请在每台设备上重新登录。",
+            "other_devices_logout_warning_1": "移除设备将删除存储在其中的消息加密密钥，从而使加密的聊天历史无法读取。",
+            "other_devices_logout_warning_2": "如果你想保留对加密房间中聊天记录的访问权限，请获取恢复密钥或从其它设备导出消息密钥，然后再继续。",
             "password_not_entered": "必须输入新密码。",
-            "passwords_mismatch": "新密码必须互相匹配。",
-            "reset_successful": "你的密码已重置。",
-            "return_to_login": "返回登录页面"
+            "passwords_mismatch": "两次输入的新密码必须匹配。",
+            "rate_limit_error": "短时间内尝试次数过多。请稍后再试。",
+            "rate_limit_error_with_time": "短时间内尝试次数过多。请于 %(timeout)s 秒后重试。",
+            "reset_successful": "密码已被重置。",
+            "return_to_login": "回到登录屏幕",
+            "sign_out_other_devices": "移除其它设备"
         },
+        "reset_password_action": "重置密码",
         "reset_password_button": "忘记密码？",
-        "reset_password_email_field_description": "使用邮件地址恢复你的账户",
-        "reset_password_email_field_required_invalid": "输入邮件地址（此家服务器上必须）",
-        "reset_password_email_not_associated": "你的电子邮件地址似乎未与服务器上的Matrix ID关联。",
-        "reset_password_email_not_found_title": "未找到此邮箱地址",
-        "server_picker_custom": "其他自定义服务器",
-        "server_picker_description": "你可以使用自定义服务器选项来指定不同的家服务器URL以登录其他Matrix服务器。这让你能把%(brand)s和不同家服务器上的已有Matrix账户搭配使用。",
-        "server_picker_description_matrix.org": "免费加入最大的公共服务器，成为数百万用户中的一员",
-        "server_picker_dialog_title": "决定账户托管位置",
-        "server_picker_explainer": "使用你的Matrix服务器，或自己架设一个。",
-        "server_picker_failed_validate_homeserver": "无法验证家服务器",
-        "server_picker_intro": "我们将您可以托管账户的地方称为“服务器组”。",
-        "server_picker_invalid_url": "URL 无效",
-        "server_picker_learn_more": "关于家服务器",
-        "server_picker_matrix.org": "Matrix.org 是世界上最大的公共家服务器，因此对许多人来说是一个好地方。",
-        "server_picker_required": "指定家服务器",
-        "server_picker_title": "登录你的家服务器",
+        "reset_password_email_field_description": "使用邮件地址以恢复账户",
+        "reset_password_email_field_required_invalid": "输入邮件地址（在该主服务器为必需）",
+        "reset_password_email_not_associated": "你的邮件地址似乎未与此主服务器上的 Matrix ID 关联。",
+        "reset_password_email_not_found_title": "此邮件地址未找到",
+        "reset_password_title": "重置密码",
+        "server_picker_custom": "其它主服务器",
+        "server_picker_description": "你可以使用自定义服务器选项，通过指定不同的主服务器网址登录其它 Matrix 服务器。这样你就可以通过现有的 Matrix 账户在其它主服务器上使用 %(brand)s。",
+        "server_picker_description_matrix.org": "免费加入数百万人规模，最大的公共服务器",
+        "server_picker_dialog_title": "决定你的账户托管在哪里",
+        "server_picker_explainer": "如果有首选的 Matrix 主服务器，请使用它，或托管自己的服务器。",
+        "server_picker_failed_validate_homeserver": "无法验证主服务器",
+        "server_picker_intro": "我们将可以托管账户的地方称为 “主服务器”。",
+        "server_picker_invalid_url": "无效 URL",
+        "server_picker_learn_more": "关于主服务器",
+        "server_picker_matrix.org": "Matrix.org 是世界上最大的公共主服务器，因此对许多人来说都是一个不错的选择。",
+        "server_picker_required": "指定主服务器",
+        "server_picker_title": "登录到主服务器",
         "server_picker_title_default": "服务器选项",
         "server_picker_title_registration": "账户托管于",
-        "session_logged_out_description": "出于安全考虑，此会话已被注销。请重新登录。",
-        "session_logged_out_title": "已退出登录",
+        "session_logged_out_description": "为安全起见，此设备已被移除。请重新登录。",
+        "session_logged_out_title": "会话已移除",
         "set_email": {
-            "description": "这将允许你重置你的密码和接收通知。",
-            "verification_pending_description": "请检查你的电子邮箱并点击里面包含的链接。完成时请点击继续。",
-            "verification_pending_title": "验证等待中"
+            "description": "这将允许你重置密码并接收通知。",
+            "verification_pending_description": "请查看邮件并点击其中的链接。完成后点击“继续”。",
+            "verification_pending_title": "等待验证"
         },
-        "set_email_prompt": "你想要设置一个邮箱地址吗？",
-        "sign_in_description": "使用你的账户继续。",
-        "sign_in_instead": "跳转到登录",
-        "sign_in_instead_prompt": "已有账户？<a>在此登录</a>",
+        "set_email_prompt": "你要设置邮件地址吗？",
+        "sign_in_description": "使用你的账户以继续。",
+        "sign_in_instead": "其它登录方式",
+        "sign_in_instead_prompt": "已有账户？<a>登录</a>",
         "sign_in_or_register": "登录或创建账户",
-        "sign_in_or_register_description": "使用已有账户或创建一个新账户。",
-        "sign_in_prompt": "有账户了？<a>登录</a>",
-        "sign_in_with_sso": "使用单点登录",
+        "sign_in_or_register_description": "使用你的现有账户或创建一个新账户继续。",
+        "sign_in_prompt": "已有账户？<a>登录</a>",
+        "sign_in_with_sso": "以单点模式登录",
+        "signing_in": "正在登录…",
         "soft_logout": {
             "clear_data_button": "清除所有数据",
-            "clear_data_description": "清除此设备中的所有数据是永久的。加密消息会丢失，除非其密钥已被备份。",
-            "clear_data_title": "是否清除此设备中的所有数据？"
+            "clear_data_description": "清除此会话中的所有数据是永久性的。除非备份了密钥，否则加密消息将会丢失。",
+            "clear_data_title": "清除此会话中的所有数据？"
         },
-        "soft_logout_heading": "你已登出",
-        "soft_logout_intro_password": "输入你的密码以登录并重新获取访问你账户的权限。",
-        "soft_logout_intro_sso": "请登录以重新获取访问你账户的权限。",
-        "soft_logout_intro_unsupported_auth": "你不能登录到你的账户。请联系你的家服务器管理员以获取更多信息。",
+        "soft_logout_heading": "你已注销",
+        "soft_logout_intro_password": "输入密码登录并重新访问你的账户。",
+        "soft_logout_intro_sso": "登录并重新获得对账户的访问权。",
+        "soft_logout_intro_unsupported_auth": "你无法登录账户。请联系主服务器管理员了解更多信息。",
         "soft_logout_subheading": "清除个人数据",
+        "soft_logout_warning": "警告：你的个人数据（包括加密密钥）仍存储在此会话中。如果你结束使用此会话或想要登录其它账户，请清除它。",
         "sso": "单点登录",
-        "sso_complete_in_browser_dialog_title": "转到您的浏览器以完成登录",
-        "sso_failed_missing_storage": "我们已请求浏览器记住你使用的服务器，但是你的浏览器貌似已经忘记了。请前往登录页面重试。",
+        "sso_complete_in_browser_dialog_title": "转到浏览器以完成登录",
+        "sso_failed_missing_storage": "我们要求浏览器记住你用于登录的主服务器，但很遗憾，你的浏览器忘记了它。请转到登录页面并重试。",
         "sso_or_username_password": "%(ssoButtons)s 或 %(usernamePassword)s",
-        "sync_footer_subtitle": "如果你加入了很多房间，可能会消耗一些时间",
+        "sync_footer_subtitle": "如果你加入了很多房间，这可能需要一段时间。",
+        "syncing": "正在同步…",
         "uia": {
             "code": "代码",
-            "email": "要创建账户，请打开我们刚刚发送到%(emailAddress)s的电子邮件里的链接。",
-            "email_auth_header": "检查你的电子邮件以继续",
-            "email_resend_prompt": "没收到吗？<a>重新发送</a>",
-            "email_resent": "已重新发送！",
+            "email": "要创建你的账户，请打开我们刚刚发送至 %(emailAddress)s 的邮件中的链接。",
+            "email_auth_header": "查看邮箱以继续",
+            "email_resend_prompt": "没有收到？<a>重新发送</a>",
+            "email_resent": "重新发送！",
             "fallback_button": "开始认证",
-            "msisdn": "一封短信已发送到 %(msisdn)s",
-            "msisdn_token_incorrect": "令牌错误",
-            "msisdn_token_prompt": "请输入其包含的代码：",
-            "password_prompt": "在下方输入账户密码以确认你的身份。",
-            "recaptcha_missing_params": "在服务器配置中缺少验证码公钥。请将此问题报告给你的服务器管理员。",
-            "registration_token_prompt": "输入由服务器管理员所提供的注册密钥。",
-            "sso_body": "使用单一登入证明你的身份，以确认添加此电子邮件地址。",
-            "sso_failed": "确认你的身份时出了一点问题。取消并重试。",
-            "sso_postauth_body": "点击下方按钮确认你的身份。",
+            "mas_cross_signing_reset_cta": "在账户中继续",
+            "mas_cross_signing_reset_description": "你即将前往 %(serverName)s 账户重置数字身份。完成账户重置后，请返回此处并点击“重试”。",
+            "mas_cross_signing_reset_title": "转到你的账户以重置数字身份",
+            "msisdn": "已向 %(msisdn)s 发送文本消息",
+            "msisdn_token_incorrect": "Token 不正确",
+            "msisdn_token_prompt": "请输入其中包含的代码：",
+            "password_prompt": "请在下面输入账户密码以确认身份。",
+            "recaptcha_missing_params": "主服务器配置中缺少 CAPTCHA 公钥。请将此问题报告给主服务器管理员。",
+            "registration_token_label": "注册 Token",
+            "registration_token_prompt": "输入主服务器管理员提供的注册 Token。",
+            "sso_body": "请确认使用单点登录添加此邮件地址以证明身份。",
+            "sso_failed": "确认身份时出现问题。取消并重试。",
+            "sso_postauth_body": "点击以下按钮确认身份。",
             "sso_postauth_title": "确认以继续",
-            "sso_preauth_body": "要继续，请使用单点登录证明你的身份。",
+            "sso_preauth_body": "要继续，请使用单点登录以证明身份。",
             "sso_title": "使用单点登录继续",
-            "terms": "请阅读并接受此服务器的政策：",
-            "terms_invalid": "请阅读并接受此服务器的所有政策"
+            "terms": "请阅读并接受主服务器的政策：",
+            "terms_invalid": "请阅读并接受主服务器的所有政策"
         },
-        "unsupported_auth": "此服务器未提供客户端支持的任何登录流程。",
-        "unsupported_auth_email": "此家服务器不支持使用电子邮箱地址登录。",
-        "unsupported_auth_msisdn": "此服务器不支持使用电话号码认证。",
+        "unsupported_auth": "此主服务器不提供此客户端支持的任何登录流程。",
+        "unsupported_auth_email": "此主服务器不支持使用邮件地址登录。",
+        "unsupported_auth_msisdn": "此服务器不支持使用电话号码进行身份验证。",
         "username_field_required_invalid": "输入用户名",
-        "username_in_use": "用户名已被占用，请尝试使用其他用户名。"
+        "username_in_use": "此用户名已被使用，请更换。",
+        "verify_email_explainer": "在重置密码之前，我们需要确认你的身份。请点击我们刚刚发送到 <b>%(email)s</b> 中的链接。",
+        "verify_email_heading": "验证邮件地址以继续"
     },
     "bug_reporting": {
-        "additional_context": "如果有额外的上下文可以帮助我们分析问题，比如你当时在做什么、房间 ID、用户 ID 等等，请将其列于此处。",
-        "before_submitting": "在提交日志之前，你必须<a>创建一个GitHub issue</a> 来描述你的问题。",
-        "collecting_information": "正在收集应用版本信息",
+        "additional_context": "如果有其它有助于分析问题的上下文（例如你当时在做什么、房间 ID、用户 ID 等），请在此处包含这些内容。",
+        "before_submitting": "建议你<a>创建 GitHub Issue</a>，以确保你的报告被审核。",
+        "collecting_information": "正在收集 App 版本信息",
         "collecting_logs": "正在收集日志",
-        "create_new_issue": "请在 GitHub 上<newIssueLink>创建一个新 issue</newIssueLink> 以便我们调查此错误。",
-        "description": "调试日志包含应用使用数据，其中包括你的用户名、你访问过的房间的别名或ID、你上次与哪些UI元素互动、还有其它用户的用户名。但不包含消息。",
+        "create_new_issue": "请在 GitHub 上<newIssueLink>创建新 issue</newIssueLink>，以便我们调查此错误。",
+        "description": "调试日志包含 App 使用数据、你的用户名、访问过的房间 ID 或其别名、上次与之交互的 UI 元素以及其他用户的用户名。它们不包含消息。",
         "download_logs": "下载日志",
         "downloading_logs": "正在下载日志",
-        "error_empty": "请告诉我们哪里出错了，或最好创建一个 GitHub issue 来描述此问题。",
+        "error_empty": "请告诉我们出了什么问题，或者更好的做法是创建一个 GitHub issue 来描述问题。",
+        "failed_download_logs": "调试日志下载失败： ",
+        "failed_send_logs_causes": {
+            "disallowed_app": "你的 Bug 报告已被拒绝。Rageshake 服务器不支持此应用程序。",
+            "rejected_generic": "你的 Bug 报告已被拒绝。Rageshake 服务器由于策略原因拒绝了报告内容。",
+            "rejected_recovery_key": "你的 Bug 报告由于安全原因被拒绝，因为它包含恢复密钥。",
+            "rejected_version": "你的 Bug 报告被拒绝，因为你正在运行的版本太旧。",
+            "server_unknown_error": "Rageshake 服务器遇到未知错误，无法处理报告。",
+            "unknown_error": "日志发送失败。"
+        },
         "github_issue": "GitHub 上的 issue",
-        "introduction": "若你通过GitHub提交bug，则调试日志能帮助我们追踪问题。 ",
-        "log_request": "要帮助我们防止其以后发生，请<a>给我们发送日志</a>。",
-        "logs_sent": "日志已发送",
-        "matrix_security_issue": "要报告 Matrix 相关的安全问题，请阅读 Matrix.org 的<a>安全公开策略</a>。",
-        "preparing_download": "正在准备下载日志",
+        "introduction": "如果你通过 GitHub 提交 bug，调试日志可以帮助我们跟踪问题。",
+        "log_request": "为帮助我们今后避免这种情况，请<a>向我们发送日志</a>。",
+        "logs_sent": "发送日志",
+        "matrix_security_issue": "要报告与 Matrix 相关的安全问题，请阅读 Matrix.org <a>安全披露政策</a>。",
+        "preparing_download": "准备下载日志",
         "preparing_logs": "正在准备发送日志",
         "send_logs": "发送日志",
         "submit_debug_logs": "提交调试日志",
-        "textarea_label": "提示",
+        "textarea_label": "内容",
         "thank_you": "谢谢！",
-        "title": "错误上报",
-        "unsupported_browser": "提醒：你的浏览器不被支持，所以你的体验可能不可预料。",
+        "title": "Bug 报告",
+        "unsupported_browser": "提醒：你的浏览器不受支持，因此你的使用体验可能无法预测。",
         "uploading_logs": "正在上传日志",
-        "waiting_for_server": "正在等待服务器响应"
+        "waiting_for_server": "等待服务器响应"
     },
-    "cannot_invite_without_identity_server": "无法在未设置身份服务器时邀请用户，你可以在“设置”里连接一个。",
-    "cannot_reach_homeserver": "无法连接到家服务器",
-    "cannot_reach_homeserver_detail": "确保你的网络连接稳定，或与服务器管理员联系",
-    "cant_load_page": "无法加载页面",
-    "chat_card_back_action_label": "返回聊天",
+    "cannot_invite_without_identity_server": "如果没有身份服务器，则无法通过邮件地址邀请用户。你可以在“设置”下连接到身份服务器。",
+    "cannot_reach_homeserver": "无法连接主服务器",
+    "cannot_reach_homeserver_detail": "确保具有良好的 Internet 连接，或联系服务器管理员",
+    "cant_load_page": "无法载入页面",
+    "chat_card_back_action_label": "回到聊天",
     "chat_effects": {
-        "confetti_description": "附加五彩纸屑发送",
-        "confetti_message": "发送五彩纸屑",
-        "fireworks_description": "附加烟火发送",
-        "fireworks_message": "发送烟火",
-        "hearts_description": "与爱心一起发送给定的消息",
-        "hearts_message": "发送爱心",
-        "rainfall_description": "附加降雨发送给定的消息",
-        "rainfall_message": "发送降雨",
-        "snowfall_description": "发送附加雪球的给定信息",
-        "snowfall_message": "发送雪球",
-        "spaceinvaders_description": "此消息带有空间主题化效果",
-        "spaceinvaders_message": "发送空间入侵者"
+        "confetti_description": "向指定消息发送“五彩纸屑”",
+        "confetti_message": "发送了“五彩纸屑”",
+        "fireworks_description": "向指定消息发送“烟花”",
+        "fireworks_message": "发送了“烟花”",
+        "hearts_description": "向指定消息发送“爱心”",
+        "hearts_message": "发送了“爱心”",
+        "rainfall_description": "向指定消息发送“下雨”",
+        "rainfall_message": "发送了“下雨”",
+        "snowfall_description": "向指定消息发送“下雪”",
+        "snowfall_message": "发送了“下雪”",
+        "spaceinvaders_description": "向指定消息发送具有“太空主题”的特效",
+        "spaceinvaders_message": "发送了“太空侵略者”"
     },
     "common": {
-        "access_token": "访问令牌",
-        "accessibility": "无障碍功能",
+        "access_token": "访问 Token",
+        "accessibility": "易用性",
         "advanced": "高级",
-        "analytics": "统计分析服务",
+        "all_chats": "所有聊天",
+        "analytics": "分析",
         "and_n_others": {
-            "other": "和其他%(count)s个人……",
-            "one": "和其它一个..."
+            "one": "与另一个…",
+            "other": "以及剩余 %(count)s 个…"
         },
         "appearance": "外观",
         "application": "应用",
-        "are_you_sure": "你确定吗？",
+        "are_you_sure": "是否确定？",
         "attachment": "附件",
         "authentication": "认证",
         "avatar": "头像",
         "beta": "beta",
-        "camera": "摄像头",
+        "camera": "相机",
         "cameras": "相机",
-        "capabilities": "功能",
+        "cancel": "取消",
+        "capabilities": "能力",
         "copied": "已复制！",
-        "credits": "感谢",
+        "credits": "鸣谢",
         "dark": "深色",
         "description": "描述",
         "deselect_all": "取消全选",
         "device": "设备",
         "edited": "已编辑",
-        "email_address": "邮箱地址",
+        "email_address": "邮件地址",
         "emoji": "表情符号",
         "encrypted": "已加密",
         "error": "错误",
         "faq": "常见问答集",
-        "favourites": "收藏夹",
+        "favourites": "收藏",
         "feedback": "反馈",
-        "filter_results": "过滤结果",
+        "filter_results": "筛选结果",
         "forward_message": "转发消息",
         "general": "通用",
-        "go_to_settings": "打开设置",
-        "guest": "游客",
+        "go_to_settings": "转到设置",
+        "guest": "访客",
         "help": "帮助",
         "historical": "历史",
         "home": "主页",
-        "homeserver": "家服务器",
+        "homeserver": "主服务器",
         "identity_server": "身份服务器",
-        "image": "图片",
+        "image": "图像",
         "integration_manager": "集成管理器",
         "joined": "已加入",
         "labs": "实验室",
-        "legal": "法律信息",
+        "legal": "法律",
         "light": "浅色",
-        "loading": "加载中...",
+        "loading": "正在载入…",
         "location": "位置",
         "low_priority": "低优先级",
         "matrix": "Matrix",
         "message": "消息",
         "message_layout": "消息布局",
+        "message_timestamp_invalid": "无效时间戳",
         "microphone": "麦克风",
         "model": "模型",
+        "moderation_and_safety": "尺度与安全",
         "modern": "现代",
-        "mute": "静音",
+        "mute": "静默",
         "n_members": {
             "one": "%(count)s 位成员",
-            "other": "%(count)s 位成员"
+            "other": "%(count)s 个成员"
         },
         "n_rooms": {
             "one": "%(count)s 个房间",
             "other": "%(count)s 个房间"
         },
         "name": "名称",
-        "no_results": "没有更多结果",
-        "no_results_found": "找不到结果",
-        "not_trusted": "不受信任的",
-        "off": "关闭",
+        "no_results": "没有结果",
+        "no_results_found": "未找到结果",
+        "not_trusted": "未被信任",
+        "off": "关",
         "offline": "离线",
-        "on": "打开",
+        "on": "开",
         "options": "选项",
-        "orphan_rooms": "其他房间",
+        "orphan_rooms": "其它房间",
         "password": "密码",
-        "people": "联系人",
+        "people": "人员",
         "preferences": "偏好",
-        "presence": "在线",
+        "presence": "线上状态",
         "preview_message": "嘿。你是最棒的！",
         "privacy": "隐私",
         "private": "私有",
@@ -467,67 +541,74 @@
         "profile": "个人资料",
         "public": "公共",
         "public_room": "公共房间",
-        "public_space": "公开空间",
+        "public_space": "公共空间",
         "qr_code": "二维码",
         "random": "随机",
         "reactions": "反应",
-        "report_a_bug": "反馈问题",
+        "recommended": "推荐",
+        "report_a_bug": "报告 Bug",
         "room": "房间",
         "room_name": "房间名称",
         "rooms": "房间",
+        "save": "保存",
+        "saved": "已保存",
+        "saving": "正在保存…",
         "secure_backup": "安全备份",
         "select_all": "全选",
         "server": "服务器",
         "settings": "设置",
-        "setup_secure_messages": "设置安全消息",
+        "setup_secure_messages": "设置安全消息传递",
         "show_more": "显示更多",
-        "someone": "某位用户",
-        "space": "空格",
+        "someone": "某人",
+        "space": "空间",
         "spaces": "空间",
         "sticker": "贴纸",
         "stickerpack": "贴纸包",
         "success": "成功",
         "suggestions": "建议",
         "support": "支持",
-        "system_alerts": "系统警告",
+        "system_alerts": "系统警报",
         "theme": "主题",
         "thread": "消息列",
         "threads": "消息列",
         "timeline": "时间线",
+        "unavailable": "不可用",
         "unencrypted": "未加密",
-        "unmute": "取消静音",
-        "unnamed_room": "未命名的房间",
+        "unmute": "取消静默",
+        "unnamed_room": "未命名房间",
         "unnamed_space": "未命名空间",
         "unverified": "未验证",
+        "updating": "正在更新…",
         "user": "用户",
-        "user_avatar": "头像",
+        "user_avatar": "个人资料图像",
         "username": "用户名",
         "verified": "已验证",
         "version": "版本",
         "video": "视频",
         "video_room": "视频房间",
         "view_message": "查看消息",
+        "voice": "语音",
         "warning": "警告"
     },
     "composer": {
         "autocomplete": {
             "@room_description": "通知房间全体成员",
             "command_a11y": "命令自动补全",
-            "command_description": "命令",
-            "emoji_a11y": "表情符号自动补全",
+            "command_description": "指令",
+            "emoji_a11y": "Emoji 自动补全",
             "notification_a11y": "通知自动补全",
             "notification_description": "房间通知",
             "room_a11y": "房间自动补全",
-            "space_a11y": "空间自动完成",
+            "space_a11y": "空间自动补全",
             "user_a11y": "用户自动补全",
             "user_description": "用户"
         },
         "close_sticker_picker": "隐藏贴纸",
         "edit_composer_label": "编辑消息",
-        "format_bold": "粗体",
+        "format_bold": "加粗",
         "format_code_block": "代码块",
         "format_decrease_indent": "减少缩进",
-        "format_increase_indent": "添加缩进",
+        "format_increase_indent": "增加缩进",
         "format_inline_code": "代码",
         "format_insert_link": "插入链接",
         "format_italic": "斜体",
@@ -536,567 +617,826 @@
         "format_ordered_list": "有序列表",
         "format_strikethrough": "删除线",
         "format_underline": "下划线",
-        "format_unordered_list": "无序列表",
+        "format_unordered_list": "项目符号列表",
+        "formatting_toolbar_label": "格式化",
         "link_modal": {
-            "link_field_label": "链接"
+            "link_field_label": "链接",
+            "text_field_label": "文本",
+            "title_create": "创建链接",
+            "title_edit": "编辑链接"
         },
-        "no_perms_notice": "你没有在此房间发送消息的权限",
+        "mode_plain": "隐藏文字格式化选项",
+        "mode_rich_text": "显示文字格式化选项",
+        "no_perms_notice": "你无权在此房间发送消息",
         "placeholder": "发送消息…",
-        "placeholder_encrypted": "发送加密消息……",
+        "placeholder_encrypted": "发送加密消息…",
         "placeholder_reply": "发送回复…",
         "placeholder_reply_encrypted": "发送加密回复…",
-        "placeholder_thread": "回复消息列……",
-        "placeholder_thread_encrypted": "回复加密的消息列……",
+        "placeholder_thread": "在消息列中回复…",
+        "placeholder_thread_encrypted": "回复加密消息列…",
         "poll_button": "投票",
         "poll_button_no_perms_description": "你无权在此房间启动投票。",
         "poll_button_no_perms_title": "需要权限",
         "replying_title": "正在回复",
-        "room_upgraded_link": "对话在这里继续。",
-        "room_upgraded_notice": "此房间已被取代，且不再活跃。",
+        "room_unencrypted": "位于此房间的消息非端到端加密",
+        "room_upgraded_link": "对话在此处继续。",
+        "room_upgraded_notice": "此房间已被取代，不再活跃。",
         "send_button_title": "发送消息",
         "send_button_voice_message": "发送语音消息",
         "send_voice_message": "发送语音消息",
-        "stop_voice_message": "停止录制",
+        "stop_voice_message": "停止录音",
         "voice_message_button": "语音消息"
     },
-    "console_dev_note": "若你知道你正在做什么，Element是开源的，请务必看看我们的GitHub（https://github.com/vector-im/element-web/）并贡献！",
-    "console_scam_warning": "若某人告诉你在这里复制/粘贴某物，那你极有可能正被欺骗！",
-    "console_wait": "等等！",
+    "console_dev_note": "如果你知道你在做什么，Element 是开源的，请务必查看我们的 GitHub（https://github.com/vector-im/element-web/）并做出贡献！",
+    "console_scam_warning": "如果有人告诉你在这里复制或粘贴某些内容，那么你很有可能被诈骗！",
+    "console_wait": "请三思!",
     "create_room": {
         "action_create_room": "创建房间",
         "action_create_video_room": "创建视频房间",
-        "encrypted_video_room_warning": "你以后无法停用。房间将会加密但是嵌入的通话不会。",
-        "encrypted_warning": "之后你无法停用。桥接和大多数机器人也不能工作。",
-        "encryption_forced": "你的服务器要求私有房间得启用加密。",
+        "encrypted_video_room_warning": "你以后无法禁用此功能。房间将被加密，但嵌入式通话不会加密。",
+        "encrypted_warning": "此项之后无法禁用。会导致桥接器与大多数机器人暂不可用。",
+        "encryption_forced": "服务器要求在私有房间中启用加密。",
         "encryption_label": "启用端到端加密",
-        "error_title": "创建房间失败",
-        "generic_error": "当前服务器可能处于不可用或过载状态，或者你遇到了一个 bug。",
-        "join_rule_change_notice": "你可以随时从房间设置中更改此设置。",
+        "error_title": "房间创建失败",
+        "generic_error": "服务器可能不可用、超载或遇到错误。",
+        "join_rule_change_notice": "你可以随时在房间设置中更改此项。",
         "join_rule_invite": "私有房间（仅邀请）",
-        "join_rule_invite_label": "只有被邀请的人才能找到并加入这个房间。",
-        "join_rule_public_label": "任何人都可以找到并加入这个房间。",
-        "join_rule_public_parent_space_label": "任何人都可以找到并加入这个房间，而不仅仅是 <SpaceName/> 的成员。",
-        "join_rule_restricted": "对空间成员可见",
-        "join_rule_restricted_label": "<SpaceName/> 中的每个人都可以找到并加入这个房间。",
-        "name_validation_required": "请输入房间名称",
-        "room_visibility_label": "房间可见度",
-        "title_private_room": "创建一个私人房间",
-        "title_public_room": "创建公开房间",
+        "join_rule_invite_label": "只有受邀人员才能找到并加入此房间。",
+        "join_rule_knock_label": "任何人都可以申请加入，但管理员或协管员需要授予访问权限。你可以稍后更改此设置。",
+        "join_rule_public_label": "任何人都可以找到并加入此房间。",
+        "join_rule_public_parent_space_label": "任何人都可以找到并加入此房间，而不仅限于 <SpaceName/> 中的成员。",
+        "join_rule_restricted": "标准",
+        "join_rule_restricted_label": "任何位于 <SpaceName/> 中的人都可以加入。",
+        "name_validation_required": "为房间输入名称",
+        "room_visibility_label": "房间可见性",
+        "state_encrypted_warning": "启用加密状态事件的实验性支持，此功能会对服务器隐藏房间名称与主题等元数据。这些元数据对之后加入房间的用户与不支持 MSC4362 的客户端隐藏。",
+        "state_encryption_label": "加密状态事件",
+        "title_private_room": "创建私有房间",
+        "title_public_room": "创建公共房间",
         "title_video_room": "创建视频房间",
-        "topic_label": "话题（可选）",
-        "unfederated": "阻住任何不属于 %(serverName)s 的人加入此房间。",
-        "unfederated_label_default_off": "你可以启用此选项如果此房间将仅用于你的家服务器上的内部团队协作。此选项之后无法更改。",
-        "unfederated_label_default_on": "若房间将用于与拥有自己的家服务器的外部团队协作，则你可禁用此功能。这无法在以后更改。",
+        "topic_label": "主题（可选）",
+        "unfederated": "阻止任何不属于 %(serverName)s 的人员加入此房间。",
+        "unfederated_label_default_off": "如果房间仅用于与主服务器上的内部团队协作，则可以启用此项。一旦启用就无法更改。",
+        "unfederated_label_default_on": "如果此房间将用于与拥有自己主服务器的外部团队协作，你可以禁用此功能。此设置以后无法更改。",
         "unsupported_version": "服务器不支持指定的房间版本。"
     },
+    "create_section_dialog": {
+        "create_section": "创建区域",
+        "description": "区域仅对你可见",
+        "label": "区域名称",
+        "title": "创建区域"
+    },
     "create_space": {
-        "add_details_prompt": "添加一些细节，以便人们辨识你的社群。",
-        "add_details_prompt_2": "你随时可以更改它们。",
-        "add_existing_rooms_description": "选择要添加的房间或对话。这是专属于你的空间，不会有人被通知。你稍后可以再增加更多。",
-        "add_existing_rooms_heading": "你想要组织什么？",
+        "add_details_prompt": "添加一些信息以便人们识别。",
+        "add_details_prompt_2": "你可以随时更改。",
+        "add_existing_rooms_description": "选择要添加的房间或对话。这只是一个供你使用的空间，不会通知任何人。你可以稍后添加更多空间。",
+        "add_existing_rooms_heading": "你想组织哪些内容？",
         "address_label": "地址",
         "address_placeholder": "例如：my-space",
-        "done_action": "前往我的空间",
-        "done_action_first_room": "前往我的第一个房间",
-        "explainer": "空间是将房间和人分组的一种新方式。你想创建什么类型的空间？你可以在以后更改。",
-        "failed_create_initial_rooms": "创建初始空间房间失败",
-        "failed_invite_users": "邀请以下用户加入你的空间失败：%(csvUsers)s",
-        "invite_teammates_by_username": "按照用户名邀请",
-        "invite_teammates_description": "确保对的人可以访问。稍后你可以邀请更多人。",
-        "invite_teammates_heading": "邀请你的伙伴",
+        "creating": "正在创建…",
+        "creating_rooms": "正在创建房间…",
+        "done_action": "转到我的空间",
+        "done_action_first_room": "转到我的首个房间",
+        "explainer": "空间是发现并组织房间的一种方式。你想创建什么样的空间？",
+        "failed_create_initial_rooms": "创建初始空间失败",
+        "failed_invite_users": "邀请以下用户到空间失败：%(csvUsers)s",
+        "invite_teammates_by_username": "通过用户名邀请",
+        "invite_teammates_description": "确保认识的人可以访问。你可以稍后再邀请其他人。",
+        "invite_teammates_heading": "邀请同事",
+        "inviting_users": "正在邀请…",
         "label": "创建空间",
         "name_required": "请输入空间名称",
-        "personal_space": "仅有我",
-        "personal_space_description": "用于整理你房间的私有空间",
-        "private_description": "仅邀请，适合你自己或团队",
+        "personal_space": "只有我",
+        "personal_space_description": "一个用于组织你的房间的私有空间",
+        "private_description": "仅限邀请，适用于个人或团队",
         "private_heading": "你的私有空间",
-        "private_personal_description": "确保对的人有权访问 %(name)s",
-        "private_personal_heading": "你与谁一同工作？",
-        "private_space": "我和我的伙伴",
-        "private_space_description": "供你和你的伙伴使用的私有空间",
-        "public_description": "适合每一个人的开放空间，社群的理想选择",
+        "private_only_heading": "你的空间",
+        "private_personal_description": "确保受你期许的人员可以访问 %(name)s",
+        "private_personal_heading": "你与谁合作？",
+        "private_space": "我与我的同事",
+        "private_space_description": "你与同事的私有空间",
+        "public_description": "任何人都可以加入，适用于社区",
         "public_heading": "你的公共空间",
-        "setup_rooms_community_description": "让我们为每个主题都创建一个房间吧。",
-        "setup_rooms_community_heading": "你想在 %(spaceName)s 中讨论什么？",
-        "setup_rooms_description": "稍后你可以添加更多房间，包括现有的。",
-        "setup_rooms_private_heading": "你的团队正在进行什么项目?",
-        "share_description": "当前仅有你一人，与人同道而行会更好。",
+        "search_public_button": "在公共空间中搜索",
+        "setup_rooms_community_description": "创建一些房间以入门。",
+        "setup_rooms_community_heading": "你想在 %(spaceName)s 中讨论哪些内容？",
+        "setup_rooms_description": "你可以稍后添加更多房间到空间，包括现有房间。",
+        "setup_rooms_private_description": "创建一些房间以入门。",
+        "setup_rooms_private_heading": "你的团队正在进行哪些项目？",
+        "share_description": "目前只有你一人，如果有其他人，效果会更好。",
         "share_heading": "分享 %(name)s",
         "skip_action": "暂时跳过",
-        "subspace_beta_notice": "向你管理的空间添加空间。",
+        "subspace_adding": "正在添加…",
+        "subspace_beta_notice": "在受你管理的空间中添加子空间。",
         "subspace_dropdown_title": "创建空间",
         "subspace_existing_space_prompt": "想要添加现有空间？",
-        "subspace_join_rule_invite_description": "只有受邀者才能找到并加入此空间。",
+        "subspace_join_rule_invite_description": "只有受邀人员才能找到并加入此空间。",
         "subspace_join_rule_invite_only": "私有空间（仅邀请）",
-        "subspace_join_rule_label": "空间可见度",
-        "subspace_join_rule_public_description": "任何人都可以找到并加入这个空间，而不仅仅是 <SpaceName/> 的成员。",
-        "subspace_join_rule_restricted_description": "<SpaceName/> 中的任何人都可以找到并加入。"
+        "subspace_join_rule_label": "空间可见性",
+        "subspace_join_rule_public_description": "任何人都可以找到并加入此空间，而不仅是 <SpaceName/> 的成员。",
+        "subspace_join_rule_restricted_description": "位于 <SpaceName/> 中的任何人都可以加入。"
     },
     "credits": {
-        "default_cover_photo": "<photo>默认封面照片</photo> ©<author>Jesús Roncero</author> 根据<terms>CC-BY-SA 4.0</terms> 条款使用。",
-        "twemoji": "<twemoji>Twemoji</twemoji> emoji art ©<author>Twitter, Inc 和其他贡献者</author> 根据<terms>CC-BY 4.0</terms> 条款使用。",
-        "twemoji_colr": "<colr>twemoji-colr</colr> 字体 ©<author>Mozilla Foundation</author> 根据<terms>Apache 2.0</terms> 条款使用。"
+        "default_cover_photo": "<photo>默认封面照片</photo> © <author>Jesús Roncero</author>，根据 <terms>CC-BY-SA 4.0</terms> 的条款使用。",
+        "twemoji": "<twemoji>Twemoji</twemoji> Emoji 艺术 © <author>Twitter, Inc 及其他贡献者</author> 根据 <terms>CC-BY 4.0</terms> 的条款使用。",
+        "twemoji_colr": "<colr>twemoji-colr</colr> 样式 © <author>Mozilla Foundation</author>，根据 <terms>Apache 2.0</terms> 的条款使用。"
+    },
+    "decline_invitation_dialog": {
+        "confirm": "你确定要拒绝 %(roomName)s 的加入邀请？",
+        "ignore_user_help": "你将看不到来自该用户的任何消息或房间邀请。",
+        "reason_description": "描述举报房间的理由。",
+        "report_room_description": "向账户提供者举报此房间。",
+        "title": "拒绝邀请"
     },
     "desktop_default_device_name": "%(brand)s桌面版：%(platformName)s",
     "devtools": {
-        "active_widgets": "已启用的挂件",
-        "category_other": "其他",
+        "active_widgets": "激活小部件",
+        "category_other": "其它",
         "category_room": "房间",
         "caution_colon": "警告：",
+        "checking_sticky_events_support": "正在检查是否支持黏着事件…",
         "client_versions": "客户端版本",
+        "crypto": {
+            "4s_public_key_in_account_data": "在账户数据中",
+            "4s_public_key_not_in_account_data": "未找到",
+            "4s_public_key_status": "秘密存储公钥：",
+            "backup_key_cached": "本地缓存",
+            "backup_key_cached_status": "密钥缓存：",
+            "backup_key_not_stored": "未存储",
+            "backup_key_stored": "在秘密存储中",
+            "backup_key_stored_status": "密钥存储：",
+            "backup_key_unexpected_type": "意外类型",
+            "backup_key_well_formed": "良好",
+            "cross_signing": "交叉签名",
+            "cross_signing_cached": "本地缓存",
+            "cross_signing_not_ready": "交叉签名未设置",
+            "cross_signing_private_keys_in_storage": "在秘密存储中",
+            "cross_signing_private_keys_in_storage_status": "交叉签名私钥：",
+            "cross_signing_private_keys_not_in_storage": "存储中未找到",
+            "cross_signing_public_keys_on_device": "在内存中",
+            "cross_signing_public_keys_on_device_status": "交叉签名公钥：",
+            "cross_signing_ready": "交叉签名已就绪。",
+            "cross_signing_status": "交叉签名状态：",
+            "cross_signing_untrusted": "你的账户在秘密存储中拥有数字身份，但尚未被此会话信任。",
+            "crypto_not_available": "密码学模块不可用",
+            "device_id": "设备 ID",
+            "key_backup_active_version": "活跃的备份版本：",
+            "key_backup_active_version_none": "无",
+            "key_backup_inactive_warning": "你的密钥尚未在此会话中备份。",
+            "key_backup_latest_version": "服务器上的最新备份版本：",
+            "key_storage": "密钥存储",
+            "master_private_key_cached_status": "主私钥：",
+            "not_found": "未找到",
+            "not_found_locally": "本地未找到",
+            "secret_storage_not_ready": "未就绪",
+            "secret_storage_ready": "就绪",
+            "secret_storage_status": "秘密存储：",
+            "self_signing_private_key_cached_status": "自签名私钥：",
+            "session": "会话",
+            "session_fingerprint": "指纹（会话密钥）",
+            "title": "端到端加密",
+            "user_signing_private_key_cached_status": "用户签名私钥："
+        },
         "developer_mode": "开发者模式",
         "developer_tools": "开发者工具",
+        "device_dehydrated_no": "脱水：否",
+        "device_dehydrated_yes": "脱水：是",
+        "device_id": "设备 ID：%(deviceId)s",
+        "device_keys": "设备密钥",
+        "device_verification_status": {
+            "signed_by_owner": "验证状态：<E2EIcon /> 经所有者签名",
+            "unknown": "验证状态：未知",
+            "unverified": "验证状态：<E2EIcon /> 未经所有者签名",
+            "verified": "验证状态：<E2EIcon /> 经交叉签名验证"
+        },
+        "devices": "%(count)s 个密码学设备",
         "edit_setting": "编辑设置",
         "edit_values": "编辑值",
         "empty_string": "<空字符串>",
+        "error_sticky_duration_must_be_a_number": "stickyDuration 必须是数字",
+        "error_sticky_duration_out_of_range": "stickyDuration 取值范围必须在 0 ~ 36000 毫秒（1 小时）",
         "event_content": "事件内容",
-        "event_id": "事件ID：%(eventId)s",
+        "event_id": "事件 ID：%(eventId)s",
         "event_sent": "事件已发送！",
         "event_type": "事件类型",
-        "explore_room_state": "查找房间状态",
-        "failed_to_find_widget": "查找此挂件时出现错误。",
+        "expired": "已过期",
+        "expires_in": "剩余",
+        "explore_account_data": "浏览账户数据",
+        "explore_room_account_data": "浏览房间内账户数据",
+        "explore_room_state": "浏览房间状态",
+        "explore_sticky_state": "浏览黏着状态",
+        "failed_to_find_widget": "查找此小部件时出错。",
         "failed_to_load": "载入失败。",
-        "failed_to_save": "保存设置失败。",
-        "failed_to_send": "发送事件失败！",
-        "invalid_json": "看起来不像有效的JSON。",
+        "failed_to_save": "设置保存失败。",
+        "failed_to_send": "事件发送失败！",
+        "id": "ID：",
+        "invalid_device_key_id": "设备密钥 ID 无效",
+        "invalid_json": "JSON 似乎无效",
         "level": "层级",
-        "low_bandwidth_mode": "低带宽模式",
-        "low_bandwidth_mode_description": "需要兼容的家服务器。",
-        "number_of_users": "用户数",
-        "original_event_source": "原始事件源码",
-        "room_id": "房间ID: %(roomId)s",
+        "low_bandwidth_mode": "禁用对带宽有刚需的功能",
+        "low_bandwidth_mode_description": "禁用加密、状态、已读回执与键入通知",
+        "main_timeline": "主要时间线",
+        "manual_device_verification": "手动设备验证",
+        "no_receipt_found": "未找到回执",
+        "no_sticky_events": "此房间暂无黏着事件。",
+        "notification_state": "通知状态为 <strong>%(notificationState)s</strong>",
+        "notifications_debug": "通知调试",
+        "number_of_users": "用户数量",
+        "only_joined_members": "仅限已加入的用户",
+        "original_event_source": "原始事件源代码",
+        "restore_from_backup": "从备份恢复",
+        "room_encrypted": "房间<strong>已加密</strong> ✅",
+        "room_id": "房间 ID：%(roomId)s",
+        "room_not_encrypted": "此房间<strong>未加密</strong>🚨",
+        "room_notifications_dot": "圆点：",
+        "room_notifications_highlight": "高亮：",
+        "room_notifications_last_event": "最新事件：",
+        "room_notifications_sender": "发送者：",
+        "room_notifications_thread_id": "消息列 ID：",
+        "room_notifications_total": "总数：",
+        "room_notifications_type": "类型：",
+        "room_status": "房间状态",
+        "room_unread_status_count": {
+            "one": "房间未读状态：<strong>%(status)s</strong>，数量：<strong>%(count)s</strong>",
+            "other": "房间未读状态：<strong>%(status)s</strong>，数量：<strong>%(count)s</strong>"
+        },
         "save_setting_values": "保存设置值",
+        "see_history": "查看历史",
         "send_custom_account_data_event": "发送自定义账户数据事件",
-        "send_custom_room_account_data_event": "发送自定义房间账户资料事件",
+        "send_custom_room_account_data_event": "发送自定义房间账户数据事件",
         "send_custom_state_event": "发送自定义状态事件",
+        "send_custom_sticky_event": "发送自定义黏着事件",
         "send_custom_timeline_event": "发送自定义时间线事件",
         "server_info": "服务器信息",
         "server_versions": "服务器版本",
-        "settable_global": "全局可设置性",
-        "settable_room": "房间可设置性",
+        "settable_global": "全局可设置",
+        "settable_room": "可在房间内设置",
         "setting_colon": "设置：",
         "setting_definition": "设置定义：",
         "setting_id": "设置 ID",
-        "show_hidden_events": "显示时间线中的隐藏事件",
+        "settings": {
+            "elementCallUrl": "Element Call URL"
+        },
+        "settings_explorer": "设置浏览器",
+        "show_empty_content_events": "以空白内容显示事件",
+        "show_hidden_events": "在时间线显示隐藏事件",
         "spaces": {
-            "one": "<空间>",
-            "other": "<%(count)s个空间>"
+            "one": "<space>",
+            "other": "<%(count)s 个空间>"
         },
         "state_key": "状态键（State Key）",
+        "sticky_duration": "黏着持续时间（毫秒）",
+        "sticky_events_not_supported": "你的主服务器不支持黏着事件。",
+        "thread_root_id": "消息列根 ID：%(threadRootId)s",
+        "threads_timeline": "消息列时间线",
         "title": "开发者工具",
         "toggle_event": "切换事件",
         "toolbox": "工具箱",
-        "use_at_own_risk": "此界面<b>不会</b>检查值的类型。使用风险自负。",
+        "use_at_own_risk": "此 UI 不检查值的数据类型。需自行承担使用风险。",
+        "user_avatar": "头像：%(avatar)s",
+        "user_displayname": "显示名称：%(displayname)s",
+        "user_id": "用户 ID：%(userId)s",
+        "user_no_avatar": "头像：<i>无</i>",
+        "user_no_displayname": "显示名称：<i>无</i>",
+        "user_read_up_to": "用户阅读到：",
+        "user_read_up_to_ignore_synthetic": "用户阅读到（ignoreSynthetic）： ",
+        "user_read_up_to_private": "用户阅读到（m.read.private）： ",
+        "user_read_up_to_private_ignore_synthetic": "用户阅读到（m.read.private;ignoreSynthetic）：",
+        "user_room_membership": "成员资格",
+        "user_verification_status": {
+            "identity_changed": "验证状态：<E2EIcon /> 未验证且已更改数字身份",
+            "unverified": "验证状态：<E2EIcon /> 未验证",
+            "verified": "验证状态：<E2EIcon /> 已验证",
+            "was_verified": "验证状态：<E2EIcon /> 已验证但已更改数字身份"
+        },
+        "users": "用户",
         "value": "值",
         "value_colon": "值：",
-        "value_in_this_room": "此房间中的值",
+        "value_in_this_room": "在此房间的值",
         "value_this_room_colon": "此房间中的值：",
-        "values_explicit": "各层级的值",
-        "values_explicit_colon": "各层级的值：",
-        "values_explicit_room": "此房间中各层级的值",
-        "values_explicit_this_room_colon": "此房间中各层级的值：",
-        "view_source_decrypted_event_source": "解密的事件源码",
-        "widget_screenshots": "对支持的挂件启用挂件截图"
+        "values_explicit": "显式值",
+        "values_explicit_colon": "显式值:",
+        "values_explicit_room": "此房间中的显式值",
+        "values_explicit_this_room_colon": "此房间中的显式值：",
+        "view_servers_in_room": "在房间中查看服务器",
+        "view_source_decrypted_event_source": "解密的事件源代码",
+        "view_source_decrypted_event_source_unavailable": "解密源代码不可用",
+        "widget_screenshots": "为支持的小部件启用“小部件屏幕截图”"
     },
     "dialog_close_label": "关闭对话框",
     "download_completed": "下载完成",
     "emoji": {
         "categories": "类别",
-        "category_activities": "活动",
-        "category_animals_nature": "动物和自然",
-        "category_flags": "旗",
-        "category_food_drink": "食物和饮料",
+        "category_activities": "节假日",
+        "category_animals_nature": "动物与自然",
+        "category_flags": "旗帜",
+        "category_food_drink": "饮食",
         "category_frequently_used": "经常使用",
-        "category_objects": "物体",
-        "category_smileys_people": "表情和人",
+        "category_objects": "日常物品",
+        "category_smileys_people": "人与表情",
         "category_symbols": "符号",
-        "category_travel_places": "旅行和地点",
+        "category_travel_places": "文旅景点",
         "quick_reactions": "快速反应"
     },
     "emoji_picker": {
         "cancel_search_label": "取消搜索"
     },
     "empty_room": "空房间",
-    "empty_room_was_name": "空房间（曾是%(oldName)s）",
+    "empty_room_was_name": "空房间（曾是 %(oldName)s）",
     "encryption": {
         "access_secret_storage_dialog": {
+            "alternatives": "如果你有安全密钥或安全口令，这也会起作用。",
             "key_validation_text": {
-                "wrong_security_key": "安全密钥错误"
+                "wrong_security_key": "你输入的恢复密钥不正确。"
             },
+            "privacy_warning": "确保此时无人窥视此屏幕！",
             "restoring": "从备份恢复密钥",
-            "security_key_title": "安全密钥"
+            "security_key_label": "恢复密钥",
+            "security_key_title": "输入恢复密钥"
         },
         "bootstrap_title": "设置密钥",
-        "confirm_encryption_setup_body": "点击下方按钮以确认设置加密。",
+        "confirm_encryption_setup_body": "点击以下按钮确认加密设置。",
         "confirm_encryption_setup_title": "确认加密设置",
-        "cross_signing_room_normal": "此房间是端到端加密的",
-        "cross_signing_room_verified": "房间中所有人都已被验证",
-        "cross_signing_room_warning": "有人在使用未知会话",
-        "cross_signing_user_normal": "你没有验证此用户。",
-        "cross_signing_user_verified": "你验证了此用户。此用户已验证了其全部会话。",
-        "cross_signing_user_warning": "此用户没有验证其全部会话。",
-        "event_shield_reason_authenticity_not_guaranteed": "此加密消息的真实性无法在此设备上保证。",
+        "continue_with_reset": "继续重置",
+        "cross_signing_room_normal": "此房间已端到端加密",
+        "cross_signing_room_verified": "此房间中的每个成员都已验证",
+        "cross_signing_room_warning": "有人正在使用未知会话",
+        "cross_signing_user_normal": "你尚未验证此用户。",
+        "cross_signing_user_verified": "你已验证此用户。此用户已验证其所有会话。",
+        "cross_signing_user_warning": "该用户尚未验证其所有会话。",
+        "enter_recovery_key": "输入恢复密钥",
+        "event_shield_reason_authenticity_not_guaranteed": "此设备无法保证此加密消息的真实性。",
+        "event_shield_reason_mismatched_sender": "事件的发送者与发送该事件的设备的所有者不匹配。",
         "event_shield_reason_mismatched_sender_key": "由未验证的会话加密",
+        "event_shield_reason_unknown_device": "由未知或已被删除的设备加密。",
+        "event_shield_reason_unsigned_device": "由未经所有者验证的设备加密。",
+        "event_shield_reason_unverified_identity": "由未经验证的用户加密。",
         "export_unsupported": "你的浏览器不支持所需的密码学扩展",
+        "forgot_recovery_key": "忘记恢复密钥？",
+        "identity_needs_reset_description": "你必须重置数字身份才能确保访问消息历史",
         "import_invalid_keyfile": "不是有效的 %(brand)s 密钥文件",
-        "import_invalid_passphrase": "身份验证失败：密码错误？",
+        "import_invalid_passphrase": "身份验证检查失败：密码不正确？",
+        "key_storage_out_of_sync": "你的密钥存储不同步。",
+        "key_storage_out_of_sync_description": "请确认恢复密钥，以保持对密钥存储与消息历史记录的访问权。",
+        "message_shared_by": "由于此消息在发送时你不位于此房间，%(displayName)s（%(userId)s）共享了此消息。",
         "messages_not_secure": {
-            "cause_1": "你的家服务器",
-            "cause_2": "你正在验证的用户所连接的家服务器",
-            "cause_3": "你或其他用户的互联网连接",
+            "cause_1": "你的主服务器版本太旧，不支持所需的最低 API 版本。请联系你的服务器所有者或升级你的服务器。",
+            "cause_2": "你正在验证的用户所连接的主服务器",
+            "cause_3": "你或其他用户的 Internet 连接",
             "cause_4": "你或其他用户的会话",
-            "heading": "以下之一可能被损害：",
-            "title": "你的消息不安全"
+            "heading": "下列中的某项可能已泄露：",
+            "title": "你的消息传递不安全"
         },
         "new_recovery_method_detected": {
-            "description_1": "检测到新的安全短语和安全消息密钥。",
-            "description_2": "此会话正在使用新的恢复方法加密历史。",
-            "title": "新恢复方式",
-            "warning": "如果你没有设置新恢复方式，可能有攻击者正试图侵入你的账户。请立即更改你的账户密码并在设置中设定一个新恢复方式。"
+            "description_1": "已检测到用于安全信息的新安全口令与密钥。",
+            "description_2": "此会话正在使用新的恢复方法加密历史记录。",
+            "title": "新的恢复方法",
+            "warning": "如果你未设置新的恢复方法，攻击者可能正在尝试访问你的账户。请立即在“设置”中更改你的账户密码并设置新的恢复方法。"
         },
+        "pinned_identity_changed": "%(displayName)s (<b>%(userId)s</b>) 的数字身份已重置。<a>了解更多</a>",
+        "pinned_identity_changed_no_displayname": "<b>%(userId)s</b>的数字身份已重置。<a>了解更多</a>",
         "recovery_method_removed": {
-            "description_1": "此会话已检测到你的安全短语和安全消息密钥被移除。",
-            "description_2": "如果你出于意外这样做了，你可以在此会话上设置安全消息，以使用新的加密方式重新加密此会话的消息历史。",
-            "title": "恢复方式已移除",
-            "warning": "如果你没有移除此恢复方式，可能有攻击者正试图侵入你的账户。请立即更改你的账户密码并在设置中设定一个新的恢复方式。"
+            "description_1": "此会话检测到你的安全口令与安全消息密钥已被移除。",
+            "description_2": "如果不慎执行了此操作，你可以为此会话设置安全消息传递，它将使用新的恢复方法重新加密此会话的消息历史。",
+            "title": "恢复方法已移除",
+            "warning": "如果你未移除恢复方法，攻击者可能正在尝试访问你的账户。请立即在“设置”中更改你的账户密码并设置新的恢复方法。"
         },
+        "set_up_recovery": "备份聊天",
+        "set_up_recovery_toast_description": "你的聊天已被端到端加密自动备份。如果你无法访问所有设备，则需要使用恢复密钥并保留数字身份。",
         "set_up_toast_title": "设置安全备份",
         "setup_secure_backup": {
-            "explainer": "在登出之前请备份密钥以免丢失。"
+            "explainer": "移除此设备前备份密钥以防止丢失。"
         },
+        "turn_on_key_storage": "启用密钥存储",
+        "turn_on_key_storage_description": "这将允许你在新设备上查看聊天历史， 这是备份聊天与数字身份所必需的。",
         "udd": {
-            "interactive_verification_button": "用表情符号交互式验证",
-            "other_ask_verify_text": "要求此用户验证其会话，或在下面手动进行验证。",
-            "other_new_session_text": "%(name)s(%(userId)s)登录到未验证的新会话：",
-            "own_ask_verify_text": "使用以下选项之一验证你的其他会话。",
-            "own_new_session_text": "你登录了未经过验证的新会话：",
-            "title": "不可信任"
+            "interactive_verification_button": "使用 Emoji 交互式验证",
+            "other_ask_verify_text": "请该用户验证其会话，或在下面手动验证。",
+            "other_new_session_text": "%(name)s（%(userId)s）在未验证的情况下登录了一个新会话：",
+            "own_ask_verify_text": "请使用以下选项之一验证你的其它会话。",
+            "own_new_session_text": "你在未验证的情况下登录了新会话：",
+            "title": "未被信任"
         },
         "unable_to_setup_keys_error": "无法设置密钥",
         "verification": {
-            "accepting": "正在接受……",
+            "accepting": "正在接受…",
             "after_new_login": {
                 "device_verified": "设备已验证",
                 "skip_verification": "暂时跳过验证",
                 "verify_this_device": "验证此设备"
             },
-            "cancelling": "正在取消……",
-            "complete_action": "收到",
+            "cancelled_verification": "请求超时、被拒绝或验证结果不匹配。",
+            "cancelling": "正在取消…",
+            "cant_confirm": "无法确认？",
+            "complete_action": "明白",
             "complete_description": "你已成功验证此用户。",
             "complete_title": "已验证！",
-            "explainer": "此用户的安全消息是端到端加密的，不能被第三方读取。",
-            "in_person": "为了安全，请当面完成或使用信任的方法交流。",
-            "incoming_sas_device_dialog_text_1": "验证此设备以将其标记为已信任。在收发端到端加密消息时，信任设备可让你与其他用户更加放心。",
-            "incoming_sas_device_dialog_text_2": "验证此设备会将其标记为已信任，与此同时，其他验证了你的用户也会信任此设备。",
-            "incoming_sas_dialog_title": "收到验证请求",
-            "incoming_sas_user_dialog_text_1": "验证此用户并将其标记为已信任。在收发端到端加密消息时，信任用户可让你更加放心。",
-            "incoming_sas_user_dialog_text_2": "验证此用户会将其会话标记为已信任，与此同时，你的会话也会被此用户标记为已信任。",
-            "no_support_qr_emoji": "你正在尝试验证的设备不支持扫码QR码或表情符号验证，这是%(brand)s所支持的。用不同的客户端试试。",
-            "other_party_cancelled": "另一方取消了验证。",
-            "prompt_encrypted": "验证房间中所有用户以确保其安全。",
-            "prompt_unencrypted": "在加密房间中，验证所有用户以确保其安全。",
-            "qr_or_sas": "%(qrCode)s或%(emojiCompare)s",
+            "confirm_identity_description": "验证此设备以设置安全消息传递",
+            "confirm_identity_title": "确认你的数字身份",
+            "confirm_the_emojis": "确认以下 Emoji 与你其它设备上显示的相符。",
+            "error_starting_description": "我们无法与其他用户开始聊天。",
+            "error_starting_title": "开始验证时出错",
+            "explainer": "与此用户的安全消息已进行端到端加密，第三方无法读取。",
+            "in_person": "为了安全起见，请亲自执行此操作或使用受信任的通信方式。",
+            "incoming_sas_device_dialog_text_1": "验证此设备并将其标记为受信任。信任此设备可让你和其它用户在使用端到端加密消息时更加安心。",
+            "incoming_sas_device_dialog_text_2": "验证此设备会将其标记为受信任，并且已与你验证过的用户将信任此设备。",
+            "incoming_sas_dialog_title": "验证请求传入",
+            "incoming_sas_dialog_waiting": "等待对方确认…",
+            "incoming_sas_user_dialog_text_1": "验证此用户并将其标记为受信任的用户。其可以让你在使用端到端加密消息时更加安心。",
+            "incoming_sas_user_dialog_text_2": "验证此用户会将他们的会话标记为受信任，也会将你的会话标记为对他们受信任。",
+            "manual": {
+                "already_verified": "此设备已经过验证",
+                "already_verified_and_wrong_fingerprint": "提供的指纹不匹配，但设备已验证！",
+                "device_id": "设备 ID",
+                "failure_description": "“%(deviceId)s”验证失败：%(error)s",
+                "failure_title": "验证失败",
+                "fingerprint": "指纹（会话密钥）",
+                "no_crypto": "无法验证设备：加密组件未启用",
+                "no_device": "无法验证设备：设备“%(deviceId)s”未找到",
+                "no_userid": "无法验证设备：无法找到用户 ID",
+                "success_description": "此设备（%(deviceId)s）已交叉签名",
+                "success_title": "验证成功",
+                "text": "请提供你自己的一台设备的 ID 和指纹进行验证。请注意，这将允许其它设备以你的身份发送和接收消息。如果有人告诉你在此处粘贴内容，你很可能被诈骗！",
+                "wrong_fingerprint": "无法验证设备“%(deviceId)s”：提供的指纹“%(fingerprint)s”与设备指纹“%(fprint)s”不匹配。"
+            },
+            "no_support_qr_emoji": "你尝试验证的设备不支持扫描二维码或 Emoji 验证，而 %(brand)s 支持这些功能。请尝试使用其它客户端。",
+            "now_you_can": "现在你可以安全地读取或发送消息，并且与你聊天的任何人也可以信任此设备。",
+            "once_accepted_can_continue": "一旦被接受，你将可以继续验证。",
+            "other_party_cancelled": "对方已取消验证。",
+            "prompt_encrypted": "验证房间中的所有用户以确保安全。",
+            "prompt_unencrypted": "在加密房间中验证所有用户以确保安全。",
+            "qr_or_sas": "%(qrCode)s 或 %(emojiCompare)s",
             "qr_prompt": "扫描此唯一代码",
-            "qr_reciprocate_same_shield_user": "快完成了！%(displayName)s 显示了同样的盾牌吗？",
+            "qr_reciprocate_check_again_device": "再次在你的其它设备上检查以完成验证。",
+            "qr_reciprocate_no": "否，我没有看到绿色盾牌",
+            "qr_reciprocate_same_shield_user": "即将完成！%(displayName)s 显示的是相同的盾牌吗？",
+            "qr_reciprocate_yes": "是，我看到了绿色盾牌",
+            "request_toast_accept_user": "验证用户",
+            "request_toast_decline_counter": "忽略（剩余 %(counter)s 秒）",
             "request_toast_detail": "来自 %(ip)s 的 %(deviceId)s",
-            "sas_caption_self": "确认屏幕上出现以下数字，以验证设备。",
-            "sas_caption_user": "通过在其屏幕上显示以下数字来验证此用户。",
-            "sas_description": "若你在两个设备上都没有相机，比较唯一一组表情符号",
-            "sas_emoji_caption_user": "通过在其屏幕上显示以下表情符号来验证此用户。",
-            "sas_match": "它们匹配",
-            "sas_no_match": "它们不匹配",
-            "sas_prompt": "比较唯一表情符号",
-            "scan_qr": "扫码验证",
-            "scan_qr_explainer": "请 %(displayName)s 扫描你的代码：",
+            "request_toast_start_verification": "开始验证",
+            "sas_caption_self": "通过确认以下数字出现在设备屏幕上以验证此设备。",
+            "sas_caption_user": "通过确认以下数字出现在用户的屏幕上已验证此用户。",
+            "sas_description": "如果两台设备都没有摄像头，请比较一组唯一的 Emoji",
+            "sas_emoji_caption_user": "通过确认以下 Emoji 是否出现在对方的屏幕上从而验证此用户。",
+            "sas_match": "匹配",
+            "sas_no_match": "不匹配",
+            "sas_prompt": "比较唯一 Emoji",
+            "scan_qr": "通过扫描验证",
+            "scan_qr_explainer": "请求 %(displayName)s 扫描代码：",
             "start_button": "开始验证",
-            "successful_user": "你成功验证了 %(displayName)s！",
-            "unsupported_method": "无法找到支持的验证方法。",
-            "unverified_session_toast_title": "现在登录。请问是你本人吗？",
-            "unverified_sessions_toast_description": "检查以确保你的账户是安全的",
-            "unverified_sessions_toast_reject": "稍后再说",
+            "successful_user": "你已成功验证 %(displayName)s！",
+            "unsupported_method": "无法找到受支持的验证方法。",
+            "unverified_session_toast_accept": "是我",
+            "unverified_session_toast_title": "有新登录。是否为本人？",
+            "unverified_sessions_toast_description": "审阅以确保你的账户安全",
+            "unverified_sessions_toast_reject": "稍后",
             "unverified_sessions_toast_title": "你有未验证的会话",
-            "verification_dialog_title_device": "验证其他设备",
+            "use_another_device": "使用另一设备",
+            "use_recovery_key": "使用恢复密钥",
+            "verification_dialog_title_choose": "选择验证方式",
+            "verification_dialog_title_compare_emojis": "比较 Emoji",
+            "verification_dialog_title_confirm_green_shield": "确认你在其它设备上看到了绿色盾牌。",
+            "verification_dialog_title_device": "验证其它设备",
+            "verification_dialog_title_failed": "验证失败",
+            "verification_dialog_title_start_on_other_device": "在其它设备上开始验证",
             "verification_dialog_title_user": "验证请求",
-            "verification_skip_warning": "如果不进行验证，您将无法访问您的所有消息，并且在其他人看来可能不受信任。",
-            "verification_success_with_backup": "你的新设备已通过验证。它现在可以访问你的加密消息，并且其它用户会将其视为受信任的。",
-            "verification_success_without_backup": "你的新设备现已验证。其他用户将会视其为受信任的。",
-            "verify_emoji": "通过表情符号验证",
-            "verify_emoji_prompt": "通过比较唯一的表情符号来验证。",
-            "verify_emoji_prompt_qr": "如果你不能扫描以上代码，请通过比较唯一的表情符号来验证。",
-            "verify_later": "我稍后进行验证",
-            "waiting_for_user_accept": "正在等待%(displayName)s接受……",
-            "waiting_other_device": "正等待你在其它设备上验证……",
-            "waiting_other_device_details": "正等待你在其它设备上验证，%(deviceName)s（%(deviceId)s）……",
-            "waiting_other_user": "正在等待%(displayName)s进行验证……"
+            "verification_dialog_title_verified": "设备已验证",
+            "verification_skip_warning": "在没有验证的情况下你将无法访问所有消息，并且无法被其他人信任。",
+            "verification_success_with_backup": "你的新设备现已验证。它可以访问你的加密消息，其他用户将视其为受信任的设备。",
+            "verification_success_without_backup": "你的新设备已通过验证。其他用户将看到它是受信任的。",
+            "verify_by_completing_one_of": "完成以下任一方式进行验证：",
+            "verify_emoji": "使用 Emoji 验证",
+            "verify_emoji_prompt": "通过比较唯一的 Emoji 进行验证。",
+            "verify_emoji_prompt_qr": "如果无法扫描上述二维码，可通过比较唯一的 Emoji 验证。",
+            "verify_later": "稍后验证",
+            "waiting_for_user_accept": "正在等待 %(displayName)s 接受…",
+            "waiting_other_device": "正在等待其它设备验证…",
+            "waiting_other_device_details": "等待你在另一台设备上验证，%(deviceName)s（%(deviceId)s）…",
+            "waiting_other_user": "正在等待 %(displayName)s 验证…"
         },
         "verification_requested_toast_title": "已请求验证",
-        "verify_toast_description": "其他用户可能不信任它",
-        "verify_toast_title": "验证此会话"
+        "verified_identity_changed": "%(displayName)s (<b>%(userId)s</b>) 的数字身份已重置。<a>了解更多</a>",
+        "verified_identity_changed_no_displayname": "<b>%(userId)s</b>的数字身份已重置。<a>了解更多</a>",
+        "verify_toast_description": "可能不受其他用户信任",
+        "verify_toast_title": "验证此设备",
+        "withdraw_verification_action": "撤消验证"
     },
     "error": {
-        "admin_contact": "请 <a>联系你的服务管理员</a> 以继续使用本服务。",
-        "admin_contact_short": "请联系你的<a>服务器管理员</a>。",
-        "app_launch_unexpected_error": "准备软件时出现意外错误，详细信息请查看控制台。",
-        "cannot_load_config": "无法加载配置文件：请刷新页面以重试。",
-        "connection": "与家服务器通讯时出现问题，请稍后再试。",
-        "dialog_description_default": "发生了一个错误。",
-        "edit_history_unsupported": "你的家服务器似乎不支持此功能。",
+        "admin_contact": "请<a>联系服务管理员</a>以继续使用此服务。",
+        "admin_contact_short": "联系你的<a>服务器管理员</a>。",
+        "app_launch_unexpected_error": "准备 App 时发生意外错误。详情请查看控制台。",
+        "cannot_load_config": "无法加载配置文件：请刷新页面重试。",
+        "connection": "与主服务器通信时出现问题，请稍后重试。",
+        "dialog_description_default": "发生错误。",
+        "download_media": "下载源媒体失败，未找到源 URL",
+        "edit_history_unsupported": "你的主服务器似乎不支持此功能。",
         "failed_copy": "复制失败",
-        "hs_blocked": "此 homeserver 已被其管理员屏蔽。",
-        "invalid_configuration_mixed_server": "配置无效：无法与 default_server_name 或 default_server_config 一起指定 default_hs_url",
-        "invalid_configuration_no_server": "配置无效：没有指定默认服务器。",
-        "invalid_json": "Element 配置文件中包含无效的 JSON。请改正错误并重新加载页面。",
+        "hs_blocked": "此主服务器已被其管理员屏蔽。",
+        "invalid_configuration_mixed_server": "配置无效：“default_hs_url”不能与“default_server_name”或“default_server_config”同时指定。",
+        "invalid_configuration_no_server": "配置无效：未指定默认服务器。",
+        "invalid_json": "你的 Element 配置包含无效的 JSON。请修正此问题并重载页面。",
         "invalid_json_detail": "来自解析器的消息：%(message)s",
-        "invalid_json_generic": "无效的 JSON",
-        "mau": "此家服务器已达到其每月活跃用户限制。",
+        "invalid_json_generic": "无效 JSON",
+        "mau": "此主服务器已达到每月活跃用户数量限制。",
         "misconfigured": "Element 配置错误",
-        "mixed_content": "当浏览器地址栏里有 HTTPS 的 URL 时，不能使用 HTTP 连接家服务器。请使用 HTTPS 或者<a>允许不安全的脚本</a>。",
-        "non_urgent_echo_failure_toast": "你的服务器没有响应一些<a>请求</a>。",
-        "resource_limits": "本服务器已达到其使用量限制之一。",
+        "mixed_content": "当浏览器地址栏中显示 HTTPS 网址时，无法通过 HTTP 连接到主服务器。请使用 HTTPS 或<a>启用不安全的脚本</a>。",
+        "non_urgent_echo_failure_toast": "你的服务器不响应某些<a>请求</a>。",
+        "resource_limits": "该主服务器已超出其资源限制。",
         "session_restore": {
-            "clear_storage_button": "清除存储并登出",
-            "clear_storage_description": "登出并删除加密密钥？",
-            "description_1": "我们在尝试恢复你先前的会话时遇到了错误。",
-            "description_2": "如果你之前使用过较新版本的 %(brand)s，则你的会话可能与当前版本不兼容。请关闭此窗口并使用最新版本。",
-            "description_3": "清除本页储存在你浏览器上的数据或许能修复此问题，但也会导致你退出登录并无法读取任何已加密的聊天记录。",
+            "clear_storage_button": "移除此设备",
+            "clear_storage_description": "移除此设备的同时包括其加密密钥？",
+            "description_1": "尝试恢复之前的会话时出错。",
+            "description_2": "如果你之前使用过较新版本的 %(brand)s，你的会话可能与此版本不兼容。请关闭此窗口并返回到较新的版本。",
+            "description_3": "清除浏览器的存储空间或许可以解决问题，但会将此设备移除，并导致所有加密的聊天历史无法读取。",
             "title": "无法恢复会话"
         },
-        "something_went_wrong": "出了点问题！",
-        "storage_evicted_description_1": "一些会话数据，包括加密消息密钥，已缺失。要修复此问题，登出并重新登录，然后从备份恢复密钥。",
-        "storage_evicted_description_2": "你的浏览器可能在磁盘空间不足时删除了此数据。",
-        "storage_evicted_title": "缺失会话数据",
-        "sync": "服务器连接失败，正在重试……",
-        "tls": "无法连接家服务器 - 请检查网络连接，确保你的<a>家服务器 SSL 证书</a>被信任，且没有浏览器插件拦截请求。",
+        "something_went_wrong": "出现问题！",
+        "storage_evicted_description_1": "包括加密消息密钥在内的部分会话数据丢失。请注销并重新登录以修复此问题，并从备份中恢复密钥。",
+        "storage_evicted_description_2": "你的浏览器可能在磁盘空间不足时移除了这些数据。",
+        "storage_evicted_title": "会话数据缺失",
+        "sync": "无法连接到主服务器，正在重试…",
+        "tls": "无法连接到主服务器，请检查网络连接，确保<a>主服务器的 SSL 证书</a>受信任，并且浏览器扩展程序未阻止请求。",
         "unknown": "未知错误",
         "unknown_error_code": "未知错误代码",
-        "update_power_level": "权力级别修改失败"
+        "update_history_visibility": "历史可见性更改失败",
+        "update_power_level": "权力值更改失败"
     },
-    "error_app_opened_in_another_window": "%(brand)s已在另一个窗口中打开。单击“%(label)s”以在此处使用%(brand)s并断开其他窗口的连接。",
-    "error_database_closed_title": "数据库意外关闭",
+    "error_app_open_in_another_tab": "切换到其它标签页以连接到 %(brand)s。现在可以关闭此标签页。",
+    "error_app_open_in_another_tab_title": "%(brand)s 已在其它标签页中打开",
+    "error_app_opened_in_another_window": "%(brand)s 已在另一个窗口中打开。点击“%(label)s”即可在此处使用 %(brand)s 并断开与另一个窗口的连接。",
+    "error_database_closed_description": {
+        "for_desktop": "你的磁盘可能已满。请清理空间并重新加载。",
+        "for_web": "如果你清除了浏览数据，则预计会出现此消息。%(brand)s 可能也在另一个标签页中打开，或者你的磁盘已满。请清理一些空间并重载。"
+    },
+    "error_database_closed_title": "%(brand)s 已停止工作",
     "error_dialog": {
         "copy_room_link_failed": {
-            "description": "无法将房间的链接复制到剪贴板。",
+            "description": "无法复制房间链接到剪贴板。",
             "title": "无法复制房间链接"
         },
-        "error_loading_user_profile": "无法加载用户资料",
-        "forget_room_failed": "忘记房间失败，错误代码： %(errCode)s"
+        "error_loading_user_profile": "无法载入用户资料",
+        "forget_room_failed": "忘记房间 %(errCode)s 失败"
     },
     "error_user_not_logged_in": "用户未登录",
     "event_preview": {
         "m.call.answer": {
-            "dm": "通话中",
-            "user": "%(senderName)s加入通话",
-            "you": "你加入通话"
+            "dm": "通话进行中",
+            "user": "%(senderName)s 已加入通话",
+            "you": "你已加入通话"
         },
         "m.call.hangup": {
             "user": "%(senderName)s 结束了通话",
             "you": "你结束了通话"
         },
         "m.call.invite": {
-            "dm_receive": "%(senderName)s正在通话",
-            "dm_send": "正在等待接听",
-            "user": "%(senderName)s开始了通话",
+            "dm_receive": "%(senderName)s 正在通话",
+            "dm_send": "等待接听",
+            "user": "%(senderName)s 开始了通话",
             "you": "你开始了通话"
-        }
+        },
+        "m.emote": "* %(senderName)s %(emote)s",
+        "m.reaction": {
+            "user": "%(sender)s 使用 %(reaction)s 对 %(message)s 作出反应",
+            "you": "你使用了 %(reaction)s 对 %(message)s 作出反应"
+        },
+        "m.sticker": "%(senderName)s：%(stickerName)s",
+        "m.text": "%(senderName)s：%(message)s",
+        "prefix": {
+            "audio": "音频",
+            "file": "文件",
+            "image": "图像",
+            "poll": "投票",
+            "video": "视频"
+        },
+        "preview": "<bold>%(prefix)s:</bold>%(preview)s"
     },
     "export_chat": {
-        "cancelled": "导出已取消",
-        "cancelled_detail": "成功取消了导出",
-        "confirm_stop": "您确定要停止导出数据吗？如果你这样做了，你需要重新开始。",
-        "creating_html": "正在创建 HTML...",
-        "creating_output": "正在创建输出...",
+        "cancelled": "已取消导出",
+        "cancelled_detail": "导出已被取消",
+        "confirm_stop": "你确定要停止导出数据？继而导致需要重新开始。",
+        "creating_html": "正在创建 HTML…",
+        "creating_output": "正在创建输出…",
         "creator_summary": "%(creatorName)s 创建了此房间。",
         "current_timeline": "当前时间线",
-        "enter_number_between_min_max": "输入一个 %(min)s 和 %(max)s 之间的数字",
-        "error_fetching_file": "获取文件出错",
-        "export_info": "这是 <roomName/> 导出的开始。导出人 <exporterDetails/>，导出日期 %(exportDate)s。",
-        "export_successful": "成功导出！",
+        "enter_number_between_min_max": "输入 %(min)s 到 %(max)s 之间的数字",
+        "error_fetching_file": "获取文件时出错",
+        "export_info": "这是 <roomName/> 导出的开始。由 <exporterDetails/> 导出于 %(exportDate)s。",
+        "export_successful": "导出成功！",
         "exported_n_events_in_time": {
             "one": "在 %(seconds)s 秒内导出了 %(count)s 个事件",
             "other": "在 %(seconds)s 秒内导出了 %(count)s 个事件"
         },
         "exporting_your_data": "导出你的数据",
         "fetched_n_events": {
-            "one": "迄今获取了 %(count)s 事件",
-            "other": "迄今获取了 %(count)s 事件"
+            "one": "已获取距今 %(count)s 个事件",
+            "other": "已获取 %(count)s 个事件"
         },
         "fetched_n_events_in_time": {
-            "one": "%(seconds)s 秒内获取了 %(count)s 个事件",
-            "other": "%(seconds)s 秒内获取了 %(count)s 个事件"
+            "one": "于 %(seconds)ss 内已获取 %(count)s 个事件",
+            "other": "于 %(seconds)ss 内已获取 %(count)s 个事件"
         },
         "fetched_n_events_with_total": {
-            "one": "已获取总共 %(total)s 事件中的 %(count)s 个",
-            "other": "已获取 %(total)s 事件中的 %(count)s 个"
+            "one": "已获取 %(total)s 个事件中的 %(count)s 个",
+            "other": "已获取 %(total)s 个事件中的 %(count)s 个"
         },
-        "fetching_events": "正在获取事件...",
-        "file_attached": "已附加文件",
+        "fetching_events": "正在获取事件…",
+        "file_attached": "附加文件",
         "format": "格式",
         "from_the_beginning": "从开头",
-        "generating_zip": "生成 ZIP",
+        "generating_zip": "生成 ZIP 压缩文件",
         "html": "HTML",
-        "html_title": "导出的数据",
-        "include_attachments": "包括附件",
+        "html_title": "已导出的数据",
+        "include_attachments": "包含附件",
         "json": "JSON",
-        "media_omitted": "省略了媒体文件",
-        "media_omitted_file_size": "省略了媒体文件 - 超出了文件大小限制",
+        "media_omitted": "媒体已被省略",
+        "media_omitted_file_size": "媒体已被省略，文件大小超过限制",
         "messages": "消息",
         "next_page": "下一组消息",
-        "num_messages": "消息数",
-        "num_messages_min_max": "消息数只能是一个介于 %(min)s 和 %(max)s 之间的整数",
-        "number_of_messages": "指定消息数",
-        "previous_page": "上一组信息",
-        "processing_event_n": "正在处理总共 %(total)s 事件中的事件 %(number)s",
-        "select_option": "从下面的选项中选择以从时间线导出聊天",
+        "num_messages": "消息数量",
+        "num_messages_min_max": "消息数量只能是 %(min)s 到 %(max)s 之间的数字",
+        "number_of_messages": "指定消息数量",
+        "previous_page": "上一组消息",
+        "processing": "正在处理…",
+        "processing_event_n": "处理 %(total)s 个事件中的 %(number)s 个",
+        "select_option": "选择以下选项以导出时间线中的聊天历史",
         "size_limit": "大小限制",
-        "size_limit_min_max": "大小只能是 %(min)sMB 和 %(max)sMB 之间的一个数字",
-        "starting_export": "正在导出...",
-        "successful": "成功导出",
-        "successful_detail": "导出成功了。你可以在下载文件夹中找到导出文件。",
+        "size_limit_min_max": "大小只能是介于 %(min)s MB 到 %(max)s MB 之间的数字",
+        "size_limit_postfix": "MB",
+        "starting_export": "正在开始导出…",
+        "successful": "导出成功",
+        "successful_detail": "导出成功。可以在“下载”文件夹中找到。",
         "text": "纯文本",
         "title": "导出聊天",
-        "topic": "话题：%(topic)s",
-        "unload_confirm": "你确定要在导出过程中退出吗？"
+        "topic": "主题：%(topic)s",
+        "unload_confirm": "你确定要在导出期间退出？"
     },
-    "failed_load_async_component": "无法加载！请检查你的网络连接并重试。",
+    "failed_load_async_component": "无法加载！请检查网络连接并重试。",
     "feedback": {
-        "can_contact_label": "如果你有任何后续问题，可以联系我",
-        "comment_label": "备注",
-        "existing_issue_link": "请先查找一下 <existingIssuesLink>Github 上已有的问题</existingIssuesLink>，以免重复。找不到重复问题？<newIssueLink>发起一个吧</newIssueLink>。",
-        "may_contact_label": "如果您想跟进或让我测试即将到来的想法，您可以与我联系",
-        "platform_username": "我们将会记录你的平台及用户名，以帮助我们尽我们所能地使用你的反馈。",
-        "pro_type": "专业建议：如果你要发起新问题，请一并提交<debugLogsLink>调试日志</debugLogsLink>，以便我们找出问题根源。",
+        "can_contact_label": "后续有任何问题时可以联系我",
+        "comment_label": "评论",
+        "existing_issue_link": "请先查找 <existingIssuesLink> Github Issue</existingIssuesLink> 是否有与你同样的问题，如果不存在可以<newIssueLink>创建一个</newIssueLink>。",
+        "may_contact_label": "若要跟进或让我测试新推出的想法时可以联系我",
+        "platform_username": "我们会记录你的平台与用户名，以帮助我们尽可能多地利用你的反馈。",
+        "pro_type": "专业建议：若要开始提交 Bug，请同时附上<debugLogsLink>调试日志</debugLogsLink>以便我们确定问题的根源。",
         "send_feedback_action": "发送反馈",
-        "sent": "反馈已发送"
+        "sent": "反馈已发送！谢谢，我们已经收到！"
     },
     "file_panel": {
-        "empty_description": "从聊天中附加文件或将文件拖放到房间的任何地方。",
-        "empty_heading": "此房间中没有文件可见",
-        "guest_note": "你必须 <a>注册</a> 以使用此功能",
-        "peek_note": "你必须加入房间以看到它的文件"
+        "empty_description": "在聊天中附加文件或要拖放文件到此房间的任意位置。",
+        "empty_heading": "此房间暂无可见的文件",
+        "guest_note": "你必须<a>注册</a>才能使用此功能",
+        "peek_note": "你必须加入此房间才能其中的文件"
     },
     "forward": {
-        "filter_placeholder": "搜索房间或用户",
+        "filter_placeholder": "搜索房间或人员",
         "message_preview_heading": "消息预览",
-        "no_perms_title": "你无权执行此操作",
+        "no_perms_title": "你没有权限执行此操作。",
         "open_room": "打开房间",
         "send_label": "发送",
         "sending": "正在发送",
-        "sent": "已发送"
+        "sent": "发送"
     },
     "identity_server": {
         "change": "更改身份服务器",
-        "change_prompt": "从<current />身份服务器断开连接而连接到<new />吗？",
-        "change_server_prompt": "如果你不想使用 <server /> 以发现你认识的现存联系人并被其发现，请在下方输入另一个身份服务器。",
-        "checking": "检查服务器",
-        "description_connected": "你正在使用<server></server>来发现你认识的现存联系人，同时也让他们可以发现你。你可以在下方更改你的身份服务器。",
-        "description_disconnected": "你现在没有使用身份服务器。若想发现你认识的现存联系人并被其发现，请在下方添加一个身份服务器。",
-        "description_optional": "使用身份服务器是可选的。如果你选择不使用身份服务器，你将不能被别的用户发现，也不能用邮箱或电话邀请别人。",
-        "disconnect": "断开身份服务器连接",
-        "disconnect_anyway": "仍然断开连接",
-        "disconnect_offline_warning": "断开连接前，你应从身份服务器<idserver />上<b>删除你的个人数据</b>。不幸的是，身份服务器<idserver />当前处于离线状态或无法访问。",
-        "disconnect_personal_data_warning_1": "你仍然在身份服务器 <idserver /> 上<b>共享你的个人数据</b>。",
-        "disconnect_personal_data_warning_2": "我们推荐你在断开连接前从身份服务器上删除你的邮箱地址和电话号码。",
-        "disconnect_server": "从身份服务器 <idserver /> 断开连接吗？",
-        "disconnect_warning": "断开身份服务器连接意味着你将无法被其他用户发现，同时你也将无法使用电子邮件或电话邀请别人。",
+        "change_prompt": "断开连接身份服务器 <current /> 并连接到 <new />？",
+        "change_server_prompt": "如果你不想使用 <server /> 来发现你认识的现有联系人，并使其无法被发现，请在下方输入另一个身份服务器。",
+        "changed": "身份服务器已更改",
+        "checking": "正在检查服务器",
+        "description_connected": "你目前正在使用 <server></server> 来发现你认识的现有联系人，并使其能够被你发现。你可以在下面更改你的身份服务器。",
+        "description_disconnected": "你尚未使用身份服务器。要发现联系人并使其可以被发现，请在下面添加。",
+        "description_optional": "使用身份服务器是可选的。如果你选择不使用身份服务器，其他用户将无法发现你，也无法通过邮件地址或电话号码邀请其他人。",
+        "disconnect": "断开身份服务器",
+        "disconnect_anyway": "强制断开",
+        "disconnect_offline_warning": "断开连接前你应该从身份服务器 <idserver /> 中<b>移除个人数据</b>。很遗憾，身份服务器 <idserver /> 当前处于离线状态或无法访问。",
+        "disconnect_personal_data_warning_1": "你仍在身份服务器 <idserver /> 上<b>分享个人数据</b>。",
+        "disconnect_personal_data_warning_2": "我们建议你在断开连接之前，从身份服务器中删除邮件地址与电话号码。",
+        "disconnect_server": "断开身份服务器 <idserver />？",
+        "disconnect_warning": "断开连接身份服务器意味着其他用户将无法发现你，并且你将无法通过邮件地址或电话号码邀请其他人。",
         "do_not_use": "不使用身份服务器",
-        "error_connection": "无法连接到身份服务器",
-        "error_invalid": "身份服务器无效（状态码 %(code)s）",
-        "error_invalid_or_terms": "服务协议未同意或身份服务器无效。",
-        "no_terms": "你选择的身份服务器没有服务协议。",
-        "suggestions": "你应该：",
-        "suggestions_1": "检查你的浏览器是否安装有可能屏蔽身份服务器的插件（例如 Privacy Badger）",
+        "error_connection": "无法连接身份服务器",
+        "error_invalid": "不是有效的身份服务器（状态码 %(code)s）",
+        "error_invalid_or_terms": "未接受服务条款或身份服务器无效。",
+        "no_terms": "你选择的身份服务器没有任何服务条款。",
+        "suggestions": "你应：",
+        "suggestions_1": "检查你的浏览器扩展是否有任何可能阻止身份服务器（例如 Privacy Badger）。",
         "suggestions_2": "联系身份服务器 <idserver /> 的管理员",
-        "suggestions_3": "等待并稍后重试",
+        "suggestions_3": "稍后再试",
         "url": "身份服务器（%(server)s）",
-        "url_field_label": "输入一个新的身份服务器",
-        "url_not_https": "身份服务器URL必须是HTTPS"
+        "url_field_label": "输入新的身份服务器",
+        "url_not_https": "身份服务器 URL 必须为 HTTPS"
     },
-    "in_space": "在 %(spaceName)s 空间。",
-    "in_space1_and_space2": "在 %(space1Name)s 和 %(space2Name)s 空间。",
+    "in_space": "位于 %(spaceName)s。",
+    "in_space1_and_space2": "位于空间 %(space1Name)s 与 %(space2Name)s。",
     "in_space_and_n_other_spaces": {
-        "one": "在 %(spaceName)s 和其他 %(count)s 个空间。",
-        "other": "在 %(spaceName)s 和其他 %(count)s 个空间。"
+        "one": "%(spaceName)s 与剩余 1 个空间。",
+        "other": "位于 %(spaceName)s 与其余 %(count)s 个空间。"
     },
     "incompatible_browser": {
-        "title": "不支持的浏览器"
+        "continue": "强制继续",
+        "description": "%(brand)s 使用了一些当前浏览器中不可用的浏览器功能。%(detail)s",
+        "detail_can_continue": "如果你继续操作，某些功能可能会停止运行，并且未来可能会丢失数据。",
+        "detail_no_continue": "如果你使用的不是最新版本，请尝试更新浏览器然后重试。",
+        "learn_more": "了解更多",
+        "linux": "Linux",
+        "macos": "Mac",
+        "supported_browsers": "为了获得最佳体验，请使用 <Chrome>Chrome</Chrome>、<Firefox>Firefox</Firefox>、<Edge>Edge</Edge> 或 <Safari>Safari</Safari>。",
+        "title": "%(brand)s 不支持此浏览器",
+        "use_desktop_heading": "请改用 %(brand)s 桌面应用",
+        "use_mobile_heading": "在手机上换用 %(brand)s",
+        "use_mobile_heading_after_desktop": "或使用移动 App",
+        "windows_64bit": "Windows （64 位）",
+        "windows_arm_64bit": "Windows （ARM 64 位）"
     },
     "info_tooltip_title": "信息",
     "integration_manager": {
-        "error_connecting": "此集成管理器为离线状态或者其不能访问你的家服务器。",
-        "error_connecting_heading": "不能连接到集成管理器",
-        "explainer": "集成管理器接收配置数据，并可以以你的名义修改挂件、发送房间邀请及设置权力级别。",
+        "connecting": "正在连接到集成管理器…",
+        "error_connecting": "集成管理器处于离线状态或其无法连接到你的主服务器。",
+        "error_connecting_heading": "无法连接到集成管理器",
+        "explainer": "集成管理器可接收配置数据， 并可以代表你修改小部件、发送房间邀请与设置权力值。",
         "manage_title": "管理集成",
-        "use_im": "使用集成管理器管理机器人、挂件和贴纸包。",
-        "use_im_default": "使用集成管理器<b>（%(serverName)s）</b>管理机器人、挂件和贴纸包。"
+        "toggle_label": "启用集成管理器",
+        "use_im": "使用集成管理器管理机器人、小部件与贴纸包。",
+        "use_im_default": "使用集成管理器 <b>(%(serverName)s)</b> 管理机器人、小部件与贴纸包。"
     },
     "integrations": {
-        "disabled_dialog_title": "集成已禁用",
-        "impossible_dialog_description": "你的 %(brand)s 不允许你使用集成管理器来完成此操作，请联系管理员。",
-        "impossible_dialog_title": "集成未被允许"
+        "disabled_dialog_description": "在设置中启用“%(manageIntegrations)s”以执行此操作。",
+        "disabled_dialog_title": "集成已被禁用",
+        "impossible_dialog_description": "%(brand)s 不允许使用集成管理器执行此操作。请联系管理员。",
+        "impossible_dialog_title": "不允许集成"
     },
     "invite": {
-        "email_caption": "通过邮箱邀请",
-        "email_use_default_is": "使用一个身份服务器以通过邮箱邀请。<default>使用默认（%(defaultIdentityServerName)s）</default>或在<settings>设置</settings>中管理。",
-        "email_use_is": "使用一个身份服务器以通过邮箱邀请。在<settings>设置</settings>中管理。",
-        "error_already_invited_room": "用户已被邀请至房间",
-        "error_already_invited_space": "用户已被邀请至空间",
-        "error_already_joined_room": "用户已在房间中",
-        "error_already_joined_space": "用户已在空间中",
-        "error_bad_state": "用户必须先解封才能被邀请。",
-        "error_dm": "我们无法创建你的私聊。",
-        "error_find_room": "尝试邀请用户时出错。",
-        "error_find_user_description": "下列用户可能不存在或无效，因此不能被邀请：%(csvNames)s",
-        "error_find_user_title": "寻找以下用户失败",
-        "error_invite": "我们不能邀请这些用户。请检查你想邀请的用户并重试。",
-        "error_permissions_room": "你没有权限将其他用户邀请至本房间。",
-        "error_permissions_space": "你无权邀请他人加入此空间。",
-        "error_profile_undisclosed": "用户可能存在页可能不存在",
-        "error_transfer_multiple_target": "通话只能转移到单个用户。",
+        "email_caption": "通过邮件邀请",
+        "email_limit_one": "通过邮件发送邀请一次只能发送一个",
+        "email_use_default_is": "使用身份服务器通过邮件地址邀请。<default>使用默认的 (%(defaultIdentityServerName)s)</default> 或在 <settings>设置</settings> 中进行管理。",
+        "email_use_is": "使用身份服务器通过邮件地址邀请。请在 <settings>“设置”</settings> 中进行管理。",
+        "error_already_invited_room": "用户已被邀请到房间",
+        "error_already_invited_space": "用户已被邀请到空间",
+        "error_already_joined_room": "用户已位于此房间",
+        "error_already_joined_space": "用户已位于此空间",
+        "error_bad_state": "该用户必须先被解封才能被邀请。",
+        "error_dm": "无法创建私聊。",
+        "error_find_room": "在邀请用户时出现问题。",
+        "error_find_user_description": "以下用户可能不存在或无效，因此无法被邀请：%(csvNames)s",
+        "error_find_user_title": "以下用户查找失败",
+        "error_invite": "我们无法邀请这些用户。请检查你要邀请的用户，然后重试。",
+        "error_permissions_room": "你无权邀请人员进入此房间。",
+        "error_permissions_space": "你无权邀请人员访问此空间。",
+        "error_profile_undisclosed": "用户既有可能存在，也有可能不存在",
+        "error_transfer_multiple_target": "通话只能转接到单个用户。",
+        "error_unfederated_room": "此房间为非联合房间。你不能从外部服务器邀请人员。",
+        "error_unfederated_space": "此空间未联合。你无法邀请人员到外部服务器。",
         "error_unknown": "未知服务器错误",
         "error_user_not_found": "用户不存在",
-        "error_version_unsupported_room": "用户的家服务器不支持此房间版本。",
-        "error_version_unsupported_space": "用户的家服务器版本不支持空间。",
+        "error_version_unsupported_room": "用户的主服务器不支持此房间的版本。",
+        "error_version_unsupported_space": "此主服务器不支持使用电话号码进行身份验证。",
         "failed_generic": "操作失败",
         "failed_title": "邀请失败",
-        "invalid_address": "无法识别地址",
-        "name_email_mxid_share_room": "使用名字、电子邮件地址、用户名（如<userId/>）邀请某人或<a>分享此房间</a>。",
-        "name_email_mxid_share_space": "使用某人的名字、电子邮箱地址或用户名（如 <userId/>）邀请他们，或<a>分享此空间</a>。",
-        "name_mxid_share_room": "使用某人的名字、用户名（如 <userId/>）或<a>分享此房间</a>来邀请他们。",
-        "name_mxid_share_space": "使用某人的名字、用户名（如 <userId/>）邀请他们，或<a>分享此空间</a>。",
+        "invalid_address": "未识别的地址",
+        "name_email_mxid_share_room": "使用对方的名称、邮件地址、用户名（例如 <userId/>）或<a>分享此房间</a>。",
+        "name_email_mxid_share_space": "使用对方的名称、邮件地址、用户名（例如 <userId/>）邀请，或<a>分享此房间</a>。",
+        "name_mxid_share_room": "请使用名称、用户名（例如 <userId/>）邀请他人，或<a>分享此房间</a>。",
+        "name_mxid_share_space": "请使用名称、用户名（例如 <userId/>）邀请他人，或<a>分享此空间</a>。",
+        "progress": {
+            "dont_close": "在完成前请勿退出 app。",
+            "preparing": "正在准备邀请…"
+        },
         "recents_section": "最近对话",
-        "room_failed_partial": "我们已向其他人发送邀请，但无法邀请以下人员至<RoomName/>",
+        "room_failed_partial": "我们已邀请其他人加入，但以下人员无法受邀加入 <RoomName/>。",
         "room_failed_partial_title": "部分邀请无法发送",
-        "room_failed_title": "未能邀请用户加入 %(roomName)s",
+        "room_failed_title": "无法邀请用户到 %(roomName)s",
         "send_link_prompt": "或发送邀请链接",
-        "start_conversation_name_email_mxid_prompt": "使用某人的名称、电子邮箱地址或用户名来与其开始对话（如 <userId/>）。",
-        "start_conversation_name_mxid_prompt": "使用某人的名字或用户名（如 <userId/>）开始与其进行对话。",
-        "suggestions_disclaimer": "出于隐私考虑，部分建议可能会被隐藏。",
-        "suggestions_disclaimer_prompt": "如果您看不到您要找的人，请将您的邀请链接发送给他们。",
-        "suggestions_section": "最近私聊",
-        "to_room": "邀请至 %(roomName)s",
-        "to_space": "邀请至 %(spaceName)s",
+        "start_conversation_name_email_mxid_prompt": "要与某人开始对话，请使用其名称、邮件地址或用户名（例如 <userId/>）。",
+        "start_conversation_name_mxid_prompt": "使用名称或用户名（例如 <userId/>）与他人开始对话。",
+        "suggestions_disclaimer": "由于隐私原因，某些建议可能被隐藏。",
+        "suggestions_disclaimer_prompt": "如果你看不到要找的人员，请复制并向其发送以下邀请链接。",
+        "suggestions_section": "最近的私聊",
+        "to_room": "邀请到 %(roomName)s",
+        "to_space": "邀请到 %(spaceName)s",
         "transfer_dial_pad_tab": "拨号盘",
-        "transfer_user_directory_tab": "用户目录",
-        "unable_find_profiles_description_default": "找不到下列 Matrix ID 的用户资料，你还是要邀请吗？",
-        "unable_find_profiles_invite_label_default": "还是邀请",
-        "unable_find_profiles_invite_never_warn_label_default": "还是邀请，不用再提醒我",
-        "unable_find_profiles_title": "以下用户可能不存在"
+        "transfer_user_directory_tab": "用户名册",
+        "unable_find_profiles_description_default": "无法找到下列 Matrix ID 的个人资料，你是否仍然要邀请？",
+        "unable_find_profiles_invite_label_default": "强制邀请",
+        "unable_find_profiles_invite_never_warn_label_default": "强制邀请并不再警告",
+        "unable_find_profiles_title": "以下用户可能不存在",
+        "unban_first_title": "除非被解封否则用户无法被邀请"
     },
-    "inviting_user1_and_user2": "正在邀请 %(user1)s 与 %(user2)s",
+    "inviting_user1_and_user2": "邀请 %(user1)s 与 %(user2)s",
     "inviting_user_and_n_others": {
-        "one": "正在邀请%(user)s和另外1个人",
-        "other": "正在邀请%(user)s和其他%(count)s人"
+        "one": "邀请 %(user)s 及剩余 1 个",
+        "other": "邀请了 %(user)s 与剩余 %(count)s 个"
     },
     "items_and_n_others": {
-        "other": "<Items/> 和其他 %(count)s 人",
-        "one": "<Items/> 与另一个人"
+        "one": "<Items/> 以及剩余 1 个",
+        "other": "<Items/> 以及剩余 %(count)s 个"
     },
     "keyboard": {
-        "activate_button": "激活选中的按钮",
+        "activate_button": "激活选择的按钮",
+        "alt": "Alt",
         "autocomplete_cancel": "取消自动补全",
         "autocomplete_force": "强制完成",
-        "autocomplete_navigate_next": "下个自动完成建议",
-        "autocomplete_navigate_prev": "上个自动完成建议",
+        "autocomplete_navigate_next": "下一个自动补全建议",
+        "autocomplete_navigate_prev": "上一个自动补全建议",
         "backspace": "",
         "cancel_reply": "取消回复消息",
         "category_autocomplete": "自动补全",
@@ -1104,393 +1444,510 @@
         "category_navigation": "导航",
         "category_room_list": "房间列表",
         "close_dialog_menu": "关闭对话框或上下文菜单",
-        "composer_jump_end": "跳至编辑器尾部",
-        "composer_jump_start": "跳至编辑器的开头",
-        "composer_navigate_next_history": "导航到编辑器历史里的下条消息",
-        "composer_navigate_prev_history": "导航到编辑器历史里的上条消息",
-        "composer_new_line": "换行",
+        "composer_jump_end": "跳转到编辑器末尾",
+        "composer_jump_start": "跳转到编辑器开头",
+        "composer_navigate_next_history": "导航到下一个消息编辑器历史",
+        "composer_navigate_prev_history": "导航到上一个消息编辑器历史",
+        "composer_new_line": "另起一行",
         "composer_redo": "重做编辑",
         "composer_toggle_bold": "切换粗体",
         "composer_toggle_code_block": "切换代码块",
         "composer_toggle_italics": "切换斜体",
         "composer_toggle_link": "切换链接",
         "composer_toggle_quote": "切换引用",
-        "composer_undo": "撤销编辑",
+        "composer_undo": "撤消编辑",
+        "control": "Ctrl",
         "dismiss_read_marker_and_jump_bottom": "忽略已读标记并跳转到底部",
-        "enter": "回车",
-        "go_home_view": "转到主视图",
-        "home": "主页",
-        "jump_first_message": "跳转至第一条消息",
-        "jump_last_message": "跳转至最后一条消息",
+        "end": "结束",
+        "enter": "",
+        "escape": "Esc",
+        "go_home_view": "转到主页视图",
+        "home": "",
+        "jump_first_message": "跳转到首个消息",
+        "jump_last_message": "跳转到最新消息",
         "jump_room_search": "跳转到房间搜索",
         "jump_to_read_marker": "跳转到最旧的未读消息",
-        "keyboard_shortcuts_tab": "打开此设置标签页",
-        "navigate_next_history": "下个最近访问过的房间或空间",
-        "navigate_next_message_edit": "导航到下条要编辑的消息",
-        "navigate_prev_history": "上个最近访问过的房间或空间",
-        "navigate_prev_message_edit": "导航到上条要编辑的消息",
-        "next_room": "下个房间或私聊",
-        "next_unread_room": "下个未读房间或私聊",
+        "keyboard_shortcuts_tab": "打开此设置页",
+        "navigate_next_history": "下一个最近访问的房间或空间",
+        "navigate_next_message_edit": "导航到下一条要编辑的消息",
+        "navigate_prev_history": "上一个最近访问的房间或空间",
+        "navigate_prev_message_edit": "导航到上一条要编辑的消息",
+        "next_landmark": "转到下一个焦点",
+        "next_room": "下一个房间或私聊",
+        "next_unread_room": "下一个未读房间或私聊",
+        "number": "[数字]",
         "open_user_settings": "打开用户设置",
         "page_down": "",
         "page_up": "",
-        "prev_room": "上个房间或私聊",
-        "prev_unread_room": "上个未读房间或私聊",
-        "room_list_collapse_section": "折叠房间列表段",
-        "room_list_expand_section": "展开房间列表段",
-        "room_list_navigate_down": "在房间列表中向下导航",
-        "room_list_navigate_up": "在房间列表中向上导航",
-        "room_list_select_room": "从房间列表选择房间",
-        "scroll_down_timeline": "在时间线里向下滚动",
-        "scroll_up_timeline": "在时间线里向上滚动",
-        "search": "搜索（必须启用）",
+        "prev_landmark": "转到上一个焦点",
+        "prev_room": "上一个房间或私聊",
+        "prev_unread_room": "上一个未读房间或私聊",
+        "room_list_collapse_section": "折叠房间列表部分",
+        "room_list_expand_section": "展开房间列表部分",
+        "room_list_navigate_down": "向下导航到房间列表",
+        "room_list_navigate_up": "向上导航到房间列表",
+        "room_list_select_room": "从房间列表中选择房间",
+        "save": "保存",
+        "scroll_down_timeline": "向下滚动时间线",
+        "scroll_up_timeline": "向上滚动时间线",
+        "search": "搜索（要使其生效必须启用相关功能）",
         "send_sticker": "发送贴纸",
+        "shift": "Shift",
         "space": "空格",
-        "switch_to_space": "按数字切换到空间",
-        "toggle_hidden_events": "切换隐藏事件可见性",
+        "switch_to_space": "使用数字切换空间",
+        "toggle_hidden_events": "切换隐藏事件的可见性",
         "toggle_microphone_mute": "切换麦克风静音",
         "toggle_right_panel": "切换右侧面板",
-        "toggle_space_panel": "切换空间仪表盘",
-        "toggle_top_left_menu": "切换左上方的菜单",
-        "toggle_webcam_mute": "切换网络相机开/关",
+        "toggle_space_panel": "切换空间面板",
+        "toggle_top_left_menu": "切换左上角菜单",
+        "toggle_webcam_mute": "切换摄像头开/关",
         "upload_file": "上传文件"
     },
     "labs": {
-        "ask_to_join": "启用 “需要验证加入请求”",
-        "beta_description": "%(brand)s的下一步是什么？实验室是早期获得东西、测试新功能和在它们发布前帮助塑造的最好方式。",
-        "beta_feature": "这是beta功能",
-        "beta_feedback_leave_button": "要离开beta，请访问你的设置。",
-        "beta_feedback_title": "%(featureName)sBeta反馈",
-        "beta_section": "即将到来的功能",
-        "bridge_state": "在房间设置中显示桥接信息",
+        "ask_to_join": "启用申请加入",
+        "beta_description": "%(brand)s 的下一步是什么？实验室是提前获取信息、测试新功能并在其正式推出之前帮助其完善的最佳途径。",
+        "beta_feature": "此为 Beta 功能",
+        "beta_feedback_leave_button": "要退出 Beta 测试，请访问设置。",
+        "beta_feedback_title": "%(featureName)s Beta 功能反馈",
+        "beta_section": "即将推出的功能",
+        "bridge_state": "在房间设置中显示桥接器信息",
         "bridge_state_channel": "频道：<channelLink/>",
-        "bridge_state_creator": "此桥曾由<user />提供。",
-        "bridge_state_manager": "此桥接由 <user /> 管理。",
-        "bridge_state_workspace": "工作空间：<networkLink/>",
-        "click_for_info": "点击获取更多信息",
-        "currently_experimental": "目前是实验性的。",
+        "bridge_state_creator": "此桥接器由 <user /> 提供。",
+        "bridge_state_manager": "此桥接器由 <user /> 管理。",
+        "bridge_state_workspace": "工作区: <networkLink/>",
+        "click_for_info": "点击显示更多信息",
+        "currently_experimental": "当前为实验性。",
         "custom_themes": "支持添加自定义主题",
-        "element_call_video_rooms": "Element通话视频房间",
-        "experimental_description": "想要做点实验？试试我们开发中的最新点子。这些功能尚未确定；它们可能不稳定，可能会变动，也可能被完全丢弃。<a>了解更多</a>。",
+        "dynamic_room_predecessors": "动态房间前身",
+        "dynamic_room_predecessors_description": "需要启用 MSC3946 以支持“迟到房间归档”。",
+        "element_call_video_rooms": "Element Call 视频房间",
+        "encrypted_state_events": "已加密的状态事件",
+        "encrypted_state_events_description": "启用加密状态事件的实验性支持，此功能会对服务器隐藏房间名称与主题等元数据。这些元数据对之后加入房间的用户与不支持 MSC4362 的客户端隐藏。",
+        "exclude_insecure_devices": "发送或接收消息时排除不安全的设备",
+        "exclude_insecure_devices_description": "此模式启用后，加密消息将不会分享给未验证的设备，并且来自未验证设备的消息将显示为“错误”。注意：如果启用此模式，则可能无法与尚未验证其设备的用户通信。",
+        "experimental_description": "感觉很有实验性？试试我们正在开发的最新创意。这些功能尚未最终确定；它们可能不稳定，可能会改变，也可能被完全放弃。<a>了解更多</a>。",
         "experimental_section": "早期预览",
-        "feature_wysiwyg_composer_description": "在消息编辑器中使用富文本代替 Markdown。",
-        "group_calls": "新的群通话体验",
+        "extended_profiles_msc_support": "需要服务器支持 MSC4133",
+        "feature_disable_call_per_sender_encryption": "为 Element Call 禁用“按每个发送者加密”",
+        "feature_wysiwyg_composer_description": "在消息编辑器中使用富文本取代 Markdown。",
+        "group_calls": "新的群呼体验",
         "group_developer": "开发者",
         "group_encryption": "加密",
         "group_experimental": "实验性",
         "group_messaging": "消息传递",
-        "group_moderation": "审核",
+        "group_moderation": "管理",
         "group_profile": "个人资料",
         "group_rooms": "房间",
         "group_spaces": "空间",
         "group_themes": "主题",
-        "group_voip": "语音和视频",
-        "group_widgets": "挂件",
-        "hidebold": "隐藏通知的点标记（仅显示计数标记）",
-        "html_topic": "显示房间话题的HTML表现形式",
-        "join_beta": "加入beta",
-        "join_beta_reload": "加入beta会重载%(brand)s。",
-        "jump_to_date": "跳至日期（新增 /jumptodate 并跳至日期标头）",
-        "jump_to_date_msc_support": "需要您的服务器支持 MSC3030",
-        "latex_maths": "在消息中渲染LaTeX数学",
-        "leave_beta": "离开beta",
-        "leave_beta_reload": "离开beta会重载%(brand)s。",
-        "location_share_live": "实时位置共享",
-        "location_share_live_description": "临时的实现。位置在房间历史中持续保留。",
-        "mjolnir": "忽略他人的新方式",
-        "msc3531_hide_messages_pending_moderation": "让协管员隐藏等待审核的消息。",
-        "notification_settings": "通知设置",
-        "notification_settings_beta_caption": "引入一种更简单的方式来更改通知设置。以你喜欢的方式定制%(brand)s。",
+        "group_threads": "消息列",
+        "group_ui": "用户界面",
+        "group_voip": "语音与视频",
+        "group_widgets": "小部件",
+        "hidebold": "隐藏通知圆点（仅显示计数器徽章）",
+        "html_topic": "以 HTML 格式显示房间主题",
+        "join_beta": "参与 Beta 测试",
+        "join_beta_reload": "参与 Beta 测试将重载 %(brand)s。",
+        "jump_to_date": "跳转到日期（在编辑器中输入指令“/jumptodate”可以跳转到当天的消息开头）",
+        "jump_to_date_msc_support": "需要服务器支持 MSC3030",
+        "latex_maths": "在消息中渲染 LaTeX 数学公式",
+        "leave_beta": "退出 Beta 测试",
+        "leave_beta_reload": "退出 Beta 测试将重载 %(brand)s。",
+        "location_share_live": "分享实时位置",
+        "location_share_live_description": "临时实现。位置将持续保留于房间历史。",
+        "mjolnir": "忽略人员的新方式",
+        "msc3531_hide_messages_pending_moderation": "允许协管员隐藏等待审核的消息",
+        "new_room_list": "启用新的房间列表",
+        "notification_settings": "新的通知设置",
+        "notification_settings_beta_caption": "介绍一种更简单的方法来更改通知设置。就像你喜欢的那样定制 %(brand)s。",
         "notification_settings_beta_title": "通知设置",
-        "report_to_moderators": "报告给协管员",
-        "report_to_moderators_description": "在支持审核的房间中，“报告”按钮将让你向房间协管员举报滥用行为。",
+        "notifications": "在房间标题处启用通知面板",
+        "render_reaction_images": "在反应中渲染自定义图像",
+        "render_reaction_images_description": "有时被称为“自定义 Emoji”。",
+        "report_to_moderators": "向协管员举报",
+        "report_to_moderators_description": "在支持审核的房间中，“举报”按钮可以让你向房间协管员举报滥用行为。",
+        "room_list_sections": "房间列表区域",
+        "share_history_on_invite": "与新成员分享加密历史",
+        "share_history_on_invite_description": "当邀请用户进入历史可见性设为“共享”的加密房间时与该用户共享加密的历史消息，同时你被邀请加入此类房间时接收加密的历史消息。",
+        "share_history_on_invite_warning": "此功能目前处于实验阶段，并且尚未实践所有安全预防措施。请勿为生产账户启用。",
         "sliding_sync": "滑动同步模式",
-        "sliding_sync_description": "正在积极开发中，不能禁用。",
-        "sliding_sync_server_no_support": "你的服务器缺少原生支持",
-        "under_active_development": "积极开发中。",
+        "sliding_sync_description": "正在处于开发中，并且一旦启用就无法禁用。当前与 Element Call 不兼容。",
+        "sliding_sync_disabled_notice": "重新登录以禁用",
+        "sliding_sync_server_no_support": "服务器缺少支持",
+        "under_active_development": "正在处于开发中。",
+        "unrealiable_e2e": "在加密房间中不可靠",
         "video_rooms": "视频房间",
-        "video_rooms_a_new_way_to_chat": "在 %(brand)s 中使用语音和视频的新方式。",
-        "video_rooms_always_on_voip_channels": "视频房间是嵌入在%(brand)s房间内的总是开启的VoIP频道。",
-        "video_rooms_beta": "视频房间是beta功能",
-        "video_rooms_faq1_answer": "使用左侧面板房间部分的“+”按钮。",
-        "video_rooms_faq1_question": "我如何创建视频房间？",
-        "video_rooms_faq2_answer": "是的，聊天时间线显示在视频旁。",
-        "video_rooms_faq2_question": "我能在视频通话的同时使用文字聊天吗？",
+        "video_rooms_a_new_way_to_chat": "在 %(brand)s 中语音与视频聊天的新方式。",
+        "video_rooms_always_on_voip_channels": "视频房间是嵌入到 %(brand)s 并始终在线的 VoIP 渠道。",
+        "video_rooms_beta": "视频房间是 Beta 功能",
+        "video_rooms_faq1_answer": "在左侧面板的“房间”部分点击“+”按钮。",
+        "video_rooms_faq1_question": "如何创建视频房间？",
+        "video_rooms_faq2_answer": "可以，时间线会显示在视频房间的一侧。",
+        "video_rooms_faq2_question": "我是否可以在视频房间中使用文字聊天？",
+        "video_rooms_feedbackSubheading": "感谢你试用 Beta 功能，请尽可能详细地描述以便我们改进它。",
         "wysiwyg_composer": "富文本编辑器"
     },
     "labs_mjolnir": {
-        "advanced_warning": "⚠ 这些设置是为高级用户准备的。",
-        "ban_reason": "已忽略/已屏蔽",
-        "error_adding_ignore": "添加已忽略的用户/服务器时出现错误",
+        "advanced_warning": "⚠ 以下设置面向高级用户。",
+        "ban_reason": "已忽略或已屏蔽",
+        "error_adding_ignore": "添加忽略的用户/服务器时出错",
         "error_adding_list_description": "请验证房间 ID 或地址并重试。",
-        "error_adding_list_title": "订阅列表时出现错误",
-        "error_removing_ignore": "移除已忽略用户/服务器时出现错误",
-        "error_removing_list_description": "请重试或查看你的终端以获得提示。",
-        "error_removing_list_title": "取消订阅列表时出现错误",
-        "explainer_1": "在此处添加你想忽略的用户和服务器。使用星号以使%(brand)s匹配任何字符。例如，<code>@bot:*</code>会忽略全部在任何服务器上以“bot”为名的用户。",
-        "explainer_2": "忽略人是通过含有封禁规则的封禁列表来完成的。订阅一个封禁列表意味着被此列表阻止的用户/服务器将会对你隐藏。",
-        "lists": "你正在订阅：",
-        "lists_description_1": "订阅一个封禁列表会使你加入它！",
-        "lists_description_2": "如果这不是你想要的，请使用别的的工具来忽略用户。",
-        "lists_heading": "订阅的列表",
-        "lists_new_label": "封禁列表的房间 ID 或地址",
+        "error_adding_list_title": "订阅列表时出错",
+        "error_removing_ignore": "移除已忽略的用户/服务器时出错",
+        "error_removing_list_description": "请重试或查看控制台中的提示。",
+        "error_removing_list_title": "退订列表时出错",
+        "explainer_1": "在此处添加要忽略的用户与服务器。使用“*”可让 %(brand)s 匹配任何字符。例如 <code>@bot:*</code> 将忽略任何服务器上名称为“bot”的所有用户。",
+        "explainer_2": "忽略人员是通过“封禁列表”完成的，封禁列表包含谁被封禁的规则。订阅封禁列表意味着位于该列表的用户/服务器将对你隐藏。",
+        "lists": "你当前已订阅：",
+        "lists_description_1": "你订阅封禁列表意味着此列表将作为房间加入！",
+        "lists_description_2": "如果这不是你想要的，请使用其它工具忽略用户。",
+        "lists_heading": "已订阅的列表",
+        "lists_new_label": "封禁列表中的房间 ID 或地址",
         "no_lists": "你没有订阅任何列表",
-        "personal_empty": "你没有忽略任何人。",
-        "personal_heading": "个人封禁列表",
-        "personal_new_label": "要忽略的服务器或用户 ID",
-        "personal_new_placeholder": "例如： @bot:* 或 example.org",
-        "personal_section": "你正在忽略：",
+        "personal_description": "个性化封禁列表包含你不想看到其消息的所有用户/服务器。忽略第一个用户/服务器后，你的房间列表中将出现一个名为“%(myBanList)s”的新房间。请留在该房间确保封禁列表持续生效。",
+        "personal_empty": "你尚未忽略任何人。",
+        "personal_heading": "个性化封禁列表",
+        "personal_new_label": "要忽略的用户 ID 或服务器",
+        "personal_new_placeholder": "例如 @bot:* 或 example.org",
+        "personal_section": "你当前忽略：",
         "room_name": "我的封禁列表",
-        "room_topic": "这是你屏蔽的用户/服务器的列表——不要离开此房间！",
+        "room_topic": "此房间包含你已屏蔽的用户与服务器。要使封禁列表生效，请勿离开房间！",
         "rules_empty": "无",
         "rules_server": "服务器规则",
-        "rules_title": "封禁列表规则 - %(roomName)s",
+        "rules_title": "封禁列表规则：%(roomName)s",
         "rules_user": "用户规则",
-        "something_went_wrong": "出现问题。请重试或查看你的终端以获得提示。",
+        "something_went_wrong": "出现问题。请重试或查看控制台提示。",
         "title": "已忽略的用户",
         "view_rules": "查看规则"
     },
     "language_dropdown_label": "语言下拉菜单",
     "leave_room_dialog": {
-        "last_person_warning": "你是这里唯一的人。如果你离开了，以后包括你在内任何人都将无法加入。",
-        "leave_room_question": "你确定要离开房间 “%(roomName)s” 吗？",
-        "leave_space_question": "你确定要离开空间「%(spaceName)s」吗？",
-        "room_rejoin_warning": "此房间不是公开房间。如果没有成员邀请，你将无法重新加入。",
-        "space_rejoin_warning": "此空间并不公开。在没有得到邀请的情况下，你将无法重新加入。"
+        "last_person_warning": "你是此处唯一的用户。如果你离开，以后将没有人能加入，包括你自己。",
+        "leave_room_question": "你确定要离开房间“%(roomName)s”？",
+        "leave_space_question": "你确定要离开空间“%(spaceName)s”？",
+        "room_leave_admin_warning": "你是此房间的唯一管理员。如果你离开，任何人都将无法更改房间设置或执行其它重要操作。",
+        "room_leave_mod_warning": "你是此房间的唯一管理员。如果你离开，任何人都将无法更改房间设置或执行其它重要操作。",
+        "room_rejoin_warning": "此房间非公共房间。你无法在未被邀请的情况下重新加入。",
+        "space_rejoin_warning": "此空间非公开。未经邀请，你将无法重新加入。"
     },
     "left_panel": {
         "open_dial_pad": "打开拨号键盘"
     },
     "lightbox": {
         "rotate_left": "向左旋转",
-        "rotate_right": "向右旋转"
+        "rotate_right": "向右旋转",
+        "title": "图像查看"
     },
     "location_sharing": {
-        "MapStyleUrlNotConfigured": "此家服务器未配置显示地图。",
-        "MapStyleUrlNotReachable": "此家服务器未正确配置，故无法显示地图，亦或所配置的地图服务器无法使用。",
-        "click_drop_pin": "点击以放置图钉",
-        "click_move_pin": "点击以移动图钉",
-        "close_sidebar": "关闭侧边栏",
+        "MapStyleUrlNotConfigured": "此主服务器未配置地图显示。",
+        "MapStyleUrlNotReachable": "此主服务器的配置不正确，无法显示地图，或者配置的地图服务器可能无法访问。",
+        "WebGLNotEnabled": "显示地图需要 WebGL，请在浏览器设置中启用。",
+        "click_drop_pin": "点击以放置锚点",
+        "click_move_pin": "点击以移动锚点",
+        "close_sidebar": "关闭边栏",
         "error_fetch_location": "无法获取位置",
-        "error_no_perms_description": "你需要拥有正确的权限才能在此房间中共享位置。",
-        "error_no_perms_title": "你没有权限分享位置",
-        "error_send_description": "%(brand)s无法发送你的位置。请稍后再试。",
+        "error_no_perms_description": "你需要拥有合适的权限才能在此房间中分享位置。",
+        "error_no_perms_title": "你无权分享位置",
+        "error_send_description": "%(brand)s 无法发送你的位置。请稍后再试。",
         "error_send_title": "我们无法发送你的位置",
         "error_sharing_live_location": "分享实时位置时出错",
         "error_stopping_live_location": "停止实时位置时出错",
         "expand_map": "展开地图",
-        "failed_generic": "获取你的位置失败。请之后再试。",
-        "failed_load_map": "无法加载地图",
-        "failed_permission": "%(brand)s was denied permission to fetch your location. 请在你的浏览器中允许位置访问。",
-        "failed_timeout": "尝试获取你的位置超时。请之后再试。",
-        "failed_unknown": "获取位置时发生错误。请之后再试。",
+        "failed_generic": "无法获取你的位置。请稍后再试。",
+        "failed_load_map": "无法载入地图",
+        "failed_permission": "%(brand)s 被拒绝获取位置信息。请在浏览器设置中允许访问位置信息。",
+        "failed_timeout": "尝试获取位置超时。请稍后再试。",
+        "failed_unknown": "获取位置时出现未知错误。请稍后再试。",
         "find_my_location": "查找我的位置",
-        "live_description": "%(displayName)s的实时位置",
-        "live_enable_description": "请注意：这是使用临时实现的实验室功能。这意味着你无法删除你的位置历史，并且甚至在你停止与此房间分享实时位置后，高级用户将仍能查看你的位置历史。",
-        "live_enable_heading": "实时位置分享",
-        "live_location_active": "你正在分享你的实时位置",
+        "live_description": "%(displayName)s 的事实位置",
+        "live_enable_description": "请注意：这是一项使用临时实施方案的实验室功能。这意味着你将无法删除你的位置记录，即使你停止与此房间共享实时位置，高级用户仍然可以看到你的位置记录。",
+        "live_enable_heading": "分享实时位置",
+        "live_location_active": "你正在分享实时位置",
         "live_location_enabled": "实时位置已启用",
         "live_location_ended": "实时位置已结束",
-        "live_location_error": "实时位置错误",
+        "live_location_error": "实时位置出错",
         "live_locations_empty": "无实时位置",
-        "live_share_button": "分享%(duration)s",
+        "live_share_button": "分享 %(duration)s",
         "live_toggle_label": "启用实时位置分享",
-        "live_until": "实时分享直至%(expiryTime)s",
+        "live_until": "直播直到 %(expiryTime)s",
+        "live_update_time": "已更新 %(humanizedUpdateTime)s",
+        "loading_live_location": "正在加载实时位置…",
         "location_not_available": "位置不可用",
         "map_feedback": "地图反馈",
         "mapbox_logo": "Mapbox 图标",
-        "reset_bearing": "重置为向北方位",
-        "share_button": "共享位置",
+        "reset_bearing": "重置方向为正北",
+        "share_button": "分享位置",
         "share_type_live": "我的实时位置",
-        "share_type_own": "我当前的位置",
-        "share_type_pin": "放置图钉",
-        "share_type_prompt": "你想分享什么位置类型？",
+        "share_type_own": "我的当前位置",
+        "share_type_pin": "放置锚点",
+        "share_type_prompt": "你想分享的位置的类型？",
         "toggle_attribution": "切换属性"
     },
     "member_list": {
-        "filter_placeholder": "过滤房间成员"
+        "count": {
+            "one": "%(count)s 位成员",
+            "other": "%(count)s 个成员"
+        },
+        "filter_placeholder": "搜索房间内成员",
+        "invite_button_no_perms_tooltip": "你无权邀请用户",
+        "invited_label": "已邀请",
+        "list_title": "成员列表",
+        "no_matches": "不匹配"
     },
     "member_list_back_action_label": "房间成员",
-    "message_edit_dialog_title": "消息编辑历史",
+    "message_edit_dialog_title": "消息编辑",
+    "migrating_crypto": "请稍候。我们正在更新 %(brand)s，以使加密更快、更可靠。",
     "mobile_guide": {
-        "toast_accept": "使用 app",
-        "toast_description": "在移动网页浏览器中 %(brand)s 是实验性功能。为了获取更好的体验和最新功能，请使用我们的免费原生应用。",
-        "toast_title": "使用 app 以获得更好的体验"
+        "toast_accept": "使用 App",
+        "toast_description": "%(brand)s 在移动 Web 浏览器上处于实验阶段。为了获得更好的体验和最新功能，请使用我们的免费原生应用。",
+        "toast_title": "使用 App 以获得更好的体验"
     },
-    "name_and_id": "%(name)s%(userId)s",
+    "name_and_id": "%(name)s（%(userId)s）",
     "no_more_results": "没有更多结果",
     "notif_panel": {
-        "empty_description": "你没有可见的通知。",
-        "empty_heading": "一切完毕"
+        "empty_description": "你没有可见通知。",
+        "empty_heading": "你已阅读所有消息"
     },
     "notifications": {
         "all_messages": "全部消息",
-        "all_messages_description": "获得每条消息的通知",
+        "all_messages_description": "接收每个消息的通知",
         "class_global": "全局",
-        "class_other": "其他",
+        "class_other": "其它",
         "default": "默认",
-        "enable_prompt_toast_description": "开启桌面通知",
+        "email_pusher_app_display_name": "邮件通知",
+        "enable_prompt_toast_description": "启用桌面通知",
         "enable_prompt_toast_title": "通知",
         "enable_prompt_toast_title_from_message_send": "不要错过任何回复",
-        "error_change_title": "修改通知设置",
+        "error_change_title": "更改通知设置",
         "keyword": "关键词",
         "keyword_new": "新的关键词",
-        "mark_all_read": "标记所有为已读",
-        "mentions_and_keywords": "@提及和关键词",
-        "mentions_and_keywords_description": "如<a>设置</a>中设定的那样仅通知提及和关键词",
-        "mentions_keywords": "提及&关键词",
-        "message_didnt_send": "消息没有发送。点击查看信息。",
+        "level_activity": "活动",
+        "level_highlight": "高亮",
+        "level_muted": "已静默",
+        "level_none": "无",
+        "level_notification": "通知",
+        "level_unsent": "未发送",
+        "mark_all_read": "全部设为已读",
+        "mentions_and_keywords": "提及与关键词",
+        "mentions_and_keywords_description": "仅按<a>设置</a>中的配置获取提及与关键词",
+        "mentions_keywords": "提及与关键词",
+        "message_didnt_send": "消息未发送。点击以获取信息。",
         "mute_description": "你不会收到任何通知"
     },
     "notifier": {
         "m.key.verification.request": "%(name)s 正在请求验证"
     },
     "onboarding": {
-        "create_room": "创建一个群聊",
-        "explore_rooms": "探索公共房间",
-        "has_avatar_label": "很好，这样大家就知道是你了",
-        "intro_byline": "拥有您的对话。",
-        "intro_welcome": "欢迎来到 %(appName)s",
-        "no_avatar_label": "添加照片，让人们知道这是你。",
+        "create_room": "创建群聊",
+        "explore_rooms": "浏览公共房间",
+        "has_avatar_label": "很好，这将有助于人们确认是你",
+        "intro_byline": "掌控你的对话。",
+        "intro_welcome": "欢迎使用 %(appName)s",
+        "no_avatar_label": "添加照片让别人知道这是你。",
         "send_dm": "发送私聊",
-        "welcome_detail": "现在，让我们协助你开始",
+        "welcome_detail": "协助你开始",
         "welcome_user": "欢迎 %(name)s"
     },
+    "pill": {
+        "permalink_other_room": "一个位于 %(room)s 的消息",
+        "permalink_this_room": "来自 %(user)s 的消息"
+    },
     "poll": {
         "create_poll_action": "创建投票",
         "create_poll_title": "创建投票",
-        "disclosed_notes": "投票者一投完票就能看到结果",
+        "disclosed_notes": "结果将在参与者投票后立即可见",
         "edit_poll_title": "编辑投票",
-        "end_description": "您确定要结束此投票吗？ 这将显示投票的最终结果并阻止人们投票。",
-        "end_message": "投票已经结束。 得票最多答案：%(topAnswer)s",
-        "end_message_no_votes": "投票已经结束。 没有投票。",
+        "end_description": "你确定要结束此投票？此操作将显示最终结果并阻止人员投票。",
+        "end_message": "投票已结束。热门答案：%(topAnswer)s",
+        "end_message_no_votes": "投票已结束。无人投票。",
         "end_title": "结束投票",
-        "error_ending_description": "抱歉，投票没有结束。 请再试一次。",
+        "ended_poll_label": "投票已结束",
+        "error_ending_description": "抱歉，投票尚未结束。请重试。",
         "error_ending_title": "结束投票失败",
-        "error_voting_description": "抱歉，你的投票未登记。请重试。",
-        "error_voting_title": "投票未登记",
-        "failed_send_poll_description": "抱歉，您尝试创建的投票未被发布。",
+        "error_voting_description": "抱歉，你的投票尚未注册。请重试。",
+        "error_voting_title": "投票未注册",
+        "failed_send_poll_description": "抱歉，你尝试创建的投票未能发布。",
         "failed_send_poll_title": "发布投票失败",
-        "notes": "结果仅在你结束投票后展示",
+        "notes": "结果仅在结束投票时显示",
+        "option_label": "选项 %(number)s，%(answer)s",
+        "option_label_winning_with_total": {
+            "one": "选项 %(number)，%(answer)s，领先，%(count)s 票",
+            "other": "选项 %(number)，%(answer)s，领先，%(count)s 票"
+        },
+        "option_label_with_total": {
+            "one": "选项 %(number)，%(answer)s，%(count)s 票",
+            "other": "选项 %(number)，%(answer)s，%(count)s 票"
+        },
         "options_add_button": "添加选项",
         "options_heading": "创建选项",
         "options_label": "选项 %(number)s",
-        "options_placeholder": "写个选项",
-        "topic_heading": "你的投票问题或主题是什么?",
-        "topic_label": "问题或主题",
+        "options_placeholder": "撰写选项",
+        "poll_label": "投票",
+        "topic_heading": "投票中的提问或主题？",
+        "topic_label": "提问或主题",
+        "topic_placeholder": "撰写内容…",
+        "total_decryption_errors": "由于解密错误可能无法统计某些投票",
         "total_n_votes": {
-            "one": "票数已达 %(count)s 票。要查看结果请亲自投票",
-            "other": "票数已达 %(count)s 票。要查看结果请亲自投票"
+            "one": "已有 %(count)s 个投票。投票以查看结果",
+            "other": "已有 %(count)s 个投票。投票以查看结果"
         },
         "total_n_votes_voted": {
-            "one": "基于 %(count)s 票",
-            "other": "基于 %(count)s 票"
+            "one": "基于 %(count)s 个投票",
+            "other": "基于 %(count)s 个投票"
         },
-        "total_no_votes": "尚无投票",
-        "total_not_ended": "结果将在投票结束时可见",
+        "total_no_votes": "暂无人投票",
+        "total_not_ended": "结果将于投票结束后可见。",
         "type_closed": "封闭式投票",
         "type_heading": "投票类型",
         "type_open": "开放式投票",
-        "unable_edit_description": "抱歉，你无法在有人投票后编辑投票。",
+        "unable_edit_description": "抱歉，已有投票的情况下你无法再编辑投票。",
         "unable_edit_title": "无法编辑投票"
     },
     "power_level": {
         "admin": "管理员",
+        "creator": "所有者",
         "custom": "自定义（%(level)s）",
-        "custom_level": "自定义级别",
+        "custom_level": "自定义权力值",
         "default": "默认",
-        "label": "权力级别",
+        "label": "权力值",
         "moderator": "协管员",
-        "restricted": "受限"
+        "restricted": "已受限"
     },
-    "powered_by_matrix": "由 Matrix 驱动",
-    "powered_by_matrix_with_logo": "去中心化、加密的聊天与协作，由 $matrixLogo 驱动",
+    "powered_by_matrix": "由 Matrix 提供底层支持",
+    "powered_by_matrix_with_logo": "由 $matrixLogo 驱动的去中心化、加密聊天与协作",
     "presence": {
         "away": "离开",
-        "busy": "忙",
+        "busy": "忙碌",
         "idle": "空闲",
-        "idle_for": "已闲置 %(duration)s",
+        "idle_for": "已空闲 %(duration)s",
         "offline": "离线",
-        "offline_for": "已离线 %(duration)s",
+        "offline_for": "离线 %(duration)s",
         "online": "在线",
-        "online_for": "已上线 %(duration)s",
-        "unknown": "未知的",
-        "unknown_for": "未知状态已持续 %(duration)s"
+        "online_for": "已在线 %(duration)s",
+        "unknown": "未知",
+        "unknown_for": "未知 %(duration)s",
+        "unreachable": "无法访问用户的服务器"
     },
     "quick_settings": {
         "all_settings": "所有设置",
-        "metaspace_section": "固定到侧边栏",
+        "metaspace_section": "钉在边栏",
         "sidebar_settings": "更多选项",
         "title": "快速设置"
     },
     "quit_warning": {
-        "call_in_progress": "你似乎正在通话，确定要退出吗？",
-        "file_upload_in_progress": "你似乎正在上传文件，确定要退出吗？"
+        "call_in_progress": "你似乎正在通话，你确定要退出？",
+        "file_upload_in_progress": "你似乎正在上传文件，你确定要退出？"
     },
     "redact": {
         "confirm_button": "确认移除",
-        "error": "你无法删除这条消息。(%(code)s)",
+        "confirm_description": "你确定要移除（删除）此事件？",
+        "confirm_description_state": "请注意，如此移除房间更改可能会使更改失效。",
+        "error": "你无法删除此消息。（%(code)s）",
         "ongoing": "正在移除…",
         "reason_label": "理由（可选）"
     },
     "report_content": {
-        "description": "举报此消息会将其唯一的“事件ID”发送给你的家服务器的管理员。如果此房间中的消息是加密的，则你的家服务器管理员将无法阅读消息文本，也无法查看任何文件或图片。",
+        "description": "举报此消息会将其唯一的“事件 ID”发送给服务器管理员。如果此房间中的消息已加密，则服务器管理员将无法查看消息文本、任何文件或图像。",
         "disagree": "不同意",
-        "hide_messages_from_user": "若想隐藏来自此用户的全部当前和未来的消息，请打勾。",
+        "error_create_room_moderation_bot": "无法使用协管机器人创建房间",
+        "hide_messages_from_user": "如果你想隐藏此用户当前及未来的所有消息，请选中此项。",
         "ignore_user": "忽略用户",
-        "illegal_content": "违法内容",
-        "missing_reason": "请填写你为何做此报告。",
-        "nature": "请选择性质并描述为什么此消息是滥用。",
-        "nature_disagreement": "此用户所写的是错误内容。\n这将会报告给房间协管员。",
-        "nature_illegal": "此用户正在做出违法行为，如对他人施暴，或威胁使用暴力。\n这将报告给房间协管员，他们可能会将其报告给执法部门。",
-        "nature_nonstandard_admin": "该房间专用于非法或不良内容，或者版主未能对非法或不良内容进行管理。\n这将报告给%(homeserver)s 的管理员。",
-        "nature_nonstandard_admin_encrypted": "该房间专用于非法或不良内容，或者版主未能对非法或不良内容进行管理。\n这将报告给 %(homeserver)s 的管理员。管理员无法读取此房间的加密内容。",
-        "nature_other": "任何其他原因。请描述问题。\n这将报告给房间协管员。",
-        "nature_spam": "此用户正在房间中滥发广告、广告链接或宣传。\n这将报告给房间协管员。",
-        "other_label": "其他",
-        "report_content_to_homeserver": "向你的家服务器管理员举报内容",
-        "report_entire_room": "报告整个房间",
-        "spam_or_propaganda": "垃圾信息或宣传",
-        "toxic_behaviour": "不良行为"
+        "illegal_content": "非法内容",
+        "missing_reason": "请填写举报理由。",
+        "nature": "请选择一种性质，并描述该消息为何具有滥用性。",
+        "nature_disagreement": "此用户输入的内容有误。\n此问题将报告给房间协管员。",
+        "nature_illegal": "此用户存在违法行为，例如人肉搜索或威胁使用暴力。\n我们会将此情况报告给房间管理员，管理员可能会将此问题上报给法律部门。",
+        "nature_nonstandard_admin": "此房间专门用于非法或有害内容，或者管理员未能审核非法或有害内容。\n此问题将报告给 %(homeserver)s 的管理员。",
+        "nature_nonstandard_admin_encrypted": "此房间专门发布非法或有害内容，或者管理员未能审核非法或有害内容。\n此问题将报告给 %(homeserver)s 的管理员。管理员将无法阅读此房间的加密内容。",
+        "nature_other": "任何其它原因。请描述问题。\n这将报告给房间管理员。",
+        "nature_spam": "此用户正在向房间发送垃圾广告、广告链接或推广内容。\n我们将向房间管理员报告此问题。",
+        "nature_toxic": "此用户表现不良，例如辱骂其他用户、在家庭友好型房间分享仅限成人的内容或以其它方式违反此房间的规则。\n将向房间管理员举报。",
+        "other_label": "其它",
+        "report_content_to_homeserver": "向服务器管理员举报此内容",
+        "report_entire_room": "举报整个房间",
+        "spam_or_propaganda": "垃圾内容或广告",
+        "toxic_behaviour": "有害行为"
+    },
+    "report_room": {
+        "description": "向服务器管理员举报此房间。如果消息已被加密，则管理员无法看到它们。",
+        "reason_label": "描述理由"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "%(failedCount)s 个会话解密失败！",
-        "count_of_successfully_restored_keys": "成功恢复了 %(sessionCount)s 个密钥",
-        "enter_key_description": "通过输入你的安全密钥来访问你的安全消息历史记录并设置安全通信。",
-        "enter_key_title": "输入安全密钥",
-        "enter_phrase_description": "无法通过你的安全短语访问你的安全消息历史记录并设置安全通信。",
-        "enter_phrase_title": "输入安全短语",
-        "incorrect_security_phrase_dialog": "无法使用此安全短语解密备份：请确认你是否输入了正确的安全短语。",
-        "incorrect_security_phrase_title": "安全短语错误",
-        "key_backup_warning": "<b>警告</b>：你应此只在受信任的电脑上设置密钥备份。",
-        "key_forgotten_text": "如果你忘记了你的安全密钥，你可以<button>设置新的恢复选项</button>",
-        "key_is_invalid": "安全密钥无效",
-        "key_is_valid": "看起来是有效的安全密钥！",
-        "keys_restored_title": "已恢复密钥",
-        "load_error_content": "无法获取备份状态",
-        "load_keys_progress": "%(total)s 个密钥中之 %(completed)s 个已恢复",
-        "no_backup_error": "找不到备份！",
-        "phrase_forgotten_text": "如果你忘记了你的安全短语，你可以<button1>使用你的安全密钥</button1>或<button2>设置新的恢复选项</button2>",
-        "recovery_key_mismatch_description": "无法使用此安全密钥解密备份：请检查你输入的安全密钥是否正确。",
-        "recovery_key_mismatch_title": "安全密钥不符",
-        "restore_failed_error": "无法还原备份"
+        "count_of_successfully_restored_keys": "成功恢复 %(sessionCount)s 个密钥",
+        "enter_key_description": "访问你的安全消息历史记录并通过输入恢复密钥来设置安全消息传递。",
+        "enter_key_title": "输入恢复密钥",
+        "enter_phrase_description": "访问你的安全消息历史记录，并通过输入你的安全口令来设置安全消息传递。",
+        "enter_phrase_title": "输入安全口令",
+        "incorrect_security_phrase_dialog": "无法使用此安全口令解密备份：请确认你输入的安全口令是否正确。",
+        "incorrect_security_phrase_title": "安全口令不正确",
+        "key_backup_warning": "<b>警告</b>：你应仅从受信任的计算机设置密钥备份。",
+        "key_fetch_in_progress": "从服务器获取密钥",
+        "key_forgotten_text": "如果你忘记了恢复密钥，你可以<button>设置新的恢复选项</button>。",
+        "key_is_invalid": "非有效的恢复密钥",
+        "key_is_valid": "似乎是有效的恢复密钥！",
+        "keys_restored_title": "密钥已恢复",
+        "load_error_content": "无法载入备份状态",
+        "load_keys_progress": "已恢复 %(total)s 个密钥中的 %(completed)s 个",
+        "no_backup_error": "未找到备份！",
+        "phrase_forgotten_text": "如果你忘记了安全口令，你可以<button1>使用恢复密钥</button1>或<button2>设置新的恢复选项</button2>。",
+        "recovery_key_mismatch_description": "无法使用此恢复密钥解密备份：请确认输入了正确的恢复密钥。",
+        "recovery_key_mismatch_title": "恢复密钥不正确",
+        "restore_failed_error": "无法恢复备份"
     },
     "right_panel": {
-        "add_integrations": "添加挂件、桥接和机器人",
+        "add_integrations": "添加扩展",
+        "add_topic": "添加主题",
+        "extensions_button": "扩展",
+        "extensions_empty_description": "选择“%(addIntegrations)s”以浏览并添加扩展到此房间。",
+        "extensions_empty_title": "使用更多工具、小部件与机器人提高生产力",
         "files_button": "文件",
         "pinned_messages": {
+            "empty_description": "选择一个消息并点击“%(pinAction)s”以包含在此处。",
+            "empty_title": "置顶重要的消息以便于发现",
+            "header": {
+                "one": "1 个已置顶的消息",
+                "other": "%(count)s 个已置顶的消息",
+                "zero": "已置顶的消息"
+            },
             "limits": {
-                "other": "你仅能固定 %(count)s 个挂件"
-            }
+                "other": "你最多只能钉住 %(count)s 个小部件"
+            },
+            "menu": "打开菜单",
+            "reply_thread": "回复 <link>消息列中的消息</link>",
+            "unpin_all": {
+                "button": "取消置顶所有消息",
+                "content": "确实要移除所有已置顶的消息？此操作无法撤消。",
+                "title": "取消置顶所有消息？"
+            },
+            "view": "在时间线中查看"
         },
-        "pinned_messages_button": "已固定",
+        "pinned_messages_button": "已置顶的消息",
         "poll": {
+            "active_heading": "进行中的投票",
+            "empty_active": "此房间暂无进行中的投票",
+            "empty_active_load_more": "暂无进行中的投票。加载更多投票以查看过去几个月的投票。",
+            "empty_active_load_more_n_days": {
+                "one": "过去 1 天暂无进行中的投票。载入更多投票以获取过去几个月的投票",
+                "other": "过去 %(count)s 天暂无进行中的投票。载入更多投票以获取过去几个月的投票"
+            },
+            "empty_past": "此房间暂无过往投票",
+            "empty_past_load_more": "暂无过往投票。载入更多投票以获取过去几个月的投票",
+            "empty_past_load_more_n_days": {
+                "one": "过去 1 天没有过往投票。加载更多投票以查看过去几个月的投票。",
+                "other": "过去 %(count)s 天暂无过往的投票。载入更多投票以获取过去几个月的投票"
+            },
             "final_result": {
-                "one": "基于 %(count)s 票数的最终结果",
-                "other": "基于 %(count)s 票数的最终结果"
-            }
+                "one": "基于 %(count)s 个投票的最终结果",
+                "other": "基于 %(count)s 个投票的最终结果"
+            },
+            "load_more": "载入更多投票",
+            "loading": "正在载入投票",
+            "past_heading": "过往的投票",
+            "view_in_timeline": "在时间线中查看投票",
+            "view_poll": "查看投票"
         },
-        "polls_button": "投票历史",
+        "polls_button": "投票",
         "room_summary_card": {
             "title": "房间信息"
         },
@@ -1502,754 +1959,1099 @@
         }
     },
     "room": {
-        "3pid_invite_email_not_found_account": "该邀请被发送到了与你的账户无关的 %(email)s",
-        "3pid_invite_email_not_found_account_room": "这个到 %(roomName)s 的邀请是发送给 %(email)s 的，而此邮箱没有关联你的账户",
-        "3pid_invite_error_description": "尝试验证你的邀请时返回错误（%(errcode)s）。你可以尝试把这个信息传给邀请你的人。",
-        "3pid_invite_error_invite_action": "仍然尝试加入",
-        "3pid_invite_error_invite_subtitle": "你只能通过有效邀请加入。",
-        "3pid_invite_error_public_subtitle": "你依旧可以加入这里。",
-        "3pid_invite_error_title": "你的邀请出了问题。",
-        "3pid_invite_error_title_room": "你到 %(roomName)s 的邀请出错",
-        "3pid_invite_no_is_subtitle": "要直接在 %(brand)s 中接收邀请，请在设置中使用一个身份服务器。",
-        "banned_by": "你被 %(memberName)s 封禁",
-        "banned_from_room_by": "你被 %(memberName)s 从 %(roomName)s 封禁了",
+        "3pid_invite_email_not_found_account": "此邀请已发送到 %(email)s，但该邮箱地址与你的账户无关。",
+        "3pid_invite_email_not_found_account_room": "%(roomName)s 的邀请已发送到 %(email)s，该邮箱与你的账户无关。",
+        "3pid_invite_error_description": "尝试验证邀请时出错（%(errcode)s）。你可以尝试将此信息转发给邀请你的人员。",
+        "3pid_invite_error_invite_action": "尝试强制加入",
+        "3pid_invite_error_invite_subtitle": "你只能使用有效的邀请加入。",
+        "3pid_invite_error_public_subtitle": "你仍然可以加入。",
+        "3pid_invite_error_title": "你的邀请出现问题。",
+        "3pid_invite_error_title_room": "你对 %(roomName)s 的邀请出现问题",
+        "3pid_invite_no_is_subtitle": "使用“设置”中的身份服务器，可直接在 %(brand)s 中接收邀请。",
+        "banned_by": "你已被 %(memberName)s 封禁",
+        "banned_from_room_by": "你已被 %(memberName)s 禁止进入 %(roomName)s",
         "context_menu": {
             "copy_link": "复制房间链接",
             "favourite": "收藏",
             "forget": "忘记房间",
             "low_priority": "低优先级",
+            "mark_read": "设为已读",
+            "mark_unread": "设为未读",
+            "notifications_default": "跟随系统设置",
+            "notifications_mute": "静默房间",
             "title": "房间选项",
             "unfavourite": "已收藏"
         },
-        "creating_room_text": "正在创建房间%(names)s",
+        "creating_room_text": "正在以 %(names)s 为名称创建房间",
         "dm_invite_action": "开始聊天",
-        "dm_invite_subtitle": "<userName/> 想聊天",
-        "dm_invite_title": "你想和 %(user)s 聊天吗？",
-        "drop_file_prompt": "把文件拖到这里以上传",
-        "edit_topic": "编辑话题",
-        "error_join_404_invite": "邀请你的人已经离开了，亦或是他们的家服务器离线了。",
-        "error_join_404_invite_same_hs": "邀请你的人已经离开了。",
-        "error_join_connection": "加入时发生错误。",
-        "error_join_incompatible_version_1": "抱歉，你的家服务器过旧，故无法参与其中。",
-        "error_join_incompatible_version_2": "请 联系你的家服务器管理员。",
+        "dm_invite_subtitle": "<userName/> 想要聊天",
+        "dm_invite_title": "你想与 %(user)s 聊天吗？",
+        "drop_file_prompt": "拖放文件到此处以上传",
+        "edit_topic": "编辑主题",
+        "error_cancel_knock_title": "取消失败",
+        "error_join_403": "你需要被邀请才能访问此房间。",
+        "error_join_404_1": "你尝试使用房间 ID 加入，但未提供要加入的服务器列表。房间 ID 是内部标识符，如果没有其它信息，则无法用于加入房间。",
+        "error_join_404_2": "如果你知道房间地址，请尝试通过该地址加入。",
+        "error_join_404_invite": "邀请你的人已离开，或其服务器已离线。",
+        "error_join_404_invite_same_hs": "邀请你的人已离开。",
+        "error_join_connection": "加入时出错。",
+        "error_join_incompatible_version_1": "抱歉，你的主服务器太旧，无法在此处参与。",
+        "error_join_incompatible_version_2": "请联系主服务器管理员。",
         "error_join_title": "加入失败",
-        "error_jump_to_date_connection": "在尝试查找并跳转到给定日期时发生网络错误。你的服务器可能出现了故障，或者你的网络暂时出现了问题。请再试一次。如果依然发生这种情况，请联系您的服务器管理员",
+        "error_join_unknown": "发生未知错误。",
+        "error_jump_to_date": "服务器返回 %(statusCode)s，错误代码为 %(errorCode)s",
+        "error_jump_to_date_connection": "尝试查找并跳转到指定日期时出现网络错误。主服务器可能已关闭，或互联网连接只是暂时出现问题。请重试。如果此问题持续存在，请联系主服务器管理员。",
+        "error_jump_to_date_details": "错误详细信息",
+        "error_jump_to_date_not_found": "我们找不到从 %(dateString)s 开始的后续活动。请尝试选择更早的日期。",
+        "error_jump_to_date_send_logs_prompt": "请提交<debugLogsLink>调试日志</debugLogsLink>以帮助我们追踪问题。",
+        "error_jump_to_date_title": "无法找到该日期的事件",
         "face_pile_summary": {
-            "one": "已有你所认识的 %(count)s 个人加入",
-            "other": "已有你所认识的 %(count)s 个人加入"
+            "one": "你认识的 %(count)s 个人已加入",
+            "other": "%(count)s 个你认识的人已加入"
         },
         "face_pile_tooltip_label": {
-            "one": "查看 1 位成员",
-            "other": "查看全部 %(count)s 位成员"
+            "one": "查看 1 个成员",
+            "other": "查看全部 %(count)s 个成员"
         },
         "face_pile_tooltip_shortcut": "包括 %(commaSeparatedMembers)s",
         "face_pile_tooltip_shortcut_joined": "包括你，%(commaSeparatedMembers)s",
-        "failed_reject_invite": "拒绝邀请失败",
+        "failed_determine_user": "由于成员事件已更改，无法确定要忽略哪个用户。",
+        "failed_reject_invite": "邀请拒绝失败",
         "forget_room": "忘记此房间",
         "forget_space": "忘记此空间",
         "header": {
-            "room_is_public": "此房间为公共的"
+            "join_video_call": "加入视频通话",
+            "join_voice_call": "加入语音通话",
+            "n_people_asking_to_join": {
+                "one": "申请加入",
+                "other": "%(count)s 个人员申请加入"
+            },
+            "room_is_public": "此为公共房间",
+            "shared_history_tooltip": "新成员可以看到历史",
+            "world_readable_history_tooltip": "任何人都可以看到历史"
         },
-        "inaccessible": "这个房间或空间当前不可访问。",
-        "inaccessible_name": "%(roomName)s 此时无法访问。",
-        "inaccessible_subtitle_1": "等一会儿再试或联系管理员检查你是否拥有访问权限。",
-        "inaccessible_subtitle_2": "尝试访问房间或空间时返回%(errcode)s。若你认为你看到这条消息是有问题的，请<issueLink>提交bug报告</issueLink>。",
+        "header_avatar_open_settings_label": "打开房间设置",
+        "header_face_pile_tooltip": "人员",
+        "header_untrusted_label": "不受信任",
+        "inaccessible": "此房间或空间暂时无法访问。",
+        "inaccessible_name": "目前无法访问 %(roomName)s。",
+        "inaccessible_subtitle_1": "请稍后重试，或联系房间或空间管理员检查你是否有权访问。",
+        "inaccessible_subtitle_2": "尝试访问房间或空间时返回了 %(errcode)s。如果认为此消息有误，请<issueLink>提交 Bug 报告</issueLink>。",
         "intro": {
-            "dm_caption": "除非你们其中一个邀请了别人加入，否则将仅有你们两个人在此对话中。",
+            "display_topic": "主题：<topic/>",
+            "dm_caption": "除非两者之一邀请他人加入，否则此处只有你们两个人的对话。",
+            "edit_topic": "主题：<topic/>（<a>编辑</a>）",
             "enable_encryption_prompt": "在设置中启用加密。",
-            "no_avatar_label": "添加图片，让人们一眼就能看到你的房间。",
-            "no_topic": "<a>添加话题</a>，让大家知道这里是讨论什么的。",
-            "private_unencrypted_warning": "你的私人消息通常是加密的，但此房间不是。这通常是因为使用了不受支持的设备或方法，例如电子邮件邀请。",
-            "room_invite": "仅邀请至此房间",
-            "send_message_start_dm": "发送你的第一条消息邀请<displayName/>来聊天",
-            "start_of_dm_history": "这是你与<displayName/>的私聊历史的开端。",
-            "start_of_room": "这里是 <roomName/> 的开始。",
-            "unencrypted_warning": "未启用端到端加密",
+            "encrypted_3pid_dm_pending_join": "一旦所有人都加入，你就可以开始聊天",
+            "no_avatar_label": "添加一张照片，这样别人就能很容易地找到你的房间。",
+            "no_topic": "<a>添加主题</a>有助于人们了解此房间与哪些事物相关。",
+            "private_unencrypted_warning": "你的私有消息通常是加密的，但此房间不是。通常这是由于使用了不受支持的设备或方法，例如通过邮件地址邀请。",
+            "room_invite": "仅邀请到此房间",
+            "send_message_start_dm": "发送第一个消息以邀请 <displayName/> 聊天",
+            "start_of_dm_history": "此处是你与 <displayName/> 的私聊历史的开头。",
+            "start_of_room": "这是 <roomName/> 的开始。",
+            "unencrypted_warning": "端到端加密未启用",
             "user_created": "%(displayName)s 创建了此房间。",
             "you_created": "你创建了此房间。"
         },
-        "invite_email_mismatch_suggestion": "要在 %(brand)s 中直接接收邀请，请在设置中共享此邮箱。",
-        "invite_sent_to_email": "邀请已被发送到 %(email)s",
-        "invite_sent_to_email_room": "这个到 %(roomName)s 的邀请是发送给 %(email)s 的",
-        "invite_subtitle": "<userName/> 邀请了你",
+        "invite_email_mismatch_suggestion": "在“设置 ”中分享此邮件，以便直接在 %(brand)s 中接收邀请。",
+        "invite_sent_to_email": "此邀请已发送至 %(email)s",
+        "invite_sent_to_email_room": "到 %(roomName)s 的邀请已发送到 %(email)s",
+        "invite_subtitle": "由 <userName/> 邀请",
         "invite_this_room": "邀请到此房间",
         "invite_title": "你想加入 %(roomName)s 吗？",
-        "inviter_unknown": "未知的",
+        "inviter_unknown": "未知",
         "invites_you_text": "<inviter/> 邀请了你",
         "join_button_account": "注册",
-        "join_failed_needs_invite": "你需要一个邀请来查看 %(roomName)s",
+        "join_failed_needs_invite": "要查看 %(roomName)s，你需要被邀请",
         "join_the_discussion": "加入讨论",
         "join_title": "加入房间以参与",
-        "join_title_account": "使用一个账户加入对话",
-        "joining": "加入中…",
-        "jump_read_marker": "跳到第一条未读消息。",
+        "join_title_account": "通过账户加入对话",
+        "joining": "正在加入…",
+        "joining_room": "正在加入房间…",
+        "joining_space": "加入空间",
+        "jump_read_marker": "跳转到首个未读消息。",
         "jump_to_bottom_button": "滚动到最近的消息",
         "kick_reason": "原因：%(reason)s",
-        "kicked_by": "%(memberName)s 将你移出了这里",
-        "kicked_from_room_by": "%(memberName)s 将你移出了 %(roomName)s",
+        "kicked_by": "你已被 %(memberName)s 移除",
+        "kicked_from_room_by": "你已被 %(memberName)s 从 %(roomName)s 移除",
+        "knock_cancel_action": "取消请求",
+        "knock_denied_subtitle": "由于你被拒绝访问，除非收到群组管理员或协管员的邀请，否则你无法重新加入。",
+        "knock_denied_title": "你已被拒绝访问",
+        "knock_message_field_placeholder": "消息（可选）",
+        "knock_prompt": "申请加入？",
+        "knock_prompt_name": "申请加入 %(roomName)s？",
+        "knock_send_action": "请求访问",
+        "knock_sent": "已发送加入申请",
+        "knock_sent_subtitle": "你的加入请求正在等待处理。",
+        "knock_subtitle": "你需要获得此房间的访问权限才能查看或参与对话。你可以在下方发送加入申请。",
         "leave_error_title": "离开房间时出错",
-        "leave_server_notices_description": "此房间是用于发布来自家服务器的重要讯息的，所以你不能退出它。",
-        "leave_server_notices_title": "无法退出服务器公告房间",
-        "leave_unexpected_error": "试图离开房间时发生意外服务器错误",
-        "link_email_to_receive_3pid_invite": "要在 %(brand)s 中直接接收邀请，请在设置中将你的账户连接到此邮箱。",
-        "loading_preview": "加载预览中",
-        "no_peek_join_prompt": "%(roomName)s 不能被预览。你想加入吗？",
-        "no_peek_no_name_join_prompt": "这里没有预览, 你是否要加入?",
-        "not_found_subtitle": "你确定你位于正确的地方?",
-        "not_found_title": "这个房间或空间不存在。",
-        "not_found_title_name": "%(roomName)s 不存在。",
-        "peek_join_prompt": "你正在预览 %(roomName)s。想加入吗？",
-        "read_topic": "点击阅读话题",
-        "rejoin_button": "重新加入",
-        "unread_notifications_predecessor": {
-            "other": "你在此房间的先前版本中有 %(count)s 条未读通知。",
-            "one": "你在此房间的先前版本中有 %(count)s 条未读通知。"
+        "leave_server_notices_description": "此房间用于存储来自主服务器的重要消息，因此你无法离开。",
+        "leave_server_notices_title": "无法离开“服务器通知”房间",
+        "leave_unexpected_error": "尝试离开房间时出现意外服务器错误",
+        "link_email_to_receive_3pid_invite": "请在“设置”中将此邮件地址与你的账户关联，以便直接在 %(brand)s 中接收邀请。",
+        "loading_preview": "正在载入预览",
+        "no_peek_join_prompt": "%(roomName)s 无法预览。是否加入？",
+        "no_peek_no_name_join_prompt": "暂无预览，是否加入？",
+        "not_found_subtitle": "你确定来对地方了吗？",
+        "not_found_title": "此房间或空间不存在。",
+        "not_found_title_name": "%(roomName)s 不存在。 ",
+        "peek_join_prompt": "你正在预览 %(roomName)s。是否加入？",
+        "pinned_message_banner": {
+            "button_close_list": "关闭列表",
+            "button_view_all": "查看全部",
+            "description": "此房间包含已置顶的消息。点击查看。",
+            "go_to_newest_message": "在此处查看时间线中的置顶消息和最新的置顶消息",
+            "go_to_next_message": "在此处查看时间线中的置顶消息和下一条最早的置顶消息",
+            "title": "<bold>第 %(index)s 个已置顶的消息，共 %(length)s 个</bold>"
         },
-        "upgrade_error_description": "请再次检查你的服务器是否支持所选房间版本，然后再试一次。",
-        "upgrade_error_title": "升级房间时发生错误",
-        "upgrade_warning_bar": "升级此房间将会关闭房间的当前实例并创建一个具有相同名称的升级版房间。",
-        "upgrade_warning_bar_admins": "此警告仅房间管理员可见",
-        "upgrade_warning_bar_unstable": "此房间运行的房间版本是 <roomVersion /> ，此版本已被家服务器标记为 <i>不稳定</i> 。",
-        "upgrade_warning_bar_upgraded": "此房间已经被升级。",
+        "read_topic": "点击阅读主题",
+        "rejecting": "正在拒绝邀请…",
+        "rejoin_button": "重新加入",
+        "room_content": "房间内容",
+        "room_is_low_priority": "此为低优先级房间",
+        "search": {
+            "all_rooms_button": "搜索所有房间",
+            "placeholder": "搜索消息…",
+            "summary": {
+                "one": "为“<query/>”找到 1 个结果",
+                "other": "根据关键词“<query/>”找到 %(count)s 个结果"
+            },
+            "this_room_button": "搜索此房间"
+        },
+        "unknown_status_code_for_timeline_jump": "未知状态码",
+        "unread_notifications_predecessor": {
+            "one": "你的 %(count)s 个未读通知在此房间的上一版本中。",
+            "other": "你在此房间的上一版本中有 %(count)s 个未读通知。"
+        },
+        "upgrade_error_description": "请仔细检查你的服务器是否支持所选的房间版本，然后重试。",
+        "upgrade_error_title": "升级房间时出错",
+        "upgrade_warning_bar": "升级此房间将关闭当前的房间实例，并创建一个同名的已升级房间。",
+        "upgrade_warning_bar_admins": "仅房间管理员可以看到此警告",
+        "upgrade_warning_bar_unstable": "此房间正在运行房间版本 <roomVersion />，此主服务器已将其标记为<i>不稳定</i>。",
+        "upgrade_warning_bar_upgraded": "此房间已升级过。",
         "upload": {
             "uploading_multiple_file": {
-                "other": "正在上传 %(filename)s 与其他 %(count)s 个文件",
-                "one": "正在上传 %(filename)s 与其他 %(count)s 个文件"
+                "one": "正在上传 %(filename)s 与剩余 %(count)s 个文件",
+                "other": "正在上传 %(filename)s 与剩余 %(count)s 个文件"
             },
             "uploading_single_file": "正在上传 %(filename)s"
-        }
+        },
+        "video_room": "此房间为视频房间",
+        "waiting_for_join_subtitle": "受邀用户加入 %(brand)s 后，你将能够聊天，并且房间将端到端加密。",
+        "waiting_for_join_title": "等待用户加入 %(brand)s"
     },
     "room_list": {
         "add_room_label": "添加房间",
         "add_space_label": "添加空间",
-        "breadcrumbs_empty": "没有最近访问过的房间",
+        "breadcrumbs_empty": "暂无最近访问的房间",
         "breadcrumbs_label": "最近访问的房间",
-        "failed_add_tag": "无法为房间新增标签 %(tagName)s",
-        "failed_remove_tag": "移除房间标签 %(tagName)s 失败",
-        "failed_set_dm_tag": "设置私聊标签失败",
+        "failed_add_tag": "为房间添加标签 %(tagName)s 失败",
+        "failed_remove_tag": "从房间移除标签 %(tagName)s 失败",
+        "failed_set_dm_tag": "私聊标签设置失败",
         "home_menu_label": "主页选项",
         "join_public_room_label": "加入公共房间",
         "joining_rooms_status": {
-            "one": "目前正在加入 %(count)s 个房间",
-            "other": "目前正在加入 %(count)s 个房间"
+            "one": "当前正在加入 %(count)s 个房间",
+            "other": "当前加入了 %(count)s 个房间"
+        },
+        "list_title": "房间列表",
+        "more_options": {
+            "leave_room": "离开房间"
         },
         "notification_options": "通知选项",
         "redacting_messages_status": {
-            "one": "目前正在移除%(count)s个房间中的消息",
-            "other": "目前正在移除%(count)s个房间中的消息"
+            "one": "正在移除房间中的 %(count)s 个消息",
+            "other": "正在移除房间中的 %(count)s 个消息"
+        },
+        "section": {
+            "chats": "聊天",
+            "favourites": "收藏",
+            "low_priority": "低优先级"
         },
         "show_less": "显示更少",
         "show_n_more": {
-            "other": "多显示 %(count)s 个",
-            "one": "多显示 %(count)s 个"
+            "one": "显示剩余 %(count)s 个",
+            "other": "显示剩余 %(count)s 个"
         },
         "show_previews": "显示消息预览",
         "sort_by": "排序",
         "sort_by_activity": "活动",
         "sort_by_alphabet": "字典顺序",
-        "sort_unread_first": "优先显示有未读消息的房间",
-        "space_menu_label": "%(spaceName)s菜单",
+        "sort_unread_first": "优先显示包含未读消息的房间",
+        "space_menu_label": "%(spaceName)s 菜单",
         "sublist_options": "列表选项",
         "suggested_rooms_heading": "建议的房间"
     },
     "room_settings": {
         "access": {
-            "description_space": "决定谁可以查看和加入 %(spaceName)s。",
+            "description_space": "决定谁可以查看并加入 %(spaceName)s。",
             "title": "访问"
         },
         "advanced": {
-            "error_upgrade_description": "房间可能没有完整地升级",
+            "error_upgrade_description": "无法完成升级此房间",
             "error_upgrade_title": "房间升级失败",
             "information_section_room": "房间信息",
             "information_section_space": "空间信息",
-            "room_id": "内部房间ID",
-            "room_predecessor": "查看%(roomName)s里更旧的消息。",
-            "room_upgrade_button": "升级此房间至推荐版本",
+            "room_id": "内部房间 ID",
+            "room_predecessor": "在 %(roomName)s 中查看更早的消息",
+            "room_upgrade_button": "将此房间升级到推荐的房间版本",
+            "room_upgrade_warning": "<b>警告</b>：升级房间<i>不会自动将房间成员迁移到新版本房间。</i>我们会在旧版本房间中发布新房间的链接 - 房间成员必须点击此链接才能加入新房间。",
             "room_version": "房间版本：",
             "room_version_section": "房间版本",
-            "space_predecessor": "查看%(spaceName)s的旧版本。",
+            "space_predecessor": "在 %(spaceName)s 中查看更旧的版本。",
             "space_upgrade_button": "将此空间升级到推荐的房间版本",
-            "unfederated": "此房间无法被远程 Matrix 服务器访问",
-            "upgrade_button": "升级此房间至版本 %(version)s",
-            "upgrade_dialog_description": "升级此房间需要关闭此房间的当前实例并创建一个新的房间代替它。为了给房间成员最好的体验，我们会：",
-            "upgrade_dialog_description_1": "创建一个拥有相同的名称、描述与头像的新房间",
-            "upgrade_dialog_description_2": "更新所有本地房间别名以使其指向新房间",
-            "upgrade_dialog_description_3": "阻止用户在旧房间中发言，并发送消息建议用户迁移至新房间",
-            "upgrade_dialog_description_4": "在新房间的开始处发送一条指回旧房间的链接，这样用户可以查看旧消息",
-            "upgrade_dialog_title": "更新房间版本",
-            "upgrade_dwarning_ialog_title_public": "更新公共房间",
-            "upgrade_warning_dialog_description": "更新房间是高级操作，通常建议在房间由于错误、缺失功能或安全漏洞而不稳定时使用。",
-            "upgrade_warning_dialog_explainer": "<b>请注意升级将使这个房间有一个新版本</b>。所有当前的消息都将保留在此存档房间中。",
-            "upgrade_warning_dialog_footer": "你将把此房间从 <oldVersion /> 升级至 <newVersion />。",
-            "upgrade_warning_dialog_invite_label": "自动邀请该房间的成员加入新房间",
-            "upgrade_warning_dialog_report_bug_prompt": "这通常仅影响服务器如何处理房间。如果你的 %(brand)s 遇到问题，请回报错误。",
-            "upgrade_warning_dialog_report_bug_prompt_link": "通常这只影响房间在服务器上的处理方式。如果你对你的 %(brand)s 有问题，请<a>报告一个错误</a>。",
-            "upgrade_warning_dialog_title_private": "更新私人房间"
+            "unfederated": "远程 Matrix 服务器无法访问此房间",
+            "upgrade_button": "升级此房间到版本 %(version)s",
+            "upgrade_dialog_description": "升级此房间需要关闭当前的房间实例并创建一个新的房间来代替它。为了给房间成员提供最佳体验，我们将：",
+            "upgrade_dialog_description_1": "创建一个具有相同名称、描述与头像的新房间",
+            "upgrade_dialog_description_2": "更新任意本地房间别名以使其指向新房间",
+            "upgrade_dialog_description_3": "阻止用户在旧版本房间发言，并发送消息建议用户迁移到新房间。",
+            "upgrade_dialog_description_4": "在新房间的开头添加返回旧房间的链接，以便其他人可以查看旧消息。",
+            "upgrade_dialog_title": "升级房间版本",
+            "upgrade_dwarning_ialog_title_public": "升级公共房间",
+            "upgrade_warning_dialog_description": "升级房间是一项高级操作，通常建议在房间由于错误、功能缺失或安全漏洞而不稳定时执行此操作。",
+            "upgrade_warning_dialog_explainer": "<b>请注意，升级将生成新版本的房间</b>。所有当前消息都将保留在此已存档的房间中。",
+            "upgrade_warning_dialog_footer": "你将升级此房间的版本从 <oldVersion /> 到 <newVersion />。",
+            "upgrade_warning_dialog_invite_label": "自动将此房间的成员邀请到新房间",
+            "upgrade_warning_dialog_report_bug_prompt": "这通常只会影响房间在服务器上的处理方式。如果你的 %(brand)s 出现问题，请报告 Bug。",
+            "upgrade_warning_dialog_report_bug_prompt_link": "这通常只会影响服务器上对房间的处理方式。如果你在使用 %(brand)s 时遇到问题，请<a>报告 Bug</a>。",
+            "upgrade_warning_dialog_title": "升级房间",
+            "upgrade_warning_dialog_title_private": "升级私有房间"
         },
         "alias_not_specified": "未指定",
         "bridges": {
-            "description": "此房间正桥接消息到以下平台。<a>了解更多。</a>",
-            "empty": "这个房间不会将消息桥接到任何平台。<a>了解更多</a>",
-            "title": "桥接"
+            "description": "此房间正在将消息桥接到以下平台。<a>了解详情</a>",
+            "empty": "此房间不会将消息桥接到任何平台。<a>了解更多</a>",
+            "title": "桥接器"
         },
         "delete_avatar_label": "删除头像",
         "general": {
-            "alias_field_has_domain_invalid": "缺少域分隔符，例子（:domain.org）",
-            "alias_field_has_localpart_invalid": "缺少房间名称或分隔符，例子（my-room:domain.org）",
-            "alias_field_matches_invalid": "此地址不指向此房间",
-            "alias_field_placeholder_default": "例如 my-room",
+            "alias_field_has_domain_invalid": "缺少域名分隔符。例如（:domain.org）",
+            "alias_field_has_localpart_invalid": "缺少房间名称或分隔符，例如（my-room:domain.org）",
+            "alias_field_matches_invalid": "此地址未指向此房间",
+            "alias_field_placeholder_default": "例如：my-room",
             "alias_field_required_invalid": "请提供地址",
-            "alias_field_safe_localpart_invalid": "不允许使用某些字符",
-            "alias_field_taken_invalid": "此地址的服务器无效或已被使用",
+            "alias_field_safe_localpart_invalid": "某些字符不被允许",
+            "alias_field_taken_invalid": "此地址指向的服务器无效或已被使用",
             "alias_field_taken_invalid_domain": "此地址已被使用",
-            "alias_field_taken_valid": "此地址可用",
+            "alias_field_taken_valid": "此地址可供使用",
             "alias_heading": "房间地址",
-            "aliases_items_label": "其他公布的地址：",
-            "aliases_no_items_label": "还没有其他公布的地址，在下方添加一个",
+            "aliases_items_label": "其它已发布地址：",
+            "aliases_no_items_label": "暂无其它已发布的地址，可以在下面添加。",
             "aliases_section": "房间地址",
             "avatar_field_label": "房间头像",
             "canonical_alias_field_label": "主要地址",
-            "default_url_previews_off": "已对此房间的参与者默认禁用URL预览。",
-            "default_url_previews_on": "已对此房间的参与者默认启用URL预览。",
-            "description_space": "编辑关于你的空间的设置。",
-            "error_creating_alias_description": "创建地址时出现错误。可能是服务器不允许，也可能是出现了一个暂时的错误。",
-            "error_creating_alias_title": "创建地址时出现错误",
-            "error_deleting_alias_description": "删除那个地址时出现错误。可能它已不存在，也可能出现了一个暂时的错误。",
-            "error_deleting_alias_description_forbidden": "你没有权限删除此地址。",
-            "error_deleting_alias_title": "删除地址时出现错误",
-            "error_save_space_settings": "空间设置保存失败。",
-            "error_updating_alias_description": "更新此房间的备用地址时出现错误。可能是服务器不允许，也可能是出现了一个暂时的错误。",
-            "error_updating_canonical_alias_description": "更新房间的主要地址时发生错误。可能是此服务器不允许，也可能是出现了一个临时错误。",
-            "error_updating_canonical_alias_title": "更新主要地址时发生错误",
+            "description_space": "编辑空间相关设置。",
+            "error_creating_alias_description": "创建该地址时出错。服务器可能不允许该地址，或者发生了临时故障。",
+            "error_creating_alias_title": "创建地址时出错",
+            "error_deleting_alias_description": "移除此地址时出错。它可能不再存在或临时出错。",
+            "error_deleting_alias_description_forbidden": "你无权删除地址。",
+            "error_deleting_alias_title": "移除地址时出错",
+            "error_publishing": "无法发布房间",
+            "error_publishing_detail": "发布此房间时出错",
+            "error_save_space_settings": "保存空间设置时出错",
+            "error_updating_alias_description": "更新房间的备选地址时出错。服务器可能不允许此操作，或者发生了临时故障。",
+            "error_updating_canonical_alias_description": "更新房间主要地址时出错。服务器可能不允许这样做，或者发生了临时故障。",
+            "error_updating_canonical_alias_title": "更新主要地址时出错",
             "leave_space": "离开空间",
             "local_alias_field_label": "本地地址",
-            "local_aliases_explainer_room": "为此房间设置地址以便用户通过你的家服务器（%(localDomain)s）找到此房间",
-            "local_aliases_explainer_space": "设置此空间的地址，这样用户就能通过你的家服务器找到此空间（%(localDomain)s）",
+            "local_aliases_explainer_room": "为此房间设置地址，以便用户通过主服务器找到此房间。",
+            "local_aliases_explainer_space": "设置此空间的地址以便用户可以通过主服务器（%(localDomain)s）找到此空间",
             "local_aliases_section": "本地地址",
             "name_field_label": "房间名称",
-            "new_alias_placeholder": "新的公布的地址（例如 #alias:server）",
+            "new_alias_placeholder": "新的发布地址（例如：#alias:server）",
             "no_aliases_room": "此房间没有本地地址",
             "no_aliases_space": "此空间没有本地地址",
-            "other_section": "其他",
-            "publish_toggle": "是否将此房间发布至 %(domain)s 的房间目录中？",
-            "published_aliases_description": "要公布地址，首先需要将其设为本地地址。",
-            "published_aliases_explainer_room": "任何服务器上的人均可通过公布的地址加入你的房间。",
-            "published_aliases_explainer_space": "任何服务器上的人均可通过公布的地址加入你的空间。",
-            "published_aliases_section": "公布的地址",
-            "save": "保存修改",
-            "topic_field_label": "房间话题",
-            "url_preview_encryption_warning": "在加密的房间中，比如此房间，URL预览默认是禁用的，以确保你的家服务器（生成预览的地方）无法收集与你在此房间中看到的链接有关的信息。",
-            "url_preview_explainer": "当有人在他们的消息里放置URL时，可显示URL预览以给出更多有关链接的信息，如其网站的标题、描述以及图片。",
-            "url_previews_section": "URL预览",
-            "user_url_previews_default_off": "你已经默认<a>禁用</a>URL预览。",
-            "user_url_previews_default_on": "你已经默认<a>启用</a>URL预览。"
+            "other_section": "其它",
+            "publish_toggle": "发布此房间到 %(domain)s 的房间目录？",
+            "publish_warn_invite_only": "你无法发布被设为仅限邀请的房间。",
+            "publish_warn_no_canonical_permission": "你必须拥有设置主要地址的权限才能发布房间。",
+            "published_aliases_description": "要发布地址，首先需要将其设置为本地地址。",
+            "published_aliases_explainer_room": "任何服务器上的任何人都可以使用已发布的地址加入此房间。",
+            "published_aliases_explainer_space": "任何服务器上的任何人都可以使用已发布的地址加入此空间。",
+            "published_aliases_section": "发布的地址",
+            "save": "保存更改",
+            "topic_field_label": "房间主题"
         },
         "notifications": {
             "browse_button": "浏览",
             "custom_sound_prompt": "设置新的自定义声音",
             "notification_sound": "通知声音",
-            "settings_link": "如<a>设置</a>中设定的那样获取通知",
+            "settings_link": "按<a>设置</a>中的配置获取通知",
             "sounds_section": "声音",
+            "upload_sound_label": "上传自定义声音",
             "uploaded_sound": "已上传的声音"
         },
+        "people": {
+            "knock_empty": "暂无请求",
+            "knock_section": "申请加入",
+            "see_less": "查看更少",
+            "see_more": "查看更多"
+        },
         "permissions": {
-            "add_privileged_user_description": "授权给该房间内的某人或某些人",
-            "add_privileged_user_filter_placeholder": "搜索该房间内的用户……",
+            "add_privileged_user_description": "授予此房间中一个或多个用户更多特权",
+            "add_privileged_user_filter_placeholder": "在此房间中搜索用户…",
             "add_privileged_user_heading": "添加特权用户",
             "ban": "封禁用户",
             "ban_reason": "理由",
             "banned_by": "被 %(displayName)s 封禁",
-            "banned_users_section": "被封禁的用户",
-            "error_changing_pl_description": "更改此用户的权力级别时出错。请确保你有足够权限后重试。",
-            "error_changing_pl_reqs_description": "更改此房间的权力级别需求时出错。请确保你有足够的权限后重试。",
-            "error_changing_pl_reqs_title": "更改权力级别需求时出错",
-            "error_changing_pl_title": "更改权力级别时出错",
-            "error_unbanning": "解除封禁失败",
+            "banned_users_section": "已被封禁的用户",
+            "error_changing_pl_description": "更改用户权力值时出错。请确保你拥有足够的权限并重试。",
+            "error_changing_pl_reqs_description": "更改房间权力值要求时出错。请确保你拥有足够的权限并重试。",
+            "error_changing_pl_reqs_title": "更改权力值要求时出错",
+            "error_changing_pl_title": "更改权力值时出错",
+            "error_unbanning": "解封失败",
             "events_default": "发送消息",
             "invite": "邀请用户",
             "kick": "移除用户",
-            "m.call": "开始%(brand)s呼叫",
-            "m.call.member": "加入%(brand)s呼叫",
+            "m.call": "开始 %(brand)s 通话",
+            "m.call.member": "加入 %(brand)s 通话",
             "m.reaction": "发送反应",
             "m.room.avatar": "更改房间头像",
             "m.room.avatar_space": "更改空间头像",
-            "m.room.canonical_alias": "更改房间主要地址",
-            "m.room.canonical_alias_space": "更改空间主地址",
+            "m.room.canonical_alias": "更改房间的主要地址",
+            "m.room.canonical_alias_space": "更改空间的主要地址",
             "m.room.encryption": "启用房间加密",
-            "m.room.history_visibility": "更改历史记录可见性",
+            "m.room.history_visibility": "更改历史可见性",
             "m.room.name": "更改房间名称",
             "m.room.name_space": "更改空间名称",
-            "m.room.pinned_events": "管理置顶事件",
+            "m.room.pinned_events": "管理已置顶事件",
             "m.room.power_levels": "更改权限",
             "m.room.redaction": "移除我发送的消息",
-            "m.room.server_acl": "更改服务器访问控制列表",
-            "m.room.tombstone": "更新房间",
-            "m.room.topic": "更改话题",
+            "m.room.server_acl": "更改服务器 ACL",
+            "m.room.tombstone": "升级房间",
+            "m.room.topic": "更改主题",
             "m.room.topic_space": "更改描述",
-            "m.space.child": "管理此空间中的房间",
-            "m.widget": "修改挂件",
-            "muted_users_section": "被禁言的用户",
-            "no_privileged_users": "此房间中没有用户有特殊权限",
-            "notifications.room": "通知每个人",
+            "m.space.child": "在此空间中管理房间",
+            "m.widget": "修改小部件",
+            "muted_users_section": "已被静默的用户",
+            "no_privileged_users": "此房间中的用户均无特定权限",
+            "notifications.room": "通知所有人",
             "permissions_section": "权限",
-            "permissions_section_description_room": "选择更改房间各个部分所需的角色",
-            "permissions_section_description_space": "选择改变空间各个部分所需的角色",
+            "permissions_section_description_room": "选择更改房间各部分所需的角色",
+            "permissions_section_description_space": "选择更改空间各部分所需的角色",
             "privileged_users_section": "特权用户",
-            "redact": "移除其他人的消息",
+            "redact": "移除其他人发送的消息",
             "send_event_type": "发送 %(eventType)s 事件",
             "state_default": "更改设置",
             "title": "角色与权限",
             "users_default": "默认角色"
         },
         "security": {
-            "enable_encryption_confirm_description": "房间加密一经启用，便无法禁用。在加密房间中，发送的消息无法被服务器看到，只能被房间的参与者看到。启用加密可能会使许多机器人和桥接无法正常运作。 <a>详细了解加密。</a>",
+            "cannot_change_to_private_due_to_missing_history_visiblity_permissions": {
+                "description": "你无权更改该频道的历史可见性。此操作存在风险，可能导致未加入的用户读取消息。",
+                "title": "无法将房间设为私有房间"
+            },
+            "enable_encryption_confirm_description": "房间的加密一旦启用就无法禁用。服务器无法看到在加密房间中发送的消息，只有房间内的参与者才能看到。启用加密可能会阻止大多数机器人与桥接器正常工作。<a>了解更多加密相关</a>",
             "enable_encryption_confirm_title": "启用加密？",
-            "enable_encryption_public_room_confirm_description_1": "<b>不建议为公共房间添加加密。</b>任何人都能找到并加入公共房间，所以任何人都能阅读其中的消息。你不会获得加密的任何好处，并且之后你无法将其关闭。在公共房间中加密消息会使接收和发送消息变慢。",
-            "enable_encryption_public_room_confirm_description_2": "为避免这些问题，请为计划中的对话创建一个<a>新的加密房间</a>。",
-            "enable_encryption_public_room_confirm_title": "你确定要为此公开房间开启加密吗？",
-            "encrypted_room_public_confirm_description_1": "<b>不建议公开加密房间。</b>这意味着任何人都可以找到并加入房间，因此任何人都可以阅读消息。你将不会得到任何加密带来的好处。在公共房间加密消息还会拖慢收发消息的速度。",
-            "encrypted_room_public_confirm_description_2": "为避免这些问题，请为计划中的对话创建一个<a>新的加密房间</a>。",
-            "encrypted_room_public_confirm_title": "你确定要公开此加密房间吗？",
-            "encryption_permanent": "加密一经启用，便无法禁用。",
-            "error_join_rule_change_title": "未能更新加入列表",
-            "error_join_rule_change_unknown": "未知失败",
-            "guest_access_warning": "拥有受支持客户端的人无需注册账户即可加入房间。",
-            "history_visibility_invited": "只有成员（从他们被邀请开始）",
-            "history_visibility_legend": "谁可以阅读历史消息？",
-            "history_visibility_shared": "仅成员（从选中此选项时开始）",
-            "history_visibility_warning": "历史记录阅读权限的更改只会应用到此房间中将来的消息。既有历史记录的可见性将不会更改。",
-            "history_visibility_world_readable": "任何人",
+            "enable_encryption_public_room_confirm_description_1": "<b>不建议为公共房间启用加密。</b>任何人都可以找到并加入公共房间，因此任何人都可以阅读其中的消息。这种情况下你将无法受益于加密，并且以后也无法关闭加密功能。在公共房间中，加密消息会降低消息的收发效率。",
+            "enable_encryption_public_room_confirm_description_2": "为避免这些问题，请为你计划进行的对话创建一个<a>新的加密房间</a>。",
+            "enable_encryption_public_room_confirm_title": "你确定要为此公共房间添加加密功能？",
+            "encrypted_room_public_confirm_description_1": "<b>不建将加密房间设为公开。</b>这意味着任何人都可以找到并加入公共房间，因此任何人都可以阅读其中的消息。这种情况下你将无法受益于加密。在公共房间中，加密消息会降低消息的收发效率。",
+            "encrypted_room_public_confirm_description_2": "为避免这些问题，请为你计划进行的对话创建一个<a>新的公共房间</a>。",
+            "encrypted_room_public_confirm_title": "你确定要公开此加密房间？",
+            "encryption_forced": "服务器要求禁用加密。",
+            "encryption_permanent": "加密一旦启用就无法禁用。",
+            "error_join_rule_change_title": "连接规则更新失败",
+            "error_join_rule_change_unknown": "未知故障",
+            "guest_access_warning": "使用受支持的客户端的人员无需注册账户即可加入房间。",
+            "history_visibility_invited": "自成员被邀请时起",
+            "history_visibility_legend": "谁可以查看历史？",
+            "history_visibility_shared": "成员（完整历史）",
+            "history_visibility_warning": "此更改不会影响过去的消息，而只会影响新消息。<a>了解更多</a>",
+            "history_visibility_world_readable": "任何人（公开历史）",
             "join_rule_description": "决定谁可以加入 %(roomName)s。",
-            "join_rule_invite": "私有（仅邀请）",
-            "join_rule_invite_description": "只有受邀的人才能加入。",
+            "join_rule_invite": "仅限邀请",
+            "join_rule_invite_description": "仅限被邀请的人员加入",
             "join_rule_knock": "申请加入",
-            "join_rule_public_description": "任何人都可以找到并加入。",
+            "join_rule_knock_description": "除非被授予权限， 否则人员无法加入。",
+            "join_rule_public": "任何人",
+            "join_rule_public_description": "任何人都可以加入。",
             "join_rule_restricted": "空间成员",
-            "join_rule_restricted_description": "空间中的任何人都可以找到并加入。<a>在此处编辑哪些空间可以访问。</a>",
-            "join_rule_restricted_description_active_space": "<spaceName/> 中的任何人都可以寻找和加入。你也可以选择其他空间。",
-            "join_rule_restricted_description_prompt": "空间中的任何人都可以找到并加入。你可以选择多个空间。",
-            "join_rule_restricted_description_spaces": "可访问的空间",
-            "join_rule_restricted_dialog_description": "决定哪些空间可以访问这个房间。如果一个空间被选中，它的成员可以找到并加入<RoomName/>。",
-            "join_rule_restricted_dialog_empty_warning": "你正在移除所有空间。访问权限将预设为仅邀请",
+            "join_rule_restricted_description": "位于被授权的空间的任何人无需邀请即可加入。<a>管理空间</a>",
+            "join_rule_restricted_description_active_space": "任何在 <spaceName/> 中的成员都可以加入。",
+            "join_rule_restricted_description_prompt": "在空间中的任何人都可以加入。",
+            "join_rule_restricted_description_spaces": "被授权的空间",
+            "join_rule_restricted_dialog_description": "无需邀请即可加入 <RoomName/>。",
+            "join_rule_restricted_dialog_empty_warning": "你将移除所有已授权的空间。访问权将默认变更为“仅邀请”。",
             "join_rule_restricted_dialog_filter_placeholder": "搜索空间",
-            "join_rule_restricted_dialog_heading_other": "你可能不知道的其他空间或房间",
-            "join_rule_restricted_dialog_heading_room": "你知道的包含此房间的空间",
-            "join_rule_restricted_dialog_heading_space": "你知道的包含这个空间的空间",
-            "join_rule_restricted_dialog_heading_unknown": "这些可能是其他房间管理员的一部分。",
-            "join_rule_restricted_dialog_title": "选择空间",
+            "join_rule_restricted_dialog_heading_known": "此房间未被包含在你的空间",
+            "join_rule_restricted_dialog_heading_other": "其它你并非其成员的空间",
+            "join_rule_restricted_dialog_heading_room": "包含此房间的空间",
+            "join_rule_restricted_dialog_heading_space": "你已知包含到此空间的子空间",
+            "join_rule_restricted_dialog_heading_unknown": "这些可能是其他房间管理员参与的房间。",
+            "join_rule_restricted_dialog_title": "管理空间",
             "join_rule_restricted_n_more": {
-                "other": "以及另 %(count)s",
-                "one": "& 另外 %(count)s"
+                "one": "与更多 %(count)s 个",
+                "other": "与更多 %(count)s 个"
             },
             "join_rule_restricted_summary": {
-                "other": "目前，%(count)s 个空间可以访问",
-                "one": "目前，一个空间有访问权限"
+                "one": "当前已授权 1 个空间",
+                "other": "当前已授权 %(count)s 个空间"
             },
-            "join_rule_restricted_upgrade_description": "此升级将允许选定的空间成员无需邀请即可访问此房间。",
-            "join_rule_restricted_upgrade_warning": "这个房间位于你不是管理员的某些空间中。 在这些空间中，旧房间仍将显示，但系统会提示人们加入新房间。",
-            "join_rule_upgrade_awaiting_room": "正在加载新房间",
+            "join_rule_restricted_upgrade_description": "此升级将允许选定空间的成员无需邀请即可访问此房间。",
+            "join_rule_restricted_upgrade_warning": "此房间位于你并非管理员的某些空间中。在这些空间中，旧房间仍会显示，但系统会提示用户加入新房间。",
+            "join_rule_upgrade_awaiting_room": "正在载入新房间",
             "join_rule_upgrade_required": "需要升级",
             "join_rule_upgrade_sending_invites": {
                 "one": "正在发送邀请…",
-                "other": "正在发送邀请… （%(count)s 中的 %(progress)s）"
+                "other": "正在发送邀请…（%(count)s 个中的第 %(progress)s 个）"
             },
             "join_rule_upgrade_updating_spaces": {
-                "other": "正在更新房间… （%(count)s 中的 %(progress)s）",
-                "one": "正在更新空间…"
+                "one": "正在升级空间…",
+                "other": "正在更新空间…（%(count)s 个中的第 %(progress)s 个）"
             },
             "join_rule_upgrade_upgrading_room": "正在升级房间",
-            "public_without_alias_warning": "要链接至此房间，请添加一个地址。",
-            "publish_room": "使此房间在公共房间目录中可见。",
-            "publish_space": "使此空间在公共房间目录中可见。",
-            "strict_encryption": "永不从此会话向此房间中未验证的会话发送加密消息",
-            "title": "隐私安全"
+            "join_rule_world_readable_description": "更改谁可以加入房间也会更改未来消息的可见性。",
+            "public_without_alias_warning": "要关联到此房间，请添加地址。",
+            "publish_room": "使此房间在公共房间目录可见。",
+            "publish_space": "使此空间在公共房间目录可见。",
+            "strict_encryption": "仅发送消息到已验证的用户。",
+            "title": "安全与隐私"
         },
-        "title": "房间设置 - %(roomName)s",
+        "title": "房间设置：%(roomName)s",
         "upload_avatar_label": "上传头像",
         "visibility": {
             "alias_section": "地址",
-            "error_failed_save": "更新此空间的可见性失败",
-            "error_update_guest_access": "更新此空间的游客访问权限失败",
-            "error_update_history_visibility": "更新此空间的历史记录可见性失败",
-            "guest_access_explainer": "游客无需账户即可加入空间。",
-            "guest_access_label": "启用游客访问权限",
+            "error_failed_save": "此空间的设置更新失败",
+            "error_update_guest_access": "此空间的访客访问更新失败",
+            "error_update_history_visibility": "此空间的历史可见性更新失败",
+            "guest_access_disabled": "你无权更改访客访问。",
+            "guest_access_explainer": "访客可以在没有账户的情况下加入。这将对公共空间有用。",
+            "guest_access_label": "启用访客访问",
             "history_visibility_anyone_space": "预览空间",
-            "history_visibility_anyone_space_description": "允许人们在加入前预览你的空间。",
-            "history_visibility_anyone_space_recommendation": "建议用于公开空间。",
-            "title": "可见性"
+            "history_visibility_anyone_space_description": "允许人员在加入前预览空间。",
+            "history_visibility_anyone_space_disabled": "你无权更改历史可见性。",
+            "history_visibility_anyone_space_recommendation": "推荐用于公共空间。",
+            "title": "安全与隐私"
         },
         "voip": {
             "call_type_section": "通话类型",
-            "enable_element_call_caption": "%(brand)s是端到端加密的，但是目前仅限于少数用户。",
-            "enable_element_call_label": "启用%(brand)s作为此房间的额外通话选项",
-            "enable_element_call_no_permissions_tooltip": "你没有足够的权限更改这个。"
+            "enable_element_call_caption": "%(brand)s 为端到端加密，但当前仅限少数用户。",
+            "enable_element_call_label": "在此房间启用 %(brand)s 作为额外通话选项",
+            "enable_element_call_no_permissions_tooltip": "你无权更改此设置。"
         }
     },
     "room_summary_card_back_action_label": "房间信息",
     "scalar": {
-        "error_create": "无法创建挂件。",
-        "error_membership": "你不在此房间中。",
-        "error_missing_room_id": "缺少roomId。",
-        "error_missing_room_id_request": "请求中缺少room_id",
-        "error_missing_user_id_request": "请求中缺少user_id",
-        "error_permission": "你没有权限在此房间进行那个操作。",
-        "error_power_level_invalid": "权力级别必须是正整数。",
-        "error_room_not_visible": "房间%(roomId)s不可见",
+        "error_create": "无法创建小部件。",
+        "error_membership": "你不在此房间。",
+        "error_missing_room_id": "缺少房间 ID.",
+        "error_missing_room_id_request": "请求中缺少“room_id”",
+        "error_missing_user_id_request": "请求中缺少“user_id”",
+        "error_permission": "你无权在此房间内执行此操作。",
+        "error_power_level_invalid": "权力值必须为正整数。",
+        "error_room_not_visible": "房间 %(roomId)s 不可见",
         "error_room_unknown": "无法识别此房间。",
         "error_send_request": "请求发送失败。",
-        "failed_read_event": "读取时间失败",
-        "failed_send_event": "发送事件失败"
+        "failed_read_event": "事件读取失败",
+        "failed_send_event": "事件发送失败"
     },
     "server_offline": {
-        "description": "你的服务器未响应你的一些请求。下方是一些最可能的原因。",
-        "description_1": "服务器（%(serverName)s）花了太长时间响应。",
-        "description_2": "你的防火墙或防病毒软件阻止了此请求。",
-        "description_3": "一个浏览器扩展阻止了此请求。",
-        "description_4": "此服务器为离线状态。",
-        "description_5": "此服务器拒绝了你的请求。",
-        "description_6": "你的区域难以连接上互联网。",
-        "description_7": "尝试联系服务器时出现连接错误。",
-        "description_8": "服务器没有配置为提示错误是什么（CORS）。",
-        "empty_timeline": "全数阅毕。",
-        "recent_changes_heading": "尚未被接受的最近更改",
+        "description": "服务器未响应你的某些请求。以下是一些最可能的原因。",
+        "description_1": "服务器（%(serverName)s）响应时间过长。",
+        "description_2": "你的防火墙或杀毒软件阻止了请求。",
+        "description_3": "浏览器扩展阻止了该请求。",
+        "description_4": "此服务器已离线。",
+        "description_5": "服务器已拒绝你的请求。",
+        "description_6": "你所在的区域在连接 Internet 时遇到困难。",
+        "description_7": "尝试联系服务器时发生连接错误。",
+        "description_8": "服务器的配置未能说明问题原因（CORS）。",
+        "empty_timeline": "你已阅读所有消息",
+        "recent_changes_heading": "尚未收到最近的更改",
         "title": "服务器未响应"
     },
+    "service_worker_error": {
+        "description": "%(brand)s 需要一个 Service Worker 来从 Matrix 内容存储库加载经过身份验证的媒体。当前浏览器不支持此功能，因此你可能会遇到媒体加载失败的情况。",
+        "title": "Services Worker 载入失败"
+    },
     "seshat": {
-        "error_initialising": "消息搜索初始化失败，请检查<a>你的设置</a>以获取更多信息",
-        "reset_button": "重置活动存储",
-        "reset_description": "你大概率不想重置你的活动缩影存储",
-        "reset_explainer": "如果这样做，请注意你的消息并不会被删除，但在重新建立索引时，搜索体验可能会降低片刻",
-        "reset_title": "重置活动存储？",
-        "warning_kind_files": "当前版本的 %(brand)s 不支持查看某些加密文件",
-        "warning_kind_files_app": "使用<a>桌面端应用</a>来查看所有加密文件",
-        "warning_kind_search": "当前版本的 %(brand)s 不支持搜索加密消息",
-        "warning_kind_search_app": "使用<a>桌面端英语</a>来搜索加密消息"
+        "error_initialising": "消息搜索初始化失败，请检查<a>设置</a>了解更多信息。",
+        "reset_button": "重置事件存储",
+        "reset_description": "你很可能不想重置事件索引存储",
+        "reset_explainer": "如果你这样做，请注意，你的任何消息都不会被删除，但在重新创建索引期间，搜索体验可能会暂时下降。",
+        "reset_title": "重置事件存储？",
+        "warning_kind_files": "此版本的 %(brand)s 不支持查看某些加密文件",
+        "warning_kind_files_app": "使用<a>桌面 App</a> 查看所有加密文件",
+        "warning_kind_search": "此版本的 %(brand)s 不支持搜索加密消息",
+        "warning_kind_search_app": "使用<a>桌面 App</a> 搜索加密消息"
     },
     "setting": {
         "help_about": {
-            "access_token_detail": "你的访问令牌可以完全访问你的账户。不要将其与任何人分享。",
+            "access_token_detail": "访问 Token 可以完全控制账户，请勿分享给任何人。",
             "brand_version": "%(brand)s 版本：",
-            "clear_cache_reload": "清理缓存并重载",
-            "help_link": "关于 %(brand)s 的<a>使用说明</a>。",
-            "homeserver": "服务器介绍：<code>%(homeserverUrl)s</code>",
-            "title": "帮助及关于",
+            "clear_cache_reload": "清除缓存并重载",
+            "crypto_version": "加密组件版本：",
+            "dialog_title": "<strong>设置：</strong>帮助与关于",
+            "help_link": "点击<a>此处</a>获取有关使用 %(brand)s 的帮助。",
+            "homeserver": "主服务器 URL：<code>%(homeserverUrl)s</code>",
+            "identity_server": "身份服务器为 <code>%(identityServerUrl)s</code>",
+            "title": "帮助与关于",
             "versions": "版本"
         }
     },
     "settings": {
+        "account": {
+            "dialog_title": "<strong>设置：</strong>账户",
+            "title": "账户"
+        },
         "all_rooms_home": "在主页显示所有房间",
-        "all_rooms_home_description": "你加入的所有房间都会显示在主页。",
-        "always_show_message_timestamps": "总是显示消息时间戳",
+        "all_rooms_home_description": "你加入的所有房间都将显示在主页。",
+        "always_show_message_timestamps": "始终显示消息时间戳",
         "appearance": {
+            "bundled_emoji_font": "使用内置的 Emoji 样式",
+            "compact_layout": "显示紧凑文字及消息",
+            "compact_layout_description": "必须选择“现代布局”以启用此功能。",
             "custom_font": "使用系统字体",
-            "custom_font_description": "设置一个安装在你的系统上的字体名称，%(brand)s 会尝试使用它。",
+            "custom_font_description": "设置当前系统已安装的字体名称，%(brand)s 将尝试使用该字体。",
             "custom_font_name": "系统字体名称",
-            "custom_font_size": "使用自定义大小",
-            "custom_theme_error_downloading": "下载主题信息时发生错误。",
-            "custom_theme_invalid": "主题方案无效。",
-            "font_size": "字体大小",
+            "custom_font_size": "使用自定义字号",
+            "custom_theme_add": "添加自定义主题",
+            "custom_theme_downloading": "正在下载自定义主题…",
+            "custom_theme_error_downloading": "下载主题时出错",
+            "custom_theme_help": "输入要应用的自定义主题的 URL。",
+            "custom_theme_invalid": "主题协议无效。",
+            "dialog_title": "<strong>设置：</strong>外观",
+            "font_size": "文字大小",
+            "font_size_default": "%(fontSize)s（默认）",
+            "high_contrast": "高对比度",
             "image_size_default": "默认",
-            "image_size_large": "大",
+            "image_size_large": "大型",
             "layout_bubbles": "消息气泡",
             "layout_irc": "IRC（实验性）",
-            "match_system_theme": "匹配系统主题",
-            "timeline_image_size": "时间线中的图像大小"
+            "match_system_theme": "跟随系统主题",
+            "timeline_image_size": "时间线中的图像尺寸"
         },
-        "automatic_language_detection_syntax_highlight": "启用语法高亮的自动语言检测",
+        "automatic_language_detection_syntax_highlight": "启用“自动检测语法高亮中的编程语言”",
         "autoplay_gifs": "自动播放 GIF",
         "autoplay_videos": "自动播放视频",
-        "big_emoji": "在聊天中启用大型表情符号",
+        "big_emoji": "在聊天中启用加大的 Emoji",
         "code_block_expand_default": "默认展开代码块",
-        "code_block_line_numbers": "在代码块中显示行号",
-        "disable_historical_profile": "在消息历史记录中显示用户当前的头像和姓名",
-        "emoji_autocomplete": "启用实时表情符号建议",
-        "enable_markdown": "启用Markdown",
-        "enable_markdown_description": "以<code>/plain</code> 开始发送 Markdown 格式的信息。",
+        "code_block_line_numbers": "显示代码块中的行号",
+        "disable_historical_profile": "在消息历史中显示用户当前名称与个人资料图像",
+        "discovery": {
+            "title": "如何找到你"
+        },
+        "emoji_autocomplete": "在键入期间启用 Emoji 建议",
+        "enable_markdown": "启用 Markdown",
+        "enable_markdown_description": "在消息开头输入 <code>/plain</code> 以临时禁用 Markdown。",
+        "encryption": {
+            "advanced": {
+                "breadcrumb_first_description": "你的账户的详细信息、联系人、偏好设置与聊天列表将被保留",
+                "breadcrumb_page": "重置加密",
+                "breadcrumb_second_description": "你将丢失所有仅存储在服务器上的消息历史",
+                "breadcrumb_third_description": "你将需要再次验证你的所有设备与联系人",
+                "breadcrumb_title": "你确定要重置数字身份？",
+                "breadcrumb_title_cant_confirm": "你需要重置数字身份",
+                "breadcrumb_title_forgot": "忘记恢复密钥？你需要重置数字身份。",
+                "breadcrumb_title_sync_failed": "同步密钥存储失败。你需要重置数字身份。",
+                "breadcrumb_warning": "仅当你认为账户被盗时才这么做。",
+                "details_title": "加密详细信息",
+                "do_not_close_warning": "在重置完成之前请勿关闭此窗口",
+                "export_keys": "导出密钥",
+                "import_keys": "导入密钥",
+                "other_people_device_description": "警告：未向你明确验证（例如使用 Emoji）的用户、已验证用户的未验证设备都将不会收到你的加密消息。要使此更改生效需要重新启动应用程序。",
+                "other_people_device_label": "在加密房间中仅发送消息到已验证的用户",
+                "other_people_device_title": "其他人的设备",
+                "reset_identity": "重置密码学身份",
+                "reset_in_progress": "正在重置…",
+                "session_id": "会话 ID：",
+                "session_key": "会话密钥：",
+                "title": "高级"
+            },
+            "confirm_key_storage_off": "你确定要持续关闭密钥存储？",
+            "confirm_key_storage_off_description": "如果你移除所有设备将丢失消息历史，并需要重新验证所有现有联系人。<a>了解更多</a>",
+            "delete_key_storage": {
+                "breadcrumb_page": "删除密钥存储",
+                "confirm": "删除密钥存储",
+                "description": "删除密钥存储将从服务器中移除密码学身份与消息密钥，并关闭以下安全功能：",
+                "list_first": "你将不会在新设备上拥有加密消息历史",
+                "list_second": "如果你不再登录任何设备，你将丢失对加密消息的访问权。",
+                "title": "你确定要关闭密钥存储并将其删除？"
+            },
+            "device_not_verified_button": "验证此设备",
+            "device_not_verified_description": "你需要验证此设备才能查看加密设置。",
+            "device_not_verified_title": "设备未验证",
+            "dialog_title": "<strong>设置：</strong>加密",
+            "key_storage": {
+                "allow_key_storage": "允许密钥存储",
+                "description": "这将允许你在任意新设备上查看聊天历史，这对备份聊天和数字身份是必需的。<a了解更多</a>",
+                "title": "密钥存储"
+            },
+            "recovery": {
+                "change_recovery_confirm_button": "确认新的恢复密钥",
+                "change_recovery_confirm_description": "请在下面输入新的恢复密钥以完成验证。你的旧密钥将不再有效。",
+                "change_recovery_confirm_title": "输入新的恢复密钥",
+                "change_recovery_key": "更改恢复密钥",
+                "change_recovery_key_description": "在安全的地方记下新的恢复密钥。点击“继续”按钮以确认更改。",
+                "change_recovery_key_title": "更改恢复密钥？",
+                "description": "你的聊天已被端到端加密自动备份。如果你无法访问所有设备，则需要使用恢复密钥恢复备份并保留数字身份。",
+                "enter_key_error": "你输入的恢复密钥不正确。",
+                "enter_recovery_key": "输入恢复密钥",
+                "forgot_recovery_key": "忘记恢复密钥？",
+                "key_storage_warning": "你的密钥存储不同步。点击以下按钮之一即可修复此问题。",
+                "save_key_description": "不要与任何人分享！",
+                "save_key_title": "恢复密钥",
+                "set_up_recovery": "获取恢复密钥",
+                "set_up_recovery_confirm_button": "完成设置",
+                "set_up_recovery_confirm_description": "请输入上一屏幕显示的恢复密钥以完成恢复设置。",
+                "set_up_recovery_confirm_title": "输入恢复密钥以确认",
+                "set_up_recovery_description": "你的密钥存储受恢复密钥保护。如果设置后需要新的恢复密钥，可以选择“%(changeRecoveryKeyButton)s”重新创建。",
+                "set_up_recovery_save_key_description": "请将此恢复密钥保存到安全的地方，例如密码管理器、加密笔记或物理保险箱。",
+                "set_up_recovery_save_key_title": "保存恢复密钥到安全的地方",
+                "set_up_recovery_secondary_description": "点击“继续”后，我们将生成恢复密钥。",
+                "title": "备份"
+            },
+            "title": "加密"
+        },
         "general": {
             "account_management_section": "账户管理",
             "account_section": "账户",
-            "add_email_dialog_title": "添加邮箱",
-            "add_email_failed_verification": "邮箱验证失败：请确保你已点击邮件中的链接",
-            "add_email_instructions": "我们已向你发送了一封电子邮件，以验证你的地址。 请按照里面的说明操作，然后单击下面的按钮。",
-            "add_msisdn_confirm_body": "点击下面的按钮，以确认添加此电话号码。",
+            "add_email_dialog_title": "添加邮件地址",
+            "add_email_failed_verification": "邮件地址验证失败：请确保点击了邮件中的链接。",
+            "add_email_instructions": "我们已向你发送了一封邮件，用于验证你的地址。请按照邮件中的说明操作，然后点击以下按钮。",
+            "add_msisdn_confirm_body": "点击以下按钮确认添加此电话号码。",
             "add_msisdn_confirm_button": "确认添加电话号码",
-            "add_msisdn_confirm_sso_button": "通过单点登录以证明你的身份，并确认添加此电话号码。",
+            "add_msisdn_confirm_sso_button": "请确认使用单点登录添加此电话号码以证明身份。",
             "add_msisdn_dialog_title": "添加电话号码",
-            "add_msisdn_instructions": "一封短信已发送至 +%(msisdn)s。请输入其中包含的验证码。",
-            "add_msisdn_misconfigured": "MSISDN的新增/绑定流程配置错误",
-            "confirm_adding_email_body": "点击下面的按钮，以确认添加此邮箱地址。",
-            "confirm_adding_email_title": "确认添加邮箱",
-            "deactivate_confirm_body": "你确定要停用你的账户吗？此操作不可逆。",
-            "deactivate_confirm_body_sso": "通过单点登录证明你的身份并确认停用你的账户。",
-            "deactivate_confirm_content_1": "你将无法重新激活你的账户",
-            "deactivate_confirm_continue": "确认账户停用",
+            "add_msisdn_instructions": "一条短信已发送到 +%(msisdn)s。请输入短信中包含的验证码。",
+            "add_msisdn_misconfigured": "添加或绑定 MSISDN 流程配置错误",
+            "allow_spellcheck": "允许拼写检查",
+            "application_language": "应用程序语言",
+            "application_language_reload_hint": "选择另一种语言将重载 App",
+            "avatar_open_menu": "打开头像菜单",
+            "avatar_remove_progress": "正在移除图像…",
+            "avatar_save_progress": "正在上传图像…",
+            "avatar_upload_error_text": "不支持的文件格式或图像大于 %(size)s。",
+            "avatar_upload_error_text_generic": "文件格式可能不受支持。",
+            "avatar_upload_error_title": "无法上传头像",
+            "confirm_adding_email_body": "点击以下按钮确认添加此邮件地址。",
+            "confirm_adding_email_title": "确认添加邮件",
+            "deactivate_confirm_body": "你确定要停用账户？这将不可逆转。",
+            "deactivate_confirm_body_sso": "要确认停用你的账户，请使用单点登录以证明身份。",
+            "deactivate_confirm_content": "确认要停用你的账户。如果你继续：",
+            "deactivate_confirm_content_1": "你将无法重新激活账户",
+            "deactivate_confirm_content_2": "你将无法再登录",
+            "deactivate_confirm_content_3": "任何人都无法重复使用你的用户名 (MXID)，包括你自己：此用户名将保持不可用状态。",
+            "deactivate_confirm_content_4": "你将离开你所在的所有房间与私聊",
+            "deactivate_confirm_content_5": "你将被从身份服务器中移除：你的好友将无法再通过你的邮件地址或电话号码找到你。",
+            "deactivate_confirm_content_6": "你的旧消息仍然会被接收者看到，就像你过去发送的邮件一样。是否对以后加入房间的人员隐藏你发送的消息？",
+            "deactivate_confirm_continue": "确认停用账户",
+            "deactivate_confirm_erase_label": "隐藏我的信息不被新加入者看到",
             "deactivate_section": "停用账户",
-            "deactivate_warning": "停用你的账户是永久性动作——小心！",
-            "discovery_email_empty": "你在上方添加邮箱后发现选项将会出现。",
-            "discovery_email_verification_instructions": "验证你的收件箱中的链接",
-            "discovery_msisdn_empty": "你添加电话号码后发现选项将会出现。",
-            "discovery_needs_terms": "同意身份服务器（%(serverName)s）的服务协议以允许自己被通过邮件地址或电话号码发现。",
-            "email_address_in_use": "此邮箱地址已被使用",
-            "email_address_label": "电子邮箱地址",
-            "email_not_verified": "你的邮件地址尚未被验证",
-            "email_verification_instructions": "点击你所收到的电子邮件中的链接进行验证，然后再次点击继续。",
-            "emails_heading": "电子邮箱地址",
-            "error_add_email": "无法添加邮箱地址",
-            "error_deactivate_communication": "联系服务器时出现问题。请重试。",
-            "error_deactivate_invalid_auth": "服务器未返回有效认证信息。",
-            "error_deactivate_no_auth": "服务器不要求任何认证",
-            "error_email_verification": "无法验证邮箱地址。",
-            "error_invalid_email": "邮箱地址格式错误",
-            "error_invalid_email_detail": "这似乎不是有效的邮箱地址",
+            "deactivate_warning": "停用账户是一项永久性操作，请务必小心！",
+            "discovery_email_empty": "添加邮件后，将出现发现选项。",
+            "discovery_email_verification_instructions": "验证收件箱中的链接",
+            "discovery_msisdn_empty": "添加电话号码后将出现发现选项。",
+            "discovery_needs_terms": "同意身份服务器 (%(serverName)s) 的服务条款，以便允许他人通过邮件地址或电话号码找到你。",
+            "discovery_needs_terms_title": "让人们找到你",
+            "display_name": "显示名称",
+            "display_name_error": "无法设置显示名称",
+            "email_adding_unsupported_by_hs": "此主服务器不支持向账户添加邮件地址。",
+            "email_address_in_use": "此邮件地址已被使用",
+            "email_address_label": "邮件地址",
+            "email_not_verified": "你的邮件地址尚未经过验证",
+            "email_verification_instructions": "点击你收到的邮件中的链接进行验证，然后再次点击“继续”。",
+            "emails_heading": "邮件地址",
+            "error_add_email": "无法添加邮件地址",
+            "error_deactivate_communication": "与服务器通信时出现问题。请重试。",
+            "error_deactivate_invalid_auth": "服务器未能返回有效的身份验证信息。",
+            "error_deactivate_no_auth": "服务器无需任何身份验证",
+            "error_email_verification": "无法验证邮件地址。",
+            "error_invalid_email": "无效邮件地址",
+            "error_invalid_email_detail": "这似乎不是有效的邮件地址",
             "error_msisdn_verification": "无法验证电话号码。",
-            "error_password_change_403": "修改密码失败。确认原密码输入正确吗？",
+            "error_password_change_403": "密码更改失败。密码是否正确？",
+            "error_password_change_http": "%(errorMessage)s（HTTP 状态码 %(httpStatus)s）",
+            "error_password_change_title": "更改密码时出错",
+            "error_password_change_unknown": "更改密码时出现未知错误 （%(stringifiedError)s）",
             "error_remove_3pid": "无法移除联系人信息",
-            "error_revoke_email_discovery": "无法撤消电子邮件地址共享",
-            "error_revoke_msisdn_discovery": "无法撤销电话号码共享",
-            "error_share_email_discovery": "无法共享邮件地址",
-            "error_share_msisdn_discovery": "无法共享电话号码",
-            "identity_server_no_token": "找不到身份访问令牌",
-            "identity_server_not_set": "身份服务器未设置",
-            "language_section": "语言与地区",
+            "error_revoke_email_discovery": "无法撤消分享的邮件地址",
+            "error_revoke_msisdn_discovery": "无法找到与此电话号码对应的分享",
+            "error_share_email_discovery": "无法分享邮件地址",
+            "error_share_msisdn_discovery": "无法分享电话号码",
+            "identity_server_no_token": "未找到身份访问 Token",
+            "identity_server_not_set": "未设置身份服务器",
+            "invalid_phone_number": "提供的电话号码似乎无效。",
+            "language_section": "语言",
+            "msisdn_adding_unsupported_by_hs": "此主服务器不支持向账户添加电话号码。",
             "msisdn_in_use": "此电话号码已被使用",
             "msisdn_label": "电话号码",
             "msisdn_verification_field_label": "验证码",
-            "msisdn_verification_instructions": "请输入短信中发送的验证码。",
+            "msisdn_verification_instructions": "请输入通过短信发送的验证码。",
             "msisdns_heading": "电话号码",
-            "password_change_section": "设置一个新密码",
-            "password_change_success": "你的密码已成功更改。",
-            "remove_email_prompt": "删除 %(email)s 吗？",
-            "remove_msisdn_prompt": "删除 %(phone)s 吗？",
-            "spell_check_locale_placeholder": "选择区域设置"
+            "oidc_manage_button": "管理账户",
+            "password_change_section": "设置新的账户密码…",
+            "password_change_success": "密码已成功更改。",
+            "personal_info": "个人信息",
+            "profile_subtitle": "这是你在 App 上向他人展示的形象。",
+            "profile_subtitle_oidc": "你的账户由身份提供者单独管理，因此某些个人信息无法在此处更改。",
+            "remove_email_prompt": "移除 %(email)s？",
+            "remove_msisdn_prompt": "移除 %(phone)s？",
+            "spell_check_locale_placeholder": "选择区域",
+            "unable_to_load_emails": "无法加载邮件地址",
+            "unable_to_load_msisdns": "无法载入电话号码",
+            "username": "用户名"
         },
-        "inline_url_previews_default": "默认启用行内URL预览",
-        "inline_url_previews_room": "对此房间的所有参与者默认启用URL预览",
-        "inline_url_previews_room_account": "对此房间启用URL预览（仅影响你）",
-        "insert_trailing_colon_mentions": "在消息开头的提及用户的地方后面插入尾随冒号",
-        "jump_to_bottom_on_send": "发送消息时跳转到时间线底部",
+        "inline_url_previews_default": "启用预览",
+        "inline_url_previews_encrypted": "在加密房间启用 URL 预览",
+        "insert_trailing_colon_mentions": "在位于消息开头的用户提及后插入一个冒号",
+        "invite_controls": {
+            "default_label": "允许用户邀请你到房间"
+        },
+        "jump_to_bottom_on_send": "发送消息后跳转到时间线末尾",
         "key_backup": {
             "setup_secure_backup": {
-                "cancel_warning": "如果你现在取消，你可能会丢失加密的消息和数据，如果你丢失了登录信息的话。",
-                "confirm_security_phrase": "确认你的安全短语",
-                "description": "通过在你的服务器上备份加密密钥来防止丢失你对加密消息和数据的访问权。",
-                "download_or_copy": "%(downloadButton)s或%(copyButton)s",
-                "enter_phrase_title": "输入安全短语",
-                "enter_phrase_to_confirm": "再次输入你的安全短语进行确认。",
-                "generate_security_key_description": "我们将为您生成一个安全密钥，将其存储在安全的地方，例如密码管理器或保险箱。",
-                "generate_security_key_title": "生成一个安全密钥",
-                "pass_phrase_match_failed": "不匹配。",
-                "pass_phrase_match_success": "匹配成功！",
-                "phrase_strong_enough": "棒！这个安全短语看着够强。",
+                "backup_setup_success_description": "你的密钥正在从此设备备份。",
+                "backup_setup_success_title": "安全备份成功",
+                "cancel_warning": "如果你现在取消，在无法访问登录信息的情况下，可能会丢失加密消息与数据。",
+                "confirm_security_phrase": "确认安全口令",
+                "description": "通过在服务器上备份加密密钥，防止丢失对加密消息和数据的访问权。",
+                "download_or_copy": "%(downloadButton)s 或 %(copyButton)s",
+                "enter_phrase_description": "输入只有你知道的安全口令用于保护你的数据。为了安全起见，请勿重复使用账户密码。",
+                "enter_phrase_title": "输入安全口令",
+                "enter_phrase_to_confirm": "再次输入安全口令以确认。",
+                "generate_security_key_description": "我们将为你生成一个恢复密钥，以便你将其存储在安全的地方，例如密码管理器或保险箱。",
+                "generate_security_key_title": "生成恢复密钥",
+                "pass_phrase_match_failed": "不匹配",
+                "pass_phrase_match_success": "匹配！",
+                "phrase_strong_enough": "很好！此口令看起来足够强。",
                 "secret_storage_query_failure": "无法查询秘密存储状态",
-                "security_key_safety_reminder": "将您的安全密钥存放在安全的地方，例如密码管理器或保险箱，因为它用于保护您的加密数据。",
-                "set_phrase_again": "返回重新设置。",
-                "settings_reminder": "你也可以在设置中设置安全备份并管理你的密钥。",
-                "title_confirm_phrase": "确认安全密码",
-                "title_save_key": "保存你的安全密钥",
-                "title_set_phrase": "设置一个安全密码",
+                "security_key_safety_reminder": "请将恢复密钥存储在安全的地方，例如密码管理器或保险箱，因为它用于保护你的加密数据。",
+                "set_phrase_again": "返回以再次设置。",
+                "settings_reminder": "你还可以在“设置”中设置安全备份与管理密钥。",
+                "title_confirm_phrase": "确认安全口令",
+                "title_save_key": "保存恢复密钥",
+                "title_set_phrase": "设置安全口令",
                 "unable_to_setup": "无法设置秘密存储",
-                "use_different_passphrase": "使用不同的口令词组？",
-                "use_phrase_only_you_know": "使用一个只有你知道的密码，你也可以保存安全密钥以供备份使用。"
+                "use_different_passphrase": "使用不同的口令？",
+                "use_phrase_only_you_know": "使用只有你知道的密码，并可选择保存恢复密钥以用于备份。"
             }
         },
         "key_export_import": {
-            "confirm_passphrase": "确认口令词组",
-            "enter_passphrase": "输入口令词组",
-            "export_description_1": "此操作允许你将加密房间中收到的消息的密钥导出为本地文件。你可以将文件导入其他 Matrix 客户端，以便让别的客户端在未收到密钥的情况下解密这些消息。",
+            "confirm_passphrase": "确认口令",
+            "enter_passphrase": "输入口令",
+            "export_description_1": "此过程允许你将加密房间中收到的消息的密钥导出到本地文件。你之后可以将该文件导入到另一个 Matrix 客户端以便该客户端也能解密这些消息。",
+            "export_description_2": "导出的文件将允许任何可以读取它的人解密你可以看到的任何加密消息，应小心确保其安全。为此你应该在下面输入一个唯一的口令，该口令仅用于加密导出的数据，并且只能使用相同的口令导入数据。",
             "export_title": "导出房间密钥",
             "file_to_import": "要导入的文件",
-            "import_description_1": "此操作允许你导入之前从另一个 Matrix 客户端中导出的加密密钥文件。导入完成后，你将能够解密那个客户端可以解密的加密消息。",
-            "import_description_2": "导出文件受口令词组保护。你应该在此输入口令词组以解密此文件。",
+            "import_description_1": "此过程允许你导入以前从其它 Matrix 客户端导出的加密密钥，然后你将能够解密其它客户端可以解密的任何消息。",
+            "import_description_2": "已导出的文件使用口令进行保护。你应该在此处输入口令来解密此文件。",
             "import_title": "导入房间密钥",
-            "phrase_cannot_be_empty": "口令词组不能为空",
-            "phrase_must_match": "口令词组必须匹配"
+            "phrase_cannot_be_empty": "口令不能为空",
+            "phrase_must_match": "口令必须匹配",
+            "phrase_strong_enough": "很好！此口令看起来足够强"
         },
         "keyboard": {
+            "dialog_title": "<strong>设置：</strong>键盘",
             "title": "键盘"
         },
+        "labs": {
+            "dialog_title": "<strong>设置：</strong>实验室"
+        },
+        "labs_mjolnir": {
+            "dialog_title": "<strong>设置：</strong>已忽略的用户"
+        },
+        "media_preview": {
+            "hide_avatars": "隐藏房间与邀请者的头像",
+            "hide_media": "始终隐藏",
+            "media_preview_description": "点击隐藏的媒体即可将其恢复显示",
+            "media_preview_label": "在时间线上显示媒体",
+            "show_in_private": "在私有房间",
+            "show_media": "始终显示"
+        },
+        "not_supported": "服务器尚未实现此功能。",
         "notifications": {
-            "enable_audible_notifications_session": "为此会话启用声音通知",
+            "default_setting_description": "此设置将默认应用于你的所有房间。",
+            "default_setting_section": "要接收的通知类型（默认设置）",
+            "desktop_notification_message_preview": "在桌面通知中显示消息预览",
+            "dialog_title": "<strong>设置：</strong>通知",
+            "email_description": "接收错过的通知的邮件摘要",
+            "email_section": "邮件摘要",
+            "email_select": "选择要向其发送摘要的邮件地址。可以在<button>账户</button>中管理邮件地址。",
+            "enable_audible_notifications_session": "为此会话的通知启用声音",
             "enable_desktop_notifications_session": "为此会话启用桌面通知",
-            "enable_email_notifications": "为 %(email)s 启用电子邮件通知",
+            "enable_email_notifications": "为 %(email)s 启用邮件通知",
             "enable_notifications_account": "为此账户启用通知",
-            "enable_notifications_account_detail": "关闭以在你全部设备和会话上停用通知",
-            "enable_notifications_device": "为此设备启用通知",
-            "error_loading": "加载你的通知设置时出错。",
-            "error_permissions_denied": "%(brand)s 没有通知发送权限 - 请检查你的浏览器设置",
-            "error_permissions_missing": "%(brand)s 没有通知发送权限 - 请重试",
-            "error_saving": "保存通知偏好时出错",
-            "error_saving_detail": "保存你的通知偏好时出错。",
+            "enable_notifications_account_detail": "关闭此选项将禁用你所有设备及会话的通知",
+            "enable_notifications_device": "启用此设备的通知",
+            "error_loading": "加载通知设置时出错。",
+            "error_permissions_denied": "%(brand)s 无权向你发送通知，请检查浏览器设置。",
+            "error_permissions_missing": "%(brand)s 未被授予发送通知的权限，请重试。",
+            "error_saving": "保存通知设置时出错",
+            "error_saving_detail": "保存通知偏好时出错。",
             "error_title": "无法启用通知",
-            "messages_containing_keywords": "当消息包含关键词时",
+            "error_updating": "更新通知首选项时出错。请尝试再次切换选项。",
+            "invites": "邀请到房间",
+            "keywords": "在房间中使用特定关键词时显示 <badge/> 标记。",
+            "keywords_prompt": "在此处输入关键词、拼写变体或昵称",
+            "labs_notice_prompt": "<strong>更新：</strong>我们简化了通知设置使选项更易于查找。你曾经选择的某些自定义设置不会在此处显示，但它们仍然处于活动状态。如果继续，你的某些设置可能会更改。<a>了解更多</a>",
+            "mentions_keywords": "提及与关键词",
+            "mentions_keywords_only": "仅提及与关键词",
+            "messages_containing_keywords": "消息包含的关键词",
             "noisy": "响铃",
+            "notices": "由机器人发送的消息",
+            "notify_at_room": "当有人提及使用“@room”时通知",
+            "notify_keyword": "当有人使用关键字时通知",
+            "notify_mention": "当有人提及使用“@displayname”或“%(mxid)s”时通知",
+            "other_section": "你可能感兴趣的其它内容：",
+            "people_mentions_keywords": "人员、提及与关键词",
+            "play_sound_for_description": "此设置将默认应用于你所有设备中的所有房间。",
+            "play_sound_for_section": "播放声音",
             "push_targets": "通知目标",
-            "rule_call": "当受到通话邀请时",
-            "rule_contains_display_name": "当消息包含我的显示名称时",
-            "rule_contains_user_name": "当消息包含我的用户名时",
+            "quick_actions_mark_all_read": "所有消息设为已读",
+            "quick_actions_reset": "重置为默认设置",
+            "quick_actions_section": "快速设置",
+            "room_activity": "新产生的房间活动、升级与状态消息",
+            "rule_call": "通话邀请",
+            "rule_contains_display_name": "包含我的显示名称的消息",
+            "rule_contains_user_name": "包含我的用户名的消息",
             "rule_encrypted": "群聊中的加密消息",
-            "rule_encrypted_room_one_to_one": "私聊中的加密消息",
-            "rule_invite_for_me": "当我被邀请进入房间",
+            "rule_encrypted_room_one_to_one": "一对一聊天中的加密消息",
+            "rule_invite_for_me": "当我受邀到房间",
             "rule_message": "群聊中的消息",
-            "rule_room_one_to_one": "私聊中的消息",
-            "rule_roomnotif": "当消息包含 @room 时",
-            "rule_suppress_notices": "由机器人发出的消息",
-            "rule_tombstone": "当房间升级时",
-            "show_message_desktop_notification": "在桌面通知中显示消息"
+            "rule_room_one_to_one": "一对一聊天中的消息",
+            "rule_roomnotif": "包含 @room 的消息",
+            "rule_suppress_notices": "由机器人发送的消息",
+            "rule_tombstone": "当房间升级时。",
+            "show_message_desktop_notification": "在桌面通知中显示消息内容",
+            "voip": "音频与视频通话"
         },
         "preferences": {
-            "always_show_menu_bar": "总是显示窗口菜单栏",
-            "autocomplete_delay": "自动完成延迟（毫秒）",
+            "Electron.enableContentProtection": "阻止窗口内容被其它应用程序捕获",
+            "Electron.enableHardwareAcceleration": "启用硬件加速（需要重新启动 %(appName)s 以生效）",
+            "always_show_menu_bar": "始终显示窗口菜单栏",
+            "autocomplete_delay": "自动补全延时（毫秒）",
             "code_blocks_heading": "代码块",
-            "compact_modern": "使用更紧凑的“现代”布局",
+            "compact_modern": "使用更简洁的“现代”布局",
             "composer_heading": "编辑器",
+            "default_timezone": "浏览器默认（%(timezone)s）",
+            "dialog_title": "<strong>设置：</strong>偏好",
+            "enable_content_protection": "启用内容保护",
             "enable_hardware_acceleration": "启用硬件加速",
-            "enable_tray_icon": "显示托盘图标并在关闭时最小化窗口至托盘",
+            "enable_tray_icon": "当窗口关闭时最小化其到托盘",
             "keyboard_heading": "键盘快捷键",
-            "keyboard_view_shortcuts_button": "要查看所有的键盘快捷键，<a>点击此处</a>。",
-            "media_heading": "图片、GIF 和视频",
-            "presence_description": "与别人分享你的活动和状态。",
-            "rm_lifetime": "已读标记生存期（毫秒）",
-            "rm_lifetime_offscreen": "已读标记屏幕外生存期（毫秒）",
+            "keyboard_view_shortcuts_button": "要查看所有键盘快捷键请<a>点击此处</a>。",
+            "link_previews_description": "在消息下方显示链接相关信息",
+            "link_previews_heading": "链接预览",
+            "media_heading": "图像、GIF 与视频",
+            "presence_description": "向其他人分享你的活跃情况。",
+            "publish_timezone": "在公开资料上公布时区",
+            "rm_lifetime": "已读标记生存时间（毫秒）",
+            "rm_lifetime_offscreen": "已读标记屏外生存时间（毫秒）",
+            "room_directory_heading": "房间目录",
             "room_list_heading": "房间列表",
+            "show_avatars_pills": "在用户、房间与事件提及中显示头像",
             "show_polls_button": "显示投票按钮",
-            "surround_text": "输入特殊字符时圈出选定的文本",
-            "time_heading": "显示的时间戳"
+            "startup_window_behaviour_label": "启动时的窗口行为",
+            "surround_text": "当键入特殊字符时圈选文字",
+            "time_heading": "显示时间",
+            "user_timezone": "设置时区"
         },
-        "prompt_invite": "在发送邀请之前提示可能无效的 Matrix ID",
-        "replace_plain_emoji": "自动取代纯文本为表情符号",
+        "prompt_invite": "向可能无效的 Matrix ID 发送邀请前提示",
+        "replace_plain_emoji": "自动替换纯文本 Emoji",
         "security": {
-            "bulk_options_accept_all_invites": "接受所有 %(invitedRooms)s 邀请",
-            "bulk_options_reject_all_invites": "拒绝所有 %(invitedRooms)s 的邀请",
+            "analytics_description": "分享匿名数据已帮助我们识别问题。不涉及个人隐私及第三方。",
+            "bulk_options_accept_all_invites": "接受所有 %(invitedRooms)s 的邀请",
+            "bulk_options_reject_all_invites": "拒绝所有 %(invitedRooms)s 邀请",
             "bulk_options_section": "批量选择",
-            "e2ee_default_disabled_warning": "你的服务器管理员默认关闭了私人房间和私聊中的端到端加密。",
-            "enable_message_search": "在加密房间中启用消息搜索",
+            "dehydrated_device_description": "离线设备功能允许你即使未登录任何设备也能接收加密消息。",
+            "dehydrated_device_enabled": "离线设备已启用",
+            "dialog_title": "<strong>设置：</strong>安全与隐私",
+            "e2ee_default_disabled_warning": "私有房间与私聊默认的端到端加密已被服务器管理员禁用。",
+            "enable_message_search": "在加密房间启用消息搜索",
             "encryption_section": "加密",
-            "ignore_users_empty": "你没有设置忽略用户。",
+            "ignore_users_empty": "暂无已忽略的用户",
             "ignore_users_section": "已忽略的用户",
             "key_backup_algorithm": "算法：",
-            "message_search_disable_warning": "如果被禁用，加密房间内的消息不会显示在搜索结果中。",
-            "message_search_disabled": "在本地安全地缓存加密消息以使其出现在搜索结果中。",
+            "message_search_disable_warning": "如果停用此功能，来自加密房间的消息将不会显示在搜索结果中。",
+            "message_search_disabled": "在安全地在本地缓存加密消息以使其出现在搜索结果中。",
             "message_search_enabled": {
-                "one": "使用%(size)s存储%(rooms)s个房间的消息。在本地安全地缓存已加密的消息以使其出现在搜索结果中。",
-                "other": "使用%(size)s存储%(rooms)s个房间的消息。在本地安全地缓存已加密的消息以使其出现在搜索结果中。"
+                "one": "占用 %(size)s 的空间以存储来自 %(rooms)s 个房间的消息，加密消息已安全地在本地缓存，并可以使其显示在搜索结果中。",
+                "other": "占用 %(size)s 的空间以存储来自 %(rooms)s 个房间的消息，加密消息已安全地在本地缓存，并可以使其显示在搜索结果中。"
             },
             "message_search_failed": "消息搜索初始化失败",
             "message_search_indexed_messages": "已索引的消息：",
             "message_search_indexed_rooms": "已索引的房间：",
-            "message_search_indexing": "正在索引：%(currentRoom)s",
-            "message_search_indexing_idle": "现在没有为任何房间索引消息。",
+            "message_search_indexing": "当前正在索引：%(currentRoom)s",
+            "message_search_indexing_idle": "尚未为任何房间索引消息。",
             "message_search_intro": "%(brand)s 正在安全地在本地缓存加密消息以使其出现在搜索结果中：",
-            "message_search_room_progress": "%(totalRooms)s 中之 %(doneRooms)s",
+            "message_search_pending_rooms": "等待索引的房间：%(pendingRooms)s",
+            "message_search_room_progress": "%(doneRooms)s 个房间中的 %(totalRooms)s 个",
             "message_search_section": "消息搜索",
-            "message_search_sleep_time": "消息下载速度。",
+            "message_search_sleep_time": "消息下载速度",
             "message_search_space_used": "已使用空间：",
-            "message_search_unsupported": "%(brand)s缺少安全地在本地缓存加密信息所必须的部件。如果你想实验此功能，请构建一个自定义的<nativeLink>带有搜索部件的</nativeLink>%(brand)s桌面版。",
-            "message_search_unsupported_web": "%(brand)s 在浏览器中运行时不能安全地在本地缓存加密信息。请使用<desktopLink>%(brand)s 桌面版</desktopLink>以使加密信息出现在搜索结果中。",
-            "record_session_details": "记录客户端名称、版本和url以便在会话管理器里更易识别",
-            "send_analytics": "发送统计数据",
-            "strict_encryption": "永不从本会话向未验证的会话发送加密消息"
+            "message_search_unsupported": "%(brand)s 缺少一些在本地安全缓存加密消息所需的组件。如果你想试用此功能，请构建一个自定义的 %(brand)s 桌面，并添加<nativeLink>搜索组件</nativeLink>。",
+            "message_search_unsupported_web": "%(brand)s 在 Web 浏览器中运行时无法安全地在本地缓存加密消息。请使用 <desktopLink>%(brand)s Desktop</desktopLink> 使加密消息出现在搜索结果中。",
+            "record_session_details": "在会话管理器中记录客户端名称、版本及 URL 以更易于识别",
+            "send_analytics": "发送分析数据",
+            "strict_encryption": "仅向已验证用户发送信息"
         },
         "send_read_receipts": "发送已读回执",
         "send_read_receipts_unsupported": "你的服务器不支持禁用发送已读回执。",
-        "send_typing_notifications": "发送正在输入通知",
+        "send_typing_notifications": "发送键入通知",
         "sessions": {
-            "best_security_note": "为获得最佳安全性，请验证您的设备并把您不再信任或使用的设备注销。",
+            "best_security_note": "为了最佳的安全性请验证此会话，并移除任何你不认识或不再使用的会话。",
+            "browser": "浏览器",
             "confirm_sign_out": {
-                "one": "确认登出此设备",
-                "other": "确认登出这些设备"
+                "one": "确认移除此设备",
+                "other": "确认移除这些设备"
             },
             "confirm_sign_out_body": {
-                "one": "单击下面的按钮以确认登出此设备。",
-                "other": "单击下面的按钮以确认登出这些设备。"
+                "one": "点击以下按钮确认移除此设备",
+                "other": "点击以下按钮确认移除这些设备"
             },
             "confirm_sign_out_continue": {
-                "one": "注销设备",
-                "other": "注销设备"
+                "one": "移除设备",
+                "other": "移除设备"
             },
             "confirm_sign_out_sso": {
-                "one": "确认注销此设备需要使用单点登录来证明您的身份。",
-                "other": "确认注销这些设备需要使用单点登录来证明你的身份。"
+                "other": "通过使用单点登录验证你的身份以确认移除这些设备。"
             },
             "current_session": "当前会话",
-            "details_heading": "会话详情",
-            "device_unverified_description": "验证此会话或从之登出，以取得最佳安全性和可靠性。",
-            "device_verified_description": "此会话已准备好进行安全的消息传输。",
+            "desktop_session": "桌面会话",
+            "details_heading": "会话详细信息",
+            "device_unverified_description": "验证或注销此会话以获得最佳安全性与可靠性。",
+            "device_unverified_description_current": "验证当前会话以增强安全消息传递。",
+            "device_verified_description": "此会话的安全消息传递已就绪。",
+            "device_verified_description_current": "当前会话的安全消息传递已就绪。",
+            "dialog_title": "<strong>设置：</strong>会话",
+            "error_pusher_state": "设置推送机制失败",
+            "error_set_name": "设置会话名称失败",
             "filter_all": "全部",
-            "filter_inactive": "不活跃",
-            "filter_inactive_description": "%(inactiveAgeDays)s天或更久不活跃",
+            "filter_inactive": "静默",
+            "filter_inactive_description": "处于静默状态 %(inactiveAgeDays)s 天甚至更长时间",
             "filter_label": "筛选设备",
-            "filter_unverified_description": "尚未准备好安全通信",
-            "filter_verified_description": "准备好进行安全通信了",
-            "inactive_days": "%(inactiveAgeDays)s+天不活跃",
-            "inactive_sessions": "不活跃的会话",
-            "ip": "IP地址",
-            "last_activity": "上次活动",
-            "no_inactive_sessions": "未找到不活跃的会话。",
+            "filter_unverified_description": "安全消息传递未就绪",
+            "filter_verified_description": "安全消息传递已就绪",
+            "hide_details": "隐藏详细信息",
+            "inactive_days": "已持续静默至少 %(inactiveAgeDays)s 天",
+            "inactive_sessions": "静默会话",
+            "inactive_sessions_explainer_1": "静默会话是指你一段时间内未使用，但仍会继续接收加密密钥的会话。",
+            "inactive_sessions_explainer_2": "移除静默会话可提高安全性与性能，并让你更容易识别新的会话是否可疑。",
+            "inactive_sessions_list_description": "考虑移除不再使用的旧会话（%(inactiveAgeDays)s 天或更早）。",
+            "ip": "IP 地址",
+            "last_activity": "最后活跃于",
+            "manage": "管理此会话",
+            "mobile_session": "移动端会话",
+            "n_sessions_selected": {
+                "one": "已选择 %(count)s 个会话",
+                "other": "已选择 %(count)s 个会话"
+            },
+            "no_inactive_sessions": "未找到静默的会话。",
             "no_sessions": "未找到会话。",
             "no_unverified_sessions": "未找到未验证的会话。",
             "no_verified_sessions": "未找到已验证的会话。",
-            "other_sessions_heading": "其他会话",
+            "os": "操作系统",
+            "other_sessions_heading": "其它会话",
+            "push_heading": "推送通知",
+            "push_subheading": "允许此会话接收通知推送",
+            "push_toggle": "切换此会话的推送通知。",
+            "rename_form_caption": "请注意，会话名称也对与你通信的人可见。",
             "rename_form_heading": "重命名会话",
+            "rename_form_learn_more": "正在重命名会话",
+            "rename_form_learn_more_description_1": "你加入的私聊与房间中的其他用户可以查看你的完整会话列表。",
+            "rename_form_learn_more_description_2": "这不仅能使其确信自己确实在与你通话，还能看到你在此处输入的会话名称。",
             "security_recommendations": "安全建议",
-            "security_recommendations_description": "按照以下建议来提高您的帐户安全性。",
+            "security_recommendations_description": "通过以下建议增强账户安全性",
             "session_id": "会话 ID",
+            "show_details": "显示详细信息",
+            "sign_in_with_qr": "关联新设备",
+            "sign_in_with_qr_button": "显示二维码",
+            "sign_in_with_qr_description": "使用二维码登录到另一设备并设置安全消息传递。",
+            "sign_in_with_qr_unsupported": "账户提供者不支持",
+            "sign_out": "移除此会话",
+            "sign_out_all_other_sessions": "移除所有其它会话（%(otherSessionsCount)s）",
             "sign_out_confirm_description": {
-                "other": "你确定要从这 %(count)s 个会话中退出吗？"
+                "one": "你确定要移除 %(count)s 个会话？",
+                "other": "你确定要移除 %(count)s 个会话？"
+            },
+            "sign_out_n_sessions": {
+                "one": "移除 %(count)s 个会话",
+                "other": "移除 %(count)s 个会话"
             },
             "title": "会话",
+            "unknown_session": "未知会话类型",
             "unverified_session": "未验证的会话",
+            "unverified_session_explainer_1": "此会话不支持加密，因此无法验证。",
+            "unverified_session_explainer_2": "使用此会话时，你将无法加入启用加密的房间。",
+            "unverified_session_explainer_3": "为了获得最佳的安全性与隐私性，建议使用支持加密的 Matrix 客户端。",
             "unverified_sessions": "未验证的会话",
-            "unverified_sessions_list_description": "验证你的会话以增强消息传输的安全性，或从那些你不认识或不再使用的会话登出。",
+            "unverified_sessions_explainer_1": "未验证的会话是指已使用你的凭据登录但尚未通过你的数字身份确认的会话。",
+            "unverified_sessions_explainer_2": "你应特别确认自己能够识别这些会话，因为它们可能代表你的账户被未经授权使用。",
+            "unverified_sessions_list_description": "验证此会话以强化安全消息传递，或移除你不认识或不再使用的会话。",
+            "url": "URL",
             "verified_session": "已验证的会话",
             "verified_sessions": "已验证的会话",
-            "verified_sessions_list_description": "为了最佳安全性，请从任何不认识或不再使用的会话登出。",
-            "verify_session": "验证会话"
+            "verified_sessions_explainer_1": "已验证会话是指已经过你的数字身份确认的会话。",
+            "verified_sessions_explainer_2": "这意味着你拥有解锁加密消息所需的所有密钥，并向其他用户确认你信任此会话。",
+            "verified_sessions_list_description": "为了最佳的安全性，请移除任何你不认识或不再使用的会话。",
+            "verify_session": "验证会话",
+            "web_session": "Web 会话"
         },
-        "show_avatar_changes": "显示个人头像变更",
-        "show_breadcrumbs": "在房间列表上方显示最近浏览过的房间的快捷方式",
-        "show_chat_effects": "显示聊天特效（如收到五彩纸屑时的动画效果）",
-        "show_displayname_changes": "显示显示名称更改",
-        "show_join_leave": "显示加入/离开消息（邀请/移除/封禁不受影响)",
+        "show_avatar_changes": "显示个人资料图像更改",
+        "show_breadcrumbs": "在房间列表之上显示最近访问的房间的捷径",
+        "show_chat_effects": "显示聊天特效（例如当收到“五彩纸屑”时）",
+        "show_displayname_changes": "显示用户的“显示名称更改”",
+        "show_join_leave": "显示加入及离开消息（邀请、移除及封禁不受影响）",
+        "show_message_previews": "显示消息预览",
         "show_nsfw_content": "显示 NSFW 内容",
-        "show_read_receipts": "显示其他用户发送的已读回执",
-        "show_redaction_placeholder": "已移除的消息显示为一个占位符",
+        "show_read_receipts": "显示其他用户的已读回执",
+        "show_redaction_placeholder": "为已被移除的消息显示占位符",
         "show_stickers_button": "显示贴纸按钮",
-        "show_typing_notifications": "显示正在输入通知",
+        "show_typing_notifications": "显示用户的键入通知",
+        "showbold": "在房间列表上显示所有活动（用于未读消息的圆点与数字）",
         "sidebar": {
-            "metaspaces_favourites_description": "将所有你最爱的房间和人集中在一处。",
+            "dialog_title": "<strong>设置：</strong>边栏",
+            "metaspaces_favourites_description": "集中所有设为收藏的房间与人员分组在一处。",
             "metaspaces_home_all_rooms": "显示所有房间",
-            "metaspaces_home_all_rooms_description": "在主页展示你所有的房间，即使它们是在一个空间里。",
-            "metaspaces_home_description": "对于了解所有事情的概况来说，主页很有用。",
-            "metaspaces_orphans": "空间之外的房间",
-            "metaspaces_orphans_description": "将所有你那些不属于某个空间的房间集中一处。",
-            "metaspaces_people_description": "将你所有的联系人集中一处。",
+            "metaspaces_home_all_rooms_description": "在主页显示所有房间，即使它们位于不同的空间。",
+            "metaspaces_home_description": "主页有助于概览所有对话。",
+            "metaspaces_orphans": "空间外的房间",
+            "metaspaces_orphans_description": "集中所有不属于任何空间的房间在一处。",
+            "metaspaces_people_description": "集中所有人员在一处。",
             "metaspaces_subsection": "要显示的空间",
-            "title": "侧边栏"
+            "metaspaces_video_rooms": "视频房间与会议",
+            "metaspaces_video_rooms_description": "集中所有私有视频房间与会议在一处。",
+            "metaspaces_video_rooms_description_invite_extension": "在会议中，你可以邀请 Matrix 生态以外的人。",
+            "spaces_explainer": "空间是对房间与人员分组的方式，除了你所在的空间，还可以使用一些预置空间。",
+            "title": "边栏"
         },
-        "use_12_hour_format": "使用 12 小时制显示时间戳 （下午 2:30）",
-        "use_command_enter_send_message": "使用 Command + Enter 发送消息",
-        "use_command_f_search": "使用 Command + F 搜索时间线",
-        "use_control_enter_send_message": "使用Ctrl + Enter发送消息",
-        "use_control_f_search": "使用 Ctrl + F 搜索时间线",
+        "start_automatically": {
+            "disabled": "否",
+            "enabled": "是",
+            "label": "登录时启动 %(brand)s",
+            "minimised": "最小化"
+        },
+        "tac_only_notifications": "仅在消息列中枢显示通知",
+        "use_12_hour_format": "以 12 小时制显示时间戳（例如：下午 2:30）",
+        "use_command_enter_send_message": "按 Command + Enter 发送消息",
+        "use_command_f_search": "允许按 Command + F 搜索时间线",
+        "use_control_enter_send_message": "允许按 Ctrl + Enter 发送消息",
+        "use_control_f_search": "允许按 Ctrl + F 搜索时间线",
         "voip": {
-            "allow_p2p": "允许1:1通话的点对点",
-            "allow_p2p_description": "启用后，对方可能能看到你的IP地址",
+            "allow_p2p": "允许点对点进行一对一通话",
+            "allow_p2p_description": "启用此项后， 第三方可能会看到你的 IP 地址",
             "audio_input_empty": "未检测到麦克风",
             "audio_output": "音频输出",
-            "audio_output_empty": "未检测到可用的音频输出方式",
-            "auto_gain_control": "自动获得控制权",
+            "audio_output_empty": "未检测到音频输出",
+            "auto_gain_control": "自动增益控制",
             "connection_section": "连接",
+            "dialog_title": "<strong>设置：</strong>语音与视频",
             "echo_cancellation": "回声消除",
-            "enable_fallback_ice_server": "允许使用官方的ICE辅助服务器 (%(server)s)",
-            "enable_fallback_ice_server_description": "仅当你的服务器不提供时才会使用。你的IP地址在通话期间会被知晓。",
+            "echo_cancellation_description": "在通话期间移除回声。此设置亦将应用于 Element Call。",
+            "enable_fallback_ice_server": "允许备选的通话辅助服务器",
+            "enable_fallback_ice_server_description": "仅用于你所在的主服务器不提供时。你的 IP 地址会在通话期间被分享。",
             "mirror_local_feed": "镜像本地视频源",
-            "missing_permissions_prompt": "缺少媒体权限，点击下面的按钮以请求权限。",
-            "noise_suppression": "噪音抑制",
+            "missing_permissions_prompt": "缺少媒体权限，点击按钮以请求。",
+            "noise_suppression": "降噪",
+            "noise_suppression_description": "在通话期间降低背景噪音。此设置亦将应用于 Element Call。",
             "request_permissions": "请求媒体权限",
-            "title": "语音和视频",
+            "title": "语音与视频",
             "video_input_empty": "未检测到摄像头",
             "video_section": "视频设置",
-            "voice_agc": "自动调整话筒音量",
+            "voice_agc": "自动调整麦克风音量",
             "voice_processing": "语音处理",
             "voice_section": "语音设置"
         },
@@ -2257,623 +3059,678 @@
         "warning": "<w>警告：</w><description/>"
     },
     "share": {
-        "permalink_message": "选中消息的链接",
-        "permalink_most_recent": "最新消息的链接",
-        "title_message": "分享房间消息",
+        "link_copied": "链接已复制",
+        "permalink_message": "链接可指向所选消息",
+        "permalink_most_recent": "链接到最近消息",
+        "share_call": "会议邀请链接",
+        "share_call_subtitle": "外部用户无需 Matrix 账户即可加入通话的链接：",
+        "title_link": "分享链接",
+        "title_message": "分享房间中的消息",
         "title_room": "分享房间",
         "title_user": "分享用户"
     },
     "slash_command": {
-        "addwidget": "通过URL添加自定义挂件到房间",
-        "addwidget_iframe_missing_src": "iframe无src属性",
-        "addwidget_invalid_protocol": "请提供一个 https:// 或 http:// 挂件URL",
-        "addwidget_missing_url": "请提供一个挂件URL或嵌入代码",
-        "addwidget_no_permissions": "你无法修改此房间的插件。",
-        "ban": "按照 ID 封禁用户",
-        "category_actions": "动作",
+        "addwidget": "添加自定义小部件",
+        "addwidget_iframe_missing_src": "“iframe”没有“src”属性",
+        "addwidget_invalid_protocol": "请提供“http://”或“https://”开头的小部件 URL",
+        "addwidget_missing_url": "请提供小部件 URL 或其嵌入式代码",
+        "addwidget_no_permissions": "你在此房间无法修改小部件。",
+        "ban": "使用指定 ID 封禁用户",
+        "category_actions": "操作",
         "category_admin": "管理员",
         "category_advanced": "高级",
-        "category_effects": "效果",
+        "category_effects": "特效",
         "category_messages": "消息",
-        "category_other": "其他",
-        "command_error": "命令错误",
-        "converttodm": "将此房间会话转化为私聊会话",
-        "converttoroom": "将此私聊会话转化为房间会话",
+        "category_other": "其它",
+        "command_error": "指令出错",
+        "converttodm": "转换房间为私聊",
+        "converttoroom": "转换私聊到房间",
         "could_not_find_room": "无法找到房间",
-        "deop": "按照 ID 取消特定用户的管理员权限",
-        "devtools": "打开开发者工具窗口",
-        "discardsession": "强制丢弃加密房间中的当前出站群组会话",
-        "error_invalid_rendering_type": "命令错误：无法找到渲染类型（%(renderingType)s）",
-        "error_invalid_runfn": "命令错误：无法处理斜杠命令。",
-        "help": "显示指令清单与其描述和用法",
+        "deop": "通过指定的 ID 降权用户",
+        "devtools": "打开开发者工具对话框",
+        "discardsession": "强制丢弃加密房间中当前的出站组会话",
+        "error_invalid_rendering_type": "指令错误：无法找到修饰类型（%(renderingType)s）",
+        "error_invalid_room": "指令执行失败： 无法找到房间（%(roomId)s）",
+        "error_invalid_runfn": "指令错误：无法处理斜杠指令。",
+        "error_invalid_user_in_room": "在房间中无法找到用户",
+        "help": "将指令与其对应的用法、说明显示为一个列表",
         "help_dialog_title": "命令帮助",
-        "holdcall": "挂起当前房间的通话",
-        "html": "以 html 格式发送消息，不将其作为 markdown 处理",
-        "ignore": "忽略用户，隐藏他们发送的消息",
-        "ignore_dialog_description": "你忽略了 %(userId)s",
+        "holdcall": "将当前房间中的通话置于保持状态",
+        "html": "作为 HTML 发送消息，而不是将其解释为 Markdown",
+        "ignore": "忽略用户以为你隐藏其消息",
+        "ignore_dialog_description": "你正在忽略 %(userId)s",
         "ignore_dialog_title": "已忽略的用户",
-        "invite": "邀请指定ID的用户到当前房间",
-        "invite_3pid_needs_is_error": "使用身份服务器以通过电子邮件邀请其他用户。在设置中进行管理。",
+        "invite": "通过指定的 ID 邀请用户到当前房间",
+        "invite_3pid_needs_is_error": "使用身份服务器以通过邮件发出邀请。在设置中进行管理。",
         "invite_3pid_use_default_is_title": "使用身份服务器",
-        "invite_3pid_use_default_is_title_description": "使用身份服务器以通过电子邮件邀请其他用户。单击继续以使用默认身份服务器（%(defaultIdentityServerName)s），或在设置中进行管理。",
-        "invite_failed": "用户（%(user)s）最终未被邀请到%(roomId)s，但邀请工具没给出错误",
-        "join": "使用指定地址加入房间",
-        "jumptodate": "跳转到时间线中的给定日期",
-        "jumptodate_invalid_input": "我们无法理解给定日期 (%(inputDate)s)。尝试使用如下格式 YYYY-MM-DD。",
-        "lenny": "在纯文本消息开头添加 ( ͡° ͜ʖ ͡°)",
+        "invite_3pid_use_default_is_title_description": "使用身份服务器通过邮件地址邀请。点击“继续”以使用默认身份服务器 (%(defaultIdentityServerName)s)，或在“设置”中管理。",
+        "invite_failed": "用户（%(user)s）最终未被邀请加入 %(roomId)s，但邀请程序未显示任何错误。",
+        "join": "通过指定的房间地址加入",
+        "jumptodate": "在时间线中跳转到指定日期",
+        "jumptodate_invalid_input": "我们无法理解指定的日期 (%(inputDate)s)。尝试使用 YYYY-MM-DD 格式。",
+        "lenny": "附加“( ͡° ͜ʖ ͡°)”到纯文本消息",
+        "manual_device_verification_confirm_description": "这将允许其它设备以你的身份发送和接收消息。如果有人告诉你在此处粘贴内容，你很可能被诈骗！你确定要验证此设备？",
+        "manual_device_verification_confirm_title": "警告：手动设备验证",
         "me": "显示操作",
-        "msg": "向指定用户发消息",
-        "myavatar": "在所有房间中更新您的头像",
-        "myroomavatar": "仅在当前房间中更改您的头像",
-        "myroomnick": "仅更改当前房间中的显示昵称",
-        "nick": "修改显示昵称",
-        "no_active_call": "此房间未有活跃中的通话",
-        "op": "定义一名用户的权力级别",
+        "msg": "向指定用户发送信息",
+        "myavatar": "更改个人资料图像（应用于所有房间）",
+        "myroomavatar": "仅更改我在当前房间内的个人资料图像",
+        "myroomnick": "仅更改我在当前房间内的显示名称",
+        "nick": "更改显示名称",
+        "no_active_call": "此房间没有活跃的通话",
+        "op": "定义用户的权力值",
         "part_unknown_alias": "无法识别的房间地址：%(roomAlias)s",
-        "plain": "以纯文本形式发送消息，不将其作为 markdown 处理",
-        "query": "与指定用户发起聊天",
-        "query_not_found_phone_number": "未能找到与此手机号码关联的 Matrix ID",
-        "rageshake": "发送带日志的错误报告",
-        "rainbow": "此消息以彩虹色进行渲染",
-        "rainbowme": "以彩虹色发送给定表情符号",
-        "remove": "将给定 ID 的用户移除此房间",
-        "roomavatar": "更改当前房间头像",
+        "plain": "作为纯文本发送消息，而不是将其解释为 Markdown",
+        "query": "打开与指定用户的聊天",
+        "query_not_found_phone_number": "无法找到与此电话号码对应的 Matrix ID",
+        "rageshake": "通过日志发送 Bug 报告",
+        "rainbow": "发送一个渲染为彩虹色的消息",
+        "rainbowme": "发送一个带有我的显示名称与渲染为彩虹色的消息",
+        "remove": "通过指定的 ID 从当前房间移除用户",
+        "roomavatar": "更改当前房间的头像",
         "roomname": "设置房间名称",
         "server_error": "服务器错误",
-        "server_error_detail": "服务器不可用、超载或其他东西出错了。",
-        "shrug": "在纯文本消息开头添加 ¯\\_(ツ)_/¯",
-        "spoiler": "此消息包含剧透",
-        "tableflip": "在纯文本消息开头添加 (╯°□°）╯︵ ┻━┻",
-        "topic": "获取或设置房间话题",
-        "topic_none": "此房间没有话题。",
-        "topic_room_error": "获取房间话题失败：无法找到房间（%(roomId)s）",
-        "unban": "按照 ID 解封用户",
-        "unflip": "在纯文本消息开头添加 ┬──┬ ノ( ゜-゜ノ)",
-        "unholdcall": "解除挂起当前房间的通话",
-        "unignore": "解除忽略用户，显示他们的消息",
-        "unignore_dialog_description": "你不再忽视 %(userId)s",
-        "unignore_dialog_title": "未忽略的用户",
-        "unknown_command": "未知命令",
+        "server_error_detail": "服务器不可用、超载或出现其它问题。",
+        "shrug": "附加“ˉ\\_(ツ)_/ˉ”到纯文本消息",
+        "spoiler": "作为剧透发送指定消息",
+        "tableflip": "附加“(╯°□°）╯︵ ┻━┻”到纯文本消息",
+        "topic": "获取或设置房间主题",
+        "topic_none": "此房间没有主题",
+        "topic_room_error": "获取房间主题失败：无法找到房间（%(roomId)s）",
+        "unban": "使用指定的 ID 解封用户",
+        "unflip": "附加“┬──┬ ノ( ゜-゜ノ)”到纯文本消息",
+        "unholdcall": "取消当前房间中的通话保持状态",
+        "unignore": "解除忽略用户，向你显示其未来的消息",
+        "unignore_dialog_description": "你不再忽略 %(userId)s",
+        "unignore_dialog_title": "已解除忽略的用户",
+        "unknown_command": "未知指令",
         "unknown_command_button": "作为消息发送",
-        "unknown_command_detail": "未识别的命令：%(commandText)s",
-        "unknown_command_help": "你可以使用 <code>/help</code> 列出可用命令。你是否要将其作为消息发送？",
-        "unknown_command_hint": "提示：以 <code>//</code> 开始你的消息来使其以一个斜杠开始。",
+        "unknown_command_detail": "无法识别的指令：%(commandText)s",
+        "unknown_command_help": "你可以使用 <code>/help</code> 列出可用的指令。是否将此文本作为消息发送？",
+        "unknown_command_hint": "提示：请以 <code>/</code> 开头。",
         "upgraderoom": "将房间升级到新版本",
-        "upgraderoom_permission_error": "你没有权限使用此命令。",
+        "upgraderoom_permission_error": "你无权使用此命令。",
         "usage": "用法",
-        "verify": "验证用户、会话和公钥元组",
-        "whois": "显示关于用户的信息"
+        "verify": "手动验证一个你拥有的设备",
+        "view": "通过指定的地址查看房间",
+        "whois": "显示用户信息"
     },
+    "sliding_sync_legacy_no_longer_supported": "旧版滑动同步不再受支持：请重新登录以启用新的滑动同步标志",
     "space": {
         "add_existing_room_space": {
-            "create": "想要添加一个新的房间吗？",
+            "create": "想要添加新房间？",
             "create_prompt": "创建新房间",
             "dm_heading": "私聊",
-            "error_heading": "并非所有选中的都被添加",
+            "error_heading": "并非所有选定项都已添加",
             "progress_text": {
-                "one": "正在新增房间……",
-                "other": "正在新增房间……（%(count)s 中的第 %(progress)s 个）"
+                "one": "正在添加房间…",
+                "other": "正在添加房间…（%(count)s 中的 %(progress)s 个）"
             },
             "space_dropdown_label": "空间选择",
             "space_dropdown_title": "添加现有房间",
-            "subspace_moved_note": "新增空间已移动。"
+            "subspace_moved_note": "添加的空间已移动。"
         },
         "add_existing_subspace": {
             "create_button": "创建新空间",
-            "create_prompt": "想要添加一个新空间？",
+            "create_prompt": "添加一个新空间？",
             "filter_placeholder": "搜索空间",
-            "space_dropdown_title": "增加现有的空间"
+            "space_dropdown_title": "添加现有空间"
         },
         "context_menu": {
-            "devtools_open_timeline": "查看房间时间线（开发工具）",
-            "explore": "探索房间",
-            "home": "空间首页",
-            "manage_and_explore": "管理并探索房间",
+            "devtools_open_timeline": "查看房间时间线（开发者工具）",
+            "explore": "浏览房间",
+            "home": "空间主页",
+            "manage_and_explore": "房间浏览与管理",
             "options": "空间选项"
         },
-        "failed_load_rooms": "加载房间列表失败。",
-        "failed_remove_rooms": "无法移除某些房间。请稍后再试",
-        "incompatible_server_hierarchy": "你的服务器不支持显示空间层次结构。",
-        "invite": "邀请人们",
-        "invite_description": "使用邮箱或者用户名邀请",
+        "failed_load_rooms": "载入房间列表失败。",
+        "failed_remove_rooms": "某些房间移除失败。请稍后再试。",
+        "incompatible_server_hierarchy": "你的服务器不支持显示空间层级。",
+        "invite": "邀请人员",
+        "invite_description": "通过电话号码或邮件地址邀请",
         "invite_link": "分享邀请链接",
-        "joining_space": "加入中",
+        "joining_space": "正在加入",
         "landing_welcome": "欢迎来到 <name/>",
         "leave_dialog_action": "离开空间",
         "leave_dialog_description": "你即将离开 <spaceName/>。",
-        "leave_dialog_only_admin_room_warning": "你是某些要离开的房间或空间的唯一管理员。离开将使它们没有任何管理员。",
-        "leave_dialog_only_admin_warning": "你是此空间的唯一管理员。离开它将意味着没有人可以控制它。",
+        "leave_dialog_only_admin_room_warning": "对于你想要离开的某些房间或空间，你是其唯一的管理员。离开这些房间或空间将使其失去任何管理角色。",
+        "leave_dialog_only_admin_warning": "你是此空间的唯一管理员。离开后，任何人都无法控制它。",
         "leave_dialog_option_all": "离开所有房间",
-        "leave_dialog_option_intro": "你想俩开此空间内的房间吗？",
-        "leave_dialog_option_none": "不离开任何房间",
-        "leave_dialog_option_specific": "离开一些房间",
-        "leave_dialog_public_rejoin_warning": "除非你被重新邀请，否则你将无法重新加入。",
+        "leave_dialog_option_intro": "你确定要离开此空间中的房间？",
+        "leave_dialog_option_none": "不要离开任何房间",
+        "leave_dialog_option_specific": "离开房间",
+        "leave_dialog_public_rejoin_warning": "除非重新被邀请，否则你将无法重新加入。",
         "leave_dialog_title": "离开 %(spaceName)s",
-        "mark_suggested": "标记为建议",
-        "no_search_result_hint": "你可能要尝试其他搜索或检查是否有错别字。",
+        "mark_suggested": "设为建议",
+        "no_search_result_hint": "你可能需要尝试不同的搜索或检查错别字。",
         "preferences": {
             "sections_section": "要显示的部分",
-            "show_people_in_space": "将您与该空间的成员的聊天进行分组。关闭这个后你将无法在 %(spaceName)s 内看到这些聊天。"
+            "show_people_in_space": "这会将你的聊天与此空间的成员分组。关闭此项将在 %(spaceName)s 视图中隐藏这些聊天。"
         },
         "room_filter_placeholder": "搜索房间",
         "search_children": "搜索 %(spaceName)s",
-        "search_placeholder": "搜索名称和描述",
-        "select_room_below": "首先选择一个房间",
-        "share_public": "分享你的公共空间",
+        "search_placeholder": "搜索名称与描述",
+        "select_room_below": "首选以下房间",
+        "share_public": "分享公共空间",
         "suggested": "建议",
-        "suggested_tooltip": "此房间很适合加入",
+        "suggested_tooltip": "建议加入此房间",
         "title_when_query_available": "结果",
         "title_when_query_unavailable": "房间与空间",
-        "unmark_suggested": "标记为不建议",
+        "unmark_suggested": "设为不建议",
         "user_lacks_permission": "你没有权限"
     },
     "space_settings": {
-        "title": "设置 - %(spaceName)s"
+        "title": "设置：%(spaceName)s"
     },
     "spaces": {
-        "error_no_permission_add_room": "你没有权限添加房间至此空间",
-        "error_no_permission_add_space": "你没有权限向此空间添加空间",
-        "error_no_permission_create_room": "你没有权限在此空间内创建新的房间",
-        "error_no_permission_invite": "你无权邀请他人加入此空间"
+        "error_no_permission_add_room": "你无权在此空间添加房间",
+        "error_no_permission_add_space": "你无权在此空间中添加空间",
+        "error_no_permission_create_room": "你无权在此空间创建新房间",
+        "error_no_permission_invite": "你无权邀请人员访问此空间"
     },
     "spotlight": {
         "public_rooms": {
-            "network_dropdown_add_dialog_description": "输入你想探索的新服务器的服务器名。",
-            "network_dropdown_add_dialog_placeholder": "服务器名",
-            "network_dropdown_add_dialog_title": "添加新服务器",
-            "network_dropdown_add_server_option": "添加新的服务器…",
-            "network_dropdown_available_invalid": "找不到此服务器或其房间列表",
+            "network_dropdown_add_dialog_description": "输入要浏览的新服务器名称。",
+            "network_dropdown_add_dialog_placeholder": "服务器名称",
+            "network_dropdown_add_dialog_title": "添加新服务器…",
+            "network_dropdown_add_server_option": "添加新服务器…",
+            "network_dropdown_available_invalid": "无法找到此服务器或其房间列表",
             "network_dropdown_available_invalid_forbidden": "你不被允许查看此服务器的房间列表",
-            "network_dropdown_available_valid": "看着不错",
+            "network_dropdown_available_valid": "良好",
             "network_dropdown_remove_server_adornment": "移除服务器“%(roomServer)s”",
-            "network_dropdown_required_invalid": "请输入服务器名",
-            "network_dropdown_selected_label": "显示：Matrix房间",
-            "network_dropdown_selected_label_instance": "显示：%(instance)s房间（%(server)s）",
+            "network_dropdown_required_invalid": "输入服务器名称",
+            "network_dropdown_selected_label": "显示：Matrix 房间",
+            "network_dropdown_selected_label_instance": "显示 %(instance)s 房间（%(server)s）",
             "network_dropdown_your_server_description": "你的服务器"
         }
     },
     "spotlight_dialog": {
-        "cant_find_person_helpful_hint": "若你无法看到你正在查找的人，给他们发送你的邀请链接。",
-        "cant_find_room_helpful_hint": "若你找不到要找的房间，请请求邀请或创建新房间。",
+        "cant_find_person_helpful_hint": "如果你看不到要找的人员，请复制并向其发送以下邀请链接。",
+        "cant_find_room_helpful_hint": "如果你找不到所需的房间，请向其申请加入或创建新房间。",
         "copy_link_text": "复制邀请链接",
         "count_of_members": {
-            "one": "%(count)s个成员",
-            "other": "%(count)s个成员"
+            "one": "%(count)s 位成员",
+            "other": "%(count)s 个成员"
         },
         "create_new_room_button": "创建新房间",
-        "failed_querying_public_rooms": "查询公开房间失败",
-        "group_chat_section_title": "其他选项",
-        "heading_with_query": "使用 \"%(query)s\" 来搜索",
-        "heading_without_query": "搜索",
-        "join_button_text": "加入%(roomAddress)s",
-        "keyboard_scroll_hint": "用<arrows/>来滚动",
-        "other_rooms_in_space": "%(spaceName)s 中的其他房间",
+        "failed_querying_public_rooms": "公共房间查询失败",
+        "failed_querying_public_spaces": "公共空间查询失败",
+        "group_chat_section_title": "其它选项",
+        "heading_with_query": "使用“%(query)s”搜索",
+        "heading_without_query": "搜索类型",
+        "join_button_text": "加入 %(roomAddress)s",
+        "keyboard_scroll_hint": "使用 <arrows/> 滚动",
+        "messages_label": "消息",
+        "other_rooms_in_space": "%(spaceName)s 中的其它房间",
         "public_rooms_label": "公共房间",
         "public_spaces_label": "公共空间",
-        "recent_searches_section_title": "最近的搜索",
+        "recent_searches_section_title": "最近搜索",
         "recently_viewed_section_title": "最近查看",
-        "remove_filter": "移除%(filter)s搜索过滤条件",
-        "result_may_be_hidden_privacy_warning": "为保护隐私，一些结果可能被隐藏",
-        "result_may_be_hidden_warning": "一些结果可能被隐藏",
-        "search_dialog": "搜索对话",
+        "remove_filter": "移除筛选 %(filter)s 的搜索",
+        "result_may_be_hidden_privacy_warning": "由于隐私原因，某些结果可能被隐藏。",
+        "result_may_be_hidden_warning": "某些结果可能被隐藏",
+        "search_dialog": "搜索对话框",
         "spaces_title": "你所在的空间",
-        "start_group_chat_button": "发起群聊天"
+        "start_group_chat_button": "开始群聊"
     },
     "stickers": {
-        "empty": "你目前未启用任何贴纸包",
+        "empty": "你当前未启用任何贴纸包",
         "empty_add_prompt": "立即添加"
     },
     "terms": {
         "column_document": "文档",
         "column_service": "服务",
-        "column_summary": "总结",
-        "identity_server_no_terms_description_1": "此操作需要访问默认的身份服务器 <server /> 以验证邮箱或电话号码，但此服务器无任何服务条款。",
-        "identity_server_no_terms_description_2": "只有在你信任服务器所有者后才能继续。",
-        "identity_server_no_terms_title": "身份服务器无服务条款",
+        "column_summary": "摘要",
+        "identity_server_no_terms_description_1": "此操作需要访问默认身份服务器 <server /> 以验证邮件地址或电话号码，但该服务器没有任何服务条款。",
+        "identity_server_no_terms_description_2": "只有在你信任服务器所有者的情况下才能继续。",
+        "identity_server_no_terms_title": "身份服务器暂无服务条款",
         "inline_intro_text": "接受 <policyLink /> 以继续：",
-        "integration_manager": "使用机器人、桥接、挂件和贴纸包",
-        "intro": "要继续，你需要接受此服务协议。",
-        "summary_identity_server_1": "通过电话或邮箱寻找别人",
-        "summary_identity_server_2": "通过电话或邮箱被寻找",
+        "integration_manager": "使用机器人、桥接器、小部件与贴纸包",
+        "intro": "若要继续，你必须接受此服务的条款。",
+        "summary_identity_server_1": "通过电话号码或邮件地址查找",
+        "summary_identity_server_2": "通过电话号码或邮件地址查找",
         "tac_button": "浏览条款与要求",
-        "tac_description": "若要继续使用家服务器 %(homeserverDomain)s，你必须浏览并同意我们的条款与要求。",
-        "tac_title": "条款与要求",
-        "tos": "服务协议"
+        "tac_description": "要继续使用主服务器 %(homeserverDomain)s，你必须查看并同意我们的条款和条件。",
+        "tac_title": "条款与条件",
+        "tos": "服务条款"
     },
     "theme": {
-        "light_high_contrast": "浅色高对比",
-        "match_system": "匹配系统"
+        "light_high_contrast": "高对比度浅色",
+        "match_system": "跟随系统"
     },
-    "thread_view_back_action_label": "返回消息列",
+    "thread_view_back_action_label": "回到消息列",
     "threads": {
         "all_threads": "所有消息列",
         "all_threads_description": "显示当前房间的所有消息列",
         "count_of_reply": {
-            "one": "%(count)s 条回复",
-            "other": "%(count)s 条回复"
+            "one": "%(count)s 个回复",
+            "other": "%(count)s 个回复"
         },
+        "empty_description": "将鼠标指针悬停在某个消息上并点击“%(replyInThread)s”。",
+        "empty_title": "消息列有助于持续并跟进题内的对话。",
+        "mark_all_read": "全部设为已读",
         "my_threads": "我的消息列",
-        "my_threads_description": "显示您参与的所有消息列",
+        "my_threads_description": "显示你参与的所有消息列",
         "open_thread": "打开消息列",
         "show_thread_filter": "显示："
     },
+    "threads_activity_centre": {
+        "header": "消息列活动",
+        "no_rooms_with_threads_notifs": "暂无包含消息列通知的房间。",
+        "no_rooms_with_unread_threads": "暂无包含未读消息列的房间。"
+    },
     "time": {
         "date_at_time": "%(date)s 的 %(time)s",
-        "hours_minutes_seconds_left": "剩余%(hours)s小时%(minutes)s分钟%(seconds)s秒",
-        "left": "剩余%(timeRemaining)s",
-        "minutes_seconds_left": "剩余%(minutes)s分钟%(seconds)s秒",
-        "seconds_left": "剩余 %(seconds)s 秒",
+        "hours_minutes_seconds_left": "已离开 %(hours)s 小时 %(minutes)s 分钟 %(seconds)s 秒",
+        "left": "剩余 %(timeRemaining)s",
+        "minutes_seconds_left": "已离开 %(minutes)s 分钟 %(seconds)ss 秒",
+        "seconds_left": "已离开 %(seconds)ss 秒",
         "short_days": "%(value)s 天",
-        "short_days_hours_minutes_seconds": "%(days)s天%(hours)s小时%(minutes)s分钟%(seconds)s秒",
+        "short_days_hours_minutes_seconds": "%(days)s 天 %(hours)s 小时 %(minutes)s 分钟 %(seconds)s 秒",
         "short_hours": "%(value)s 小时",
-        "short_hours_minutes_seconds": "%(hours)s小时%(minutes)s分钟%(seconds)s秒",
+        "short_hours_minutes_seconds": "%(hours)s 小时 %(minutes)s 分钟 %(seconds)ss 秒",
         "short_minutes": "%(value)s 分钟",
-        "short_minutes_seconds": "%(minutes)s分钟%(seconds)s秒",
+        "short_minutes_seconds": "%(minutes)s 分钟 %(seconds)s 秒",
         "short_seconds": "%(value)s 秒"
     },
     "timeline": {
         "context_menu": {
             "collapse_reply_thread": "折叠回复消息列",
-            "external_url": "源网址",
+            "external_url": "源 URL",
             "open_in_osm": "在 OpenStreetMap 中打开",
             "report": "举报",
-            "resent_unsent_reactions": "重新发送%(unsentCount)s个反应",
+            "resent_unsent_reactions": "重新发送 %(unsentCount)s 的反应",
             "show_url_preview": "显示预览",
             "view_related_event": "查看相关事件",
             "view_source": "查看源代码"
         },
-        "creation_summary_dm": "%(creator)s 创建了此私聊。",
+        "creation_summary_dm": "%(creator)s 创建了私聊。",
         "creation_summary_room": "%(creator)s 创建并配置了此房间。",
-        "download_action_downloading": "下载中",
-        "edits": {
-            "tooltip_label": "编辑于 %(date)s。点击以查看编辑历史。",
-            "tooltip_sub": "点击查看编辑历史",
-            "tooltip_title": "编辑于 %(date)s"
+        "decryption_failure": {
+            "sender_identity_previously_verified": "发件人已验证的身份已被重置",
+            "unable_to_decrypt": "无法解密消息"
         },
-        "error_no_renderer": "无法显示此事件",
+        "disambiguated_profile": "%(displayName)s（%(matrixId)s）",
+        "download_action_downloading": "下载中",
+        "download_failed": "下载失败",
+        "download_failed_description": "下载此文件时出错",
+        "e2e_state": "端到端加密状态",
+        "edits": {
+            "tooltip_label": "编辑于 %(date)s，点击查看编辑历史。",
+            "tooltip_sub": "点击查看编辑历史",
+            "tooltip_title": "最后编辑于 %(date)s"
+        },
+        "error_no_renderer": "此事件无法显示",
         "error_rendering_message": "无法加载此消息",
-        "historical_messages_unavailable": "你不能查看更早的消息",
+        "historical_messages_unavailable": "你无法查看之前的消息",
+        "in_room_name": "位于 <strong>%(room)s</strong>",
         "io.element.widgets.layout": "%(senderName)s 更新了房间布局",
+        "late_event_separator": "原定发送于 %(dateTime)s",
         "load_error": {
-            "no_permission": "尝试了加载此房间时间线上的特定点，但你没有查看相关消息的权限。",
-            "title": "加载时间线位置失败",
-            "unable_to_find": "尝试加载此房间的时间线的特定时间点，但是无法找到。"
+            "no_permission": "尝试加载此房间时间线中的特定时间点，但你无权查看相关消息。",
+            "title": "时间线位置加载失败",
+            "unable_to_find": "尝试加载此房间时间线中的特定时间点，但无法找到。"
         },
         "m.audio": {
             "error_downloading_audio": "下载音频时出错",
             "error_processing_audio": "处理音频消息时出错",
-            "error_processing_voice_message": "处理语音消息时发生错误"
+            "error_processing_voice_message": "处理语音消息时出错"
         },
         "m.beacon_info": {
             "view_live_location": "查看实时位置"
         },
         "m.call": {
-            "video_call_started": "%(roomName)s里的视频通话开始了。",
-            "video_call_started_unsupported": "%(roomName)s里的视频通话开始了。（此浏览器不支持）"
+            "video_call_ended": "视频通话已结束",
+            "video_call_started": "在 %(roomName)s 开始视频通话。",
+            "video_call_started_text": "%(name)s 已开始视频通话",
+            "video_call_started_unsupported": "已在 %(roomName)s 开始视频通话。(此浏览器不支持）"
         },
         "m.call.hangup": {
-            "dm": "通话结束"
+            "dm": "通话已结束"
         },
         "m.call.invite": {
+            "answered_elsewhere": "已在别处接听",
             "call_back_prompt": "回拨",
-            "declined": "拒绝通话",
+            "declined": "来电被拒接",
             "failed_connect_media": "无法连接媒体",
             "failed_connection": "连接失败",
-            "failed_opponent_media": "他们的设备无法启动摄像头或麦克风",
+            "failed_opponent_media": "其设备无法开启摄像头或麦克风",
             "missed_call": "未接来电",
-            "no_answer": "无响应",
-            "unknown_error": "出现未知错误",
+            "no_answer": "未接听",
+            "unknown_error": "发生未知错误",
             "unknown_failure": "未知错误：%(reason)s",
             "unknown_state": "通话处于未知状态！",
-            "video_call": "%(senderName)s 发起了视频通话。",
-            "video_call_unsupported": "%(senderName)s 发起了视频通话。（此浏览器不支持）",
-            "voice_call": "%(senderName)s 发起了语音通话。",
-            "voice_call_unsupported": "%(senderName)s 发起了语音通话。（此浏览器不支持）"
+            "video_call": "来自 %(senderName)s 的视频通话。",
+            "video_call_unsupported": "%(senderName)s 已开始视频通话。(此浏览器不支持）",
+            "voice_call": "来自 %(senderName)s 的语音通话。",
+            "voice_call_unsupported": "%(senderName)s 已开始语音通话。(此浏览器不支持）"
         },
         "m.file": {
             "error_decrypting": "解密附件时出错"
         },
         "m.image": {
+            "error": "由于错误无法显示图片",
             "error_decrypting": "解密图像时出错",
-            "sent": "%(senderDisplayName)s 发送了一张图片。",
+            "error_downloading": "下载图像时出错",
+            "sent": "%(senderDisplayName)s 发送了一个图像。",
             "show_image": "显示图像"
         },
         "m.key.verification.request": {
             "user_wants_to_verify": "%(name)s 想要验证",
-            "you_started": "你发送了一个验证请求"
+            "you_started": "你发送了验证请求"
         },
         "m.location": {
-            "full": "%(senderName)s 分享了他们的位置",
-            "location": "分享了位置： ",
-            "self_location": "分享了他们的位置： "
+            "full": "%(senderName)s 分享了其位置",
+            "location": "分享位置：",
+            "self_location": "已分享其位置："
         },
         "m.poll": {
             "count_of_votes": {
-                "one": "%(count)s 票",
-                "other": "%(count)s 票"
+                "one": "%(count)s 个投票",
+                "other": "%(count)s 个投票"
             }
         },
         "m.poll.end": {
             "sender_ended": "%(senderName)s 结束了投票"
         },
-        "m.poll.start": "%(senderName)s 发起了投票：%(pollQuestion)s",
+        "m.poll.start": "%(senderName)s 发起投票： %(pollQuestion)s",
         "m.room.avatar": {
-            "changed": "%(senderDisplayName)s 更改了房间头像。",
-            "changed_img": "%(senderDisplayName)s 将房间的头像更改为 <img/>",
-            "lightbox_title": "%(senderDisplayName)s 修改了 %(roomName)s 的头像",
-            "removed": "%(senderDisplayName)s 移除了房间头像。"
+            "changed": "%(senderDisplayName)s 已更改房间头像。",
+            "changed_img": "%(senderDisplayName)s 已将房间头像更改为 <img/>",
+            "lightbox_title": "%(senderDisplayName)s 已更改房间 %(roomName)s 中的头像",
+            "removed": "%(senderDisplayName)s 已移除房间头像。"
         },
         "m.room.canonical_alias": {
             "alt_added": {
-                "other": "%(senderName)s 为此房间添加备用地址 %(addresses)s。",
-                "one": "%(senderName)s 为此房间添加了备用地址 %(addresses)s。"
+                "one": "%(senderName)s 为此房间添加了备选地址 %(address)s。",
+                "other": "%(senderName)s 已为此房间添加了备用地址 %(addresses)s。"
             },
             "alt_removed": {
-                "other": "%(senderName)s 为此房间移除了备用地址 %(addresses)s。",
-                "one": "%(senderName)s 为此房间移除了备用地址 %(addresses)s。"
+                "one": "%(senderName)s 已移除此房间的备选地址 %(address)s。",
+                "other": "%(senderName)s 已移除此房间的备选地址 %(addresses)s。"
             },
             "changed": "%(senderName)s 更改了此房间的地址。",
-            "changed_alternative": "%(senderName)s 更改了此房间的备用地址。",
-            "changed_main_and_alternative": "%(senderName)s 更改了此房间的主要地址与备用地址。",
-            "removed": "%(senderName)s 移除了此房间的主要地址。",
-            "set": "%(senderName)s 将此房间的主要地址设为了 %(address)s。"
+            "changed_alternative": "%(senderName)s 更改了此房间的备选地址。",
+            "changed_main_and_alternative": "%(senderName)s 已更改此房间的主要地址与备用地址。",
+            "removed": "%(senderName)s 已移除此房间的主地址。",
+            "set": "%(senderName)s 已将此房间的主地址设置为 %(address)s。"
         },
         "m.room.create": {
-            "continuation": "此房间是另一个对话的延续之处。",
-            "see_older_messages": "点击这里以查看更早的消息。"
+            "continuation": "此房间是另一个对话的延续。",
+            "see_older_messages": "点击此处查看更旧的消息。",
+            "unknown_predecessor": "找不到此房间的旧版本（房间 ID：%(roomId)s），并且我们未提供“via_servers”来查找它。",
+            "unknown_predecessor_guess_server": "无法找到此房间（房间 ID：%(roomId)s）的旧版本，并且尚未提供“via_servers”用于查找。根据房间 ID 猜测服务器或许可行。要尝试请点击此链接："
         },
         "m.room.guest_access": {
-            "can_join": "%(senderDisplayName)s 将此房间改为允许游客加入。",
-            "forbidden": "%(senderDisplayName)s 将此房间改为游客禁入。",
-            "unknown": "%(senderDisplayName)s 将此房间的游客加入规则改为 %(rule)s"
+            "can_join": "%(senderDisplayName)s 配置此房间为允许访客加入。",
+            "forbidden": "%(senderDisplayName)s 已阻止访客加入房间。",
+            "unknown": "%(senderDisplayName)s 已将访客的访问权限更改为 %(rule)s"
         },
         "m.room.history_visibility": {
-            "invited": "%(senderName)s使未来的房间历史对所有房间成员从他们被邀请开始可见。",
-            "joined": "%(senderName)s使未来的房间历史对所有房间成员从他们加入开始可见。",
-            "shared": "%(senderName)s使未来的房间历史对所有房间成员可见。",
-            "unknown": "%(senderName)s使未来的房间历史对未知（%(visibility)s）可见。",
-            "world_readable": "%(senderName)s使未来的房间历史对任何人可见。"
+            "invited": "%(senderName)s 为此房间的所有成员调整了未来房间历史的可见性（自新成员被邀请进入时起）。",
+            "joined": "%(senderName)s 已将未来的房间历史记录对所有成员可见，自其加入房间时起。",
+            "shared": "%(senderName)s 使所有房间成员都能看到未来的房间历史记录。",
+            "unknown": "%(senderName)s 已将未来的房间历史记录对未知用户可见（%(visibility)s）。",
+            "world_readable": "%(senderName)s 调整了未来房间历史的可见性（对任何人可见）。"
         },
         "m.room.join_rules": {
-            "invite": "%(senderDisplayName)s 将此房间改为仅限邀请。",
-            "knock": "%(senderDisplayName)s 将加入规则更改为 ”需要验证加入请求“。",
-            "public": "%(senderDisplayName)s 将此房间对知道此房间链接的人公开。",
-            "restricted": "%(senderDisplayName)s 更改了谁能加入这个房间。",
-            "restricted_settings": "%(senderDisplayName)s 更改了谁能加入这个房间。<a>查看设置</a>。",
-            "unknown": "%(senderDisplayName)s 将加入规则改为 %(rule)s"
+            "invite": "%(senderDisplayName)s 配置此房间为仅限邀请。",
+            "knock": "%(senderDisplayName)s 更改了加入规则以申请加入。",
+            "public": "%(senderDisplayName)s 向知道链接的人公开了房间。",
+            "restricted": "%(senderDisplayName)s 更改了允许加入此房间的人员。",
+            "restricted_settings": "%(senderDisplayName)s 已更改谁可以加入此房间。<a>查看设置</a>",
+            "unknown": "%(senderDisplayName)s 已将加入规则更改为 %(rule)s"
         },
         "m.room.member": {
-            "accepted_3pid_invite": "%(targetName)s 已接受 %(displayName)s 的邀请",
+            "accepted_3pid_invite": "%(targetName)s 接受了 %(displayName)s 的邀请",
             "accepted_invite": "%(targetName)s 已接受邀请",
-            "ban": "%(senderName)s 已封禁 %(targetName)s",
-            "ban_reason": "%(senderName)s 已封禁 %(targetName)s： %(reason)s",
-            "change_avatar": "%(senderName)s 已更改他们的资料图片",
-            "change_name": "%(oldDisplayName)s将其显示名称改为%(displayName)s",
-            "change_name_avatar": "%(oldDisplayName)s更改了其显示名称和用户资料图片",
-            "invite": "%(senderName)s 已邀请 %(targetName)s",
+            "ban": "%(senderName)s 已封禁 1 个用户",
+            "ban_reason": "%(senderName)s 已封禁 1 个用户： %(reason)s",
+            "ban_reason_spoiler": "%(senderName)s 已封禁 <user/>",
+            "ban_spoiler": "%(senderName)s 已封禁 <user/>： %(reason)s",
+            "change_avatar": "%(senderName)s 已更改其个人资料图像",
+            "change_name": "%(oldDisplayName)s 已将其显示名称更改为 %(displayName)s",
+            "change_name_avatar": "%(oldDisplayName)s 已更改其显示名称与个人资料图片",
+            "invite": "%(senderName)s 邀请了 %(targetName)s",
             "join": "%(targetName)s 已加入房间",
-            "kick": "%(senderName)s 移除了 %(targetName)s",
-            "kick_reason": "%(senderName)s 移除了 %(targetName)s：%(reason)s",
-            "left": "%(targetName)s 已离开房间",
-            "left_reason": "%(targetName)s 已离开房间：%(reason)s",
-            "no_change": "%(senderName)s 未发生更改",
+            "kick": "%(senderName)s 已移除 %(targetName)s",
+            "kick_reason": "%(senderName)s 已移除 %(targetName)s： %(reason)s",
+            "left": "%(targetName)s 离开了房间",
+            "left_reason": "%(targetName)s 离开了房间：%(reason)s",
+            "no_change": "%(senderName)s 未产生任何更改",
             "reject_invite": "%(targetName)s 已拒绝邀请",
-            "remove_avatar": "%(senderName)s 已移除他们的资料图片",
-            "remove_name": "%(senderName)s已移除他们的显示名称（%(oldDisplayName)s）",
-            "set_avatar": "%(senderName)s 已设置资料图片",
-            "set_name": "%(senderName)s已将他们的显示名称设置为%(displayName)s",
-            "unban": "%(senderName)s 已取消封禁 %(targetName)s",
-            "withdrew_invite": "%(senderName)s 已撤回向 %(targetName)s 的邀请",
-            "withdrew_invite_reason": "%(senderName)s 已撤回向 %(targetName)s 的邀请：%(reason)s"
+            "reject_invite_reason": "%(targetName)s 拒绝了邀请：%(reason)s",
+            "remove_avatar": "%(senderName)s 已移除其个人资料图像",
+            "remove_name": "%(senderName)s 已移除其显示名称（%(oldDisplayName)s）",
+            "set_avatar": "%(senderName)s 设置了个人资料图像",
+            "set_name": "%(senderName)s 已设置其显示名称为 %(displayName)s",
+            "unban": "%(senderName)s 解封了 %(targetName)s",
+            "withdrew_invite": "%(senderName)s 撤消了 %(targetName)s 的邀请",
+            "withdrew_invite_reason": "%(senderName)s 已撤消对 %(targetName)s 的邀请：%(reason)s"
         },
         "m.room.name": {
-            "change": "%(senderDisplayName)s 将房间名称从 %(oldRoomName)s 改为 %(newRoomName)s。",
-            "remove": "%(senderDisplayName)s 移除了房间名称。",
-            "set": "%(senderDisplayName)s 将房间名称改为 %(roomName)s。"
+            "change": "%(senderDisplayName)s 已更改房间名称从 %(oldRoomName)s 到 %(newRoomName)s。",
+            "remove": "%(senderDisplayName)s 已移除房间名称。",
+            "set": "%(senderDisplayName)s 更改房间名称为 %(roomName)s。"
         },
         "m.room.pinned_events": {
-            "changed": "%(senderName)s 更改了房间的置顶消息。",
-            "changed_link": "%(senderName)s 已更改此房间的<a>固定消息</a>。",
-            "pinned": "%(senderName)s将一条消息固定到此房间。查看所有固定消息。",
-            "pinned_link": "%(senderName)s 将<a>一条消息</a>固定到此房间。查看所有<b>固定消息</b>。",
-            "unpinned": "%(senderName)s从此房间中取消固定了一条消息。查看所有固定消息。",
-            "unpinned_link": "%(senderName)s 从此房间中取消固定了<a>一条消息</a>。查看所有<b>固定消息</b>。"
+            "changed": "%(senderName)s 已更改此房间已置顶的消息。",
+            "changed_link": "%(senderName)s 更改了房间的<a>已置顶消息</a>。",
+            "pinned": "%(senderName)s 将一个消息置顶到此房间。查看所有已置顶的消息。",
+            "pinned_link": "%(senderName)s 已在此房间置顶了<a>一个消息</a>。 查看所有<b>已置顶的消息</b>。",
+            "unpinned": "%(senderName)s 已在此房间取消置顶一个消息。查看所有已置顶的消息。",
+            "unpinned_link": "%(senderName)s 已在此房间取消置顶了<a>一个消息</a>。 查看所有<b>已置顶的消息</b>。"
         },
         "m.room.power_levels": {
-            "changed": "%(senderName)s更改了%(powerLevelDiffText)s的权力级别。",
-            "user_from_to": "%(userId)s 从 %(fromPowerLevel)s 变为 %(toPowerLevel)s"
+            "changed": "%(senderName)s 已更改 %(powerLevelDiffText)s。",
+            "user_from_to": "%(userId)s 的权力值从 %(fromPowerLevel)s 到 %(toPowerLevel)s"
         },
         "m.room.third_party_invite": {
-            "revoked": "%(senderName)s 撤销了对 %(targetDisplayName)s 加入房间的邀请。",
-            "sent": "%(senderName)s 向 %(targetDisplayName)s 发了加入房间的邀请。"
+            "revoked": "%(senderName)s 已撤消 %(targetDisplayName)s 加入房间的邀请。",
+            "sent": "%(senderName)s 已向 %(targetDisplayName)s 发送了加入房间的邀请。"
         },
-        "m.room.tombstone": "%(senderDisplayName)s 升级了此房间。",
+        "m.room.tombstone": "%(senderDisplayName)s 已升级此房间。",
         "m.room.topic": {
-            "changed": "%(senderDisplayName)s 将话题修改为 “%(topic)s”。"
+            "changed": "%(senderDisplayName)s 已更改主题为“%(topic)s”。",
+            "removed": "%(senderDisplayName)s 已移除房间主题。"
         },
-        "m.sticker": "%(senderDisplayName)s 发送了一张贴纸。",
+        "m.sticker": "%(senderDisplayName)s 发送了一个贴纸。",
         "m.video": {
-            "error_decrypting": "解密视频时出错"
+            "error_decrypting": "解密视频时出错",
+            "show_video": "显示视频"
         },
         "m.widget": {
-            "added": "%(senderName)s 添加了 %(widgetName)s 挂件",
-            "jitsi_ended": "由 %(senderName)s 结束的视频会议",
+            "added": "%(senderName)s 添加了小部件：%(widgetName)s",
+            "jitsi_ended": "%(senderName)s 结束了视频会议",
             "jitsi_join_right_prompt": "从右侧的房间信息卡片加入会议",
-            "jitsi_join_top_prompt": "点击房间顶部加入会议",
-            "jitsi_started": "由 %(senderName)s 发起的视频会议",
-            "jitsi_updated": "由 %(senderName)s 更新的视频会议",
-            "modified": "%(senderName)s 修改了 %(widgetName)s 挂件",
-            "removed": "%(senderName)s 移除了 %(widgetName)s 挂件"
+            "jitsi_join_top_prompt": "在此房间加入会议的前排",
+            "jitsi_started": "%(senderName)s 已开始视频会议",
+            "jitsi_updated": "%(senderName)s 已更新视频会议",
+            "modified": "小部件 %(widgetName)s 已被 %(senderName)s 修改",
+            "removed": "%(senderName)s 已移除小部件：%(widgetName)s"
         },
         "mab": {
             "copy_link_thread": "复制到消息列的链接",
             "view_in_room": "在房间内查看"
         },
         "mjolnir": {
-            "changed_rule_glob": "%(senderName)s 更新了一个由于%(reason)s而禁止%(oldGlob)s跟%(newGlob)s匹配的规则",
-            "changed_rule_rooms": "%(senderName)s更改了一个由于%(reason)s而禁止房间%(oldGlob)s跟%(newGlob)s匹配的规则",
-            "changed_rule_servers": "%(senderName)s 更新了一个由于%(reason)s而禁止服务器%(oldGlob)s跟%(newGlob)s匹配的规则",
-            "changed_rule_users": "%(senderName)s 更改了一个由于%(reason)s而禁止用户%(oldGlob)s跟%(newGlob)s匹配的规则",
-            "created_rule": "%(senderName)s 创建了由于%(reason)s而禁止匹配%(glob)s的规则",
-            "created_rule_rooms": "%(senderName)s 创建了由于%(reason)s而禁止房间匹配%(glob)s的规则",
-            "created_rule_servers": "%(senderName)s 创建了由于%(reason)s而禁止服务器匹配%(glob)s的规则",
-            "created_rule_users": "%(senderName)s 创建了因为%(reason)s而禁止用户匹配%(glob)s的规则",
-            "message_hidden": "你已忽略此用户，所以其消息已被隐藏。<a>仍然显示。</a>",
-            "removed_rule": "%(senderName)s 移除了禁止匹配 %(glob)s 的规则",
-            "removed_rule_rooms": "%(senderName)s 删除了禁止房间匹配%(glob)s的规则",
-            "removed_rule_servers": "%(senderName)s 移除了禁止匹配 %(glob)s 的服务器的规则",
-            "removed_rule_users": "%(senderName)s 移除了禁止匹配 %(glob)s 的用户的规则",
-            "updated_invalid_rule": "%(senderName)s 更新了一个无效的禁止规则",
-            "updated_rule": "%(senderName)s 更新了由于%(reason)s而禁止匹配%(glob)s的规则",
-            "updated_rule_rooms": "%(senderName)s 更新了由于%(reason)s而禁止房间匹配%(glob)s的规则",
-            "updated_rule_servers": "%(senderName)s 更新了由于%(reason)s而禁止服务器匹配%(glob)s的规则",
-            "updated_rule_users": "%(senderName)s 更新了由于%(reason)s 而禁止用户匹配%(glob)s的规则"
+            "changed_rule_glob": "%(senderName)s 已更新一条与 %(oldGlob)s 匹配的封禁规则，曾经为 %(newGlob)s，原因：%(reason)s",
+            "changed_rule_rooms": "%(senderName)s 已更改一条与 %(newGlob)s 匹配的房间封禁规则，曾经为 %(oldGlob)s，原因：%(reason)s",
+            "changed_rule_servers": "%(senderName)s 已更改一条与 %(newGlob)s 匹配的服务器封禁规则，曾经为 %(oldGlob)s，原因：%(reason)s",
+            "changed_rule_users": "%(senderName)s 已更改一条与 %(newGlob)s 匹配的用户封禁规则，曾经为 %(oldGlob)s，原因：%(reason)s",
+            "created_rule": "%(senderName)s 为 %(reason)s 创建了一条与 %(glob)s 匹配的封禁规则",
+            "created_rule_rooms": "%(senderName)s 已创建一条与 %(glob)s 匹配的房间封禁规则，原因：%(reason)s",
+            "created_rule_servers": "%(senderName)s 已创建一条与 %(glob)s 匹配的服务器封禁规则，原因：%(reason)s",
+            "created_rule_users": "%(senderName)s 已创建一条与 %(glob)s 匹配的用户封禁规则，原因：%(reason)s",
+            "message_hidden": "你已忽略此用户，因此其消息已被隐藏。<a>仍然显示。</a>",
+            "removed_rule": "%(senderName)s 已移除一条与 %(glob)s 匹配的封禁规则",
+            "removed_rule_rooms": "%(senderName)s 已移除匹配 %(glob)s 的房间封禁规则。",
+            "removed_rule_servers": "%(senderName)s 已移除与 %(glob)s 匹配的服务器封禁规则",
+            "removed_rule_users": "%(senderName)s 已移除匹配 %(glob)s 的用户封禁规则。",
+            "updated_invalid_rule": "%(senderName)s 更新了无效的封禁规则",
+            "updated_rule": "%(senderName)s 已更新一条与 %(glob)s 匹配的封禁规则",
+            "updated_rule_rooms": "%(senderName)s 已更新一条与 %(glob)s 匹配的房间封禁规则，原因：%(reason)s",
+            "updated_rule_servers": "%(senderName)s 已更新与 %(glob)s 匹配的服务器封禁规则，原因：%(reason)s。",
+            "updated_rule_users": "%(senderName)s 已更新一条与 %(glob)s 匹配的用户封禁规则，原因：%(reason)s"
         },
-        "no_permission_messages_before_invite": "你没有权限查看你被邀请之前的消息。",
-        "no_permission_messages_before_join": "你没有权限查看你加入前的消息。",
-        "pending_moderation": "待审核的消息",
-        "pending_moderation_reason": "消息待审核：%(reason)s",
+        "no_permission_messages_before_invite": "你无权查看你被邀请前的消息。",
+        "no_permission_messages_before_join": "你无权查看你加入前的消息。",
+        "pending_moderation": "消息等待审核",
+        "pending_moderation_reason": "消息等待审核：%(reason)s",
         "reactions": {
             "add_reaction_prompt": "添加反应",
-            "label": "%(reactors)s做出了%(content)s的反应"
+            "custom_reaction_fallback_label": "自定义反应",
+            "label": "%(reactors)s 使用 %(content)s 作出反应",
+            "tooltip_caption": "已使用 %(shortName)s 作出反应"
         },
         "read_receipt_title": {
-            "one": "已被%(count)s人查看",
-            "other": "已被%(count)s人查看"
+            "one": "已被 %(count)s 个人查看",
+            "other": "已被 %(count)s 个人查看"
         },
         "read_receipts_label": "已读回执",
         "redacted": {
-            "tooltip": "消息于 %(date)s 被删除"
+            "tooltip": "消息已于 %(date)s 删除"
         },
-        "redaction": "消息被 %(name)s 删除",
+        "redaction": "消息已被 %(name)s 删除",
         "reply": {
-            "error_loading": "无法加载被回复的事件，它可能不存在，也可能是你没有权限查看它。",
-            "in_reply_to": "<a>答复</a> <pill>",
-            "in_reply_to_for_export": "答复<a>此消息</a>"
+            "error_loading": "无法加载已回复的事件，该事件可能不存在或你无权查看。",
+            "in_reply_to": "<a>回复给</a> <pill>",
+            "in_reply_to_for_export": "回复<a>此消息</a>"
         },
         "scalar_starter_link": {
-            "dialog_description": "你将被带到一个第三方网站以便验证你的账户来使用 %(integrationsUrl)s 提供的集成。你希望继续吗？",
+            "dialog_description": "你将被带到第三方网站，以便验证你的账户是否可用于 %(integrationsUrl)s。是否继续？",
             "dialog_title": "添加集成"
         },
-        "self_redaction": "消息已删除",
+        "self_redaction": "消息已被删除",
+        "send_state_encrypting": "正在解密消息…",
         "send_state_failed": "发送失败",
+        "send_state_sending": "发送消息…",
         "send_state_sent": "消息已发送",
         "summary": {
             "banned": {
-                "other": "被封禁 %(count)s 次",
-                "one": "被封禁"
+                "one": "已被封禁",
+                "other": "已被封禁 %(count)s 次"
             },
             "banned_multiple": {
-                "other": "被封禁 %(count)s 次",
-                "one": "被封禁"
+                "one": "已被封禁",
+                "other": "已被封禁 %(count)s 次"
+            },
+            "changed_avatar": {
+                "one": "%(oneUser)s 已更改其个人资料图像",
+                "other": "%(oneUser)s 已更改其个人资料图像 %(count)s 次"
+            },
+            "changed_avatar_multiple": {
+                "one": "%(severalUsers)s 已更改其个人资料图像",
+                "other": "%(severalUsers)s 已更改其个人资料图像 %(count)s 次"
             },
             "changed_name": {
-                "other": "%(oneUser)s 修改了自己的名称 %(count)s 次",
-                "one": "%(oneUser)s 修改了自己的名称"
+                "one": "%(oneUser)s 已更改其名称",
+                "other": "%(oneUser)s 已更改其名称 %(count)s 次"
             },
             "changed_name_multiple": {
-                "other": "%(severalUsers)s 修改了他们的名称 %(count)s 次",
-                "one": "%(severalUsers)s 修改了他们的名称"
+                "one": "%(severalUsers)s 已更改其名称",
+                "other": "%(severalUsers)s 更改了其名称 %(count)s 次"
             },
+            "format": "%(nameList)s %(transitionList)s",
             "hidden_event": {
-                "other": "%(oneUser)s发送了%(count)s条隐藏消息",
-                "one": "%(oneUser)s发送了一条隐藏消息"
+                "one": "%(oneUser)s 发送了一个隐藏消息",
+                "other": "%(oneUser)s 发送了 %(count)s 个隐藏消息"
             },
             "hidden_event_multiple": {
-                "one": "%(severalUsers)s发送了一条隐藏消息",
-                "other": "%(severalUsers)s发送了%(count)s条隐藏消息"
+                "one": "%(severalUsers)s 发送了一个隐藏事件",
+                "other": "%(severalUsers)s 发送了 %(count)s 个隐藏消息"
             },
             "invite_withdrawn": {
-                "other": "%(oneUser)s 撤回了他们的邀请共 %(count)s 次",
-                "one": "%(oneUser)s 撤回了他们的邀请"
+                "one": "%(oneUser)s 已撤消其邀请",
+                "other": "%(oneUser)s 已撤消其邀请 %(count)s 次"
             },
             "invite_withdrawn_multiple": {
-                "other": "%(severalUsers)s 撤回了他们的邀请共 %(count)s 次",
-                "one": "%(severalUsers)s 撤回了他们的邀请"
+                "one": "已撤消 %(severalUsers)s 的邀请",
+                "other": "%(severalUsers)s 已撤消其邀请 %(count)s 次"
             },
             "invited": {
-                "other": "被邀请 %(count)s 次",
-                "one": "被邀请"
+                "one": "被邀请",
+                "other": "已被邀请 %(count)s 次"
             },
             "invited_multiple": {
-                "other": "被邀请 %(count)s 次",
-                "one": "被邀请"
+                "one": "已被邀请",
+                "other": "被邀请 %(count)s 次"
             },
             "joined": {
-                "other": "%(oneUser)s 已加入 %(count)s 次",
-                "one": "%(oneUser)s 已加入"
+                "one": "%(oneUser)s 已加入",
+                "other": "%(oneUser)s 加入了 %(count)s 次"
             },
             "joined_and_left": {
-                "other": "%(oneUser)s加入并离开了%(count)s次",
-                "one": "%(oneUser)s加入并离开了"
+                "one": "%(oneUser)s 已加入并离开",
+                "other": "%(oneUser)s 加入并离开了 %(count)s 次"
             },
             "joined_and_left_multiple": {
-                "other": "%(severalUsers)s加入并离开了%(count)s次",
-                "one": "%(severalUsers)s加入并离开了"
+                "one": "%(severalUsers)s 加入并离开",
+                "other": "%(severalUsers)s 加入并离开 %(count)s 次"
             },
             "joined_multiple": {
-                "other": "%(severalUsers)s 已加入 %(count)s 次",
-                "one": "%(severalUsers)s 已加入"
+                "one": "%(severalUsers)s 已加入",
+                "other": "%(severalUsers)s 加入了 %(count)s 次"
             },
             "kicked": {
                 "one": "被移除",
-                "other": "被移除%(count)s次"
+                "other": "已被移除 %(count)s 次"
             },
             "kicked_multiple": {
-                "one": "被移除",
-                "other": "被移除了%(count)s次"
+                "one": "已被移除",
+                "other": "被移除 %(count)s 次"
             },
             "left": {
-                "other": "%(oneUser)s 已离开 %(count)s 次",
-                "one": "%(oneUser)s 已离开"
+                "one": "%(oneUser)s 已离开",
+                "other": "%(oneUser)s 离开 %(count)s 次"
             },
             "left_multiple": {
-                "other": "%(severalUsers)s 已离开 %(count)s 次",
-                "one": "%(severalUsers)s 已离开"
+                "one": "%(severalUsers)s 已离开",
+                "other": "%(severalUsers)s 离开 %(count)s 次"
             },
             "no_change": {
-                "other": "%(oneUser)s 未做更改 %(count)s 次",
-                "one": "%(oneUser)s 未做更改"
+                "one": "%(oneUser)s 未产生任何更改",
+                "other": "%(oneUser)s未产生任何更改 %(count)s 次"
             },
             "no_change_multiple": {
-                "other": "%(severalUsers)s 未做更改 %(count)s 次",
-                "one": "%(severalUsers)s 未做更改"
+                "one": "%(severalUsers)s 未产生任何更改",
+                "other": "%(severalUsers)s 未产生任何更改 %(count)s 次"
             },
             "pinned_events": {
-                "one": "%(oneUser)s更改了房间的<a>固定消息</a>",
-                "other": "%(oneUser)s更改了房间的<a>固定消息</a>%(count)s次"
+                "one": "%(oneUser)s 更改了此房间的<a>已置顶消息</a>",
+                "other": "%(oneUser)s 已更改房间内的 <a>已置顶消息</a> %(count)s 次"
             },
             "pinned_events_multiple": {
-                "one": "%(severalUsers)s更改了房间的<a>固定消息</a>",
-                "other": "%(severalUsers)s更改了房间的<a>固定消息</a>%(count)s次"
+                "one": "%(severalUsers)s 已更改房间的 <a>已置顶消息</a>",
+                "other": "%(severalUsers) 已更改该房间的<a>已置顶消息</a> %(count)s 次。"
             },
             "redacted": {
-                "one": "%(oneUser)s移除了一条消息",
-                "other": "%(oneUser)s移除了%(count)s条消息"
+                "one": "%(oneUser)s 已移除一个消息",
+                "other": "%(oneUser)s 已移除 %(count)s 个消息"
             },
             "redacted_multiple": {
-                "one": "%(severalUsers)s移除了1条消息",
-                "other": "%(severalUsers)s移除了%(count)s条消息"
+                "one": "%(severalUsers)s 已移除一个消息",
+                "other": "%(severalUsers)s 已移除 %(count)s 个消息"
             },
             "rejected_invite": {
-                "other": "%(oneUser)s 拒绝了他们的邀请共 %(count)s 次",
-                "one": "%(oneUser)s 拒绝了他们的邀请"
+                "one": "%(oneUser)s 已拒绝其邀请",
+                "other": "%(oneUser)s 已拒绝其邀请 %(count)s 次"
             },
             "rejected_invite_multiple": {
-                "one": "%(severalUsers)s 拒绝了他们的邀请",
-                "other": "%(severalUsers)s 拒绝了他们的邀请共 %(count)s 次"
+                "one": "%(severalUsers)s 已拒绝其邀请",
+                "other": "%(severalUsers)s 已拒绝其邀请 %(count)s 次"
             },
             "rejoined": {
-                "other": "%(oneUser)s离开并重新加入了%(count)s次",
-                "one": "%(oneUser)s离开并重新加入了"
+                "one": "%(oneUser)s 离开并重新加入",
+                "other": "%(oneUser)s 离开并重新加入了 %(count)s 次"
             },
             "rejoined_multiple": {
-                "other": "%(severalUsers)s离开并重新加入了%(count)s次",
-                "one": "%(severalUsers)s离开并重新加入了"
+                "one": "%(severalUsers)s 离开并重新加入",
+                "other": "%(severalUsers)s 离开并重新加入了 %(count)s 次"
             },
             "unbanned": {
-                "other": "被解封 %(count)s 次",
-                "one": "被解封"
+                "one": "已被解封",
+                "other": "被解封 %(count)s 次"
             },
             "unbanned_multiple": {
                 "other": "被解封 %(count)s 次",
@@ -2883,274 +3740,323 @@
         "thread_info_basic": "来自消息列",
         "typing_indicator": {
             "more_users": {
-                "other": "%(names)s 与其他 %(count)s 位正在输入…",
-                "one": "%(names)s 与另一位正在输入…"
+                "one": "%(name)s 与剩余 1 个用户正在输入...",
+                "other": "%(names)s 与其他 %(count)s 个人正在输入…"
             },
             "one_user": "%(displayName)s 正在输入…",
-            "two_users": "%(names)s和%(lastPerson)s正在输入……"
-        }
+            "two_users": "%(names)s 与其他 %(lastPerson)s 个人正在输入…"
+        },
+        "undecryptable_tooltip": "此消息无法解密"
     },
     "truncated_list_n_more": {
-        "other": "和 %(count)s 个其他…"
+        "other": "以及剩余 %(count)s 个…"
     },
+    "unsupported_browser": {
+        "description": "如果继续，某些功能可能会停止运行，并且你将来可能会丢失数据。请更新浏览器以继续使用 %(brand)s。",
+        "title": "%(brand)s 不支持此浏览器"
+    },
+    "unsupported_server_description": "此服务器正在使用旧版本的 Matrix。请升级到 Matrix %(version)s 以正常使用 %(brand)s。",
+    "unsupported_server_title": "服务器不支持",
     "update": {
         "changelog": "更改日志",
         "check_action": "检查更新",
-        "error_encountered": "遇到错误 (%(errorDetail)s)。",
-        "error_unable_load_commit": "无法加载提交详情：%(msg)s",
-        "new_version_available": "新版本可用。<a>现在更新。</a>",
-        "no_update": "没有可用更新。",
-        "release_notes_toast_title": "更新内容",
-        "see_changes_button": "有何新变动？",
-        "toast_description": "%(brand)s 有新版本可用",
+        "checking": "正在检查更新…",
+        "downloading": "正在下载更新…",
+        "error_encountered": "遇到错误（%(errorDetail)s）。",
+        "error_unable_load_commit": "无法载入提交的详细信息： %(msg)s",
+        "new_version_available": "有新版本可用。<a>立即更新</a>",
+        "no_update": "无可用更新。",
+        "release_notes_toast_title": "新特性",
+        "see_changes_button": "新增内容？",
+        "toast_description": "%(brand)s 有新版本可供更新",
         "toast_title": "更新 %(brand)s",
-        "unavailable": "无法获得"
+        "unavailable": "不可用"
     },
-    "upload_failed_generic": "文件《%(fileName)s》上传失败。",
-    "upload_failed_size": "文件“%(fileName)s”超过了此家服务器的上传大小限制",
+    "update_room_access_modal": {
+        "description": "要创建共享链接，请将此房间设为<b>公开</b>，或启用用户<b>申请加入</b>的选项。这样，访客无需邀请即可加入。",
+        "dont_change_description": "如果你不想更改此房间的访问权限，你可以为通话链接创建一个新的房间。",
+        "no_change": "我不想更改访问权力。",
+        "revert_access_description": "（可在“房间设置”中将其恢复为先前的值：<b>安全与隐私</b>/<b>访问</b>）",
+        "title": "允许访客加入此房间"
+    },
+    "upload_failed_generic": "文件“%(fileName)s”上传失败。",
+    "upload_failed_size": "文件“%(fileName)s”超出了此主服务器的上传大小限制",
     "upload_failed_title": "上传失败",
     "upload_file": {
         "cancel_all_button": "全部取消",
-        "error_file_too_large": "此文件<b>过大</b>而不能上传。文件大小限制是 %(limit)s 但此文件为 %(sizeOfThisFile)s。",
-        "error_files_too_large": "这些文件<b>过大</b>而不能上传。文件大小限制为 %(limit)s。",
-        "error_some_files_too_large": "一些文件<b>过大</b>而不能上传。文件大小限制为 %(limit)s。",
-        "error_title": "上传错误",
+        "error_file_too_large": "此文件<b>太大</b>，无法上传。文件大小限制为 %(limit)s，但此文件为 %(sizeOfThisFile)s。",
+        "error_files_too_large": "这些文件<b>太大</b>，无法上传。文件大小限制为 %(limit)s。",
+        "error_some_files_too_large": "某些文件<b>过大</b>，无法上传。文件大小限制为 %(limit)s。",
+        "error_title": "上传出错",
+        "not_image": "你选择的文件不是有效的图像文件。",
         "title": "上传文件",
-        "title_progress": "上传文件（%(total)s 中之 %(current)s）",
+        "title_progress": "上传文件（%(total)s 个中的第 %(current)s 个）",
         "upload_all_button": "全部上传",
         "upload_n_others_button": {
-            "other": "上传 %(count)s 个别的文件",
-            "one": "上传 %(count)s 个别的文件"
+            "one": "上传剩余 %(count)s 个文件",
+            "other": "上传剩余 %(count)s 个文件"
         }
     },
     "user_info": {
         "admin_tools_section": "管理员工具",
         "ban_button_room": "从房间封禁",
         "ban_button_space": "从空间封禁",
-        "ban_room_confirm_title": "禁止进入 %(roomName)s",
-        "ban_space_everything": "禁止这些人做任何我有权决定的事",
+        "ban_room_confirm_title": "在 %(roomName)s 中封禁",
+        "ban_space_everything": "禁止他们访问我所能访问的一切",
         "ban_space_specific": "禁止这些人做某些我有权决定的事",
         "deactivate_confirm_action": "停用用户",
-        "deactivate_confirm_description": "停用此用户将会使其登出并阻止其再次登入。而且此用户也会离开其所在的所有房间。此操作不可逆。你确定要停用此用户吗？",
-        "deactivate_confirm_title": "停用用户吗？",
+        "deactivate_confirm_description": "停用此用户将移除其设备，并且无法重新登录。同时将离开其所在的所有房间。此操作无法撤消。你确定要停用此用户？",
+        "deactivate_confirm_title": "停用用户？",
         "demote_button": "降权",
-        "demote_self_confirm_description_space": "当你将自己降级后，你将无法撤销此更改。如果你是此空间的最后一名拥有权限的用户，则无法重新获得权限。",
-        "demote_self_confirm_room": "如果你是房间中最后一位拥有权限的用户，在你降低自己的权限等级后将无法撤销此修改，你将无法重新获得权限。",
-        "demote_self_confirm_title": "是否降低你自己的权限？",
-        "disinvite_button_room": "从房间取消邀请",
-        "disinvite_button_room_name": "取消邀请加入 %(roomName)s",
-        "disinvite_button_space": "从空间取消邀请",
-        "error_ban_user": "封禁失败",
-        "error_deactivate": "停用用户失败",
-        "error_kicking_user": "移除用户失败",
-        "error_mute_user": "禁言用户失败",
-        "error_revoke_3pid_invite_description": "无法撤销邀请。此服务器可能出现了临时错误，或者你没有足够的权限来撤销邀请。",
-        "error_revoke_3pid_invite_title": "撤销邀请失败",
-        "invited_by": "被 %(sender)s 邀请",
-        "jump_to_rr_button": "跳到阅读回执",
+        "demote_self_confirm_description_space": "由于你正在降级自身，因此无法撤消此更改。如果你是房间中最后一个拥有特权的用户，则无法重新获得特权。",
+        "demote_self_confirm_room": "由于你正在降级自身，因此无法撤消此更改。如果你是房间中最后一个拥有特权的用户，则无法重新获得特权。",
+        "demote_self_confirm_title": "降级自身？",
+        "disinvite_button_room": "撤消邀请",
+        "disinvite_button_room_name": "从 %(roomName)s 取消邀请",
+        "disinvite_button_space": "取消邀请",
+        "error_ban_user": "封禁用户失败",
+        "error_deactivate": "用户停用失败",
+        "error_kicking_user": "用户移除失败",
+        "error_mute_user": "静默用户失败",
+        "error_revoke_3pid_invite_description": "无法撤消邀请。服务器可能出现临时问题，或者你没有足够的权限撤消邀请。",
+        "error_revoke_3pid_invite_title": "邀请撤消失败",
+        "ignore_button": "忽略",
+        "ignore_confirm_description": "来自此用户的所有消息与邀请都将被隐藏。你确定要忽略？",
+        "ignore_confirm_title": "忽略 %(user)s",
+        "invited_by": "由 %(sender)s 邀请",
+        "jump_to_rr_button": "跳转到已读回执",
         "kick_button_room": "从房间移除",
-        "kick_button_room_name": "从%(roomName)s移除",
+        "kick_button_room_name": "从 %(roomName)s 移除",
         "kick_button_space": "从空间移除",
-        "kick_space_warning": "他们仍然可以访问任何你不是管理员的地方。",
-        "promote_warning": "你将无法撤回此修改，因为此用户的权力级别将与你相同。",
+        "kick_button_space_everything": "从我所能及的一切中将它们移除",
+        "kick_space_specific": "将它们从我能够处理的特定事物中移除",
+        "kick_space_warning": "他们仍然可以访问任何你不是管理员的空间。",
+        "promote_warning": "由于你正在将该用户提升为与你相同的权力值，因此你将无法撤消此更改。",
         "redact": {
             "confirm_button": {
-                "other": "删除 %(count)s 条消息",
-                "one": "删除 1 条消息"
+                "one": "移除 1 个消息",
+                "other": "移除 %(count)s 个消息"
             },
-            "confirm_description_2": "对于大量消息，可能会消耗一段时间。在此期间请不要刷新你的客户端。",
-            "confirm_keep_state_explainer": "若你也想移除关于此用户的系统消息（例如，成员更改、用户资料更改……），则取消勾选",
+            "confirm_description_1": {
+                "one": "即将移除 %(user)s 发送的 %(count)s 个消息。这将永久删除对话中所有参与者的消息。是否继续？",
+                "other": "即将移除 %(user)s 发送的 %(count)s 个消息。这将永久删除对话中所有参与者的消息。是否继续？"
+            },
+            "confirm_description_2": "如果消息量较大，这可能需要一些时间。在此期间请勿刷新客户端。",
+            "confirm_keep_state_explainer": "如果你还想移除此用户的系统消息（例如，成员关系变更、个人资料变更等），请取消选中。",
             "confirm_keep_state_label": "保留系统消息",
-            "confirm_title": "删除 %(user)s 最近发送的消息",
-            "no_recent_messages_description": "请尝试在时间线中向上滚动以查看是否有更早的。",
-            "no_recent_messages_title": "没有找到 %(user)s 最近发送的消息"
+            "confirm_title": "移除 %(user)s 最近的信息",
+            "no_recent_messages_description": "尝试向上滚动时间线，查看是否有更早的消息。",
+            "no_recent_messages_title": "未找到 %(user)s 的最近信息"
         },
-        "redact_button": "移除最近消息",
-        "revoke_invite": "撤销邀请",
-        "room_encrypted": "此房间内的消息端到端加密。",
-        "room_encrypted_detail": "你的消息是安全的，只有你和接收者有解开它们的唯一密钥。",
-        "room_unencrypted": "此房间内的消息未端到端加密。",
-        "room_unencrypted_detail": "在加密房间中，你的消息是安全的，只有你和接收者有解开它们的唯一密钥。",
-        "share_button": "分享链接给其他用户",
-        "unban_button_room": "从房间取消解封",
-        "unban_button_space": "从空间取消封锁",
-        "unban_room_confirm_title": "解除 %(roomName)s 禁令",
+        "redact_button": "移除消息",
+        "revoke_invite": "撤消申请",
+        "room_encrypted": "此处的消息是端到端加密的。",
+        "room_encrypted_detail": "你的消息是安全的，只有你与对方拥有解锁它们的唯一密钥。",
+        "room_unencrypted": "在此房间中的消息非端到端加密。",
+        "room_unencrypted_detail": "在加密房间中你的消息是安全的，只有你与收件人拥有解密它们的唯一密钥。",
+        "send_message": "发送消息",
+        "share_button": "分享个人资料",
+        "unban_button_room": "从房间解封",
+        "unban_button_space": "从空间解封",
+        "unban_room_confirm_title": "从 %(roomName)s 解封",
         "unban_space_everything": "解除我权限范围内对这些人的所有禁令",
         "unban_space_specific": "解除我权限范围内对这些人的某些禁令",
-        "unban_space_warning": "他们将无法访问你不是管理员的一切。",
+        "unban_space_warning": "如果你不是管理员，他们将无法访问。",
+        "unignore_button": "取消忽略",
+        "verification_unavailable": "用户验证不可用",
         "verify_button": "验证用户",
-        "verify_explainer": "为了更加安全，在你两个设备上检查一次性代码来验证此用户。"
+        "verify_explainer": "为了提高安全性，请通过检查两台设备上的一次性代码来验证此用户。"
     },
     "user_menu": {
+        "link_new_device": "关联新设备",
         "settings": "所有设置",
-        "switch_theme_dark": "切换到深色模式",
-        "switch_theme_light": "切换到浅色模式"
+        "switch_theme_dark": "切换为深色模式",
+        "switch_theme_light": "切换为浅色模式"
     },
     "voip": {
-        "already_in_call": "正在通话中",
-        "already_in_call_person": "你正在与其通话。",
+        "already_in_call": "已在通话中",
+        "already_in_call_person": "你已正在与此人通话。",
         "answered_elsewhere": "已在别处接听",
-        "answered_elsewhere_description": "已在另一台设备上接听了此通话。",
-        "call_failed": "呼叫失败",
+        "answered_elsewhere_description": "通话已在其它设备上接听。",
+        "call_failed": "通话失败",
         "call_failed_description": "无法建立通话",
-        "call_failed_media": "通话失败，因为无法使用摄像头或麦克风。请检查：",
-        "call_failed_media_applications": "没有其他应用程序正在使用摄像头",
-        "call_failed_media_connected": "已插入并正确设置麦克风和摄像头",
-        "call_failed_media_permissions": "授权使用摄像头",
-        "call_failed_microphone": "呼叫失败，因为无法使用任何麦克风。 检查是否已插入并正确设置麦克风。",
-        "call_held": "%(peerName)s 挂起了通话",
-        "call_held_resume": "你挂起了通话 <a>恢复</a>",
-        "call_held_switch": "你挂起了通话 <a>切换</a>",
+        "call_failed_media": "通话失败，因为无法访问摄像头或麦克风。请检查：",
+        "call_failed_media_applications": "无其它应用程序使用摄像头",
+        "call_failed_media_connected": "麦克风与摄像头已插入并正确设置",
+        "call_failed_media_permissions": "已授予摄像头使用权",
+        "call_failed_microphone": "通话失败，因为无法访问麦克风。请检查麦克风是否已插入并正确设置。",
+        "call_held": "%(peerName)s 已挂起通话",
+        "call_held_resume": "你正在通话 <a>恢复</a>",
+        "call_held_switch": "你正在通话 <a>切换</a>",
         "call_toast_unknown_room": "未知房间",
-        "camera_disabled": "你的摄像头已关闭",
-        "camera_enabled": "你的摄像头仍然处于启用状态",
-        "cannot_call_yourself_description": "你不能打给自己。",
-        "connecting": "连接中",
-        "connection_lost": "已丢失与服务器的连接",
-        "connection_lost_description": "你不能在未连接到服务器时进行呼叫。",
-        "consulting": "与 %(transferTarget)s 进行协商。<a>转让至 %(transferee)s</a>",
+        "camera_disabled": "摄像头已关闭",
+        "camera_enabled": "摄像头仍处于开启状态",
+        "cannot_call_yourself_description": "你无法与自己通话。",
+        "close_lobby": "关闭大厅",
+        "connecting": "正在连接",
+        "connection_lost": "与服务器的连接已丢失",
+        "connection_lost_description": "在未连接到服务器的情况下，你无法拨打电话。",
+        "consulting": "正在与 %(transferTarget)s 协商。<a>转接到 %(transferee)s</a>",
+        "decline_call": "拒绝",
         "default_device": "默认设备",
         "dial": "拨号",
         "dialpad": "拨号盘",
-        "disable_camera": "关闭相机",
+        "disable_camera": "关闭摄像头",
         "disable_microphone": "静音麦克风",
-        "disabled_no_perms_start_video_call": "你没有权限开始视频通话",
-        "disabled_no_perms_start_voice_call": "你没有权限开始语音通话",
-        "disabled_ongoing_call": "正在进行的通话",
-        "enable_camera": "启动相机",
+        "disabled_no_perms_start_video_call": "你无权发起视频通话",
+        "disabled_no_perms_start_voice_call": "你无权发起语音通话",
+        "disabled_ongoing_call": "通话中",
+        "element_call": "Element Call",
+        "enable_camera": "打开摄像头",
         "enable_microphone": "取消静音麦克风",
-        "expand": "返回通话",
+        "expand": "返回到通话",
+        "get_call_link": "分享通话链接",
         "hangup": "挂断",
-        "hide_sidebar_button": "隐藏侧边栏",
+        "hide_sidebar_button": "隐藏边栏",
         "input_devices": "输入设备",
-        "maximise": "填满屏幕",
-        "misconfigured_server": "服务器配置错误导致通话失败",
-        "misconfigured_server_description": "请联系你的家服务器（<code>%(homeserverDomain)s</code>）的管理员配置 TURN 服务器，以确保通话过程稳定。",
+        "jitsi_call": "Jitsi 会议",
+        "legacy_call": "旧版通话",
+        "maximise": "填充屏幕",
+        "maximise_call": "最大化",
+        "metaspace_video_rooms": {
+            "conference_room_section": "会议"
+        },
+        "minimise_call": "最小化",
+        "misconfigured_server": "由于服务器配置错误，通话失败",
+        "misconfigured_server_description": "请要求主服务器 (<code>%(homeserverDomain)s</code>) 的管理员配置 TURN 服务器，以确保通话可靠运行。",
+        "misconfigured_server_fallback": "或者，你可以尝试使用位于 <server/> 的公共服务器，但这不完全可靠，并且会与该服务器共享 IP 地址。你也可以在“设置”中管理此设置。",
+        "misconfigured_server_fallback_accept": "尝试使用 %(server)s",
         "more_button": "更多",
         "msisdn_lookup_failed": "无法查询电话号码",
-        "msisdn_lookup_failed_description": "查询电话号码时发生错误",
-        "msisdn_transfer_failed": "无法转移通话",
+        "msisdn_lookup_failed_description": "查询电话号码时出错",
+        "msisdn_transfer_failed": "无法转接通话",
         "n_people_joined": {
-            "one": "%(count)s个人已加入",
-            "other": "%(count)s个人已加入"
+            "one": "%(count)s 个人已加入",
+            "other": "%(count)s 个人已加入"
         },
-        "no_audio_input_description": "我们没能在你的设备上找到麦克风。请检查设置并重试。",
+        "no_audio_input_description": "我们未在此设备上找到麦克风。请检查设置并重试。",
         "no_audio_input_title": "未找到麦克风",
-        "no_media_perms_description": "你可能需要手动授权 %(brand)s 使用你的麦克风或摄像头",
-        "no_media_perms_title": "没有媒体存取权限",
+        "no_media_perms_description": "你可能需要手动允许 %(brand)s 访问你的麦克风或摄像头。",
+        "no_media_perms_title": "无媒体权限",
         "no_permission_conference": "需要权限",
-        "no_permission_conference_description": "你没有在此房间发起通话会议的权限",
+        "no_permission_conference_description": "你无权在此房间启动会议通话",
         "on_hold": "保留 %(name)s",
         "output_devices": "输出设备",
         "screenshare_monitor": "分享整个屏幕",
         "screenshare_title": "分享内容",
         "screenshare_window": "应用程序窗口",
-        "show_sidebar_button": "显示侧边栏",
-        "silence": "通话静音",
+        "show_sidebar_button": "显示边栏",
+        "silence": "静音通话",
         "silenced": "通知已静音",
-        "start_screenshare": "开始分享你的屏幕",
-        "stop_screenshare": "停止分享你的屏幕",
-        "too_many_calls": "太多通话",
+        "skip_lobby_toggle_option": "立即加入",
+        "start_screenshare": "开始分享屏幕",
+        "stop_screenshare": "停止分享屏幕",
+        "too_many_calls": "呼叫频繁",
         "too_many_calls_description": "你已达到同时通话的最大数量。",
-        "transfer_consult_first_label": "先询问",
-        "transfer_failed": "转移失败",
-        "transfer_failed_description": "通话转移失败",
-        "unable_to_access_audio_input_description": "我们无法访问你的麦克风。 请检查浏览器设置并重试。",
+        "transfer_consult_first_label": "优先咨询",
+        "transfer_failed": "传输失败",
+        "transfer_failed_description": "通话转接失败",
+        "unable_to_access_audio_input_description": "我们无法访问麦克风。请检查浏览器设置并重试。",
         "unable_to_access_audio_input_title": "无法访问你的麦克风",
-        "unable_to_access_media": "无法使用摄像头/麦克风",
-        "unable_to_access_microphone": "无法使用麦克风",
-        "unknown_caller": "未知来电人",
-        "unknown_person": "陌生人",
+        "unable_to_access_media": "无法访问摄像头或麦克风",
+        "unable_to_access_microphone": "无法访问麦克风",
+        "unknown_caller": "未知呼叫方",
+        "unknown_person": "未知人员",
         "unsilence": "开启声音",
-        "unsupported": "不支持通话",
-        "unsupported_browser": "你无法在此浏览器中进行呼叫。",
-        "user_busy": "用户正忙",
-        "user_busy_description": "你所呼叫的用户正忙。",
-        "user_is_presenting": "%(sharerName)s 正在展示",
+        "unsupported": "不支持的通话",
+        "unsupported_browser": "你无法在此浏览器中执行通话。",
+        "user_busy": "用户忙",
+        "user_busy_description": "你呼叫的用户正忙。",
+        "user_is_presenting": "%(sharerName)s 正在分享",
         "video_call": "视频通话",
-        "video_call_started": "视频通话已开始",
+        "video_call_incoming": "视频通话来电",
+        "video_call_started": "已开始视频通话",
+        "video_call_using": "视频通话时使用：",
         "voice_call": "语音通话",
-        "you_are_presenting": "你正在展示"
+        "voice_call_incoming": "语音通话来电",
+        "voice_call_using": "语音通话时使用：",
+        "you_are_presenting": "你正在演示"
     },
-    "web_default_device_name": "%(appName)s：%(browserName)s在%(osName)s",
-    "welcome_to_element": "欢迎来到 Element",
+    "web_default_device_name": "%(appName)s：%(browserName)s 运行于 %(osName)s",
+    "welcome_to_element": "欢迎使用 Element",
     "widget": {
-        "added_by": "挂件添加者",
+        "added_by": "小部件添加者：",
         "capabilities_dialog": {
-            "content_starting_text": "此挂件想要：",
+            "content_starting_text": "此小部件期望：",
             "decline_all_permission": "全部拒绝",
-            "remember_Selection": "记住我对此挂件的选择",
-            "title": "批准挂件权限"
+            "remember_Selection": "记住我对此小部件的选择",
+            "title": "批准小部件权限"
         },
         "capability": {
-            "always_on_screen_generic": "运行时始终保留在你的屏幕上",
-            "always_on_screen_viewing_another_room": "运行时始终保留在你的屏幕上，即使你在浏览其它房间",
-            "any_room": "以上，但也包括你加入或被邀请的任何房间中",
-            "byline_empty_state_key": "附带一个空的状态键（state key）",
+            "always_on_screen_generic": "运行期间持续显示于屏幕",
+            "always_on_screen_viewing_another_room": "正在运行并且正在查看另一个房间时持续保留在屏幕上",
+            "any_room": "同上，但在任何你加入或被邀请到的房间中也是如此",
+            "byline_empty_state_key": "使用空状态值",
             "byline_state_key": "附带有状态键（state key）%(stateKey)s",
-            "capability": "<b>%(capability)s</b> 容量",
+            "capability": "<b>%(capability)s</b> 能力",
             "change_avatar_active_room": "更改活跃房间的头像",
-            "change_avatar_this_room": "更改当前房间的头像",
+            "change_avatar_this_room": "更改此房间的头像",
             "change_name_active_room": "更改活跃房间的名称",
-            "change_name_this_room": "更改当前房间的名称",
-            "change_topic_active_room": "更改当前活跃房间的话题",
-            "change_topic_this_room": "更改当前房间的话题",
-            "receive_membership_active_room": "查看人们何时加入、离开或被邀请到你所活跃的房间",
-            "receive_membership_this_room": "查看人们加入、离开或被邀请到此房间的时间",
-            "remove_ban_invite_leave_active_room": "移除、封禁或邀请他人加入你的活跃房间，方可离开",
-            "remove_ban_invite_leave_this_room": "移除、封禁或邀请他人加入此房间，方可离开",
-            "see_avatar_change_active_room": "查看你的活跃房间的头像何时修改",
-            "see_avatar_change_this_room": "查看此房间的头像何时被修改",
-            "see_event_type_sent_active_room": "查看你的活跃房间中发送的 <b>%(eventType)s</b> 事件",
-            "see_event_type_sent_this_room": "查看此房间中发送的 <b>%(eventType)s</b> 事件",
-            "see_images_sent_active_room": "查看发布到你所活跃的房间的图片",
-            "see_images_sent_this_room": "查看发布到此房间的图片",
-            "see_messages_sent_active_room": "查看发布到你所活跃的房间的消息",
+            "change_name_this_room": "更改在此房间的名称",
+            "change_topic_active_room": "更改活跃房间的主题",
+            "change_topic_this_room": "更改此房间的主题",
+            "download_file": "从媒体仓库下载文件",
+            "receive_membership_active_room": "查看活跃房间何时有人加入、离开或被邀请",
+            "receive_membership_this_room": "查看此房间何时有人加入、离开或被邀请",
+            "remove_ban_invite_leave_active_room": "移除、禁止或邀请他人进入活跃房间并使你离开",
+            "remove_ban_invite_leave_this_room": "移除、禁止或邀请他人进入此房间并使你离开",
+            "see_avatar_change_active_room": "查看活跃房间中的头像何时被更改",
+            "see_avatar_change_this_room": "查看此房间的头像何时被更改",
+            "see_event_type_sent_active_room": "查看发布到活跃房间的 <b>%(eventType)s</b> 事件",
+            "see_event_type_sent_this_room": "查看发布到此房间的 <b>%(eventType)s</b> 事件",
+            "see_images_sent_active_room": "查看发送到活跃房间的图像",
+            "see_images_sent_this_room": "查看发布到此房间的图像",
+            "see_messages_sent_active_room": "查看发送到活跃房间的消息",
             "see_messages_sent_this_room": "查看发布到此房间的消息",
-            "see_msgtype_sent_active_room": "查看发布到你所活跃的房间的 <b>%(msgtype)s</b> 消息",
+            "see_msgtype_sent_active_room": "查看发布活跃房间的 <b>%(msgtype)s</b> 消息",
             "see_msgtype_sent_this_room": "查看发布到此房间的 <b>%(msgtype)s</b> 消息",
-            "see_name_change_active_room": "查看你的活跃房间的名称何时被修改",
-            "see_name_change_this_room": "查看此房间的名称何时被修改",
-            "see_sent_emotes_active_room": "查看发布到你所活跃的房间的表情",
+            "see_name_change_active_room": "查看活跃房间中的名称何时被更改",
+            "see_name_change_this_room": "查看此房间的名称何时被更改",
+            "see_sent_emotes_active_room": "查看发送到活跃房间的表情",
             "see_sent_emotes_this_room": "查看发布到此房间的表情",
-            "see_sent_files_active_room": "查看发布到你所活跃的房间的一般性文件",
-            "see_sent_files_this_room": "查看发布到此房间的一般性文件",
-            "see_sticker_posted_active_room": "查看何时有人发送贴纸到你所活跃的房间",
-            "see_sticker_posted_this_room": "查看此房间中何时有人发送贴纸",
-            "see_text_messages_sent_active_room": "查看发布到你所活跃的房间的文本消息",
-            "see_text_messages_sent_this_room": "查看发布到此房间的文本消息",
-            "see_topic_change_active_room": "查看你的活跃房间的话题何时被修改",
-            "see_topic_change_this_room": "查看此房间的话题何时被修改",
-            "see_videos_sent_active_room": "查看发布到你所活跃的房间的视频",
+            "see_sent_files_active_room": "查看发布到活跃房间的普通文件",
+            "see_sent_files_this_room": "查看发送到此房间的普通文件",
+            "see_sticker_posted_active_room": "查看任何人发布到活跃房间的贴纸",
+            "see_sticker_posted_this_room": "查看此房间的贴纸何时被发送",
+            "see_text_messages_sent_active_room": "查看发布到活跃房间的文本消息",
+            "see_text_messages_sent_this_room": "查看发送到活跃房间的文本消息",
+            "see_topic_change_active_room": "查看活跃房间中的主题何时被更改",
+            "see_topic_change_this_room": "查看此房间的主题何时被更改",
+            "see_videos_sent_active_room": "查看发送到活跃房间的视频",
             "see_videos_sent_this_room": "查看发布到此房间的视频",
-            "send_emotes_active_room": "在你所活跃的房间以你的身份发送表情",
-            "send_emotes_this_room": "在此房间以你的身份发送表情",
-            "send_event_type_active_room": "以你的身份在你的活跃房间发送<b>%(eventType)s</b>事件",
+            "send_emotes_active_room": "以你的身份在活跃房间发送表情",
+            "send_emotes_this_room": "以你的身份在此房间发送表情",
+            "send_event_type_active_room": "以你的身份在活跃房间中发送<b>%(eventType)s</b>事件",
             "send_event_type_this_room": "以你的身份在此房间发送 <b>%(eventType)s</b> 事件",
-            "send_files_active_room": "在你所活跃的房间以你的身份发送一般性文件",
-            "send_files_this_room": "查看发布到此房间的一般性文件",
-            "send_images_active_room": "在你所活跃的房间以你的身份发送图片",
-            "send_images_this_room": "在此房间以你的身份发送图片",
-            "send_messages_active_room": "在你所活跃的房间以你的身份发送消息",
-            "send_messages_this_room": "在此房间以你的身份发送消息",
-            "send_msgtype_active_room": "在你所活跃的房间以你的身份发送 <b>%(msgtype)s</b> 消息",
-            "send_msgtype_this_room": "在此房间以你的身份发送 <b>%(msgtype)s</b> 消息",
-            "send_stickers_active_room": "发送贴纸到你的活跃房间",
-            "send_stickers_active_room_as_you": "发送贴纸到你所活跃的房间",
-            "send_stickers_this_room": "发送贴纸到此房间",
-            "send_stickers_this_room_as_you": "以你的身份发送贴纸到此房间",
-            "send_text_messages_active_room": "在你所活跃的房间以你的身份发送文本消息",
-            "send_text_messages_this_room": "在此房间以你的身份发送文本消息",
-            "send_videos_active_room": "查看发布到你所活跃的房间的视频",
-            "send_videos_this_room": "查看发布到此房间的视频",
+            "send_files_active_room": "以你的身份在活跃房间发送普通文件",
+            "send_files_this_room": "以你的身份在此房间发送普通文件",
+            "send_images_active_room": "以你的身份在活跃房间发送图像",
+            "send_images_this_room": "以你的身份在此房间发送图片",
+            "send_messages_active_room": "以你的身份在活跃房间发送消息",
+            "send_messages_this_room": "以你的身份在此房间中发送信息",
+            "send_msgtype_active_room": "以你的身份在活跃房间中发送<b>%(msgtype)s</b>消息",
+            "send_msgtype_this_room": "以你的身份在此房间发送 <b>%(msgtype)s</b> 消息",
+            "send_stickers_active_room": "向你的活跃房间发送贴纸",
+            "send_stickers_active_room_as_you": "以你的身份在活跃房间发送贴纸",
+            "send_stickers_this_room": "在此房间发送贴纸",
+            "send_stickers_this_room_as_you": "以你的身份在此房间中发送贴纸",
+            "send_text_messages_active_room": "以你的身份在活跃房间发送文本消息",
+            "send_text_messages_this_room": "以你的身份在此房间发送文本消息",
+            "send_videos_active_room": "以你的身份在活跃房间发送视频",
+            "send_videos_this_room": "以你的身份在此房间发送视频",
             "specific_room": "以上，但也包括 <Room />",
-            "switch_room": "更改当前正在查看哪个房间",
-            "switch_room_message_user": "更改当前正在查看哪个房间、消息或用户"
+            "switch_room": "更改你正在查看的房间",
+            "switch_room_message_user": "更改正在查看的房间、消息或用户"
         },
-        "close_to_view_right_panel": "关闭此小部件以在此面板中查看",
+        "close_to_view_right_panel": "关闭此小部件以在此面板查看",
         "context_menu": {
-            "delete": "删除挂件",
-            "delete_warning": "删除挂件时将为房间中的所有成员删除。你确定要删除此挂件吗？",
+            "delete": "删除小部件",
+            "delete_warning": "删除小部件的同时会为该房间中的所有用户删除。你确定要删除此小部件？",
             "move_left": "向左移动",
             "move_right": "向右移动",
             "remove": "为所有人删除",
@@ -3158,71 +4064,75 @@
             "screenshot": "拍照",
             "start_audio_stream": "开始音频流"
         },
-        "cookie_warning": "此挂件可能使用 cookie。",
-        "error_hangup_description": "你已断开通话。（错误：%(message)s）",
+        "cookie_warning": "此小部件可能会使用 Cookies。",
+        "error_hangup_description": "通话已中断。（错误：(message)s）",
         "error_hangup_title": "连接丢失",
-        "error_loading": "加载挂件时发生错误",
-        "error_mixed_content": "错误 - 混合内容",
-        "error_need_invite_permission": "你需要有邀请用户的权限才能进行此操作。",
-        "error_need_kick_permission": "你需要能够移除用户才能做到那件事。",
+        "error_loading": "载入小部件时出错",
+        "error_mixed_content": "错误：混合内容",
+        "error_need_invite_permission": "你需要能邀请用户才能验证。",
+        "error_need_kick_permission": "你需要能踢出用户以执行此操作。",
         "error_need_to_be_logged_in": "你需要登录。",
-        "error_unable_start_audio_stream_description": "无法开始音频流媒体。",
-        "error_unable_start_audio_stream_title": "开始流直播失败",
-        "modal_data_warning": "此屏幕上的数据与%(widgetDomain)s分享",
-        "modal_title_default": "模态框挂件（Modal Widget）",
-        "no_name": "未知应用",
+        "error_unable_start_audio_stream_description": "无法开始音频串流。",
+        "error_unable_start_audio_stream_title": "无法开始直播",
+        "modal_data_warning": "以下数据将分享给 %(widgetDomain)s",
+        "modal_title_default": "模态窗口小部件",
+        "no_name": "未知 App",
         "open_id_permissions_dialog": {
-            "remember_selection": "记住",
-            "starting_text": "挂件将会验证你的用户 ID，但将无法为你执行动作：",
-            "title": "允许此挂件验证你的身份"
+            "remember_selection": "记住我的选择",
+            "starting_text": "此小部件将验证你的用户 ID，但无法为你执行以下操作：",
+            "title": "允许此小部件验证你的身份"
         },
-        "popout": "在弹出式窗口中打开挂件",
-        "set_room_layout": "将我的房间布局设置给所有人",
-        "shared_data_avatar": "您的个人资料图片URL",
-        "shared_data_device_id": "你的设备ID",
+        "popout": "弹出小部件",
+        "set_room_layout": "为所有人布局",
+        "shared_data_avatar": "个人资料图像 URL",
+        "shared_data_device_id": "你的设备 ID",
+        "shared_data_lang": "你的语言",
         "shared_data_mxid": "你的用户 ID",
         "shared_data_name": "你的显示名称",
         "shared_data_room_id": "房间 ID",
         "shared_data_theme": "你的主题",
         "shared_data_url": "%(brand)s 的链接",
-        "shared_data_warning": "使用此挂件可能会和 %(widgetDomain)s 共享数据 <helpIcon />。",
-        "shared_data_warning_im": "使用此挂件可能会与 %(widgetDomain)s 及您的集成管理器共享数据 <helpIcon />。",
-        "shared_data_widget_id": "挂件 ID",
-        "unencrypted_warning": "挂件不适用消息加密。",
-        "unmaximise": "取消最大化",
-        "unpin_to_view_right_panel": "取消固定此小部件以在此面板中查看"
+        "shared_data_warning": "使用此小部件可能会与 %(widgetDomain)s 共享数据 <helpIcon />。",
+        "shared_data_warning_im": "使用此小部件可能会与 %(widgetDomain)s 与你的集成管理器共享数据 <helpIcon />。",
+        "shared_data_widget_id": "小部件 ID",
+        "unencrypted_warning": "小部件不使用消息加密。",
+        "unmaximise": "还原尺寸",
+        "unpin_to_view_right_panel": "取消钉住此小部件以在此面板中查看"
     },
     "zxcvbn": {
         "suggestions": {
-            "allUppercase": "全大写的密码通常比全小写的更容易猜测",
-            "anotherWord": "再加一两个词。不常见的词更好。",
-            "associatedYears": "避免与你相关联的年份",
-            "capitalization": "大写字母并没有很大的作用",
-            "dates": "避免与你相关联的日期与年份",
-            "l33t": "可预见的替换如将 '@' 替换为 'a' 并不会有太大效果",
-            "longerKeyboardPattern": "使用变化更丰富的字符组合方式",
-            "noNeed": "不一定要有符号、数字或大写字母",
-            "recentYears": "避免年份",
-            "repeated": "避免重复词语与字符",
-            "reverseWords": "把单词倒过来不会比原来的难猜很多",
-            "sequences": "避免递增或递减的序列",
-            "useWords": "用一些字符，避免常用短语"
+            "allUppercase": "全大写几乎与全小写一样容易被猜测到",
+            "anotherWord": "再加一两个词。不常用的词更好。",
+            "associatedYears": "避免与你相关的年份",
+            "capitalization": "大写字母对密码强度的帮助不大",
+            "dates": "避免使用与你相关的日期与年份",
+            "l33t": "像用“@”代替“a”这样可预料的替换行为并没有什么帮助",
+            "longerKeyboardPattern": "使用更复杂的击键序列",
+            "noNeed": "不需要符号、数字或大写字母",
+            "pwned": "如果你在其它地方使用此密码，则应进行更改。",
+            "recentYears": "避免近些年",
+            "repeated": "避免重复的单词与字符",
+            "reverseWords": "颠倒的单词很难被猜测到",
+            "sequences": "避免使用序列",
+            "useWords": "使用若干单词，避免常用口令"
         },
         "warnings": {
-            "common": "这是一个非常常见的密码",
-            "commonNames": "常用姓名和姓氏很容易被猜到",
-            "dates": "日期通常很容易被猜到",
-            "extendedRepeat": "像 “abcabcabc” 这样的重复字符也只比 “abc” 稍微难猜一点点",
-            "keyPattern": "键位短序列很容易被猜到",
-            "namesByThemselves": "姓名和姓氏本身很容易被猜到",
-            "recentYears": "最近的年份很容易被猜到",
-            "sequences": "像 abc 或 6543 这样的序列很容易被猜到",
-            "similarToCommon": "这类似于一个常用密码",
-            "simpleRepeat": "像 “aaa” 这样的重复字符很容易被猜到",
-            "straightRow": "键位在一条直线上的组合很容易被猜到",
-            "topHundred": "这是百大常用密码之一",
-            "topTen": "这是十大常用密码之一",
-            "wordByItself": "单词本身很容易被猜到"
+            "common": "此为常见密码",
+            "commonNames": "常用姓、名容易被猜测到",
+            "dates": "日期通常容易被猜测到",
+            "extendedRepeat": "像“abcabcabc”之类的重复单词比“abc”更难猜测到。",
+            "keyPattern": "简短的击键序列容易被猜测到",
+            "namesByThemselves": "姓、名容易被猜测到",
+            "pwned": "你的密码因 Internet 上的数据泄露而暴露。",
+            "recentYears": "近年来很容易猜到",
+            "sequences": "像“abc”或“6543”之类的序列容易被猜测到",
+            "similarToCommon": "这像是常用密码",
+            "simpleRepeat": "像“aaa”之类的重复的字符容易被猜测到",
+            "straightRow": "在同一列且连续的字母容易被猜测到",
+            "topHundred": "这是百大常用密码",
+            "topTen": "这是十大常用密码",
+            "userInputs": "不应有任何个人或页面相关数据。",
+            "wordByItself": "单词很容易猜测到"
         }
     }
 }
diff --git a/apps/web/src/i18n/strings/zh_Hant.json b/apps/web/src/i18n/strings/zh_Hant.json
index bc6d8a9be0..47079c9d9d 100644
--- a/apps/web/src/i18n/strings/zh_Hant.json
+++ b/apps/web/src/i18n/strings/zh_Hant.json
@@ -1874,8 +1874,6 @@
             "aliases_section": "聊天室位址",
             "avatar_field_label": "聊天室大頭照",
             "canonical_alias_field_label": "主要位址",
-            "default_url_previews_off": "此聊天室已預設對參與者停用網址預覽。",
-            "default_url_previews_on": "此聊天室已預設對參與者啟用網址預覽。",
             "description_space": "編輯您的聊天空間的設定。",
             "error_creating_alias_description": "建立該位址時發生錯誤。伺服器可能不允許這麼做，或是有暫時性的問題。",
             "error_creating_alias_title": "建立位址錯誤",
@@ -1902,12 +1900,7 @@
             "published_aliases_explainer_space": "任何伺服器上的人都可以使用已發佈的位址加入您的聊天空間。",
             "published_aliases_section": "已發佈的位址",
             "save": "儲存變更",
-            "topic_field_label": "聊天室主題",
-            "url_preview_encryption_warning": "在加密的聊天室中（這個就是），會預設停用網址預覽以確保您的家伺服器（產生預覽資訊的地方）無法透過這個聊天室收集您看到的連結的相關資訊。",
-            "url_preview_explainer": "當某人在他們的訊息中放置網址時，可以顯示如標題、描述與網頁上的圖片等等來給您更多關於該連結的資訊。",
-            "url_previews_section": "網址預覽",
-            "user_url_previews_default_off": "您已預設<a>停用</a>網址預覽。",
-            "user_url_previews_default_on": "您已預設<a>停用</a>網址預覽。"
+            "topic_field_label": "聊天室主題"
         },
         "notifications": {
             "browse_button": "瀏覽",
@@ -2242,8 +2235,6 @@
             "spell_check_locale_placeholder": "選擇語系"
         },
         "inline_url_previews_default": "預設啟用行內網址預覽",
-        "inline_url_previews_room": "對此聊天室中的參與者預設啟用網址預覽",
-        "inline_url_previews_room_account": "對此聊天室啟用網址預覽（僅影響您）",
         "insert_trailing_colon_mentions": "在使用者於訊息開頭提及之後插入跟隨冒號",
         "jump_to_bottom_on_send": "傳送訊息時，跳到時間軸底部",
         "key_backup": {
diff --git a/apps/web/src/renderer/utils.tsx b/apps/web/src/renderer/utils.tsx
index 4ebbd0b365..303d7cbf11 100644
--- a/apps/web/src/renderer/utils.tsx
+++ b/apps/web/src/renderer/utils.tsx
@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type JSX } from "react";
-import { type DOMNode, Element, type HTMLReactParserOptions, type Text } from "html-react-parser";
+import { type DOMNode, type Element, type HTMLReactParserOptions, type Text } from "html-react-parser";
 import { type MatrixEvent, type Room } from "matrix-js-sdk/src/matrix";
 
 /**
@@ -89,7 +89,7 @@ export const combineRenderers =
                     if (result) return result;
                 }
             }
-            if (node instanceof Element) {
+            if (node.type === "tag") {
                 const tagName = node.tagName.toLowerCase() as keyof HTMLElementTagNameMap;
                 for (const replacer of renderers) {
                     const result = replacer[tagName]?.(node, parametersWithReplace, index);
diff --git a/apps/web/src/settings/Settings.tsx b/apps/web/src/settings/Settings.tsx
index cb7fccc304..4b05f7320c 100644
--- a/apps/web/src/settings/Settings.tsx
+++ b/apps/web/src/settings/Settings.tsx
@@ -51,6 +51,8 @@ import MediaPreviewConfigController from "./controllers/MediaPreviewConfigContro
 import InviteRulesConfigController from "./controllers/InviteRulesConfigController.ts";
 import { type ComputedInviteConfig } from "../@types/invite-rules.ts";
 import BlockInvitesConfigController from "./controllers/BlockInvitesConfigController.ts";
+import RequiresSettingsController from "./controllers/RequiresSettingsController.ts";
+import { type OrderedCustomSections, type CustomSectionsData } from "../stores/room-list-v3/section.ts";
 
 export const defaultWatchManager = new WatchManager();
 
@@ -372,6 +374,8 @@ export interface Settings {
     "inviteRules": IBaseSetting<ComputedInviteConfig>;
     "blockInvites": IBaseSetting<boolean>;
     "Developer.elementCallUrl": IBaseSetting<string>;
+    "RoomList.CustomSectionData": IBaseSetting<CustomSectionsData>;
+    "RoomList.OrderedCustomSections": IBaseSetting<OrderedCustomSections>;
 }
 
 export type SettingKey = keyof Settings;
@@ -1140,22 +1144,22 @@ export const SETTINGS: Settings = {
         controller: new UIFeatureController(UIFeature.AdvancedEncryption),
     },
     "urlPreviewsEnabled": {
-        supportedLevels: LEVELS_ROOM_SETTINGS_WITH_ROOM,
-        displayName: {
-            "default": _td("settings|inline_url_previews_default"),
-            "room-account": _td("settings|inline_url_previews_room_account"),
-            "room": _td("settings|inline_url_previews_room"),
-        },
+        // Enabled by default and client configurable as this setting only allows unencrypted
+        // messages to be previewed.
+        supportedLevels: [SettingLevel.DEVICE, SettingLevel.ACCOUNT, SettingLevel.CONFIG],
+        supportedLevelsAreOrdered: true,
+        displayName: _td("settings|inline_url_previews_default"),
         default: true,
         controller: new UIFeatureController(UIFeature.URLPreviews),
     },
     "urlPreviewsEnabled_e2ee": {
-        supportedLevels: [SettingLevel.ROOM_DEVICE],
-        displayName: {
-            "room-device": _td("settings|inline_url_previews_room_account"),
-        },
+        // Can only be enabled per-device to ensure neither the homeserver nor client config
+        // can impact the user's choices.
+        supportedLevels: [SettingLevel.DEVICE],
+        supportedLevelsAreOrdered: true,
+        displayName: _td("settings|inline_url_previews_encrypted"),
         default: false,
-        controller: new UIFeatureController(UIFeature.URLPreviews),
+        controller: new RequiresSettingsController([UIFeature.URLPreviews, "urlPreviewsEnabled"]),
     },
     "notificationsEnabled": {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
@@ -1370,6 +1374,22 @@ export const SETTINGS: Settings = {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         default: {},
     },
+    /**
+     * Managed by the {@link RoomListStoreV3}
+     * Store the custom section data for the room list
+     */
+    "RoomList.CustomSectionData": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        default: {},
+    },
+    /**
+     * Managed by the {@link RoomListStoreV3}
+     * Store the ordering of the custom sections for the room list
+     */
+    "RoomList.OrderedCustomSections": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        default: [],
+    },
     [UIFeature.RoomHistorySettings]: {
         supportedLevels: LEVELS_UI_FEATURE,
         default: true,
diff --git a/apps/web/src/settings/SettingsStore.ts b/apps/web/src/settings/SettingsStore.ts
index 0852583fc1..c2f0eb98c8 100644
--- a/apps/web/src/settings/SettingsStore.ts
+++ b/apps/web/src/settings/SettingsStore.ts
@@ -654,40 +654,6 @@ export default class SettingsStore {
         return null;
     }
 
-    /**
-     * Migrate the setting for URL previews in e2e rooms from room account
-     * data to the room device level.
-     *
-     * @param isFreshLogin True if the user has just logged in, false if a previous session is being restored.
-     */
-    private static async migrateURLPreviewsE2EE(isFreshLogin: boolean): Promise<void> {
-        const MIGRATION_DONE_FLAG = "url_previews_e2ee_migration_done";
-        if (localStorage.getItem(MIGRATION_DONE_FLAG)) return;
-        if (isFreshLogin) return;
-
-        const client = MatrixClientPeg.safeGet();
-
-        while (!client.isInitialSyncComplete()) {
-            await new Promise((r) => client.once(ClientEvent.Sync, r));
-        }
-
-        logger.info("Performing one-time settings migration of URL previews in E2EE rooms");
-
-        const roomAccounthandler = LEVEL_HANDLERS[SettingLevel.ROOM_ACCOUNT];
-
-        for (const room of client.getRooms()) {
-            // We need to use the handler directly because this setting is no longer supported
-            // at this level at all
-            const val = roomAccounthandler.getValue("urlPreviewsEnabled_e2ee", room.roomId);
-
-            if (val !== undefined) {
-                await SettingsStore.setValue("urlPreviewsEnabled_e2ee", room.roomId, SettingLevel.ROOM_DEVICE, val);
-            }
-        }
-
-        localStorage.setItem(MIGRATION_DONE_FLAG, "true");
-    }
-
     /**
      * Migrate the setting for visible images to a setting.
      */
@@ -739,15 +705,6 @@ export default class SettingsStore {
      * Runs or queues any setting migrations needed.
      */
     public static runMigrations(isFreshLogin: boolean): void {
-        // This can be removed once enough users have run a version of Element with
-        // this migration. A couple of months after its release should be sufficient
-        // (so around October 2024).
-        // The consequences of missing the migration are only that URL previews will
-        // be disabled in E2EE rooms.
-        SettingsStore.migrateURLPreviewsE2EE(isFreshLogin).catch((e) => {
-            logger.error("Failed to migrate URL previews in E2EE rooms:", e);
-        });
-
         // This can be removed once enough users have run a version of Element with
         // this migration.
         // The consequences of missing the migration are that previously shown images
diff --git a/apps/web/src/settings/controllers/RequiresSettingsController.ts b/apps/web/src/settings/controllers/RequiresSettingsController.ts
new file mode 100644
index 0000000000..a5bbc4b26b
--- /dev/null
+++ b/apps/web/src/settings/controllers/RequiresSettingsController.ts
@@ -0,0 +1,34 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import SettingController from "./SettingController";
+import SettingsStore from "../SettingsStore";
+import type { BooleanSettingKey } from "../Settings.tsx";
+
+/**
+ * Disables a setting & forces it's value if one or more settings are not enabled
+ */
+export default class RequiresSettingsController extends SettingController {
+    public constructor(
+        public readonly settingNames: BooleanSettingKey[],
+        private forcedValue = false,
+    ) {
+        super();
+    }
+
+    public getValueOverride(): any {
+        if (this.settingDisabled) {
+            // per the docs: we force a disabled state when the feature isn't active
+            return this.forcedValue;
+        }
+        return null; // no override
+    }
+
+    public get settingDisabled(): boolean {
+        return this.settingNames.some((s) => !SettingsStore.getValue(s));
+    }
+}
diff --git a/apps/web/src/settings/handlers/RoomAccountSettingsHandler.ts b/apps/web/src/settings/handlers/RoomAccountSettingsHandler.ts
index 939c267a15..5da1a0c5f0 100644
--- a/apps/web/src/settings/handlers/RoomAccountSettingsHandler.ts
+++ b/apps/web/src/settings/handlers/RoomAccountSettingsHandler.ts
@@ -76,15 +76,6 @@ export default class RoomAccountSettingsHandler extends MatrixClientBackedSettin
     };
 
     public getValue(settingName: string, roomId: string): any {
-        // Special case URL previews
-        if (settingName === "urlPreviewsEnabled") {
-            const content = this.getSettings(roomId, "org.matrix.room.preview_urls") || {};
-
-            // Check to make sure that we actually got a boolean
-            if (typeof content["disable"] !== "boolean") return null;
-            return !content["disable"];
-        }
-
         // Special case allowed widgets
         if (settingName === "allowedWidgets") {
             return this.getSettings(roomId, ALLOWED_WIDGETS_EVENT_TYPE);
diff --git a/apps/web/src/stores/room-list-v3/RoomListStoreV3.ts b/apps/web/src/stores/room-list-v3/RoomListStoreV3.ts
index 71c5a1a9cb..f2527c9971 100644
--- a/apps/web/src/stores/room-list-v3/RoomListStoreV3.ts
+++ b/apps/web/src/stores/room-list-v3/RoomListStoreV3.ts
@@ -40,6 +40,7 @@ import { DefaultTagID } from "./skip-list/tag";
 import { ExcludeTagsFilter } from "./skip-list/filters/ExcludeTagsFilter";
 import { TagFilter } from "./skip-list/filters/TagFilter";
 import { filterBoolean } from "../../utils/arrays";
+import { createSection } from "./section";
 
 /**
  * These are the filters passed to the room skip list.
@@ -59,6 +60,10 @@ export enum RoomListStoreV3Event {
     ListsUpdate = "lists_update",
     // The event which is called when the room list is loaded.
     ListsLoaded = "lists_loaded",
+    /** Fired when a new section is created in the room list. */
+    SectionCreated = "section_created",
+    /** Fired when a room's tags change. */
+    RoomTagged = "room_tagged",
 }
 
 // The result object for returning rooms from the store
@@ -89,6 +94,9 @@ export const CHATS_TAG = "chats";
 
 export const LISTS_UPDATE_EVENT = RoomListStoreV3Event.ListsUpdate;
 export const LISTS_LOADED_EVENT = RoomListStoreV3Event.ListsLoaded;
+export const SECTION_CREATED_EVENT = RoomListStoreV3Event.SectionCreated;
+export const ROOM_TAGGED_EVENT = RoomListStoreV3Event.RoomTagged;
+
 /**
  * This store allows for fast retrieval of the room list in a sorted and filtered manner.
  * This is the third such implementation hence the "V3".
@@ -108,7 +116,7 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
     /**
      * Defines the display order of sections.
      */
-    private readonly sortedTags: string[] = [DefaultTagID.Favourite, CHATS_TAG, DefaultTagID.LowPriority];
+    private sortedTags: string[] = [];
 
     private readonly msc3946ProcessDynamicPredecessor: boolean;
 
@@ -125,6 +133,8 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
             this.onActiveSpaceChanged();
         });
         SpaceStore.instance.on(UPDATE_HOME_BEHAVIOUR, () => this.onActiveSpaceChanged());
+        SettingsStore.watchSetting("RoomList.OrderedCustomSections", null, () => this.onOrderedCustomSectionsChange());
+        this.loadCustomSections();
     }
 
     /**
@@ -236,6 +246,7 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
             case "MatrixActions.Room.tags": {
                 const room = payload.room;
                 this.addRoomAndEmit(room);
+                this.emit(ROOM_TAGGED_EVENT);
                 break;
             }
 
@@ -463,6 +474,43 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
             };
         });
     }
+
+    /**
+     * Handle changes to the order of custom sections.
+     * Reloads the custom sections, updates the skip list filters to reflect the new order and emits an update.
+     * Emit {@link LISTS_UPDATE_EVENT}.
+     */
+    private onOrderedCustomSectionsChange(): void {
+        this.loadCustomSections();
+        if (!this.roomSkipList) return;
+        this.roomSkipList.useNewFilters(this.getSkipListFilters());
+        this.scheduleEmit();
+    }
+
+    /**
+     * Create a new section.
+     * Emits {@link SECTION_CREATED_EVENT} if the section was successfully created.
+     */
+    public async createSection(): Promise<void> {
+        const tag = await createSection();
+        if (!tag) return;
+        this.emit(SECTION_CREATED_EVENT, tag);
+    }
+
+    /**
+     * Returns the ordered section tags.
+     */
+    public get orderedSectionTags(): string[] {
+        return this.sortedTags;
+    }
+
+    /**
+     * Load the custom sections from the settings store and update the sorted tags.
+     */
+    private loadCustomSections(): void {
+        const orderedCustomSections = SettingsStore.getValue("RoomList.OrderedCustomSections");
+        this.sortedTags = [DefaultTagID.Favourite, ...orderedCustomSections, CHATS_TAG, DefaultTagID.LowPriority];
+    }
 }
 
 export default class RoomListStoreV3 {
diff --git a/apps/web/src/stores/room-list-v3/section.ts b/apps/web/src/stores/room-list-v3/section.ts
new file mode 100644
index 0000000000..389ec56a91
--- /dev/null
+++ b/apps/web/src/stores/room-list-v3/section.ts
@@ -0,0 +1,71 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { SettingLevel } from "../../settings/SettingLevel";
+import SettingsStore from "../../settings/SettingsStore";
+import Modal from "../../Modal";
+import { CreateSectionDialog } from "../../components/views/dialogs/CreateSectionDialog";
+
+type Tag = string;
+
+/**
+ * Prefix for custom section tags.
+ */
+export const CUSTOM_SECTION_TAG_PREFIX = "element.io.section.";
+
+/**
+ * Checks if a given tag is a custom section tag.
+ * @param tag - The tag to check.
+ * @returns True if the tag is a custom section tag, false otherwise.
+ */
+export function isCustomSectionTag(tag: string): boolean {
+    return tag.startsWith(CUSTOM_SECTION_TAG_PREFIX);
+}
+
+/**
+ * Structure of the custom section stored in the settings. The tag is used as a unique identifier for the section, and the name is given by the user.
+ */
+type CustomSection = {
+    tag: Tag;
+    name: string;
+};
+
+/**
+ * The custom sections data is stored as a record in the settings, where the key is the section tag and the value is the section data (name and tag).
+ */
+export type CustomSectionsData = Record<Tag, CustomSection>;
+/**
+ * Ordered list of custom section tags.
+ */
+export type OrderedCustomSections = Tag[];
+
+/**
+ * Creates a new custom section by showing a dialog to the user to enter the section name.
+ * If the user confirms, it generates a unique tag for the section, saves the section data in the settings, and updates the ordered list of sections.
+ *
+ * @return A promise that resolves to the new section tag if created, or undefined if cancelled.
+ */
+export async function createSection(): Promise<string | undefined> {
+    const modal = Modal.createDialog(CreateSectionDialog);
+
+    const [shouldCreateSection, sectionName] = await modal.finished;
+    if (!shouldCreateSection || !sectionName) return undefined;
+
+    const tag = `${CUSTOM_SECTION_TAG_PREFIX}${window.crypto.randomUUID()}`;
+    const newSection: CustomSection = { tag, name: sectionName };
+
+    // Save the new section data
+    const sectionData = SettingsStore.getValue("RoomList.CustomSectionData") || {};
+    sectionData[tag] = newSection;
+    await SettingsStore.setValue("RoomList.CustomSectionData", null, SettingLevel.ACCOUNT, sectionData);
+
+    // Add the new section to the ordered list of sections
+    const orderedSections = SettingsStore.getValue("RoomList.OrderedCustomSections") || [];
+    orderedSections.push(tag);
+    await SettingsStore.setValue("RoomList.OrderedCustomSections", null, SettingLevel.ACCOUNT, orderedSections);
+    return tag;
+}
diff --git a/apps/web/src/stores/room-list-v3/skip-list/RoomSkipList.ts b/apps/web/src/stores/room-list-v3/skip-list/RoomSkipList.ts
index 93c898ee21..dfa5b678e0 100644
--- a/apps/web/src/stores/room-list-v3/skip-list/RoomSkipList.ts
+++ b/apps/web/src/stores/room-list-v3/skip-list/RoomSkipList.ts
@@ -76,6 +76,17 @@ export class RoomSkipList implements Iterable<Room> {
         this.seed(rooms);
     }
 
+    /**
+     * Change the filters used by the skip list.
+     * This will apply the new filters to all existing nodes.
+     */
+    public useNewFilters(filters: Filter[]): void {
+        this.filters = filters;
+        for (const node of this.roomNodeMap.values()) {
+            node.applyFilters(this.filters);
+        }
+    }
+
     /**
      * Removes a given room from the skip list.
      */
diff --git a/apps/web/src/utils/DialogOpener.ts b/apps/web/src/utils/DialogOpener.ts
index 9eadf63adf..fff7297a68 100644
--- a/apps/web/src/utils/DialogOpener.ts
+++ b/apps/web/src/utils/DialogOpener.ts
@@ -57,6 +57,7 @@ export class DialogOpener {
                     {
                         roomId: payload.room_id || SdkContextClass.instance.roomViewStore.getRoomId(),
                         initialTabId: payload.initial_tab_id,
+                        sdkContext: SdkContextClass.instance,
                     },
                     /*className=*/ undefined,
                     /*isPriority=*/ false,
diff --git a/apps/web/src/utils/RoomUpgrade.ts b/apps/web/src/utils/RoomUpgrade.ts
index 6fe6a2f4d1..d92038e0db 100644
--- a/apps/web/src/utils/RoomUpgrade.ts
+++ b/apps/web/src/utils/RoomUpgrade.ts
@@ -10,13 +10,13 @@ import { ClientEvent, EventType, type MatrixClient, type Room } from "matrix-js-
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import { inviteMultipleToRoom, showAnyInviteErrors } from "../RoomInvite";
+import { showAnyInviteErrors } from "../RoomInvite";
 import Modal, { type IHandle } from "../Modal";
 import { _t } from "../languageHandler";
 import ErrorDialog from "../components/views/dialogs/ErrorDialog";
 import SpaceStore from "../stores/spaces/SpaceStore";
 import Spinner from "../components/views/elements/Spinner";
-import type { MultiInviterOptions } from "./MultiInviter";
+import MultiInviter, { type MultiInviterOptions } from "./MultiInviter";
 
 export interface RoomUpgradeProgress {
     roomUpgraded: boolean;
@@ -158,7 +158,8 @@ async function inviteUsersToRoom(
     userIds: string[],
     inviteOptions: MultiInviterOptions,
 ): Promise<void> {
-    const result = await inviteMultipleToRoom(client, roomId, userIds, inviteOptions);
+    const inviter = new MultiInviter(client, roomId, inviteOptions);
+    const states = await inviter.invite(userIds);
     const room = client.getRoom(roomId)!;
-    showAnyInviteErrors(result.states, room, result.inviter);
+    showAnyInviteErrors(states, room, inviter);
 }
diff --git a/apps/web/src/utils/SessionLock.ts b/apps/web/src/utils/SessionLock.ts
index c93097aba1..afa18c2644 100644
--- a/apps/web/src/utils/SessionLock.ts
+++ b/apps/web/src/utils/SessionLock.ts
@@ -7,7 +7,6 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { logger } from "matrix-js-sdk/src/logger";
-import { v4 as uuidv4 } from "uuid";
 
 /*
  * Functionality for checking that only one instance is running at once
@@ -107,7 +106,7 @@ export function checkSessionLockFree(): boolean {
  */
 export async function getSessionLock(onNewInstance: () => Promise<void>): Promise<boolean> {
     /** unique ID for this session */
-    const sessionIdentifier = uuidv4();
+    const sessionIdentifier = window.crypto.randomUUID();
 
     const prefixedLogger = logger.getChild(`getSessionLock[${sessionIdentifier}]`);
 
diff --git a/apps/web/src/utils/form.ts b/apps/web/src/utils/form.ts
new file mode 100644
index 0000000000..21017c393e
--- /dev/null
+++ b/apps/web/src/utils/form.ts
@@ -0,0 +1,17 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import type React from "react";
+
+/**
+ * onSubmit handler which calls preventDefault and stopPropagation on the event
+ * @param e submit event
+ */
+export function onSubmitPreventDefault(e: SubmitEvent | React.SubmitEvent): void {
+    e.preventDefault();
+    e.stopPropagation();
+}
diff --git a/apps/web/src/utils/leave-behaviour.ts b/apps/web/src/utils/leave-behaviour.ts
index 8b7ee02f36..9756fa50cf 100644
--- a/apps/web/src/utils/leave-behaviour.ts
+++ b/apps/web/src/utils/leave-behaviour.ts
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { sleep } from "matrix-js-sdk/src/utils";
 import React, { type ReactNode } from "react";
 import { EventStatus, MatrixEventEvent, type Room, type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import Modal, { type IHandle } from "../Modal";
 import Spinner from "../components/views/elements/Spinner";
@@ -25,6 +26,8 @@ import { type AfterLeaveRoomPayload } from "../dispatcher/payloads/AfterLeaveRoo
 import { bulkSpaceBehaviour } from "./space";
 import { SdkContextClass } from "../contexts/SDKContext";
 import SettingsStore from "../settings/SettingsStore";
+import { CallStore } from "../stores/CallStore";
+import LegacyCallHandler from "../LegacyCallHandler";
 
 export async function leaveRoomBehaviour(
     matrixClient: MatrixClient,
@@ -59,6 +62,23 @@ export async function leaveRoomBehaviour(
         throw new Error(`Expected to find room for id ${roomId}`);
     }
 
+    // attempt to hang up legacy based calls
+    try {
+        LegacyCallHandler.instance.hangupOrReject(roomId);
+    } catch (e) {
+        logger.warn("Failed to hangup call before leaving room: ", e);
+    }
+
+    // hang up widget based calls
+    const activeCall = CallStore.instance.getActiveCall(roomId);
+    if (activeCall) {
+        try {
+            await activeCall.disconnect();
+        } catch (e) {
+            logger.warn("Failed to disconnect call before leaving room: ", e);
+        }
+    }
+
     // await any queued messages being sent so that they do not fail
     await Promise.all(
         room
diff --git a/apps/web/src/utils/oidc/authorize.ts b/apps/web/src/utils/oidc/authorize.ts
index d409396db9..2e1420e32e 100644
--- a/apps/web/src/utils/oidc/authorize.ts
+++ b/apps/web/src/utils/oidc/authorize.ts
@@ -7,13 +7,13 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { completeAuthorizationCodeGrant, generateOidcAuthorizationUrl } from "matrix-js-sdk/src/oidc/authorize";
-import { type QueryDict } from "matrix-js-sdk/src/utils";
 import { type OidcClientConfig } from "matrix-js-sdk/src/matrix";
 import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 import { type IdTokenClaims } from "oidc-client-ts";
 
 import { OidcClientError } from "./error";
 import PlatformPeg from "../../PlatformPeg";
+import { type URLParams } from "../../vector/url_utils.ts";
 
 /**
  * Start OIDC authorization code flow
@@ -23,6 +23,7 @@ import PlatformPeg from "../../PlatformPeg";
  * @param clientId this client's id as registered with configured issuer
  * @param homeserverUrl target homeserver
  * @param identityServerUrl OPTIONAL target identity server
+ * @param isRegistration if true will set the prompt to "create"
  * @returns Promise that resolves after we have navigated to auth endpoint
  */
 export const startOidcLogin = async (
@@ -47,24 +48,30 @@ export const startOidcLogin = async (
         nonce,
         prompt,
         urlState: PlatformPeg.get()?.getOidcClientState(),
+        responseMode: delegatedAuthConfig.response_modes_supported?.includes("fragment") ? "fragment" : "query",
     });
 
     window.location.href = authorizationUrl;
 };
 
 /**
- * Gets `code` and `state` query params
+ * Gets `code` and `state` response params
  *
- * @param queryParams
+ * @param urlParams - the parameters to read
+ * @param responseMode - the response_mode used in the auth request
  * @returns code and state
  * @throws when code and state are not valid strings
  */
-const getCodeAndStateFromQueryParams = (queryParams: QueryDict): { code: string; state: string } => {
-    const code = queryParams["code"];
-    const state = queryParams["state"];
-
+const getCodeAndStateFromParams = (
+    { code, state }: NonNullable<URLParams["oidc_fragment"]>,
+    responseMode: "fragment" | "query",
+): { code: string; state: string } => {
     if (!code || typeof code !== "string" || !state || typeof state !== "string") {
-        throw new Error(OidcClientError.InvalidQueryParameters);
+        if (responseMode === "fragment") {
+            throw new Error(OidcClientError.InvalidFragmentParameters);
+        } else {
+            throw new Error(OidcClientError.InvalidQueryParameters);
+        }
     }
     return { code, state };
 };
@@ -89,14 +96,18 @@ type CompleteOidcLoginResponse = {
 };
 /**
  * Attempt to complete authorization code flow to get an access token
- * @param queryParams the query-parameters extracted from the real query-string of the starting URI.
+ * @param urlParams the parameters extracted from the app-load URI.
+ * @param responseMode - the response_mode used in the auth request
  * @returns Promise that resolves with a CompleteOidcLoginResponse when login was successful
  * @throws When we failed to get a valid access token
  */
-export const completeOidcLogin = async (queryParams: QueryDict): Promise<CompleteOidcLoginResponse> => {
-    const { code, state } = getCodeAndStateFromQueryParams(queryParams);
+export const completeOidcLogin = async (
+    urlParams: NonNullable<URLParams["oidc_fragment"]>,
+    responseMode: "fragment" | "query",
+): Promise<CompleteOidcLoginResponse> => {
+    const { code, state } = getCodeAndStateFromParams(urlParams, responseMode);
     const { homeserverUrl, tokenResponse, idTokenClaims, identityServerUrl, oidcClientSettings } =
-        await completeAuthorizationCodeGrant(code, state);
+        await completeAuthorizationCodeGrant(code, state, responseMode);
 
     return {
         homeserverUrl,
diff --git a/apps/web/src/utils/oidc/error.ts b/apps/web/src/utils/oidc/error.ts
index f9334a739c..3cc5c14ec5 100644
--- a/apps/web/src/utils/oidc/error.ts
+++ b/apps/web/src/utils/oidc/error.ts
@@ -17,6 +17,7 @@ import { _t } from "../../languageHandler";
  */
 export enum OidcClientError {
     InvalidQueryParameters = "Invalid query parameters for OIDC native login. `code` and `state` are required.",
+    InvalidFragmentParameters = "Invalid fragment parameters for OIDC native login. `code` and `state` are required.",
 }
 
 /**
@@ -30,6 +31,7 @@ export const getOidcErrorMessage = (error: Error): string | ReactNode => {
         case OidcError.MissingOrInvalidStoredState:
             return _t("auth|oidc|missing_or_invalid_stored_state");
         case OidcClientError.InvalidQueryParameters:
+        case OidcClientError.InvalidFragmentParameters:
         case OidcError.CodeExchangeFailed:
         case OidcError.InvalidBearerTokenResponse:
         case OidcError.InvalidIdToken:
diff --git a/apps/web/src/utils/room/tagRoom.ts b/apps/web/src/utils/room/tagRoom.ts
index ae9b52a174..62bac2ffca 100644
--- a/apps/web/src/utils/room/tagRoom.ts
+++ b/apps/web/src/utils/room/tagRoom.ts
@@ -13,20 +13,29 @@ import { DefaultTagID, type TagID } from "../../stores/room-list-v3/skip-list/ta
 import RoomListActions from "../../actions/RoomListActions";
 import dis from "../../dispatcher/dispatcher";
 import { getTagsForRoom } from "./getTagsForRoom";
+import { isCustomSectionTag } from "../../stores/room-list-v3/section";
 
 /**
- * Toggle tag for a given room
+ * Toggle tag for a given room.
+ * A room can only be in one section: either a custom section, Favourite, or LowPriority.
+ * Applying any of these will atomically replace the current section tag.
  * @param room The room to tag
  * @param tagId The tag to invert
  */
 export function tagRoom(room: Room, tagId: TagID): void {
-    if (tagId === DefaultTagID.Favourite || tagId === DefaultTagID.LowPriority) {
-        const inverseTag = tagId === DefaultTagID.Favourite ? DefaultTagID.LowPriority : DefaultTagID.Favourite;
-        const isApplied = getTagsForRoom(room).includes(tagId);
-        const removeTag = isApplied ? tagId : inverseTag;
-        const addTag = isApplied ? null : tagId;
-        dis.dispatch(RoomListActions.tagRoom(room.client, room, removeTag, addTag));
-    } else {
+    if (tagId !== DefaultTagID.Favourite && tagId !== DefaultTagID.LowPriority && !isCustomSectionTag(tagId)) {
         logger.warn(`Unexpected tag ${tagId} applied to ${room.roomId}`);
+        return;
     }
+
+    // Find the section tag currently applied (Fav, LowPriority, or custom) — at most one exists
+    const currentSectionTag =
+        getTagsForRoom(room).find(
+            (t) => t === DefaultTagID.Favourite || t === DefaultTagID.LowPriority || isCustomSectionTag(t),
+        ) ?? null;
+
+    const isApplied = currentSectionTag === tagId;
+    const removeTag = currentSectionTag;
+    const addTag = isApplied ? null : tagId;
+    dis.dispatch(RoomListActions.tagRoom(room.client, room, removeTag, addTag));
 }
diff --git a/apps/web/src/vector/app.tsx b/apps/web/src/vector/app.tsx
index cc4da3373a..db5d0e4e99 100644
--- a/apps/web/src/vector/app.tsx
+++ b/apps/web/src/vector/app.tsx
@@ -17,7 +17,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { AutoDiscovery, type ClientConfig } from "matrix-js-sdk/src/matrix";
 import { WrapperLifecycle, type WrapperOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WrapperLifecycle";
 
-import type { QueryDict } from "matrix-js-sdk/src/utils";
 import PlatformPeg from "../PlatformPeg";
 import AutoDiscoveryUtils from "../utils/AutoDiscoveryUtils";
 import * as Lifecycle from "../Lifecycle";
@@ -27,8 +26,8 @@ import { SnakedObject } from "../utils/SnakedObject";
 import MatrixChat from "../components/structures/MatrixChat";
 import { type ValidatedServerConfig } from "../utils/ValidatedServerConfig";
 import { ModuleRunner } from "../modules/ModuleRunner";
-import { parseQs } from "./url_utils";
 import { getInitialScreenAfterLogin, getScreenFromLocation, init as initRouting, onNewScreen } from "./routing";
+import { type URLParams } from "./url_utils.ts";
 import { UserFriendlyError } from "../languageHandler";
 import { ModuleApi } from "../modules/Api";
 import { RoomView } from "../components/structures/RoomView";
@@ -41,20 +40,22 @@ logger.log(`Application is running in ${process.env.NODE_ENV} mode`);
 
 window.matrixLogger = logger;
 
-function onTokenLoginCompleted(): void {
-    // if we did a token login, we're now left with the token, hs and is
-    // url as query params in the url;
-    // if we did an oidc authorization code flow login, we're left with the auth code and state
-    // as query params in the url;
-    // a little nasty but let's redirect to clear them.
+function onTokenLoginCompleted(urlParams: URLParams, fragmentAfterLogin: string): void {
     const url = new URL(window.location.href);
 
-    url.searchParams.delete("no_universal_links");
-    url.searchParams.delete("loginToken");
-    url.searchParams.delete("state");
-    url.searchParams.delete("code");
+    // if we did a token login, we're now left with the login token as query param in the url; clear it out
+    for (const param in { ...urlParams.legacy_sso, ...urlParams.oidc_query }) {
+        url.searchParams.delete(param);
+    }
 
-    logger.log(`Redirecting to ${url.href} to drop delegated authentication params from queryparams`);
+    // Added by OIDC auth to avoid being hijacked by Element X on macOS
+    url.searchParams.delete("no_universal_links");
+
+    // if we did an oidc authorization code flow login, we're left with the auth code and state in the fragment in the url,
+    // we clear it out by using the fragmentAfterLogin
+    url.hash = fragmentAfterLogin;
+
+    logger.log(`Redirecting to ${url.href} to drop authentication params from url`);
     window.history.replaceState(null, "", url.href);
 }
 
@@ -87,7 +88,7 @@ async function redirectToSso(config: ValidatedServerConfig): Promise<boolean> {
     return false;
 }
 
-export async function loadApp(fragParams: QueryDict, matrixChatRef: React.Ref<MatrixChat>): Promise<ReactElement> {
+export async function loadApp(urlParams: URLParams, matrixChatRef: React.Ref<MatrixChat>): Promise<ReactElement> {
     // XXX: This lives here because certain components import so many things that importing it in a sensible place (eg.
     // the builtins module or init.tsx) causes a circular dependency.
     ModuleApi.instance.builtins.setComponents({
@@ -99,8 +100,6 @@ export async function loadApp(fragParams: QueryDict, matrixChatRef: React.Ref<Ma
     initRouting();
     const platform = PlatformPeg.get();
 
-    const params = parseQs(window.location);
-
     const urlWithoutQuery = window.location.protocol + "//" + window.location.host + window.location.pathname;
     logger.log("Vector starting at " + urlWithoutQuery);
 
@@ -113,7 +112,7 @@ export async function loadApp(fragParams: QueryDict, matrixChatRef: React.Ref<Ma
     // Before we continue, let's see if we're supposed to do an SSO redirect
     const [userId] = await Lifecycle.getStoredSessionOwner();
     const hasPossibleToken = !!userId;
-    const isReturningFromSso = !!params.loginToken || (!!params.code && !!params.state);
+    const isReturningFromSso = !!urlParams.legacy_sso || !!urlParams.oidc_fragment || !!urlParams.oidc_query;
     const ssoRedirects = config.sso_redirect_options || {};
     let autoRedirect = ssoRedirects.immediate === true;
     // XXX: This path matching is a bit brittle, but better to do it early instead of in the app code.
@@ -155,8 +154,7 @@ export async function loadApp(fragParams: QueryDict, matrixChatRef: React.Ref<Ma
                     ref={matrixChatRef}
                     onNewScreen={onNewScreen}
                     config={config}
-                    realQueryParams={params}
-                    startingFragmentQueryParams={fragParams}
+                    urlParams={urlParams}
                     enableGuest={!config.disable_guests}
                     onTokenLoginCompleted={onTokenLoginCompleted}
                     initialScreenAfterLogin={initialScreenAfterLogin}
diff --git a/apps/web/src/vector/index.ts b/apps/web/src/vector/index.ts
index 2010c95d75..6a01f32e53 100644
--- a/apps/web/src/vector/index.ts
+++ b/apps/web/src/vector/index.ts
@@ -14,7 +14,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { shouldPolyfill as shouldPolyFillIntlSegmenter } from "@formatjs/intl-segmenter/should-polyfill.js";
 
 // These are things that can run before the skin loads - be careful not to reference the react-sdk though.
-import { parseQsFromFragment } from "./url_utils";
+import { parseAppUrl } from "./url_utils";
 import "./modernizr.cjs";
 
 // Import shared components CSS
@@ -136,13 +136,13 @@ async function start(): Promise<void> {
         // give rageshake a chance to load/fail, we don't actually assert rageshake loads, we allow it to fail if no IDB
         await settled(rageshakePromise);
 
-        const fragparts = parseQsFromFragment(window.location);
+        const parsedUrl = parseAppUrl(window.location);
 
         // don't try to redirect to the native apps if we're
         // verifying a 3pid (but after we've loaded the config)
         // or if the user is following a deep link
         // (https://github.com/element-hq/element-web/issues/7378)
-        const preventRedirect = fragparts.params.client_secret || fragparts.location.length > 0;
+        const preventRedirect = !!parsedUrl.params.threepid || parsedUrl.location.length > 0;
 
         if (!preventRedirect) {
             const isIos = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
@@ -232,7 +232,7 @@ async function start(): Promise<void> {
 
         // Finally, load the app. All of the other react-sdk imports are in this file which causes the skinner to
         // run on the components.
-        await loadApp(fragparts.params);
+        await loadApp(parsedUrl.params);
     } catch (err) {
         logger.error(err);
         // Like the compatibility page, AWOOOOOGA at the user
diff --git a/apps/web/src/vector/init.tsx b/apps/web/src/vector/init.tsx
index 6706b75672..2557e74ba3 100644
--- a/apps/web/src/vector/init.tsx
+++ b/apps/web/src/vector/init.tsx
@@ -13,7 +13,6 @@ import React, { StrictMode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { ModuleLoader } from "@element-hq/element-web-module-api";
 
-import type { QueryDict } from "matrix-js-sdk/src/utils";
 import * as languageHandler from "../languageHandler";
 import SettingsStore from "../settings/SettingsStore";
 import PlatformPeg from "../PlatformPeg";
@@ -26,6 +25,7 @@ import PWAPlatform from "./platform/PWAPlatform";
 import WebPlatform from "./platform/WebPlatform";
 import { initRageshake, initRageshakeStore } from "./rageshakesetup";
 import { ModuleApi } from "../modules/Api.ts";
+import { type URLParams } from "./url_utils.ts";
 
 export const rageshakePromise = initRageshake();
 
@@ -86,7 +86,7 @@ export async function loadTheme(): Promise<void> {
     return setTheme();
 }
 
-export async function loadApp(fragParams: QueryDict): Promise<void> {
+export async function loadApp(urlParams: URLParams): Promise<void> {
     // load app.js async so that its code is not executed immediately and we can catch any exceptions
     const module = await import(
         /* webpackChunkName: "element-web-app" */
@@ -96,7 +96,7 @@ export async function loadApp(fragParams: QueryDict): Promise<void> {
     function setWindowMatrixChat(matrixChat: MatrixChat): void {
         window.matrixChat = matrixChat;
     }
-    const app = await module.loadApp(fragParams, setWindowMatrixChat);
+    const app = await module.loadApp(urlParams, setWindowMatrixChat);
     const root = createRoot(document.getElementById("matrixchat")!);
     root.render(app);
 }
diff --git a/apps/web/src/vector/platform/WebPlatform.ts b/apps/web/src/vector/platform/WebPlatform.ts
index a794e160a4..88aa7ee9cc 100644
--- a/apps/web/src/vector/platform/WebPlatform.ts
+++ b/apps/web/src/vector/platform/WebPlatform.ts
@@ -16,7 +16,6 @@ import dis from "../../dispatcher/dispatcher";
 import { hideToast as hideUpdateToast, showToast as showUpdateToast } from "../../toasts/UpdateToast";
 import { Action } from "../../dispatcher/actions";
 import { type CheckUpdatesPayload } from "../../dispatcher/payloads/CheckUpdatesPayload";
-import { parseQs } from "../url_utils";
 import { _t } from "../../languageHandler";
 import ToastStore from "../../stores/ToastStore.ts";
 import GenericToast from "../../components/views/toasts/GenericToast.tsx";
@@ -174,8 +173,8 @@ export default class WebPlatform extends BasePlatform {
         // cache-control: nocache HTTP header set, but Firefox doesn't always obey it :/
         console.log("startUpdater, current version is " + getNormalizedAppVersion(WebPlatform.VERSION));
         void this.pollForUpdate((version: string, newVersion: string) => {
-            const query = parseQs(location);
-            if (query.updated) {
+            const url = new URL(window.location.href);
+            if (url.searchParams.has("updated")) {
                 console.log("Update reloaded but still on an old version, stopping");
                 // We just reloaded already and are still on the old version!
                 // Show the toast rather than reload in a loop.
@@ -184,7 +183,6 @@ export default class WebPlatform extends BasePlatform {
             }
 
             // Set updated as a cachebusting query param and reload the page.
-            const url = new URL(window.location.href);
             url.searchParams.set("updated", newVersion);
             console.log("Update reloading to " + url.toString());
             window.location.href = url.toString();
diff --git a/apps/web/src/vector/routing.ts b/apps/web/src/vector/routing.ts
index 964c0c0684..149316424c 100644
--- a/apps/web/src/vector/routing.ts
+++ b/apps/web/src/vector/routing.ts
@@ -11,15 +11,20 @@ Please see LICENSE files in the repository root for full details.
 import { logger } from "matrix-js-sdk/src/logger";
 import { type QueryDict } from "matrix-js-sdk/src/utils";
 
-import { parseQsFromFragment } from "./url_utils";
+import { parseQsFromFragment, searchParamsToQueryDict } from "./url_utils";
 
 let lastLocationHashSet: string | null = null;
 
-export function getScreenFromLocation(location: Location): { screen: string; params: QueryDict } {
+export interface IScreen {
+    screen: string;
+    params: QueryDict;
+}
+
+export function getScreenFromLocation(location: Location): IScreen {
     const fragparts = parseQsFromFragment(location);
     return {
         screen: fragparts.location.substring(1),
-        params: fragparts.params,
+        params: fragparts.params ? searchParamsToQueryDict(fragparts.params) : {},
     };
 }
 
diff --git a/apps/web/src/vector/url_utils.ts b/apps/web/src/vector/url_utils.ts
index 2b5202806e..34d671c678 100644
--- a/apps/web/src/vector/url_utils.ts
+++ b/apps/web/src/vector/url_utils.ts
@@ -5,32 +5,134 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type QueryDict, decodeParams } from "matrix-js-sdk/src/utils";
+import { type QueryDict } from "matrix-js-sdk/src/utils";
 
 // We want to support some name / value pairs in the fragment
-// so we're re-using query string like format
-//
-export function parseQsFromFragment(location: Location): { location: string; params: QueryDict } {
+// so we're re-using query string like format, where we accept a `?key=value&key2=value2` string at the end of the hash
+// but we also accept a hash like `key=value&key2=value2` for compatibility with oAuth response_mode = fragment
+export function parseQsFromFragment(url: Location | URL): { location: string; params?: URLSearchParams } {
     // if we have a fragment, it will start with '#', which we need to drop.
     // (if we don't, this will return '').
-    const fragment = location.hash.substring(1);
+    const fragment = url.hash.substring(1);
 
     // our fragment may contain a query-param-like section. we need to fish
     // this out *before* URI-decoding because the params may contain ? and &
     // characters which are only URI-encoded once.
-    const hashparts = fragment.split("?");
+    const [main, query] = fragment.split("?", 2);
 
-    const result = {
-        location: decodeURIComponent(hashparts[0]),
-        params: <QueryDict>{},
-    };
-
-    if (hashparts.length > 1) {
-        result.params = decodeParams(hashparts[1]);
+    // Handle oAuth-style fragment parameters
+    if (main.includes("=")) {
+        return {
+            location: "",
+            params: new URLSearchParams(main),
+        };
     }
-    return result;
+
+    return {
+        location: decodeURIComponent(main),
+        params: query ? new URLSearchParams(query) : undefined,
+    };
 }
 
-export function parseQs(location: Location): QueryDict {
-    return decodeParams(location.search.substring(1));
+/**
+ * Convert a URLSearchParams object to QueryDict
+ * Any keys with multiple values will be grouped into an array
+ * @param params the URLSearchParams to convert
+ */
+export function searchParamsToQueryDict(params: URLSearchParams): QueryDict {
+    const queryDict: QueryDict = {};
+    for (const key of params.keys()) {
+        const val = params.getAll(key);
+        queryDict[key] = val.length === 1 ? val[0] : val;
+    }
+    return queryDict;
+}
+
+const urlParameterConfig = {
+    // Query string params for legacy SSO login, added by the Matrix homeserver
+    legacy_sso: {
+        keys: ["loginToken"],
+        location: "query",
+    },
+    // Fragment params for OIDC login, added by the Identity Provider
+    oidc_fragment: {
+        keys: ["code", "state"],
+        location: "fragment",
+    },
+    // Query params for OIDC login, added by the Identity Provider, used as fallback when fragment is unsupported
+    oidc_query: {
+        keys: ["code", "state"],
+        location: "query",
+    },
+    // Fragment params relating to 3pid (email) invites, added in url within the invite email itself
+    threepid: {
+        keys: ["client_secret", "session_id", "hs_url", "is_url", "sid"],
+        location: "fragment",
+    },
+    // XXX: unclear where, if anywhere, this is set
+    defaults: {
+        keys: ["defaultUsername"],
+        location: "fragment",
+    },
+    // XXX: Fragment params seemingly relating to 3pid invites, though the code in the area doubts they are ever specified
+    guest: {
+        keys: ["guest_user_id", "guest_access_token"],
+        location: "fragment",
+    },
+} as const satisfies Record<
+    string,
+    {
+        keys: string[];
+        // Query params live in the query string, in the middle of the URL, after a `?`, in a `key=value` format, delimited by `&`.
+        // Fragment params live in the fragment string, at the end of the URL, after a `?`, in a `key=value` format, delimited by `&`.
+        location: "query" | "fragment";
+    }
+>;
+
+export type URLParams = Partial<{
+    -readonly [K in keyof typeof urlParameterConfig]: Partial<{
+        [P in (typeof urlParameterConfig)[K]["keys"][number]]: string;
+    }>;
+}>;
+
+/**
+ * Utility to parse parameters held in the app's URL.
+ * Currently focusing only on at-load URL parameters.
+ * @param url - the URL to parse.
+ * @return an object keyed by the groups defined in {@link urlParameterConfig} with values for each key listed,
+ *     sourced from the location (query/fragment/either) specified. If no parameters in a group are found the entire group
+ *     will be omitted from the returned object to simplify presence checking.
+ */
+export function parseAppUrl(url: Location | URL): {
+    location: string;
+    params: URLParams;
+} {
+    const queryParams = new URLSearchParams(url.search);
+    const parsedFragment = parseQsFromFragment(url);
+
+    const urlParams: Partial<URLParams> = {};
+
+    for (const group in urlParameterConfig) {
+        const groupKey = group as keyof URLParams;
+        const groupConfig = urlParameterConfig[groupKey];
+
+        const params = groupConfig.location === "fragment" ? parsedFragment.params : queryParams;
+        if (!params) continue; // no params
+
+        const target: Record<string, string> = {};
+        for (const k of groupConfig.keys) {
+            const key = k as (typeof groupConfig)["keys"][number];
+
+            const value = params.get(key);
+            if (value !== null) {
+                target[key] = value;
+            }
+        }
+
+        if (Object.keys(target).length > 0) {
+            urlParams[groupKey] = target;
+        }
+    }
+
+    return { params: urlParams as URLParams, location: parsedFragment.location };
 }
diff --git a/apps/web/src/viewmodels/message-body/UrlPreviewGroupViewModel.ts b/apps/web/src/viewmodels/message-body/UrlPreviewGroupViewModel.ts
index 6d42baf2d5..6cafe3b5af 100644
--- a/apps/web/src/viewmodels/message-body/UrlPreviewGroupViewModel.ts
+++ b/apps/web/src/viewmodels/message-body/UrlPreviewGroupViewModel.ts
@@ -34,8 +34,10 @@ export interface UrlPreviewGroupViewModelProps {
 }
 
 export const MAX_PREVIEWS_WHEN_LIMITED = 2;
-export const PREVIEW_WIDTH = 100;
-export const PREVIEW_HEIGHT = 100;
+export const PREVIEW_WIDTH_PX = 478;
+export const PREVIEW_HEIGHT_PX = 200;
+export const MIN_PREVIEW_PX = 96;
+export const MIN_IMAGE_SIZE_BYTES = 8192;
 
 export enum PreviewVisibility {
     /**
@@ -100,21 +102,26 @@ export class UrlPreviewGroupViewModel
             typeof response["og:description"] === "string" && response["og:description"].trim()
                 ? response["og:description"].trim()
                 : undefined;
-        let siteName =
+        const siteName =
             typeof response["og:site_name"] === "string" && response["og:site_name"].trim()
                 ? response["og:site_name"].trim()
-                : undefined;
+                : new URL(link).hostname;
 
+        // If there is no title, use the description as the title.
         if (!title && description) {
             title = description;
             description = undefined;
         } else if (!title && siteName) {
             title = siteName;
-            siteName = undefined;
         } else if (!title) {
             title = link;
         }
 
+        // If the description matches the site name, don't bother with a description.
+        if (description && description.toLowerCase() === siteName.toLowerCase()) {
+            description = undefined;
+        }
+
         return {
             title,
             description: description && decode(description),
@@ -122,6 +129,50 @@ export class UrlPreviewGroupViewModel
         };
     }
 
+    /**
+     * Calculate the best possible author from an opengraph response.
+     * @param response The opengraph response
+     * @returns The author value, or undefined if no valid author could be found.
+     */
+    private static getAuthorFromResponse(response: IPreviewUrlResponse): UrlPreview["author"] {
+        let calculatedAuthor: string | undefined;
+        if (response["og:type"] === "article") {
+            if (typeof response["article:author"] === "string" && response["article:author"]) {
+                calculatedAuthor = response["article:author"];
+            }
+            // Otherwise fall through to check the profile.
+        }
+        if (typeof response["profile:username"] === "string" && response["profile:username"]) {
+            calculatedAuthor = response["profile:username"];
+        }
+        if (calculatedAuthor && URL.canParse(calculatedAuthor)) {
+            // Some sites return URLs as authors which doesn't look good in Element, so discard it.
+            return;
+        }
+        return calculatedAuthor;
+    }
+
+    /**
+     * Calculate whether the provided image from the preview response is an full size preview or
+     * a site icon.
+     * @returns `true` if the image should be used as a preview, otherwise `false`
+     */
+    private static isImagePreview(width?: number, height?: number, bytes?: number): boolean {
+        // We can't currently distinguish from a preview image and a favicon. Neither OpenGraph nor Matrix
+        // have a clear distinction, so we're using a heuristic here to check the dimensions & size of the file and
+        // deciding whether to render it as a full preview or icon.
+        if (width && width < MIN_PREVIEW_PX) {
+            return false;
+        }
+        if (height && height < MIN_PREVIEW_PX) {
+            return false;
+        }
+        if (bytes && bytes < MIN_IMAGE_SIZE_BYTES) {
+            return false;
+        }
+        return true;
+    }
+
     /**
      * Determine if an anchor element can be rendered into a preview.
      * If it can, return the value of `href`
@@ -278,6 +329,7 @@ export class UrlPreviewGroupViewModel
         }
 
         const { title, description, siteName } = UrlPreviewGroupViewModel.getBaseMetadataFromResponse(preview, link);
+        const author = UrlPreviewGroupViewModel.getAuthorFromResponse(preview);
         const hasImage = preview["og:image"] && typeof preview?.["og:image"] === "string";
         // Ensure we have something relevant to render.
         // The title must not just be the link, or we must have an image.
@@ -285,31 +337,46 @@ export class UrlPreviewGroupViewModel
             return null;
         }
         let image: UrlPreview["image"];
+        let siteIcon: string | undefined;
         if (typeof preview["og:image"] === "string" && this.visibility > PreviewVisibility.MediaHidden) {
             const media = mediaFromMxc(preview["og:image"], this.client);
             const declaredHeight = UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["og:image:height"]);
             const declaredWidth = UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["og:image:width"]);
-            const width = Math.min(declaredWidth ?? PREVIEW_WIDTH, PREVIEW_WIDTH);
-            const height = thumbHeight(width, declaredHeight, PREVIEW_WIDTH, PREVIEW_WIDTH) ?? PREVIEW_WIDTH;
-            const thumb = media.getThumbnailOfSourceHttp(PREVIEW_WIDTH, PREVIEW_HEIGHT, "scale");
-            // No thumb, no preview.
-            if (thumb) {
-                image = {
-                    imageThumb: thumb,
-                    imageFull: media.srcHttp ?? thumb,
-                    width,
-                    height,
-                    fileSize: UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["matrix:image:size"]),
-                };
+            const imageSize = UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["matrix:image:size"]);
+            const alt = typeof preview["og:image:alt"] === "string" ? preview["og:image:alt"] : undefined;
+
+            const isImagePreview = UrlPreviewGroupViewModel.isImagePreview(declaredWidth, declaredHeight, imageSize);
+            if (isImagePreview) {
+                const width = Math.min(declaredWidth ?? PREVIEW_WIDTH_PX, PREVIEW_WIDTH_PX);
+                const height =
+                    thumbHeight(width, declaredHeight, PREVIEW_WIDTH_PX, PREVIEW_WIDTH_PX) ?? PREVIEW_WIDTH_PX;
+                const thumb = media.getThumbnailOfSourceHttp(PREVIEW_WIDTH_PX, PREVIEW_HEIGHT_PX, "scale");
+                const playable = !!preview["og:video"] || !!preview["og:video:type"] || !!preview["og:audio"];
+                // No thumb, no preview.
+                if (thumb) {
+                    image = {
+                        imageThumb: thumb,
+                        imageFull: media.srcHttp ?? thumb,
+                        width,
+                        height,
+                        fileSize: UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["matrix:image:size"]),
+                        alt,
+                        playable,
+                    };
+                }
+            } else if (media.srcHttp) {
+                siteIcon = media.srcHttp;
             }
         }
 
         const result = {
             link,
             title,
+            author,
             description,
             siteName,
-            showTooltipOnLink: link !== title && PlatformPeg.get()?.needsUrlTooltips(),
+            siteIcon,
+            showTooltipOnLink: !!(link !== title && PlatformPeg.get()?.needsUrlTooltips()),
             image,
         } satisfies UrlPreview;
         this.previewCache.set(link, result);
diff --git a/apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts b/apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts
index 8a5547e6e9..55626cb252 100644
--- a/apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts
+++ b/apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts
@@ -199,8 +199,11 @@ export class RoomListHeaderViewModel
         SettingsStore.setValue("RoomList.showMessagePreview", null, SettingLevel.DEVICE, isMessagePreviewEnabled);
         this.snapshot.merge({ isMessagePreviewEnabled });
     };
-}
 
+    public createSection = (): void => {
+        RoomListStoreV3.instance.createSection();
+    };
+}
 /**
  * Get the initial snapshot for the RoomListHeaderViewModel.
  * @param spaceStore - The space store instance.
@@ -272,6 +275,10 @@ function computeHeaderSpaceState(
     );
     const canAccessSpaceSettings = Boolean(activeSpace && shouldShowSpaceSettings(activeSpace));
 
+    const isSectionFeatureEnabled = SettingsStore.getValue("feature_room_list_sections");
+    const useComposeIcon = !isSectionFeatureEnabled;
+    const canCreateSection = isSectionFeatureEnabled;
+
     return {
         title,
         canCreateRoom,
@@ -280,5 +287,7 @@ function computeHeaderSpaceState(
         displaySpaceMenu,
         canInviteInSpace,
         canAccessSpaceSettings,
+        canCreateSection,
+        useComposeIcon,
     };
 }
diff --git a/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts b/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts
index b2f24da66d..a87e69f0fb 100644
--- a/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts
+++ b/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts
@@ -10,6 +10,7 @@ import {
     RoomNotifState,
     type RoomListItemViewSnapshot,
     type RoomListItemViewActions,
+    type Section,
 } from "@element-hq/web-shared-components";
 import { RoomEvent } from "matrix-js-sdk/src/matrix";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
@@ -37,6 +38,8 @@ import { Action } from "../../dispatcher/actions";
 import type { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import PosthogTrackers from "../../PosthogTrackers";
 import { type Call, CallEvent } from "../../models/Call";
+import RoomListStoreV3, { CHATS_TAG } from "../../stores/room-list-v3/RoomListStoreV3";
+import { _t } from "../../languageHandler";
 
 interface RoomItemProps {
     room: Room;
@@ -95,6 +98,13 @@ export class RoomListItemViewModel
         this.disposables.trackListener(props.room, RoomEvent.Name, this.onRoomChanged);
         this.disposables.trackListener(props.room, RoomEvent.Tags, this.onRoomChanged);
 
+        const orderSectionsRef = SettingsStore.watchSetting("RoomList.OrderedCustomSections", null, () =>
+            this.onOrderedCustomSectionsChange(),
+        );
+        this.disposables.track(() => {
+            SettingsStore.unwatchSetting(orderSectionsRef);
+        });
+
         // Load message preview asynchronously (sync data is already complete)
         void this.loadAndSetMessagePreview();
     }
@@ -180,6 +190,7 @@ export class RoomListItemViewModel
         this.snapshot.merge({
             ...newItem,
             notification: keepIfSame(this.snapshot.current.notification, newItem.notification),
+            sections: keepIfSame(this.snapshot.current.sections, newItem.sections),
             // Preserve message preview - it's managed separately by loadAndSetMessagePreview
             messagePreview: this.snapshot.current.messagePreview,
         });
@@ -276,6 +287,11 @@ export class RoomListItemViewModel
         const callType =
             call?.callType === CallType.Voice ? "voice" : call?.callType === CallType.Video ? "video" : undefined;
 
+        const canMoveToSection = SettingsStore.getValue("feature_room_list_sections");
+
+        // Build sections list for the "Move to section" submenu
+        const sections: Section[] = canMoveToSection ? RoomListItemViewModel.buildSections(roomTags) : [];
+
         return {
             id: room.roomId,
             room,
@@ -303,6 +319,8 @@ export class RoomListItemViewModel
             canMarkAsRead,
             canMarkAsUnread,
             roomNotifState,
+            canMoveToSection,
+            sections,
         };
     }
 
@@ -381,4 +399,46 @@ export class RoomListItemViewModel
         const echoChamber = EchoChamber.forRoom(this.props.room);
         echoChamber.notificationVolume = elementNotifState;
     };
+
+    public onCreateSection = (): void => {
+        RoomListStoreV3.instance.createSection();
+    };
+
+    public onToggleSection = (tag: string): void => {
+        tagRoom(this.props.room, tag);
+    };
+
+    private onOrderedCustomSectionsChange = (): void => {
+        // Rebuild sections list to reflect new order
+        const sections = RoomListItemViewModel.buildSections(this.props.room.tags);
+        this.snapshot.merge({ sections: keepIfSame(this.snapshot.current.sections, sections) });
+    };
+
+    /**
+     * Build the list of available sections for the "Move to section" submenu.
+     * Order follows the canonical section order from RoomListStoreV3.
+     */
+    private static buildSections(roomTags: Room["tags"]): Section[] {
+        const customSectionData = SettingsStore.getValue("RoomList.CustomSectionData") || {};
+
+        return (
+            RoomListStoreV3.instance.orderedSectionTags
+                // Exclude the Chats section because the user toggle the other sections to move rooms in and out of the Chats section.
+                .filter((tag) => tag !== CHATS_TAG)
+                .map((tag) => ({
+                    tag,
+                    name: RoomListItemViewModel.getSectionName(tag, customSectionData),
+                    isSelected: Boolean(roomTags[tag]),
+                }))
+        );
+    }
+
+    /**
+     * Get the display name for a section based on its tag.
+     */
+    private static getSectionName(tag: string, customSectionData: Record<string, { name: string }>): string {
+        if (tag === DefaultTagID.Favourite) return _t("room_list|section|favourites");
+        if (tag === DefaultTagID.LowPriority) return _t("room_list|section|low_priority");
+        return customSectionData[tag]?.name || tag;
+    }
 }
diff --git a/apps/web/src/viewmodels/room-list/RoomListSectionHeaderViewModel.ts b/apps/web/src/viewmodels/room-list/RoomListSectionHeaderViewModel.ts
index 08f7335ab8..a861c0894a 100644
--- a/apps/web/src/viewmodels/room-list/RoomListSectionHeaderViewModel.ts
+++ b/apps/web/src/viewmodels/room-list/RoomListSectionHeaderViewModel.ts
@@ -19,6 +19,10 @@ import { type RoomNotificationState } from "../../stores/notifications/RoomNotif
 interface RoomListSectionHeaderViewModelProps {
     tag: string;
     title: string;
+    /**
+     * The ID of the current space.
+     */
+    spaceId: string;
     onToggleExpanded: (isExpanded: boolean) => void;
 }
 
@@ -31,12 +35,19 @@ export class RoomListSectionHeaderViewModel
      */
     private roomNotificationStates = new Set<RoomNotificationState>();
 
+    /**
+     * Tracks the expanded/collapsed state per space.
+     * Key is spaceId. Defaults to expanded if not set.
+     */
+    private readonly expandedBySpace = new Map<string, boolean>();
+
     public constructor(props: RoomListSectionHeaderViewModelProps) {
         super(props, { id: props.tag, title: props.title, isExpanded: true, isUnread: false });
     }
 
     public onClick = (): void => {
         const isExpanded = !this.snapshot.current.isExpanded;
+        this.expandedBySpace.set(this.props.spaceId, isExpanded);
         this.snapshot.merge({ isExpanded });
         this.props.onToggleExpanded(isExpanded);
     };
@@ -48,6 +59,25 @@ export class RoomListSectionHeaderViewModel
         return this.snapshot.current.isExpanded;
     }
 
+    /**
+     * Set whether the section is expanded for the current space.
+     * This will not trigger the onToggleExpanded callback.
+     */
+    public set isExpanded(value: boolean) {
+        this.expandedBySpace.set(this.props.spaceId, value);
+        this.snapshot.merge({ isExpanded: value });
+    }
+
+    /**
+     * Switch to a different space, restoring the expanded state for that space.
+     * Defaults to expanded if no state has been saved for the space.
+     */
+    public setSpace(spaceId: string): void {
+        this.props.spaceId = spaceId;
+        const isExpanded = this.expandedBySpace.get(this.props.spaceId) ?? true;
+        this.snapshot.merge({ isExpanded });
+    }
+
     /**
      * Update the rooms tracked by this section header for unread state computation.
      * Only subscribes to new rooms and unsubscribes from rooms no longer in the section.
diff --git a/apps/web/src/viewmodels/room-list/RoomListViewModel.ts b/apps/web/src/viewmodels/room-list/RoomListViewModel.ts
index b81bd8725a..e711e340b0 100644
--- a/apps/web/src/viewmodels/room-list/RoomListViewModel.ts
+++ b/apps/web/src/viewmodels/room-list/RoomListViewModel.ts
@@ -13,6 +13,7 @@ import {
     type RoomListViewState,
     type RoomListSection,
     _t,
+    type ToastType,
 } from "@element-hq/web-shared-components";
 import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
 
@@ -91,6 +92,11 @@ export class RoomListViewModel
     // Don't clear section vm because we want to keep the expand/collapse state even during space changes.
     private readonly roomSectionHeaderViewModels = new Map<string, RoomListSectionHeaderViewModel>();
 
+    /**
+     * Reference to the currently displayed toast, used to automatically close the toast after a timeout.
+     */
+    private toastRef?: number;
+
     public constructor(props: RoomListViewModelProps) {
         const activeSpace = SpaceStore.instance.activeSpaceRoom;
 
@@ -144,6 +150,20 @@ export class RoomListViewModel
             this.onListsLoaded,
         );
 
+        // Subscribe to section creation
+        this.disposables.trackListener(
+            RoomListStoreV3.instance,
+            RoomListStoreV3Event.SectionCreated as any,
+            this.onSectionCreated as (...args: unknown[]) => void,
+        );
+
+        // Subscribe to room tagging
+        this.disposables.trackListener(
+            RoomListStoreV3.instance,
+            RoomListStoreV3Event.RoomTagged as any,
+            this.onRoomTagged,
+        );
+
         // Subscribe to active room changes to update selected room
         const dispatcherRef = dispatcher.register(this.onDispatch);
         this.disposables.track(() => {
@@ -182,6 +202,16 @@ export class RoomListViewModel
         // Update roomsMap immediately before clearing VMs
         this.updateRoomsMap(this.roomsResult);
 
+        // When a filter is toggled on, expand sections that have results so they're visible
+        if (newFilter) {
+            for (const section of this.roomsResult.sections) {
+                if (section.rooms.length > 0) {
+                    const sectionHeaderVM = this.roomSectionHeaderViewModels.get(section.tag);
+                    if (sectionHeaderVM) sectionHeaderVM.isExpanded = true;
+                }
+            }
+        }
+
         this.updateRoomListData();
     };
 
@@ -254,10 +284,12 @@ export class RoomListViewModel
     public getSectionHeaderViewModel(tag: string): RoomListSectionHeaderViewModel {
         if (this.roomSectionHeaderViewModels.has(tag)) return this.roomSectionHeaderViewModels.get(tag)!;
 
-        const title = TAG_TO_TITLE_MAP[tag] || tag;
+        const customSections = SettingsStore.getValue("RoomList.CustomSectionData");
+        const title = TAG_TO_TITLE_MAP[tag] || customSections[tag]?.name || tag;
         const viewModel = new RoomListSectionHeaderViewModel({
             tag,
             title,
+            spaceId: this.roomsResult.spaceId,
             onToggleExpanded: () => this.updateRoomListData(),
         });
         this.roomSectionHeaderViewModels.set(tag, viewModel);
@@ -367,6 +399,11 @@ export class RoomListViewModel
 
             this.updateRoomsMap(this.roomsResult);
 
+            // Restore the expanded/collapsed state for the new space
+            for (const viewModel of this.roomSectionHeaderViewModels.values()) {
+                viewModel.setSpace(newSpaceId);
+            }
+
             // Space changed - get the last selected room for the new space to prevent flicker
             const lastSelectedRoom = SpaceStore.instance.getLastSelectedRoomIdForSpace(newSpaceId);
 
@@ -471,6 +508,7 @@ export class RoomListViewModel
     private async updateRoomListData(
         isRoomChange: boolean = false,
         roomIdOverride: string | null = null,
+        scrollToSectionTag: string | undefined = undefined,
     ): Promise<void> {
         // Determine the room ID to use for calculations
         // Use override if provided (e.g., during space changes), otherwise fall back to RoomViewStore
@@ -501,6 +539,12 @@ export class RoomListViewModel
             this.roomsResult,
             (tag) => this.roomSectionHeaderViewModels.get(tag)?.isExpanded ?? true,
         );
+        // If it's a flat list, we need to make sure the single section is expanded and has all rooms, otherwise the room list will be empty
+        if (isFlatList) {
+            const chatSections = this.roomSectionHeaderViewModels.get(CHATS_TAG);
+            if (chatSections) chatSections.isExpanded = true;
+            chatSections?.setRooms(this.roomsResult.sections.flatMap((section) => section.rooms));
+        }
         this.sections = sections;
 
         // Calculate the active room index from the computed sections (which exclude collapsed sections' rooms)
@@ -509,17 +553,23 @@ export class RoomListViewModel
         // Update filter keys - only update if they have actually changed to prevent unnecessary re-renders of the room list
         const previousFilterKeys = this.snapshot.current.roomListState.filterKeys;
         const newFilterKeys = this.roomsResult.filterKeys?.map((k) => String(k));
+        const viewSections = toRoomListSection(this.sections);
+
+        const resolvedScrollToSectionTag =
+            scrollToSectionTag && viewSections.some((s) => s.id === scrollToSectionTag)
+                ? scrollToSectionTag
+                : undefined;
+
         const roomListState: RoomListViewState = {
             activeRoomIndex,
             spaceId: this.roomsResult.spaceId,
             filterKeys: keepIfSame(previousFilterKeys, newFilterKeys),
+            scrollToSectionTag: resolvedScrollToSectionTag,
         };
 
         const activeFilterId = this.activeFilter !== undefined ? filterKeyToIdMap.get(this.activeFilter) : undefined;
         const isRoomListEmpty = this.roomsResult.sections.every((section) => section.rooms.length === 0);
         const isLoadingRooms = RoomListStoreV3.instance.isLoadingRooms;
-
-        const viewSections = toRoomListSection(this.sections);
         const previousSections = this.snapshot.current.sections;
 
         // Single atomic snapshot update
@@ -550,6 +600,31 @@ export class RoomListViewModel
             });
         }
     };
+
+    public onSectionCreated = (tag: string): void => {
+        this.updateRoomListData(false, null, tag);
+        this.showToast("section_created");
+    };
+
+    public onRoomTagged = (): void => {
+        this.showToast("chat_moved");
+    };
+
+    public closeToast: () => void = () => {
+        clearTimeout(this.toastRef);
+        this.snapshot.merge({
+            toast: undefined,
+        });
+    };
+
+    private showToast(toast: ToastType): void {
+        clearTimeout(this.toastRef);
+        this.snapshot.merge({ toast });
+        // Automatically close the toast after 15 seconds
+        this.toastRef = setTimeout(() => {
+            this.closeToast();
+        }, 15 * 1000);
+    }
 }
 
 /**
@@ -562,9 +637,11 @@ function computeSections(
     roomsResult: RoomsResult,
     isSectionExpanded: (tag: string) => boolean,
 ): { sections: Section[]; isFlatList: boolean } {
+    const customSections = SettingsStore.getValue("RoomList.CustomSectionData");
+
     const sections = roomsResult.sections
-        // Only include sections that have rooms
-        .filter((section) => section.rooms.length > 0)
+        // Only include sections that have rooms or are custom sections (which may be empty but should still be shown)
+        .filter((section) => section.rooms.length > 0 || customSections[section.tag])
         // Remove roomIds for sections that are currently collapsed according to their section header view model
         .map((section) => ({
             ...section,
diff --git a/apps/web/src/viewmodels/right-panel/WidgetContextMenuViewModel.tsx b/apps/web/src/viewmodels/room/right-panel/WidgetContextMenuViewModel.tsx
similarity index 91%
rename from apps/web/src/viewmodels/right-panel/WidgetContextMenuViewModel.tsx
rename to apps/web/src/viewmodels/room/right-panel/WidgetContextMenuViewModel.tsx
index 83f02a1c05..43932592fb 100644
--- a/apps/web/src/viewmodels/right-panel/WidgetContextMenuViewModel.tsx
+++ b/apps/web/src/viewmodels/room/right-panel/WidgetContextMenuViewModel.tsx
@@ -17,22 +17,22 @@ import {
 } from "@element-hq/web-shared-components";
 import { type ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
 
-import ErrorDialog from "../../components/views/dialogs/ErrorDialog";
-import QuestionDialog from "../../components/views/dialogs/QuestionDialog";
-import MatrixClientContext from "../../contexts/MatrixClientContext";
-import { useScopedRoomContext } from "../../contexts/ScopedRoomContext";
-import { _t } from "../../languageHandler";
-import { getConfigLivestreamUrl, startJitsiAudioLivestream } from "../../Livestream";
-import Modal from "../../Modal";
-import SettingsStore from "../../settings/SettingsStore";
-import { WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore";
-import { WidgetMessagingStore } from "../../stores/widgets/WidgetMessagingStore";
-import { isAppWidget } from "../../stores/WidgetStore";
-import WidgetUtils from "../../utils/WidgetUtils";
-import { WidgetType } from "../../widgets/WidgetType";
-import { ModuleRunner } from "../../modules/ModuleRunner";
-import { ElementWidget, type WidgetMessaging } from "../../stores/widgets/WidgetMessaging";
-import dis from "../../dispatcher/dispatcher";
+import ErrorDialog from "../../../components/views/dialogs/ErrorDialog";
+import QuestionDialog from "../../../components/views/dialogs/QuestionDialog";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext";
+import { _t } from "../../../languageHandler";
+import { getConfigLivestreamUrl, startJitsiAudioLivestream } from "../../../Livestream";
+import Modal from "../../../Modal";
+import SettingsStore from "../../../settings/SettingsStore";
+import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
+import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
+import { isAppWidget } from "../../../stores/WidgetStore";
+import WidgetUtils from "../../../utils/WidgetUtils";
+import { WidgetType } from "../../../widgets/WidgetType";
+import { ModuleRunner } from "../../../modules/ModuleRunner";
+import { ElementWidget, type WidgetMessaging } from "../../../stores/widgets/WidgetMessaging";
+import dis from "../../../dispatcher/dispatcher";
 
 const checkRevokeButtonState = (
     cli: MatrixClient,
diff --git a/apps/web/src/widgets/CapabilityText.tsx b/apps/web/src/widgets/CapabilityText.tsx
index c64e7ffa0f..5f5c8b9a74 100644
--- a/apps/web/src/widgets/CapabilityText.tsx
+++ b/apps/web/src/widgets/CapabilityText.tsx
@@ -57,6 +57,9 @@ export class CapabilityText {
         [MatrixCapabilities.MSC2931Navigate]: {
             [GENERIC_WIDGET_KIND]: _td("widget|capability|switch_room_message_user"),
         },
+        [MatrixCapabilities.MSC4039DownloadFile]: {
+            [GENERIC_WIDGET_KIND]: _td("widget|capability|download_file"),
+        },
     };
 
     private static stateSendRecvCaps: SendRecvStaticCapText = {
diff --git a/apps/web/test/setupTests.ts b/apps/web/test/setupTests.ts
index 7e68edf19d..f514c10482 100644
--- a/apps/web/test/setupTests.ts
+++ b/apps/web/test/setupTests.ts
@@ -66,3 +66,28 @@ if (env["GITHUB_ACTIONS"] !== undefined) {
 require("./setup/setupManualMocks"); // must be first
 require("./setup/setupLanguage");
 require("./setup/setupConfig");
+
+// Utility to check for React errors during the tests
+// Fails tests on errors like the following:
+// In HTML, <div> cannot be a descendant of <p>.
+// In HTML, <form> cannot be a descendant of <form>.
+// In HTML, text nodes cannot be a child of <thead>.
+// This will cause a hydration error.
+// You provided a `checked` prop to a form field without an `onChange` handler.
+let errors: any[] = [];
+beforeEach(() => {
+    errors = [];
+    const originalError = console.error;
+    jest.spyOn(console, "error").mockImplementation((...args) => {
+        if (/validateDOMNesting|Hydration failed|hydration error|prop to a form field without an/i.test(args[0])) {
+            errors.push(args[0]);
+        }
+        originalError.call(console, ...args);
+    });
+});
+afterEach(() => {
+    mocked(console.error).mockRestore?.();
+    if (errors.length > 0) {
+        throw new Error("Test failed due to React hydration errors in the console.");
+    }
+});
diff --git a/apps/web/test/unit-tests/Lifecycle-test.ts b/apps/web/test/unit-tests/Lifecycle-test.ts
index a9336db114..adac08989d 100644
--- a/apps/web/test/unit-tests/Lifecycle-test.ts
+++ b/apps/web/test/unit-tests/Lifecycle-test.ts
@@ -169,7 +169,7 @@ describe("Lifecycle", () => {
             const prom = Lifecycle.loadSession({
                 enableGuest: true,
                 guestHsUrl: "https://guest.server",
-                fragmentQueryParams: { guest_user_id: "a", guest_access_token: "b" },
+                urlParams: { guest: { guest_user_id: "a", guest_access_token: "b" } },
                 abortSignal: abortController.signal,
             });
             abortController.abort();
diff --git a/apps/web/test/unit-tests/Notifier-test.ts b/apps/web/test/unit-tests/Notifier-test.ts
index ee3a42dfda..bd1b20c0be 100644
--- a/apps/web/test/unit-tests/Notifier-test.ts
+++ b/apps/web/test/unit-tests/Notifier-test.ts
@@ -358,6 +358,46 @@ describe("Notifier", () => {
                 reply,
             );
         });
+
+        it.each([
+            ["This was a triumph", "This was a triumph", "This was a triumph"],
+            ["This was a triumph", "<span data-mx-spoiler>This was a triumph</span>", "[Spoiler]"],
+            ["This was a triumph", '<span data-mx-spoiler="triumph">This was a triumph</span>', "[Spoiler]"],
+            ["foo bar baz", "foo <span data-mx-spoiler>bar</span> baz", "foo [Spoiler] baz"],
+            ["foo foo foo", "foo <span data-mx-spoiler>foo</span> foo", "foo [Spoiler] foo"],
+            [
+                "a b c d e",
+                "a <span data-mx-spoiler>b</span> c <span data-mx-spoiler>d</span> e",
+                "a [Spoiler] c [Spoiler] e",
+            ],
+            ["foo  foo", "foo <span data-mx-spoiler></span> foo", "foo [Spoiler] foo"],
+            ["foo bar baz", "foo <span data-mx-spoiler>b<em>a</em>r</span> baz", "foo [Spoiler] baz"],
+            ["foobar", "<span data-mx-spoiler>foo</span><span data-mx-spoiler>bar</span>", "[Spoiler][Spoiler]"],
+            ["foo bar baz", "<strong>foo <span data-mx-spoiler>bar</span> baz</strong>", "foo [Spoiler] baz"],
+            ["foo <bar> baz", "foo <span data-mx-spoiler>&lt;bar&gt;</span> baz", "foo [Spoiler] baz"],
+            ["foo\nbar\nbaz", "foo<span data-mx-spoiler><br>bar<br></span>baz", "foo[Spoiler]baz"],
+        ])("should hide spoilers in notification", (body, formattedBody, expected) => {
+            const spoilerEvent = mkEvent({
+                event: true,
+                type: EventType.RoomMessage,
+                user: mockClient.getSafeUserId(),
+                room: testRoom.roomId,
+                content: {
+                    msgtype: MsgType.Text,
+                    body: body,
+                    format: "org.matrix.custom.html",
+                    formatted_body: formattedBody,
+                },
+            });
+            Notifier.displayPopupNotification(spoilerEvent, testRoom);
+            expect(MockPlatform.displayNotification).toHaveBeenCalledWith(
+                "@bob:example.org (!room1:server)",
+                expected,
+                expect.any(String),
+                testRoom,
+                spoilerEvent,
+            );
+        });
     });
 
     describe("getSoundForRoom", () => {
diff --git a/apps/web/test/unit-tests/PosthogTrackers-test.ts b/apps/web/test/unit-tests/PosthogTrackers-test.ts
index c835ecacd0..a8904e4080 100644
--- a/apps/web/test/unit-tests/PosthogTrackers-test.ts
+++ b/apps/web/test/unit-tests/PosthogTrackers-test.ts
@@ -18,20 +18,10 @@ describe("PosthogTrackers", () => {
         const tracker = new PosthogTrackers();
         tracker.trackUrlPreview("$123456", false, [
             {
-                title: "A preview",
-                image: {
-                    imageThumb: "abc",
-                    imageFull: "abc",
-                },
-                link: "a-link",
-            },
-        ]);
-        tracker.trackUrlPreview("$123456", false, [
-            {
-                title: "A second preview",
-                link: "a-link",
+                image: {},
             },
         ]);
+        tracker.trackUrlPreview("$123456", false, [{}]);
         // Ignores subsequent calls.
         expect(PosthogAnalytics.instance.trackEvent).toHaveBeenCalledWith({
             eventName: "UrlPreviewRendered",
diff --git a/apps/web/test/unit-tests/RoomInvite-test.ts b/apps/web/test/unit-tests/RoomInvite-test.ts
deleted file mode 100644
index 32ef8dc73f..0000000000
--- a/apps/web/test/unit-tests/RoomInvite-test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
-Copyright 2025 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { getMockClientWithEventEmitter } from "../test-utils";
-import { inviteMultipleToRoom } from "../../src/RoomInvite.tsx";
-
-afterEach(() => {
-    jest.restoreAllMocks();
-});
-
-describe("inviteMultipleToRoom", () => {
-    it("can be called wth no `options`", async () => {
-        const client = getMockClientWithEventEmitter({});
-        const { states, inviter } = await inviteMultipleToRoom(client, "!room:id", []);
-        expect(states).toEqual({});
-
-        // @ts-ignore reference to private property
-        expect(inviter.options).toEqual({});
-    });
-});
diff --git a/apps/web/test/unit-tests/SupportedBrowser-test.ts b/apps/web/test/unit-tests/SupportedBrowser-test.ts
index 64e7e838ab..1f63dfdf07 100644
--- a/apps/web/test/unit-tests/SupportedBrowser-test.ts
+++ b/apps/web/test/unit-tests/SupportedBrowser-test.ts
@@ -67,15 +67,15 @@ describe("SupportedBrowser", () => {
         // Safari 26.0 on macOS
         "Mozilla/5.0 (Macintosh; Intel Mac OS X 15_7_2) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Safari/605.1.15",
         // Latest Firefox on macOS Sonoma
-        "Mozilla/5.0 (Macintosh; Intel Mac OS X 15.7; rv:145.0) Gecko/20100101 Firefox/147.0",
+        "Mozilla/5.0 (Macintosh; Intel Mac OS X 15.7; rv:150.0) Gecko/20100101 Firefox/150.0",
         // Latest Edge on Windows
         "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36 Edg/146.0.3856.84",
         // Latest Edge on macOS
         "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36 Edg/146.0.3856.84",
         // Latest Firefox on Windows
-        "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:147.0) Gecko/20100101 Firefox/147.0",
+        "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:150.0) Gecko/20100101 Firefox/150.0",
         // Latest Firefox on Linux
-        "Mozilla/5.0 (X11; Linux i686; rv:147.0) Gecko/20100101 Firefox/147.0",
+        "Mozilla/5.0 (X11; Linux i686; rv:150.0) Gecko/20100101 Firefox/150.0",
         // Latest Chrome on Windows
         "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36",
     ])("should not warn for supported browsers", testUserAgentFactory());
diff --git a/apps/web/test/unit-tests/async-components/structures/__snapshots__/ErrorView-test.tsx.snap b/apps/web/test/unit-tests/async-components/structures/__snapshots__/ErrorView-test.tsx.snap
index a7abafcddb..fe327c357a 100644
--- a/apps/web/test/unit-tests/async-components/structures/__snapshots__/ErrorView-test.tsx.snap
+++ b/apps/web/test/unit-tests/async-components/structures/__snapshots__/ErrorView-test.tsx.snap
@@ -128,7 +128,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="_separator_cqpyv_8"
+      class="_separator_13qwf_8"
       data-kind="primary"
       data-orientation="horizontal"
       role="separator"
diff --git a/apps/web/test/unit-tests/audio/VoiceRecording-test.ts b/apps/web/test/unit-tests/audio/VoiceRecording-test.ts
index eb14b9364a..73329ba566 100644
--- a/apps/web/test/unit-tests/audio/VoiceRecording-test.ts
+++ b/apps/web/test/unit-tests/audio/VoiceRecording-test.ts
@@ -120,6 +120,29 @@ describe("VoiceRecording", () => {
                 }),
             );
         });
+
+        it("should request the selected microphone as an exact device constraint", async () => {
+            MediaDeviceHandlerMock.getAudioInput.mockReturnValue("selected-mic");
+            await recording.start();
+
+            expect(navigator.mediaDevices.getUserMedia).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    audio: expect.objectContaining({ deviceId: { exact: "selected-mic" } }),
+                }),
+            );
+        });
+
+        it("should not force an exact microphone when default device is selected", async () => {
+            MediaDeviceHandlerMock.getAudioInput.mockReturnValue("default");
+            await recording.start();
+
+            const constraints = mocked(navigator.mediaDevices.getUserMedia).mock.calls[0][0] as MediaStreamConstraints;
+            expect(constraints.audio).toEqual(
+                expect.not.objectContaining({
+                    deviceId: expect.anything(),
+                }),
+            );
+        });
     });
 
     describe("when recording", () => {
diff --git a/apps/web/test/unit-tests/components/structures/MatrixChat-test.tsx b/apps/web/test/unit-tests/components/structures/MatrixChat-test.tsx
index ac5c2bad9f..226decf6e2 100644
--- a/apps/web/test/unit-tests/components/structures/MatrixChat-test.tsx
+++ b/apps/web/test/unit-tests/components/structures/MatrixChat-test.tsx
@@ -9,7 +9,6 @@ Please see LICENSE files in the repository root for full details.
 import "fake-indexeddb/auto";
 import React, { type ComponentProps } from "react";
 import { fireEvent, render, type RenderResult, screen, waitFor, within, act } from "jest-matrix-react";
-import fetchMock from "@fetch-mock/jest";
 import { type Mocked, mocked } from "jest-mock";
 import { ClientEvent, type MatrixClient, MatrixEvent, Room, SyncState } from "matrix-js-sdk/src/matrix";
 import { type MediaHandler } from "matrix-js-sdk/src/webrtc/mediaHandler";
@@ -223,7 +222,7 @@ describe("<MatrixChat />", () => {
             },
             onNewScreen: jest.fn(),
             onTokenLoginCompleted: jest.fn(),
-            realQueryParams: {},
+            urlParams: {},
         };
 
         mockClient = getMockClientWithEventEmitter(getMockClientMethods());
@@ -320,9 +319,11 @@ describe("<MatrixChat />", () => {
 
         const code = "test-oidc-auth-code";
         const state = "test-oidc-state";
-        const realQueryParams = {
-            code,
-            state: state,
+        const urlParams = {
+            oidc_fragment: {
+                code,
+                state: state,
+            },
         };
 
         const deviceId = "test-device-id";
@@ -383,11 +384,13 @@ describe("<MatrixChat />", () => {
         });
 
         it("should fail when query params do not include valid code and state", async () => {
-            const queryParams = {
-                code: 123,
-                state: "abc",
+            const urlParams = {
+                oidc_query: {
+                    code: "",
+                    state: "abc",
+                },
             };
-            getComponent({ realQueryParams: queryParams });
+            getComponent({ urlParams });
 
             await flushPromises();
 
@@ -400,15 +403,15 @@ describe("<MatrixChat />", () => {
         });
 
         it("should make correct request to complete authorization", async () => {
-            getComponent({ realQueryParams });
+            getComponent({ urlParams });
 
             await flushPromises();
 
-            expect(completeAuthorizationCodeGrant).toHaveBeenCalledWith(code, state);
+            expect(completeAuthorizationCodeGrant).toHaveBeenCalledWith(code, state, "fragment");
         });
 
         it("should look up userId using access token", async () => {
-            getComponent({ realQueryParams });
+            getComponent({ urlParams });
 
             await flushPromises();
 
@@ -423,7 +426,7 @@ describe("<MatrixChat />", () => {
 
         it("should log error and return to welcome page when userId lookup fails", async () => {
             loginClient.whoami.mockRejectedValue(new Error("oups"));
-            getComponent({ realQueryParams });
+            getComponent({ urlParams });
 
             await flushPromises();
 
@@ -436,7 +439,7 @@ describe("<MatrixChat />", () => {
 
         it("should call onTokenLoginCompleted", async () => {
             const onTokenLoginCompleted = jest.fn();
-            getComponent({ realQueryParams, onTokenLoginCompleted });
+            getComponent({ urlParams, onTokenLoginCompleted });
 
             await waitFor(() => expect(onTokenLoginCompleted).toHaveBeenCalled());
         });
@@ -450,7 +453,7 @@ describe("<MatrixChat />", () => {
                 mocked(completeAuthorizationCodeGrant).mockRejectedValue(
                     new Error(OidcError.MissingOrInvalidStoredState),
                 );
-                getComponent({ realQueryParams });
+                getComponent({ urlParams });
 
                 await flushPromises();
 
@@ -465,7 +468,7 @@ describe("<MatrixChat />", () => {
             });
 
             it("should log and return to welcome page", async () => {
-                getComponent({ realQueryParams });
+                getComponent({ urlParams });
 
                 await flushPromises();
 
@@ -479,7 +482,7 @@ describe("<MatrixChat />", () => {
             });
 
             it("should not clear storage", async () => {
-                getComponent({ realQueryParams });
+                getComponent({ urlParams });
 
                 await flushPromises();
 
@@ -488,7 +491,7 @@ describe("<MatrixChat />", () => {
 
             it("should not store clientId or issuer", async () => {
                 const sessionStorageSetSpy = jest.spyOn(sessionStorage.__proto__, "setItem");
-                getComponent({ realQueryParams });
+                getComponent({ urlParams });
 
                 await flushPromises();
 
@@ -509,7 +512,7 @@ describe("<MatrixChat />", () => {
             });
 
             it("should persist login credentials", async () => {
-                getComponent({ realQueryParams });
+                getComponent({ urlParams });
 
                 await waitFor(() => expect(localStorage.getItem("mx_device_id")).toEqual(deviceId));
                 expect(localStorage.getItem("mx_hs_url")).toEqual(homeserverUrl);
@@ -518,14 +521,14 @@ describe("<MatrixChat />", () => {
             });
 
             it("should store clientId and issuer in session storage", async () => {
-                getComponent({ realQueryParams });
+                getComponent({ urlParams });
 
                 await waitFor(() => expect(localStorage.getItem("mx_oidc_client_id")).toEqual(clientId));
                 await waitFor(() => expect(localStorage.getItem("mx_oidc_token_issuer")).toEqual(issuer));
             });
 
             it("should set logged in and start MatrixClient", async () => {
-                getComponent({ realQueryParams });
+                getComponent({ urlParams });
 
                 defaultDispatcher.dispatch({
                     action: Action.WillStartClient,
@@ -545,7 +548,7 @@ describe("<MatrixChat />", () => {
 
                 jest.spyOn(Lifecycle, "attemptDelegatedAuthLogin");
 
-                getComponent({ realQueryParams });
+                getComponent({ urlParams });
                 await flushPromises();
 
                 expect(Lifecycle.attemptDelegatedAuthLogin).toHaveBeenCalled();
@@ -559,7 +562,7 @@ describe("<MatrixChat />", () => {
 
                 jest.spyOn(Lifecycle, "attemptDelegatedAuthLogin");
 
-                getComponent({ realQueryParams });
+                getComponent({ urlParams });
                 await flushPromises();
 
                 expect(Lifecycle.attemptDelegatedAuthLogin).toHaveBeenCalled();
@@ -1120,8 +1123,10 @@ describe("<MatrixChat />", () => {
 
             describe("when query params have a loginToken", () => {
                 const loginToken = "test-login-token";
-                const realQueryParams = {
-                    loginToken,
+                const urlParams = {
+                    legacy_sso: {
+                        loginToken,
+                    },
                 };
 
                 let loginClient!: ReturnType<typeof getMockClientWithEventEmitter>;
@@ -1150,7 +1155,7 @@ describe("<MatrixChat />", () => {
                     mocked(loginClient.getCrypto()!.userHasCrossSigningKeys).mockResolvedValue(true);
 
                     // When we load the page
-                    getComponent({ realQueryParams });
+                    getComponent({ urlParams });
 
                     defaultDispatcher.dispatch({
                         action: Action.WillStartClient,
@@ -1400,8 +1405,10 @@ describe("<MatrixChat />", () => {
 
     describe("when query params have a loginToken", () => {
         const loginToken = "test-login-token";
-        const realQueryParams = {
-            loginToken,
+        const urlParams = {
+            legacy_sso: {
+                loginToken,
+            },
         };
 
         let loginClient!: ReturnType<typeof getMockClientWithEventEmitter>;
@@ -1426,7 +1433,7 @@ describe("<MatrixChat />", () => {
         it("should show an error dialog when no homeserver is found in local storage", async () => {
             localStorage.removeItem("mx_sso_hs_url");
             const localStorageGetSpy = jest.spyOn(localStorage.__proto__, "getItem");
-            getComponent({ realQueryParams });
+            getComponent({ urlParams });
             await flushPromises();
 
             expect(localStorageGetSpy).toHaveBeenCalledWith("mx_sso_hs_url");
@@ -1444,7 +1451,7 @@ describe("<MatrixChat />", () => {
         });
 
         it("should attempt token login", async () => {
-            getComponent({ realQueryParams });
+            getComponent({ urlParams });
             await flushPromises();
 
             expect(loginClient.login).toHaveBeenCalledWith("m.login.token", {
@@ -1455,7 +1462,7 @@ describe("<MatrixChat />", () => {
 
         it("should call onTokenLoginCompleted", async () => {
             const onTokenLoginCompleted = jest.fn();
-            getComponent({ realQueryParams, onTokenLoginCompleted });
+            getComponent({ urlParams, onTokenLoginCompleted });
 
             await waitFor(() => expect(onTokenLoginCompleted).toHaveBeenCalled());
         });
@@ -1465,7 +1472,7 @@ describe("<MatrixChat />", () => {
                 loginClient.login.mockRejectedValue(new Error("oups"));
             });
             it("should show a dialog", async () => {
-                getComponent({ realQueryParams });
+                getComponent({ urlParams });
 
                 await flushPromises();
 
@@ -1480,7 +1487,7 @@ describe("<MatrixChat />", () => {
             });
 
             it("should not clear storage", async () => {
-                getComponent({ realQueryParams });
+                getComponent({ urlParams });
 
                 await flushPromises();
 
@@ -1502,7 +1509,7 @@ describe("<MatrixChat />", () => {
             it("should clear storage", async () => {
                 const localStorageClearSpy = jest.spyOn(localStorage.__proto__, "clear");
 
-                getComponent({ realQueryParams });
+                getComponent({ urlParams });
 
                 // just check we called the clearStorage function
                 await waitFor(() => expect(loginClient.clearStores).toHaveBeenCalled());
@@ -1511,7 +1518,7 @@ describe("<MatrixChat />", () => {
             });
 
             it("should persist login credentials", async () => {
-                getComponent({ realQueryParams });
+                getComponent({ urlParams });
 
                 await waitFor(() => expect(localStorage.getItem("mx_hs_url")).toEqual(serverConfig.hsUrl));
                 expect(localStorage.getItem("mx_user_id")).toEqual(userId);
@@ -1521,7 +1528,7 @@ describe("<MatrixChat />", () => {
 
             it("should set fresh login flag in session storage", async () => {
                 const sessionStorageSetSpy = jest.spyOn(sessionStorage.__proto__, "setItem");
-                getComponent({ realQueryParams });
+                getComponent({ urlParams });
 
                 await waitFor(() => expect(sessionStorageSetSpy).toHaveBeenCalledWith("mx_fresh_login", "true"));
             });
@@ -1537,13 +1544,13 @@ describe("<MatrixChat />", () => {
                     },
                 };
                 loginClient.login.mockResolvedValue(loginResponseWithWellKnown);
-                getComponent({ realQueryParams });
+                getComponent({ urlParams });
 
                 await waitFor(() => expect(localStorage.getItem("mx_hs_url")).toEqual(hsUrlFromWk));
             });
 
             it("should continue to post login setup when no session is found in local storage", async () => {
-                getComponent({ realQueryParams });
+                getComponent({ urlParams });
                 defaultDispatcher.dispatch({
                     action: Action.WillStartClient,
                 });
@@ -1589,6 +1596,7 @@ describe("<MatrixChat />", () => {
             getComponent({
                 initialScreenAfterLogin: {
                     screen: "start_sso",
+                    params: {},
                 },
             });
 
@@ -1604,6 +1612,7 @@ describe("<MatrixChat />", () => {
             getComponent({
                 initialScreenAfterLogin: {
                     screen: "start_cas",
+                    params: {},
                 },
             });
 
@@ -1627,7 +1636,6 @@ describe("<MatrixChat />", () => {
 
         // Flaky test, see https://github.com/element-hq/element-web/issues/30337
         it("waits for other tab to stop during startup", async () => {
-            fetchMock.get("end:/welcome.html", { body: "<h1>Hello</h1>" });
             jest.spyOn(Lifecycle, "attemptDelegatedAuthLogin");
 
             // simulate an active window
@@ -1658,7 +1666,7 @@ describe("<MatrixChat />", () => {
             expect(Lifecycle.attemptDelegatedAuthLogin).toHaveBeenCalled();
 
             // should just show the welcome screen
-            await rendered.findByText("Hello");
+            await rendered.findByText("Welcome to Test");
             expect(rendered.container).toMatchSnapshot();
         });
 
diff --git a/apps/web/test/unit-tests/components/structures/PictureInPictureDragger-test.tsx b/apps/web/test/unit-tests/components/structures/PictureInPictureDragger-test.tsx
index de9075d79f..424a396820 100644
--- a/apps/web/test/unit-tests/components/structures/PictureInPictureDragger-test.tsx
+++ b/apps/web/test/unit-tests/components/structures/PictureInPictureDragger-test.tsx
@@ -36,7 +36,7 @@ describe("PictureInPictureDragger", () => {
 
     describe("when rendering the dragger with PiP content 1", () => {
         beforeEach(() => {
-            renderResult = render(<PictureInPictureDragger draggable={true}>{mkContent1}</PictureInPictureDragger>);
+            renderResult = render(<PictureInPictureDragger>{mkContent1}</PictureInPictureDragger>);
         });
 
         it("should render the PiP content", () => {
@@ -45,7 +45,7 @@ describe("PictureInPictureDragger", () => {
 
         describe("and rerendering PiP content 1", () => {
             beforeEach(() => {
-                renderResult.rerender(<PictureInPictureDragger draggable={true}>{mkContent1}</PictureInPictureDragger>);
+                renderResult.rerender(<PictureInPictureDragger>{mkContent1}</PictureInPictureDragger>);
             });
 
             it("should not change the PiP content", () => {
@@ -55,7 +55,7 @@ describe("PictureInPictureDragger", () => {
 
         describe("and rendering PiP content 2", () => {
             beforeEach(() => {
-                renderResult.rerender(<PictureInPictureDragger draggable={true}>{mkContent2}</PictureInPictureDragger>);
+                renderResult.rerender(<PictureInPictureDragger>{mkContent2}</PictureInPictureDragger>);
             });
 
             it("should update the PiP content", () => {
@@ -66,9 +66,7 @@ describe("PictureInPictureDragger", () => {
 
     describe("when rendering the dragger with PiP content 1 and 2", () => {
         beforeEach(() => {
-            renderResult = render(
-                <PictureInPictureDragger draggable={true}>{[...mkContent1, ...mkContent2]}</PictureInPictureDragger>,
-            );
+            renderResult = render(<PictureInPictureDragger>{[...mkContent1, ...mkContent2]}</PictureInPictureDragger>);
         });
 
         it("should render both contents", () => {
@@ -83,7 +81,7 @@ describe("PictureInPictureDragger", () => {
         beforeEach(() => {
             clickSpy = jest.fn();
             render(
-                <PictureInPictureDragger draggable={true}>
+                <PictureInPictureDragger>
                     {[
                         ({ onStartMoving }) => (
                             // eslint-disable-next-line jsx-a11y/click-events-have-key-events
diff --git a/apps/web/test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap b/apps/web/test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap
index 564aadaf87..03220e62db 100644
--- a/apps/web/test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap
@@ -97,7 +97,7 @@ exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during sta
     >
       <svg
         aria-label="Loading…"
-        class="_icon_11k6c_18"
+        class="_icon_1855a_18"
         data-testid="spinner"
         fill="currentColor"
         height="1em"
@@ -124,13 +124,9 @@ exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during sta
     class="mx_AuthPage"
   >
     <div
-      class="mx_AuthPage_modal mx_AuthPage_modal_withBlur"
+      class="mx_AuthPage_modal"
       style="position: relative;"
     >
-      <div
-        class="mx_AuthPage_modalBlur"
-        style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; filter: blur(40px);"
-      />
       <main
         aria-live="polite"
         class="mx_AuthPage_modalContent"
@@ -138,53 +134,99 @@ exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during sta
         tabindex="-1"
       >
         <div
-          class="mx_Welcome"
-          data-testid="mx_welcome_screen"
+          class="_glass_sepwu_8"
         >
           <div
-            class="mx_WelcomePage mx_WelcomePage_loggedIn"
+            class="mx_Welcome"
           >
             <div
-              class="mx_WelcomePage_body"
+              class="mx_DefaultWelcome"
             >
-              <h1>
-                Hello
+              <a
+                class="mx_DefaultWelcome_logo"
+                href="https://element.io"
+                rel="noopener"
+                target="_blank"
+              >
+                <img
+                  alt="Test"
+                  src="themes/element/img/logos/element-logo.svg"
+                />
+              </a>
+              <h1
+                class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
+              >
+                Welcome to Test
               </h1>
+              <div
+                class="mx_DefaultWelcome_buttons"
+              >
+                <a
+                  class="_button_13vu4_8"
+                  data-kind="primary"
+                  data-size="sm"
+                  href="#/login"
+                  role="link"
+                  tabindex="0"
+                >
+                  Sign in
+                </a>
+                <a
+                  class="_button_13vu4_8"
+                  data-kind="secondary"
+                  data-size="sm"
+                  href="#/register"
+                  role="link"
+                  tabindex="0"
+                >
+                  Create account
+                </a>
+                <a
+                  class="_button_13vu4_8"
+                  data-kind="tertiary"
+                  data-size="sm"
+                  href="#/directory"
+                  role="link"
+                  tabindex="0"
+                >
+                  Explore rooms
+                </a>
+              </div>
             </div>
-          </div>
-          <div
-            class="mx_Dropdown mx_LanguageDropdown mx_AuthBody_language"
-          >
             <div
-              aria-describedby="mx_LanguageDropdown_value"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-label="Language Dropdown"
-              aria-owns="mx_LanguageDropdown_input"
-              class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
-              role="button"
-              tabindex="0"
+              class="mx_Dropdown mx_LanguageDropdown mx_AuthBody_language"
             >
               <div
-                class="mx_Dropdown_option"
-                id="mx_LanguageDropdown_value"
+                aria-describedby="mx_LanguageDropdown_value"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="Language Dropdown"
+                aria-owns="mx_LanguageDropdown_input"
+                class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
+                role="button"
+                tabindex="0"
               >
-                <div>
-                  English
+                <div
+                  class="mx_Dropdown_option"
+                  id="mx_LanguageDropdown_value"
+                >
+                  <div>
+                    English
+                  </div>
                 </div>
+                <svg
+                  class="mx_Dropdown_arrow"
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                  />
+                </svg>
               </div>
-              <svg
-                class="mx_Dropdown_arrow"
-                fill="currentColor"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                />
-              </svg>
             </div>
           </div>
         </div>
@@ -237,7 +279,7 @@ exports[`<MatrixChat /> should render spinner while app is loading 1`] = `
     >
       <svg
         aria-label="Loading…"
-        class="_icon_11k6c_18"
+        class="_icon_1855a_18"
         data-testid="spinner"
         fill="currentColor"
         height="1em"
diff --git a/apps/web/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap b/apps/web/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap
index 8f3e7c2ff5..64d7061c81 100644
--- a/apps/web/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap
@@ -107,7 +107,7 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
                 class="mx_GenericEventListSummary_avatars"
               >
                 <span
-                  class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+                  class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
                   data-color="1"
                   data-testid="avatar-img"
                   data-type="round"
diff --git a/apps/web/test/unit-tests/components/structures/__snapshots__/PictureInPictureDragger-test.tsx.snap b/apps/web/test/unit-tests/components/structures/__snapshots__/PictureInPictureDragger-test.tsx.snap
index 9020570c2d..921735c95a 100644
--- a/apps/web/test/unit-tests/components/structures/__snapshots__/PictureInPictureDragger-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/structures/__snapshots__/PictureInPictureDragger-test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 and 2 should render both contents 1`] = `
 <div>
   <aside
+    class="mx_PictureInPictureDragger"
     style="transform: translateX(672px) translateY(80px);"
   >
     <div>
@@ -20,6 +21,7 @@ exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 a
 exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 and rendering PiP content 2 should update the PiP content 1`] = `
 <div>
   <aside
+    class="mx_PictureInPictureDragger"
     style="transform: translateX(672px) translateY(80px);"
   >
     <div>
@@ -34,6 +36,7 @@ exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 a
 exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 and rerendering PiP content 1 should not change the PiP content: pip-content-1 1`] = `
 <div>
   <aside
+    class="mx_PictureInPictureDragger"
     style="transform: translateX(672px) translateY(80px);"
   >
     <div>
@@ -46,6 +49,7 @@ exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 a
 exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 should render the PiP content: pip-content-1 1`] = `
 <div>
   <aside
+    class="mx_PictureInPictureDragger"
     style="transform: translateX(672px) translateY(80px);"
   >
     <div>
diff --git a/apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap b/apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
index db7b7c0dfa..e068ee8e7f 100644
--- a/apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -11,7 +11,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
     >
       <span
         aria-label="Open room settings"
-        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+        class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -56,7 +56,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
         >
           <svg
             aria-label="Loading…"
-            class="_icon_11k6c_18"
+            class="_icon_1855a_18"
             data-testid="spinner"
             fill="currentColor"
             height="1em"
@@ -95,7 +95,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
     >
       <span
         aria-label="Open room settings"
-        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+        class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -185,7 +185,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
                 <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+                  class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
                   data-color="3"
                   data-testid="avatar-img"
                   data-type="round"
@@ -285,7 +285,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
     >
       <span
         aria-label="Open room settings"
-        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+        class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -375,7 +375,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                 <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+                  class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
                   data-color="3"
                   data-testid="avatar-img"
                   data-type="round"
@@ -663,7 +663,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
     >
       <span
         aria-label="Open room settings"
-        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+        class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -748,7 +748,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                 <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+                  class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
                   data-color="3"
                   data-testid="avatar-img"
                   data-type="round"
@@ -1023,7 +1023,7 @@ exports[`RoomView invites renders an invite room 1`] = `
         </h3>
         <p>
           <span
-            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
             data-color="2"
             data-testid="avatar-img"
             data-type="round"
@@ -1105,7 +1105,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
           <button
             aria-label="Open room settings"
             aria-live="off"
-            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
             data-color="2"
             data-testid="avatar-img"
             data-type="round"
@@ -1257,7 +1257,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
               tabindex="0"
             >
               <div
-                class="_stacked-avatars_zysgz_109"
+                class="_stacked-avatars_va14e_109"
               />
               0
             </div>
@@ -1644,7 +1644,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
           <button
             aria-label="Open room settings"
             aria-live="off"
-            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
             data-color="2"
             data-testid="avatar-img"
             data-type="round"
@@ -1796,7 +1796,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
               tabindex="0"
             >
               <div
-                class="_stacked-avatars_zysgz_109"
+                class="_stacked-avatars_va14e_109"
               />
               0
             </div>
@@ -2119,7 +2119,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
           <button
             aria-label="Open room settings"
             aria-live="off"
-            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
             data-color="2"
             data-testid="avatar-img"
             data-type="round"
@@ -2271,7 +2271,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
               tabindex="0"
             >
               <div
-                class="_stacked-avatars_zysgz_109"
+                class="_stacked-avatars_va14e_109"
               />
               0
             </div>
@@ -2594,7 +2594,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           <button
             aria-label="Open room settings"
             aria-live="off"
-            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -2746,7 +2746,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
               tabindex="0"
             >
               <div
-                class="_stacked-avatars_zysgz_109"
+                class="_stacked-avatars_va14e_109"
               />
               0
             </div>
@@ -2808,7 +2808,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           <button
             aria-label="Open room settings"
             aria-live="off"
-            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -2960,7 +2960,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
               tabindex="0"
             >
               <div
-                class="_stacked-avatars_zysgz_109"
+                class="_stacked-avatars_va14e_109"
               />
               0
             </div>
@@ -3323,7 +3323,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           <button
             aria-label="Open room settings"
             aria-live="off"
-            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
             data-color="2"
             data-testid="avatar-img"
             data-type="round"
@@ -3448,7 +3448,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
               tabindex="0"
             >
               <div
-                class="_stacked-avatars_zysgz_109"
+                class="_stacked-avatars_va14e_109"
               />
               0
             </div>
@@ -3479,7 +3479,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                    
                   <svg
                     aria-label="Loading…"
-                    class="_icon_11k6c_18"
+                    class="_icon_1855a_18"
                     data-testid="spinner"
                     fill="currentColor"
                     height="1em"
diff --git a/apps/web/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap b/apps/web/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
index 0b7aa44459..589f0eaf10 100644
--- a/apps/web/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
@@ -86,7 +86,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+              class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
               data-color="5"
               data-testid="avatar-img"
               data-type="round"
@@ -184,7 +184,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+              class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
               data-color="6"
               data-testid="avatar-img"
               data-type="round"
@@ -283,7 +283,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+              class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
               data-color="2"
               data-testid="avatar-img"
               data-type="round"
@@ -378,114 +378,115 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
           </svg>
         </div>
       </div>
-      <div
+      <ul
         class="mx_SpaceHierarchy_subspace_children"
         role="group"
-      />
-    </li>
-    <li
-      aria-labelledby="_r_k_"
-      class="mx_SpaceHierarchy_roomTileWrapper"
-      role="treeitem"
-    >
-      <div
-        class="mx_AccessibleButton mx_SpaceHierarchy_roomTile"
-        role="button"
-        tabindex="-1"
       >
-        <div
-          class="mx_SpaceHierarchy_roomTile_item"
+        <li
+          aria-labelledby="_r_k_"
+          class="mx_SpaceHierarchy_roomTileWrapper"
+          role="treeitem"
         >
           <div
-            class="mx_SpaceHierarchy_roomTile_avatar"
-          >
-            <span
-              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
-              data-color="2"
-              data-testid="avatar-img"
-              data-type="round"
-              role="presentation"
-              style="--cpd-avatar-size: 20px;"
-            >
-              N
-            </span>
-          </div>
-          <div
-            class="mx_SpaceHierarchy_roomTile_name"
-          >
-            <span
-              id="_r_k_"
-            >
-              Nested room
-            </span>
-          </div>
-          <div
-            class="mx_SpaceHierarchy_roomTile_info"
-          >
-            3 members
-          </div>
-        </div>
-        <div
-          class="mx_SpaceHierarchy_actions"
-        >
-          <div
-            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+            class="mx_AccessibleButton mx_SpaceHierarchy_roomTile"
             role="button"
             tabindex="-1"
           >
-            Join
-          </div>
-          <span
-            aria-labelledby="_r_l_"
-            tabindex="0"
-          >
-            <form
-              class="_root_19upo_16"
+            <div
+              class="mx_SpaceHierarchy_roomTile_item"
             >
               <div
-                class="_inline-field_19upo_32"
+                class="mx_SpaceHierarchy_roomTile_avatar"
               >
-                <div
-                  class="_inline-field-control_19upo_44"
+                <span
+                  class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
+                  data-color="2"
+                  data-testid="avatar-img"
+                  data-type="round"
+                  role="presentation"
+                  style="--cpd-avatar-size: 20px;"
+                >
+                  N
+                </span>
+              </div>
+              <div
+                class="mx_SpaceHierarchy_roomTile_name"
+              >
+                <span
+                  id="_r_k_"
+                >
+                  Nested room
+                </span>
+              </div>
+              <div
+                class="mx_SpaceHierarchy_roomTile_info"
+              >
+                3 members
+              </div>
+            </div>
+            <div
+              class="mx_SpaceHierarchy_actions"
+            >
+              <div
+                class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+                role="button"
+                tabindex="-1"
+              >
+                Join
+              </div>
+              <span
+                aria-labelledby="_r_l_"
+                tabindex="0"
+              >
+                <form
+                  class="_root_19upo_16"
                 >
                   <div
-                    class="_container_153f2_10"
+                    class="_inline-field_19upo_32"
                   >
-                    <input
-                      aria-labelledby="_r_k_"
-                      class="_input_153f2_18"
-                      disabled=""
-                      id="checkbox_RD7nyrA2oh"
-                      role="presentation"
-                      tabindex="-1"
-                      type="checkbox"
-                    />
                     <div
-                      class="_ui_153f2_19"
+                      class="_inline-field-control_19upo_44"
                     >
-                      <svg
-                        aria-hidden="true"
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 24 24"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        class="_container_153f2_10"
                       >
-                        <path
-                          d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                        <input
+                          aria-labelledby="_r_k_"
+                          class="_input_153f2_18"
+                          disabled=""
+                          id="checkbox_RD7nyrA2oh"
+                          role="presentation"
+                          tabindex="-1"
+                          type="checkbox"
                         />
-                      </svg>
+                        <div
+                          class="_ui_153f2_19"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                            />
+                          </svg>
+                        </div>
+                      </div>
                     </div>
+                    <div
+                      class="_inline-field-body_19upo_38"
+                    />
                   </div>
-                </div>
-                <div
-                  class="_inline-field-body_19upo_38"
-                />
-              </div>
-            </form>
-          </span>
-        </div>
-      </div>
+                </form>
+              </span>
+            </div>
+          </div>
+        </li>
+      </ul>
     </li>
     <li
       aria-labelledby="_r_t_"
@@ -504,7 +505,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+              class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
               data-color="6"
               data-testid="avatar-img"
               data-type="round"
@@ -675,7 +676,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+              class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
               data-color="5"
               data-testid="avatar-img"
               data-type="round"
@@ -773,7 +774,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+              class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
               data-color="6"
               data-testid="avatar-img"
               data-type="round"
@@ -872,7 +873,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+              class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
               data-color="2"
               data-testid="avatar-img"
               data-type="round"
@@ -967,7 +968,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
           </svg>
         </div>
       </div>
-      <div
+      <ul
         class="mx_SpaceHierarchy_subspace_children"
         role="group"
       />
diff --git a/apps/web/test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap b/apps/web/test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap
index 0d067ca1a6..422af8c795 100644
--- a/apps/web/test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap
@@ -53,8 +53,9 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
                   class="mx_EncryptionCard_header"
                 >
                   <div
-                    class="_content_1r8kr_8"
-                    data-size="large"
+                    class="_big-icon_1ssbv_8"
+                    data-kind="primary"
+                    data-size="lg"
                   >
                     <svg
                       fill="currentColor"
@@ -245,8 +246,9 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
                   class="mx_EncryptionCard_header"
                 >
                   <div
-                    class="_content_1r8kr_8"
-                    data-size="large"
+                    class="_big-icon_1ssbv_8"
+                    data-kind="primary"
+                    data-size="lg"
                   >
                     <svg
                       fill="currentColor"
diff --git a/apps/web/test/unit-tests/components/structures/auth/__snapshots__/LoginSplashView-test.tsx.snap b/apps/web/test/unit-tests/components/structures/auth/__snapshots__/LoginSplashView-test.tsx.snap
index 62aee87218..8ea10c3f6b 100644
--- a/apps/web/test/unit-tests/components/structures/auth/__snapshots__/LoginSplashView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/structures/auth/__snapshots__/LoginSplashView-test.tsx.snap
@@ -10,7 +10,7 @@ exports[`<LoginSplashView /> Renders a spinner 1`] = `
     >
       <svg
         aria-label="Loading…"
-        class="_icon_11k6c_18"
+        class="_icon_1855a_18"
         data-testid="spinner"
         fill="currentColor"
         height="1em"
@@ -59,7 +59,7 @@ exports[`<LoginSplashView /> Renders an error message 1`] = `
     >
       <svg
         aria-label="Loading…"
-        class="_icon_11k6c_18"
+        class="_icon_1855a_18"
         data-testid="spinner"
         fill="currentColor"
         height="1em"
diff --git a/apps/web/test/unit-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap b/apps/web/test/unit-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap
index 7eccd5b098..4ceeac06b9 100644
--- a/apps/web/test/unit-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap
@@ -19,14 +19,14 @@ exports[`<EmailIdentityAuthEntry/> should render 1`] = `
     >
       <span>
         Did not receive it? 
-        <div
+        <a
           aria-label="Resend"
           class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
           role="button"
           tabindex="0"
         >
           Resend it
-        </div>
+        </a>
       </span>
     </p>
   </div>
@@ -42,8 +42,9 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_1r8kr_8"
-        data-size="large"
+        class="_big-icon_1ssbv_8"
+        data-kind="primary"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
diff --git a/apps/web/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap b/apps/web/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap
index 5c52ccf215..ac85c8f2b9 100644
--- a/apps/web/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`DecoratedRoomAvatar shows an avatar with globe icon and tooltip for pub
     class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
   >
     <span
-      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+      class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -42,7 +42,7 @@ exports[`DecoratedRoomAvatar shows the presence indicator in a DM room that also
     class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
   >
     <span
-      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+      class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
       data-color="5"
       data-testid="avatar-img"
       data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap b/apps/web/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
index 68af0da5a0..2115fde36a 100644
--- a/apps/web/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`RoomAvatar should not render an invite avatar if the user has disabled it 1`] = `
 <div>
   <span
-    class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+    class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
     data-color="6"
     data-testid="avatar-img"
     data-type="round"
@@ -19,7 +19,7 @@ exports[`RoomAvatar should render an avatar for a room the user is invited to 1`
 <div>
   <span
     aria-label="Avatar"
-    class="_avatar_zysgz_8 mx_BaseAvatar"
+    class="_avatar_va14e_8 mx_BaseAvatar"
     data-color="6"
     data-testid="avatar-img"
     data-type="round"
@@ -27,7 +27,7 @@ exports[`RoomAvatar should render an avatar for a room the user is invited to 1`
   >
     <img
       alt=""
-      class="_image_zysgz_43"
+      class="_image_va14e_43"
       data-type="round"
       height="36px"
       loading="lazy"
@@ -42,7 +42,7 @@ exports[`RoomAvatar should render an avatar for a room the user is invited to 1`
 exports[`RoomAvatar should render as expected for a DM room 1`] = `
 <div>
   <span
-    class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+    class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
     data-color="1"
     data-testid="avatar-img"
     data-type="round"
@@ -57,7 +57,7 @@ exports[`RoomAvatar should render as expected for a DM room 1`] = `
 exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
 <div>
   <span
-    class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+    class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
     data-color="3"
     data-testid="avatar-img"
     data-type="round"
@@ -72,7 +72,7 @@ exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
 exports[`RoomAvatar should render as expected for a Room 1`] = `
 <div>
   <span
-    class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+    class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
     data-color="6"
     data-testid="avatar-img"
     data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap b/apps/web/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap
index d4eb6dde1d..4e0b12d820 100644
--- a/apps/web/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<RoomAvatarView /> should not render a decoration 1`] = `
 <DocumentFragment>
   <span
     aria-label="Avatar"
-    class="_avatar_zysgz_8 mx_BaseAvatar"
+    class="_avatar_va14e_8 mx_BaseAvatar"
     data-color="1"
     data-testid="avatar-img"
     data-type="round"
@@ -12,7 +12,7 @@ exports[`<RoomAvatarView /> should not render a decoration 1`] = `
   >
     <img
       alt=""
-      class="_image_zysgz_43"
+      class="_image_va14e_43"
       data-type="round"
       height="32px"
       loading="lazy"
@@ -32,7 +32,7 @@ exports[`<RoomAvatarView /> should render a low priority room decoration 1`] = `
   >
     <span
       aria-label="Avatar"
-      class="_avatar_zysgz_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_icon"
+      class="_avatar_va14e_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_icon"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -40,7 +40,7 @@ exports[`<RoomAvatarView /> should render a low priority room decoration 1`] = `
     >
       <img
         alt=""
-        class="_image_zysgz_43"
+        class="_image_va14e_43"
         data-type="round"
         height="32px"
         loading="lazy"
@@ -76,7 +76,7 @@ exports[`<RoomAvatarView /> should render a public room decoration 1`] = `
   >
     <span
       aria-label="Avatar"
-      class="_avatar_zysgz_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_icon"
+      class="_avatar_va14e_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_icon"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -84,7 +84,7 @@ exports[`<RoomAvatarView /> should render a public room decoration 1`] = `
     >
       <img
         alt=""
-        class="_image_zysgz_43"
+        class="_image_va14e_43"
         data-type="round"
         height="32px"
         loading="lazy"
@@ -120,7 +120,7 @@ exports[`<RoomAvatarView /> should render a video room decoration 1`] = `
   >
     <span
       aria-label="Avatar"
-      class="_avatar_zysgz_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_icon"
+      class="_avatar_va14e_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_icon"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -128,7 +128,7 @@ exports[`<RoomAvatarView /> should render a video room decoration 1`] = `
     >
       <img
         alt=""
-        class="_image_zysgz_43"
+        class="_image_va14e_43"
         data-type="round"
         height="32px"
         loading="lazy"
@@ -164,7 +164,7 @@ exports[`<RoomAvatarView /> should render the AWAY presence 1`] = `
   >
     <span
       aria-label="Avatar"
-      class="_avatar_zysgz_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
+      class="_avatar_va14e_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -172,7 +172,7 @@ exports[`<RoomAvatarView /> should render the AWAY presence 1`] = `
     >
       <img
         alt=""
-        class="_image_zysgz_43"
+        class="_image_va14e_43"
         data-type="round"
         height="32px"
         loading="lazy"
@@ -221,7 +221,7 @@ exports[`<RoomAvatarView /> should render the BUSY presence 1`] = `
   >
     <span
       aria-label="Avatar"
-      class="_avatar_zysgz_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
+      class="_avatar_va14e_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -229,7 +229,7 @@ exports[`<RoomAvatarView /> should render the BUSY presence 1`] = `
     >
       <img
         alt=""
-        class="_image_zysgz_43"
+        class="_image_va14e_43"
         data-type="round"
         height="32px"
         loading="lazy"
@@ -280,7 +280,7 @@ exports[`<RoomAvatarView /> should render the OFFLINE presence 1`] = `
   >
     <span
       aria-label="Avatar"
-      class="_avatar_zysgz_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
+      class="_avatar_va14e_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -288,7 +288,7 @@ exports[`<RoomAvatarView /> should render the OFFLINE presence 1`] = `
     >
       <img
         alt=""
-        class="_image_zysgz_43"
+        class="_image_va14e_43"
         data-type="round"
         height="32px"
         loading="lazy"
@@ -339,7 +339,7 @@ exports[`<RoomAvatarView /> should render the ONLINE presence 1`] = `
   >
     <span
       aria-label="Avatar"
-      class="_avatar_zysgz_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
+      class="_avatar_va14e_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -347,7 +347,7 @@ exports[`<RoomAvatarView /> should render the ONLINE presence 1`] = `
     >
       <img
         alt=""
-        class="_image_zysgz_43"
+        class="_image_va14e_43"
         data-type="round"
         height="32px"
         loading="lazy"
diff --git a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
index 1cc41fd9f3..0ea520e24f 100644
--- a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
@@ -54,10 +54,10 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
               />
             </svg>
           </a>
-          <div
+          <span
             class="mx_CopyableText mx_ShareLatestLocation_copy"
           >
-            <div
+            <button
               aria-label="Copy"
               class="mx_AccessibleButton mx_CopyableText_copyButton"
               role="button"
@@ -77,8 +77,8 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
                   d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                 />
               </svg>
-            </div>
-          </div>
+            </button>
+          </span>
         </div>
       </div>
       <span
diff --git a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
index 71d694a368..6050fb7b69 100644
--- a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
@@ -11,7 +11,7 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
         class="mx_Marker_border"
       >
         <span
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
           data-color="6"
           data-testid="avatar-img"
           data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap
index 5abc12c29b..ae4d37a40d 100644
--- a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap
@@ -41,7 +41,7 @@ exports[`<BeaconViewDialog /> renders own beacon status when user is live sharin
   class="mx_DialogOwnBeaconStatus"
 >
   <span
-    class="_avatar_zysgz_8 mx_BaseAvatar mx_DialogOwnBeaconStatus_avatar _avatar-imageless_zysgz_55"
+    class="_avatar_va14e_8 mx_BaseAvatar mx_DialogOwnBeaconStatus_avatar _avatar-imageless_va14e_55"
     data-color="6"
     data-testid="avatar-img"
     data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
index 3d5922fcbe..98f74680a2 100644
--- a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
@@ -41,7 +41,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
         class="mx_BeaconListItem"
       >
         <span
-          class="_avatar_zysgz_8 mx_BaseAvatar mx_BeaconListItem_avatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar mx_BeaconListItem_avatar _avatar-imageless_va14e_55"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
@@ -94,10 +94,10 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
                   />
                 </svg>
               </a>
-              <div
+              <span
                 class="mx_CopyableText mx_ShareLatestLocation_copy"
               >
-                <div
+                <button
                   aria-label="Copy"
                   class="mx_AccessibleButton mx_CopyableText_copyButton"
                   role="button"
@@ -117,8 +117,8 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
                       d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                     />
                   </svg>
-                </div>
-              </div>
+                </button>
+              </span>
             </div>
           </div>
           <span
diff --git a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
index eab675f369..1e98850d00 100644
--- a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
@@ -25,10 +25,10 @@ exports[`<ShareLatestLocation /> renders share buttons when there is a location
       />
     </svg>
   </a>
-  <div
+  <span
     class="mx_CopyableText mx_ShareLatestLocation_copy"
   >
-    <div
+    <button
       aria-label="Copy"
       class="mx_AccessibleButton mx_CopyableText_copyButton"
       role="button"
@@ -48,7 +48,7 @@ exports[`<ShareLatestLocation /> renders share buttons when there is a location
           d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
         />
       </svg>
-    </div>
-  </div>
+    </button>
+  </span>
 </DocumentFragment>
 `;
diff --git a/apps/web/test/unit-tests/components/views/dialogs/CreateSectionDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/CreateSectionDialog-test.tsx
new file mode 100644
index 0000000000..ad22a7d74b
--- /dev/null
+++ b/apps/web/test/unit-tests/components/views/dialogs/CreateSectionDialog-test.tsx
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { render, screen } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+
+import { CreateSectionDialog } from "../../../../../src/components/views/dialogs/CreateSectionDialog";
+
+describe("CreateSectionDialog", () => {
+    const onFinished: jest.Mock = jest.fn();
+
+    beforeEach(() => {
+        jest.resetAllMocks();
+    });
+
+    function renderComponent(): void {
+        render(<CreateSectionDialog onFinished={onFinished} />);
+    }
+
+    it("renders the dialog", () => {
+        const { container } = render(<CreateSectionDialog onFinished={onFinished} />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("has the create section button disabled when the input is empty", () => {
+        renderComponent();
+        const createButton = screen.getByRole("button", { name: "Create section" });
+        expect(createButton).toBeDisabled();
+    });
+
+    it("calls onFinished with true and the section name when create section is clicked", async () => {
+        renderComponent();
+        const input = screen.getByRole("textbox");
+        await userEvent.type(input, "My section");
+        const createButton = screen.getByRole("button", { name: "Create section" });
+        await userEvent.click(createButton);
+        expect(onFinished).toHaveBeenCalledWith(true, "My section");
+    });
+
+    it("calls onFinished with false when the dialog is cancelled", async () => {
+        renderComponent();
+        const cancelButton = screen.getByRole("button", { name: "Cancel" });
+        await userEvent.click(cancelButton);
+        expect(onFinished).toHaveBeenCalledWith(false, "");
+    });
+
+    it("calls onFinished with true and the section name when the form is submitted", async () => {
+        renderComponent();
+        const input = screen.getByRole("textbox");
+        await userEvent.type(input, "My section");
+        await userEvent.keyboard("{Enter}");
+        expect(onFinished).toHaveBeenCalledWith(true, "My section");
+    });
+});
diff --git a/apps/web/test/unit-tests/components/views/dialogs/InviteDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/InviteDialog-test.tsx
index 3f9eb6ac5c..4f3a80736c 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/InviteDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/InviteDialog-test.tsx
@@ -7,12 +7,13 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render, screen, findByText } from "jest-matrix-react";
+import { findByText, fireEvent, render, screen } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
-import { RoomType, type MatrixClient, MatrixError, Room } from "matrix-js-sdk/src/matrix";
+import { type MatrixClient, MatrixError, Room, RoomType } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { sleep } from "matrix-js-sdk/src/utils";
 import { mocked, type Mocked } from "jest-mock";
+import { UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
 
 import InviteDialog from "../../../../../src/components/views/dialogs/InviteDialog";
 import { InviteKind } from "../../../../../src/components/views/dialogs/InviteDialogTypes";
@@ -103,6 +104,11 @@ describe("InviteDialog", () => {
 
     beforeEach(() => {
         mockClient = getMockClientWithEventEmitter({
+            getCrypto: jest.fn().mockReturnValue({
+                getUserVerificationStatus: jest
+                    .fn()
+                    .mockResolvedValue(new UserVerificationStatus(false, false, true, false)),
+            }),
             getDomain: jest.fn().mockReturnValue(serverDomain),
             getUserId: jest.fn().mockReturnValue(bobId),
             getSafeUserId: jest.fn().mockReturnValue(bobId),
@@ -449,4 +455,44 @@ describe("InviteDialog", () => {
         await flushPromises();
         expect(screen.queryByText("@localpart:server.tld")).not.toBeInTheDocument();
     });
+
+    describe("when inviting a user whose cryptographic identity we do not know", () => {
+        beforeEach(() => {
+            mocked(mockClient.getCrypto()!.getUserVerificationStatus).mockImplementation(async (u) => {
+                return new UserVerificationStatus(false, false, false, false);
+            });
+        });
+
+        describe.each([InviteKind.Invite, InviteKind.Dm])("with invitekind '%s'", (kind) => {
+            const goButtonName = kind == InviteKind.Invite ? "Invite" : "Go";
+
+            beforeEach(() => {
+                render(
+                    <InviteDialog
+                        kind={kind as InviteKind.Invite | InviteKind.Dm}
+                        roomId={roomId}
+                        onFinished={jest.fn()}
+                    />,
+                );
+            });
+
+            it("should show a warning when inviting by user id", async () => {
+                await enterIntoSearchField(aliceId);
+                await userEvent.click(screen.getByRole("button", { name: goButtonName }));
+                await screen.findByText("Confirm inviting them", { exact: false });
+
+                expect(mocked(mockClient.getCrypto()!.getUserVerificationStatus)).toHaveBeenCalledTimes(1);
+                expect(mocked(mockClient.getCrypto()!.getUserVerificationStatus)).toHaveBeenCalledWith(aliceId);
+            });
+
+            it("should show a warning when inviting by email address", async () => {
+                await enterIntoSearchField("aaa@bbb");
+                await userEvent.click(screen.getByRole("button", { name: goButtonName }));
+                await screen.findByText("Confirm inviting them", { exact: false });
+
+                // We shouldn't call getUserVerificationStatus on an email address
+                expect(mocked(mockClient.getCrypto()!.getUserVerificationStatus)).not.toHaveBeenCalled();
+            });
+        });
+    });
 });
diff --git a/apps/web/test/unit-tests/components/views/dialogs/RoomSettingsDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/RoomSettingsDialog-test.tsx
index 73654cfc5f..5bc6933d50 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/RoomSettingsDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/RoomSettingsDialog-test.tsx
@@ -24,6 +24,7 @@ import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import { UIFeature } from "../../../../../src/settings/UIFeature";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
+import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
 
 describe("<RoomSettingsDialog />", () => {
     const userId = "@alice:server.org";
@@ -43,6 +44,8 @@ describe("<RoomSettingsDialog />", () => {
     const room2 = new Room("!room2:server.org", mockClient, userId);
     room2.name = "Another Room";
 
+    let sdkContext: SdkContextClass;
+
     jest.spyOn(SettingsStore, "getValue");
 
     beforeEach(() => {
@@ -54,6 +57,9 @@ describe("<RoomSettingsDialog />", () => {
             return null;
         });
 
+        sdkContext = new SdkContextClass();
+        sdkContext.client = mockClient;
+
         jest.spyOn(SettingsStore, "getValue").mockReset().mockReturnValue(false);
 
         const dmRoomMap = {
@@ -63,7 +69,7 @@ describe("<RoomSettingsDialog />", () => {
     });
 
     const getComponent = (onFinished = jest.fn(), propRoomId = roomId) =>
-        render(<RoomSettingsDialog roomId={propRoomId} onFinished={onFinished} />, {
+        render(<RoomSettingsDialog roomId={propRoomId} onFinished={onFinished} sdkContext={sdkContext} />, {
             wrapper: ({ children }) => (
                 <MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
             ),
@@ -79,7 +85,7 @@ describe("<RoomSettingsDialog />", () => {
 
         expect(getByText(`Room Settings - ${room.name}`)).toBeInTheDocument();
 
-        rerender(<RoomSettingsDialog roomId={room2.roomId} onFinished={jest.fn()} />);
+        rerender(<RoomSettingsDialog roomId={room2.roomId} onFinished={jest.fn()} sdkContext={sdkContext} />);
 
         expect(getByText(`Room Settings - ${room2.name}`)).toBeInTheDocument();
     });
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmKeyStorageOffDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmKeyStorageOffDialog-test.tsx.snap
index 50446830ef..17811d5488 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmKeyStorageOffDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmKeyStorageOffDialog-test.tsx.snap
@@ -9,8 +9,9 @@ exports[`ConfirmKeyStorageOffDialog renders 1`] = `
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_1r8kr_8 _destructive_1r8kr_34"
-        data-size="large"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
index a38972d276..c256ece1cb 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
@@ -36,7 +36,7 @@ exports[`ConfirmUserActionDialog renders 1`] = `
           class="mx_ConfirmUserActionDialog_avatar"
         >
           <span
-            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
             data-color="3"
             data-testid="avatar-img"
             data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateSectionDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateSectionDialog-test.tsx.snap
new file mode 100644
index 0000000000..7283c072f5
--- /dev/null
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateSectionDialog-test.tsx.snap
@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`CreateSectionDialog renders the dialog 1`] = `
+<div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_CreateSectionDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+    tabindex="-1"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Create a section
+      </h1>
+    </div>
+    <div
+      class="_flex_4dswl_9 mx_CreateSectionDialog_content"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-6x); --mx-flex-wrap: nowrap;"
+    >
+      <span
+        class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55"
+      >
+        Sections are only for you
+      </span>
+      <form
+        class="_root_19upo_16 mx_CreateSectionDialog_form"
+      >
+        <div
+          class="_field_19upo_26"
+        >
+          <label
+            class="_label_19upo_59"
+            for="radix-_r_0_"
+          >
+             
+            Section name
+          </label>
+          <input
+            class="_control_d83jn_10"
+            id="radix-_r_0_"
+            name="sectionName"
+            required=""
+            title=""
+          />
+        </div>
+      </form>
+    </div>
+    <div
+      class="mx_Dialog_buttons"
+    >
+      <span
+        class="mx_Dialog_buttons_row"
+      >
+        <button
+          data-testid="dialog-cancel-button"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="mx_Dialog_primary"
+          data-testid="dialog-primary-button"
+          disabled=""
+          type="button"
+        >
+          Create section
+        </button>
+      </span>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</div>
+`;
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
index b165dc24b6..28fe2c81d2 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
@@ -29,11 +29,11 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
     >
       Toolbox
     </div>
-    <div
+    <span
       class="mx_CopyableText mx_DevTools_label_right"
     >
       Room ID: !id
-      <div
+      <button
         aria-describedby="_r_2_"
         aria-label="Copy"
         class="mx_AccessibleButton mx_CopyableText_copyButton"
@@ -54,8 +54,8 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
             d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
           />
         </svg>
-      </div>
-    </div>
+      </button>
+    </span>
     <div
       class="mx_DevTools_label_bottom"
     />
@@ -298,7 +298,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
             class="_controls_17lij_8"
           >
             <input
-              class="_control_sqdq4_10"
+              class="_control_d83jn_10"
               id="radix-_r_d_"
               name="input"
               title=""
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/InviteProgressBody-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/InviteProgressBody-test.tsx.snap
index d233bd8b96..e92e655860 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/InviteProgressBody-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/InviteProgressBody-test.tsx.snap
@@ -10,7 +10,7 @@ exports[`InviteProgressBody should match snapshot 1`] = `
     >
       <svg
         aria-label="Loading…"
-        class="_icon_11k6c_18"
+        class="_icon_1855a_18"
         data-testid="spinner"
         fill="currentColor"
         height="1em"
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
index 9c19ef7d2f..c9f25e3b25 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
@@ -120,7 +120,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
                 >
                   <div>
                     <span
-                      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+                      class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
                       data-color="1"
                       data-testid="avatar-img"
                       data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/RoomSettingsDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/RoomSettingsDialog-test.tsx.snap
index c57922ed30..9521e705b3 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/RoomSettingsDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/RoomSettingsDialog-test.tsx.snap
@@ -192,7 +192,7 @@ exports[`<RoomSettingsDialog /> poll history displays poll history when tab clic
         >
           <svg
             aria-label="Loading…"
-            class="_icon_11k6c_18"
+            class="_icon_1855a_18"
             data-testid="spinner"
             fill="currentColor"
             height="1em"
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap
index 999b18ffc6..ad8f1b9196 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap
@@ -182,7 +182,7 @@ exports[`ShareDialog should not render the socials if disabled 1`] = `
           >
             <svg
               aria-label="Loading…"
-              class="_icon_11k6c_18"
+              class="_icon_1855a_18"
               data-testid="spinner"
               fill="currentColor"
               height="1em"
@@ -292,7 +292,7 @@ exports[`ShareDialog should render a share dialog for a matrix event 1`] = `
           >
             <svg
               aria-label="Loading…"
-              class="_icon_11k6c_18"
+              class="_icon_1855a_18"
               data-testid="spinner"
               fill="currentColor"
               height="1em"
@@ -489,7 +489,7 @@ exports[`ShareDialog should render a share dialog for a room 1`] = `
           >
             <svg
               aria-label="Loading…"
-              class="_icon_11k6c_18"
+              class="_icon_1855a_18"
               data-testid="spinner"
               fill="currentColor"
               height="1em"
@@ -685,7 +685,7 @@ exports[`ShareDialog should render a share dialog for a room member 1`] = `
           >
             <svg
               aria-label="Loading…"
-              class="_icon_11k6c_18"
+              class="_icon_1855a_18"
               data-testid="spinner"
               fill="currentColor"
               height="1em"
@@ -854,7 +854,7 @@ exports[`ShareDialog should render a share dialog for an URL 1`] = `
           >
             <svg
               aria-label="Loading…"
-              class="_icon_11k6c_18"
+              class="_icon_1855a_18"
               data-testid="spinner"
               fill="currentColor"
               height="1em"
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap
index 79d21cf19f..821de17b0c 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap
@@ -197,7 +197,7 @@ exports[`VerificationRequestDialog Initially, asks how you would like to verify
             >
               <svg
                 aria-label="Loading…"
-                class="_icon_11k6c_18"
+                class="_icon_1855a_18"
                 data-testid="spinner"
                 fill="currentColor"
                 height="1em"
diff --git a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Crypto-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Crypto-test.tsx.snap
index 4dfa8ecffc..5808e26460 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Crypto-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Crypto-test.tsx.snap
@@ -5,7 +5,13 @@ exports[`<Crypto /> <CrossSigning /> should display when the cross-signing data
   aria-label="Cross-signing"
 >
   <thead>
-    Cross-signing
+    <tr>
+      <th
+        colspan="2"
+      >
+        Cross-signing
+      </th>
+    </tr>
   </thead>
   <tbody>
     <tr>
@@ -77,7 +83,13 @@ exports[`<Crypto /> <CrossSigning /> should display when the cross-signing data
   aria-label="Cross-signing"
 >
   <thead>
-    Cross-signing
+    <tr>
+      <th
+        colspan="2"
+      >
+        Cross-signing
+      </th>
+    </tr>
   </thead>
   <tbody>
     <tr>
@@ -149,7 +161,13 @@ exports[`<Crypto /> <KeyStorage /> should display when the key storage data are
   aria-label="Key Storage"
 >
   <thead>
-    Key Storage
+    <tr>
+      <th
+        colspan="2"
+      >
+        Key Storage
+      </th>
+    </tr>
   </thead>
   <tbody>
     <tr>
@@ -221,7 +239,13 @@ exports[`<Crypto /> <KeyStorage /> should display when the key storage data are
   aria-label="Key Storage"
 >
   <thead>
-    Key Storage
+    <tr>
+      <th
+        colspan="2"
+      >
+        Key Storage
+      </th>
+    </tr>
   </thead>
   <tbody>
     <tr>
diff --git a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap
index 10915b5222..65510b96e5 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap
@@ -7,11 +7,11 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
   >
     <ul>
       <li>
-        <div
+        <span
           class="mx_CopyableText"
         >
           User ID: @alice:example.com
-          <div
+          <button
             aria-label="Copy"
             class="mx_AccessibleButton mx_CopyableText_copyButton"
             role="button"
@@ -31,15 +31,15 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
                 d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
               />
             </svg>
-          </div>
-        </div>
+          </button>
+        </span>
       </li>
       <li>
-        <div
+        <span
           class="mx_CopyableText"
         >
           Device ID: SIGNED
-          <div
+          <button
             aria-label="Copy"
             class="mx_AccessibleButton mx_CopyableText_copyButton"
             role="button"
@@ -59,8 +59,8 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
                 d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
               />
             </svg>
-          </div>
-        </div>
+          </button>
+        </span>
       </li>
       <li>
         Displayname: 
@@ -95,11 +95,11 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
         Device keys
         <ul>
           <li>
-            <div
+            <span
               class="mx_CopyableText"
             >
               ed25519: an_ed25519_public_key
-              <div
+              <button
                 aria-label="Copy"
                 class="mx_AccessibleButton mx_CopyableText_copyButton"
                 role="button"
@@ -119,15 +119,15 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
                     d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                   />
                 </svg>
-              </div>
-            </div>
+              </button>
+            </span>
           </li>
           <li>
-            <div
+            <span
               class="mx_CopyableText"
             >
               curve25519: a_curve25519_public_key
-              <div
+              <button
                 aria-label="Copy"
                 class="mx_AccessibleButton mx_CopyableText_copyButton"
                 role="button"
@@ -147,8 +147,8 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
                     d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                   />
                 </svg>
-              </div>
-            </div>
+              </button>
+            </span>
           </li>
         </ul>
       </li>
@@ -171,11 +171,11 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
   >
     <ul>
       <li>
-        <div
+        <span
           class="mx_CopyableText"
         >
           User ID: @alice:example.com
-          <div
+          <button
             aria-label="Copy"
             class="mx_AccessibleButton mx_CopyableText_copyButton"
             role="button"
@@ -195,15 +195,15 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
                 d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
               />
             </svg>
-          </div>
-        </div>
+          </button>
+        </span>
       </li>
       <li>
-        <div
+        <span
           class="mx_CopyableText"
         >
           Device ID: UNSIGNED
-          <div
+          <button
             aria-label="Copy"
             class="mx_AccessibleButton mx_CopyableText_copyButton"
             role="button"
@@ -223,8 +223,8 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
                 d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
               />
             </svg>
-          </div>
-        </div>
+          </button>
+        </span>
       </li>
       <li>
         Displayname: 
@@ -259,11 +259,11 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
         Device keys
         <ul>
           <li>
-            <div
+            <span
               class="mx_CopyableText"
             >
               ed25519: an_ed25519_public_key
-              <div
+              <button
                 aria-label="Copy"
                 class="mx_AccessibleButton mx_CopyableText_copyButton"
                 role="button"
@@ -283,15 +283,15 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
                     d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                   />
                 </svg>
-              </div>
-            </div>
+              </button>
+            </span>
           </li>
           <li>
-            <div
+            <span
               class="mx_CopyableText"
             >
               curve25519: a_curve25519_public_key
-              <div
+              <button
                 aria-label="Copy"
                 class="mx_AccessibleButton mx_CopyableText_copyButton"
                 role="button"
@@ -311,8 +311,8 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
                     d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                   />
                 </svg>
-              </div>
-            </div>
+              </button>
+            </span>
           </li>
         </ul>
       </li>
@@ -335,11 +335,11 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
   >
     <ul>
       <li>
-        <div
+        <span
           class="mx_CopyableText"
         >
           User ID: @alice:example.com
-          <div
+          <button
             aria-label="Copy"
             class="mx_AccessibleButton mx_CopyableText_copyButton"
             role="button"
@@ -359,15 +359,15 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
                 d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
               />
             </svg>
-          </div>
-        </div>
+          </button>
+        </span>
       </li>
       <li>
-        <div
+        <span
           class="mx_CopyableText"
         >
           Device ID: VERIFIED
-          <div
+          <button
             aria-label="Copy"
             class="mx_AccessibleButton mx_CopyableText_copyButton"
             role="button"
@@ -387,8 +387,8 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
                 d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
               />
             </svg>
-          </div>
-        </div>
+          </button>
+        </span>
       </li>
       <li>
         Displayname: 
@@ -425,11 +425,11 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
         Device keys
         <ul>
           <li>
-            <div
+            <span
               class="mx_CopyableText"
             >
               ed25519: an_ed25519_public_key
-              <div
+              <button
                 aria-label="Copy"
                 class="mx_AccessibleButton mx_CopyableText_copyButton"
                 role="button"
@@ -449,15 +449,15 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
                     d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                   />
                 </svg>
-              </div>
-            </div>
+              </button>
+            </span>
           </li>
           <li>
-            <div
+            <span
               class="mx_CopyableText"
             >
               curve25519: a_curve25519_public_key
-              <div
+              <button
                 aria-label="Copy"
                 class="mx_AccessibleButton mx_CopyableText_copyButton"
                 role="button"
@@ -477,8 +477,8 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
                     d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                   />
                 </svg>
-              </div>
-            </div>
+              </button>
+            </span>
           </li>
         </ul>
       </li>
@@ -501,11 +501,11 @@ exports[`<Users /> should render a single user 1`] = `
   >
     <ul>
       <li>
-        <div
+        <span
           class="mx_CopyableText"
         >
           User ID: @alice:example.com
-          <div
+          <button
             aria-label="Copy"
             class="mx_AccessibleButton mx_CopyableText_copyButton"
             role="button"
@@ -525,8 +525,8 @@ exports[`<Users /> should render a single user 1`] = `
                 d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
               />
             </svg>
-          </div>
-        </div>
+          </button>
+        </span>
       </li>
       <li>
         Membership: join
diff --git a/apps/web/test/unit-tests/components/views/dialogs/invite/UnknownIdentityUsersWarningDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/invite/UnknownIdentityUsersWarningDialog-test.tsx
new file mode 100644
index 0000000000..f3b7c0476f
--- /dev/null
+++ b/apps/web/test/unit-tests/components/views/dialogs/invite/UnknownIdentityUsersWarningDialog-test.tsx
@@ -0,0 +1,104 @@
+/*
+ Copyright 2026 Element Creations Ltd.
+
+ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type ComponentProps } from "react";
+import { render, type RenderResult } from "jest-matrix-react";
+import { getAllByRole, getAllByText, getByText } from "@testing-library/dom";
+
+import UnknownIdentityUsersWarningDialog from "../../../../../../src/components/views/dialogs/invite/UnknownIdentityUsersWarningDialog.tsx";
+import { InviteKind } from "../../../../../../src/components/views/dialogs/InviteDialogTypes.ts";
+import { DirectoryMember, ThreepidMember } from "../../../../../../src/utils/direct-messages.ts";
+import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../../../test-utils";
+
+describe("UnknownIdentityUsersWarningDialog", () => {
+    beforeEach(() => {
+        getMockClientWithEventEmitter({
+            ...mockClientMethodsUser(),
+        });
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it("should show entries for each user", () => {
+        const result = renderComponent({
+            users: [
+                new DirectoryMember({ user_id: "@alice:example.com" }),
+                new DirectoryMember({
+                    user_id: "@bob:example.net",
+                    display_name: "Bob",
+                    avatar_url: "mxc://example.com/abc",
+                }),
+                new ThreepidMember("charlie@example.com"),
+            ],
+        });
+
+        const list = result.getByTestId("userlist");
+        const entries = getAllByRole(list, "option");
+        expect(entries).toHaveLength(3);
+
+        // No displayname so mxid is displayed twice
+        expect(getAllByText(entries[0], "@alice:example.com")).toHaveLength(2);
+
+        getByText(entries[1], "Bob");
+        getByText(entries[2], "charlie@example.com");
+    });
+
+    describe("in DM mode", () => {
+        const kind = InviteKind.Dm;
+
+        it("shows a 'Continue' button", () => {
+            const onContinue = jest.fn();
+            const result = renderComponent({ kind, onContinue });
+            const continueButton = result.getByRole("button", { name: "Continue" });
+            continueButton.click();
+            expect(onContinue).toHaveBeenCalled();
+        });
+
+        it("shows a 'Cancel' button", () => {
+            const onCancel = jest.fn();
+            const result = renderComponent({ kind, onCancel });
+            const cancelButton = result.getByRole("button", { name: "Cancel" });
+            cancelButton.click();
+            expect(onCancel).toHaveBeenCalled();
+        });
+    });
+
+    describe("in Invite mode", () => {
+        const kind = InviteKind.Invite;
+
+        it("shows an 'Invite' button", () => {
+            const onContinue = jest.fn();
+            const result = renderComponent({ kind, onContinue });
+            const continueButton = result.getByRole("button", { name: "Invite" });
+            continueButton.click();
+            expect(onContinue).toHaveBeenCalled();
+        });
+
+        it("shows a 'Remove' button", () => {
+            const onRemove = jest.fn();
+            const result = renderComponent({ kind, onRemove });
+            const removeButton = result.getByRole("button", { name: "Remove" });
+            removeButton.click();
+            expect(onRemove).toHaveBeenCalled();
+        });
+    });
+});
+
+function renderComponent(props: Partial<ComponentProps<typeof UnknownIdentityUsersWarningDialog>>): RenderResult {
+    const props1: ComponentProps<typeof UnknownIdentityUsersWarningDialog> = {
+        onContinue: () => {},
+        onCancel: () => {},
+        onRemove: () => {},
+        screenName: undefined,
+        kind: InviteKind.Dm,
+        users: [],
+        ...props,
+    };
+    return render(<UnknownIdentityUsersWarningDialog {...props1} />);
+}
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
index d3dd88572f..a8ced5dbfc 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
@@ -106,7 +106,7 @@ exports[`AppTile for a pinned widget should render 1`] = `
         <span>
           <span
             aria-label="Avatar"
-            class="_avatar_zysgz_8 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_va14e_8 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -115,7 +115,7 @@ exports[`AppTile for a pinned widget should render 1`] = `
           >
             <img
               alt=""
-              class="_image_zysgz_43"
+              class="_image_va14e_43"
               data-type="round"
               height="20px"
               loading="lazy"
@@ -222,7 +222,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
         <span>
           <span
             aria-label="Avatar"
-            class="_avatar_zysgz_8 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_va14e_8 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -231,7 +231,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
           >
             <img
               alt=""
-              class="_image_zysgz_43"
+              class="_image_va14e_43"
               data-type="round"
               height="20px"
               loading="lazy"
@@ -329,7 +329,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
           </div>
           <div>
             <span
-              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+              class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
               data-color="1"
               data-testid="avatar-img"
               data-type="round"
@@ -417,7 +417,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
               <span>
                 <span
                   aria-label="Avatar"
-                  class="_avatar_zysgz_8 mx_BaseAvatar mx_WidgetAvatar"
+                  class="_avatar_va14e_8 mx_BaseAvatar mx_WidgetAvatar"
                   data-color="1"
                   data-testid="avatar-img"
                   data-type="round"
@@ -426,7 +426,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
                 >
                   <img
                     alt=""
-                    class="_image_zysgz_43"
+                    class="_image_va14e_43"
                     data-type="round"
                     height="20px"
                     loading="lazy"
@@ -525,7 +525,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
                  
                 <svg
                   aria-label="Loading…"
-                  class="_icon_11k6c_18"
+                  class="_icon_1855a_18"
                   data-testid="spinner"
                   fill="currentColor"
                   height="1em"
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/FacePile-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/FacePile-test.tsx.snap
index f12f52b483..2f83ff1844 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/FacePile-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/FacePile-test.tsx.snap
@@ -9,10 +9,10 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
     tabindex="0"
   >
     <div
-      class="_stacked-avatars_zysgz_109"
+      class="_stacked-avatars_va14e_109"
     >
       <span
-        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+        class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
         data-color="4"
         data-testid="avatar-img"
         data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/LearnMore-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/LearnMore-test.tsx.snap
index 4191518f03..01fb8177b2 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/LearnMore-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/LearnMore-test.tsx.snap
@@ -2,13 +2,13 @@
 
 exports[`<LearnMore /> renders button 1`] = `
 <div>
-  <div
+  <button
     class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
     data-testid="testid"
     role="button"
     tabindex="0"
   >
     Learn more
-  </div>
+  </button>
 </div>
 `;
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/Pill-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/Pill-test.tsx.snap
index 6b5c91b973..35197567d8 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/Pill-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/Pill-test.tsx.snap
@@ -40,7 +40,7 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
         >
           <span
             aria-hidden="true"
-            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -71,7 +71,7 @@ exports[`<Pill> should render the expected pill for a known user not in the room
       >
         <span
           aria-hidden="true"
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
           data-color="5"
           data-testid="avatar-img"
           data-type="round"
@@ -101,7 +101,7 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
       >
         <span
           aria-hidden="true"
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
@@ -131,7 +131,7 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
       >
         <span
           aria-hidden="true"
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
           data-color="4"
           data-testid="avatar-img"
           data-type="round"
@@ -161,7 +161,7 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
       >
         <span
           aria-hidden="true"
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
@@ -191,7 +191,7 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
       >
         <span
           aria-hidden="true"
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
           data-color="2"
           data-testid="avatar-img"
           data-type="round"
@@ -252,7 +252,7 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
       >
         <span
           aria-hidden="true"
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
@@ -282,7 +282,7 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
       >
         <span
           aria-hidden="true"
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
           data-color="4"
           data-testid="avatar-img"
           data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/ReplyChain-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/ReplyChain-test.tsx.snap
index 4f269d0818..9f2d6906b4 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/ReplyChain-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/ReplyChain-test.tsx.snap
@@ -20,7 +20,7 @@ exports[`ReplyChain should call setQuoteExpanded if chain is longer than 2 lines
               class="mx_ReplyTile_sender"
             >
               <span
-                class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+                class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
                 data-color="2"
                 data-testid="avatar-img"
                 data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
index c8e31e7b6f..587bce8906 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
@@ -10,10 +10,10 @@ exports[`<RoomFacePile /> renders 1`] = `
     tabindex="0"
   >
     <div
-      class="_stacked-avatars_zysgz_109"
+      class="_stacked-avatars_va14e_109"
     >
       <span
-        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+        class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
         data-color="4"
         data-testid="avatar-img"
         data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/SettingsField-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/SettingsField-test.tsx.snap
index be143cba28..15d1fd5eb8 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/SettingsField-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/SettingsField-test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<SettingsField /> should render with the default label 1`] = `
         class="_controls_17lij_8"
       >
         <input
-          class="_control_sqdq4_10"
+          class="_control_d83jn_10"
           id="radix-_r_0_"
           name="input"
           title=""
diff --git a/apps/web/test/unit-tests/components/views/messages/TextualBody-test.tsx b/apps/web/test/unit-tests/components/views/messages/TextualBody-test.tsx
index 8351394533..286808abd6 100644
--- a/apps/web/test/unit-tests/components/views/messages/TextualBody-test.tsx
+++ b/apps/web/test/unit-tests/components/views/messages/TextualBody-test.tsx
@@ -146,6 +146,28 @@ describe("<TextualBody />", () => {
         expect(content).toMatchSnapshot();
     });
 
+    it("keeps edited emote bodies inline with the sender", () => {
+        DMRoomMap.makeShared(defaultMatrixClient);
+
+        const ev = mkEvent({
+            type: "m.room.message",
+            room: room1Id,
+            user: "sender",
+            content: {
+                body: "winks",
+                msgtype: "m.emote",
+            },
+            event: true,
+        });
+        jest.spyOn(ev, "replacingEventDate").mockReturnValue(new Date(1993, 7, 3));
+
+        const { container } = getComponent({ mxEvent: ev, replacingEventId: ev.getId() });
+
+        const annotated = container.querySelector(".mx_MEmoteBody > .mx_EventTile_annotatedInline");
+        expect(annotated).not.toBeNull();
+        expect(annotated?.tagName).toBe("DIV");
+    });
+
     it("renders m.notice correctly", () => {
         DMRoomMap.makeShared(defaultMatrixClient);
 
@@ -192,36 +214,28 @@ describe("<TextualBody />", () => {
             const ev = mkRoomTextMessage("Chat with @user:example.com");
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
-            expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Chat with <a href="https://matrix.to/#/@user:example.com" rel="noreferrer noopener" data-linkified="true">@user:example.com</a>"`,
-            );
+            expect(content.innerHTML).toMatchSnapshot();
         });
 
         it("should pillify an MXID permalink", () => {
             const ev = mkRoomTextMessage("Chat with https://matrix.to/#/@user:example.com");
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
-            expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Chat with <bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" referrerpolicy="no-referrer" class="_image_zysgz_43" data-type="round" width="16px" height="16px" src="mxc://avatar.url/image.png"></span><span class="mx_Pill_text">Member</span></a></bdi>"`,
-            );
+            expect(content.innerHTML).toMatchSnapshot();
         });
 
         it("should not pillify room aliases", () => {
             const ev = mkRoomTextMessage("Visit #room:example.com");
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
-            expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Visit <a href="https://matrix.to/#/#room:example.com" rel="noreferrer noopener" data-linkified="true">#room:example.com</a>"`,
-            );
+            expect(content.innerHTML).toMatchSnapshot();
         });
 
         it("should pillify a room alias permalink", () => {
             const ev = mkRoomTextMessage("Visit https://matrix.to/#/#room:example.com");
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
-            expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Visit <bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24" class="mx_Pill_LinkIcon mx_BaseAvatar"><path d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"></path></svg><span class="mx_Pill_text">#room:example.com</span></a></bdi>"`,
-            );
+            expect(content.innerHTML).toMatchSnapshot();
         });
 
         it("should pillify a permalink to a message in the same room with the label »Message from Member«", () => {
@@ -257,9 +271,7 @@ describe("<TextualBody />", () => {
             });
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
-            expect(content.innerHTML).toMatchInlineSnapshot(
-                `"foo <bdi><span tabindex="0"><span class="mx_Pill mx_KeywordPill"><span class="mx_Pill_text">bar</span></span></span></bdi> baz"`,
-            );
+            expect(content.innerHTML).toMatchSnapshot();
         });
     });
 
diff --git a/apps/web/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap b/apps/web/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap
index 1acbcd753a..3f22238d3a 100644
--- a/apps/web/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap
@@ -20,7 +20,7 @@ exports[`<MImageBody/> should generate a thumbnail if one isn't included for ani
           >
             <svg
               aria-label="Loading…"
-              class="_icon_11k6c_18"
+              class="_icon_1855a_18"
               data-testid="spinner"
               fill="currentColor"
               height="1em"
@@ -74,7 +74,7 @@ exports[`<MImageBody/> should open ImageView using thumbnail for encrypted svg 1
       <button
         aria-label="Profile picture"
         aria-live="off"
-        class="_avatar_zysgz_8 mx_BaseAvatar mx_Dialog_nonDialogButton _avatar-imageless_zysgz_55"
+        class="_avatar_va14e_8 mx_BaseAvatar mx_Dialog_nonDialogButton _avatar-imageless_va14e_55"
         data-color="2"
         data-testid="avatar-img"
         data-type="round"
@@ -352,7 +352,7 @@ exports[`<MImageBody/> should show a thumbnail while image is being downloaded 1
         >
           <svg
             aria-label="Loading…"
-            class="_icon_11k6c_18"
+            class="_icon_1855a_18"
             data-testid="spinner"
             fill="currentColor"
             height="1em"
diff --git a/apps/web/test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap b/apps/web/test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
index abcee23a75..98d88baa75 100644
--- a/apps/web/test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
@@ -92,7 +92,7 @@ exports[`MLocationBody <MLocationBody> without error renders marker correctly fo
               class="mx_Marker_border"
             >
               <span
-                class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+                class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
                 data-color="3"
                 data-testid="avatar-img"
                 data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap b/apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
index 3e071d8cbf..d4bfa3dc5f 100644
--- a/apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
@@ -59,7 +59,7 @@ exports[`<TextualBody /> renders formatted m.text correctly linkification is not
         </code>
       </div>
     </pre>
-    <div
+    <button
       aria-label="Copy"
       class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton"
       role="button"
@@ -79,7 +79,7 @@ exports[`<TextualBody /> renders formatted m.text correctly linkification is not
           d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
         />
       </svg>
-    </div>
+    </button>
   </div>
   
 
@@ -100,7 +100,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
       <span
         aria-hidden="true"
         aria-label="Profile picture"
-        class="_avatar_zysgz_8 mx_BaseAvatar"
+        class="_avatar_va14e_8 mx_BaseAvatar"
         data-color="2"
         data-testid="avatar-img"
         data-type="round"
@@ -108,7 +108,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
       >
         <img
           alt=""
-          class="_image_zysgz_43"
+          class="_image_va14e_43"
           data-type="round"
           height="16px"
           loading="lazy"
@@ -145,7 +145,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
           <span
             aria-hidden="true"
             aria-label="Avatar"
-            class="_avatar_zysgz_8 mx_BaseAvatar"
+            class="_avatar_va14e_8 mx_BaseAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -153,7 +153,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
           >
             <img
               alt=""
-              class="_image_zysgz_43"
+              class="_image_va14e_43"
               data-type="round"
               height="16px"
               loading="lazy"
@@ -192,7 +192,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
           <span
             aria-hidden="true"
             aria-label="Avatar"
-            class="_avatar_zysgz_8 mx_BaseAvatar"
+            class="_avatar_va14e_8 mx_BaseAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -200,7 +200,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
           >
             <img
               alt=""
-              class="_image_zysgz_43"
+              class="_image_va14e_43"
               data-type="round"
               height="16px"
               loading="lazy"
@@ -278,7 +278,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
         </code>
       </div>
     </pre>
-    <div
+    <button
       aria-label="Copy"
       class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton"
       role="button"
@@ -298,7 +298,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
           d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
         />
       </svg>
-    </div>
+    </button>
   </div>
   
 
@@ -319,7 +319,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
       <span
         aria-hidden="true"
         aria-label="Profile picture"
-        class="_avatar_zysgz_8 mx_BaseAvatar"
+        class="_avatar_va14e_8 mx_BaseAvatar"
         data-color="2"
         data-testid="avatar-img"
         data-type="round"
@@ -327,7 +327,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
       >
         <img
           alt=""
-          class="_image_zysgz_43"
+          class="_image_va14e_43"
           data-type="round"
           height="16px"
           loading="lazy"
@@ -482,7 +482,7 @@ num_sqrt = num **
         />
       </svg>
     </span>
-    <div
+    <button
       aria-label="Copy"
       class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton mx_EventTile_buttonBottom"
       role="button"
@@ -502,7 +502,7 @@ num_sqrt = num **
           d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
         />
       </svg>
-    </div>
+    </button>
   </div>
   
 
@@ -567,9 +567,15 @@ exports[`<TextualBody /> renders plain-text m.text correctly linkification get a
 </div>
 `;
 
-exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to a message in the same room with the label »Message from Member« 1`] = `"Visit <bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room1:example.com/%event_id%"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" referrerpolicy="no-referrer" class="_image_zysgz_43" data-type="round" width="16px" height="16px" src="mxc://avatar.url/image.png"></span><span class="mx_Pill_text">Message from Member</span></a></bdi>"`;
+exports[`<TextualBody /> renders plain-text m.text correctly should not pillify MXIDs 1`] = `"Chat with <a href="https://matrix.to/#/@user:example.com" rel="noreferrer noopener" data-linkified="true">@user:example.com</a>"`;
 
-exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an event in another room with the label »Message in Room 2« 1`] = `"Visit <bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room2:example.com/%event_id%"><span aria-label="Avatar" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" referrerpolicy="no-referrer" class="_image_zysgz_43" data-type="round" width="16px" height="16px" src="mxc://avatar.url/room.png"></span><span class="mx_Pill_text">Message in Room 2</span></a></bdi>"`;
+exports[`<TextualBody /> renders plain-text m.text correctly should not pillify room aliases 1`] = `"Visit <a href="https://matrix.to/#/#room:example.com" rel="noreferrer noopener" data-linkified="true">#room:example.com</a>"`;
+
+exports[`<TextualBody /> renders plain-text m.text correctly should pillify a keyword responsible for triggering a notification 1`] = `"foo <bdi><span tabindex="0"><span class="mx_Pill mx_KeywordPill"><span class="mx_Pill_text">bar</span></span></span></bdi> baz"`;
+
+exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to a message in the same room with the label »Message from Member« 1`] = `"Visit <bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room1:example.com/%event_id%"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" referrerpolicy="no-referrer" class="_image_va14e_43" data-type="round" width="16px" height="16px" src="mxc://avatar.url/image.png"></span><span class="mx_Pill_text">Message from Member</span></a></bdi>"`;
+
+exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an event in another room with the label »Message in Room 2« 1`] = `"Visit <bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room2:example.com/%event_id%"><span aria-label="Avatar" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" referrerpolicy="no-referrer" class="_image_va14e_43" data-type="round" width="16px" height="16px" src="mxc://avatar.url/room.png"></span><span class="mx_Pill_text">Message in Room 2</span></a></bdi>"`;
 
 exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an unknown message in the same room with the label »Message« 1`] = `
 <div
@@ -604,6 +610,10 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
 </div>
 `;
 
+exports[`<TextualBody /> renders plain-text m.text correctly should pillify a room alias permalink 1`] = `"Visit <bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24" class="mx_Pill_LinkIcon mx_BaseAvatar"><path d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"></path></svg><span class="mx_Pill_text">#room:example.com</span></a></bdi>"`;
+
+exports[`<TextualBody /> renders plain-text m.text correctly should pillify an MXID permalink 1`] = `"Chat with <bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" referrerpolicy="no-referrer" class="_image_va14e_43" data-type="round" width="16px" height="16px" src="mxc://avatar.url/image.png"></span><span class="mx_Pill_text">Member</span></a></bdi>"`;
+
 exports[`<TextualBody /> renders plain-text m.text correctly simple message renders as expected 1`] = `
 <div
   class="mx_EventTile_body translate"
diff --git a/apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap b/apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap
index 7dbc54b7b2..15208761ad 100644
--- a/apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap
@@ -196,7 +196,7 @@ exports[`<PollHistory /> renders a no polls message and a load more button when
   >
     <svg
       aria-label="Loading…"
-      class="_icon_11k6c_18"
+      class="_icon_1855a_18"
       data-testid="spinner"
       fill="currentColor"
       height="1em"
diff --git a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
index bdcb397486..89e6f7b00d 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
@@ -172,7 +172,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
         Add extensions
       </button>
       <div
-        class="_separator_cqpyv_8"
+        class="_separator_13qwf_8"
         data-kind="primary"
         data-orientation="horizontal"
         role="separator"
@@ -187,7 +187,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
         >
           <span
             aria-label="Avatar"
-            class="_avatar_zysgz_8 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_va14e_8 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -196,7 +196,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
           >
             <img
               alt=""
-              class="_image_zysgz_43"
+              class="_image_va14e_43"
               data-type="round"
               height="24px"
               loading="lazy"
@@ -240,7 +240,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
         >
           <span
             aria-label="Avatar"
-            class="_avatar_zysgz_8 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_va14e_8 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -249,7 +249,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
           >
             <img
               alt=""
-              class="_image_zysgz_43"
+              class="_image_va14e_43"
               data-type="round"
               height="24px"
               loading="lazy"
diff --git a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
index f6f733a2d6..fb40f56d2e 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
@@ -141,7 +141,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
         >
           <div>
             <span
-              class="_avatar_zysgz_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_zysgz_55"
+              class="_avatar_va14e_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_va14e_55"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -211,7 +211,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
           </div>
         </div>
         <div
-          class="_separator_cqpyv_8 mx_PinnedMessagesCard_Separator"
+          class="_separator_13qwf_8 mx_PinnedMessagesCard_Separator"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
@@ -222,7 +222,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
         >
           <div>
             <span
-              class="_avatar_zysgz_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_zysgz_55"
+              class="_avatar_va14e_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_va14e_55"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -369,7 +369,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
         >
           <div>
             <span
-              class="_avatar_zysgz_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_zysgz_55"
+              class="_avatar_va14e_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_va14e_55"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -439,7 +439,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
           </div>
         </div>
         <div
-          class="_separator_cqpyv_8 mx_PinnedMessagesCard_Separator"
+          class="_separator_13qwf_8 mx_PinnedMessagesCard_Separator"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
@@ -450,7 +450,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
         >
           <div>
             <span
-              class="_avatar_zysgz_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_zysgz_55"
+              class="_avatar_va14e_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_va14e_55"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
index 41faabf7a8..296be2fa26 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
@@ -49,7 +49,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         class="mx_RoomSummaryCard_container"
       >
         <span
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
@@ -73,7 +73,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
         >
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -91,7 +91,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             Public room
           </span>
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -109,7 +109,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             Not encrypted
           </span>
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -181,9 +181,9 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             style="--mx-box-flex: 1;"
           >
             <a
-              class="_link_1v5rz_8"
+              class="_link_k9ljz_8"
               data-kind="primary"
-              data-size="medium"
+              data-size="md"
               rel="noreferrer noopener"
             >
               <p
@@ -196,7 +196,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         </section>
       </header>
       <div
-        class="_separator_cqpyv_8"
+        class="_separator_13qwf_8"
         data-kind="primary"
         data-orientation="horizontal"
         role="separator"
@@ -207,13 +207,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
       >
         <button
           aria-checked="false"
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitemcheckbox"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -225,7 +225,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Favourite
           </span>
@@ -246,13 +246,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </div>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -264,13 +264,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Invite
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -283,19 +283,19 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_cqpyv_8"
+          class="_separator_13qwf_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
         />
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -313,13 +313,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             People
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -332,13 +332,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -353,13 +353,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Threads
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -372,13 +372,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -392,13 +392,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Pinned messages
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -416,13 +416,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </span>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -434,13 +434,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Files
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -453,13 +453,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -471,13 +471,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Extensions
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -490,19 +490,19 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_cqpyv_8"
+          class="_separator_13qwf_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
         />
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -514,13 +514,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Copy link
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -533,13 +533,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -551,13 +551,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Polls
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -570,13 +570,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -588,13 +588,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Export Chat
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -607,13 +607,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -628,13 +628,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Settings
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -647,7 +647,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_cqpyv_8"
+          class="_separator_13qwf_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
@@ -656,13 +656,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           class="mx_RoomSummaryCard_bottomOptions"
         >
           <button
-            class="_item_lqfwq_8 _interactive_lqfwq_26"
+            class="_item_bym9p_8 _interactive_bym9p_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_lqfwq_50"
+              class="_icon_bym9p_51"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -674,13 +674,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
             >
               Report room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_lqfwq_59"
+              class="_nav-hint_bym9p_60"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -693,13 +693,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             </svg>
           </button>
           <button
-            class="mx_RoomSummaryCard_leave _item_lqfwq_8 _interactive_lqfwq_26"
+            class="mx_RoomSummaryCard_leave _item_bym9p_8 _interactive_bym9p_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_lqfwq_50"
+              class="_icon_bym9p_51"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -714,13 +714,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
             >
               Leave room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_lqfwq_59"
+              class="_nav-hint_bym9p_60"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -788,7 +788,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         class="mx_RoomSummaryCard_container"
       >
         <span
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
@@ -812,7 +812,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
         >
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -830,7 +830,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             Public room
           </span>
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -848,7 +848,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             Not encrypted
           </span>
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -878,9 +878,9 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             style="--mx-box-flex: 1;"
           >
             <a
-              class="_link_1v5rz_8"
+              class="_link_k9ljz_8"
               data-kind="primary"
-              data-size="medium"
+              data-size="md"
               rel="noreferrer noopener"
             >
               <p
@@ -893,7 +893,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </section>
       </header>
       <div
-        class="_separator_cqpyv_8"
+        class="_separator_13qwf_8"
         data-kind="primary"
         data-orientation="horizontal"
         role="separator"
@@ -904,13 +904,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
       >
         <button
           aria-checked="false"
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitemcheckbox"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -922,7 +922,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Favourite
           </span>
@@ -943,13 +943,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </div>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -961,13 +961,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Invite
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -980,19 +980,19 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_cqpyv_8"
+          class="_separator_13qwf_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
         />
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1010,13 +1010,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             People
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1029,13 +1029,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1050,13 +1050,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Threads
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1069,13 +1069,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1089,13 +1089,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Pinned messages
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1113,13 +1113,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </span>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1131,13 +1131,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Files
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1150,13 +1150,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1168,13 +1168,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Extensions
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1187,19 +1187,19 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_cqpyv_8"
+          class="_separator_13qwf_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
         />
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1211,13 +1211,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Copy link
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1230,13 +1230,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1248,13 +1248,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Polls
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1267,13 +1267,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1285,13 +1285,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Export Chat
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1304,13 +1304,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1325,13 +1325,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Settings
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1344,7 +1344,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_cqpyv_8"
+          class="_separator_13qwf_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
@@ -1353,13 +1353,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           class="mx_RoomSummaryCard_bottomOptions"
         >
           <button
-            class="_item_lqfwq_8 _interactive_lqfwq_26"
+            class="_item_bym9p_8 _interactive_bym9p_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_lqfwq_50"
+              class="_icon_bym9p_51"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -1371,13 +1371,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
             >
               Report room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_lqfwq_59"
+              class="_nav-hint_bym9p_60"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -1390,13 +1390,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             </svg>
           </button>
           <button
-            class="mx_RoomSummaryCard_leave _item_lqfwq_8 _interactive_lqfwq_26"
+            class="mx_RoomSummaryCard_leave _item_bym9p_8 _interactive_bym9p_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_lqfwq_50"
+              class="_icon_bym9p_51"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -1411,13 +1411,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
             >
               Leave room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_lqfwq_59"
+              class="_nav-hint_bym9p_60"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -1485,7 +1485,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         class="mx_RoomSummaryCard_container"
       >
         <span
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
@@ -1509,7 +1509,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
         >
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -1527,7 +1527,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             Public room
           </span>
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -1545,7 +1545,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             Not encrypted
           </span>
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
             data-kind="blue"
           >
             <svg
@@ -1617,9 +1617,9 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             style="--mx-box-flex: 1;"
           >
             <a
-              class="_link_1v5rz_8"
+              class="_link_k9ljz_8"
               data-kind="primary"
-              data-size="medium"
+              data-size="md"
               rel="noreferrer noopener"
             >
               <p
@@ -1632,7 +1632,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         </section>
       </header>
       <div
-        class="_separator_cqpyv_8"
+        class="_separator_13qwf_8"
         data-kind="primary"
         data-orientation="horizontal"
         role="separator"
@@ -1643,13 +1643,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
       >
         <button
           aria-checked="false"
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitemcheckbox"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1661,7 +1661,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Favourite
           </span>
@@ -1682,13 +1682,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </div>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1700,13 +1700,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Invite
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1719,19 +1719,19 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_cqpyv_8"
+          class="_separator_13qwf_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
         />
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1749,13 +1749,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             People
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1768,13 +1768,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1789,13 +1789,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Threads
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1808,13 +1808,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1828,13 +1828,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Pinned messages
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1852,13 +1852,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </span>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1870,13 +1870,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Files
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1889,13 +1889,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1907,13 +1907,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Extensions
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1926,19 +1926,19 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_cqpyv_8"
+          class="_separator_13qwf_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
         />
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1950,13 +1950,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Copy link
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1969,13 +1969,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1987,13 +1987,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Polls
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -2006,13 +2006,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -2024,13 +2024,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Export Chat
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -2043,13 +2043,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -2064,13 +2064,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Settings
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -2083,7 +2083,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_cqpyv_8"
+          class="_separator_13qwf_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
@@ -2092,13 +2092,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           class="mx_RoomSummaryCard_bottomOptions"
         >
           <button
-            class="_item_lqfwq_8 _interactive_lqfwq_26"
+            class="_item_bym9p_8 _interactive_bym9p_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_lqfwq_50"
+              class="_icon_bym9p_51"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -2110,13 +2110,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
             >
               Report room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_lqfwq_59"
+              class="_nav-hint_bym9p_60"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -2129,13 +2129,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             </svg>
           </button>
           <button
-            class="mx_RoomSummaryCard_leave _item_lqfwq_8 _interactive_lqfwq_26"
+            class="mx_RoomSummaryCard_leave _item_bym9p_8 _interactive_bym9p_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_lqfwq_50"
+              class="_icon_bym9p_51"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -2150,13 +2150,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
             >
               Leave room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_lqfwq_59"
+              class="_nav-hint_bym9p_60"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
diff --git a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
index 731ae26d44..a36cc0c4c4 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
@@ -61,7 +61,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             <button
               aria-label="Profile picture"
               aria-live="off"
-              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+              class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -99,11 +99,11 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
           <p
             class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 mx_UserInfo_profile_mxid"
           >
-            <div
+            <span
               class="mx_CopyableText"
             >
               customUserIdentifier
-              <div
+              <button
                 aria-label="Copy"
                 class="mx_AccessibleButton mx_CopyableText_copyButton"
                 role="button"
@@ -123,8 +123,8 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
                     d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                   />
                 </svg>
-              </div>
-            </div>
+              </button>
+            </span>
           </p>
         </div>
         <div
@@ -144,13 +144,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -162,13 +162,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Send message
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -181,14 +181,14 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26 _disabled_lqfwq_118"
+          class="_item_bym9p_8 _interactive_bym9p_26 _disabled_bym9p_140"
           data-kind="primary"
           disabled=""
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -200,13 +200,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Jump to read receipt
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -219,13 +219,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -237,13 +237,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Share profile
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -260,13 +260,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="critical"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -278,13 +278,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Ignore
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -363,7 +363,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             <button
               aria-label="Profile picture"
               aria-live="off"
-              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+              class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -401,11 +401,11 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
           <p
             class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 mx_UserInfo_profile_mxid"
           >
-            <div
+            <span
               class="mx_CopyableText"
             >
               customUserIdentifier
-              <div
+              <button
                 aria-label="Copy"
                 class="mx_AccessibleButton mx_CopyableText_copyButton"
                 role="button"
@@ -425,8 +425,8 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
                     d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                   />
                 </svg>
-              </div>
-            </div>
+              </button>
+            </span>
           </p>
         </div>
         <div
@@ -446,13 +446,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -464,13 +464,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Send message
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -483,14 +483,14 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26 _disabled_lqfwq_118"
+          class="_item_bym9p_8 _interactive_bym9p_26 _disabled_bym9p_140"
           data-kind="primary"
           disabled=""
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -502,13 +502,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Jump to read receipt
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -521,13 +521,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
           </svg>
         </button>
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -539,13 +539,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Share profile
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -562,13 +562,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="critical"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -580,13 +580,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Deactivate user
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -603,13 +603,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_lqfwq_8 _interactive_lqfwq_26"
+          class="_item_bym9p_8 _interactive_bym9p_26"
           data-kind="critical"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_lqfwq_50"
+            class="_icon_bym9p_51"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -621,13 +621,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
           >
             Ignore
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_lqfwq_59"
+            class="_nav-hint_bym9p_60"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
diff --git a/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoBasic-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoBasic-test.tsx.snap
index f7fc1dfc99..ae8815ec50 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoBasic-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoBasic-test.tsx.snap
@@ -55,13 +55,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
       </div>
     </div>
     <button
-      class="_item_lqfwq_8 _interactive_lqfwq_26"
+      class="_item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_lqfwq_50"
+        class="_icon_bym9p_51"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -73,13 +73,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         Send message
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -92,13 +92,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
       </svg>
     </button>
     <button
-      class="_item_lqfwq_8 _interactive_lqfwq_26"
+      class="_item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_lqfwq_50"
+        class="_icon_bym9p_51"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -110,13 +110,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         Invite
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -129,14 +129,14 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
       </svg>
     </button>
     <button
-      class="_item_lqfwq_8 _interactive_lqfwq_26 _disabled_lqfwq_118"
+      class="_item_bym9p_8 _interactive_bym9p_26 _disabled_bym9p_140"
       data-kind="primary"
       disabled=""
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_lqfwq_50"
+        class="_icon_bym9p_51"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -148,13 +148,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         Jump to read receipt
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -167,13 +167,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
       </svg>
     </button>
     <button
-      class="_item_lqfwq_8 _interactive_lqfwq_26"
+      class="_item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_lqfwq_50"
+        class="_icon_bym9p_51"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -185,13 +185,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         Share profile
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -204,13 +204,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
       </svg>
     </button>
     <button
-      class="_item_lqfwq_8 _interactive_lqfwq_26"
+      class="_item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_lqfwq_50"
+        class="_icon_bym9p_51"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -222,13 +222,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         Mention
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -245,13 +245,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
     class="mx_UserInfo_container"
   >
     <button
-      class="_item_lqfwq_8 _interactive_lqfwq_26"
+      class="_item_bym9p_8 _interactive_bym9p_26"
       data-kind="critical"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_lqfwq_50"
+        class="_icon_bym9p_51"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -263,13 +263,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         Deactivate user
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -286,13 +286,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
     class="mx_UserInfo_container"
   >
     <button
-      class="_item_lqfwq_8 _interactive_lqfwq_26"
+      class="_item_bym9p_8 _interactive_bym9p_26"
       data-kind="critical"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_lqfwq_50"
+        class="_icon_bym9p_51"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -304,13 +304,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         Ignore
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
diff --git a/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderVerificationView-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderVerificationView-test.tsx.snap
index 5788fe8bae..15f215a83d 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderVerificationView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderVerificationView-test.tsx.snap
@@ -24,7 +24,7 @@ exports[`<UserInfoHeaderVerificationView /> renders verified badge when user is
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <span
-      class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8 mx_UserInfo_verified_badge"
+      class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8 mx_UserInfo_verified_badge"
       data-kind="green"
     >
       <svg
diff --git a/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap
index 7374a49367..348e688b06 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
         <button
           aria-label="Profile picture"
           aria-live="off"
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
           data-color="3"
           data-testid="avatar-img"
           data-type="round"
@@ -48,11 +48,11 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
       <p
         class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 mx_UserInfo_profile_mxid"
       >
-        <div
+        <span
           class="mx_CopyableText"
         >
           customUserIdentifier
-          <div
+          <button
             aria-label="Copy"
             class="mx_AccessibleButton mx_CopyableText_copyButton"
             role="button"
@@ -72,8 +72,8 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
                 d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
               />
             </svg>
-          </div>
-        </div>
+          </button>
+        </span>
       </p>
     </div>
     <div
@@ -81,7 +81,7 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
       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
-        class="_icon_11k6c_18"
+        class="_icon_1855a_18"
         fill="currentColor"
         height="1em"
         style="width: 24px; height: 24px;"
diff --git a/apps/web/test/unit-tests/components/views/room_settings/UrlPreviewSettings-test.tsx b/apps/web/test/unit-tests/components/views/room_settings/UrlPreviewSettings-test.tsx
deleted file mode 100644
index 23e9b12682..0000000000
--- a/apps/web/test/unit-tests/components/views/room_settings/UrlPreviewSettings-test.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
- * Copyright 2024 New Vector Ltd.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
-
-import React from "react";
-import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
-import { render, screen } from "jest-matrix-react";
-import { waitFor } from "@testing-library/dom";
-import { Form } from "@vector-im/compound-web";
-
-import { createTestClient, mkStubRoom, withClientContextRenderOptions } from "../../../../test-utils";
-import { UrlPreviewSettings } from "../../../../../src/components/views/room_settings/UrlPreviewSettings.tsx";
-import SettingsStore from "../../../../../src/settings/SettingsStore.ts";
-import dis from "../../../../../src/dispatcher/dispatcher.ts";
-import { Action } from "../../../../../src/dispatcher/actions.ts";
-
-describe("UrlPreviewSettings", () => {
-    let client: MatrixClient;
-    let room: Room;
-
-    beforeEach(() => {
-        client = createTestClient();
-        room = mkStubRoom("roomId", "room", client);
-    });
-
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-
-    function renderComponent() {
-        return render(
-            <Form.Root>
-                <UrlPreviewSettings room={room} />
-            </Form.Root>,
-            withClientContextRenderOptions(client),
-        );
-    }
-
-    it("should display the correct preview when the setting is in a loading state", () => {
-        jest.spyOn(client, "getCrypto").mockReturnValue(undefined);
-        const { asFragment } = renderComponent();
-        expect(screen.getByText("URL Previews")).toBeInTheDocument();
-
-        expect(asFragment()).toMatchSnapshot();
-    });
-
-    it("should display the correct preview when the room is encrypted and the url preview is enabled", async () => {
-        jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
-        jest.spyOn(SettingsStore, "getValueAt").mockReturnValue(true);
-
-        const { asFragment } = renderComponent();
-        await waitFor(() => {
-            expect(
-                screen.getByText(
-                    "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.",
-                ),
-            ).toBeInTheDocument();
-        });
-        expect(asFragment()).toMatchSnapshot();
-    });
-
-    it("should display the correct preview when the room is unencrypted and the url preview is enabled", async () => {
-        jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(false);
-        jest.spyOn(SettingsStore, "getValueAt").mockReturnValue(true);
-        jest.spyOn(dis, "fire").mockReturnValue(undefined);
-
-        const { asFragment } = renderComponent();
-        await waitFor(() => {
-            expect(screen.getByRole("button", { name: "enabled" })).toBeInTheDocument();
-            expect(
-                screen.getByText("URL previews are enabled by default for participants in this room."),
-            ).toBeInTheDocument();
-        });
-        expect(asFragment()).toMatchSnapshot();
-
-        screen.getByRole("button", { name: "enabled" }).click();
-        expect(dis.fire).toHaveBeenCalledWith(Action.ViewUserSettings);
-    });
-
-    it("should display the correct preview when the room is unencrypted and the url preview is disabled", async () => {
-        jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(false);
-        jest.spyOn(SettingsStore, "getValueAt").mockReturnValue(false);
-
-        const { asFragment } = renderComponent();
-        await waitFor(() => {
-            expect(screen.getByRole("button", { name: "disabled" })).toBeInTheDocument();
-            expect(
-                screen.getByText("URL previews are disabled by default for participants in this room."),
-            ).toBeInTheDocument();
-        });
-        expect(asFragment()).toMatchSnapshot();
-    });
-});
diff --git a/apps/web/test/unit-tests/components/views/room_settings/__snapshots__/UrlPreviewSettings-test.tsx.snap b/apps/web/test/unit-tests/components/views/room_settings/__snapshots__/UrlPreviewSettings-test.tsx.snap
deleted file mode 100644
index 473cf67a1d..0000000000
--- a/apps/web/test/unit-tests/components/views/room_settings/__snapshots__/UrlPreviewSettings-test.tsx.snap
+++ /dev/null
@@ -1,270 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`UrlPreviewSettings should display the correct preview when the room is encrypted and the url preview is enabled 1`] = `
-<DocumentFragment>
-  <form
-    class="_root_19upo_16"
-  >
-    <fieldset
-      class="mx_SettingsFieldset"
-    >
-      <legend
-        class="mx_SettingsFieldset_legend"
-      >
-        URL Previews
-      </legend>
-      <div
-        class="mx_SettingsFieldset_description"
-      >
-        <div
-          class="mx_SettingsSubsection_text"
-        >
-          <p>
-            When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
-          </p>
-          <p>
-            In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.
-          </p>
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFieldset_content"
-      >
-        <div
-          class="_inline-field_19upo_32"
-        >
-          <div
-            class="_inline-field-control_19upo_44"
-          >
-            <div
-              class="_container_udcm8_10"
-            >
-              <input
-                checked=""
-                class="_input_udcm8_24"
-                id="mx_SettingsFlag_vY7Q4uEh9K38"
-                role="switch"
-                type="checkbox"
-              />
-              <div
-                class="_ui_udcm8_34"
-              />
-            </div>
-          </div>
-          <div
-            class="_inline-field-body_19upo_38"
-          >
-            <label
-              class="_label_19upo_59"
-              for="mx_SettingsFlag_vY7Q4uEh9K38"
-            >
-              Enable URL previews for this room (only affects you)
-            </label>
-          </div>
-        </div>
-      </div>
-    </fieldset>
-  </form>
-</DocumentFragment>
-`;
-
-exports[`UrlPreviewSettings should display the correct preview when the room is unencrypted and the url preview is disabled 1`] = `
-<DocumentFragment>
-  <form
-    class="_root_19upo_16"
-  >
-    <fieldset
-      class="mx_SettingsFieldset"
-    >
-      <legend
-        class="mx_SettingsFieldset_legend"
-      >
-        URL Previews
-      </legend>
-      <div
-        class="mx_SettingsFieldset_description"
-      >
-        <div
-          class="mx_SettingsSubsection_text"
-        >
-          <p>
-            When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
-          </p>
-          <p>
-            <span>
-              You have 
-            </span>
-          </p>
-          <div
-            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
-            role="button"
-            tabindex="0"
-          >
-            disabled
-          </div>
-           URL previews by default.
-          <p />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFieldset_content"
-      >
-        <div>
-          URL previews are disabled by default for participants in this room.
-        </div>
-        <div
-          class="_inline-field_19upo_32"
-        >
-          <div
-            class="_inline-field-control_19upo_44"
-          >
-            <div
-              class="_container_udcm8_10"
-            >
-              <input
-                class="_input_udcm8_24"
-                disabled=""
-                id="mx_SettingsFlag_vY7Q4uEh9K38"
-                role="switch"
-                type="checkbox"
-              />
-              <div
-                class="_ui_udcm8_34"
-              />
-            </div>
-          </div>
-          <div
-            class="_inline-field-body_19upo_38"
-          >
-            <label
-              class="_label_19upo_59"
-              for="mx_SettingsFlag_vY7Q4uEh9K38"
-            >
-              Enable inline URL previews by default
-            </label>
-          </div>
-        </div>
-      </div>
-    </fieldset>
-  </form>
-</DocumentFragment>
-`;
-
-exports[`UrlPreviewSettings should display the correct preview when the room is unencrypted and the url preview is enabled 1`] = `
-<DocumentFragment>
-  <form
-    class="_root_19upo_16"
-  >
-    <fieldset
-      class="mx_SettingsFieldset"
-    >
-      <legend
-        class="mx_SettingsFieldset_legend"
-      >
-        URL Previews
-      </legend>
-      <div
-        class="mx_SettingsFieldset_description"
-      >
-        <div
-          class="mx_SettingsSubsection_text"
-        >
-          <p>
-            When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
-          </p>
-          <p>
-            <span>
-              You have 
-            </span>
-          </p>
-          <div
-            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
-            role="button"
-            tabindex="0"
-          >
-            enabled
-          </div>
-           URL previews by default.
-          <p />
-        </div>
-      </div>
-      <div
-        class="mx_SettingsFieldset_content"
-      >
-        <div>
-          URL previews are enabled by default for participants in this room.
-        </div>
-        <div
-          class="_inline-field_19upo_32"
-        >
-          <div
-            class="_inline-field-control_19upo_44"
-          >
-            <div
-              class="_container_udcm8_10"
-            >
-              <input
-                checked=""
-                class="_input_udcm8_24"
-                id="mx_SettingsFlag_vY7Q4uEh9K38"
-                role="switch"
-                type="checkbox"
-              />
-              <div
-                class="_ui_udcm8_34"
-              />
-            </div>
-          </div>
-          <div
-            class="_inline-field-body_19upo_38"
-          >
-            <label
-              class="_label_19upo_59"
-              for="mx_SettingsFlag_vY7Q4uEh9K38"
-            >
-              Enable inline URL previews by default
-            </label>
-          </div>
-        </div>
-      </div>
-    </fieldset>
-  </form>
-</DocumentFragment>
-`;
-
-exports[`UrlPreviewSettings should display the correct preview when the setting is in a loading state 1`] = `
-<DocumentFragment>
-  <form
-    class="_root_19upo_16"
-  >
-    <fieldset
-      class="mx_SettingsFieldset"
-    >
-      <legend
-        class="mx_SettingsFieldset_legend"
-      >
-        URL Previews
-      </legend>
-      <div
-        class="mx_SettingsFieldset_content"
-      >
-        <svg
-          class="_icon_11k6c_18"
-          fill="currentColor"
-          height="1em"
-          style="width: 20px; height: 20px;"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </div>
-    </fieldset>
-  </form>
-</DocumentFragment>
-`;
diff --git a/apps/web/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap b/apps/web/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap
index e3ff02aeaf..577c7983ce 100644
--- a/apps/web/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap
@@ -9,7 +9,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     <button
       aria-label="Open room settings"
       aria-live="off"
-      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+      class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
       data-color="3"
       data-testid="avatar-img"
       data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
index 4930ca17c7..1110a6bd2c 100644
--- a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
@@ -8,7 +8,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
   >
     <div>
       <span
-        class="_avatar_zysgz_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_zysgz_55"
+        class="_avatar_va14e_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_va14e_55"
         data-color="2"
         data-testid="avatar-img"
         data-type="round"
@@ -87,7 +87,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
   >
     <div>
       <span
-        class="_avatar_zysgz_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_zysgz_55"
+        class="_avatar_va14e_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_va14e_55"
         data-color="2"
         data-testid="avatar-img"
         data-type="round"
@@ -189,7 +189,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   aria-label="Open menu"
   aria-labelledby="radix-_r_14_"
   aria-orientation="vertical"
-  class="_menu_1w1u7_8"
+  class="_menu_1kl3y_8"
   data-align="start"
   data-orientation="vertical"
   data-radix-menu-content=""
@@ -202,7 +202,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   tabindex="-1"
 >
   <button
-    class="_item_lqfwq_8 _interactive_lqfwq_26"
+    class="_item_bym9p_8 _interactive_bym9p_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -211,7 +211,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_lqfwq_50"
+      class="_icon_bym9p_51"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -223,13 +223,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
     >
       View in timeline
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_lqfwq_59"
+      class="_nav-hint_bym9p_60"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -242,7 +242,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     </svg>
   </button>
   <button
-    class="_item_lqfwq_8 _interactive_lqfwq_26"
+    class="_item_bym9p_8 _interactive_bym9p_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -251,7 +251,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_lqfwq_50"
+      class="_icon_bym9p_51"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -268,13 +268,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
     >
       Unpin
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_lqfwq_59"
+      class="_nav-hint_bym9p_60"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -287,7 +287,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     </svg>
   </button>
   <button
-    class="_item_lqfwq_8 _interactive_lqfwq_26"
+    class="_item_bym9p_8 _interactive_bym9p_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -296,7 +296,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_lqfwq_50"
+      class="_icon_bym9p_51"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -308,13 +308,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
     >
       Forward
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_lqfwq_59"
+      class="_nav-hint_bym9p_60"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -327,13 +327,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     </svg>
   </button>
   <div
-    class="_separator_cqpyv_8"
+    class="_separator_13qwf_8"
     data-kind="primary"
     data-orientation="horizontal"
     role="separator"
   />
   <button
-    class="_item_lqfwq_8 _interactive_lqfwq_26"
+    class="_item_bym9p_8 _interactive_bym9p_26"
     data-kind="critical"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -342,7 +342,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_lqfwq_50"
+      class="_icon_bym9p_51"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -354,13 +354,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
     >
       Delete
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_lqfwq_59"
+      class="_nav-hint_bym9p_60"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -380,7 +380,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   aria-label="Open menu"
   aria-labelledby="radix-_r_o_"
   aria-orientation="vertical"
-  class="_menu_1w1u7_8"
+  class="_menu_1kl3y_8"
   data-align="start"
   data-orientation="vertical"
   data-radix-menu-content=""
@@ -393,7 +393,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   tabindex="-1"
 >
   <button
-    class="_item_lqfwq_8 _interactive_lqfwq_26"
+    class="_item_bym9p_8 _interactive_bym9p_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -402,7 +402,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   >
     <svg
       aria-hidden="true"
-      class="_icon_lqfwq_50"
+      class="_icon_bym9p_51"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -414,13 +414,13 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
     >
       View in timeline
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_lqfwq_59"
+      class="_nav-hint_bym9p_60"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -433,7 +433,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
     </svg>
   </button>
   <button
-    class="_item_lqfwq_8 _interactive_lqfwq_26"
+    class="_item_bym9p_8 _interactive_bym9p_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -442,7 +442,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   >
     <svg
       aria-hidden="true"
-      class="_icon_lqfwq_50"
+      class="_icon_bym9p_51"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -454,13 +454,13 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
     >
       Forward
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_lqfwq_59"
+      class="_nav-hint_bym9p_60"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
diff --git a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap
index dd09e7bde9..dacf39e080 100644
--- a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap
@@ -59,7 +59,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should fall back to userId if ro
       <span
         aria-hidden="true"
         aria-live="off"
-        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+        class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -99,7 +99,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should render 1`] = `
         aria-hidden="true"
         aria-label="Profile picture"
         aria-live="off"
-        class="_avatar_zysgz_8 mx_BaseAvatar"
+        class="_avatar_va14e_8 mx_BaseAvatar"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -107,7 +107,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should render 1`] = `
       >
         <img
           alt=""
-          class="_image_zysgz_43"
+          class="_image_va14e_43"
           data-type="round"
           height="24px"
           loading="lazy"
diff --git a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
index 1086cabb6c..0a30004ba5 100644
--- a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
@@ -23,7 +23,7 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
   </h3>
   <p>
     <span
-      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+      class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
       data-color="6"
       data-testid="avatar-img"
       data-type="round"
@@ -48,7 +48,7 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
   </h3>
   <p>
     <span
-      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+      class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
       data-color="6"
       data-testid="avatar-img"
       data-type="round"
@@ -73,7 +73,7 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
   </h3>
   <p>
     <span
-      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+      class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -274,7 +274,7 @@ exports[`<RoomPreviewBar /> with an invite with an invited email when client has
   </h3>
   <p>
     <span
-      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+      class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
       data-color="6"
       data-testid="avatar-img"
       data-type="round"
@@ -332,7 +332,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
   </h3>
   <p>
     <span
-      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+      class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
       data-color="6"
       data-testid="avatar-img"
       data-type="round"
@@ -370,7 +370,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
   </h3>
   <p>
     <span
-      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+      class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
       data-color="6"
       data-testid="avatar-img"
       data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
index 3475835ef0..bc712380a3 100644
--- a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`RoomTile when message previews are enabled and there is a message in a
       class="mx_DecoratedRoomAvatar"
     >
       <span
-        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+        class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -112,7 +112,7 @@ exports[`RoomTile when message previews are enabled and there is a message in th
       class="mx_DecoratedRoomAvatar"
     >
       <span
-        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+        class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -218,7 +218,7 @@ exports[`RoomTile when message previews are enabled should render a room without
       class="mx_DecoratedRoomAvatar"
     >
       <span
-        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+        class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -304,7 +304,7 @@ exports[`RoomTile when message previews are not enabled should render the room 1
       class="mx_DecoratedRoomAvatar"
     >
       <span
-        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+        class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap b/apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
index 4c5b4bcda5..9177eaecbc 100644
--- a/apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
@@ -19,7 +19,7 @@ exports[`MemberTileView RoomMemberTileView should display an verified E2EIcon wh
           class="mx_MemberTileView_avatar"
         >
           <span
-            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
             data-color="2"
             data-testid="avatar-img"
             data-type="round"
@@ -95,7 +95,7 @@ exports[`MemberTileView RoomMemberTileView should display an warning E2EIcon whe
           class="mx_MemberTileView_avatar"
         >
           <span
-            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
             data-color="2"
             data-testid="avatar-img"
             data-type="round"
@@ -171,7 +171,7 @@ exports[`MemberTileView RoomMemberTileView should not display an E2EIcon when th
           class="mx_MemberTileView_avatar"
         >
           <span
-            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
             data-color="2"
             data-testid="avatar-img"
             data-type="round"
@@ -230,7 +230,7 @@ exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly
         >
           <span
             aria-hidden="true"
-            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/settings/Notifications-test.tsx b/apps/web/test/unit-tests/components/views/settings/Notifications-test.tsx
index 6e349baef0..864ca485fa 100644
--- a/apps/web/test/unit-tests/components/views/settings/Notifications-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/Notifications-test.tsx
@@ -37,7 +37,6 @@ import {
 import { mocked } from "jest-mock";
 import userEvent from "@testing-library/user-event";
 import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
-import { Form } from "@vector-im/compound-web";
 
 import Notifications from "../../../../../src/components/views/settings/Notifications";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
@@ -249,12 +248,7 @@ const pushRules: IPushRules = {
 const flushPromises = async () => await new Promise((resolve) => window.setTimeout(resolve));
 
 describe("<Notifications />", () => {
-    const getComponent = () =>
-        render(
-            <Form.Root>
-                <Notifications />
-            </Form.Root>,
-        );
+    const getComponent = () => render(<Notifications />);
 
     // get component, wait for async data and force a render
     const getComponentAndWait = async () => {
diff --git a/apps/web/test/unit-tests/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
index b99ebc3efe..5eac88f426 100644
--- a/apps/web/test/unit-tests/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
@@ -149,7 +149,7 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
         >
           <svg
             aria-label="Loading…"
-            class="_icon_11k6c_18"
+            class="_icon_1855a_18"
             data-testid="spinner"
             fill="currentColor"
             height="1em"
diff --git a/apps/web/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
index f8b4ae104b..3df92c7236 100644
--- a/apps/web/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
@@ -86,7 +86,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                   class="mx_EventTile_avatar"
                 >
                   <span
-                    class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+                    class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
                     data-color="2"
                     data-testid="avatar-img"
                     data-type="round"
@@ -180,7 +180,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                   class="mx_EventTile_avatar"
                 >
                   <span
-                    class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+                    class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
                     data-color="2"
                     data-testid="avatar-img"
                     data-type="round"
@@ -277,7 +277,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                   class="mx_EventTile_avatar"
                 >
                   <span
-                    class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+                    class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
                     data-color="2"
                     data-testid="avatar-img"
                     data-type="round"
@@ -354,7 +354,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
       </form>
     </div>
     <div
-      class="_separator_cqpyv_8"
+      class="_separator_13qwf_8"
       data-kind="primary"
       data-orientation="horizontal"
       role="separator"
diff --git a/apps/web/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap
index d971d9001b..357f441198 100644
--- a/apps/web/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap
@@ -42,74 +42,74 @@ exports[`<Notifications /> main notification switches renders only enable notifi
         </span>
       </div>
     </div>
-    <form
-      class="_root_19upo_16"
+  </form>
+  <form
+    class="_root_19upo_16"
+  >
+    <div
+      class="_inline-field_19upo_32"
     >
       <div
-        class="_inline-field_19upo_32"
+        class="_inline-field-control_19upo_44"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_container_udcm8_10"
         >
+          <input
+            checked=""
+            class="_input_udcm8_24"
+            id="mx_SettingsFlag_testid_0"
+            role="switch"
+            type="checkbox"
+          />
           <div
-            class="_container_udcm8_10"
-          >
-            <input
-              checked=""
-              class="_input_udcm8_24"
-              id="mx_SettingsFlag_testid_0"
-              role="switch"
-              type="checkbox"
-            />
-            <div
-              class="_ui_udcm8_34"
-            />
-          </div>
-        </div>
-        <div
-          class="_inline-field-body_19upo_38"
-        >
-          <label
-            class="_label_19upo_59"
-            for="mx_SettingsFlag_testid_0"
-          >
-            Show all activity in the room list (dots or number of unread messages)
-          </label>
+            class="_ui_udcm8_34"
+          />
         </div>
       </div>
       <div
-        class="_inline-field_19upo_32"
+        class="_inline-field-body_19upo_38"
+      >
+        <label
+          class="_label_19upo_59"
+          for="mx_SettingsFlag_testid_0"
+        >
+          Show all activity in the room list (dots or number of unread messages)
+        </label>
+      </div>
+    </div>
+    <div
+      class="_inline-field_19upo_32"
+    >
+      <div
+        class="_inline-field-control_19upo_44"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_container_udcm8_10"
         >
+          <input
+            checked=""
+            class="_input_udcm8_24"
+            id="mx_SettingsFlag_testid_1"
+            role="switch"
+            type="checkbox"
+          />
           <div
-            class="_container_udcm8_10"
-          >
-            <input
-              checked=""
-              class="_input_udcm8_24"
-              id="mx_SettingsFlag_testid_1"
-              role="switch"
-              type="checkbox"
-            />
-            <div
-              class="_ui_udcm8_34"
-            />
-          </div>
-        </div>
-        <div
-          class="_inline-field-body_19upo_38"
-        >
-          <label
-            class="_label_19upo_59"
-            for="mx_SettingsFlag_testid_1"
-          >
-            Only show notifications in the thread activity centre
-          </label>
+            class="_ui_udcm8_34"
+          />
         </div>
       </div>
-    </form>
+      <div
+        class="_inline-field-body_19upo_38"
+      >
+        <label
+          class="_label_19upo_59"
+          for="mx_SettingsFlag_testid_1"
+        >
+          Only show notifications in the thread activity centre
+        </label>
+      </div>
+    </div>
   </form>
 </div>
 `;
diff --git a/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIdServer-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIdServer-test.tsx.snap
index 707171b2c5..a300ebcde9 100644
--- a/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIdServer-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIdServer-test.tsx.snap
@@ -38,7 +38,7 @@ exports[`<SetIdServer /> renders expected fields 1`] = `
             class="_controls_17lij_8"
           >
             <input
-              class="_control_sqdq4_10"
+              class="_control_d83jn_10"
               id="radix-_r_0_"
               name="input"
               placeholder=""
diff --git a/apps/web/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
index 83b97a4eef..ca8a668c6b 100644
--- a/apps/web/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
@@ -212,7 +212,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             >
               <input
                 aria-describedby="radix-_r_2e_"
-                class="_control_sqdq4_10"
+                class="_control_d83jn_10"
                 id="radix-_r_2d_"
                 name="input"
                 title=""
@@ -270,7 +270,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
       </div>
     </div>
     <div
-      class="_separator_cqpyv_8"
+      class="_separator_13qwf_8"
       data-kind="primary"
       data-orientation="horizontal"
       role="separator"
@@ -491,7 +491,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             >
               <input
                 aria-describedby="radix-_r_16_"
-                class="_control_sqdq4_10"
+                class="_control_d83jn_10"
                 id="radix-_r_15_"
                 name="input"
                 title=""
@@ -549,7 +549,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
       </div>
     </div>
     <div
-      class="_separator_cqpyv_8"
+      class="_separator_13qwf_8"
       data-kind="primary"
       data-orientation="horizontal"
       role="separator"
@@ -719,7 +719,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
       </form>
     </div>
     <div
-      class="_separator_cqpyv_8"
+      class="_separator_13qwf_8"
       data-kind="primary"
       data-orientation="horizontal"
       role="separator"
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
index fdd0dbe0b0..fde728da77 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
@@ -57,13 +57,13 @@ HTMLCollection [
             class="mx_DeviceSecurityCard_description"
           >
             Verify your current session for enhanced secure messaging.
-            <div
+            <button
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"
               tabindex="0"
             >
               Learn more
-            </div>
+            </button>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -334,13 +334,13 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
             class="mx_DeviceSecurityCard_description"
           >
             Verify your current session for enhanced secure messaging.
-            <div
+            <button
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"
               tabindex="0"
             >
               Learn more
-            </div>
+            </button>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -521,13 +521,13 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
             class="mx_DeviceSecurityCard_description"
           >
             Verify your current session for enhanced secure messaging.
-            <div
+            <button
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"
               tabindex="0"
             >
               Learn more
-            </div>
+            </button>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap
index 0ae4008ba9..5d42b27b16 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap
@@ -37,13 +37,13 @@ exports[`<DeviceDetailHeading /> displays name edit form on rename button click
           id="device-rename-description-123"
         >
           Please be aware that session names are also visible to people you communicate with.
-          <div
+          <button
             class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
             role="button"
             tabindex="0"
           >
             Learn more
-          </div>
+          </button>
         </span>
       </div>
       <div
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
index cd767a8084..c1ccc701a7 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
@@ -59,13 +59,13 @@ exports[`<DeviceDetails /> renders a verified device 1`] = `
             class="mx_DeviceSecurityCard_description"
           >
             This session is ready for secure messaging.
-            <div
+            <button
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"
               tabindex="0"
             >
               Learn more
-            </div>
+            </button>
           </p>
         </div>
       </div>
@@ -175,13 +175,13 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
             class="mx_DeviceSecurityCard_description"
           >
             Verify or remove this session for best security and reliability.
-            <div
+            <button
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"
               tabindex="0"
             >
               Learn more
-            </div>
+            </button>
           </p>
         </div>
       </div>
@@ -391,13 +391,13 @@ exports[`<DeviceDetails /> renders device without metadata 1`] = `
             class="mx_DeviceSecurityCard_description"
           >
             Verify or remove this session for best security and reliability.
-            <div
+            <button
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"
               tabindex="0"
             >
               Learn more
-            </div>
+            </button>
           </p>
         </div>
       </div>
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceVerificationStatusCard-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceVerificationStatusCard-test.tsx.snap
index 0f7b56b998..953bf16969 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceVerificationStatusCard-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceVerificationStatusCard-test.tsx.snap
@@ -34,13 +34,13 @@ exports[`<DeviceVerificationStatusCard /> renders a verified device 1`] = `
         class="mx_DeviceSecurityCard_description"
       >
         This session is ready for secure messaging.
-        <div
+        <button
           class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
           role="button"
           tabindex="0"
         >
           Learn more
-        </div>
+        </button>
       </p>
     </div>
   </div>
@@ -79,13 +79,13 @@ exports[`<DeviceVerificationStatusCard /> renders an unverifiable device 1`] = `
         class="mx_DeviceSecurityCard_description"
       >
         This session doesn't support encryption and thus can't be verified.
-        <div
+        <button
           class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
           role="button"
           tabindex="0"
         >
           Learn more
-        </div>
+        </button>
       </p>
     </div>
   </div>
@@ -124,13 +124,13 @@ exports[`<DeviceVerificationStatusCard /> renders an unverified device 1`] = `
         class="mx_DeviceSecurityCard_description"
       >
         Verify or remove this session for best security and reliability.
-        <div
+        <button
           class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
           role="button"
           tabindex="0"
         >
           Learn more
-        </div>
+        </button>
       </p>
       <div
         class="mx_DeviceSecurityCard_actions"
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap
index 9f35069ecc..8c93d87fd1 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap
@@ -39,13 +39,13 @@ HTMLCollection [
         >
           <span>
             Consider removing old sessions (90 days or older) you don't use anymore.
-            <div
+            <button
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"
               tabindex="0"
             >
               Learn more
-            </div>
+            </button>
           </span>
         </p>
       </div>
@@ -90,13 +90,13 @@ HTMLCollection [
         >
           <span>
             Verify your sessions for enhanced secure messaging or remove from those you don't recognize or use anymore.
-            <div
+            <button
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"
               tabindex="0"
             >
               Learn more
-            </div>
+            </button>
           </span>
         </p>
       </div>
@@ -143,13 +143,13 @@ HTMLCollection [
         >
           <span>
             For best security, remove any session that you don't recognize or use anymore.
-            <div
+            <button
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"
               tabindex="0"
             >
               Learn more
-            </div>
+            </button>
           </span>
         </p>
       </div>
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
index 0664d5d5b8..f584af643b 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
@@ -875,11 +875,11 @@ exports[`<LoginWithQRFlow /> renders check code confirmation 1`] = `
         2-digit code
       </label>
       <div
-        class="_container_43om7_10 mx_LoginWithQR_checkCode_input mx_no_textinput"
+        class="_container_17qhw_10 mx_LoginWithQR_checkCode_input mx_no_textinput"
       >
         <input
           autocomplete="one-time-code"
-          class="_control_43om7_25"
+          class="_control_17qhw_25"
           id="mx_LoginWithQR_checkCode"
           inputmode="numeric"
           maxlength="2"
@@ -889,11 +889,11 @@ exports[`<LoginWithQRFlow /> renders check code confirmation 1`] = `
         />
         <div
           aria-hidden="true"
-          class="_digit_43om7_49"
+          class="_digit_17qhw_49"
         />
         <div
           aria-hidden="true"
-          class="_digit_43om7_49"
+          class="_digit_17qhw_49"
         />
       </div>
       <div
@@ -972,7 +972,7 @@ exports[`<LoginWithQRFlow /> renders spinner while loading 1`] = `
           >
             <svg
               aria-label="Loading…"
-              class="_icon_11k6c_18"
+              class="_icon_1855a_18"
               data-testid="spinner"
               fill="currentColor"
               height="1em"
@@ -1047,7 +1047,7 @@ exports[`<LoginWithQRFlow /> renders spinner while signing in 1`] = `
           >
             <svg
               aria-label="Loading…"
-              class="_icon_11k6c_18"
+              class="_icon_1855a_18"
               data-testid="spinner"
               fill="currentColor"
               height="1em"
@@ -1134,7 +1134,7 @@ exports[`<LoginWithQRFlow /> renders spinner while verifying 1`] = `
           >
             <svg
               aria-label="Loading…"
-              class="_icon_11k6c_18"
+              class="_icon_1855a_18"
               data-testid="spinner"
               fill="currentColor"
               height="1em"
@@ -1212,7 +1212,7 @@ exports[`<LoginWithQRFlow /> renders spinner whilst QR generating 1`] = `
           >
             <svg
               aria-label="Loading…"
-              class="_icon_11k6c_18"
+              class="_icon_1855a_18"
               data-testid="spinner"
               fill="currentColor"
               height="1em"
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap
index c0a36f643f..92f8280f73 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap
@@ -57,13 +57,13 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
             class="mx_DeviceSecurityCard_description"
           >
             Verify your sessions for enhanced secure messaging or remove from those you don't recognize or use anymore.
-            <div
+            <button
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"
               tabindex="0"
             >
               Learn more
-            </div>
+            </button>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -105,13 +105,13 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
             class="mx_DeviceSecurityCard_description"
           >
             Consider removing old sessions (90 days or older) you don't use anymore.
-            <div
+            <button
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"
               tabindex="0"
             >
               Learn more
-            </div>
+            </button>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -189,13 +189,13 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
             class="mx_DeviceSecurityCard_description"
           >
             Verify your sessions for enhanced secure messaging or remove from those you don't recognize or use anymore.
-            <div
+            <button
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"
               tabindex="0"
             >
               Learn more
-            </div>
+            </button>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -237,13 +237,13 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
             class="mx_DeviceSecurityCard_description"
           >
             Consider removing old sessions (90 days or older) you don't use anymore.
-            <div
+            <button
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"
               tabindex="0"
             >
               Learn more
-            </div>
+            </button>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -321,13 +321,13 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
             class="mx_DeviceSecurityCard_description"
           >
             Verify your sessions for enhanced secure messaging or remove from those you don't recognize or use anymore.
-            <div
+            <button
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"
               tabindex="0"
             >
               Learn more
-            </div>
+            </button>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -369,13 +369,13 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
             class="mx_DeviceSecurityCard_description"
           >
             Consider removing old sessions (90 days or older) you don't use anymore.
-            <div
+            <button
               class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
               role="button"
               tabindex="0"
             >
               Learn more
-            </div>
+            </button>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
diff --git a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
index fb486a0a84..bac0d32537 100644
--- a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
@@ -32,7 +32,7 @@ exports[`<AdvancedPanel /> <EncryptionDetails /> should display a spinner when l
       >
         <svg
           aria-label="Loading…"
-          class="_icon_11k6c_18"
+          class="_icon_1855a_18"
           fill="currentColor"
           height="1em"
           style="width: 20px; height: 20px;"
diff --git a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
index ff1c6eb935..7426115881 100644
--- a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ChangeRecoveryKey /> flow to change the recovery key should display the recovery key 1`] = `
 <DocumentFragment>
   <nav
-    class="_breadcrumb_1xygz_8"
+    class="_breadcrumb_t96w3_8"
   >
     <button
       aria-label="Back"
@@ -31,13 +31,13 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
       </div>
     </button>
     <ol
-      class="_pages_1xygz_17"
+      class="_pages_t96w3_17"
     >
       <li>
         <a
-          class="_link_1v5rz_8"
+          class="_link_k9ljz_8"
           data-kind="primary"
-          data-size="small"
+          data-size="sm"
           rel="noreferrer noopener"
           role="button"
           tabindex="0"
@@ -48,7 +48,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
       <li>
         <span
           aria-current="page"
-          class="_last-page_1xygz_30"
+          class="_last-page_t96w3_30"
         >
           Change recovery key
         </span>
@@ -62,8 +62,9 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_1r8kr_8"
-        data-size="large"
+        class="_big-icon_1ssbv_8"
+        data-kind="primary"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
@@ -165,7 +166,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
 exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user to enter the recovery key 1`] = `
 <DocumentFragment>
   <nav
-    class="_breadcrumb_1xygz_8"
+    class="_breadcrumb_t96w3_8"
   >
     <button
       aria-label="Back"
@@ -193,13 +194,13 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       </div>
     </button>
     <ol
-      class="_pages_1xygz_17"
+      class="_pages_t96w3_17"
     >
       <li>
         <a
-          class="_link_1v5rz_8"
+          class="_link_k9ljz_8"
           data-kind="primary"
-          data-size="small"
+          data-size="sm"
           rel="noreferrer noopener"
           role="button"
           tabindex="0"
@@ -210,7 +211,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       <li>
         <span
           aria-current="page"
-          class="_last-page_1xygz_30"
+          class="_last-page_t96w3_30"
         >
           Get recovery key
         </span>
@@ -224,8 +225,9 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_1r8kr_8"
-        data-size="large"
+        class="_big-icon_1ssbv_8"
+        data-kind="primary"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
@@ -265,7 +267,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
           id="_r_1_"
         >
           <input
-            class="_control_sqdq4_10 _control_1s836_13"
+            class="_control_d83jn_10 _control_1s836_13"
             id="radix-_r_0_"
             name="recoveryKey"
             required=""
@@ -324,7 +326,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
 exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user to enter the recovery key 2`] = `
 <DocumentFragment>
   <nav
-    class="_breadcrumb_1xygz_8"
+    class="_breadcrumb_t96w3_8"
   >
     <button
       aria-label="Back"
@@ -352,13 +354,13 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       </div>
     </button>
     <ol
-      class="_pages_1xygz_17"
+      class="_pages_t96w3_17"
     >
       <li>
         <a
-          class="_link_1v5rz_8"
+          class="_link_k9ljz_8"
           data-kind="primary"
-          data-size="small"
+          data-size="sm"
           rel="noreferrer noopener"
           role="button"
           tabindex="0"
@@ -369,7 +371,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       <li>
         <span
           aria-current="page"
-          class="_last-page_1xygz_30"
+          class="_last-page_t96w3_30"
         >
           Get recovery key
         </span>
@@ -383,8 +385,9 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_1r8kr_8"
-        data-size="large"
+        class="_big-icon_1ssbv_8"
+        data-kind="primary"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
@@ -428,7 +431,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
           <input
             aria-describedby="radix-_r_8_"
             aria-invalid="true"
-            class="_control_sqdq4_10 _control_1s836_13"
+            class="_control_d83jn_10 _control_1s836_13"
             data-invalid="true"
             id="radix-_r_0_"
             name="recoveryKey"
@@ -505,7 +508,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
 exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display information about the recovery key 1`] = `
 <DocumentFragment>
   <nav
-    class="_breadcrumb_1xygz_8"
+    class="_breadcrumb_t96w3_8"
   >
     <button
       aria-label="Back"
@@ -533,13 +536,13 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
       </div>
     </button>
     <ol
-      class="_pages_1xygz_17"
+      class="_pages_t96w3_17"
     >
       <li>
         <a
-          class="_link_1v5rz_8"
+          class="_link_k9ljz_8"
           data-kind="primary"
-          data-size="small"
+          data-size="sm"
           rel="noreferrer noopener"
           role="button"
           tabindex="0"
@@ -550,7 +553,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
       <li>
         <span
           aria-current="page"
-          class="_last-page_1xygz_30"
+          class="_last-page_t96w3_30"
         >
           Get recovery key
         </span>
@@ -564,8 +567,9 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_1r8kr_8"
-        data-size="large"
+        class="_big-icon_1ssbv_8"
+        data-kind="primary"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
@@ -622,7 +626,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
 exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the recovery key 1`] = `
 <DocumentFragment>
   <nav
-    class="_breadcrumb_1xygz_8"
+    class="_breadcrumb_t96w3_8"
   >
     <button
       aria-label="Back"
@@ -650,13 +654,13 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
       </div>
     </button>
     <ol
-      class="_pages_1xygz_17"
+      class="_pages_t96w3_17"
     >
       <li>
         <a
-          class="_link_1v5rz_8"
+          class="_link_k9ljz_8"
           data-kind="primary"
-          data-size="small"
+          data-size="sm"
           rel="noreferrer noopener"
           role="button"
           tabindex="0"
@@ -667,7 +671,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
       <li>
         <span
           aria-current="page"
-          class="_last-page_1xygz_30"
+          class="_last-page_t96w3_30"
         >
           Get recovery key
         </span>
@@ -681,8 +685,9 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_1r8kr_8"
-        data-size="large"
+        class="_big-icon_1ssbv_8"
+        data-kind="primary"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
diff --git a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap
index bd57f430ea..667e57d500 100644
--- a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
 <DocumentFragment>
   <nav
-    class="_breadcrumb_1xygz_8"
+    class="_breadcrumb_t96w3_8"
   >
     <button
       aria-label="Back"
@@ -31,13 +31,13 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
       </div>
     </button>
     <ol
-      class="_pages_1xygz_17"
+      class="_pages_t96w3_17"
     >
       <li>
         <a
-          class="_link_1v5rz_8"
+          class="_link_k9ljz_8"
           data-kind="primary"
-          data-size="small"
+          data-size="sm"
           rel="noreferrer noopener"
           role="button"
           tabindex="0"
@@ -48,7 +48,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
       <li>
         <span
           aria-current="page"
-          class="_last-page_1xygz_30"
+          class="_last-page_t96w3_30"
         >
           Delete key storage
         </span>
@@ -62,8 +62,9 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_1r8kr_8 _destructive_1r8kr_34"
-        data-size="large"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
@@ -89,7 +90,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
     >
       Deleting key storage will remove your cryptographic identity and message keys from the server and turn off the following security features:
       <ul
-        class="_visual-list_1mgc1_8"
+        class="_visual-list_6zpfn_8"
       >
         <li
           class="_visual-list-item_1nc1y_8"
diff --git a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/EncryptionCard-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/EncryptionCard-test.tsx.snap
index 3c72479607..edda72b1cf 100644
--- a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/EncryptionCard-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/EncryptionCard-test.tsx.snap
@@ -9,8 +9,9 @@ exports[`<EncryptionCard /> should render 1`] = `
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_1r8kr_8"
-        data-size="large"
+        class="_big-icon_1ssbv_8"
+        data-kind="primary"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
diff --git a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/RecoveryPanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/RecoveryPanel-test.tsx.snap
index 61201de324..e19cf1b2c3 100644
--- a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/RecoveryPanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/RecoveryPanel-test.tsx.snap
@@ -100,7 +100,7 @@ exports[`<RecoveryPanel /> should be in loading state when checking the recovery
     </div>
     <svg
       aria-label="Loading…"
-      class="_icon_11k6c_18"
+      class="_icon_1855a_18"
       fill="currentColor"
       height="1em"
       style="width: 20px; height: 20px;"
diff --git a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap
index 74bcdfe791..fd93595ebb 100644
--- a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant correctly 1`] = `
 <DocumentFragment>
   <nav
-    class="_breadcrumb_1xygz_8"
+    class="_breadcrumb_t96w3_8"
   >
     <button
       aria-label="Back"
@@ -31,13 +31,13 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
       </div>
     </button>
     <ol
-      class="_pages_1xygz_17"
+      class="_pages_t96w3_17"
     >
       <li>
         <a
-          class="_link_1v5rz_8"
+          class="_link_k9ljz_8"
           data-kind="primary"
-          data-size="small"
+          data-size="sm"
           rel="noreferrer noopener"
           role="button"
           tabindex="0"
@@ -48,7 +48,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
       <li>
         <span
           aria-current="page"
-          class="_last-page_1xygz_30"
+          class="_last-page_t96w3_30"
         >
           Reset encryption
         </span>
@@ -62,8 +62,9 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_1r8kr_8 _destructive_1r8kr_34"
-        data-size="large"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
@@ -88,7 +89,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <ul
-        class="_visual-list_1mgc1_8"
+        class="_visual-list_6zpfn_8"
       >
         <li
           class="_visual-list-item_1nc1y_8"
@@ -186,7 +187,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
 exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correctly 1`] = `
 <DocumentFragment>
   <nav
-    class="_breadcrumb_1xygz_8"
+    class="_breadcrumb_t96w3_8"
   >
     <button
       aria-label="Back"
@@ -214,13 +215,13 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
       </div>
     </button>
     <ol
-      class="_pages_1xygz_17"
+      class="_pages_t96w3_17"
     >
       <li>
         <a
-          class="_link_1v5rz_8"
+          class="_link_k9ljz_8"
           data-kind="primary"
-          data-size="small"
+          data-size="sm"
           rel="noreferrer noopener"
           role="button"
           tabindex="0"
@@ -231,7 +232,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
       <li>
         <span
           aria-current="page"
-          class="_last-page_1xygz_30"
+          class="_last-page_t96w3_30"
         >
           Reset encryption
         </span>
@@ -245,8 +246,9 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_1r8kr_8 _destructive_1r8kr_34"
-        data-size="large"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
@@ -271,7 +273,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <ul
-        class="_visual-list_1mgc1_8"
+        class="_visual-list_6zpfn_8"
       >
         <li
           class="_visual-list-item_1nc1y_8"
@@ -369,7 +371,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
 exports[`<ResetIdentityPanel /> should reset the encryption when the continue button is clicked 1`] = `
 <DocumentFragment>
   <nav
-    class="_breadcrumb_1xygz_8"
+    class="_breadcrumb_t96w3_8"
   >
     <button
       aria-label="Back"
@@ -397,13 +399,13 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       </div>
     </button>
     <ol
-      class="_pages_1xygz_17"
+      class="_pages_t96w3_17"
     >
       <li>
         <a
-          class="_link_1v5rz_8"
+          class="_link_k9ljz_8"
           data-kind="primary"
-          data-size="small"
+          data-size="sm"
           rel="noreferrer noopener"
           role="button"
           tabindex="0"
@@ -414,7 +416,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       <li>
         <span
           aria-current="page"
-          class="_last-page_1xygz_30"
+          class="_last-page_t96w3_30"
         >
           Reset encryption
         </span>
@@ -428,8 +430,9 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_1r8kr_8 _destructive_1r8kr_34"
-        data-size="large"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
@@ -454,7 +457,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <ul
-        class="_visual-list_1mgc1_8"
+        class="_visual-list_6zpfn_8"
       >
         <li
           class="_visual-list-item_1nc1y_8"
@@ -555,7 +558,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
 exports[`<ResetIdentityPanel /> should reset the encryption when the continue button is clicked 2`] = `
 <DocumentFragment>
   <nav
-    class="_breadcrumb_1xygz_8"
+    class="_breadcrumb_t96w3_8"
   >
     <button
       aria-label="Back"
@@ -583,13 +586,13 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       </div>
     </button>
     <ol
-      class="_pages_1xygz_17"
+      class="_pages_t96w3_17"
     >
       <li>
         <a
-          class="_link_1v5rz_8"
+          class="_link_k9ljz_8"
           data-kind="primary"
-          data-size="small"
+          data-size="sm"
           rel="noreferrer noopener"
           role="button"
           tabindex="0"
@@ -600,7 +603,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       <li>
         <span
           aria-current="page"
-          class="_last-page_1xygz_30"
+          class="_last-page_t96w3_30"
         >
           Reset encryption
         </span>
@@ -614,8 +617,9 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_1r8kr_8 _destructive_1r8kr_34"
-        data-size="large"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
@@ -640,7 +644,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <ul
-        class="_visual-list_1mgc1_8"
+        class="_visual-list_6zpfn_8"
       >
         <li
           class="_visual-list-item_1nc1y_8"
@@ -723,7 +727,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
         tabindex="0"
       >
         <svg
-          class="_icon_11k6c_18"
+          class="_icon_1855a_18"
           fill="currentColor"
           height="1em"
           style="width: 20px; height: 20px;"
diff --git a/apps/web/test/unit-tests/components/views/settings/notifications/Notifications2-test.tsx b/apps/web/test/unit-tests/components/views/settings/notifications/Notifications2-test.tsx
index 0f8289a42c..92cc5c70e0 100644
--- a/apps/web/test/unit-tests/components/views/settings/notifications/Notifications2-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/notifications/Notifications2-test.tsx
@@ -18,7 +18,6 @@ import {
     RuleId,
 } from "matrix-js-sdk/src/matrix";
 import React from "react";
-import { Form } from "@vector-im/compound-web";
 
 import NotificationSettings2 from "../../../../../../src/components/views/settings/notifications/NotificationSettings2";
 import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
@@ -94,9 +93,7 @@ describe("<Notifications />", () => {
 
         const screen = render(
             <MatrixClientContext.Provider value={cli}>
-                <Form.Root>
-                    <NotificationSettings2 />
-                </Form.Root>
+                <NotificationSettings2 />
             </MatrixClientContext.Provider>,
         );
         await act(waitForUpdate);
@@ -109,9 +106,7 @@ describe("<Notifications />", () => {
         const user = userEvent.setup();
         const screen = render(
             <MatrixClientContext.Provider value={cli}>
-                <Form.Root>
-                    <NotificationSettings2 />
-                </Form.Root>
+                <NotificationSettings2 />
             </MatrixClientContext.Provider>,
         );
         await act(async () => {
@@ -172,9 +167,7 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const screen = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <Form.Root>
-                        <NotificationSettings2 />
-                    </Form.Root>
+                    <NotificationSettings2 />
                 </MatrixClientContext.Provider>,
             );
             await act(waitForUpdate);
@@ -190,9 +183,7 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const screen = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <Form.Root>
-                        <NotificationSettings2 />
-                    </Form.Root>
+                    <NotificationSettings2 />
                 </MatrixClientContext.Provider>,
             );
             await act(waitForUpdate);
@@ -230,9 +221,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -267,9 +256,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -298,9 +285,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -325,9 +310,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -349,9 +332,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -379,9 +360,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -405,9 +384,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -429,9 +406,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -459,9 +434,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -485,9 +458,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -514,9 +485,7 @@ describe("<Notifications />", () => {
                 const user = userEvent.setup();
                 const screen = render(
                     <MatrixClientContext.Provider value={cli}>
-                        <Form.Root>
-                            <NotificationSettings2 />
-                        </Form.Root>
+                        <NotificationSettings2 />
                     </MatrixClientContext.Provider>,
                 );
                 await act(waitForUpdate);
@@ -535,9 +504,7 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const screen = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <Form.Root>
-                        <NotificationSettings2 />
-                    </Form.Root>
+                    <NotificationSettings2 />
                 </MatrixClientContext.Provider>,
             );
             await act(waitForUpdate);
@@ -648,9 +615,7 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const screen = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <Form.Root>
-                        <NotificationSettings2 />
-                    </Form.Root>
+                    <NotificationSettings2 />
                 </MatrixClientContext.Provider>,
             );
             await act(waitForUpdate);
@@ -709,9 +674,7 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const screen = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <Form.Root>
-                        <NotificationSettings2 />
-                    </Form.Root>
+                    <NotificationSettings2 />
                 </MatrixClientContext.Provider>,
             );
             await act(waitForUpdate);
@@ -731,9 +694,7 @@ describe("<Notifications />", () => {
 
             const { container } = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <Form.Root>
-                        <NotificationSettings2 />
-                    </Form.Root>
+                    <NotificationSettings2 />
                 </MatrixClientContext.Provider>,
             );
             await waitForUpdate();
@@ -760,9 +721,7 @@ describe("<Notifications />", () => {
             const user = userEvent.setup();
             const { container } = render(
                 <MatrixClientContext.Provider value={cli}>
-                    <Form.Root>
-                        <NotificationSettings2 />
-                    </Form.Root>
+                    <NotificationSettings2 />
                 </MatrixClientContext.Provider>,
             );
             await waitForUpdate();
diff --git a/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
index 330af81c63..ff7f965b4a 100644
--- a/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
@@ -2,880 +2,880 @@
 
 exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
 <div>
-  <form
-    class="_root_19upo_16"
+  <div
+    class="mx_NotificationSettings2"
   >
     <div
-      class="mx_NotificationSettings2"
+      class="mx_SettingsSection"
     >
       <div
-        class="mx_SettingsSection"
+        class="mx_SettingsSection_subSections"
       >
-        <div
-          class="mx_SettingsSection_subSections"
+        <form
+          class="_root_19upo_16 mx_SettingsSubsection_content"
         >
           <div
-            class="mx_SettingsSubsection_content mx_NotificationSettings2_flags"
+            class="_inline-field_19upo_32"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field-control_19upo_44"
             >
               <div
-                class="_inline-field-control_19upo_44"
-              >
-                <div
-                  class="_container_udcm8_10"
-                >
-                  <input
-                    checked=""
-                    class="_input_udcm8_24"
-                    disabled=""
-                    id="_r_1f_"
-                    role="switch"
-                    type="checkbox"
-                  />
-                  <div
-                    class="_ui_udcm8_34"
-                  />
-                </div>
-              </div>
-              <div
-                class="_inline-field-body_19upo_38"
-              >
-                <label
-                  class="_label_19upo_59"
-                  for="_r_1f_"
-                >
-                  Enable notifications for this account
-                </label>
-              </div>
-            </div>
-            <div
-              class="_inline-field_19upo_32"
-            >
-              <div
-                class="_inline-field-control_19upo_44"
-              >
-                <div
-                  class="_container_udcm8_10"
-                >
-                  <input
-                    class="_input_udcm8_24"
-                    id="mx_SettingsFlag_vY7Q4uEh9K38"
-                    role="switch"
-                    type="checkbox"
-                  />
-                  <div
-                    class="_ui_udcm8_34"
-                  />
-                </div>
-              </div>
-              <div
-                class="_inline-field-body_19upo_38"
-              >
-                <label
-                  class="_label_19upo_59"
-                  for="mx_SettingsFlag_vY7Q4uEh9K38"
-                >
-                  Enable desktop notifications for this session
-                </label>
-              </div>
-            </div>
-            <div
-              class="_inline-field_19upo_32"
-            >
-              <div
-                class="_inline-field-control_19upo_44"
-              >
-                <div
-                  class="_container_udcm8_10"
-                >
-                  <input
-                    class="_input_udcm8_24"
-                    id="mx_SettingsFlag_QgU2PomxwKpa"
-                    role="switch"
-                    type="checkbox"
-                  />
-                  <div
-                    class="_ui_udcm8_34"
-                  />
-                </div>
-              </div>
-              <div
-                class="_inline-field-body_19upo_38"
-              >
-                <label
-                  class="_label_19upo_59"
-                  for="mx_SettingsFlag_QgU2PomxwKpa"
-                >
-                  Show message preview in desktop notification
-                </label>
-              </div>
-            </div>
-            <div
-              class="_inline-field_19upo_32"
-            >
-              <div
-                class="_inline-field-control_19upo_44"
-              >
-                <div
-                  class="_container_udcm8_10"
-                >
-                  <input
-                    checked=""
-                    class="_input_udcm8_24"
-                    id="mx_SettingsFlag_6hpi3YEetmBG"
-                    role="switch"
-                    type="checkbox"
-                  />
-                  <div
-                    class="_ui_udcm8_34"
-                  />
-                </div>
-              </div>
-              <div
-                class="_inline-field-body_19upo_38"
-              >
-                <label
-                  class="_label_19upo_59"
-                  for="mx_SettingsFlag_6hpi3YEetmBG"
-                >
-                  Enable audible notifications for this session
-                </label>
-              </div>
-            </div>
-          </div>
-          <div
-            class="mx_SettingsSubsection"
-          >
-            <div
-              class="mx_SettingsSubsectionHeading"
-            >
-              <h2
-                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
-              >
-                I want to be notified for (Default Setting)
-              </h2>
-            </div>
-            <div
-              class="mx_SettingsSubsection_description"
-            >
-              <div
-                class="mx_SettingsSubsection_text"
-              >
-                This setting will be applied by default to all your rooms.
-              </div>
-            </div>
-            <div
-              class="mx_SettingsSubsection_content"
-            >
-              <label
-                class="mx_StyledRadioButton mx_StyledRadioButton_disabled mx_StyledRadioButton_checked"
+                class="_container_udcm8_10"
               >
                 <input
                   checked=""
+                  class="_input_udcm8_24"
                   disabled=""
-                  id="defaultNotificationLevel-all_messages"
-                  name="defaultNotificationLevel"
-                  type="radio"
-                  value="all_messages"
+                  id="_r_1f_"
+                  role="switch"
+                  type="checkbox"
                 />
-                <div>
-                  <div />
-                </div>
                 <div
-                  class="mx_StyledRadioButton_content"
-                >
-                  All messages
-                </div>
-                <div
-                  class="mx_StyledRadioButton_spacer"
+                  class="_ui_udcm8_34"
                 />
-              </label>
+              </div>
+            </div>
+            <div
+              class="_inline-field-body_19upo_38"
+            >
               <label
-                class="mx_StyledRadioButton mx_StyledRadioButton_disabled"
+                class="_label_19upo_59"
+                for="_r_1f_"
+              >
+                Enable notifications for this account
+              </label>
+            </div>
+          </div>
+          <div
+            class="_inline-field_19upo_32"
+          >
+            <div
+              class="_inline-field-control_19upo_44"
+            >
+              <div
+                class="_container_udcm8_10"
               >
                 <input
-                  disabled=""
-                  id="defaultNotificationLevel-people_mentions_keywords"
-                  name="defaultNotificationLevel"
-                  type="radio"
-                  value="people_mentions_keywords"
+                  class="_input_udcm8_24"
+                  id="mx_SettingsFlag_vY7Q4uEh9K38"
+                  role="switch"
+                  type="checkbox"
                 />
-                <div>
-                  <div />
-                </div>
                 <div
-                  class="mx_StyledRadioButton_content"
-                >
-                  People, Mentions and Keywords
-                </div>
-                <div
-                  class="mx_StyledRadioButton_spacer"
+                  class="_ui_udcm8_34"
                 />
-              </label>
+              </div>
+            </div>
+            <div
+              class="_inline-field-body_19upo_38"
+            >
               <label
-                class="mx_StyledRadioButton mx_StyledRadioButton_disabled"
+                class="_label_19upo_59"
+                for="mx_SettingsFlag_vY7Q4uEh9K38"
+              >
+                Enable desktop notifications for this session
+              </label>
+            </div>
+          </div>
+          <div
+            class="_inline-field_19upo_32"
+          >
+            <div
+              class="_inline-field-control_19upo_44"
+            >
+              <div
+                class="_container_udcm8_10"
               >
                 <input
-                  disabled=""
-                  id="defaultNotificationLevel-mentions_keywords"
-                  name="defaultNotificationLevel"
-                  type="radio"
-                  value="mentions_keywords"
+                  class="_input_udcm8_24"
+                  id="mx_SettingsFlag_QgU2PomxwKpa"
+                  role="switch"
+                  type="checkbox"
                 />
-                <div>
-                  <div />
-                </div>
                 <div
-                  class="mx_StyledRadioButton_content"
-                >
-                  Mentions and Keywords only
-                </div>
-                <div
-                  class="mx_StyledRadioButton_spacer"
+                  class="_ui_udcm8_34"
                 />
+              </div>
+            </div>
+            <div
+              class="_inline-field-body_19upo_38"
+            >
+              <label
+                class="_label_19upo_59"
+                for="mx_SettingsFlag_QgU2PomxwKpa"
+              >
+                Show message preview in desktop notification
               </label>
             </div>
           </div>
           <div
-            class="mx_SettingsSubsection"
+            class="_inline-field_19upo_32"
           >
             <div
-              class="mx_SettingsSubsectionHeading"
-            >
-              <h2
-                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
-              >
-                Play a sound for
-              </h2>
-            </div>
-            <div
-              class="mx_SettingsSubsection_description"
+              class="_inline-field-control_19upo_44"
             >
               <div
-                class="mx_SettingsSubsection_text"
+                class="_container_udcm8_10"
               >
-                Applied by default to all rooms on all devices.
+                <input
+                  checked=""
+                  class="_input_udcm8_24"
+                  id="mx_SettingsFlag_6hpi3YEetmBG"
+                  role="switch"
+                  type="checkbox"
+                />
+                <div
+                  class="_ui_udcm8_34"
+                />
               </div>
             </div>
             <div
-              class="mx_SettingsSubsection_content"
+              class="_inline-field-body_19upo_38"
             >
-              <div
-                class="mx_LabelledCheckbox"
+              <label
+                class="_label_19upo_59"
+                for="mx_SettingsFlag_6hpi3YEetmBG"
               >
-                <form
-                  class="_root_19upo_16"
-                >
-                  <div
-                    class="_inline-field_19upo_32"
-                  >
-                    <div
-                      class="_inline-field-control_19upo_44"
-                    >
-                      <div
-                        class="_container_153f2_10"
-                      >
-                        <input
-                          checked=""
-                          class="_input_153f2_18"
-                          disabled=""
-                          id="checkbox_4yVCeEefiP"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_4yVCeEefiP"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          People
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                </form>
-              </div>
-              <div
-                class="mx_LabelledCheckbox"
-              >
-                <form
-                  class="_root_19upo_16"
-                >
-                  <div
-                    class="_inline-field_19upo_32"
-                  >
-                    <div
-                      class="_inline-field-control_19upo_44"
-                    >
-                      <div
-                        class="_container_153f2_10"
-                      >
-                        <input
-                          checked=""
-                          class="_input_153f2_18"
-                          disabled=""
-                          id="checkbox_qpMRMwbPDm"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_qpMRMwbPDm"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          Mentions and Keywords
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                </form>
-              </div>
-              <div
-                class="mx_LabelledCheckbox"
-              >
-                <form
-                  class="_root_19upo_16"
-                >
-                  <div
-                    class="_inline-field_19upo_32"
-                  >
-                    <div
-                      class="_inline-field-control_19upo_44"
-                    >
-                      <div
-                        class="_container_153f2_10"
-                      >
-                        <input
-                          checked=""
-                          class="_input_153f2_18"
-                          disabled=""
-                          id="checkbox_fGtmGQvdMW"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_fGtmGQvdMW"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          Audio and Video calls
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                </form>
-              </div>
+                Enable audible notifications for this session
+              </label>
+            </div>
+          </div>
+        </form>
+        <div
+          class="mx_SettingsSubsection"
+        >
+          <div
+            class="mx_SettingsSubsectionHeading"
+          >
+            <h2
+              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+            >
+              I want to be notified for (Default Setting)
+            </h2>
+          </div>
+          <div
+            class="mx_SettingsSubsection_description"
+          >
+            <div
+              class="mx_SettingsSubsection_text"
+            >
+              This setting will be applied by default to all your rooms.
             </div>
           </div>
           <div
-            class="mx_SettingsSubsection"
+            class="mx_SettingsSubsection_content"
+          >
+            <label
+              class="mx_StyledRadioButton mx_StyledRadioButton_disabled mx_StyledRadioButton_checked"
+            >
+              <input
+                checked=""
+                disabled=""
+                id="defaultNotificationLevel-all_messages"
+                name="defaultNotificationLevel"
+                type="radio"
+                value="all_messages"
+              />
+              <div>
+                <div />
+              </div>
+              <div
+                class="mx_StyledRadioButton_content"
+              >
+                All messages
+              </div>
+              <div
+                class="mx_StyledRadioButton_spacer"
+              />
+            </label>
+            <label
+              class="mx_StyledRadioButton mx_StyledRadioButton_disabled"
+            >
+              <input
+                disabled=""
+                id="defaultNotificationLevel-people_mentions_keywords"
+                name="defaultNotificationLevel"
+                type="radio"
+                value="people_mentions_keywords"
+              />
+              <div>
+                <div />
+              </div>
+              <div
+                class="mx_StyledRadioButton_content"
+              >
+                People, Mentions and Keywords
+              </div>
+              <div
+                class="mx_StyledRadioButton_spacer"
+              />
+            </label>
+            <label
+              class="mx_StyledRadioButton mx_StyledRadioButton_disabled"
+            >
+              <input
+                disabled=""
+                id="defaultNotificationLevel-mentions_keywords"
+                name="defaultNotificationLevel"
+                type="radio"
+                value="mentions_keywords"
+              />
+              <div>
+                <div />
+              </div>
+              <div
+                class="mx_StyledRadioButton_content"
+              >
+                Mentions and Keywords only
+              </div>
+              <div
+                class="mx_StyledRadioButton_spacer"
+              />
+            </label>
+          </div>
+        </div>
+        <div
+          class="mx_SettingsSubsection"
+        >
+          <div
+            class="mx_SettingsSubsectionHeading"
+          >
+            <h2
+              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+            >
+              Play a sound for
+            </h2>
+          </div>
+          <div
+            class="mx_SettingsSubsection_description"
           >
             <div
-              class="mx_SettingsSubsectionHeading"
+              class="mx_SettingsSubsection_text"
             >
-              <h2
-                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
-              >
-                Other things we think you might be interested in:
-              </h2>
-            </div>
-            <div
-              class="mx_SettingsSubsection_content"
-            >
-              <div
-                class="mx_LabelledCheckbox"
-              >
-                <form
-                  class="_root_19upo_16"
-                >
-                  <div
-                    class="_inline-field_19upo_32"
-                  >
-                    <div
-                      class="_inline-field-control_19upo_44"
-                    >
-                      <div
-                        class="_container_153f2_10"
-                      >
-                        <input
-                          checked=""
-                          class="_input_153f2_18"
-                          disabled=""
-                          id="checkbox_e954DVIAu5"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_e954DVIAu5"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          Invited to a room
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                </form>
-              </div>
-              <div
-                class="mx_LabelledCheckbox"
-              >
-                <form
-                  class="_root_19upo_16"
-                >
-                  <div
-                    class="_inline-field_19upo_32"
-                  >
-                    <div
-                      class="_inline-field-control_19upo_44"
-                    >
-                      <div
-                        class="_container_153f2_10"
-                      >
-                        <input
-                          class="_input_153f2_18"
-                          disabled=""
-                          id="checkbox_CsiHRD7nyr"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_CsiHRD7nyr"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          New room activity, upgrades and status messages occur
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                </form>
-              </div>
-              <div
-                class="mx_LabelledCheckbox"
-              >
-                <form
-                  class="_root_19upo_16"
-                >
-                  <div
-                    class="_inline-field_19upo_32"
-                  >
-                    <div
-                      class="_inline-field-control_19upo_44"
-                    >
-                      <div
-                        class="_container_153f2_10"
-                      >
-                        <input
-                          checked=""
-                          class="_input_153f2_18"
-                          disabled=""
-                          id="checkbox_A2ohjWVJIP"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_A2ohjWVJIP"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          Messages sent by bots
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                </form>
-              </div>
+              Applied by default to all rooms on all devices.
             </div>
           </div>
           <div
-            class="mx_SettingsSubsection"
+            class="mx_SettingsSubsection_content"
           >
             <div
-              class="mx_SettingsSubsectionHeading"
+              class="mx_LabelledCheckbox"
             >
-              <h2
-                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+              <form
+                class="_root_19upo_16"
               >
-                Mentions and Keywords
-              </h2>
-            </div>
-            <div
-              class="mx_SettingsSubsection_description"
-            >
-              <div
-                class="mx_SettingsSubsection_text"
-              >
-                <span>
-                  Show a badge 
-                  <div
-                    class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char cpd-theme-light"
-                  >
-                    <span
-                      class="mx_NotificationBadge_count"
-                    >
-                      1
-                    </span>
-                  </div>
-                   when keywords are used in a room.
-                </span>
-              </div>
-            </div>
-            <div
-              class="mx_SettingsSubsection_content"
-            >
-              <div
-                class="mx_LabelledCheckbox"
-              >
-                <form
-                  class="_root_19upo_16"
+                <div
+                  class="_inline-field_19upo_32"
                 >
                   <div
-                    class="_inline-field_19upo_32"
+                    class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_inline-field-control_19upo_44"
+                      class="_container_153f2_10"
                     >
+                      <input
+                        checked=""
+                        class="_input_153f2_18"
+                        disabled=""
+                        id="checkbox_4yVCeEefiP"
+                        type="checkbox"
+                      />
                       <div
-                        class="_container_153f2_10"
+                        class="_ui_153f2_19"
                       >
-                        <input
-                          checked=""
-                          class="_input_153f2_18"
-                          disabled=""
-                          id="checkbox_auy1OmnTid"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
                       </div>
                     </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_auy1OmnTid"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          Notify when someone mentions using @room
-                        </span>
-                      </label>
-                    </div>
                   </div>
-                </form>
-              </div>
-              <div
-                class="mx_LabelledCheckbox"
-                id="mx_NotificationSettings2_MentionCheckbox"
-              >
-                <form
-                  class="_root_19upo_16"
-                >
                   <div
-                    class="_inline-field_19upo_32"
+                    class="_inline-field-body_19upo_38"
                   >
-                    <div
-                      class="_inline-field-control_19upo_44"
-                    >
-                      <div
-                        class="_container_153f2_10"
-                      >
-                        <input
-                          checked=""
-                          class="_input_153f2_18"
-                          disabled=""
-                          id="checkbox_X4ePDS0OpW"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_X4ePDS0OpW"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          Notify when someone mentions using @displayname or @userId:matrix.org
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                </form>
-              </div>
-              <div
-                class="mx_LabelledCheckbox"
-              >
-                <form
-                  class="_root_19upo_16"
-                >
-                  <div
-                    class="_inline-field_19upo_32"
-                  >
-                    <div
-                      class="_inline-field-control_19upo_44"
-                    >
-                      <div
-                        class="_container_153f2_10"
-                      >
-                        <input
-                          aria-describedby="_r_2g_"
-                          checked=""
-                          class="_input_153f2_18"
-                          disabled=""
-                          id="checkbox_wAHG75JNTN"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_wAHG75JNTN"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          Notify when someone uses a keyword
-                        </span>
-                      </label>
-                      <span
-                        class="_message_19upo_85 _help-message_19upo_91"
-                        id="_r_2g_"
-                      >
-                        Enter keywords here, or use for spelling variations or nicknames
-                      </span>
-                    </div>
-                  </div>
-                </form>
-              </div>
-              <div
-                class="mx_TagComposer mx_TagComposer_disabled"
-              >
-                <form
-                  class="mx_TagComposer_input"
-                >
-                  <div
-                    class="mx_Field mx_Field_input"
-                  >
-                    <input
-                      autocomplete="off"
-                      disabled=""
-                      id="mx_NotificationSettings2_Keywords_field"
-                      label="Keyword"
-                      placeholder="New keyword"
-                      type="text"
-                      value=""
-                    />
                     <label
-                      for="mx_NotificationSettings2_Keywords_field"
+                      class="_label_19upo_59"
+                      for="checkbox_4yVCeEefiP"
                     >
-                      Keyword
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        People
+                      </span>
                     </label>
                   </div>
-                  <div
-                    aria-disabled="true"
-                    class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
-                    disabled=""
-                    role="button"
-                    tabindex="0"
-                  >
-                    Add
-                  </div>
-                </form>
+                </div>
+              </form>
+            </div>
+            <div
+              class="mx_LabelledCheckbox"
+            >
+              <form
+                class="_root_19upo_16"
+              >
                 <div
-                  class="mx_TagComposer_tags"
-                  role="list"
-                />
-              </div>
+                  class="_inline-field_19upo_32"
+                >
+                  <div
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_153f2_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_153f2_18"
+                        disabled=""
+                        id="checkbox_qpMRMwbPDm"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_153f2_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_qpMRMwbPDm"
+                    >
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        Mentions and Keywords
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="mx_LabelledCheckbox"
+            >
+              <form
+                class="_root_19upo_16"
+              >
+                <div
+                  class="_inline-field_19upo_32"
+                >
+                  <div
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_153f2_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_153f2_18"
+                        disabled=""
+                        id="checkbox_fGtmGQvdMW"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_153f2_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_fGtmGQvdMW"
+                    >
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        Audio and Video calls
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+        <div
+          class="mx_SettingsSubsection"
+        >
+          <div
+            class="mx_SettingsSubsectionHeading"
+          >
+            <h2
+              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+            >
+              Other things we think you might be interested in:
+            </h2>
+          </div>
+          <div
+            class="mx_SettingsSubsection_content"
+          >
+            <div
+              class="mx_LabelledCheckbox"
+            >
+              <form
+                class="_root_19upo_16"
+              >
+                <div
+                  class="_inline-field_19upo_32"
+                >
+                  <div
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_153f2_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_153f2_18"
+                        disabled=""
+                        id="checkbox_e954DVIAu5"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_153f2_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_e954DVIAu5"
+                    >
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        Invited to a room
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="mx_LabelledCheckbox"
+            >
+              <form
+                class="_root_19upo_16"
+              >
+                <div
+                  class="_inline-field_19upo_32"
+                >
+                  <div
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_153f2_10"
+                    >
+                      <input
+                        class="_input_153f2_18"
+                        disabled=""
+                        id="checkbox_CsiHRD7nyr"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_153f2_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_CsiHRD7nyr"
+                    >
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        New room activity, upgrades and status messages occur
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="mx_LabelledCheckbox"
+            >
+              <form
+                class="_root_19upo_16"
+              >
+                <div
+                  class="_inline-field_19upo_32"
+                >
+                  <div
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_153f2_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_153f2_18"
+                        disabled=""
+                        id="checkbox_A2ohjWVJIP"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_153f2_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_A2ohjWVJIP"
+                    >
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        Messages sent by bots
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+        <div
+          class="mx_SettingsSubsection"
+        >
+          <div
+            class="mx_SettingsSubsectionHeading"
+          >
+            <h2
+              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+            >
+              Mentions and Keywords
+            </h2>
+          </div>
+          <div
+            class="mx_SettingsSubsection_description"
+          >
+            <div
+              class="mx_SettingsSubsection_text"
+            >
+              <span>
+                Show a badge 
+                <div
+                  class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char cpd-theme-light"
+                >
+                  <span
+                    class="mx_NotificationBadge_count"
+                  >
+                    1
+                  </span>
+                </div>
+                 when keywords are used in a room.
+              </span>
+            </div>
+          </div>
+          <div
+            class="mx_SettingsSubsection_content"
+          >
+            <div
+              class="mx_LabelledCheckbox"
+            >
+              <form
+                class="_root_19upo_16"
+              >
+                <div
+                  class="_inline-field_19upo_32"
+                >
+                  <div
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_153f2_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_153f2_18"
+                        disabled=""
+                        id="checkbox_auy1OmnTid"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_153f2_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_auy1OmnTid"
+                    >
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        Notify when someone mentions using @room
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="mx_LabelledCheckbox"
+              id="mx_NotificationSettings2_MentionCheckbox"
+            >
+              <form
+                class="_root_19upo_16"
+              >
+                <div
+                  class="_inline-field_19upo_32"
+                >
+                  <div
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_153f2_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_153f2_18"
+                        disabled=""
+                        id="checkbox_X4ePDS0OpW"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_153f2_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_X4ePDS0OpW"
+                    >
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        Notify when someone mentions using @displayname or @userId:matrix.org
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="mx_LabelledCheckbox"
+            >
+              <form
+                class="_root_19upo_16"
+              >
+                <div
+                  class="_inline-field_19upo_32"
+                >
+                  <div
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_153f2_10"
+                    >
+                      <input
+                        aria-describedby="_r_2g_"
+                        checked=""
+                        class="_input_153f2_18"
+                        disabled=""
+                        id="checkbox_wAHG75JNTN"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_153f2_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_wAHG75JNTN"
+                    >
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        Notify when someone uses a keyword
+                      </span>
+                    </label>
+                    <span
+                      class="_message_19upo_85 _help-message_19upo_91"
+                      id="_r_2g_"
+                    >
+                      Enter keywords here, or use for spelling variations or nicknames
+                    </span>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="mx_TagComposer mx_TagComposer_disabled"
+            >
+              <form
+                class="mx_TagComposer_input"
+              >
+                <div
+                  class="mx_Field mx_Field_input"
+                >
+                  <input
+                    autocomplete="off"
+                    disabled=""
+                    id="mx_NotificationSettings2_Keywords_field"
+                    label="Keyword"
+                    placeholder="New keyword"
+                    type="text"
+                    value=""
+                  />
+                  <label
+                    for="mx_NotificationSettings2_Keywords_field"
+                  >
+                    Keyword
+                  </label>
+                </div>
+                <div
+                  aria-disabled="true"
+                  class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
+                  disabled=""
+                  role="button"
+                  tabindex="0"
+                >
+                  Add
+                </div>
+              </form>
+              <div
+                class="mx_TagComposer_tags"
+                role="list"
+              />
+            </div>
+            <form
+              class="_root_19upo_16"
+            >
               <div
                 class="_inline-field_19upo_32"
               >
@@ -940,1168 +940,1168 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                   </label>
                 </div>
               </div>
-            </div>
+            </form>
+          </div>
+        </div>
+        <div
+          class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
+        >
+          <div
+            class="mx_SettingsSubsectionHeading"
+          >
+            <h2
+              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+            >
+              Email summary
+            </h2>
           </div>
           <div
-            class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
+            class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
           >
             <div
-              class="mx_SettingsSubsectionHeading"
+              class="mx_SettingsSubsection_text"
             >
-              <h2
-                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
-              >
-                Email summary
-              </h2>
+              Receive an email summary of missed notifications
             </div>
             <div
-              class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
+              class="mx_SettingsSubsection_description mx_NotificationPusherSettings_detail"
             >
               <div
                 class="mx_SettingsSubsection_text"
               >
-                Receive an email summary of missed notifications
+                <span>
+                  Select which emails you want to send summaries to. Manage your emails in 
+                  <div
+                    class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+                    role="button"
+                    tabindex="0"
+                  >
+                    General
+                  </div>
+                  .
+                </span>
               </div>
-              <div
-                class="mx_SettingsSubsection_description mx_NotificationPusherSettings_detail"
-              >
-                <div
-                  class="mx_SettingsSubsection_text"
-                >
-                  <span>
-                    Select which emails you want to send summaries to. Manage your emails in 
-                    <div
-                      class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
-                      role="button"
-                      tabindex="0"
-                    >
-                      General
-                    </div>
-                    .
-                  </span>
-                </div>
-              </div>
-              <div
-                class="mx_SettingsIndent"
-              />
             </div>
             <div
-              class="_separator_cqpyv_8"
-              data-kind="primary"
-              data-orientation="horizontal"
-              role="separator"
+              class="mx_SettingsIndent"
             />
           </div>
           <div
-            class="mx_SettingsSubsection"
+            class="_separator_13qwf_8"
+            data-kind="primary"
+            data-orientation="horizontal"
+            role="separator"
+          />
+        </div>
+        <div
+          class="mx_SettingsSubsection"
+        >
+          <div
+            class="mx_SettingsSubsectionHeading"
+          >
+            <h2
+              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+            >
+              Quick Actions
+            </h2>
+          </div>
+          <div
+            class="mx_SettingsSubsection_content"
           >
             <div
-              class="mx_SettingsSubsectionHeading"
+              aria-disabled="true"
+              class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline mx_AccessibleButton_disabled"
+              disabled=""
+              role="button"
+              tabindex="0"
             >
-              <h2
-                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
-              >
-                Quick Actions
-              </h2>
-            </div>
-            <div
-              class="mx_SettingsSubsection_content"
-            >
-              <div
-                aria-disabled="true"
-                class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline mx_AccessibleButton_disabled"
-                disabled=""
-                role="button"
-                tabindex="0"
-              >
-                Reset to default settings
-              </div>
+              Reset to default settings
             </div>
           </div>
         </div>
       </div>
     </div>
-  </form>
+  </div>
 </div>
 `;
 
 exports[`<Notifications /> matches the snapshot 1`] = `
 <div>
-  <form
-    class="_root_19upo_16"
+  <div
+    class="mx_NotificationSettings2"
   >
     <div
-      class="mx_NotificationSettings2"
+      class="mx_SettingsSection"
     >
       <div
-        class="mx_SettingsSection"
+        class="mx_SettingsSection_subSections"
       >
-        <div
-          class="mx_SettingsSection_subSections"
+        <form
+          class="_root_19upo_16 mx_SettingsSubsection_content"
         >
           <div
-            class="mx_SettingsSubsection_content mx_NotificationSettings2_flags"
+            class="_inline-field_19upo_32"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field-control_19upo_44"
             >
               <div
-                class="_inline-field-control_19upo_44"
-              >
-                <div
-                  class="_container_udcm8_10"
-                >
-                  <input
-                    checked=""
-                    class="_input_udcm8_24"
-                    id="_r_0_"
-                    role="switch"
-                    type="checkbox"
-                  />
-                  <div
-                    class="_ui_udcm8_34"
-                  />
-                </div>
-              </div>
-              <div
-                class="_inline-field-body_19upo_38"
-              >
-                <label
-                  class="_label_19upo_59"
-                  for="_r_0_"
-                >
-                  Enable notifications for this account
-                </label>
-              </div>
-            </div>
-            <div
-              class="_inline-field_19upo_32"
-            >
-              <div
-                class="_inline-field-control_19upo_44"
-              >
-                <div
-                  class="_container_udcm8_10"
-                >
-                  <input
-                    class="_input_udcm8_24"
-                    id="mx_SettingsFlag_vY7Q4uEh9K38"
-                    role="switch"
-                    type="checkbox"
-                  />
-                  <div
-                    class="_ui_udcm8_34"
-                  />
-                </div>
-              </div>
-              <div
-                class="_inline-field-body_19upo_38"
-              >
-                <label
-                  class="_label_19upo_59"
-                  for="mx_SettingsFlag_vY7Q4uEh9K38"
-                >
-                  Enable desktop notifications for this session
-                </label>
-              </div>
-            </div>
-            <div
-              class="_inline-field_19upo_32"
-            >
-              <div
-                class="_inline-field-control_19upo_44"
-              >
-                <div
-                  class="_container_udcm8_10"
-                >
-                  <input
-                    class="_input_udcm8_24"
-                    id="mx_SettingsFlag_QgU2PomxwKpa"
-                    role="switch"
-                    type="checkbox"
-                  />
-                  <div
-                    class="_ui_udcm8_34"
-                  />
-                </div>
-              </div>
-              <div
-                class="_inline-field-body_19upo_38"
-              >
-                <label
-                  class="_label_19upo_59"
-                  for="mx_SettingsFlag_QgU2PomxwKpa"
-                >
-                  Show message preview in desktop notification
-                </label>
-              </div>
-            </div>
-            <div
-              class="_inline-field_19upo_32"
-            >
-              <div
-                class="_inline-field-control_19upo_44"
-              >
-                <div
-                  class="_container_udcm8_10"
-                >
-                  <input
-                    checked=""
-                    class="_input_udcm8_24"
-                    id="mx_SettingsFlag_6hpi3YEetmBG"
-                    role="switch"
-                    type="checkbox"
-                  />
-                  <div
-                    class="_ui_udcm8_34"
-                  />
-                </div>
-              </div>
-              <div
-                class="_inline-field-body_19upo_38"
-              >
-                <label
-                  class="_label_19upo_59"
-                  for="mx_SettingsFlag_6hpi3YEetmBG"
-                >
-                  Enable audible notifications for this session
-                </label>
-              </div>
-            </div>
-          </div>
-          <div
-            class="mx_SettingsSubsection"
-          >
-            <div
-              class="mx_SettingsSubsectionHeading"
-            >
-              <h2
-                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
-              >
-                I want to be notified for (Default Setting)
-              </h2>
-            </div>
-            <div
-              class="mx_SettingsSubsection_description"
-            >
-              <div
-                class="mx_SettingsSubsection_text"
-              >
-                This setting will be applied by default to all your rooms.
-              </div>
-            </div>
-            <div
-              class="mx_SettingsSubsection_content"
-            >
-              <label
-                class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                class="_container_udcm8_10"
               >
                 <input
                   checked=""
-                  id="defaultNotificationLevel-all_messages"
-                  name="defaultNotificationLevel"
-                  type="radio"
-                  value="all_messages"
+                  class="_input_udcm8_24"
+                  id="_r_0_"
+                  role="switch"
+                  type="checkbox"
                 />
-                <div>
-                  <div />
-                </div>
                 <div
-                  class="mx_StyledRadioButton_content"
-                >
-                  All messages
-                </div>
-                <div
-                  class="mx_StyledRadioButton_spacer"
+                  class="_ui_udcm8_34"
                 />
-              </label>
+              </div>
+            </div>
+            <div
+              class="_inline-field-body_19upo_38"
+            >
               <label
-                class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
+                class="_label_19upo_59"
+                for="_r_0_"
+              >
+                Enable notifications for this account
+              </label>
+            </div>
+          </div>
+          <div
+            class="_inline-field_19upo_32"
+          >
+            <div
+              class="_inline-field-control_19upo_44"
+            >
+              <div
+                class="_container_udcm8_10"
               >
                 <input
-                  id="defaultNotificationLevel-people_mentions_keywords"
-                  name="defaultNotificationLevel"
-                  type="radio"
-                  value="people_mentions_keywords"
+                  class="_input_udcm8_24"
+                  id="mx_SettingsFlag_vY7Q4uEh9K38"
+                  role="switch"
+                  type="checkbox"
                 />
-                <div>
-                  <div />
-                </div>
                 <div
-                  class="mx_StyledRadioButton_content"
-                >
-                  People, Mentions and Keywords
-                </div>
-                <div
-                  class="mx_StyledRadioButton_spacer"
+                  class="_ui_udcm8_34"
                 />
-              </label>
+              </div>
+            </div>
+            <div
+              class="_inline-field-body_19upo_38"
+            >
               <label
-                class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                class="_label_19upo_59"
+                for="mx_SettingsFlag_vY7Q4uEh9K38"
+              >
+                Enable desktop notifications for this session
+              </label>
+            </div>
+          </div>
+          <div
+            class="_inline-field_19upo_32"
+          >
+            <div
+              class="_inline-field-control_19upo_44"
+            >
+              <div
+                class="_container_udcm8_10"
               >
                 <input
-                  id="defaultNotificationLevel-mentions_keywords"
-                  name="defaultNotificationLevel"
-                  type="radio"
-                  value="mentions_keywords"
+                  class="_input_udcm8_24"
+                  id="mx_SettingsFlag_QgU2PomxwKpa"
+                  role="switch"
+                  type="checkbox"
                 />
-                <div>
-                  <div />
-                </div>
                 <div
-                  class="mx_StyledRadioButton_content"
-                >
-                  Mentions and Keywords only
-                </div>
-                <div
-                  class="mx_StyledRadioButton_spacer"
+                  class="_ui_udcm8_34"
                 />
+              </div>
+            </div>
+            <div
+              class="_inline-field-body_19upo_38"
+            >
+              <label
+                class="_label_19upo_59"
+                for="mx_SettingsFlag_QgU2PomxwKpa"
+              >
+                Show message preview in desktop notification
               </label>
             </div>
           </div>
           <div
-            class="mx_SettingsSubsection"
+            class="_inline-field_19upo_32"
           >
             <div
-              class="mx_SettingsSubsectionHeading"
-            >
-              <h2
-                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
-              >
-                Play a sound for
-              </h2>
-            </div>
-            <div
-              class="mx_SettingsSubsection_description"
+              class="_inline-field-control_19upo_44"
             >
               <div
-                class="mx_SettingsSubsection_text"
+                class="_container_udcm8_10"
               >
-                Applied by default to all rooms on all devices.
+                <input
+                  checked=""
+                  class="_input_udcm8_24"
+                  id="mx_SettingsFlag_6hpi3YEetmBG"
+                  role="switch"
+                  type="checkbox"
+                />
+                <div
+                  class="_ui_udcm8_34"
+                />
               </div>
             </div>
             <div
-              class="mx_SettingsSubsection_content"
+              class="_inline-field-body_19upo_38"
             >
-              <div
-                class="mx_LabelledCheckbox"
+              <label
+                class="_label_19upo_59"
+                for="mx_SettingsFlag_6hpi3YEetmBG"
               >
-                <form
-                  class="_root_19upo_16"
-                >
-                  <div
-                    class="_inline-field_19upo_32"
-                  >
-                    <div
-                      class="_inline-field-control_19upo_44"
-                    >
-                      <div
-                        class="_container_153f2_10"
-                      >
-                        <input
-                          checked=""
-                          class="_input_153f2_18"
-                          id="checkbox_OEPN1su1JY"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_OEPN1su1JY"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          People
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                </form>
-              </div>
-              <div
-                class="mx_LabelledCheckbox"
-              >
-                <form
-                  class="_root_19upo_16"
-                >
-                  <div
-                    class="_inline-field_19upo_32"
-                  >
-                    <div
-                      class="_inline-field-control_19upo_44"
-                    >
-                      <div
-                        class="_container_153f2_10"
-                      >
-                        <input
-                          checked=""
-                          class="_input_153f2_18"
-                          id="checkbox_VtOyR5kbu3"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_VtOyR5kbu3"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          Mentions and Keywords
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                </form>
-              </div>
-              <div
-                class="mx_LabelledCheckbox"
-              >
-                <form
-                  class="_root_19upo_16"
-                >
-                  <div
-                    class="_inline-field_19upo_32"
-                  >
-                    <div
-                      class="_inline-field-control_19upo_44"
-                    >
-                      <div
-                        class="_container_153f2_10"
-                      >
-                        <input
-                          checked=""
-                          class="_input_153f2_18"
-                          id="checkbox_pEwuLn9Enn"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_pEwuLn9Enn"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          Audio and Video calls
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                </form>
-              </div>
+                Enable audible notifications for this session
+              </label>
+            </div>
+          </div>
+        </form>
+        <div
+          class="mx_SettingsSubsection"
+        >
+          <div
+            class="mx_SettingsSubsectionHeading"
+          >
+            <h2
+              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+            >
+              I want to be notified for (Default Setting)
+            </h2>
+          </div>
+          <div
+            class="mx_SettingsSubsection_description"
+          >
+            <div
+              class="mx_SettingsSubsection_text"
+            >
+              This setting will be applied by default to all your rooms.
             </div>
           </div>
           <div
-            class="mx_SettingsSubsection"
+            class="mx_SettingsSubsection_content"
+          >
+            <label
+              class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+            >
+              <input
+                checked=""
+                id="defaultNotificationLevel-all_messages"
+                name="defaultNotificationLevel"
+                type="radio"
+                value="all_messages"
+              />
+              <div>
+                <div />
+              </div>
+              <div
+                class="mx_StyledRadioButton_content"
+              >
+                All messages
+              </div>
+              <div
+                class="mx_StyledRadioButton_spacer"
+              />
+            </label>
+            <label
+              class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
+            >
+              <input
+                id="defaultNotificationLevel-people_mentions_keywords"
+                name="defaultNotificationLevel"
+                type="radio"
+                value="people_mentions_keywords"
+              />
+              <div>
+                <div />
+              </div>
+              <div
+                class="mx_StyledRadioButton_content"
+              >
+                People, Mentions and Keywords
+              </div>
+              <div
+                class="mx_StyledRadioButton_spacer"
+              />
+            </label>
+            <label
+              class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+            >
+              <input
+                id="defaultNotificationLevel-mentions_keywords"
+                name="defaultNotificationLevel"
+                type="radio"
+                value="mentions_keywords"
+              />
+              <div>
+                <div />
+              </div>
+              <div
+                class="mx_StyledRadioButton_content"
+              >
+                Mentions and Keywords only
+              </div>
+              <div
+                class="mx_StyledRadioButton_spacer"
+              />
+            </label>
+          </div>
+        </div>
+        <div
+          class="mx_SettingsSubsection"
+        >
+          <div
+            class="mx_SettingsSubsectionHeading"
+          >
+            <h2
+              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+            >
+              Play a sound for
+            </h2>
+          </div>
+          <div
+            class="mx_SettingsSubsection_description"
           >
             <div
-              class="mx_SettingsSubsectionHeading"
+              class="mx_SettingsSubsection_text"
             >
-              <h2
-                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
-              >
-                Other things we think you might be interested in:
-              </h2>
-            </div>
-            <div
-              class="mx_SettingsSubsection_content"
-            >
-              <div
-                class="mx_LabelledCheckbox"
-              >
-                <form
-                  class="_root_19upo_16"
-                >
-                  <div
-                    class="_inline-field_19upo_32"
-                  >
-                    <div
-                      class="_inline-field-control_19upo_44"
-                    >
-                      <div
-                        class="_container_153f2_10"
-                      >
-                        <input
-                          checked=""
-                          class="_input_153f2_18"
-                          id="checkbox_YuxfFEpOsz"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_YuxfFEpOsz"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          Invited to a room
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                </form>
-              </div>
-              <div
-                class="mx_LabelledCheckbox"
-              >
-                <form
-                  class="_root_19upo_16"
-                >
-                  <div
-                    class="_inline-field_19upo_32"
-                  >
-                    <div
-                      class="_inline-field-control_19upo_44"
-                    >
-                      <div
-                        class="_container_153f2_10"
-                      >
-                        <input
-                          class="_input_153f2_18"
-                          id="checkbox_tWhQkBerF1"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_tWhQkBerF1"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          New room activity, upgrades and status messages occur
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                </form>
-              </div>
-              <div
-                class="mx_LabelledCheckbox"
-              >
-                <form
-                  class="_root_19upo_16"
-                >
-                  <div
-                    class="_inline-field_19upo_32"
-                  >
-                    <div
-                      class="_inline-field-control_19upo_44"
-                    >
-                      <div
-                        class="_container_153f2_10"
-                      >
-                        <input
-                          checked=""
-                          class="_input_153f2_18"
-                          id="checkbox_ejc4GFes1U"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_ejc4GFes1U"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          Messages sent by bots
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                </form>
-              </div>
+              Applied by default to all rooms on all devices.
             </div>
           </div>
           <div
-            class="mx_SettingsSubsection"
+            class="mx_SettingsSubsection_content"
           >
             <div
-              class="mx_SettingsSubsectionHeading"
+              class="mx_LabelledCheckbox"
             >
-              <h2
-                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+              <form
+                class="_root_19upo_16"
               >
-                Mentions and Keywords
-              </h2>
-            </div>
-            <div
-              class="mx_SettingsSubsection_description"
-            >
-              <div
-                class="mx_SettingsSubsection_text"
-              >
-                <span>
-                  Show a badge 
-                  <div
-                    class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char cpd-theme-light"
-                  >
-                    <span
-                      class="mx_NotificationBadge_count"
-                    >
-                      1
-                    </span>
-                  </div>
-                   when keywords are used in a room.
-                </span>
-              </div>
-            </div>
-            <div
-              class="mx_SettingsSubsection_content"
-            >
-              <div
-                class="mx_LabelledCheckbox"
-              >
-                <form
-                  class="_root_19upo_16"
+                <div
+                  class="_inline-field_19upo_32"
                 >
                   <div
-                    class="_inline-field_19upo_32"
+                    class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_inline-field-control_19upo_44"
+                      class="_container_153f2_10"
                     >
+                      <input
+                        checked=""
+                        class="_input_153f2_18"
+                        id="checkbox_OEPN1su1JY"
+                        type="checkbox"
+                      />
                       <div
-                        class="_container_153f2_10"
+                        class="_ui_153f2_19"
                       >
-                        <input
-                          checked=""
-                          class="_input_153f2_18"
-                          id="checkbox_FzOK2nvfGF"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
                       </div>
                     </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_FzOK2nvfGF"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          Notify when someone mentions using @room
-                        </span>
-                      </label>
-                    </div>
                   </div>
-                </form>
-              </div>
-              <div
-                class="mx_LabelledCheckbox"
-                id="mx_NotificationSettings2_MentionCheckbox"
-              >
-                <form
-                  class="_root_19upo_16"
-                >
                   <div
-                    class="_inline-field_19upo_32"
+                    class="_inline-field-body_19upo_38"
                   >
-                    <div
-                      class="_inline-field-control_19upo_44"
-                    >
-                      <div
-                        class="_container_153f2_10"
-                      >
-                        <input
-                          checked=""
-                          class="_input_153f2_18"
-                          id="checkbox_MldL2r2vbs"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_MldL2r2vbs"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          Notify when someone mentions using @displayname or @userId:matrix.org
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                </form>
-              </div>
-              <div
-                class="mx_LabelledCheckbox"
-              >
-                <form
-                  class="_root_19upo_16"
-                >
-                  <div
-                    class="_inline-field_19upo_32"
-                  >
-                    <div
-                      class="_inline-field-control_19upo_44"
-                    >
-                      <div
-                        class="_container_153f2_10"
-                      >
-                        <input
-                          aria-describedby="_r_11_"
-                          checked=""
-                          class="_input_153f2_18"
-                          id="checkbox_SwicmKUiOB"
-                          type="checkbox"
-                        />
-                        <div
-                          class="_ui_153f2_19"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="_inline-field-body_19upo_38"
-                    >
-                      <label
-                        class="_label_19upo_59"
-                        for="checkbox_SwicmKUiOB"
-                      >
-                        <span
-                          class="mx_LabelledCheckbox_label"
-                        >
-                          Notify when someone uses a keyword
-                        </span>
-                      </label>
-                      <span
-                        class="_message_19upo_85 _help-message_19upo_91"
-                        id="_r_11_"
-                      >
-                        Enter keywords here, or use for spelling variations or nicknames
-                      </span>
-                    </div>
-                  </div>
-                </form>
-              </div>
-              <div
-                class="mx_TagComposer"
-              >
-                <form
-                  class="mx_TagComposer_input"
-                >
-                  <div
-                    class="mx_Field mx_Field_input"
-                  >
-                    <input
-                      autocomplete="off"
-                      id="mx_NotificationSettings2_Keywords_field"
-                      label="Keyword"
-                      placeholder="New keyword"
-                      type="text"
-                      value=""
-                    />
                     <label
-                      for="mx_NotificationSettings2_Keywords_field"
+                      class="_label_19upo_59"
+                      for="checkbox_OEPN1su1JY"
                     >
-                      Keyword
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        People
+                      </span>
                     </label>
                   </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="mx_LabelledCheckbox"
+            >
+              <form
+                class="_root_19upo_16"
+              >
+                <div
+                  class="_inline-field_19upo_32"
+                >
                   <div
-                    class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_153f2_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_153f2_18"
+                        id="checkbox_VtOyR5kbu3"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_153f2_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_VtOyR5kbu3"
+                    >
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        Mentions and Keywords
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="mx_LabelledCheckbox"
+            >
+              <form
+                class="_root_19upo_16"
+              >
+                <div
+                  class="_inline-field_19upo_32"
+                >
+                  <div
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_153f2_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_153f2_18"
+                        id="checkbox_pEwuLn9Enn"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_153f2_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_pEwuLn9Enn"
+                    >
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        Audio and Video calls
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+        <div
+          class="mx_SettingsSubsection"
+        >
+          <div
+            class="mx_SettingsSubsectionHeading"
+          >
+            <h2
+              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+            >
+              Other things we think you might be interested in:
+            </h2>
+          </div>
+          <div
+            class="mx_SettingsSubsection_content"
+          >
+            <div
+              class="mx_LabelledCheckbox"
+            >
+              <form
+                class="_root_19upo_16"
+              >
+                <div
+                  class="_inline-field_19upo_32"
+                >
+                  <div
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_153f2_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_153f2_18"
+                        id="checkbox_YuxfFEpOsz"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_153f2_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_YuxfFEpOsz"
+                    >
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        Invited to a room
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="mx_LabelledCheckbox"
+            >
+              <form
+                class="_root_19upo_16"
+              >
+                <div
+                  class="_inline-field_19upo_32"
+                >
+                  <div
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_153f2_10"
+                    >
+                      <input
+                        class="_input_153f2_18"
+                        id="checkbox_tWhQkBerF1"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_153f2_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_tWhQkBerF1"
+                    >
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        New room activity, upgrades and status messages occur
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="mx_LabelledCheckbox"
+            >
+              <form
+                class="_root_19upo_16"
+              >
+                <div
+                  class="_inline-field_19upo_32"
+                >
+                  <div
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_153f2_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_153f2_18"
+                        id="checkbox_ejc4GFes1U"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_153f2_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_ejc4GFes1U"
+                    >
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        Messages sent by bots
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+        <div
+          class="mx_SettingsSubsection"
+        >
+          <div
+            class="mx_SettingsSubsectionHeading"
+          >
+            <h2
+              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+            >
+              Mentions and Keywords
+            </h2>
+          </div>
+          <div
+            class="mx_SettingsSubsection_description"
+          >
+            <div
+              class="mx_SettingsSubsection_text"
+            >
+              <span>
+                Show a badge 
+                <div
+                  class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char cpd-theme-light"
+                >
+                  <span
+                    class="mx_NotificationBadge_count"
+                  >
+                    1
+                  </span>
+                </div>
+                 when keywords are used in a room.
+              </span>
+            </div>
+          </div>
+          <div
+            class="mx_SettingsSubsection_content"
+          >
+            <div
+              class="mx_LabelledCheckbox"
+            >
+              <form
+                class="_root_19upo_16"
+              >
+                <div
+                  class="_inline-field_19upo_32"
+                >
+                  <div
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_153f2_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_153f2_18"
+                        id="checkbox_FzOK2nvfGF"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_153f2_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_FzOK2nvfGF"
+                    >
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        Notify when someone mentions using @room
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="mx_LabelledCheckbox"
+              id="mx_NotificationSettings2_MentionCheckbox"
+            >
+              <form
+                class="_root_19upo_16"
+              >
+                <div
+                  class="_inline-field_19upo_32"
+                >
+                  <div
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_153f2_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_153f2_18"
+                        id="checkbox_MldL2r2vbs"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_153f2_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_MldL2r2vbs"
+                    >
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        Notify when someone mentions using @displayname or @userId:matrix.org
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="mx_LabelledCheckbox"
+            >
+              <form
+                class="_root_19upo_16"
+              >
+                <div
+                  class="_inline-field_19upo_32"
+                >
+                  <div
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_153f2_10"
+                    >
+                      <input
+                        aria-describedby="_r_11_"
+                        checked=""
+                        class="_input_153f2_18"
+                        id="checkbox_SwicmKUiOB"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_153f2_19"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="checkbox_SwicmKUiOB"
+                    >
+                      <span
+                        class="mx_LabelledCheckbox_label"
+                      >
+                        Notify when someone uses a keyword
+                      </span>
+                    </label>
+                    <span
+                      class="_message_19upo_85 _help-message_19upo_91"
+                      id="_r_11_"
+                    >
+                      Enter keywords here, or use for spelling variations or nicknames
+                    </span>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="mx_TagComposer"
+            >
+              <form
+                class="mx_TagComposer_input"
+              >
+                <div
+                  class="mx_Field mx_Field_input"
+                >
+                  <input
+                    autocomplete="off"
+                    id="mx_NotificationSettings2_Keywords_field"
+                    label="Keyword"
+                    placeholder="New keyword"
+                    type="text"
+                    value=""
+                  />
+                  <label
+                    for="mx_NotificationSettings2_Keywords_field"
+                  >
+                    Keyword
+                  </label>
+                </div>
+                <div
+                  class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+                  role="button"
+                  tabindex="0"
+                >
+                  Add
+                </div>
+              </form>
+              <div
+                class="mx_TagComposer_tags"
+                role="list"
+              >
+                <div
+                  class="mx_Tag"
+                  role="listitem"
+                >
+                  justjann3
+                  <div
+                    aria-label="Remove"
+                    class="mx_AccessibleButton mx_Tag_delete"
                     role="button"
                     tabindex="0"
                   >
-                    Add
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+                      />
+                    </svg>
                   </div>
-                </form>
+                </div>
                 <div
-                  class="mx_TagComposer_tags"
-                  role="list"
+                  class="mx_Tag"
+                  role="listitem"
                 >
+                  justj4nn3
                   <div
-                    class="mx_Tag"
-                    role="listitem"
+                    aria-label="Remove"
+                    class="mx_AccessibleButton mx_Tag_delete"
+                    role="button"
+                    tabindex="0"
                   >
-                    justjann3
-                    <div
-                      aria-label="Remove"
-                      class="mx_AccessibleButton mx_Tag_delete"
-                      role="button"
-                      tabindex="0"
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 24 24"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-                        />
-                      </svg>
-                    </div>
+                      <path
+                        d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+                      />
+                    </svg>
                   </div>
+                </div>
+                <div
+                  class="mx_Tag"
+                  role="listitem"
+                >
+                  justj4nne
                   <div
-                    class="mx_Tag"
-                    role="listitem"
+                    aria-label="Remove"
+                    class="mx_AccessibleButton mx_Tag_delete"
+                    role="button"
+                    tabindex="0"
                   >
-                    justj4nn3
-                    <div
-                      aria-label="Remove"
-                      class="mx_AccessibleButton mx_Tag_delete"
-                      role="button"
-                      tabindex="0"
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 24 24"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-                        />
-                      </svg>
-                    </div>
+                      <path
+                        d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+                      />
+                    </svg>
                   </div>
+                </div>
+                <div
+                  class="mx_Tag"
+                  role="listitem"
+                >
+                  Janne
                   <div
-                    class="mx_Tag"
-                    role="listitem"
+                    aria-label="Remove"
+                    class="mx_AccessibleButton mx_Tag_delete"
+                    role="button"
+                    tabindex="0"
                   >
-                    justj4nne
-                    <div
-                      aria-label="Remove"
-                      class="mx_AccessibleButton mx_Tag_delete"
-                      role="button"
-                      tabindex="0"
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 24 24"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-                        />
-                      </svg>
-                    </div>
+                      <path
+                        d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+                      />
+                    </svg>
                   </div>
+                </div>
+                <div
+                  class="mx_Tag"
+                  role="listitem"
+                >
+                  J4nne
                   <div
-                    class="mx_Tag"
-                    role="listitem"
+                    aria-label="Remove"
+                    class="mx_AccessibleButton mx_Tag_delete"
+                    role="button"
+                    tabindex="0"
                   >
-                    Janne
-                    <div
-                      aria-label="Remove"
-                      class="mx_AccessibleButton mx_Tag_delete"
-                      role="button"
-                      tabindex="0"
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 24 24"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-                        />
-                      </svg>
-                    </div>
+                      <path
+                        d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+                      />
+                    </svg>
                   </div>
+                </div>
+                <div
+                  class="mx_Tag"
+                  role="listitem"
+                >
+                  Jann3
                   <div
-                    class="mx_Tag"
-                    role="listitem"
+                    aria-label="Remove"
+                    class="mx_AccessibleButton mx_Tag_delete"
+                    role="button"
+                    tabindex="0"
                   >
-                    J4nne
-                    <div
-                      aria-label="Remove"
-                      class="mx_AccessibleButton mx_Tag_delete"
-                      role="button"
-                      tabindex="0"
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 24 24"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-                        />
-                      </svg>
-                    </div>
+                      <path
+                        d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+                      />
+                    </svg>
                   </div>
+                </div>
+                <div
+                  class="mx_Tag"
+                  role="listitem"
+                >
+                  jann3
                   <div
-                    class="mx_Tag"
-                    role="listitem"
+                    aria-label="Remove"
+                    class="mx_AccessibleButton mx_Tag_delete"
+                    role="button"
+                    tabindex="0"
                   >
-                    Jann3
-                    <div
-                      aria-label="Remove"
-                      class="mx_AccessibleButton mx_Tag_delete"
-                      role="button"
-                      tabindex="0"
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 24 24"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-                        />
-                      </svg>
-                    </div>
+                      <path
+                        d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+                      />
+                    </svg>
                   </div>
+                </div>
+                <div
+                  class="mx_Tag"
+                  role="listitem"
+                >
+                  j4nne
                   <div
-                    class="mx_Tag"
-                    role="listitem"
+                    aria-label="Remove"
+                    class="mx_AccessibleButton mx_Tag_delete"
+                    role="button"
+                    tabindex="0"
                   >
-                    jann3
-                    <div
-                      aria-label="Remove"
-                      class="mx_AccessibleButton mx_Tag_delete"
-                      role="button"
-                      tabindex="0"
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 24 24"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-                        />
-                      </svg>
-                    </div>
+                      <path
+                        d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+                      />
+                    </svg>
                   </div>
+                </div>
+                <div
+                  class="mx_Tag"
+                  role="listitem"
+                >
+                  janne
                   <div
-                    class="mx_Tag"
-                    role="listitem"
+                    aria-label="Remove"
+                    class="mx_AccessibleButton mx_Tag_delete"
+                    role="button"
+                    tabindex="0"
                   >
-                    j4nne
-                    <div
-                      aria-label="Remove"
-                      class="mx_AccessibleButton mx_Tag_delete"
-                      role="button"
-                      tabindex="0"
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 24 24"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                  <div
-                    class="mx_Tag"
-                    role="listitem"
-                  >
-                    janne
-                    <div
-                      aria-label="Remove"
-                      class="mx_AccessibleButton mx_Tag_delete"
-                      role="button"
-                      tabindex="0"
-                    >
-                      <svg
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 24 24"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-                        />
-                      </svg>
-                    </div>
+                      <path
+                        d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+                      />
+                    </svg>
                   </div>
                 </div>
               </div>
+            </div>
+            <form
+              class="_root_19upo_16"
+            >
               <div
                 class="_inline-field_19upo_32"
               >
@@ -2166,169 +2166,169 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                   </label>
                 </div>
               </div>
-            </div>
+            </form>
+          </div>
+        </div>
+        <div
+          class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
+        >
+          <div
+            class="mx_SettingsSubsectionHeading"
+          >
+            <h2
+              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+            >
+              Email summary
+            </h2>
           </div>
           <div
-            class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
+            class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
           >
             <div
-              class="mx_SettingsSubsectionHeading"
+              class="mx_SettingsSubsection_text"
             >
-              <h2
-                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
-              >
-                Email summary
-              </h2>
+              Receive an email summary of missed notifications
             </div>
             <div
-              class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
+              class="mx_SettingsSubsection_description mx_NotificationPusherSettings_detail"
             >
               <div
                 class="mx_SettingsSubsection_text"
               >
-                Receive an email summary of missed notifications
+                <span>
+                  Select which emails you want to send summaries to. Manage your emails in 
+                  <div
+                    class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+                    role="button"
+                    tabindex="0"
+                  >
+                    General
+                  </div>
+                  .
+                </span>
               </div>
+            </div>
+            <div
+              class="mx_SettingsIndent"
+            >
               <div
-                class="mx_SettingsSubsection_description mx_NotificationPusherSettings_detail"
+                class="mx_LabelledCheckbox"
               >
-                <div
-                  class="mx_SettingsSubsection_text"
+                <form
+                  class="_root_19upo_16"
                 >
-                  <span>
-                    Select which emails you want to send summaries to. Manage your emails in 
-                    <div
-                      class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
-                      role="button"
-                      tabindex="0"
-                    >
-                      General
-                    </div>
-                    .
-                  </span>
-                </div>
-              </div>
-              <div
-                class="mx_SettingsIndent"
-              >
-                <div
-                  class="mx_LabelledCheckbox"
-                >
-                  <form
-                    class="_root_19upo_16"
+                  <div
+                    class="_inline-field_19upo_32"
                   >
                     <div
-                      class="_inline-field_19upo_32"
+                      class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_inline-field-control_19upo_44"
+                        class="_container_153f2_10"
                       >
+                        <input
+                          class="_input_153f2_18"
+                          id="checkbox_dvqsxEaZtl"
+                          type="checkbox"
+                        />
                         <div
-                          class="_container_153f2_10"
+                          class="_ui_153f2_19"
                         >
-                          <input
-                            class="_input_153f2_18"
-                            id="checkbox_dvqsxEaZtl"
-                            type="checkbox"
-                          />
-                          <div
-                            class="_ui_153f2_19"
+                          <svg
+                            aria-hidden="true"
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
                           >
-                            <svg
-                              aria-hidden="true"
-                              fill="currentColor"
-                              height="1em"
-                              viewBox="0 0 24 24"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                              />
-                            </svg>
-                          </div>
+                            <path
+                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                            />
+                          </svg>
                         </div>
                       </div>
-                      <div
-                        class="_inline-field-body_19upo_38"
-                      >
-                        <label
-                          class="_label_19upo_59"
-                          for="checkbox_dvqsxEaZtl"
-                        >
-                          <span
-                            class="mx_LabelledCheckbox_label"
-                          >
-                            test@example.tld
-                          </span>
-                        </label>
-                      </div>
                     </div>
-                  </form>
-                </div>
+                    <div
+                      class="_inline-field-body_19upo_38"
+                    >
+                      <label
+                        class="_label_19upo_59"
+                        for="checkbox_dvqsxEaZtl"
+                      >
+                        <span
+                          class="mx_LabelledCheckbox_label"
+                        >
+                          test@example.tld
+                        </span>
+                      </label>
+                    </div>
+                  </div>
+                </form>
               </div>
             </div>
-            <div
-              class="_separator_cqpyv_8"
-              data-kind="primary"
-              data-orientation="horizontal"
-              role="separator"
-            />
           </div>
           <div
-            class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
+            class="_separator_13qwf_8"
+            data-kind="primary"
+            data-orientation="horizontal"
+            role="separator"
+          />
+        </div>
+        <div
+          class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
+        >
+          <div
+            class="mx_SettingsSubsectionHeading"
           >
-            <div
-              class="mx_SettingsSubsectionHeading"
+            <h2
+              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
             >
-              <h2
-                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
-              >
-                Notification targets
-              </h2>
-            </div>
-            <div
-              class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
-            >
-              <ul>
-                <li>
-                  My EyeFon
-                </li>
-              </ul>
-            </div>
-            <div
-              class="_separator_cqpyv_8"
-              data-kind="primary"
-              data-orientation="horizontal"
-              role="separator"
-            />
+              Notification targets
+            </h2>
           </div>
           <div
-            class="mx_SettingsSubsection"
+            class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
+          >
+            <ul>
+              <li>
+                My EyeFon
+              </li>
+            </ul>
+          </div>
+          <div
+            class="_separator_13qwf_8"
+            data-kind="primary"
+            data-orientation="horizontal"
+            role="separator"
+          />
+        </div>
+        <div
+          class="mx_SettingsSubsection"
+        >
+          <div
+            class="mx_SettingsSubsectionHeading"
+          >
+            <h2
+              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+            >
+              Quick Actions
+            </h2>
+          </div>
+          <div
+            class="mx_SettingsSubsection_content"
           >
             <div
-              class="mx_SettingsSubsectionHeading"
+              class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
+              role="button"
+              tabindex="0"
             >
-              <h2
-                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
-              >
-                Quick Actions
-              </h2>
-            </div>
-            <div
-              class="mx_SettingsSubsection_content"
-            >
-              <div
-                class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
-                role="button"
-                tabindex="0"
-              >
-                Reset to default settings
-              </div>
+              Reset to default settings
             </div>
           </div>
         </div>
       </div>
     </div>
-  </form>
+  </div>
 </div>
 `;
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap
index 813e759967..b4d4bacd02 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap
@@ -38,11 +38,11 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
                 <span>
                   Internal room ID
                 </span>
-                <div
+                <span
                   class="mx_CopyableText mx_CopyableText_border"
                 >
                   !room:example.com
-                  <div
+                  <button
                     aria-label="Copy"
                     class="mx_AccessibleButton mx_CopyableText_copyButton"
                     role="button"
@@ -62,8 +62,8 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
                         d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                       />
                     </svg>
-                  </div>
-                </div>
+                  </button>
+                </span>
               </div>
             </div>
           </div>
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
index e9dcae3c93..af2fb7b1d7 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
@@ -17,7 +17,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
     >
       <span
         aria-label="Profile picture"
-        class="_avatar_zysgz_8 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar"
+        class="_avatar_va14e_8 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar"
         data-color="4"
         data-testid="avatar-img"
         data-type="round"
@@ -26,7 +26,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
       >
         <img
           alt=""
-          class="_image_zysgz_43"
+          class="_image_va14e_43"
           data-type="round"
           height="42px"
           loading="lazy"
@@ -123,7 +123,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
       class="mx_PeopleRoomSettingsTab_knock"
     >
       <span
-        class="_avatar_zysgz_8 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar _avatar-imageless_zysgz_55"
+        class="_avatar_va14e_8 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar _avatar-imageless_va14e_55"
         data-color="4"
         data-testid="avatar-img"
         data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap
index 234c91813d..fdce6dcec0 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap
@@ -186,7 +186,7 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
          
         <span>
           To avoid these issues, create a 
-          <div
+          <a
             class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
             role="button"
             tabindex="0"
@@ -194,7 +194,7 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
              
             new public room
              
-          </div>
+          </a>
            for the conversation you plan to have.
         </span>
          
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
index 0a52b22503..5e27a6e946 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
@@ -139,7 +139,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
               </form>
             </div>
             <div
-              class="_separator_cqpyv_8"
+              class="_separator_13qwf_8"
               data-kind="primary"
               data-orientation="horizontal"
               role="separator"
@@ -229,7 +229,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                           class="mx_EventTile_avatar"
                         >
                           <span
-                            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+                            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
                             data-color="2"
                             data-testid="avatar-img"
                             data-type="round"
@@ -323,7 +323,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                           class="mx_EventTile_avatar"
                         >
                           <span
-                            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+                            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
                             data-color="2"
                             data-testid="avatar-img"
                             data-type="round"
@@ -420,7 +420,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                           class="mx_EventTile_avatar"
                         >
                           <span
-                            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+                            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
                             data-color="2"
                             data-testid="avatar-img"
                             data-type="round"
@@ -497,7 +497,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
               </form>
             </div>
             <div
-              class="_separator_cqpyv_8"
+              class="_separator_13qwf_8"
               data-kind="primary"
               data-orientation="horizontal"
               role="separator"
@@ -650,7 +650,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                 >
                   <svg
                     aria-label="Loading…"
-                    class="_icon_11k6c_18"
+                    class="_icon_1855a_18"
                     data-testid="spinner"
                     fill="currentColor"
                     height="1em"
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
index b13c7aa259..35050edddb 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
@@ -232,7 +232,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
       class="mx_SettingsTab_sections"
     >
       <nav
-        class="_breadcrumb_1xygz_8"
+        class="_breadcrumb_t96w3_8"
       >
         <button
           aria-label="Back"
@@ -260,13 +260,13 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
           </div>
         </button>
         <ol
-          class="_pages_1xygz_17"
+          class="_pages_t96w3_17"
         >
           <li>
             <a
-              class="_link_1v5rz_8"
+              class="_link_k9ljz_8"
               data-kind="primary"
-              data-size="small"
+              data-size="sm"
               rel="noreferrer noopener"
               role="button"
               tabindex="0"
@@ -277,7 +277,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
           <li>
             <span
               aria-current="page"
-              class="_last-page_1xygz_30"
+              class="_last-page_t96w3_30"
             >
               Reset encryption
             </span>
@@ -291,8 +291,9 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
           class="mx_EncryptionCard_header"
         >
           <div
-            class="_content_1r8kr_8 _destructive_1r8kr_34"
-            data-size="large"
+            class="_big-icon_1ssbv_8"
+            data-kind="critical"
+            data-size="lg"
           >
             <svg
               fill="currentColor"
@@ -317,7 +318,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
           style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         >
           <ul
-            class="_visual-list_1mgc1_8"
+            class="_visual-list_6zpfn_8"
           >
             <li
               class="_visual-list-item_1nc1y_8"
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
index 21d6d2dee3..785298033a 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
@@ -42,7 +42,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   >
                     <svg
                       aria-label="Loading…"
-                      class="_icon_11k6c_18"
+                      class="_icon_1855a_18"
                       data-testid="spinner"
                       fill="currentColor"
                       height="1em"
@@ -905,9 +905,18 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 <h2
                   class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                 >
-                  Images, GIFs and videos
+                  Link previews
                 </h2>
               </div>
+              <div
+                class="mx_SettingsSubsection_description"
+              >
+                <div
+                  class="mx_SettingsSubsection_text"
+                >
+                  Shows information about links underneath messages
+                </div>
+              </div>
               <div
                 class="mx_SettingsSubsection_content"
               >
@@ -923,7 +932,6 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       <input
                         checked=""
                         class="_input_udcm8_24"
-                        disabled=""
                         id="mx_SettingsFlag_vfGFMldL2r2v"
                         role="switch"
                         type="checkbox"
@@ -940,7 +948,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       class="_label_19upo_59"
                       for="mx_SettingsFlag_vfGFMldL2r2v"
                     >
-                      Enable inline URL previews by default
+                      Enable previews
                     </label>
                   </div>
                 </div>
@@ -955,7 +963,6 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     >
                       <input
                         class="_input_udcm8_24"
-                        disabled=""
                         id="mx_SettingsFlag_bsSwicmKUiOB"
                         role="switch"
                         type="checkbox"
@@ -972,10 +979,31 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       class="_label_19upo_59"
                       for="mx_SettingsFlag_bsSwicmKUiOB"
                     >
-                      Autoplay GIFs
+                      Enable previews in encrypted rooms
                     </label>
                   </div>
                 </div>
+              </div>
+            </div>
+          </form>
+          <form
+            class="_root_19upo_16"
+          >
+            <div
+              class="mx_SettingsSubsection"
+            >
+              <div
+                class="mx_SettingsSubsectionHeading"
+              >
+                <h2
+                  class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+                >
+                  Images, GIFs and videos
+                </h2>
+              </div>
+              <div
+                class="mx_SettingsSubsection_content"
+              >
                 <div
                   class="_inline-field_19upo_32"
                 >
@@ -1003,6 +1031,38 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     <label
                       class="_label_19upo_59"
                       for="mx_SettingsFlag_dvqsxEaZtl3A"
+                    >
+                      Autoplay GIFs
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="_inline-field_19upo_32"
+                >
+                  <div
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_udcm8_10"
+                    >
+                      <input
+                        class="_input_udcm8_24"
+                        disabled=""
+                        id="mx_SettingsFlag_NIiWzqsApP1c"
+                        role="switch"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_udcm8_34"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="mx_SettingsFlag_NIiWzqsApP1c"
                     >
                       Autoplay videos
                     </label>
@@ -1029,39 +1089,6 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               <div
                 class="mx_SettingsSubsection_content"
               >
-                <div
-                  class="_inline-field_19upo_32"
-                >
-                  <div
-                    class="_inline-field-control_19upo_44"
-                  >
-                    <div
-                      class="_container_udcm8_10"
-                    >
-                      <input
-                        checked=""
-                        class="_input_udcm8_24"
-                        disabled=""
-                        id="mx_SettingsFlag_NIiWzqsApP1c"
-                        role="switch"
-                        type="checkbox"
-                      />
-                      <div
-                        class="_ui_udcm8_34"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="_inline-field-body_19upo_38"
-                  >
-                    <label
-                      class="_label_19upo_59"
-                      for="mx_SettingsFlag_NIiWzqsApP1c"
-                    >
-                      Show typing notifications
-                    </label>
-                  </div>
-                </div>
                 <div
                   class="_inline-field_19upo_32"
                 >
@@ -1091,7 +1118,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       class="_label_19upo_59"
                       for="mx_SettingsFlag_q1SIAPqLMVXh"
                     >
-                      Show a placeholder for removed messages
+                      Show typing notifications
                     </label>
                   </div>
                 </div>
@@ -1124,7 +1151,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       class="_label_19upo_59"
                       for="mx_SettingsFlag_dXFDGgBsKXay"
                     >
-                      Show read receipts sent by other users
+                      Show a placeholder for removed messages
                     </label>
                   </div>
                 </div>
@@ -1157,7 +1184,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       class="_label_19upo_59"
                       for="mx_SettingsFlag_7Az0xw4Bs4Tt"
                     >
-                      Show join/leave messages (invites/removes/bans unaffected)
+                      Show read receipts sent by other users
                     </label>
                   </div>
                 </div>
@@ -1190,7 +1217,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       class="_label_19upo_59"
                       for="mx_SettingsFlag_8jmzPIlPoBCv"
                     >
-                      Show display name changes
+                      Show join/leave messages (invites/removes/bans unaffected)
                     </label>
                   </div>
                 </div>
@@ -1223,7 +1250,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       class="_label_19upo_59"
                       for="mx_SettingsFlag_enFRaTjdsFou"
                     >
-                      Show chat effects (animations when receiving e.g. confetti)
+                      Show display name changes
                     </label>
                   </div>
                 </div>
@@ -1256,7 +1283,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       class="_label_19upo_59"
                       for="mx_SettingsFlag_bfwnd5rz4XNX"
                     >
-                      Show profile picture changes
+                      Show chat effects (animations when receiving e.g. confetti)
                     </label>
                   </div>
                 </div>
@@ -1289,7 +1316,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       class="_label_19upo_59"
                       for="mx_SettingsFlag_gs5uWEzYzZrS"
                     >
-                      Show avatars in user, room and event mentions
+                      Show profile picture changes
                     </label>
                   </div>
                 </div>
@@ -1322,7 +1349,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       class="_label_19upo_59"
                       for="mx_SettingsFlag_qWg7OgID1yRR"
                     >
-                      Enable big emoji in chat
+                      Show avatars in user, room and event mentions
                     </label>
                   </div>
                 </div>
@@ -1355,7 +1382,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       class="_label_19upo_59"
                       for="mx_SettingsFlag_pOPewl7rtMbV"
                     >
-                      Jump to the bottom of the timeline when you send a message
+                      Enable big emoji in chat
                     </label>
                   </div>
                 </div>
@@ -1387,6 +1414,39 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     <label
                       class="_label_19upo_59"
                       for="mx_SettingsFlag_cmt3PZSyNp3v"
+                    >
+                      Jump to the bottom of the timeline when you send a message
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="_inline-field_19upo_32"
+                >
+                  <div
+                    class="_inline-field-control_19upo_44"
+                  >
+                    <div
+                      class="_container_udcm8_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_udcm8_24"
+                        disabled=""
+                        id="mx_SettingsFlag_dJJz3lHUv9XX"
+                        role="switch"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_udcm8_34"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_19upo_38"
+                  >
+                    <label
+                      class="_label_19upo_59"
+                      for="mx_SettingsFlag_dJJz3lHUv9XX"
                     >
                       Show current profile picture and name for users in message history
                     </label>
@@ -1424,7 +1484,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     >
                       <input
                         class="_input_udcm8_24"
-                        id="_r_24_"
+                        id="_r_26_"
                         role="switch"
                         type="checkbox"
                       />
@@ -1438,7 +1498,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="_r_24_"
+                      for="_r_26_"
                     >
                       Hide avatars of room and inviter
                     </label>
@@ -1452,13 +1512,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 >
                   <label
                     class="_label_19upo_59"
-                    for="radix-_r_26_"
+                    for="radix-_r_28_"
                   >
                     Show media in timeline
                   </label>
                   <span
                     class="_message_19upo_85 _help-message_19upo_91 mx_MediaPreviewAccountSetting_RadioHelp"
-                    id="radix-_r_27_"
+                    id="radix-_r_29_"
                   >
                     A hidden media can always be shown by tapping on it
                   </span>
@@ -1571,7 +1631,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                         checked=""
                         class="_input_udcm8_24"
                         disabled=""
-                        id="_r_2b_"
+                        id="_r_2d_"
                         role="switch"
                         type="checkbox"
                       />
@@ -1585,13 +1645,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="_r_2b_"
+                      for="_r_2d_"
                     >
                       Allow users to invite you to rooms
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id="radix-_r_2d_"
+                      id="radix-_r_2f_"
                     >
                       Your server does not implement this feature.
                     </span>
@@ -1600,7 +1660,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               </form>
             </div>
             <div
-              class="_separator_cqpyv_8"
+              class="_separator_13qwf_8"
               data-kind="primary"
               data-orientation="horizontal"
               role="separator"
@@ -1636,7 +1696,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       <input
                         class="_input_udcm8_24"
                         disabled=""
-                        id="mx_SettingsFlag_dJJz3lHUv9XX"
+                        id="mx_SettingsFlag_SBSSOZDRlzlA"
                         role="switch"
                         type="checkbox"
                       />
@@ -1650,7 +1710,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="mx_SettingsFlag_dJJz3lHUv9XX"
+                      for="mx_SettingsFlag_SBSSOZDRlzlA"
                     >
                       Show NSFW content
                     </label>
@@ -1690,7 +1750,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                         checked=""
                         class="_input_udcm8_24"
                         disabled=""
-                        id="mx_SettingsFlag_SBSSOZDRlzlA"
+                        id="mx_SettingsFlag_FLEpLCb0jpp6"
                         role="switch"
                         type="checkbox"
                       />
@@ -1704,7 +1764,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="mx_SettingsFlag_SBSSOZDRlzlA"
+                      for="mx_SettingsFlag_FLEpLCb0jpp6"
                     >
                       Prompt before sending invites to potentially invalid matrix IDs
                     </label>
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
index f8d8c839b7..ad678a5d55 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
@@ -231,7 +231,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                         class="_controls_17lij_8"
                       >
                         <input
-                          class="_control_sqdq4_10"
+                          class="_control_d83jn_10"
                           id="radix-_r_2_"
                           name="input"
                           placeholder=""
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index 009ca1d805..69f7e17453 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
@@ -32,13 +32,13 @@ HTMLCollection [
         class="mx_DeviceSecurityCard_description"
       >
         This session doesn't support encryption and thus can't be verified.
-        <div
+        <button
           class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
           role="button"
           tabindex="0"
         >
           Learn more
-        </div>
+        </button>
       </p>
     </div>
   </div>,
@@ -238,13 +238,13 @@ exports[`<SessionManagerTab /> current session section renders current session s
           class="mx_DeviceSecurityCard_description"
         >
           Your current session is ready for secure messaging.
-          <div
+          <button
             class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
             role="button"
             tabindex="0"
           >
             Learn more
-          </div>
+          </button>
         </p>
       </div>
     </div>
@@ -411,13 +411,13 @@ exports[`<SessionManagerTab /> current session section renders current session s
           class="mx_DeviceSecurityCard_description"
         >
           Verify your current session for enhanced secure messaging.
-          <div
+          <button
             class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
             role="button"
             tabindex="0"
           >
             Learn more
-          </div>
+          </button>
         </p>
         <div
           class="mx_DeviceSecurityCard_actions"
diff --git a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
index df79247826..885213fcfe 100644
--- a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
@@ -27,7 +27,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
         >
           <span
             aria-label="Avatar"
-            class="_avatar_zysgz_8 mx_BaseAvatar"
+            class="_avatar_va14e_8 mx_BaseAvatar"
             data-color="2"
             data-testid="avatar-img"
             data-type="square"
@@ -35,7 +35,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
           >
             <img
               alt=""
-              class="_image_zysgz_43"
+              class="_image_va14e_43"
               data-type="square"
               height="40px"
               loading="lazy"
diff --git a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
index d7b5f3781c..7c433f4a42 100644
--- a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
@@ -21,7 +21,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
           class="mx_UserMenu_userAvatar"
         >
           <span
-            class="_avatar_zysgz_8 mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_va14e_8 mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar _avatar-imageless_va14e_55"
             data-color="5"
             data-testid="avatar-img"
             data-type="round"
diff --git a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
index da54f36a81..1673424036 100644
--- a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
@@ -167,75 +167,75 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
               </form>
             </div>
           </fieldset>
-          <form
-            class="_root_19upo_16"
+          <div
+            class="mx_SettingsSection"
           >
-            <div
-              class="mx_SettingsSection"
+            <h3
+              class="mx_Heading_h4"
             >
-              <h3
-                class="mx_Heading_h4"
+              Address
+            </h3>
+            <div
+              class="mx_SettingsSection_subSections"
+            >
+              <fieldset
+                class="mx_SettingsFieldset"
+                data-testid="published-address-fieldset"
               >
-                Address
-              </h3>
-              <div
-                class="mx_SettingsSection_subSections"
-              >
-                <fieldset
-                  class="mx_SettingsFieldset"
-                  data-testid="published-address-fieldset"
+                <legend
+                  class="mx_SettingsFieldset_legend"
+                >
+                  Published Addresses
+                </legend>
+                <div
+                  class="mx_SettingsFieldset_description"
                 >
-                  <legend
-                    class="mx_SettingsFieldset_legend"
-                  >
-                    Published Addresses
-                  </legend>
                   <div
-                    class="mx_SettingsFieldset_description"
+                    class="mx_SettingsSubsection_text"
                   >
-                    <div
-                      class="mx_SettingsSubsection_text"
-                    >
-                      Published addresses can be used by anyone on any server to join your space. To publish an address, it needs to be set as a local address first.
-                    </div>
+                    Published addresses can be used by anyone on any server to join your space. To publish an address, it needs to be set as a local address first.
                   </div>
+                </div>
+                <div
+                  class="mx_SettingsFieldset_content"
+                >
                   <div
-                    class="mx_SettingsFieldset_content"
+                    class="mx_Field mx_Field_select"
                   >
-                    <div
-                      class="mx_Field mx_Field_select"
+                    <select
+                      disabled=""
+                      id="canonicalAlias"
+                      label="Main address"
+                      placeholder="Main address"
+                      type="text"
                     >
-                      <select
-                        disabled=""
-                        id="canonicalAlias"
-                        label="Main address"
-                        placeholder="Main address"
-                        type="text"
+                      <option
+                        value=""
                       >
-                        <option
-                          value=""
-                        >
-                          not specified
-                        </option>
-                      </select>
-                      <label
-                        for="canonicalAlias"
-                      >
-                        Main address
-                      </label>
-                      <svg
-                        class="mx_Field_select_chevron"
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 24 24"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-                        />
-                      </svg>
-                    </div>
+                        not specified
+                      </option>
+                    </select>
+                    <label
+                      for="canonicalAlias"
+                    >
+                      Main address
+                    </label>
+                    <svg
+                      class="mx_Field_select_chevron"
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                      />
+                    </svg>
+                  </div>
+                  <form
+                    class="_root_19upo_16"
+                  >
                     <div
                       class="_inline-field_19upo_32"
                     >
@@ -274,59 +274,65 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
                         </span>
                       </div>
                     </div>
-                    <datalist
-                      id="mx_AliasSettings_altRecommendations"
-                    />
+                  </form>
+                  <datalist
+                    id="mx_AliasSettings_altRecommendations"
+                  />
+                  <div
+                    class="mx_EditableItemList"
+                    id="roomAltAliases"
+                  >
+                    <div
+                      class="mx_EditableItemList_label"
+                    >
+                      No other published addresses yet, add one below
+                    </div>
+                    <ul />
+                    <div />
+                  </div>
+                </div>
+              </fieldset>
+              <fieldset
+                class="mx_SettingsFieldset"
+                data-testid="local-address-fieldset"
+              >
+                <legend
+                  class="mx_SettingsFieldset_legend"
+                >
+                  Local Addresses
+                </legend>
+                <div
+                  class="mx_SettingsFieldset_description"
+                >
+                  <div
+                    class="mx_SettingsSubsection_text"
+                  >
+                    Set addresses for this space so users can find this space through your homeserver (matrix.org)
+                  </div>
+                </div>
+                <div
+                  class="mx_SettingsFieldset_content"
+                >
+                  <details>
+                    <summary
+                      class="mx_AliasSettings_localAddresses"
+                    >
+                      Show more
+                    </summary>
                     <div
                       class="mx_EditableItemList"
-                      id="roomAltAliases"
+                      id="roomAliases"
                     >
                       <div
                         class="mx_EditableItemList_label"
                       >
-                        No other published addresses yet, add one below
+                        This space has no local addresses
                       </div>
-                      <ul />
-                      <div />
-                    </div>
-                  </div>
-                </fieldset>
-                <fieldset
-                  class="mx_SettingsFieldset"
-                  data-testid="local-address-fieldset"
-                >
-                  <legend
-                    class="mx_SettingsFieldset_legend"
-                  >
-                    Local Addresses
-                  </legend>
-                  <div
-                    class="mx_SettingsFieldset_description"
-                  >
-                    <div
-                      class="mx_SettingsSubsection_text"
-                    >
-                      Set addresses for this space so users can find this space through your homeserver (matrix.org)
-                    </div>
-                  </div>
-                  <div
-                    class="mx_SettingsFieldset_content"
-                  >
-                    <details>
-                      <summary
-                        class="mx_AliasSettings_localAddresses"
+                      <form
+                        autocomplete="off"
+                        class="mx_EditableItemList_newItem"
+                        novalidate=""
                       >
-                        Show more
-                      </summary>
-                      <div
-                        class="mx_EditableItemList"
-                        id="roomAliases"
-                      >
-                        <div
-                          class="mx_EditableItemList_label"
-                        >
-                          This space has no local addresses
-                        </div>
                         <div
                           class="mx_Field mx_Field_input mx_RoomAliasField mx_Field_labelAlwaysTopLeft"
                         >
@@ -368,13 +374,13 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
                         >
                           Add
                         </div>
-                      </div>
-                    </details>
-                  </div>
-                </fieldset>
-              </div>
+                      </form>
+                    </div>
+                  </details>
+                </div>
+              </fieldset>
             </div>
-          </form>
+          </div>
         </div>
       </div>
     </div>
@@ -528,9 +534,6 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
               </form>
             </div>
           </fieldset>
-          <form
-            class="_root_19upo_16"
-          />
         </div>
       </div>
     </div>
diff --git a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceTreeLevel-test.tsx.snap b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceTreeLevel-test.tsx.snap
index 64e735bb66..0400231e07 100644
--- a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceTreeLevel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceTreeLevel-test.tsx.snap
@@ -88,7 +88,7 @@ exports[`SpaceItem should render a space with subspaces 1`] = `
         >
           <span
             aria-label="Avatar"
-            class="_avatar_zysgz_8 mx_BaseAvatar"
+            class="_avatar_va14e_8 mx_BaseAvatar"
             data-color="3"
             data-testid="avatar-img"
             data-type="round"
@@ -96,7 +96,7 @@ exports[`SpaceItem should render a space with subspaces 1`] = `
           >
             <img
               alt=""
-              class="_image_zysgz_43"
+              class="_image_va14e_43"
               data-type="round"
               height="32px"
               loading="lazy"
@@ -177,7 +177,7 @@ exports[`SpaceItem should render a space with subspaces 2`] = `
         >
           <span
             aria-label="Avatar"
-            class="_avatar_zysgz_8 mx_BaseAvatar"
+            class="_avatar_va14e_8 mx_BaseAvatar"
             data-color="3"
             data-testid="avatar-img"
             data-type="round"
@@ -185,7 +185,7 @@ exports[`SpaceItem should render a space with subspaces 2`] = `
           >
             <img
               alt=""
-              class="_image_zysgz_43"
+              class="_image_va14e_43"
               data-type="round"
               height="32px"
               loading="lazy"
@@ -245,7 +245,7 @@ exports[`SpaceItem should render a space with subspaces 2`] = `
             >
               <span
                 aria-label="Avatar"
-                class="_avatar_zysgz_8 mx_BaseAvatar"
+                class="_avatar_va14e_8 mx_BaseAvatar"
                 data-color="4"
                 data-testid="avatar-img"
                 data-type="round"
@@ -253,7 +253,7 @@ exports[`SpaceItem should render a space with subspaces 2`] = `
               >
                 <img
                   alt=""
-                  class="_image_zysgz_43"
+                  class="_image_va14e_43"
                   data-type="round"
                   height="24px"
                   loading="lazy"
diff --git a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
index da5e252212..84e874dbae 100644
--- a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
 <div
   aria-labelledby="radix-_r_1m_"
   aria-orientation="vertical"
-  class="_menu_1w1u7_8"
+  class="_menu_1kl3y_8"
   data-align="start"
   data-orientation="vertical"
   data-radix-menu-content=""
@@ -17,7 +17,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
   tabindex="-1"
 >
   <h3
-    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1w1u7_63"
+    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1kl3y_65"
     id="_r_1u_"
   >
     Threads activity
@@ -26,7 +26,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
     class="mx_ThreadsActivityCentre_rows"
   >
     <button
-      class="mx_ThreadsActivityCentreRow _item_lqfwq_8 _interactive_lqfwq_26"
+      class="mx_ThreadsActivityCentreRow _item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -34,10 +34,10 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
       tabindex="-1"
     >
       <div
-        class="mx_DecoratedRoomAvatar _icon_lqfwq_50"
+        class="mx_DecoratedRoomAvatar _icon_bym9p_51"
       >
         <span
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
           data-color="3"
           data-testid="avatar-img"
           data-type="round"
@@ -48,13 +48,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         This is a real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -74,7 +74,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
       </div>
     </button>
     <button
-      class="mx_ThreadsActivityCentreRow _item_lqfwq_8 _interactive_lqfwq_26"
+      class="mx_ThreadsActivityCentreRow _item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -82,10 +82,10 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
       tabindex="-1"
     >
       <div
-        class="mx_DecoratedRoomAvatar _icon_lqfwq_50"
+        class="mx_DecoratedRoomAvatar _icon_bym9p_51"
       >
         <span
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
           data-color="2"
           data-testid="avatar-img"
           data-type="round"
@@ -96,13 +96,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         A notification
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -129,7 +129,7 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
 <div
   aria-labelledby="radix-_r_2a_"
   aria-orientation="vertical"
-  class="_menu_1w1u7_8"
+  class="_menu_1kl3y_8"
   data-align="start"
   data-orientation="vertical"
   data-radix-menu-content=""
@@ -142,7 +142,7 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
   tabindex="-1"
 >
   <h3
-    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1w1u7_63"
+    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1kl3y_65"
     id="_r_2i_"
   >
     Threads activity
@@ -163,7 +163,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
 <div
   aria-labelledby="radix-_r_2j_"
   aria-orientation="vertical"
-  class="_menu_1w1u7_8"
+  class="_menu_1kl3y_8"
   data-align="start"
   data-orientation="vertical"
   data-radix-menu-content=""
@@ -176,7 +176,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
   tabindex="-1"
 >
   <h3
-    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1w1u7_63"
+    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1kl3y_65"
     id="_r_2r_"
   >
     Threads activity
@@ -185,7 +185,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
     class="mx_ThreadsActivityCentre_rows"
   >
     <button
-      class="mx_ThreadsActivityCentreRow _item_lqfwq_8 _interactive_lqfwq_26"
+      class="mx_ThreadsActivityCentreRow _item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -193,10 +193,10 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="mx_DecoratedRoomAvatar _icon_lqfwq_50"
+        class="mx_DecoratedRoomAvatar _icon_bym9p_51"
       >
         <span
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
           data-color="5"
           data-testid="avatar-img"
           data-type="round"
@@ -207,13 +207,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         This is a third real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -233,7 +233,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       </div>
     </button>
     <button
-      class="mx_ThreadsActivityCentreRow _item_lqfwq_8 _interactive_lqfwq_26"
+      class="mx_ThreadsActivityCentreRow _item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -241,10 +241,10 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="mx_DecoratedRoomAvatar _icon_lqfwq_50"
+        class="mx_DecoratedRoomAvatar _icon_bym9p_51"
       >
         <span
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
           data-color="3"
           data-testid="avatar-img"
           data-type="round"
@@ -255,13 +255,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         This is a real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -281,7 +281,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       </div>
     </button>
     <button
-      class="mx_ThreadsActivityCentreRow _item_lqfwq_8 _interactive_lqfwq_26"
+      class="mx_ThreadsActivityCentreRow _item_bym9p_8 _interactive_bym9p_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -289,10 +289,10 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="mx_DecoratedRoomAvatar _icon_lqfwq_50"
+        class="mx_DecoratedRoomAvatar _icon_bym9p_51"
       >
         <span
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
           data-color="4"
           data-testid="avatar-img"
           data-type="round"
@@ -303,13 +303,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
       >
         This is a second real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_lqfwq_59"
+        class="_nav-hint_bym9p_60"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
diff --git a/apps/web/test/unit-tests/modules/__snapshots__/ModuleComponents-test.tsx.snap b/apps/web/test/unit-tests/modules/__snapshots__/ModuleComponents-test.tsx.snap
index aca4f2c294..1c0b53ce95 100644
--- a/apps/web/test/unit-tests/modules/__snapshots__/ModuleComponents-test.tsx.snap
+++ b/apps/web/test/unit-tests/modules/__snapshots__/ModuleComponents-test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Module Components should override the factory for a ModuleSpinner 1`] =
   >
     <svg
       aria-label="Loading…"
-      class="_icon_11k6c_18"
+      class="_icon_1855a_18"
       data-testid="spinner"
       fill="currentColor"
       height="1em"
diff --git a/apps/web/test/unit-tests/renderer/__snapshots__/pill-test.tsx.snap b/apps/web/test/unit-tests/renderer/__snapshots__/pill-test.tsx.snap
index a2f21d6ece..a1e65061f0 100644
--- a/apps/web/test/unit-tests/renderer/__snapshots__/pill-test.tsx.snap
+++ b/apps/web/test/unit-tests/renderer/__snapshots__/pill-test.tsx.snap
@@ -48,7 +48,7 @@ exports[`mention pills should pillify @room 1`] = `
         >
           <span
             aria-hidden="true"
-            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
             data-color="4"
             data-testid="avatar-img"
             data-type="round"
@@ -81,7 +81,7 @@ exports[`mention pills should pillify @room in an intentional mentions world 1`]
         >
           <span
             aria-hidden="true"
-            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
             data-color="4"
             data-testid="avatar-img"
             data-type="round"
diff --git a/apps/web/test/unit-tests/settings/SettingsStore-test.ts b/apps/web/test/unit-tests/settings/SettingsStore-test.ts
index 0987569bb9..2452456bf0 100644
--- a/apps/web/test/unit-tests/settings/SettingsStore-test.ts
+++ b/apps/web/test/unit-tests/settings/SettingsStore-test.ts
@@ -96,63 +96,18 @@ describe("SettingsStore", () => {
     describe("runMigrations", () => {
         let client: MatrixClient;
         let room: Room;
-        let localStorageSetItemSpy: jest.SpyInstance;
-        let localStorageSetPromise: Promise<void>;
 
         beforeEach(() => {
             client = stubClient();
             room = mkStubRoom("!room:example.org", "Room", client);
-            room.getAccountData = jest.fn().mockReturnValue({
-                getContent: jest.fn().mockReturnValue({
-                    urlPreviewsEnabled_e2ee: true,
-                }),
-            });
             client.getRooms = jest.fn().mockReturnValue([room]);
             client.getRoom = jest.fn().mockReturnValue(room);
-
-            localStorageSetPromise = new Promise((resolve) => {
-                localStorageSetItemSpy = jest
-                    .spyOn(localStorage.__proto__, "setItem")
-                    .mockImplementation(() => resolve());
-            });
         });
 
         afterEach(() => {
             jest.restoreAllMocks();
         });
 
-        it("migrates URL previews setting for e2ee rooms", async () => {
-            SettingsStore.runMigrations(false);
-            client.emit(ClientEvent.Sync, SyncState.Prepared, null);
-
-            expect(room.getAccountData).toHaveBeenCalled();
-
-            await localStorageSetPromise;
-
-            expect(localStorageSetItemSpy!).toHaveBeenCalledWith(
-                `mx_setting_urlPreviewsEnabled_e2ee_${room.roomId}`,
-                JSON.stringify({ value: true }),
-            );
-        });
-
-        it("does not migrate e2ee URL previews on a fresh login", async () => {
-            SettingsStore.runMigrations(true);
-            client.emit(ClientEvent.Sync, SyncState.Prepared, null);
-
-            expect(room.getAccountData).not.toHaveBeenCalled();
-        });
-
-        it("does not migrate if the device is flagged as migrated", async () => {
-            jest.spyOn(localStorage.__proto__, "getItem").mockImplementation((key: unknown): string | undefined => {
-                if (key === "url_previews_e2ee_migration_done") return JSON.stringify({ value: true });
-                return undefined;
-            });
-            SettingsStore.runMigrations(false);
-            client.emit(ClientEvent.Sync, SyncState.Prepared, null);
-
-            expect(room.getAccountData).not.toHaveBeenCalled();
-        });
-
         describe("Migrate media preview configuration", () => {
             beforeEach(() => {
                 MatrixClientBackedController.matrixClient = client;
diff --git a/apps/web/test/unit-tests/settings/controllers/RequiresSettingsController-test.ts b/apps/web/test/unit-tests/settings/controllers/RequiresSettingsController-test.ts
new file mode 100644
index 0000000000..dafd7c8896
--- /dev/null
+++ b/apps/web/test/unit-tests/settings/controllers/RequiresSettingsController-test.ts
@@ -0,0 +1,33 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import RequiresSettingsController from "../../../../src/settings/controllers/RequiresSettingsController";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
+import SettingsStore from "../../../../src/settings/SettingsStore";
+
+describe("RequiresSettingsController", () => {
+    afterEach(() => {
+        SettingsStore.reset();
+    });
+
+    it("forces a value if a setting is false", async () => {
+        const forcedValue = true;
+        await SettingsStore.setValue("useCompactLayout", null, SettingLevel.DEVICE, true);
+        await SettingsStore.setValue("useCustomFontSize", null, SettingLevel.DEVICE, false);
+        const controller = new RequiresSettingsController(["useCompactLayout", "useCustomFontSize"], forcedValue);
+        expect(controller.settingDisabled).toEqual(true);
+        expect(controller.getValueOverride()).toEqual(forcedValue);
+    });
+
+    it("does not force a value if all settings are true", async () => {
+        const controller = new RequiresSettingsController(["useCompactLayout", "useCustomFontSize"]);
+        await SettingsStore.setValue("useCompactLayout", null, SettingLevel.DEVICE, true);
+        await SettingsStore.setValue("useCustomFontSize", null, SettingLevel.DEVICE, true);
+        expect(controller.settingDisabled).toEqual(false);
+        expect(controller.getValueOverride()).toEqual(null);
+    });
+});
diff --git a/apps/web/test/unit-tests/stores/room-list-v3/RoomListStoreV3-test.ts b/apps/web/test/unit-tests/stores/room-list-v3/RoomListStoreV3-test.ts
index 1944efe7e6..aac4cdaa2f 100644
--- a/apps/web/test/unit-tests/stores/room-list-v3/RoomListStoreV3-test.ts
+++ b/apps/web/test/unit-tests/stores/room-list-v3/RoomListStoreV3-test.ts
@@ -14,9 +14,11 @@ import type { RoomNotificationState } from "../../../../src/stores/notifications
 import {
     CHATS_TAG,
     LISTS_UPDATE_EVENT,
+    SECTION_CREATED_EVENT,
     RoomListStoreV3Class,
     type Section,
 } from "../../../../src/stores/room-list-v3/RoomListStoreV3";
+import * as sectionModule from "../../../../src/stores/room-list-v3/section";
 import { AsyncStoreWithClient } from "../../../../src/stores/AsyncStoreWithClient";
 import { RecencySorter } from "../../../../src/stores/room-list-v3/skip-list/sorters/RecencySorter";
 import { mkEvent, mkMessage, mkSpace, mkStubRoom, stubClient, upsertRoomStateEvents } from "../../../test-utils";
@@ -830,6 +832,7 @@ describe("RoomListStoreV3", () => {
         function enableSections(): void {
             jest.spyOn(SettingsStore, "getValue").mockImplementation((setting: string) => {
                 if (setting === "feature_room_list_sections") return true;
+                if (setting === "RoomList.OrderedCustomSections") return [];
                 return false;
             });
         }
@@ -1007,6 +1010,83 @@ describe("RoomListStoreV3", () => {
             const favSection = findSection(sections, DefaultTagID.Favourite)!;
             expect(favSection.rooms).toContain(rooms[3]);
         });
+
+        describe("createSection", () => {
+            it("emits SECTION_CREATED_EVENT and LISTS_UPDATE_EVENT when section is created", async () => {
+                enableSections();
+                getClientAndRooms();
+                jest.spyOn(sectionModule, "createSection").mockResolvedValue("element.io.section.test-tag");
+
+                const store = new RoomListStoreV3Class(dispatcher);
+                await store.start();
+
+                const sectionCreatedListener = jest.fn();
+                const listsUpdateListener = jest.fn();
+                store.on(SECTION_CREATED_EVENT, sectionCreatedListener);
+                store.on(LISTS_UPDATE_EVENT, listsUpdateListener);
+
+                await store.createSection();
+
+                expect(sectionCreatedListener).toHaveBeenCalledWith("element.io.section.test-tag");
+            });
+
+            it("does not emit when section creation is cancelled", async () => {
+                enableSections();
+                getClientAndRooms();
+                jest.spyOn(sectionModule, "createSection").mockResolvedValue(undefined);
+
+                const store = new RoomListStoreV3Class(dispatcher);
+                await store.start();
+
+                const sectionCreatedListener = jest.fn();
+                store.on(SECTION_CREATED_EVENT, sectionCreatedListener);
+
+                await store.createSection();
+
+                expect(sectionCreatedListener).not.toHaveBeenCalled();
+            });
+        });
+
+        it("updates sections when RoomList.OrderedCustomSections setting changes", async () => {
+            enableSections();
+            const { rooms } = getClientAndRooms();
+
+            let settingsWatcher: (settingName: string) => void = () => {};
+            jest.spyOn(SettingsStore, "watchSetting").mockImplementation((settingName, _roomId, callback) => {
+                if (settingName === "RoomList.OrderedCustomSections") settingsWatcher = callback as () => void;
+                return "watcher-id";
+            });
+
+            const customTag = "element.io.section.custom";
+
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting: string) => {
+                if (setting === "feature_room_list_sections") return true;
+                if (setting === "RoomList.OrderedCustomSections") return [];
+                return false;
+            });
+
+            const store = new RoomListStoreV3Class(dispatcher);
+            await store.start();
+
+            // Initial state: 3 sections (Favourite, Chats, LowPriority)
+            expect(store.getSortedRoomsInActiveSpace().sections).toHaveLength(3);
+
+            // Mark a room with the custom tag and update the settings
+            rooms[0].tags = { [customTag]: { order: 0 } };
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting: string) => {
+                if (setting === "feature_room_list_sections") return true;
+                if (setting === "RoomList.OrderedCustomSections") return [customTag];
+                return false;
+            });
+
+            // Trigger the settings watcher
+            settingsWatcher("RoomList.OrderedCustomSections");
+
+            // Now there should be 4 sections (Favourite, custom, Chats, LowPriority)
+            expect(store.getSortedRoomsInActiveSpace().sections).toHaveLength(4);
+            const customSection = findSection(store.getSortedRoomsInActiveSpace().sections, customTag)!;
+            expect(customSection.rooms).toContain(rooms[0]);
+        });
     });
 
     describe("Muted rooms", () => {
diff --git a/apps/web/test/unit-tests/stores/room-list-v3/section-test.ts b/apps/web/test/unit-tests/stores/room-list-v3/section-test.ts
new file mode 100644
index 0000000000..2917784638
--- /dev/null
+++ b/apps/web/test/unit-tests/stores/room-list-v3/section-test.ts
@@ -0,0 +1,80 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import Modal from "../../../../src/Modal";
+import SettingsStore from "../../../../src/settings/SettingsStore";
+import { createSection } from "../../../../src/stores/room-list-v3/section";
+import { CreateSectionDialog } from "../../../../src/components/views/dialogs/CreateSectionDialog";
+
+describe("createSection", () => {
+    beforeEach(() => {
+        jest.spyOn(SettingsStore, "getValue").mockReturnValue(null);
+        jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it.each([
+        [false, "", undefined],
+        [true, "", undefined],
+    ])("returns undefined when shouldCreate=%s and name='%s'", async (shouldCreate, name, expected) => {
+        jest.spyOn(Modal, "createDialog").mockReturnValue({
+            finished: Promise.resolve([shouldCreate, name]),
+            close: jest.fn(),
+        } as any);
+
+        const result = await createSection();
+        expect(result).toBe(expected);
+    });
+
+    it("returns the new tag when section is created", async () => {
+        jest.spyOn(Modal, "createDialog").mockReturnValue({
+            finished: Promise.resolve([true, "My Section"]),
+            close: jest.fn(),
+        } as any);
+
+        const result = await createSection();
+        expect(result).toMatch(/^element\.io\.section\./);
+    });
+
+    it("opens the CreateSectionDialog", async () => {
+        const createDialogSpy = jest.spyOn(Modal, "createDialog").mockReturnValue({
+            finished: Promise.resolve([false, ""]),
+            close: jest.fn(),
+        } as any);
+
+        await createSection();
+        expect(createDialogSpy).toHaveBeenCalledWith(CreateSectionDialog);
+    });
+
+    it("saves section data and ordered sections at ACCOUNT level when confirmed", async () => {
+        const existingTag = "element.io.section.existing";
+        jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
+            if (setting === "RoomList.OrderedCustomSections") return [existingTag];
+            return null;
+        });
+        jest.spyOn(Modal, "createDialog").mockReturnValue({
+            finished: Promise.resolve([true, "My Section"]),
+            close: jest.fn(),
+        } as any);
+        const setValueSpy = jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
+
+        await createSection();
+
+        const customDataCall = setValueSpy.mock.calls.find(([name]) => name === "RoomList.CustomSectionData");
+        const savedSection = Object.values(customDataCall![3] as Record<string, { tag: string; name: string }>)[0];
+        expect(savedSection.name).toBe("My Section");
+        expect(savedSection.tag).toMatch(/^element\.io\.section\./);
+
+        const orderedCall = setValueSpy.mock.calls.find(([name]) => name === "RoomList.OrderedCustomSections");
+        const savedOrder = orderedCall![3] as string[];
+        expect(savedOrder[0]).toBe(existingTag);
+        expect(savedOrder[1]).toMatch(/^element\.io\.section\./);
+    });
+});
diff --git a/apps/web/test/unit-tests/stores/room-list-v3/skip-list/RoomSkipList-test.ts b/apps/web/test/unit-tests/stores/room-list-v3/skip-list/RoomSkipList-test.ts
index a742e56370..8640f3491e 100644
--- a/apps/web/test/unit-tests/stores/room-list-v3/skip-list/RoomSkipList-test.ts
+++ b/apps/web/test/unit-tests/stores/room-list-v3/skip-list/RoomSkipList-test.ts
@@ -18,6 +18,9 @@ import { getMockedRooms } from "./getMockedRooms";
 import SpaceStore from "../../../../../src/stores/spaces/SpaceStore";
 import { MetaSpace } from "../../../../../src/stores/spaces";
 import { RoomNotificationStateStore } from "../../../../../src/stores/notifications/RoomNotificationStateStore";
+import { FavouriteFilter } from "../../../../../src/stores/room-list-v3/skip-list/filters/FavouriteFilter";
+import { FilterEnum } from "../../../../../src/stores/room-list-v3/skip-list/filters";
+import { DefaultTagID } from "../../../../../src/stores/room-list-v3/skip-list/tag";
 
 describe("RoomSkipList", () => {
     function generateSkipList(roomCount?: number): {
@@ -99,6 +102,26 @@ describe("RoomSkipList", () => {
         expect(() => skipList.addNewRoom(room)).toThrow("Can't add room to skiplist");
     });
 
+    it("Filters are applied to existing nodes when useNewFilters is called", () => {
+        const { skipList, rooms } = generateSkipList(10);
+
+        // Mark some rooms as favourite
+        const favouriteRooms = [rooms[2], rooms[5], rooms[8]];
+        for (const room of favouriteRooms) {
+            room.tags = { [DefaultTagID.Favourite]: { order: 0 } };
+        }
+
+        // No filters yet — all rooms are in the list
+        expect(skipList.size).toEqual(10);
+
+        // Apply the favourite filter
+        skipList.useNewFilters([new FavouriteFilter()]);
+
+        // Only favourite rooms should be returned when filtering by favourite
+        const filteredRooms = Array.from(skipList.getRoomsInActiveSpace([FilterEnum.FavouriteFilter]));
+        expect(filteredRooms).toHaveLength(favouriteRooms.length);
+    });
+
     it("Re-sort works when sorter is swapped", () => {
         const { skipList, rooms, sorter } = generateSkipList();
         const sortedByRecency = [...rooms].sort((a, b) => sorter.comparator(a, b));
diff --git a/apps/web/test/unit-tests/utils/SessionLock-test.ts b/apps/web/test/unit-tests/utils/SessionLock-test.ts
index 67202c7193..b0125debc5 100644
--- a/apps/web/test/unit-tests/utils/SessionLock-test.ts
+++ b/apps/web/test/unit-tests/utils/SessionLock-test.ts
@@ -253,8 +253,6 @@ describe("SessionLock", () => {
 
         // import the dependencies of getSessionLock into the new context
         // eslint-disable-next-line @typescript-eslint/no-require-imports
-        window2._uuid = require("uuid");
-        // eslint-disable-next-line @typescript-eslint/no-require-imports
         window2._logger = require("matrix-js-sdk/src/logger");
         window2.SESSION_LOCK_CONSTANTS = SESSION_LOCK_CONSTANTS;
 
diff --git a/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap b/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
index 53c0e2b260..dc60d74224 100644
--- a/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
+++ b/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
@@ -18,7 +18,7 @@ exports[`HTMLExport should export 1`] = `
                         <div class="mx_MatrixChat">
                         <main class="mx_RoomView">
                             <div class="mx_RoomHeader light-panel">
-                                <span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size:32px">!</span>
+                                <span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size:32px">!</span>
                                 <div class="mx_RoomHeader_infoWrapper">
                                     <div
                                         dir="auto"
@@ -51,13 +51,13 @@ exports[`HTMLExport should export 1`] = `
                                         role="list"
                                     >
                                     <div class="mx_NewRoomIntro">
-                                            <span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size:32px">!</span>
+                                            <span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size:32px">!</span>
                                             <h2> !myroom:example.org </h2>
                                             <p>  created this room. <br/><br/> <p><span>This is the start of export of <strong>!myroom:example.org</strong>. Exported by <a href="https://matrix.to/#/%40userId%3Amatrix.org" target="_blank" rel="noopener noreferrer"><strong>@userId:matrix.org</strong></a> at 11/17/2022.</span></p> </p>
                                             <br/>
                                             <p>  </p>
                                         </div>
-                                    <li><div role="separator" aria-label="Thu, Jan 1, 1970" class="_flex_4dswl_9 mx_TimelineSeparator _timelineSeparator_yq5ye_8" 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"><hr role="none"/><div class="_flex_4dswl_9 _content_u6fft_8" 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 aria-hidden="true" class="_typography_6v6n8_153 _font-heading-lg-regular_6v6n8_121">Thu, Jan 1, 1970</h2></div><hr role="none"/></div></li><div class="mx_Export_EventWrapper" id="49"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="49" data-layout="group" data-self="false" data-event-id="49" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user49:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user49:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="1" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/49" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #49</div></div></div></li></div><div class="mx_Export_EventWrapper" id="48"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="48" data-layout="group" data-self="false" data-event-id="48" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user48:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user48:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="2" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/48" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #48</div></div></div></li></div><div class="mx_Export_EventWrapper" id="47"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="47" data-layout="group" data-self="false" data-event-id="47" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user47:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user47:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="3" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/47" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #47</div></div></div></li></div><div class="mx_Export_EventWrapper" id="46"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="46" data-layout="group" data-self="false" data-event-id="46" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user46:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user46:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="4" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/46" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #46</div></div></div></li></div><div class="mx_Export_EventWrapper" id="45"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="45" data-layout="group" data-self="false" data-event-id="45" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user45:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user45:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="5" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/45" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #45</div></div></div></li></div><div class="mx_Export_EventWrapper" id="44"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="44" data-layout="group" data-self="false" data-event-id="44" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user44:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user44:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="6" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/44" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #44</div></div></div></li></div><div class="mx_Export_EventWrapper" id="43"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="43" data-layout="group" data-self="false" data-event-id="43" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user43:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user43:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="7" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/43" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #43</div></div></div></li></div><div class="mx_Export_EventWrapper" id="42"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="42" data-layout="group" data-self="false" data-event-id="42" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user42:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user42:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="8" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/42" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #42</div></div></div></li></div><div class="mx_Export_EventWrapper" id="41"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="41" data-layout="group" data-self="false" data-event-id="41" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user41:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user41:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="9" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/41" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #41</div></div></div></li></div><div class="mx_Export_EventWrapper" id="40"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="40" data-layout="group" data-self="false" data-event-id="40" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user40:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user40:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="10" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/40" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #40</div></div></div></li></div><div class="mx_Export_EventWrapper" id="39"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="39" data-layout="group" data-self="false" data-event-id="39" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user39:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user39:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="11" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/39" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #39</div></div></div></li></div><div class="mx_Export_EventWrapper" id="38"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="38" data-layout="group" data-self="false" data-event-id="38" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user38:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user38:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="12" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/38" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #38</div></div></div></li></div><div class="mx_Export_EventWrapper" id="37"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="37" data-layout="group" data-self="false" data-event-id="37" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user37:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user37:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="13" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/37" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #37</div></div></div></li></div><div class="mx_Export_EventWrapper" id="36"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="36" data-layout="group" data-self="false" data-event-id="36" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user36:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user36:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="14" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/36" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #36</div></div></div></li></div><div class="mx_Export_EventWrapper" id="35"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="35" data-layout="group" data-self="false" data-event-id="35" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user35:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user35:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="15" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/35" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #35</div></div></div></li></div><div class="mx_Export_EventWrapper" id="34"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="34" data-layout="group" data-self="false" data-event-id="34" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user34:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user34:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="16" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/34" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #34</div></div></div></li></div><div class="mx_Export_EventWrapper" id="33"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="33" data-layout="group" data-self="false" data-event-id="33" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user33:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user33:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="17" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/33" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #33</div></div></div></li></div><div class="mx_Export_EventWrapper" id="32"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="32" data-layout="group" data-self="false" data-event-id="32" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user32:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user32:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="18" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/32" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #32</div></div></div></li></div><div class="mx_Export_EventWrapper" id="31"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="31" data-layout="group" data-self="false" data-event-id="31" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user31:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user31:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="19" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/31" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #31</div></div></div></li></div><div class="mx_Export_EventWrapper" id="30"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="30" data-layout="group" data-self="false" data-event-id="30" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user30:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user30:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="20" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/30" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #30</div></div></div></li></div><div class="mx_Export_EventWrapper" id="29"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="29" data-layout="group" data-self="false" data-event-id="29" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user29:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user29:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="21" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/29" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #29</div></div></div></li></div><div class="mx_Export_EventWrapper" id="28"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="28" data-layout="group" data-self="false" data-event-id="28" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user28:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user28:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="22" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/28" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #28</div></div></div></li></div><div class="mx_Export_EventWrapper" id="27"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="27" data-layout="group" data-self="false" data-event-id="27" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user27:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user27:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="23" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/27" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #27</div></div></div></li></div><div class="mx_Export_EventWrapper" id="26"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="26" data-layout="group" data-self="false" data-event-id="26" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user26:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user26:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="24" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/26" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #26</div></div></div></li></div><div class="mx_Export_EventWrapper" id="25"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="25" data-layout="group" data-self="false" data-event-id="25" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user25:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user25:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="25" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/25" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #25</div></div></div></li></div><div class="mx_Export_EventWrapper" id="24"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="24" data-layout="group" data-self="false" data-event-id="24" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user24:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user24:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="26" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/24" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #24</div></div></div></li></div><div class="mx_Export_EventWrapper" id="23"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="23" data-layout="group" data-self="false" data-event-id="23" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user23:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user23:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="27" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/23" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #23</div></div></div></li></div><div class="mx_Export_EventWrapper" id="22"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="22" data-layout="group" data-self="false" data-event-id="22" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user22:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user22:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="28" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/22" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #22</div></div></div></li></div><div class="mx_Export_EventWrapper" id="21"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="21" data-layout="group" data-self="false" data-event-id="21" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user21:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user21:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="29" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/21" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #21</div></div></div></li></div><div class="mx_Export_EventWrapper" id="20"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="20" data-layout="group" data-self="false" data-event-id="20" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user20:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user20:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="30" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/20" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #20</div></div></div></li></div><div class="mx_Export_EventWrapper" id="19"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="19" data-layout="group" data-self="false" data-event-id="19" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user19:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user19:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="31" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/19" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #19</div></div></div></li></div><div class="mx_Export_EventWrapper" id="18"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="18" data-layout="group" data-self="false" data-event-id="18" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user18:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user18:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="32" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/18" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #18</div></div></div></li></div><div class="mx_Export_EventWrapper" id="17"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="17" data-layout="group" data-self="false" data-event-id="17" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user17:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user17:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="33" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/17" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #17</div></div></div></li></div><div class="mx_Export_EventWrapper" id="16"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="16" data-layout="group" data-self="false" data-event-id="16" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user16:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user16:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="34" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/16" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #16</div></div></div></li></div><div class="mx_Export_EventWrapper" id="15"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="15" data-layout="group" data-self="false" data-event-id="15" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user15:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user15:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="35" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/15" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #15</div></div></div></li></div><div class="mx_Export_EventWrapper" id="14"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="14" data-layout="group" data-self="false" data-event-id="14" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user14:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user14:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="36" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/14" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #14</div></div></div></li></div><div class="mx_Export_EventWrapper" id="13"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="13" data-layout="group" data-self="false" data-event-id="13" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user13:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user13:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="37" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/13" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #13</div></div></div></li></div><div class="mx_Export_EventWrapper" id="12"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="12" data-layout="group" data-self="false" data-event-id="12" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user12:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user12:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="38" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/12" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #12</div></div></div></li></div><div class="mx_Export_EventWrapper" id="11"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="11" data-layout="group" data-self="false" data-event-id="11" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user11:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user11:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="39" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/11" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #11</div></div></div></li></div><div class="mx_Export_EventWrapper" id="10"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="10" data-layout="group" data-self="false" data-event-id="10" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user10:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user10:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="40" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/10" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #10</div></div></div></li></div><div class="mx_Export_EventWrapper" id="9"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="9" data-layout="group" data-self="false" data-event-id="9" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user9:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user9:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="41" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/9" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #9</div></div></div></li></div><div class="mx_Export_EventWrapper" id="8"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="8" data-layout="group" data-self="false" data-event-id="8" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user8:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user8:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="42" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/8" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #8</div></div></div></li></div><div class="mx_Export_EventWrapper" id="7"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="7" data-layout="group" data-self="false" data-event-id="7" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user7:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user7:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="43" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/7" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #7</div></div></div></li></div><div class="mx_Export_EventWrapper" id="6"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="6" data-layout="group" data-self="false" data-event-id="6" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user6:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user6:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="44" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/6" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #6</div></div></div></li></div><div class="mx_Export_EventWrapper" id="5"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="5" data-layout="group" data-self="false" data-event-id="5" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user5:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user5:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="45" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/5" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #5</div></div></div></li></div><div class="mx_Export_EventWrapper" id="4"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="4" data-layout="group" data-self="false" data-event-id="4" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user4:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user4:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="46" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/4" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #4</div></div></div></li></div><div class="mx_Export_EventWrapper" id="3"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="3" data-layout="group" data-self="false" data-event-id="3" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user3:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user3:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="47" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/3" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #3</div></div></div></li></div><div class="mx_Export_EventWrapper" id="2"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="2" data-layout="group" data-self="false" data-event-id="2" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user2:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user2:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="48" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/2" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #2</div></div></div></li></div><div class="mx_Export_EventWrapper" id="1"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="1" data-layout="group" data-self="false" data-event-id="1" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user1:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user1:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="49" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/1" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #1</div></div></div></li></div><div class="mx_Export_EventWrapper" id="0"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="0" data-layout="group" data-self="false" data-event-id="0" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user0:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user0:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="50" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/0" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #0</div></div></div><div class="mx_EventTile_footer"><div class="mx_ReactionsRow _reactionsRow_1lcz2_8" role="toolbar" aria-label="Reactions"><button type="button" class="_reactionsRowButton_5v4c1_8 _reactionsRowButtonDisabled_5v4c1_26" tabindex="0" aria-label="@user0:example.com reacted with 🙃" aria-disabled="true"><span class="_reactionsRowButtonContent_5v4c1_30" aria-hidden="true">🙃</span><span class="_reactionsRowButtonCount_5v4c1_38" aria-hidden="true">1</span></button></div></div></li></div>
+                                    <li><div role="separator" aria-label="Thu, Jan 1, 1970" class="_flex_4dswl_9 mx_TimelineSeparator _timelineSeparator_yq5ye_8" 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"><hr role="none"/><div class="_flex_4dswl_9 _content_u6fft_8" 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 aria-hidden="true" class="_typography_6v6n8_153 _font-heading-lg-regular_6v6n8_121">Thu, Jan 1, 1970</h2></div><hr role="none"/></div></li><div class="mx_Export_EventWrapper" id="49"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="49" data-layout="group" data-self="false" data-event-id="49" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user49:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user49:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="1" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/49" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #49</div></div></div></li></div><div class="mx_Export_EventWrapper" id="48"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="48" data-layout="group" data-self="false" data-event-id="48" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user48:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user48:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="2" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/48" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #48</div></div></div></li></div><div class="mx_Export_EventWrapper" id="47"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="47" data-layout="group" data-self="false" data-event-id="47" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user47:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user47:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="3" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/47" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #47</div></div></div></li></div><div class="mx_Export_EventWrapper" id="46"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="46" data-layout="group" data-self="false" data-event-id="46" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user46:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user46:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="4" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/46" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #46</div></div></div></li></div><div class="mx_Export_EventWrapper" id="45"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="45" data-layout="group" data-self="false" data-event-id="45" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user45:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user45:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="5" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/45" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #45</div></div></div></li></div><div class="mx_Export_EventWrapper" id="44"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="44" data-layout="group" data-self="false" data-event-id="44" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user44:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user44:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="6" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/44" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #44</div></div></div></li></div><div class="mx_Export_EventWrapper" id="43"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="43" data-layout="group" data-self="false" data-event-id="43" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user43:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user43:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="7" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/43" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #43</div></div></div></li></div><div class="mx_Export_EventWrapper" id="42"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="42" data-layout="group" data-self="false" data-event-id="42" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user42:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user42:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="8" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/42" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #42</div></div></div></li></div><div class="mx_Export_EventWrapper" id="41"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="41" data-layout="group" data-self="false" data-event-id="41" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user41:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user41:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="9" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/41" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #41</div></div></div></li></div><div class="mx_Export_EventWrapper" id="40"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="40" data-layout="group" data-self="false" data-event-id="40" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user40:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user40:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="10" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/40" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #40</div></div></div></li></div><div class="mx_Export_EventWrapper" id="39"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="39" data-layout="group" data-self="false" data-event-id="39" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user39:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user39:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="11" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/39" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #39</div></div></div></li></div><div class="mx_Export_EventWrapper" id="38"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="38" data-layout="group" data-self="false" data-event-id="38" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user38:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user38:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="12" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/38" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #38</div></div></div></li></div><div class="mx_Export_EventWrapper" id="37"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="37" data-layout="group" data-self="false" data-event-id="37" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user37:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user37:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="13" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/37" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #37</div></div></div></li></div><div class="mx_Export_EventWrapper" id="36"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="36" data-layout="group" data-self="false" data-event-id="36" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user36:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user36:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="14" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/36" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #36</div></div></div></li></div><div class="mx_Export_EventWrapper" id="35"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="35" data-layout="group" data-self="false" data-event-id="35" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user35:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user35:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="15" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/35" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #35</div></div></div></li></div><div class="mx_Export_EventWrapper" id="34"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="34" data-layout="group" data-self="false" data-event-id="34" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user34:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user34:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="16" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/34" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #34</div></div></div></li></div><div class="mx_Export_EventWrapper" id="33"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="33" data-layout="group" data-self="false" data-event-id="33" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user33:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user33:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="17" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/33" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #33</div></div></div></li></div><div class="mx_Export_EventWrapper" id="32"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="32" data-layout="group" data-self="false" data-event-id="32" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user32:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user32:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="18" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/32" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #32</div></div></div></li></div><div class="mx_Export_EventWrapper" id="31"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="31" data-layout="group" data-self="false" data-event-id="31" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user31:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user31:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="19" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/31" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #31</div></div></div></li></div><div class="mx_Export_EventWrapper" id="30"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="30" data-layout="group" data-self="false" data-event-id="30" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user30:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user30:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="20" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/30" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #30</div></div></div></li></div><div class="mx_Export_EventWrapper" id="29"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="29" data-layout="group" data-self="false" data-event-id="29" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user29:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user29:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="21" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/29" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #29</div></div></div></li></div><div class="mx_Export_EventWrapper" id="28"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="28" data-layout="group" data-self="false" data-event-id="28" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user28:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user28:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="22" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/28" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #28</div></div></div></li></div><div class="mx_Export_EventWrapper" id="27"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="27" data-layout="group" data-self="false" data-event-id="27" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user27:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user27:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="23" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/27" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #27</div></div></div></li></div><div class="mx_Export_EventWrapper" id="26"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="26" data-layout="group" data-self="false" data-event-id="26" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user26:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user26:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="24" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/26" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #26</div></div></div></li></div><div class="mx_Export_EventWrapper" id="25"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="25" data-layout="group" data-self="false" data-event-id="25" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user25:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user25:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="25" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/25" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #25</div></div></div></li></div><div class="mx_Export_EventWrapper" id="24"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="24" data-layout="group" data-self="false" data-event-id="24" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user24:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user24:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="26" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/24" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #24</div></div></div></li></div><div class="mx_Export_EventWrapper" id="23"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="23" data-layout="group" data-self="false" data-event-id="23" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user23:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user23:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="27" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/23" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #23</div></div></div></li></div><div class="mx_Export_EventWrapper" id="22"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="22" data-layout="group" data-self="false" data-event-id="22" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user22:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user22:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="28" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/22" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #22</div></div></div></li></div><div class="mx_Export_EventWrapper" id="21"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="21" data-layout="group" data-self="false" data-event-id="21" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user21:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user21:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="29" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/21" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #21</div></div></div></li></div><div class="mx_Export_EventWrapper" id="20"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="20" data-layout="group" data-self="false" data-event-id="20" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user20:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user20:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="30" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/20" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #20</div></div></div></li></div><div class="mx_Export_EventWrapper" id="19"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="19" data-layout="group" data-self="false" data-event-id="19" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user19:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user19:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="31" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/19" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #19</div></div></div></li></div><div class="mx_Export_EventWrapper" id="18"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="18" data-layout="group" data-self="false" data-event-id="18" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user18:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user18:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="32" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/18" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #18</div></div></div></li></div><div class="mx_Export_EventWrapper" id="17"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="17" data-layout="group" data-self="false" data-event-id="17" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user17:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user17:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="33" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/17" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #17</div></div></div></li></div><div class="mx_Export_EventWrapper" id="16"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="16" data-layout="group" data-self="false" data-event-id="16" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user16:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user16:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="34" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/16" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #16</div></div></div></li></div><div class="mx_Export_EventWrapper" id="15"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="15" data-layout="group" data-self="false" data-event-id="15" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user15:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user15:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="35" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/15" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #15</div></div></div></li></div><div class="mx_Export_EventWrapper" id="14"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="14" data-layout="group" data-self="false" data-event-id="14" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user14:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user14:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="36" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/14" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #14</div></div></div></li></div><div class="mx_Export_EventWrapper" id="13"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="13" data-layout="group" data-self="false" data-event-id="13" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user13:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user13:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="37" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/13" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #13</div></div></div></li></div><div class="mx_Export_EventWrapper" id="12"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="12" data-layout="group" data-self="false" data-event-id="12" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user12:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user12:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="38" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/12" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #12</div></div></div></li></div><div class="mx_Export_EventWrapper" id="11"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="11" data-layout="group" data-self="false" data-event-id="11" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user11:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user11:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="39" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/11" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #11</div></div></div></li></div><div class="mx_Export_EventWrapper" id="10"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="10" data-layout="group" data-self="false" data-event-id="10" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user10:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user10:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="40" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/10" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #10</div></div></div></li></div><div class="mx_Export_EventWrapper" id="9"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="9" data-layout="group" data-self="false" data-event-id="9" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user9:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user9:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="41" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/9" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #9</div></div></div></li></div><div class="mx_Export_EventWrapper" id="8"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="8" data-layout="group" data-self="false" data-event-id="8" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user8:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user8:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="42" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/8" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #8</div></div></div></li></div><div class="mx_Export_EventWrapper" id="7"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="7" data-layout="group" data-self="false" data-event-id="7" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user7:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user7:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="43" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/7" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #7</div></div></div></li></div><div class="mx_Export_EventWrapper" id="6"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="6" data-layout="group" data-self="false" data-event-id="6" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user6:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user6:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="44" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/6" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #6</div></div></div></li></div><div class="mx_Export_EventWrapper" id="5"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="5" data-layout="group" data-self="false" data-event-id="5" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user5:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user5:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="45" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/5" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #5</div></div></div></li></div><div class="mx_Export_EventWrapper" id="4"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="4" data-layout="group" data-self="false" data-event-id="4" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user4:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user4:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="46" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/4" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #4</div></div></div></li></div><div class="mx_Export_EventWrapper" id="3"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="3" data-layout="group" data-self="false" data-event-id="3" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user3:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user3:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="47" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/3" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #3</div></div></div></li></div><div class="mx_Export_EventWrapper" id="2"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="2" data-layout="group" data-self="false" data-event-id="2" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user2:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user2:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="48" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/2" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #2</div></div></div></li></div><div class="mx_Export_EventWrapper" id="1"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="1" data-layout="group" data-self="false" data-event-id="1" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user1:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user1:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="49" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/1" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #1</div></div></div></li></div><div class="mx_Export_EventWrapper" id="0"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="0" data-layout="group" data-self="false" data-event-id="0" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName" dir="auto">@user0:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user0:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="50" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/0" class="mx_MessageTimestamp _content_kc5mt_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #0</div></div></div><div class="mx_EventTile_footer"><div class="mx_ReactionsRow _reactionsRow_1lcz2_8" role="toolbar" aria-label="Reactions"><button type="button" class="_reactionsRowButton_5v4c1_8 _reactionsRowButtonDisabled_5v4c1_26" tabindex="0" aria-label="@user0:example.com reacted with 🙃" aria-disabled="true"><span class="_reactionsRowButtonContent_5v4c1_30" aria-hidden="true">🙃</span><span class="_reactionsRowButtonCount_5v4c1_38" aria-hidden="true">1</span></button></div></div></li></div>
                                     </ol>
                                     </div>
                                 </div>
diff --git a/apps/web/test/unit-tests/utils/form-test.ts b/apps/web/test/unit-tests/utils/form-test.ts
new file mode 100644
index 0000000000..d1036e146f
--- /dev/null
+++ b/apps/web/test/unit-tests/utils/form-test.ts
@@ -0,0 +1,18 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { onSubmitPreventDefault } from "../../../src/utils/form.ts";
+
+describe("onSubmitPreventDefault", () => {
+    it("should preventDefault", () => {
+        const event = new SubmitEvent("submit");
+        const spy = jest.spyOn(event, "preventDefault");
+
+        onSubmitPreventDefault(event);
+        expect(spy).toHaveBeenCalled();
+    });
+});
diff --git a/apps/web/test/unit-tests/utils/leave-behaviour-test.ts b/apps/web/test/unit-tests/utils/leave-behaviour-test.ts
index 9da796a3a5..a6da3a4083 100644
--- a/apps/web/test/unit-tests/utils/leave-behaviour-test.ts
+++ b/apps/web/test/unit-tests/utils/leave-behaviour-test.ts
@@ -22,6 +22,9 @@ import SpaceStore from "../../../src/stores/spaces/SpaceStore";
 import { MetaSpace } from "../../../src/stores/spaces";
 import { type ActionPayload } from "../../../src/dispatcher/payloads";
 import SettingsStore from "../../../src/settings/SettingsStore";
+import { CallStore } from "../../../src/stores/CallStore";
+import { type Call } from "../../../src/models/Call";
+import LegacyCallHandler from "../../../src/LegacyCallHandler";
 
 describe("leaveRoomBehaviour", () => {
     SdkContextClass.instance.constructEagerStores(); // Initialize RoomViewStore
@@ -76,6 +79,28 @@ describe("leaveRoomBehaviour", () => {
         defaultDispatcher.unregister(dispatcherRef);
     };
 
+    it("hangs up legacy calls when leaving a room", async () => {
+        const hangupSpy = jest.spyOn(LegacyCallHandler.instance, "hangupOrReject").mockImplementation(() => {});
+
+        viewRoom(room);
+        await leaveRoomBehaviour(client, room.roomId);
+
+        expect(hangupSpy).toHaveBeenCalledWith(room.roomId);
+    });
+
+    it("disconnects widget-based calls when leaving a room", async () => {
+        const mockCall = {
+            disconnect: jest.fn().mockResolvedValue(undefined),
+        } as unknown as Call;
+
+        jest.spyOn(CallStore.instance, "getActiveCall").mockReturnValue(mockCall);
+
+        viewRoom(room);
+        await leaveRoomBehaviour(client, room.roomId);
+
+        expect(mockCall.disconnect).toHaveBeenCalled();
+    });
+
     it("returns to the home page after leaving a room outside of a space that was being viewed", async () => {
         viewRoom(room);
 
diff --git a/apps/web/test/unit-tests/utils/oidc/authorize-test.ts b/apps/web/test/unit-tests/utils/oidc/authorize-test.ts
index d23157e097..b7bd2bfd9f 100644
--- a/apps/web/test/unit-tests/utils/oidc/authorize-test.ts
+++ b/apps/web/test/unit-tests/utils/oidc/authorize-test.ts
@@ -90,12 +90,24 @@ describe("OIDC authorization", () => {
             expect(authUrl.searchParams.has("nonce")).toBeTruthy();
             expect(authUrl.searchParams.has("code_challenge")).toBeTruthy();
         });
+
+        it("should prefer response_mode fragment if supported", async () => {
+            await startOidcLogin(
+                { ...delegatedAuthConfig, response_modes_supported: ["query", "fragment"] },
+                clientId,
+                homeserverUrl,
+            );
+
+            const authUrl = new URL(window.location.href);
+
+            expect(authUrl.searchParams.get("response_mode")).toEqual("fragment");
+        });
     });
 
     describe("completeOidcLogin()", () => {
         const state = "test-state-444";
         const code = "test-code-777";
-        const queryDict = {
+        const params = {
             code,
             state: state,
         };
@@ -131,19 +143,19 @@ describe("OIDC authorization", () => {
         });
 
         it("should throw when query params do not include state and code", async () => {
-            await expect(async () => await completeOidcLogin({})).rejects.toThrow(
+            await expect(async () => await completeOidcLogin({}, "query")).rejects.toThrow(
                 OidcClientError.InvalidQueryParameters,
             );
         });
 
         it("should make request complete authorization code grant", async () => {
-            await completeOidcLogin(queryDict);
+            await completeOidcLogin(params, "fragment");
 
-            expect(completeAuthorizationCodeGrant).toHaveBeenCalledWith(code, state);
+            expect(completeAuthorizationCodeGrant).toHaveBeenCalledWith(code, state, "fragment");
         });
 
         it("should return accessToken, configured homeserver and identityServer", async () => {
-            const result = await completeOidcLogin(queryDict);
+            const result = await completeOidcLogin(params, "query");
 
             expect(result).toEqual({
                 accessToken: tokenResponse.access_token,
diff --git a/apps/web/test/unit-tests/utils/room/tagRoom-test.ts b/apps/web/test/unit-tests/utils/room/tagRoom-test.ts
index 20e5931a87..cec9b805a2 100644
--- a/apps/web/test/unit-tests/utils/room/tagRoom-test.ts
+++ b/apps/web/test/unit-tests/utils/room/tagRoom-test.ts
@@ -11,6 +11,7 @@ import { Room } from "matrix-js-sdk/src/matrix";
 import RoomListActions from "../../../../src/actions/RoomListActions";
 import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
 import { DefaultTagID, type TagID } from "../../../../src/stores/room-list-v3/skip-list/tag";
+import { CUSTOM_SECTION_TAG_PREFIX } from "../../../../src/stores/room-list-v3/section";
 import { tagRoom } from "../../../../src/utils/room/tagRoom";
 import { getMockClientWithEventEmitter } from "../../../test-utils";
 import * as getTagsForRoomUtils from "../../../../src/utils/room/getTagsForRoom";
@@ -18,6 +19,7 @@ import * as getTagsForRoomUtils from "../../../../src/utils/room/getTagsForRoom"
 describe("tagRoom()", () => {
     const userId = "@alice:server.org";
     const roomId = "!room:server.org";
+    const customTag = `${CUSTOM_SECTION_TAG_PREFIX}my-section`;
 
     const makeRoom = (tags: TagID[] = []): Room => {
         const client = getMockClientWithEventEmitter({
@@ -59,7 +61,7 @@ describe("tagRoom()", () => {
             expect(RoomListActions.tagRoom).toHaveBeenCalledWith(
                 room.client,
                 room,
-                DefaultTagID.LowPriority, // remove
+                null, // remove
                 DefaultTagID.Favourite, // add
             );
         });
@@ -73,10 +75,24 @@ describe("tagRoom()", () => {
             expect(RoomListActions.tagRoom).toHaveBeenCalledWith(
                 room.client,
                 room,
-                DefaultTagID.Favourite, // remove
+                null, // remove
                 DefaultTagID.LowPriority, // add
             );
         });
+
+        it("should tag a room with a custom section", () => {
+            const room = makeRoom();
+
+            tagRoom(room, customTag);
+
+            expect(defaultDispatcher.dispatch).toHaveBeenCalled();
+            expect(RoomListActions.tagRoom).toHaveBeenCalledWith(
+                room.client,
+                room,
+                null, // remove
+                customTag, // add
+            );
+        });
     });
 
     describe("when a room is tagged as favourite", () => {
@@ -137,4 +153,26 @@ describe("tagRoom()", () => {
             );
         });
     });
+
+    describe("when a room is tagged with a custom section", () => {
+        const otherCustomTag = `${CUSTOM_SECTION_TAG_PREFIX}other-section`;
+
+        it.each([
+            { label: "untag the custom section", applyTag: customTag, expectedAdd: null },
+            { label: "replace with favourite", applyTag: DefaultTagID.Favourite, expectedAdd: DefaultTagID.Favourite },
+            { label: "replace with another custom section", applyTag: otherCustomTag, expectedAdd: otherCustomTag },
+        ])("should $label", ({ applyTag, expectedAdd }) => {
+            const room = makeRoom([customTag]);
+
+            tagRoom(room, applyTag);
+
+            expect(defaultDispatcher.dispatch).toHaveBeenCalled();
+            expect(RoomListActions.tagRoom).toHaveBeenCalledWith(
+                room.client,
+                room,
+                customTag, // remove
+                expectedAdd, // add
+            );
+        });
+    });
 });
diff --git a/apps/web/test/unit-tests/vector/__snapshots__/init-test.ts.snap b/apps/web/test/unit-tests/vector/__snapshots__/init-test.ts.snap
index 70a4d1b520..c774f572d5 100644
--- a/apps/web/test/unit-tests/vector/__snapshots__/init-test.ts.snap
+++ b/apps/web/test/unit-tests/vector/__snapshots__/init-test.ts.snap
@@ -141,7 +141,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="_separator_cqpyv_8"
+      class="_separator_13qwf_8"
       data-kind="primary"
       data-orientation="horizontal"
       role="separator"
diff --git a/apps/web/test/unit-tests/vector/app-test.ts b/apps/web/test/unit-tests/vector/app-test.ts
index c2e9eb1cff..fa95a0053b 100644
--- a/apps/web/test/unit-tests/vector/app-test.ts
+++ b/apps/web/test/unit-tests/vector/app-test.ts
@@ -76,7 +76,7 @@ describe("sso_redirect_options", () => {
         });
 
         it("should redirect for native OIDC", async () => {
-            const authConfig = makeDelegatedAuthConfig(issuer);
+            const authConfig = { ...makeDelegatedAuthConfig(issuer), response_modes_supported: ["query", "fragment"] };
             fetchMock.get("https://synapse/_matrix/client/v1/auth_metadata", authConfig);
             fetchMock.get(`${authConfig.issuer}.well-known/openid-configuration`, authConfig);
             fetchMock.get(authConfig.jwks_uri!, { keys: [] });
@@ -85,7 +85,7 @@ describe("sso_redirect_options", () => {
 
             await loadApp({}, jest.fn());
             expect(startOidcLoginSpy).toHaveBeenCalledWith(
-                "https://auth.org/auth?client_id=12345&redirect_uri=https%3A%2F%2Fapp.element.io%2F%3Fno_universal_links%3Dtrue&response_type=code&scope=openid+urn%3Amatrix%3Aorg.matrix.msc2967.client%3Aapi%3A*+urn%3Amatrix%3Aorg.matrix.msc2967.client%3Adevice%3AwKpa6hpi3Y&nonce=38QgU2Pomx&state=10000000100040008000100000000000&code_challenge=awE81eIsGff70JahvrTqWRbGKLI10ooyo_Xm1sxuZvU&code_challenge_method=S256&response_mode=query",
+                "https://auth.org/auth?client_id=12345&redirect_uri=https%3A%2F%2Fapp.element.io%2F%3Fno_universal_links%3Dtrue&response_type=code&scope=openid+urn%3Amatrix%3Aorg.matrix.msc2967.client%3Aapi%3A*+urn%3Amatrix%3Aorg.matrix.msc2967.client%3Adevice%3AwKpa6hpi3Y&nonce=38QgU2Pomx&state=10000000100040008000100000000000&code_challenge=awE81eIsGff70JahvrTqWRbGKLI10ooyo_Xm1sxuZvU&code_challenge_method=S256&response_mode=fragment",
             );
         });
     });
diff --git a/apps/web/test/unit-tests/vector/init-test.ts b/apps/web/test/unit-tests/vector/init-test.ts
index 4c9c2a529c..9c39ba652a 100644
--- a/apps/web/test/unit-tests/vector/init-test.ts
+++ b/apps/web/test/unit-tests/vector/init-test.ts
@@ -1,6 +1,6 @@
 /**
  * @jest-environment jest-fixed-jsdom
- * @jest-environment-options {"url": "https://app.element.io/?loginToken=123&state=abc&code=xyz&no_universal_links&something_else=value"}
+ * @jest-environment-options {"url": "https://app.element.io/?loginToken=123&no_universal_links&something_else=value#/home?state=abc&code=xyz"}
  */
 
 /*
@@ -16,6 +16,7 @@ import { waitFor, screen } from "jest-matrix-react";
 import { loadApp, showError, showIncompatibleBrowser } from "../../../src/vector/init.tsx";
 import SdkConfig from "../../../src/SdkConfig.ts";
 import MatrixChat from "../../../src/components/structures/MatrixChat.tsx";
+import { parseAppUrl } from "../../../src/vector/url_utils.ts";
 
 function setUpMatrixChatDiv() {
     document.getElementById("matrixchat")?.remove();
@@ -57,17 +58,13 @@ describe("loadApp", () => {
         await waitFor(() => expect(window.matrixChat).toBeInstanceOf(MatrixChat));
     });
 
-    it("should pass onTokenLoginCompleted which strips searchParams to MatrixChat", async () => {
+    it("should pass onTokenLoginCompleted which strips searchParams & fragment to MatrixChat", async () => {
         const spy = jest.spyOn(window.history, "replaceState");
 
         await loadApp({});
         await waitFor(() => expect(window.matrixChat).toBeInstanceOf(MatrixChat));
-        window.matrixChat!.props.onTokenLoginCompleted();
+        window.matrixChat!.props.onTokenLoginCompleted(parseAppUrl(window.location).params, "/home");
 
-        expect(spy).toHaveBeenCalledWith(
-            null,
-            "",
-            expect.stringContaining("https://app.element.io/?something_else=value"),
-        );
+        expect(spy).toHaveBeenCalledWith(null, "", "https://app.element.io/?something_else=value#/home");
     });
 });
diff --git a/apps/web/test/unit-tests/vector/url_utils-test.ts b/apps/web/test/unit-tests/vector/url_utils-test.ts
index 242ca9ace9..ad2c0e0390 100644
--- a/apps/web/test/unit-tests/vector/url_utils-test.ts
+++ b/apps/web/test/unit-tests/vector/url_utils-test.ts
@@ -5,37 +5,61 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { parseQsFromFragment, parseQs } from "../../../src/vector/url_utils";
+import { parseAppUrl, parseQsFromFragment, searchParamsToQueryDict } from "../../../src/vector/url_utils";
 
-describe("url_utils.ts", function () {
-    // @ts-ignore
-    const location: Location = {
-        hash: "",
-        search: "",
-    };
+// @ts-ignore
+const location: Location = {
+    hash: "",
+    search: "",
+};
 
-    it("parseQsFromFragment", function () {
-        location.hash = "/home?foo=bar";
+describe("parseQsFromFragment", () => {
+    it("should parse correctly", () => {
+        location.hash = "#/home?foo=bar";
         expect(parseQsFromFragment(location)).toEqual({
-            location: "home",
-            params: {
+            location: "/home",
+            params: new URLSearchParams({
                 foo: "bar",
-            },
-        });
-    });
-
-    it("parseQs", function () {
-        location.search = "?foo=bar";
-        expect(parseQs(location)).toEqual({
-            foo: "bar",
-        });
-    });
-
-    it("parseQs with arrays", function () {
-        location.search = "?via=s1&via=s2&via=s2&foo=bar";
-        expect(parseQs(location)).toEqual({
-            via: ["s1", "s2", "s2"],
-            foo: "bar",
+            }),
         });
     });
 });
+
+describe("searchParamsToQueryDict", () => {
+    it("should handle arrays correctly", () => {
+        const u = new URLSearchParams("a=b&b=c&c=d&a=e&a=f");
+        expect(searchParamsToQueryDict(u)).toEqual({
+            a: ["b", "e", "f"],
+            b: "c",
+            c: "d",
+        });
+    });
+});
+
+describe("parseUrlParameters", () => {
+    it("should parse legacy sso parameters from query", () => {
+        const u = new URL("https://app.element.io?loginToken=foobar");
+        const parsed = parseAppUrl(u);
+        expect(parsed.params.legacy_sso?.loginToken).toEqual("foobar");
+    });
+
+    it("should parse oidc parameters from fragment", () => {
+        const u = new URL("https://app.element.io/#code=foobar&state=barfoo");
+        const parsed = parseAppUrl(u);
+        expect(parsed.params.oidc_fragment?.code).toEqual("foobar");
+        expect(parsed.params.oidc_fragment?.state).toEqual("barfoo");
+    });
+
+    it("should parse oidc parameters from query", () => {
+        const u = new URL("https://app.element.io/?code=foobar&state=barfoo");
+        const parsed = parseAppUrl(u);
+        expect(parsed.params.oidc_query?.code).toEqual("foobar");
+        expect(parsed.params.oidc_query?.state).toEqual("barfoo");
+    });
+
+    it("should parse guest parameters", () => {
+        const u = new URL("https://app.element.io?foo=bar#/room/!roomId:server?guest_access_token=foobar");
+        const parsed = parseAppUrl(u);
+        expect(parsed.params.guest?.guest_access_token).toEqual("foobar");
+    });
+});
diff --git a/apps/web/test/viewmodels/message-body/UrlPreviewGroupViewModel-test.ts b/apps/web/test/viewmodels/message-body/UrlPreviewGroupViewModel-test.ts
index 782cc8d7ee..9541e999a8 100644
--- a/apps/web/test/viewmodels/message-body/UrlPreviewGroupViewModel-test.ts
+++ b/apps/web/test/viewmodels/message-body/UrlPreviewGroupViewModel-test.ts
@@ -125,6 +125,32 @@ describe("UrlPreviewGroupViewModel", () => {
         await vm.updateEventElement(msg);
         expect(vm.getSnapshot()).toMatchSnapshot();
     });
+    it.each<Partial<IPreviewUrlResponse>>([
+        { "matrix:image:size": 8191 },
+        { "og:image:width": 95 },
+        { "og:image:height": 95 },
+    ])("should preview a URL with a site icon", async (extraResp) => {
+        const { vm, client } = getViewModel();
+        client.getUrlPreview.mockResolvedValueOnce({
+            "og:title": "This is an example!",
+            "og:type": "document",
+            "og:url": "https://example.org",
+            "og:image": IMAGE_MXC,
+            "og:image:height": 128,
+            "og:image:width": 128,
+            "matrix:image:size": 8193,
+            ...extraResp,
+        });
+        // eslint-disable-next-line no-restricted-properties
+        client.mxcUrlToHttp.mockImplementation((url) => {
+            expect(url).toEqual(IMAGE_MXC);
+            return "https://example.org/image/src";
+        });
+        const msg = document.createElement("div");
+        msg.innerHTML = '<a href="https://example.org">Test</a>';
+        await vm.updateEventElement(msg);
+        expect(vm.getSnapshot().previews[0].siteIcon).toBeTruthy();
+    });
     it("should ignore media when mediaVisible is false", async () => {
         const { vm, client } = getViewModel({ mediaVisible: false, visible: true });
         client.getUrlPreview.mockResolvedValueOnce({
@@ -200,6 +226,41 @@ describe("UrlPreviewGroupViewModel", () => {
         expect(vm.getSnapshot()).toMatchSnapshot();
     });
 
+    describe("calculates author", () => {
+        it("should use the profile:username if provided", async () => {
+            const { vm, client } = getViewModel();
+            client.getUrlPreview.mockResolvedValueOnce({ ...BASIC_PREVIEW_OGDATA, "profile:username": "my username" });
+            const msg = document.createElement("div");
+            msg.innerHTML = '<a href="https://example.org">Test</a>';
+            await vm.updateEventElement(msg);
+            expect(vm.getSnapshot().previews[0].author).toEqual("my username");
+        });
+        it("should use author if the og:type is an article", async () => {
+            const { vm, client } = getViewModel();
+            client.getUrlPreview.mockResolvedValueOnce({
+                ...BASIC_PREVIEW_OGDATA,
+                "og:type": "article",
+                "article:author": "my name",
+            });
+            const msg = document.createElement("div");
+            msg.innerHTML = '<a href="https://example.org">Test</a>';
+            await vm.updateEventElement(msg);
+            expect(vm.getSnapshot().previews[0].author).toEqual("my name");
+        });
+        it("should NOT use author if the author is a URL", async () => {
+            const { vm, client } = getViewModel();
+            client.getUrlPreview.mockResolvedValueOnce({
+                ...BASIC_PREVIEW_OGDATA,
+                "og:type": "article",
+                "article:author": "https://junk.example.org/foo",
+            });
+            const msg = document.createElement("div");
+            msg.innerHTML = '<a href="https://example.org">Test</a>';
+            await vm.updateEventElement(msg);
+            expect(vm.getSnapshot().previews[0].author).toBeUndefined();
+        });
+    });
+
     it.each([
         { text: "", href: "", hasPreview: false },
         { text: "test", href: "noprotocol.example.org", hasPreview: false },
@@ -232,7 +293,7 @@ describe("UrlPreviewGroupViewModel", () => {
             // API *may* return a string, so check we parse correctly.
             "og:image:height": "500" as unknown as number,
             "og:image:width": 500,
-            "matrix:image:size": 1024,
+            "matrix:image:size": 10000,
             "og:image": IMAGE_MXC,
         },
     ])("handles different kinds of opengraph responses %s", async (og) => {
@@ -251,4 +312,25 @@ describe("UrlPreviewGroupViewModel", () => {
         await vm.updateEventElement(msg);
         expect(vm.getSnapshot().previews[0]).toMatchSnapshot();
     });
+
+    it.each<string>(["og:video", "og:video:type", "og:audio"])("detects playable links via %s", async (property) => {
+        const { vm, client } = getViewModel();
+        // eslint-disable-next-line no-restricted-properties
+        client.mxcUrlToHttp.mockImplementation((url, width) => {
+            expect(url).toEqual(IMAGE_MXC);
+            if (width) {
+                return "https://example.org/image/thumb";
+            }
+            return "https://example.org/image/src";
+        });
+        client.getUrlPreview.mockResolvedValueOnce({
+            ...BASIC_PREVIEW_OGDATA,
+            "og:image": IMAGE_MXC,
+            [property]: "anything",
+        });
+        const msg = document.createElement("div");
+        msg.innerHTML = `<a href="https://example.org">test</a>`;
+        await vm.updateEventElement(msg);
+        expect(vm.getSnapshot().previews[0].image?.playable).toEqual(true);
+    });
 });
diff --git a/apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewGroupViewModel-test.ts.snap b/apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewGroupViewModel-test.ts.snap
index 1f412d86cb..e910d1b00d 100644
--- a/apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewGroupViewModel-test.ts.snap
+++ b/apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewGroupViewModel-test.ts.snap
@@ -2,61 +2,73 @@
 
 exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:description': 'A description',\\n  'og:title': ''\\n} 1`] = `
 {
+  "author": undefined,
   "description": undefined,
   "image": undefined,
   "link": "https://example.org",
-  "showTooltipOnLink": undefined,
-  "siteName": undefined,
+  "showTooltipOnLink": false,
+  "siteIcon": undefined,
+  "siteName": "example.org",
   "title": "A description",
 }
 `;
 
 exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:site_name': 'Site name',\\n  'og:title': ''\\n} 1`] = `
 {
+  "author": undefined,
   "description": undefined,
   "image": undefined,
   "link": "https://example.org",
-  "showTooltipOnLink": undefined,
-  "siteName": undefined,
+  "showTooltipOnLink": false,
+  "siteIcon": undefined,
+  "siteName": "Site name",
   "title": "Site name",
 }
 `;
 
 exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:title': 'Basic title'\\n} 1`] = `
 {
+  "author": undefined,
   "description": undefined,
   "image": undefined,
   "link": "https://example.org",
-  "showTooltipOnLink": undefined,
-  "siteName": undefined,
+  "showTooltipOnLink": false,
+  "siteIcon": undefined,
+  "siteName": "example.org",
   "title": "Basic title",
 }
 `;
 
 exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:title': 'Cool blog',\\n  'og:site_name': 'Cool site'\\n} 1`] = `
 {
+  "author": undefined,
   "description": undefined,
   "image": undefined,
   "link": "https://example.org",
-  "showTooltipOnLink": undefined,
+  "showTooltipOnLink": false,
+  "siteIcon": undefined,
   "siteName": "Cool site",
   "title": "Cool blog",
 }
 `;
 
-exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:title': 'Media test',\\n  'og:image:height': '500',\\n  'og:image:width': 500,\\n  'matrix:image:size': 1024,\\n  'og:image': 'mxc://example.org/abc'\\n} 1`] = `
+exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:title': 'Media test',\\n  'og:image:height': '500',\\n  'og:image:width': 500,\\n  'matrix:image:size': 10000,\\n  'og:image': 'mxc://example.org/abc'\\n} 1`] = `
 {
+  "author": undefined,
   "description": undefined,
   "image": {
-    "fileSize": 1024,
-    "height": 100,
+    "alt": undefined,
+    "fileSize": 10000,
+    "height": 478,
     "imageFull": "https://example.org/image/src",
     "imageThumb": "https://example.org/image/thumb",
-    "width": 100,
+    "playable": false,
+    "width": 478,
   },
   "link": "https://example.org",
-  "showTooltipOnLink": undefined,
-  "siteName": undefined,
+  "showTooltipOnLink": false,
+  "siteIcon": undefined,
+  "siteName": "example.org",
   "title": "Media test",
 }
 `;
@@ -67,10 +79,12 @@ exports[`UrlPreviewGroupViewModel should deduplicate multiple versions of the sa
   "overPreviewLimit": false,
   "previews": [
     {
+      "author": undefined,
       "description": "This is a description",
       "image": undefined,
       "link": "https://example.org",
-      "showTooltipOnLink": undefined,
+      "showTooltipOnLink": false,
+      "siteIcon": undefined,
       "siteName": "Example.org",
       "title": "This is an example!",
     },
@@ -96,10 +110,12 @@ exports[`UrlPreviewGroupViewModel should handle being hidden and shown by the us
   "overPreviewLimit": false,
   "previews": [
     {
+      "author": undefined,
       "description": "This is a description",
       "image": undefined,
       "link": "https://example.org",
-      "showTooltipOnLink": undefined,
+      "showTooltipOnLink": false,
+      "siteIcon": undefined,
       "siteName": "Example.org",
       "title": "This is an example!",
     },
@@ -135,11 +151,13 @@ exports[`UrlPreviewGroupViewModel should ignore media when mediaVisible is false
   "overPreviewLimit": false,
   "previews": [
     {
+      "author": undefined,
       "description": undefined,
       "image": undefined,
       "link": "https://example.org",
-      "showTooltipOnLink": undefined,
-      "siteName": undefined,
+      "showTooltipOnLink": false,
+      "siteIcon": undefined,
+      "siteName": "example.org",
       "title": "This is an example!",
     },
   ],
@@ -154,17 +172,21 @@ exports[`UrlPreviewGroupViewModel should preview a URL with media 1`] = `
   "overPreviewLimit": false,
   "previews": [
     {
+      "author": undefined,
       "description": undefined,
       "image": {
+        "alt": undefined,
         "fileSize": 10000,
-        "height": 100,
+        "height": 128,
         "imageFull": "https://example.org/image/src",
         "imageThumb": "https://example.org/image/thumb",
-        "width": 100,
+        "playable": false,
+        "width": 128,
       },
       "link": "https://example.org",
-      "showTooltipOnLink": undefined,
-      "siteName": undefined,
+      "showTooltipOnLink": false,
+      "siteIcon": undefined,
+      "siteName": "example.org",
       "title": "This is an example!",
     },
   ],
@@ -179,10 +201,12 @@ exports[`UrlPreviewGroupViewModel should preview a single valid URL 1`] = `
   "overPreviewLimit": false,
   "previews": [
     {
+      "author": undefined,
       "description": "This is a description",
       "image": undefined,
       "link": "https://example.org",
-      "showTooltipOnLink": undefined,
+      "showTooltipOnLink": false,
+      "siteIcon": undefined,
       "siteName": "Example.org",
       "title": "This is an example!",
     },
diff --git a/apps/web/test/viewmodels/room-list/RoomListHeaderViewModel-test.ts b/apps/web/test/viewmodels/room-list/RoomListHeaderViewModel-test.ts
index 936389603d..608e990af6 100644
--- a/apps/web/test/viewmodels/room-list/RoomListHeaderViewModel-test.ts
+++ b/apps/web/test/viewmodels/room-list/RoomListHeaderViewModel-test.ts
@@ -61,6 +61,7 @@ describe("RoomListHeaderViewModel", () => {
             if (settingName === "RoomList.preferredSorting") return SortingAlgorithm.Recency;
             if (settingName === "feature_video_rooms") return true;
             if (settingName === "feature_element_call_video_rooms") return true;
+            if (settingName === "RoomList.OrderedCustomSections") return [];
             return false;
         });
     });
@@ -159,6 +160,23 @@ describe("RoomListHeaderViewModel", () => {
             vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
             expect(vm.getSnapshot().isMessagePreviewEnabled).toBe(true);
         });
+
+        it.each([
+            [true, true, false],
+            [false, false, true],
+        ])(
+            "when feature_room_list_sections is %s: canCreateSection=%s, useComposeIcon=%s",
+            (featureEnabled, expectedCanCreateSection, expectedUseComposeIcon) => {
+                jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName: string) => {
+                    if (settingName === "feature_room_list_sections") return featureEnabled;
+                    return false;
+                });
+
+                vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+                expect(vm.getSnapshot().canCreateSection).toBe(expectedCanCreateSection);
+                expect(vm.getSnapshot().useComposeIcon).toBe(expectedUseComposeIcon);
+            },
+        );
     });
 
     describe("event listeners", () => {
@@ -296,6 +314,13 @@ describe("RoomListHeaderViewModel", () => {
             );
         });
 
+        it("should call createSection on RoomListStoreV3 when createSection is called", () => {
+            const createSectionSpy = jest.spyOn(RoomListStoreV3.instance, "createSection").mockResolvedValue();
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm.createSection();
+            expect(createSectionSpy).toHaveBeenCalled();
+        });
+
         it("should toggle message preview from enabled to disabled", () => {
             jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName: string) => {
                 if (settingName === "RoomList.showMessagePreview") return true;
diff --git a/apps/web/test/viewmodels/room-list/RoomListItemViewModel-test.tsx b/apps/web/test/viewmodels/room-list/RoomListItemViewModel-test.tsx
index e3b349e085..35ee53efdb 100644
--- a/apps/web/test/viewmodels/room-list/RoomListItemViewModel-test.tsx
+++ b/apps/web/test/viewmodels/room-list/RoomListItemViewModel-test.tsx
@@ -21,7 +21,7 @@ import { RoomNotificationState } from "../../../src/stores/notifications/RoomNot
 import { RoomNotificationStateStore } from "../../../src/stores/notifications/RoomNotificationStateStore";
 import { NotificationStateEvents } from "../../../src/stores/notifications/NotificationState";
 import { type MessagePreview, MessagePreviewStore } from "../../../src/stores/message-preview";
-import SettingsStore from "../../../src/settings/SettingsStore";
+import SettingsStore, { type CallbackFn } from "../../../src/settings/SettingsStore";
 import DMRoomMap from "../../../src/utils/DMRoomMap";
 import { DefaultTagID } from "../../../src/stores/room-list-v3/skip-list/tag";
 import dispatcher from "../../../src/dispatcher/dispatcher";
@@ -29,6 +29,8 @@ import { Action } from "../../../src/dispatcher/actions";
 import { CallStore } from "../../../src/stores/CallStore";
 import { CallEvent, type Call } from "../../../src/models/Call";
 import { RoomListItemViewModel } from "../../../src/viewmodels/room-list/RoomListItemViewModel";
+import RoomListStoreV3, { CHATS_TAG } from "../../../src/stores/room-list-v3/RoomListStoreV3";
+import * as tagRoomModule from "../../../src/utils/room/tagRoom";
 
 jest.mock("../../../src/viewmodels/room-list/utils", () => ({
     hasAccessToOptionsMenu: jest.fn().mockReturnValue(true),
@@ -75,12 +77,14 @@ describe("RoomListItemViewModel", () => {
 
         jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
             if (setting === "RoomList.showMessagePreview") return false;
+            if (setting === "RoomList.OrderedCustomSections") return [];
             return false;
         });
         jest.spyOn(SettingsStore, "watchSetting").mockImplementation(() => "watcher-id");
 
         jest.spyOn(MessagePreviewStore.instance, "getPreviewForRoom").mockResolvedValue(null);
         jest.spyOn(CallStore.instance, "getCall").mockReturnValue(null);
+        jest.spyOn(RoomListStoreV3.instance, "orderedSectionTags", "get").mockReturnValue([]);
     });
 
     afterEach(() => {
@@ -211,8 +215,8 @@ describe("RoomListItemViewModel", () => {
             let watchCallback: any;
 
             jest.spyOn(SettingsStore, "getValue").mockImplementation(() => showPreview);
-            jest.spyOn(SettingsStore, "watchSetting").mockImplementation((_setting, _room, callback) => {
-                watchCallback = callback;
+            jest.spyOn(SettingsStore, "watchSetting").mockImplementation((setting, _room, callback) => {
+                if (setting === "RoomList.showMessagePreview") watchCallback = callback;
                 return "watcher-id";
             });
             jest.spyOn(MessagePreviewStore.instance, "getPreviewForRoom").mockResolvedValue({
@@ -501,6 +505,20 @@ describe("RoomListItemViewModel", () => {
         });
     });
 
+    describe("canMoveToSection", () => {
+        it.each([
+            [true, true],
+            [false, false],
+        ])("should be %s when feature_room_list_sections is %s", (featureEnabled, expected) => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
+                if (setting === "feature_room_list_sections") return featureEnabled;
+                return false;
+            });
+            viewModel = new RoomListItemViewModel({ room, client: matrixClient });
+            expect(viewModel.getSnapshot().canMoveToSection).toBe(expected);
+        });
+    });
+
     describe("Actions", () => {
         it("should dispatch view room action on openRoom", () => {
             viewModel = new RoomListItemViewModel({ room, client: matrixClient });
@@ -572,6 +590,100 @@ describe("RoomListItemViewModel", () => {
                 room_id: "!room:server",
             });
         });
+
+        it("should call createSection on RoomListStoreV3 when onCreateSection is called", () => {
+            const createSectionSpy = jest.spyOn(RoomListStoreV3.instance, "createSection").mockResolvedValue();
+            viewModel = new RoomListItemViewModel({ room, client: matrixClient });
+            viewModel.onCreateSection();
+            expect(createSectionSpy).toHaveBeenCalled();
+        });
+
+        it("should call tagRoom when onToggleSection is called", () => {
+            const tagRoomSpy = jest.spyOn(tagRoomModule, "tagRoom").mockImplementation(() => {});
+            viewModel = new RoomListItemViewModel({ room, client: matrixClient });
+
+            viewModel.onToggleSection(DefaultTagID.Favourite);
+
+            expect(tagRoomSpy).toHaveBeenCalledWith(room, DefaultTagID.Favourite);
+        });
+    });
+
+    describe("Sections", () => {
+        const customTag = "element.io.section.custom1";
+
+        beforeEach(() => {
+            jest.spyOn(RoomListStoreV3.instance, "orderedSectionTags", "get").mockReturnValue([
+                DefaultTagID.Favourite,
+                customTag,
+                CHATS_TAG,
+                DefaultTagID.LowPriority,
+            ]);
+        });
+
+        it("should include sections from orderedSectionTags excluding CHATS_TAG", () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
+                if (setting === "feature_room_list_sections") return true;
+                return false;
+            });
+            viewModel = new RoomListItemViewModel({ room, client: matrixClient });
+
+            const sections = viewModel.getSnapshot().sections;
+            expect(sections.map((s) => s.tag)).toEqual([DefaultTagID.Favourite, customTag, DefaultTagID.LowPriority]);
+        });
+
+        it("should mark the room current section as selected", () => {
+            room.tags = { [DefaultTagID.Favourite]: { order: 0 } };
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
+                if (setting === "feature_room_list_sections") return true;
+                return false;
+            });
+            viewModel = new RoomListItemViewModel({ room, client: matrixClient });
+
+            const sections = viewModel.getSnapshot().sections;
+            expect(sections.find((s) => s.tag === DefaultTagID.Favourite)?.isSelected).toBe(true);
+            expect(sections.find((s) => s.tag === DefaultTagID.LowPriority)?.isSelected).toBe(false);
+        });
+
+        it("should use custom section name from CustomSectionData", () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
+                if (setting === "feature_room_list_sections") return true;
+                if (setting === "RoomList.CustomSectionData")
+                    return { [customTag]: { name: "My Custom Section", tag: customTag } };
+                return false;
+            });
+            viewModel = new RoomListItemViewModel({ room, client: matrixClient });
+
+            const section = viewModel.getSnapshot().sections.find((s) => s.tag === customTag);
+            expect(section?.name).toBe("My Custom Section");
+        });
+
+        it("should update sections when OrderedCustomSections setting changes", () => {
+            let watchCallback: CallbackFn = () => {};
+            jest.spyOn(SettingsStore, "watchSetting").mockImplementation((setting, _room, callback) => {
+                if (setting === "RoomList.OrderedCustomSections") watchCallback = callback;
+                return "watcher-id";
+            });
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
+                if (setting === "feature_room_list_sections") return true;
+                return false;
+            });
+
+            viewModel = new RoomListItemViewModel({ room, client: matrixClient });
+            expect(viewModel.getSnapshot().sections).toHaveLength(3); // Favourite, custom, LowPriority
+
+            // Simulate reordering: custom section removed
+            jest.spyOn(RoomListStoreV3.instance, "orderedSectionTags", "get").mockReturnValue([
+                DefaultTagID.Favourite,
+                CHATS_TAG,
+                DefaultTagID.LowPriority,
+            ]);
+            watchCallback("RoomList.OrderedCustomSections", null, null as any, null, null);
+
+            expect(viewModel.getSnapshot().sections.map((s) => s.tag)).toEqual([
+                DefaultTagID.Favourite,
+                DefaultTagID.LowPriority,
+            ]);
+        });
     });
 
     describe("Cleanup", () => {
diff --git a/apps/web/test/viewmodels/room-list/RoomListSectionHeaderViewModel-test.ts b/apps/web/test/viewmodels/room-list/RoomListSectionHeaderViewModel-test.ts
index 0297ee24f3..702cf412c0 100644
--- a/apps/web/test/viewmodels/room-list/RoomListSectionHeaderViewModel-test.ts
+++ b/apps/web/test/viewmodels/room-list/RoomListSectionHeaderViewModel-test.ts
@@ -30,6 +30,7 @@ describe("RoomListSectionHeaderViewModel", () => {
         const vm = new RoomListSectionHeaderViewModel({
             tag: "m.favourite",
             title: "Favourites",
+            spaceId: "!space:server",
             onToggleExpanded,
         });
 
@@ -43,6 +44,7 @@ describe("RoomListSectionHeaderViewModel", () => {
         const vm = new RoomListSectionHeaderViewModel({
             tag: "m.favourite",
             title: "Favourites",
+            spaceId: "!space:server",
             onToggleExpanded,
         });
         expect(vm.isExpanded).toBe(true);
@@ -58,6 +60,33 @@ describe("RoomListSectionHeaderViewModel", () => {
         expect(onToggleExpanded).toHaveBeenCalledWith(true);
     });
 
+    it("should track expanded state per space", () => {
+        const vm = new RoomListSectionHeaderViewModel({
+            tag: "m.favourite",
+            title: "Favourites",
+            spaceId: "!space:server",
+            onToggleExpanded,
+        });
+
+        // Default space: collapse
+        vm.onClick();
+        expect(vm.isExpanded).toBe(false);
+
+        // Switch to a different space: should default to expanded
+        vm.setSpace("!space2:server");
+        expect(vm.isExpanded).toBe(true);
+
+        // Collapse in the new space
+        vm.onClick();
+        expect(vm.isExpanded).toBe(false);
+        vm.onClick();
+        expect(vm.isExpanded).toBe(true);
+
+        // Switch to the other space: should still be collapsed
+        vm.setSpace("!space:server");
+        expect(vm.isExpanded).toBe(false);
+    });
+
     describe("unread status", () => {
         let room: Room;
         let notificationState: RoomNotificationState;
@@ -72,6 +101,7 @@ describe("RoomListSectionHeaderViewModel", () => {
             const vm = new RoomListSectionHeaderViewModel({
                 tag: "m.favourite",
                 title: "Favourites",
+                spaceId: "!space:server",
                 onToggleExpanded,
             });
             vm.setRooms([room]);
@@ -85,6 +115,7 @@ describe("RoomListSectionHeaderViewModel", () => {
             const vm = new RoomListSectionHeaderViewModel({
                 tag: "m.favourite",
                 title: "Favourites",
+                spaceId: "!space:server",
                 onToggleExpanded,
             });
             vm.setRooms([room]);
@@ -107,6 +138,7 @@ describe("RoomListSectionHeaderViewModel", () => {
             const vm = new RoomListSectionHeaderViewModel({
                 tag: "m.favourite",
                 title: "Favourites",
+                spaceId: "!space:server",
                 onToggleExpanded,
             });
             vm.setRooms([room]);
@@ -127,6 +159,7 @@ describe("RoomListSectionHeaderViewModel", () => {
             const vm = new RoomListSectionHeaderViewModel({
                 tag: "m.favourite",
                 title: "Favourites",
+                spaceId: "!space:server",
                 onToggleExpanded,
             });
             vm.setRooms([room]);
@@ -145,6 +178,7 @@ describe("RoomListSectionHeaderViewModel", () => {
             const vm = new RoomListSectionHeaderViewModel({
                 tag: "m.favourite",
                 title: "Favourites",
+                spaceId: "!space:server",
                 onToggleExpanded,
             });
             vm.setRooms([room]);
diff --git a/apps/web/test/viewmodels/room-list/RoomListViewModel-test.tsx b/apps/web/test/viewmodels/room-list/RoomListViewModel-test.tsx
index c2ced861f0..c0eacbdf35 100644
--- a/apps/web/test/viewmodels/room-list/RoomListViewModel-test.tsx
+++ b/apps/web/test/viewmodels/room-list/RoomListViewModel-test.tsx
@@ -9,7 +9,7 @@ import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
 import { waitFor } from "jest-matrix-react";
 
-import { createTestClient, flushPromises, mkStubRoom, stubClient } from "../../test-utils";
+import { createTestClient, flushPromises, flushPromisesWithFakeTimers, mkStubRoom, stubClient } from "../../test-utils";
 import RoomListStoreV3, { CHATS_TAG, RoomListStoreV3Event } from "../../../src/stores/room-list-v3/RoomListStoreV3";
 import SpaceStore from "../../../src/stores/spaces/SpaceStore";
 import { FilterEnum } from "../../../src/stores/room-list-v3/skip-list/filters";
@@ -589,6 +589,14 @@ describe("RoomListViewModel", () => {
     });
 
     describe("Cleanup", () => {
+        beforeEach(() => {
+            jest.useFakeTimers();
+        });
+
+        afterEach(() => {
+            jest.useRealTimers();
+        });
+
         it("should dispose all room item view models on dispose", () => {
             viewModel = new RoomListViewModel({ client: matrixClient });
 
@@ -604,6 +612,57 @@ describe("RoomListViewModel", () => {
             expect(disposeSpy2).toHaveBeenCalled();
         });
 
+        describe("Toast", () => {
+            it("should show toast when SectionCreated event fires", () => {
+                viewModel = new RoomListViewModel({ client: matrixClient });
+                RoomListStoreV3.instance.emit(RoomListStoreV3Event.SectionCreated);
+                expect(viewModel.getSnapshot().toast).toBe("section_created");
+            });
+
+            it("should show toast when RoomTagged event fires", () => {
+                viewModel = new RoomListViewModel({ client: matrixClient });
+                RoomListStoreV3.instance.emit(RoomListStoreV3Event.RoomTagged);
+                expect(viewModel.getSnapshot().toast).toBe("chat_moved");
+            });
+
+            it("should clear toast when closeToast is called", () => {
+                viewModel = new RoomListViewModel({ client: matrixClient });
+
+                RoomListStoreV3.instance.emit(RoomListStoreV3Event.SectionCreated);
+                expect(viewModel.getSnapshot().toast).toBe("section_created");
+
+                viewModel.closeToast();
+                expect(viewModel.getSnapshot().toast).toBeUndefined();
+            });
+
+            it("should auto-close toast after 15 seconds", () => {
+                viewModel = new RoomListViewModel({ client: matrixClient });
+
+                RoomListStoreV3.instance.emit(RoomListStoreV3Event.SectionCreated);
+                expect(viewModel.getSnapshot().toast).toBe("section_created");
+
+                jest.advanceTimersByTime(15 * 1000);
+                expect(viewModel.getSnapshot().toast).toBeUndefined();
+            });
+
+            it("should reset the auto-close timer when a new section is created", () => {
+                viewModel = new RoomListViewModel({ client: matrixClient });
+
+                RoomListStoreV3.instance.emit(RoomListStoreV3Event.SectionCreated);
+                jest.advanceTimersByTime(10 * 1000);
+
+                // Second section created — resets the timer
+                RoomListStoreV3.instance.emit(RoomListStoreV3Event.SectionCreated);
+                jest.advanceTimersByTime(10 * 1000);
+
+                // Toast should still be visible (only 10s since last emit)
+                expect(viewModel.getSnapshot().toast).toBe("section_created");
+
+                jest.advanceTimersByTime(5 * 1000);
+                expect(viewModel.getSnapshot().toast).toBeUndefined();
+            });
+        });
+
         describe("Sections (feature_room_list_sections)", () => {
             let favRoom1: Room;
             let favRoom2: Room;
@@ -806,10 +865,10 @@ describe("RoomListViewModel", () => {
                 expect(favSection!.roomIds).toEqual([]);
             });
 
-            it("should preserve section collapse state across space changes", () => {
+            it("should track section collapse state per space", () => {
                 viewModel = new RoomListViewModel({ client: matrixClient });
 
-                // Collapse favourites
+                // Collapse favourites in the home space
                 const favHeader = viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite);
                 favHeader.onClick();
 
@@ -828,15 +887,37 @@ describe("RoomListViewModel", () => {
 
                 RoomListStoreV3.instance.emit(RoomListStoreV3Event.ListsUpdate);
 
-                const snapshot = viewModel.getSnapshot();
-                // Favourites should still be collapsed even after the space change
-                const favSection = snapshot.sections.find((s) => s.id === DefaultTagID.Favourite);
+                let snapshot = viewModel.getSnapshot();
+                // Favourites should be expanded in the new space (per-space state)
+                let favSection = snapshot.sections.find((s) => s.id === DefaultTagID.Favourite);
+                expect(favSection).toBeDefined();
+                expect(favSection!.roomIds).toEqual(["!spacefav:server"]);
+
+                // Other sections should also be expanded
+                let chatsSection = snapshot.sections.find((s) => s.id === CHATS_TAG);
+                expect(chatsSection!.roomIds).toEqual(["!spacereg:server"]);
+
+                // Switch back to home space
+                jest.spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace").mockReturnValue({
+                    spaceId: "home",
+                    sections: [
+                        { tag: DefaultTagID.Favourite, rooms: [favRoom1, favRoom2] },
+                        { tag: CHATS_TAG, rooms: [regularRoom1] },
+                        { tag: DefaultTagID.LowPriority, rooms: [] },
+                    ],
+                });
+
+                RoomListStoreV3.instance.emit(RoomListStoreV3Event.ListsUpdate);
+
+                snapshot = viewModel.getSnapshot();
+                // Favourites should still be collapsed in the home space
+                favSection = snapshot.sections.find((s) => s.id === DefaultTagID.Favourite);
                 expect(favSection).toBeDefined();
                 expect(favSection!.roomIds).toEqual([]);
 
-                // Other sections should remain expanded
-                const chatsSection = snapshot.sections.find((s) => s.id === CHATS_TAG);
-                expect(chatsSection!.roomIds).toEqual(["!spacereg:server"]);
+                // Chats should be expanded
+                chatsSection = snapshot.sections.find((s) => s.id === CHATS_TAG);
+                expect(chatsSection!.roomIds).toEqual(["!reg1:server"]);
             });
 
             it("should apply filters across all sections", () => {
@@ -863,6 +944,33 @@ describe("RoomListViewModel", () => {
                 expect(snapshot.sections[0].roomIds).toEqual(["!fav1:server"]);
             });
 
+            it("should expand collapsed sections that have results when a filter is toggled on", () => {
+                viewModel = new RoomListViewModel({ client: matrixClient });
+
+                // Collapse the favourite section
+                const favHeader = viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite);
+                favHeader.onClick();
+                expect(favHeader.isExpanded).toBe(false);
+
+                // Toggle a filter that returns rooms in the favourite section
+                jest.spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace").mockReturnValue({
+                    spaceId: "home",
+                    sections: [
+                        { tag: DefaultTagID.Favourite, rooms: [favRoom1] },
+                        { tag: CHATS_TAG, rooms: [] },
+                        { tag: DefaultTagID.LowPriority, rooms: [] },
+                    ],
+                    filterKeys: [FilterEnum.UnreadFilter],
+                });
+                viewModel.onToggleFilter("unread");
+
+                // The favourite section should be expanded and its rooms visible
+                expect(favHeader.isExpanded).toBe(true);
+                const snapshot = viewModel.getSnapshot();
+                const favSection = snapshot.sections.find((s) => s.id === DefaultTagID.Favourite);
+                expect(favSection!.roomIds).toEqual(["!fav1:server"]);
+            });
+
             it("should apply sticky room within the correct section", async () => {
                 stubClient();
                 viewModel = new RoomListViewModel({ client: matrixClient });
@@ -873,7 +981,7 @@ describe("RoomListViewModel", () => {
                     action: Action.ActiveRoomChanged,
                     newRoomId: "!fav1:server",
                 });
-                await flushPromises();
+                await flushPromisesWithFakeTimers();
 
                 expect(viewModel.getSnapshot().roomListState.activeRoomIndex).toBe(0);
 
diff --git a/apps/web/test/viewmodels/right-panel/WidgetContextMenuViewModel-test.tsx b/apps/web/test/viewmodels/room/right-panel/WidgetContextMenuViewModel-test.tsx
similarity index 92%
rename from apps/web/test/viewmodels/right-panel/WidgetContextMenuViewModel-test.tsx
rename to apps/web/test/viewmodels/room/right-panel/WidgetContextMenuViewModel-test.tsx
index 1d9cf070fa..6c99855fda 100644
--- a/apps/web/test/viewmodels/right-panel/WidgetContextMenuViewModel-test.tsx
+++ b/apps/web/test/viewmodels/room/right-panel/WidgetContextMenuViewModel-test.tsx
@@ -12,18 +12,18 @@ import { type MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import {
     WidgetContextMenuViewModel,
     type WidgetContextMenuViewModelProps,
-} from "../../../src/viewmodels/right-panel/WidgetContextMenuViewModel";
-import { stubClient } from "../../test-utils";
-import WidgetUtils from "../../../src/utils/WidgetUtils";
-import { type IApp } from "../../../src/utils/WidgetUtils-types";
-import { WidgetLayoutStore } from "../../../src/stores/widgets/WidgetLayoutStore";
-import * as livestream from "../../../src/Livestream";
-import Modal from "../../../src/Modal";
-import SettingsStore from "../../../src/settings/SettingsStore";
-import { SettingLevel } from "../../../src/settings/SettingLevel";
-import * as widgetStore from "../../../src/stores/WidgetStore";
-import { WidgetMessagingStore } from "../../../src/stores/widgets/WidgetMessagingStore";
-import { type WidgetMessaging } from "../../../src/stores/widgets/WidgetMessaging";
+} from "../../../../src/viewmodels/room/right-panel/WidgetContextMenuViewModel";
+import { stubClient } from "../../../test-utils";
+import WidgetUtils from "../../../../src/utils/WidgetUtils";
+import { type IApp } from "../../../../src/utils/WidgetUtils-types";
+import { WidgetLayoutStore } from "../../../../src/stores/widgets/WidgetLayoutStore";
+import * as livestream from "../../../../src/Livestream";
+import Modal from "../../../../src/Modal";
+import SettingsStore from "../../../../src/settings/SettingsStore";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
+import * as widgetStore from "../../../../src/stores/WidgetStore";
+import { WidgetMessagingStore } from "../../../../src/stores/widgets/WidgetMessagingStore";
+import { type WidgetMessaging } from "../../../../src/stores/widgets/WidgetMessaging";
 
 describe("WidgetContextMenuViewModel", () => {
     const widgetId = "w1";
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 9f97d8a94e..c470e8a4e4 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -16,7 +16,7 @@
         "jsx": "react",
         "lib": ["es2022", "es2024.promise", "dom", "dom.iterable"],
         "strict": true,
-        "types": ["node"],
+        "types": ["node", "modernizr"],
         "paths": {
             "jest-matrix-react": ["./test/test-utils/jest-matrix-react"],
             "rollup/parseAst": ["../../node_modules/rollup/dist/parseAst"]
diff --git a/apps/web/webpack.config.ts b/apps/web/webpack.config.ts
index f6b0c0c6d9..28b71436ad 100644
--- a/apps/web/webpack.config.ts
+++ b/apps/web/webpack.config.ts
@@ -711,8 +711,6 @@ export default (env: string, argv: Record<string, any>): webpack.Configuration =
                     "res/jitsi_external_api.min.js",
                     "res/jitsi_external_api.min.js.LICENSE.txt",
                     "res/manifest.json",
-                    "res/welcome.html",
-                    { from: "welcome/**", context: path.resolve(__dirname, "res") },
                     { from: "themes/**", context: path.resolve(__dirname, "res") },
                     { from: "vector-icons/**", context: path.resolve(__dirname, "res") },
                     { from: "decoder-ring/**", context: path.resolve(__dirname, "res") },
diff --git a/docs/config.md b/docs/config.md
index 113255674a..046a737447 100644
--- a/docs/config.md
+++ b/docs/config.md
@@ -214,14 +214,15 @@ Starting with `branding`, the following subproperties are available:
 
 1. `welcome_background_url`: When a string, the URL for the full-page image background of the login, registration, and welcome
    pages. This property can additionally be an array to have the app choose an image at random from the selections.
-2. `auth_header_logo_url`: A URL to the logo used on the login, registration, etc pages.
-3. `auth_footer_links`: A list of links to add to the footer during login, registration, etc. Each entry must have a `text` and
+2. `logo_link_url`: When rendering the a brand Logo, if it is linkified, this is the link it should direct to. Defaults to `https://element.io`.
+3. `auth_header_logo_url`: A URL to the logo used on the login, registration, etc pages.
+4. `auth_footer_links`: A list of links to add to the footer during login, registration, etc. Each entry must have a `text` and
    `url` property.
 
 `embedded_pages` can be configured as such:
 
-1. `welcome_url`: A URL to an HTML page to show as a welcome page (landing on `#/welcome`). When not specified, the default
-   `welcome.html` that ships with Element will be used instead.
+1. `welcome_url`: A URL to an HTML page to show as a welcome page (landing on `#/welcome`).
+   When not specified, a default internal component will be used instead.
 2. `home_url`: A URL to an HTML page to show within the app as the "home" page. When the app doesn't have a room/screen to
    show the user, it will use the home page instead. The home page is additionally accessible from the user menu. By default,
    no home page is set and therefore a hardcoded landing screen is used. More documentation and examples are [here](./custom-home.md).
diff --git a/knip.ts b/knip.ts
index 1dec3f5883..53718f2e15 100644
--- a/knip.ts
+++ b/knip.ts
@@ -7,12 +7,14 @@ export default {
     workspaces: {
         "packages/shared-components": {},
         "packages/playwright-common": {
+            entry: ["src/fixtures/index.ts", "src/testcontainers/index.ts"],
             ignoreDependencies: [
                 // Used in playwright-screenshots.sh
                 "wait-on",
             ],
             ignoreBinaries: ["awk"],
         },
+        "packages/module-api": {},
         "apps/web": {
             entry: [
                 "src/serviceworker/index.ts",
diff --git a/nx.json b/nx.json
index 58b3b014cd..050a8c7d94 100644
--- a/nx.json
+++ b/nx.json
@@ -8,5 +8,6 @@
     },
     "namedInputs": {
         "src": ["{projectRoot}/src/**/*"]
-    }
+    },
+    "analytics": false
 }
diff --git a/package.json b/package.json
index 966c01ed69..7c11ee162e 100644
--- a/package.json
+++ b/package.json
@@ -27,21 +27,19 @@
     "devDependencies": {
         "@action-validator/cli": "^0.6.0",
         "@action-validator/core": "^0.6.0",
-        "@element-hq/element-web-playwright-common": "catalog:",
         "@nx-tools/nx-container": "^7.2.1",
-        "@nx/jest": "^22.5.0",
         "@playwright/test": "catalog:",
         "@types/node": "22",
         "cronstrue": "^3.0.0",
         "eslint-plugin-matrix-org": "^3.0.0",
         "husky": "^9.0.0",
-        "knip": "6.3.0",
+        "knip": "6.4.1",
         "lint-staged": "^16.0.0",
         "lodash": "^4.17.21",
         "mermaid": "^11.13.0",
         "minimist": "^1.2.6",
-        "nx": "22.5.4",
-        "prettier": "3.8.1",
+        "nx": "22.6.5",
+        "prettier": "3.8.3",
         "typescript": "catalog:",
         "vitepress": "^1.6.4",
         "vitepress-plugin-mermaid": "^2.0.17",
@@ -70,7 +68,8 @@
             "postcss-mixins": "patches/postcss-mixins.patch",
             "app-builder-lib": "patches/app-builder-lib.patch",
             "knip": "patches/knip.patch",
-            "plist": "patches/plist.patch"
+            "plist": "patches/plist.patch",
+            "unplugin-dts": "patches/unplugin-dts.patch"
         },
         "peerDependencyRules": {
             "allowedVersions": {
@@ -84,46 +83,32 @@
             "react-beautiful-dnd": "13"
         },
         "overrides": {
-            "pretty-format@30>react-is": "19.2.4",
+            "pretty-format@30>react-is": "19.2.5",
             "@types/react": "catalog:",
             "@types/react-dom": "catalog:",
             "oidc-client-ts": "3.5.0",
             "jwt-decode": "4.0.0",
-            "caniuse-lite": "1.0.30001781",
+            "caniuse-lite": "1.0.30001788",
             "markdown-it": "14.1.1",
             "testcontainers": "^11.0.0",
             "matrix-widget-api": "^1.17.0",
             "qs": "6.15.0",
-            "serialize-javascript": "7.0.5",
-            "atomically": "2.1.1",
             "@types/node": "18.19.130",
             "config-file-ts": "0.2.8-rc1",
-            "node-abi": "4.27.0",
+            "node-abi": "4.28.0",
             "@types/pg-pool": "2.0.7",
-            "flatted@3.4.1": "3.4.2",
             "ajv@6.12.6": "6.14.0",
             "ajv@>=8 <8.18.0": "8.18.0",
-            "bn.js@4.12.2": "4.12.3",
-            "bn.js@5.2.2": "5.2.3",
-            "brace-expansion@1.1.12": "1.1.13",
-            "brace-expansion@2.0.2": "2.0.3",
-            "brace-expansion@5.0.4": "5.0.5",
-            "handlebars@4.7.8": "4.7.9",
-            "path-to-regexp@0.1.12": "0.2.5",
-            "path-to-regexp@8.3.0": "8.4.2",
-            "picomatch@2.3.1": "2.3.2",
-            "picomatch@4.0": "4.0.4",
-            "rollup@4.57.1": "4.60.1",
-            "smol-toml@1.6.0": "1.6.1",
-            "svgo@3.3.2": "3.3.3",
-            "svgo@4.0.0": "4.0.1",
-            "underscore@1.13.7": "1.13.8",
-            "yaml@1.10.2": "1.10.3",
-            "yaml@2.8.2": "2.8.3",
-            "undici@7.22.2": "7.24.7",
-            "@xmldom/xmldom@0.8.11": "0.9.9",
-            "esbuild@<=0.24.2": ">=0.25.0",
-            "minimatch@>=10.0.0 <10.2.3": ">=10.2.3"
+            "axios@>1.0.0 <1.15.0": "1.15.0",
+            "picomatch@>=4.0.0 <4.0.4": "4.0.4",
+            "esbuild@<=0.24.2": "0.27.4",
+            "esbuild@~0.27.0": "0.27.4",
+            "minimatch@>=10.0.0 <10.2.3": ">=10.2.3",
+            "lodash@4.17.23": "4.18.1",
+            "follow-redirects@1.15.11": "1.16.0",
+            "@actions/github@6.0.1": "8.0.1",
+            "dompurify@>=3.0.0 <=3.3.3": "3.4.0",
+            "protobufjs@>=7.0.0 <7.5.5": "7.5.5"
         }
     },
     "engines": {
diff --git a/packages/module-api/.gitignore b/packages/module-api/.gitignore
new file mode 100644
index 0000000000..f3868f90cd
--- /dev/null
+++ b/packages/module-api/.gitignore
@@ -0,0 +1,2 @@
+lib/
+temp/
diff --git a/packages/module-api/Dockerfile b/packages/module-api/Dockerfile
new file mode 100644
index 0000000000..9682ff9ef5
--- /dev/null
+++ b/packages/module-api/Dockerfile
@@ -0,0 +1,24 @@
+ARG ELEMENT_VERSION=latest@sha256:c7fa40b5ba3891f8af3ce63da0818f457c1802a9ee4d2f5e46a9df36a2388eed
+
+FROM --platform=$BUILDPLATFORM node:lts-alpine@sha256:d1b3b4da11eefd5941e7f0b9cf17783fc99d9c6fc34884a665f40a06dbdfc94f AS builder
+
+ARG BUILD_CONTEXT
+
+RUN apk add --no-cache jq
+
+WORKDIR /app
+COPY package.json yarn.lock ./
+# Copy the package.json files of all modules & packages to ensure the frozen workspace lockfile holds up
+RUN --mount=type=bind,target=/docker-context \
+    cd /docker-context/; \
+    find . -path ./node_modules -prune -o -name "package.json" -mindepth 0 -maxdepth 4 -exec cp --parents "{}" /app/ \;
+RUN yarn install --frozen-lockfile --ignore-scripts
+COPY tsconfig.json ./
+COPY ./$BUILD_CONTEXT ./$BUILD_CONTEXT
+RUN cd $BUILD_CONTEXT && yarn vite build
+RUN mkdir /modules
+RUN cp -r ./$BUILD_CONTEXT/lib/ /modules/$(jq -r '"\(.name)-v\(.version)"' ./$BUILD_CONTEXT/package.json)
+
+FROM ghcr.io/element-hq/element-web:${ELEMENT_VERSION}
+
+COPY --from=builder /modules /modules/
\ No newline at end of file
diff --git a/packages/module-api/README.md b/packages/module-api/README.md
new file mode 100644
index 0000000000..93186ed438
--- /dev/null
+++ b/packages/module-api/README.md
@@ -0,0 +1,68 @@
+# @element-hq/element-web-module-api
+
+API surface for extending Element Web in a safe & predictable way.
+
+This project is still in early development but aims to replace matrix-react-sdk-module-api and Element Web deprecated customisations.
+
+## Using the API
+
+Modules are loaded by Element Web at runtime via a dynamic ecmascript import, but can be bundled into a webapp for deployment convenience.
+
+The module's default export MUST be a class which accepts a single argument, an instance of `ModuleApi`.
+This class must also bear a static property `moduleApiVersion` which is a semver range string
+and a `load` method which is called when the module is to be loaded.
+
+```typescript
+import type { Module, Api, ModuleFactory } from "@element-hq/element-web-module-api";
+
+class ExampleModule implements Module {
+    public static readonly moduleApiVersion = "^0.1.0";
+
+    public constructor(private api: Api) {}
+
+    public async load(): Promise<void> {
+        // Your extension code goes here
+    }
+}
+
+export default ExampleModule satisfies ModuleFactory;
+```
+
+### Accessing application configuration
+
+The `api` object passed to the module constructor provides access to the application configuration.
+You can extend the Config types using declaration merging, though please ensure that you do not trust the types you specify,
+and opt for runtime validation due to the dynamic nature of the configuration.
+
+```typescript
+// ...
+declare module "@element-hq/element-web-module-api" {
+    interface Config {
+        "this.is.my.config.key": string;
+    }
+}
+
+class ExampleModule implements Module {
+    // ...
+    public async load(): Promise<void> {
+        const configValue = this.api.config.get("this.is.my.config.key");
+        // Your extension code goes here
+    }
+}
+// ...
+```
+
+## Releases
+
+The API is versioned using semver, with the major version incremented for breaking changes.
+
+## Copyright & License
+
+Copyright (c) 2025 New Vector Ltd
+
+This software is multi licensed by New Vector Ltd (Element). It can be used either:
+
+(1) for free under the terms of the GNU Affero General Public License (as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version); OR
+
+(2) under the terms of a paid-for Element Commercial License agreement between you and Element (the terms of which may vary depending on what you and Element have agreed to).
+Unless required by applicable law or agreed to in writing, software distributed under the Licenses is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the Licenses for the specific language governing permissions and limitations under the Licenses.
diff --git a/packages/module-api/api-extractor.json b/packages/module-api/api-extractor.json
new file mode 100644
index 0000000000..e945efc023
--- /dev/null
+++ b/packages/module-api/api-extractor.json
@@ -0,0 +1,454 @@
+/**
+ * Config file for API Extractor.  For more info, please visit: https://api-extractor.com
+ */
+{
+    "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+
+    /**
+     * Optionally specifies another JSON config file that this file extends from.  This provides a way for
+     * standard settings to be shared across multiple projects.
+     *
+     * If the path starts with "./" or "../", the path is resolved relative to the folder of the file that contains
+     * the "extends" field.  Otherwise, the first path segment is interpreted as an NPM package name, and will be
+     * resolved using NodeJS require().
+     *
+     * SUPPORTED TOKENS: none
+     * DEFAULT VALUE: ""
+     */
+    // "extends": "./shared/api-extractor-base.json"
+    // "extends": "my-package/include/api-extractor-base.json"
+
+    /**
+     * Determines the "<projectFolder>" token that can be used with other config file settings.  The project folder
+     * typically contains the tsconfig.json and package.json config files, but the path is user-defined.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting.
+     *
+     * The default value for "projectFolder" is the token "<lookup>", which means the folder is determined by traversing
+     * parent folders, starting from the folder containing api-extractor.json, and stopping at the first folder
+     * that contains a tsconfig.json file.  If a tsconfig.json file cannot be found in this way, then an error
+     * will be reported.
+     *
+     * SUPPORTED TOKENS: <lookup>
+     * DEFAULT VALUE: "<lookup>"
+     */
+    // "projectFolder": "..",
+
+    /**
+     * (REQUIRED) Specifies the .d.ts file to be used as the starting point for analysis.  API Extractor
+     * analyzes the symbols exported by this module.
+     *
+     * The file extension must be ".d.ts" and not ".ts".
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     */
+    "mainEntryPointFilePath": "<projectFolder>/lib/index.d.ts",
+
+    /**
+     * A list of NPM package names whose exports should be treated as part of this package.
+     *
+     * For example, suppose that Webpack is used to generate a distributed bundle for the project "library1",
+     * and another NPM package "library2" is embedded in this bundle.  Some types from library2 may become part
+     * of the exported API for library1, but by default API Extractor would generate a .d.ts rollup that explicitly
+     * imports library2.  To avoid this, we might specify:
+     *
+     *   "bundledPackages": [ "library2" ],
+     *
+     * This would direct API Extractor to embed those types directly in the .d.ts rollup, as if they had been
+     * local files for library1.
+     *
+     * The "bundledPackages" elements may specify glob patterns using minimatch syntax.  To ensure deterministic
+     * output, globs are expanded by matching explicitly declared top-level dependencies only.  For example,
+     * the pattern below will NOT match "@my-company/example" unless it appears in a field such as "dependencies"
+     * or "devDependencies" of the project's package.json file:
+     *
+     *   "bundledPackages": [ "@my-company/*" ],
+     */
+    "bundledPackages": [],
+
+    /**
+     * Specifies what type of newlines API Extractor should use when writing output files.  By default, the output files
+     * will be written with Windows-style newlines.  To use POSIX-style newlines, specify "lf" instead.
+     * To use the OS's default newline kind, specify "os".
+     *
+     * DEFAULT VALUE: "crlf"
+     */
+    // "newlineKind": "crlf",
+
+    /**
+     * Specifies how API Extractor sorts members of an enum when generating the .api.json file. By default, the output
+     * files will be sorted alphabetically, which is "by-name". To keep the ordering in the source code, specify
+     * "preserve".
+     *
+     * DEFAULT VALUE: "by-name"
+     */
+    // "enumMemberOrder": "by-name",
+
+    /**
+     * Set to true when invoking API Extractor's test harness. When `testMode` is true, the `toolVersion` field in the
+     * .api.json file is assigned an empty string to prevent spurious diffs in output files tracked for tests.
+     *
+     * DEFAULT VALUE: "false"
+     */
+    // "testMode": false,
+
+    /**
+     * Determines how the TypeScript compiler engine will be invoked by API Extractor.
+     */
+    "compiler": {
+        /**
+         * Specifies the path to the tsconfig.json file to be used by API Extractor when analyzing the project.
+         *
+         * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+         * prepend a folder token such as "<projectFolder>".
+         *
+         * Note: This setting will be ignored if "overrideTsconfig" is used.
+         *
+         * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+         * DEFAULT VALUE: "<projectFolder>/tsconfig.json"
+         */
+        // "tsconfigFilePath": "<projectFolder>/tsconfig.json",
+        /**
+         * Provides a compiler configuration that will be used instead of reading the tsconfig.json file from disk.
+         * The object must conform to the TypeScript tsconfig schema:
+         *
+         * http://json.schemastore.org/tsconfig
+         *
+         * If omitted, then the tsconfig.json file will be read from the "projectFolder".
+         *
+         * DEFAULT VALUE: no overrideTsconfig section
+         */
+        // "overrideTsconfig": {
+        //   . . .
+        // }
+        /**
+         * This option causes the compiler to be invoked with the --skipLibCheck option. This option is not recommended
+         * and may cause API Extractor to produce incomplete or incorrect declarations, but it may be required when
+         * dependencies contain declarations that are incompatible with the TypeScript engine that API Extractor uses
+         * for its analysis.  Where possible, the underlying issue should be fixed rather than relying on skipLibCheck.
+         *
+         * DEFAULT VALUE: false
+         */
+        // "skipLibCheck": true,
+    },
+
+    /**
+     * Configures how the API report file (*.api.md) will be generated.
+     */
+    "apiReport": {
+        /**
+         * (REQUIRED) Whether to generate an API report.
+         */
+        "enabled": true,
+
+        /**
+         * The base filename for the API report files, to be combined with "reportFolder" or "reportTempFolder"
+         * to produce the full file path.  The "reportFileName" should not include any path separators such as
+         * "\" or "/".  The "reportFileName" should not include a file extension, since API Extractor will automatically
+         * append an appropriate file extension such as ".api.md".  If the "reportVariants" setting is used, then the
+         * file extension includes the variant name, for example "my-report.public.api.md" or "my-report.beta.api.md".
+         * The "complete" variant always uses the simple extension "my-report.api.md".
+         *
+         * Previous versions of API Extractor required "reportFileName" to include the ".api.md" extension explicitly;
+         * for backwards compatibility, that is still accepted but will be discarded before applying the above rules.
+         *
+         * SUPPORTED TOKENS: <packageName>, <unscopedPackageName>
+         * DEFAULT VALUE: "<unscopedPackageName>"
+         */
+        // "reportFileName": "<unscopedPackageName>",
+
+        /**
+         * To support different approval requirements for different API levels, multiple "variants" of the API report can
+         * be generated.  The "reportVariants" setting specifies a list of variants to be generated.  If omitted,
+         * by default only the "complete" variant will be generated, which includes all @internal, @alpha, @beta,
+         * and @public items.  Other possible variants are "alpha" (@alpha + @beta + @public), "beta" (@beta + @public),
+         * and "public" (@public only).
+         *
+         * DEFAULT VALUE: [ "complete" ]
+         */
+        // "reportVariants": ["public", "beta"],
+
+        /**
+         * Specifies the folder where the API report file is written.  The file name portion is determined by
+         * the "reportFileName" setting.
+         *
+         * The API report file is normally tracked by Git.  Changes to it can be used to trigger a branch policy,
+         * e.g. for an API review.
+         *
+         * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+         * prepend a folder token such as "<projectFolder>".
+         *
+         * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+         * DEFAULT VALUE: "<projectFolder>/etc/"
+         */
+        "reportFolder": "<projectFolder>/"
+
+        /**
+         * Specifies the folder where the temporary report file is written.  The file name portion is determined by
+         * the "reportFileName" setting.
+         *
+         * After the temporary file is written to disk, it is compared with the file in the "reportFolder".
+         * If they are different, a production build will fail.
+         *
+         * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+         * prepend a folder token such as "<projectFolder>".
+         *
+         * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+         * DEFAULT VALUE: "<projectFolder>/temp/"
+         */
+        // "reportTempFolder": "<projectFolder>/temp/",
+
+        /**
+         * Whether "forgotten exports" should be included in the API report file. Forgotten exports are declarations
+         * flagged with `ae-forgotten-export` warnings. See https://api-extractor.com/pages/messages/ae-forgotten-export/ to
+         * learn more.
+         *
+         * DEFAULT VALUE: "false"
+         */
+        // "includeForgottenExports": false
+    },
+
+    /**
+     * Configures how the doc model file (*.api.json) will be generated.
+     */
+    "docModel": {
+        /**
+         * (REQUIRED) Whether to generate a doc model file.
+         */
+        "enabled": true
+
+        /**
+         * The output path for the doc model file.  The file extension should be ".api.json".
+         *
+         * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+         * prepend a folder token such as "<projectFolder>".
+         *
+         * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+         * DEFAULT VALUE: "<projectFolder>/temp/<unscopedPackageName>.api.json"
+         */
+        // "apiJsonFilePath": "<projectFolder>/temp/<unscopedPackageName>.api.json",
+
+        /**
+         * Whether "forgotten exports" should be included in the doc model file. Forgotten exports are declarations
+         * flagged with `ae-forgotten-export` warnings. See https://api-extractor.com/pages/messages/ae-forgotten-export/ to
+         * learn more.
+         *
+         * DEFAULT VALUE: "false"
+         */
+        // "includeForgottenExports": false,
+
+        /**
+         * The base URL where the project's source code can be viewed on a website such as GitHub or
+         * Azure DevOps. This URL path corresponds to the `<projectFolder>` path on disk.
+         *
+         * This URL is concatenated with the file paths serialized to the doc model to produce URL file paths to individual API items.
+         * For example, if the `projectFolderUrl` is "https://github.com/microsoft/rushstack/tree/main/apps/api-extractor" and an API
+         * item's file path is "api/ExtractorConfig.ts", the full URL file path would be
+         * "https://github.com/microsoft/rushstack/tree/main/apps/api-extractor/api/ExtractorConfig.js".
+         *
+         * This setting can be omitted if you don't need source code links in your API documentation reference.
+         *
+         * SUPPORTED TOKENS: none
+         * DEFAULT VALUE: ""
+         */
+        // "projectFolderUrl": "http://github.com/path/to/your/projectFolder"
+    },
+
+    /**
+     * Configures how the .d.ts rollup file will be generated.
+     */
+    "dtsRollup": {
+        /**
+         * (REQUIRED) Whether to generate the .d.ts rollup file.
+         */
+        "enabled": true,
+
+        /**
+         * Specifies the output path for a .d.ts rollup file to be generated without any trimming.
+         * This file will include all declarations that are exported by the main entry point.
+         *
+         * If the path is an empty string, then this file will not be written.
+         *
+         * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+         * prepend a folder token such as "<projectFolder>".
+         *
+         * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+         * DEFAULT VALUE: "<projectFolder>/dist/<unscopedPackageName>.d.ts"
+         */
+        "untrimmedFilePath": "<projectFolder>/lib/<unscopedPackageName>.d.ts",
+
+        /**
+         * Specifies the output path for a .d.ts rollup file to be generated with trimming for an "alpha" release.
+         * This file will include only declarations that are marked as "@public", "@beta", or "@alpha".
+         *
+         * If the path is an empty string, then this file will not be written.
+         *
+         * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+         * prepend a folder token such as "<projectFolder>".
+         *
+         * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+         * DEFAULT VALUE: ""
+         */
+        "alphaTrimmedFilePath": "<projectFolder>/lib/<unscopedPackageName>-alpha.d.ts",
+
+        /**
+         * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "beta" release.
+         * This file will include only declarations that are marked as "@public" or "@beta".
+         *
+         * If the path is an empty string, then this file will not be written.
+         *
+         * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+         * prepend a folder token such as "<projectFolder>".
+         *
+         * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+         * DEFAULT VALUE: ""
+         */
+        "betaTrimmedFilePath": "<projectFolder>/lib/<unscopedPackageName>-beta.d.ts",
+
+        /**
+         * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "public" release.
+         * This file will include only declarations that are marked as "@public".
+         *
+         * If the path is an empty string, then this file will not be written.
+         *
+         * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+         * prepend a folder token such as "<projectFolder>".
+         *
+         * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+         * DEFAULT VALUE: ""
+         */
+        "publicTrimmedFilePath": "<projectFolder>/lib/<unscopedPackageName>-public.d.ts"
+
+        /**
+         * When a declaration is trimmed, by default it will be replaced by a code comment such as
+         * "Excluded from this release type: exampleMember".  Set "omitTrimmingComments" to true to remove the
+         * declaration completely.
+         *
+         * DEFAULT VALUE: false
+         */
+        // "omitTrimmingComments": true
+    },
+
+    /**
+     * Configures how the tsdoc-metadata.json file will be generated.
+     */
+    "tsdocMetadata": {
+        /**
+         * Whether to generate the tsdoc-metadata.json file.
+         *
+         * DEFAULT VALUE: true
+         */
+        // "enabled": true,
+        /**
+         * Specifies where the TSDoc metadata file should be written.
+         *
+         * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+         * prepend a folder token such as "<projectFolder>".
+         *
+         * The default value is "<lookup>", which causes the path to be automatically inferred from the "tsdocMetadata",
+         * "typings" or "main" fields of the project's package.json.  If none of these fields are set, the lookup
+         * falls back to "tsdoc-metadata.json" in the package folder.
+         *
+         * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+         * DEFAULT VALUE: "<lookup>"
+         */
+        // "tsdocMetadataFilePath": "<projectFolder>/dist/tsdoc-metadata.json"
+    },
+
+    /**
+     * Configures how API Extractor reports error and warning messages produced during analysis.
+     *
+     * There are three sources of messages:  compiler messages, API Extractor messages, and TSDoc messages.
+     */
+    "messages": {
+        /**
+         * Configures handling of diagnostic messages reported by the TypeScript compiler engine while analyzing
+         * the input .d.ts files.
+         *
+         * TypeScript message identifiers start with "TS" followed by an integer.  For example: "TS2551"
+         *
+         * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
+         */
+        "compilerMessageReporting": {
+            /**
+             * Configures the default routing for messages that don't match an explicit rule in this table.
+             */
+            "default": {
+                /**
+                 * Specifies whether the message should be written to the the tool's output log.  Note that
+                 * the "addToApiReportFile" property may supersede this option.
+                 *
+                 * Possible values: "error", "warning", "none"
+                 *
+                 * Errors cause the build to fail and return a nonzero exit code.  Warnings cause a production build fail
+                 * and return a nonzero exit code.  For a non-production build (e.g. when "api-extractor run" includes
+                 * the "--local" option), the warning is displayed but the build will not fail.
+                 *
+                 * DEFAULT VALUE: "warning"
+                 */
+                "logLevel": "warning"
+
+                /**
+                 * When addToApiReportFile is true:  If API Extractor is configured to write an API report file (.api.md),
+                 * then the message will be written inside that file; otherwise, the message is instead logged according to
+                 * the "logLevel" option.
+                 *
+                 * DEFAULT VALUE: false
+                 */
+                // "addToApiReportFile": false
+            }
+
+            // "TS2551": {
+            //   "logLevel": "warning",
+            //   "addToApiReportFile": true
+            // },
+            //
+            // . . .
+        },
+
+        /**
+         * Configures handling of messages reported by API Extractor during its analysis.
+         *
+         * API Extractor message identifiers start with "ae-".  For example: "ae-extra-release-tag"
+         *
+         * DEFAULT VALUE: See api-extractor-defaults.json for the complete table of extractorMessageReporting mappings
+         */
+        "extractorMessageReporting": {
+            "default": {
+                "logLevel": "warning"
+                // "addToApiReportFile": false
+            }
+
+            // "ae-extra-release-tag": {
+            //   "logLevel": "warning",
+            //   "addToApiReportFile": true
+            // },
+            //
+            // . . .
+        },
+
+        /**
+         * Configures handling of messages reported by the TSDoc parser when analyzing code comments.
+         *
+         * TSDoc message identifiers start with "tsdoc-".  For example: "tsdoc-link-tag-unescaped-text"
+         *
+         * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
+         */
+        "tsdocMessageReporting": {
+            "default": {
+                "logLevel": "warning"
+                // "addToApiReportFile": false
+            }
+
+            // "tsdoc-link-tag-unescaped-text": {
+            //   "logLevel": "warning",
+            //   "addToApiReportFile": true
+            // },
+            //
+            // . . .
+        }
+    }
+}
diff --git a/packages/module-api/element-web-module-api.api.md b/packages/module-api/element-web-module-api.api.md
new file mode 100644
index 0000000000..8632818f5c
--- /dev/null
+++ b/packages/module-api/element-web-module-api.api.md
@@ -0,0 +1,546 @@
+## API Report File for "@element-hq/element-web-module-api"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { ComponentType } from 'react';
+import { IWidget } from 'matrix-widget-api';
+import { JSX } from 'react';
+import { ModuleApi } from '@matrix-org/react-sdk-module-api';
+import { ReactNode } from 'react';
+import { Root } from 'react-dom/client';
+import { RuntimeModule } from '@matrix-org/react-sdk-module-api';
+
+// @public
+export interface AccountAuthApiExtension {
+    overwriteAccountAuth(accountInfo: AccountAuthInfo): Promise<void>;
+}
+
+// @public
+export interface AccountAuthInfo {
+    accessToken: string;
+    deviceId: string;
+    homeserverUrl: string;
+    refreshToken?: string;
+    userId: string;
+}
+
+// @public
+export interface AccountDataApi {
+    delete(eventType: string): Promise<void>;
+    get(eventType: string): Watchable<unknown>;
+    set(eventType: string, content: unknown): Promise<void>;
+}
+
+// @alpha @deprecated (undocumented)
+export interface AliasCustomisations {
+    // (undocumented)
+    getDisplayAliasForAliasSet?(canonicalAlias: string | null, altAliases: string[]): string | null;
+}
+
+// Warning: (ae-incompatible-release-tags) The symbol "Api" is marked as @public, but its signature references "LegacyModuleApiExtension" which is marked as @alpha
+// Warning: (ae-incompatible-release-tags) The symbol "Api" is marked as @public, but its signature references "LegacyCustomisationsApiExtension" which is marked as @alpha
+//
+// @public
+export interface Api extends LegacyModuleApiExtension, LegacyCustomisationsApiExtension, DialogApiExtension, AccountAuthApiExtension, ProfileApiExtension {
+    // @alpha
+    readonly builtins: BuiltinsApi;
+    readonly client: ClientApi;
+    readonly config: ConfigApi;
+    createRoot(element: Element): Root;
+    // @alpha
+    readonly customComponents: CustomComponentsApi;
+    // @alpha
+    readonly customisations: CustomisationsApi;
+    // @alpha
+    readonly extras: ExtrasApi;
+    readonly i18n: I18nApi;
+    readonly navigation: NavigationApi;
+    readonly rootNode: HTMLElement;
+    readonly stores: StoresApi;
+    // @alpha
+    readonly widget: WidgetApi;
+    // @alpha
+    readonly widgetLifecycle: WidgetLifecycleApi;
+}
+
+// @alpha
+export interface BuiltinsApi {
+    renderNotificationDecoration(roomId: string): React.ReactNode;
+    renderRoomAvatar(roomId: string, size?: string): React.ReactNode;
+    renderRoomView(roomId: string, props?: RoomViewProps): React.ReactNode;
+}
+
+// @alpha
+export type CapabilitiesApprover = (widget: WidgetDescriptor, requestedCapabilities: Set<string>) => MaybePromise<Set<string> | undefined>;
+
+// @alpha @deprecated (undocumented)
+export interface ChatExportCustomisations<ExportFormat, ExportType> {
+    getForceChatExportParameters(): {
+        format?: ExportFormat;
+        range?: ExportType;
+        numberOfMessages?: number;
+        includeAttachments?: boolean;
+        sizeMb?: number;
+    };
+}
+
+// @public
+export interface ClientApi {
+    accountData: AccountDataApi;
+    getRoom: (id: string) => Room | null;
+}
+
+// @alpha @deprecated (undocumented)
+export interface ComponentVisibilityCustomisations {
+    shouldShowComponent?(component: "UIComponent.sendInvites" | "UIComponent.roomCreation" | "UIComponent.spaceCreation" | "UIComponent.exploreRooms" | "UIComponent.addIntegrations" | "UIComponent.filterContainer" | "UIComponent.roomOptionsMenu"): boolean;
+}
+
+// @public
+export interface Config {
+    // (undocumented)
+    brand: string;
+}
+
+// @public
+export interface ConfigApi {
+    // (undocumented)
+    get(): Config;
+    // (undocumented)
+    get<K extends keyof Config>(key: K): Config[K];
+    // (undocumented)
+    get<K extends keyof Config = never>(key?: K): Config | Config[K];
+}
+
+// @alpha
+export type Container = "top" | "right" | "center";
+
+// @alpha
+export interface CustomComponentsApi {
+    registerLoginComponent(renderer: CustomLoginRenderFunction): void;
+    registerMessageRenderer(eventTypeOrFilter: string | ((mxEvent: MatrixEvent) => boolean), renderer: CustomMessageRenderFunction, hints?: CustomMessageRenderHints): void;
+    registerRoomPreviewBar(renderer: CustomRoomPreviewBarRenderFunction): void;
+}
+
+// @alpha
+export interface CustomisationsApi {
+    registerShouldShowComponent(fn: (this: void, component: UIComponent) => boolean | void): void;
+}
+
+// @alpha
+export type CustomLoginComponentProps = {
+    serverConfig: CustomLoginComponentPropsServerConfig;
+    fragmentAfterLogin?: string;
+    children?: ReactNode;
+    onLoggedIn(data: AccountAuthInfo): void;
+    onServerConfigChange(config: CustomLoginComponentPropsServerConfig): void;
+};
+
+// @alpha
+export interface CustomLoginComponentPropsServerConfig {
+    hsName: string;
+    hsUrl: string;
+}
+
+// @alpha
+export type CustomLoginRenderFunction = ExtendablePropsRenderFunction<CustomLoginComponentProps>;
+
+// @alpha
+export type CustomMessageComponentProps = {
+    mxEvent: MatrixEvent;
+};
+
+// @alpha
+export type CustomMessageRenderFunction = (
+props: CustomMessageComponentProps,
+originalComponent?: (props?: OriginalMessageComponentProps) => React.JSX.Element) => JSX.Element;
+
+// @alpha
+export type CustomMessageRenderHints = {
+    allowEditingEvent?: boolean;
+    allowDownloadingMedia?: (mxEvent: MatrixEvent) => Promise<boolean>;
+};
+
+// @alpha
+export type CustomRoomPreviewBarComponentProps = {
+    roomId?: string;
+    roomAlias?: string;
+};
+
+// @alpha
+export type CustomRoomPreviewBarRenderFunction = (
+props: CustomRoomPreviewBarComponentProps,
+originalComponent: (props: CustomRoomPreviewBarComponentProps) => JSX.Element) => JSX.Element;
+
+// @public
+export interface DialogApiExtension {
+    openDialog<M, P extends object>(initialOptions: DialogOptions, dialog: ComponentType<P & DialogProps<M>>, props: P): DialogHandle<M>;
+}
+
+// @public
+export type DialogHandle<M> = {
+    finished: Promise<{
+        ok: boolean;
+        model: M | null;
+    }>;
+    close(): void;
+};
+
+// @public
+export interface DialogOptions {
+    title: string;
+}
+
+// @public
+export type DialogProps<M> = {
+    onSubmit(model: M): void;
+    onCancel(): void;
+};
+
+// @alpha @deprecated (undocumented)
+export interface DirectoryCustomisations {
+    // (undocumented)
+    requireCanonicalAliasAccessToPublish?(): boolean;
+}
+
+// @alpha
+export type ExtendablePropsRenderFunction<BaseProps> = <P extends BaseProps>(
+props: P,
+originalComponent: (props: P) => JSX.Element) => JSX.Element;
+
+// @alpha
+export interface ExtrasApi {
+    addRoomHeaderButtonCallback(cb: RoomHeaderButtonsCallback): void;
+    getVisibleRoomBySpaceKey(spaceKey: string, cb: () => string[]): void;
+    setSpacePanelItem(spaceKey: string, props: SpacePanelItemProps): void;
+}
+
+// @public
+export interface I18nApi {
+    humanizeTime(this: void, timeMillis: number): string;
+    get language(): string;
+    register(this: void, translations: Partial<Translations>): void;
+    translate(this: void, key: keyof Translations, variables?: Variables): string;
+    translate(this: void, key: keyof Translations, variables: Variables | undefined, tags: Tags): ReactNode;
+}
+
+// @alpha
+export type IdentityApprover = (widget: WidgetDescriptor) => MaybePromise<boolean | undefined>;
+
+// @alpha @deprecated (undocumented)
+export type LegacyCustomisations<T extends object> = (customisations: T) => void;
+
+// @alpha @deprecated (undocumented)
+export interface LegacyCustomisationsApiExtension {
+    // @deprecated (undocumented)
+    readonly _registerLegacyAliasCustomisations: LegacyCustomisations<AliasCustomisations>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyChatExportCustomisations: LegacyCustomisations<ChatExportCustomisations<never, never>>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyComponentVisibilityCustomisations: LegacyCustomisations<ComponentVisibilityCustomisations>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyDirectoryCustomisations: LegacyCustomisations<DirectoryCustomisations>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyLifecycleCustomisations: LegacyCustomisations<LifecycleCustomisations>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyMediaCustomisations: LegacyCustomisations<MediaCustomisations<never, never, never>>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyRoomListCustomisations: LegacyCustomisations<RoomListCustomisations<never>>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyUserIdentifierCustomisations: LegacyCustomisations<UserIdentifierCustomisations>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyWidgetPermissionsCustomisations: LegacyCustomisations<WidgetPermissionsCustomisations<never, never>>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyWidgetVariablesCustomisations: LegacyCustomisations<WidgetVariablesCustomisations>;
+}
+
+// @alpha @deprecated (undocumented)
+export interface LegacyModuleApiExtension {
+    // @deprecated
+    _registerLegacyModule(LegacyModule: RuntimeModuleConstructor): Promise<void>;
+}
+
+// @alpha @deprecated (undocumented)
+export interface LifecycleCustomisations {
+    // (undocumented)
+    onLoggedOutAndStorageCleared?(): void;
+}
+
+// @alpha
+export type LocationRenderFunction = () => JSX.Element;
+
+// @alpha
+export interface MatrixEvent {
+    content: Record<string, unknown>;
+    eventId: string;
+    originServerTs: number;
+    roomId: string;
+    sender: string;
+    stateKey?: string;
+    type: string;
+    unsigned: Record<string, unknown>;
+}
+
+// @public
+export type MaybePromise<T> = T | PromiseLike<T>;
+
+// @alpha @deprecated (undocumented)
+export interface Media {
+    // (undocumented)
+    downloadSource(): Promise<Response>;
+    // (undocumented)
+    getSquareThumbnailHttp(dim: number): string | null;
+    // (undocumented)
+    getThumbnailHttp(width: number, height: number, mode?: "scale" | "crop"): string | null;
+    // (undocumented)
+    getThumbnailOfSourceHttp(width: number, height: number, mode?: "scale" | "crop"): string | null;
+    // (undocumented)
+    readonly hasThumbnail: boolean;
+    // (undocumented)
+    readonly isEncrypted: boolean;
+    // (undocumented)
+    readonly srcHttp: string | null;
+    // (undocumented)
+    readonly srcMxc: string;
+    // (undocumented)
+    readonly thumbnailHttp: string | null;
+    // (undocumented)
+    readonly thumbnailMxc: string | null | undefined;
+}
+
+// @alpha @deprecated (undocumented)
+export interface MediaContructable<PreparedMedia> {
+    // (undocumented)
+    new (prepared: PreparedMedia): Media;
+}
+
+// @alpha @deprecated (undocumented)
+export interface MediaCustomisations<Content, Client, PreparedMedia> {
+    // (undocumented)
+    readonly Media: MediaContructable<PreparedMedia>;
+    // (undocumented)
+    mediaFromContent(content: Content, client?: Client): Media;
+    // (undocumented)
+    mediaFromMxc(mxc?: string, client?: Client): Media;
+}
+
+// @public
+export interface Module {
+    // (undocumented)
+    load(): Promise<void>;
+}
+
+// @public
+export interface ModuleFactory {
+    // (undocumented)
+    new (api: Api): Module;
+    // (undocumented)
+    readonly moduleApiVersion: string;
+    // (undocumented)
+    readonly prototype: Module;
+}
+
+// @public
+export class ModuleIncompatibleError extends Error {
+    constructor(pluginVersion: string);
+}
+
+// @public
+export class ModuleLoader {
+    constructor(api: Api);
+    // Warning: (ae-forgotten-export) The symbol "ModuleExport" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
+    load(moduleExport: ModuleExport): Promise<void>;
+    // (undocumented)
+    start(): Promise<void>;
+}
+
+// @public
+export interface NavigationApi {
+    openRoom(roomIdOrAlias: string, opts?: OpenRoomOptions): void;
+    // @alpha
+    registerLocationRenderer(path: string, renderer: LocationRenderFunction): void;
+    toMatrixToLink(link: string, join?: boolean): Promise<void>;
+}
+
+// @public
+export interface OpenRoomOptions {
+    autoJoin?: boolean;
+    viaServers?: string[];
+}
+
+// @alpha
+export type OriginalMessageComponentProps = {
+    showUrlPreview?: boolean;
+};
+
+// @alpha
+export type PreloadApprover = (widget: WidgetDescriptor) => MaybePromise<boolean | undefined>;
+
+// @public
+export interface Profile {
+    displayName?: string;
+    isGuest?: boolean;
+    userId?: string;
+}
+
+// @public
+export interface ProfileApiExtension {
+    readonly profile: Watchable<Profile>;
+}
+
+// @public
+export interface Room {
+    getLastActiveTimestamp: () => number;
+    id: string;
+    name: Watchable<string>;
+}
+
+// @alpha
+export type RoomHeaderButtonsCallback = (roomId: string) => JSX.Element | undefined;
+
+// @alpha @deprecated (undocumented)
+export interface RoomListCustomisations<Room> {
+    isRoomVisible?(room: Room): boolean;
+}
+
+// @public
+export interface RoomListStoreApi {
+    getRooms(): Watchable<Room[]>;
+    waitForReady(): Promise<void>;
+}
+
+// @alpha
+export interface RoomViewProps {
+    enableReadReceiptsAndMarkersOnActivity?: boolean;
+    hideComposer?: boolean;
+    hideHeader?: boolean;
+    hidePinnedMessageBanner?: boolean;
+    hideRightPanel?: boolean;
+    hideWidgets?: boolean;
+}
+
+// @alpha @deprecated (undocumented)
+export type RuntimeModuleConstructor = new (api: ModuleApi) => RuntimeModule;
+
+// @alpha
+export interface SpacePanelItemProps {
+    className?: string;
+    icon?: JSX.Element;
+    label: string;
+    onSelected: () => void;
+    style?: React.CSSProperties;
+    tooltip?: string;
+}
+
+// @public
+export interface StoresApi {
+    roomListStore: RoomListStoreApi;
+}
+
+// @public
+export type SubstitutionValue = number | string | ReactNode | ((sub: string) => ReactNode);
+
+// @public
+export type Tags = Record<string, SubstitutionValue>;
+
+// @public
+export type Translations = Record<string, {
+    [ietfLanguageTag: string]: string;
+}>;
+
+// @alpha
+export const enum UIComponent {
+    AddIntegrations = "UIComponent.addIntegrations",
+    CreateRooms = "UIComponent.roomCreation",
+    CreateSpaces = "UIComponent.spaceCreation",
+    ExploreRooms = "UIComponent.exploreRooms",
+    FilterContainer = "UIComponent.filterContainer",
+    InviteUsers = "UIComponent.sendInvites",
+    RoomOptionsMenu = "UIComponent.roomOptionsMenu"
+}
+
+// @alpha @deprecated (undocumented)
+export interface UserIdentifierCustomisations {
+    getDisplayUserIdentifier(userId: string, opts: {
+        roomId?: string;
+        withDisplayName?: boolean;
+    }): string | null;
+}
+
+// @public
+export function useWatchable<T>(watchable: Watchable<T>): T;
+
+// @public
+export type Variables = {
+    count?: number;
+    [key: string]: SubstitutionValue;
+};
+
+// @public
+export class Watchable<T> {
+    constructor(currentValue: T);
+    // Warning: (ae-forgotten-export) The symbol "WatchFn" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
+    protected readonly listeners: Set<WatchFn<T>>;
+    protected onFirstWatch(): void;
+    protected onLastWatch(): void;
+    // (undocumented)
+    unwatch(listener: (value: T) => void): void;
+    get value(): T;
+    set value(value: T);
+    // (undocumented)
+    watch(listener: (value: T) => void): void;
+}
+
+// @alpha
+export interface WidgetApi {
+    getAppAvatarUrl(app: IWidget, width?: number, height?: number, resizeMethod?: string): string | null;
+    getWidgetsInRoom(roomId: string): IWidget[];
+    isAppInContainer(app: IWidget, container: Container, roomId: string): boolean;
+    moveAppToContainer(app: IWidget, container: Container, roomId: string): void;
+}
+
+// @alpha
+export type WidgetDescriptor = {
+    id: string;
+    templateUrl: string;
+    creatorUserId: string;
+    type: string;
+    origin: string;
+    roomId?: string;
+};
+
+// @alpha
+export interface WidgetLifecycleApi {
+    registerCapabilitiesApprover(approver: CapabilitiesApprover): void;
+    registerIdentityApprover(approver: IdentityApprover): void;
+    registerPreloadApprover(approver: PreloadApprover): void;
+}
+
+// @alpha @deprecated (undocumented)
+export interface WidgetPermissionsCustomisations<Widget, Capability> {
+    preapproveCapabilities?(widget: Widget, requestedCapabilities: Set<Capability>): Promise<Set<Capability>>;
+}
+
+// @alpha @deprecated (undocumented)
+export interface WidgetVariablesCustomisations {
+    isReady?(): Promise<void>;
+    provideVariables?(): {
+        currentUserId: string;
+        userDisplayName?: string;
+        userHttpAvatarUrl?: string;
+        clientId?: string;
+        clientTheme?: string;
+        clientLanguage?: string;
+        deviceId?: string;
+        baseUrl?: string;
+    };
+}
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/packages/module-api/package.json b/packages/module-api/package.json
new file mode 100644
index 0000000000..c366f61942
--- /dev/null
+++ b/packages/module-api/package.json
@@ -0,0 +1,68 @@
+{
+    "name": "@element-hq/element-web-module-api",
+    "type": "module",
+    "version": "1.13.0",
+    "description": "Module API surface for element-web",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/element-hq/element-modules.git",
+        "directory": "packages/element-web-module-api"
+    },
+    "author": "element-hq",
+    "license": "SEE LICENSE IN README.md",
+    "engines": {
+        "node": ">=20.0.0"
+    },
+    "types": "./lib/element-web-module-api-alpha.d.ts",
+    "exports": {
+        ".": {
+            "types": "./lib/element-web-module-api-alpha.d.ts",
+            "import": "./lib/element-web-plugin-engine.js",
+            "require": "./lib/element-web-plugin-engine.umd.cjs"
+        }
+    },
+    "files": [
+        "lib"
+    ],
+    "scripts": {
+        "prepack": "nx build",
+        "lint:types": "nx lint:types",
+        "test:unit": "vitest"
+    },
+    "devDependencies": {
+        "@matrix-org/react-sdk-module-api": "^2.5.0",
+        "@microsoft/api-extractor": "^7.49.1",
+        "@types/node": "^22.10.7",
+        "@types/react": "^19",
+        "@types/react-dom": "^19.0.4",
+        "@types/semver": "^7.5.8",
+        "@vitest/coverage-v8": "^4.0.0",
+        "matrix-widget-api": "^1.17.0",
+        "rollup-plugin-external-globals": "^0.13.0",
+        "semver": "^7.6.3",
+        "typescript": "^6.0.0",
+        "unplugin-dts": "1.0.0-beta.6",
+        "vite": "^8.0.0",
+        "vitest": "^4.0.0",
+        "vitest-sonar-reporter": "^3.0.0"
+    },
+    "peerDependencies": {
+        "@matrix-org/react-sdk-module-api": "*",
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "matrix-web-i18n": "*",
+        "matrix-widget-api": "*",
+        "react": "^19"
+    },
+    "peerDependenciesMeta": {
+        "@matrix-org/react-sdk-module-api": {
+            "optional": true
+        },
+        "matrix-widget-api": {
+            "optional": true
+        },
+        "matrix-web-i18n": {
+            "optional": true
+        }
+    }
+}
diff --git a/packages/module-api/project.json b/packages/module-api/project.json
new file mode 100644
index 0000000000..2b7e0be792
--- /dev/null
+++ b/packages/module-api/project.json
@@ -0,0 +1,28 @@
+{
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "projectType": "library",
+    "root": "packages/module-api",
+    "targets": {
+        "build": {
+            "cache": true,
+            "executor": "nx:run-commands",
+            "inputs": ["src"],
+            "outputs": ["{projectRoot}/lib"],
+            "options": {
+                "commands": ["vite build", "api-extractor run"],
+                "parallel": false,
+                "cwd": "packages/module-api"
+            }
+        },
+        "start": {
+            "command": "vite build --watch",
+            "options": { "cwd": "packages/module-api" },
+            "dependsOn": ["^start"],
+            "continuous": true
+        },
+        "lint:types": {
+            "command": "pnpm exec tsc --noEmit",
+            "options": { "cwd": "packages/module-api" }
+        }
+    }
+}
diff --git a/packages/module-api/src/@types/global.d.ts b/packages/module-api/src/@types/global.d.ts
new file mode 100644
index 0000000000..82ae781eb5
--- /dev/null
+++ b/packages/module-api/src/@types/global.d.ts
@@ -0,0 +1,13 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+declare global {
+    // eslint-disable-next-line no-var
+    var __VERSION__: string; // injected by vite
+}
+
+export {};
diff --git a/packages/module-api/src/api/auth.ts b/packages/module-api/src/api/auth.ts
new file mode 100644
index 0000000000..5ecdcd3c25
--- /dev/null
+++ b/packages/module-api/src/api/auth.ts
@@ -0,0 +1,45 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/**
+ * Interface for account authentication information, used for overwriting the current account's authentication state.
+ * @public
+ */
+export interface AccountAuthInfo {
+    /**
+     * The user ID.
+     */
+    userId: string;
+    /**
+     * The device ID.
+     */
+    deviceId: string;
+    /**
+     * The access token belonging to this device ID and user ID.
+     */
+    accessToken: string;
+    /**
+     * The refresh token belonging to this device ID and user ID.
+     */
+    refreshToken?: string;
+    /**
+     * The homeserver URL where the credentials are valid.
+     */
+    homeserverUrl: string;
+}
+
+/**
+ * Methods to manage authentication in the application.
+ * @public
+ */
+export interface AccountAuthApiExtension {
+    /**
+     * Overwrite the current account's authentication state with the provided account information.
+     * @param accountInfo - The account authentication information to overwrite the current state with.
+     */
+    overwriteAccountAuth(accountInfo: AccountAuthInfo): Promise<void>;
+}
diff --git a/packages/module-api/src/api/builtins.ts b/packages/module-api/src/api/builtins.ts
new file mode 100644
index 0000000000..d4c461d098
--- /dev/null
+++ b/packages/module-api/src/api/builtins.ts
@@ -0,0 +1,74 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/**
+ * The props that must be passed to a RoomView component.
+ * @alpha Subject to change.
+ */
+export interface RoomViewProps {
+    /**
+     * If true, the room header will be hidden.
+     */
+    hideHeader?: boolean;
+    /**
+     * If true, the message composer will be hidden.
+     */
+    hideComposer?: boolean;
+    /**
+     * If true, the right panel will be hidden.
+     */
+    hideRightPanel?: boolean;
+    /**
+     * If true, the pinned message banner will be hidden.
+     */
+    hidePinnedMessageBanner?: boolean;
+    /**
+     * If true, the widgets will be hidden.
+     */
+    hideWidgets?: boolean;
+    /**
+     * If true, enable sending read receipts and markers on user activity in the room view. When the user interacts with the room view, read receipts and markers are sent.
+     * If false, the read receipts and markers are only send when the room view is focused. The user has to focus the room view in order to clear any unreads and to move the unread marker to the bottom of the view.
+     * @defaultValue true
+     */
+    enableReadReceiptsAndMarkersOnActivity?: boolean;
+}
+
+/**
+ * Exposes components and classes that are part of Element Web to allow modules to
+ * render the components as part of their custom components or use the classes
+ * (because they can't import the components from Element Web since it would cause
+ * a dependency cycle)
+ * @alpha
+ */
+export interface BuiltinsApi {
+    /**
+     * Render room avatar component from element-web.
+     *
+     * @alpha
+     * @param roomId - Id of the room
+     * @param size - Size of the avatar to render
+     */
+    renderRoomAvatar(roomId: string, size?: string): React.ReactNode;
+
+    /**
+     * Render room view component from element-web.
+     *
+     * @alpha
+     * @param roomId - Id of the room
+     * @param props - Additional props to pass to the room view
+     */
+    renderRoomView(roomId: string, props?: RoomViewProps): React.ReactNode;
+
+    /**
+     * Render notification decoration component from element-web.
+     *
+     * @alpha
+     * @param roomId - Id of the room
+     */
+    renderNotificationDecoration(roomId: string): React.ReactNode;
+}
diff --git a/packages/module-api/src/api/client.ts b/packages/module-api/src/api/client.ts
new file mode 100644
index 0000000000..64e2274e89
--- /dev/null
+++ b/packages/module-api/src/api/client.ts
@@ -0,0 +1,46 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import type { Room } from "../models/Room";
+import { type Watchable } from "./watchable";
+
+/**
+ * Modify account data stored on the homeserver.
+ * @public
+ */
+export interface AccountDataApi {
+    /**
+     * Returns a watchable with account data for this event type.
+     */
+    get(eventType: string): Watchable<unknown>;
+    /**
+     * Set account data on the homeserver.
+     */
+    set(eventType: string, content: unknown): Promise<void>;
+    /**
+     * Changes the content of this event to be empty.
+     */
+    delete(eventType: string): Promise<void>;
+}
+
+/**
+ * Access some limited functionality from the SDK.
+ * @public
+ */
+export interface ClientApi {
+    /**
+     * Use this to modify account data on the homeserver.
+     */
+    accountData: AccountDataApi;
+
+    /**
+     * Fetch room by id from SDK.
+     * @param id - Id of the room to get
+     * @returns Room object from SDK
+     */
+    getRoom: (id: string) => Room | null;
+}
diff --git a/packages/module-api/src/api/config.ts b/packages/module-api/src/api/config.ts
new file mode 100644
index 0000000000..5f708b4983
--- /dev/null
+++ b/packages/module-api/src/api/config.ts
@@ -0,0 +1,28 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/**
+ * The configuration for the application.
+ * Should be extended via declaration merging.
+ * @public
+ */
+export interface Config {
+    // The branding name of the application
+    brand: string;
+    // Other config options are available but not specified in the types as that would make it difficult to change for element-web
+    // they are accessible at runtime all the same, see list at https://github.com/element-hq/element-web/blob/develop/docs/config.md
+}
+
+/**
+ * API for accessing the configuration.
+ * @public
+ */
+export interface ConfigApi {
+    get(): Config;
+    get<K extends keyof Config>(key: K): Config[K];
+    get<K extends keyof Config = never>(key?: K): Config | Config[K];
+}
diff --git a/packages/module-api/src/api/custom-components.ts b/packages/module-api/src/api/custom-components.ts
new file mode 100644
index 0000000000..0265c9c63d
--- /dev/null
+++ b/packages/module-api/src/api/custom-components.ts
@@ -0,0 +1,227 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import type { JSX, ReactNode } from "react";
+import type { MatrixEvent } from "../models/event";
+import type { AccountAuthInfo } from "./auth.ts";
+
+/**
+ * Properties for all message components.
+ * @alpha Subject to change.
+ */
+export type CustomMessageComponentProps = {
+    /**
+     * The Matrix event for this textual body.
+     * @alpha
+     */
+    mxEvent: MatrixEvent;
+};
+
+/**
+ * Properties to alter the render function of the original component.
+ * @alpha Subject to change.
+ */
+export type OriginalMessageComponentProps = {
+    /**
+     * Should previews be shown for this event.
+     * This may be overriden by user preferences.
+     */
+    showUrlPreview?: boolean;
+};
+
+/**
+ * Hints to specify to Element when rendering events.
+ * @alpha Subject to change.
+ */
+export type CustomMessageRenderHints = {
+    /**
+     * Should the event be allowed to be edited in the client. This should
+     * be set to false if you override the render function, as the module
+     * API has no way to display message editing at the moment.
+     * Default is true.
+     */
+    allowEditingEvent?: boolean;
+    /**
+     * If an event contains media, this function will be called to check
+     * if the media can be prompted to be downloaded as a file.
+     * If this function is not supplied, media downloads are allowed.
+     */
+    allowDownloadingMedia?: (mxEvent: MatrixEvent) => Promise<boolean>;
+};
+
+/**
+ * Function used to render a message component.
+ * @alpha Subject to change.
+ */
+export type CustomMessageRenderFunction = (
+    /**
+     * Properties for the message to be renderered.
+     */
+    props: CustomMessageComponentProps,
+    /**
+     * Render function for the original component. This may be omitted if the message would not normally be rendered.
+     */
+    originalComponent?: (props?: OriginalMessageComponentProps) => React.JSX.Element,
+) => JSX.Element;
+
+/**
+ * Properties for all message components.
+ * @alpha Subject to change.
+ */
+export type CustomRoomPreviewBarComponentProps = {
+    roomId?: string;
+    roomAlias?: string;
+};
+
+/**
+ * Function used to render a room preview bar component.
+ * @alpha Unlikely to change
+ */
+export type CustomRoomPreviewBarRenderFunction = (
+    /**
+     * Properties for the room preview bar to be rendered.
+     */
+    props: CustomRoomPreviewBarComponentProps,
+    /**
+     * Render function for the original component.
+     */
+    originalComponent: (props: CustomRoomPreviewBarComponentProps) => JSX.Element,
+) => JSX.Element;
+
+/**
+ * Authentication server config object.
+ * @alpha Subject to change.
+ */
+export interface CustomLoginComponentPropsServerConfig {
+    /**
+     * The URL of the homeserver's client-server API
+     */
+    hsUrl: string;
+    /**
+     * The name of the homeserver to present to the user
+     */
+    hsName: string;
+}
+
+/**
+ * Properties for login component.
+ * @alpha Subject to change.
+ */
+export type CustomLoginComponentProps = {
+    /**
+     * The details of the currently chosen Matrix homeserver
+     */
+    serverConfig: CustomLoginComponentPropsServerConfig;
+    /**
+     * The URL fragment to send the user to after authentication is complete
+     */
+    fragmentAfterLogin?: string;
+    /**
+     * Additional components to render as children
+     */
+    children?: ReactNode;
+    /**
+     * Function to complete login
+     * @param data - the data to authenticate the user with
+     */
+    onLoggedIn(data: AccountAuthInfo): void;
+    /**
+     * Function to change the selected server
+     * @param config - new server configuration details
+     */
+    onServerConfigChange(config: CustomLoginComponentPropsServerConfig): void;
+};
+
+/**
+ * Function used to render a component with a superset of the known props.
+ * @alpha Unlikely to change
+ */
+export type ExtendablePropsRenderFunction<BaseProps> = <P extends BaseProps>(
+    /**
+     * Properties for the component to be rendered.
+     */
+    props: P,
+    /**
+     * Render function for the original component.
+     */
+    originalComponent: (props: P) => JSX.Element,
+) => JSX.Element;
+
+/**
+ * Function used to render a login component.
+ * @alpha Unlikely to change
+ */
+export type CustomLoginRenderFunction = ExtendablePropsRenderFunction<CustomLoginComponentProps>;
+
+/**
+ * API for inserting custom components into Element.
+ * @alpha Subject to change.
+ */
+export interface CustomComponentsApi {
+    /**
+     * Register a renderer for a message type in the timeline.
+     *
+     * The render function should return a rendered component.
+     *
+     * Multiple render function may be registered for a single event type, however the first matching
+     * result will be used. If no events match or are registered then the originalComponent is rendered.
+     *
+     * @param eventTypeOrFilter - The event type this renderer is for. Use a function for more complex filtering.
+     * @param renderer - The render function.
+     * @param hints - Hints that alter the way the tile is handled.
+     * @example
+     * ```
+     *  customComponents.registerMessageRenderer("m.room.message", (props, originalComponent) => {
+     *       return <YourCustomComponent mxEvent={props.mxEvent} />;
+     *  });
+     *  customComponents.registerMessageRenderer(
+     *      (mxEvent) => mxEvent.getType().matches(/m\.room\.(topic|name)/) && mxEvent.isState(),
+     *      (props, originalComponent) => {
+     *          return <YourCustomStateRenderer mxEvent={props.mxEvent} />;
+     *      }
+     * );
+     * ```
+     */
+    registerMessageRenderer(
+        eventTypeOrFilter: string | ((mxEvent: MatrixEvent) => boolean),
+        renderer: CustomMessageRenderFunction,
+        hints?: CustomMessageRenderHints,
+    ): void;
+
+    /**
+     * Register a renderer for the room preview bar.
+     *
+     * The render function should return a rendered component.
+     *
+     * @param renderer - The render function for the room preview bar.
+     * @example
+     * ```
+     *  customComponents.registerRoomPreviewBar((props, OriginalComponent) => {
+     *      if (props.roomId === "!some_special_room_id:server") {
+     *          return <YourCustomRoomPreviewBarComponent {...props} />;
+     *      }
+     *      return <YourCustomComponent mxEvent={props.mxEvent} />;
+     *  });
+     * ```
+     */
+    registerRoomPreviewBar(renderer: CustomRoomPreviewBarRenderFunction): void;
+
+    /**
+     * Register a renderer for the login component.
+     *
+     * The render function should return a rendered component.
+     *
+     * @param renderer - The render function for the login component.
+     * @example
+     * ```
+     *  customComponents.registerLoginComponent((props, OriginalComponent) => {
+     *      return <YourCustomComponent onLoggedIn={props.onLoggedIn} />;
+     *  });
+     * ```
+     */
+    registerLoginComponent(renderer: CustomLoginRenderFunction): void;
+}
diff --git a/packages/module-api/src/api/customisations.ts b/packages/module-api/src/api/customisations.ts
new file mode 100644
index 0000000000..1a02c68ed0
--- /dev/null
+++ b/packages/module-api/src/api/customisations.ts
@@ -0,0 +1,65 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/**
+ * Enum of UI components which can have their behaviour tweaked
+ * @alpha
+ */
+export const enum UIComponent {
+    /**
+     * Components that lead to a user being invited.
+     */
+    InviteUsers = "UIComponent.sendInvites",
+
+    /**
+     * Components that lead to a room being created that aren't already
+     * guarded by some other condition (ie: "only if you can edit this
+     * space" is *not* guarded by this component, but "start DM" is).
+     */
+    CreateRooms = "UIComponent.roomCreation",
+
+    /**
+     * Components that lead to a Space being created that aren't already
+     * guarded by some other condition (ie: "only if you can add subspaces"
+     * is *not* guarded by this component, but "create new space" is).
+     */
+    CreateSpaces = "UIComponent.spaceCreation",
+
+    /**
+     * Components that lead to the public room directory.
+     */
+    ExploreRooms = "UIComponent.exploreRooms",
+
+    /**
+     * Components that lead to the user being able to easily add widgets
+     * and integrations to the room, such as from the room information card.
+     */
+    AddIntegrations = "UIComponent.addIntegrations",
+
+    /**
+     * Component that lead to the user being able to search, dial, explore rooms
+     */
+    FilterContainer = "UIComponent.filterContainer",
+
+    /**
+     * Components that lead the user to room options menu.
+     */
+    RoomOptionsMenu = "UIComponent.roomOptionsMenu",
+}
+
+/**
+ * API for customising Element Web's components
+ * @alpha Subject to change.
+ */
+export interface CustomisationsApi {
+    /**
+     * Method to register a callback which can affect whether a given component is drawn or not.
+     * @param fn - the callback, if it returns true the component will be rendered, if false it will not be.
+     *   If undefined will defer to next callback, ultimately falling through to `true` if none return false.
+     */
+    registerShouldShowComponent(fn: (this: void, component: UIComponent) => boolean | void): void;
+}
diff --git a/packages/module-api/src/api/dialog.ts b/packages/module-api/src/api/dialog.ts
new file mode 100644
index 0000000000..cd9a2c867c
--- /dev/null
+++ b/packages/module-api/src/api/dialog.ts
@@ -0,0 +1,68 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type ComponentType } from "react";
+
+/**
+ * Options for {@link Api#openDialog}.
+ * @public
+ */
+export interface DialogOptions {
+    /**
+     * The title of the dialog.
+     */
+    title: string;
+}
+
+/**
+ * Handle returned by {@link Api#openDialog}.
+ * @public
+ */
+export type DialogHandle<M> = {
+    /**
+     * Promise that resolves when the dialog is finished.
+     */
+    finished: Promise<{ ok: boolean; model: M | null }>;
+    /**
+     * Method to close the dialog.
+     */
+    close(): void;
+};
+
+/**
+ * Props passed to the dialog body component.
+ * @public
+ */
+export type DialogProps<M> = {
+    /**
+     * Callback to submit the dialog.
+     * @param model - The model to submit with the dialog. This is typically the data collected.
+     */
+    onSubmit(model: M): void;
+    /**
+     * Cancel the dialog programmatically.
+     */
+    onCancel(): void;
+};
+
+/**
+ * Methods to manage dialogs in the application.
+ * @public
+ */
+export interface DialogApiExtension {
+    /**
+     * Open a dialog with the given options and body component and return a handle to it.
+     * @param initialOptions - The initial options for the dialog, such as title and action label.
+     * @param dialog - The body component to render in the dialog. This component should accept props of type `P`.
+     * @param props - Additional props to pass to the body
+     */
+    openDialog<M, P extends object>(
+        initialOptions: DialogOptions,
+        dialog: ComponentType<P & DialogProps<M>>,
+        props: P,
+    ): DialogHandle<M>;
+}
diff --git a/packages/module-api/src/api/extras.ts b/packages/module-api/src/api/extras.ts
new file mode 100644
index 0000000000..ad437c4986
--- /dev/null
+++ b/packages/module-api/src/api/extras.ts
@@ -0,0 +1,86 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type JSX } from "react";
+
+/**
+ * Properties of an item added to the Space panel
+ * @alpha
+ */
+export interface SpacePanelItemProps {
+    /**
+     * A CSS class name for the item
+     */
+    className?: string;
+
+    /**
+     * An icon to show in the item. If not provided, no icon will be shown.
+     */
+    icon?: JSX.Element;
+
+    /**
+     * The label to show in the item
+     */
+    label: string;
+
+    /**
+     * A tooltip to show when hovering over the item
+     */
+    tooltip?: string;
+
+    /**
+     * Styles to apply to the item
+     */
+    style?: React.CSSProperties;
+
+    /**
+     * Callback when the item is selected
+     */
+    onSelected: () => void;
+}
+
+/**
+ * A callback that returns a JSX element representing the buttons.
+ *
+ * @alpha
+ * @param roomId - The ID of the room for which the header is being rendered.
+ * @returns A JSX element representing the buttons to be rendered in the room header, or undefined if no buttons should be rendered.
+ */
+export type RoomHeaderButtonsCallback = (roomId: string) => JSX.Element | undefined;
+
+/**
+ * API for inserting extra UI into Element Web.
+ * @alpha Subject to change.
+ */
+export interface ExtrasApi {
+    /**
+     * Inserts an item into the space panel as if it were a space button, below
+     * buttons for other spaces.
+     * If called again with the same spaceKey, will update the existing item.
+     * @param spaceKey - A key to identify this space-like item.
+     * @param props - Properties of the item to add.
+     */
+    setSpacePanelItem(spaceKey: string, props: SpacePanelItemProps): void;
+
+    /**
+     * Registers a callback to get the list of visible rooms for a given space.
+     *
+     * Element Web will call this callback when checking if a room is displayed for the given space. For example in case of message editing or replying.
+     * If the space added by the module displays a room view and doesn't provide this callback, Element Web won't be able to determine if a room is visible in that space and will redirect to display the room in its vanilla space/metaspace.
+     *
+     * @param spaceKey - The space key to get visible rooms for.
+     * @param cb - A callback that returns the list of visible room IDs.
+     */
+    getVisibleRoomBySpaceKey(spaceKey: string, cb: () => string[]): void;
+
+    /**
+     * Adds a callback to get extra buttons in the room header (which can vary depending on the room being displayed).
+     *
+     * @param cb - A callback that returns a JSX element representing the buttons (see {@link RoomHeaderButtonsCallback}).
+     */
+    addRoomHeaderButtonCallback(cb: RoomHeaderButtonsCallback): void;
+}
diff --git a/packages/module-api/src/api/i18n.ts b/packages/module-api/src/api/i18n.ts
new file mode 100644
index 0000000000..030081ae9d
--- /dev/null
+++ b/packages/module-api/src/api/i18n.ts
@@ -0,0 +1,86 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type ReactNode } from "react";
+
+/**
+ * The translations for the module.
+ * @public
+ */
+export type Translations = Record<
+    string,
+    {
+        [ietfLanguageTag: string]: string;
+    }
+>;
+
+/**
+ * The value a variable or tag can take for a translation interpolation.
+ *
+ * When used as a function, `sub` is the text content wrapped between the tag
+ * in the translation string. For example, given `"Click <a>here</a>"`, the
+ * function receives `"here"` and should return a `ReactNode` wrapping it.
+ *
+ * @public
+ */
+export type SubstitutionValue = number | string | ReactNode | ((sub: string) => ReactNode);
+
+/**
+ * Variables to interpolate into a translation.
+ * @public
+ */
+export type Variables = {
+    /**
+     * The number of items to count for pluralised translations
+     */
+    count?: number;
+    [key: string]: SubstitutionValue;
+};
+
+/**
+ * Tags to interpolate into a translation, where the value is a ReactNode or a function that returns a ReactNode.
+ * This allows for more complex interpolations, such as links or formatted text.
+ * @public
+ */
+export type Tags = Record<string, SubstitutionValue>;
+
+/**
+ * The API for interacting with translations.
+ * @public
+ */
+export interface I18nApi {
+    /**
+     * Read the current language of the user in IETF Language Tag format
+     */
+    get language(): string;
+
+    /**
+     * Register translations for the module, may override app's existing translations
+     */
+    register(this: void, translations: Partial<Translations>): void;
+
+    /**
+     * Perform a translation, with optional variables
+     * @param key - The key to translate
+     * @param variables - Optional variables to interpolate into the translation
+     */
+    translate(this: void, key: keyof Translations, variables?: Variables): string;
+    /**
+     * Perform a translation, with optional variables
+     * @param key - The key to translate
+     * @param variables - Optional variables to interpolate into the translation
+     * @param tags - Optional tags to interpolate into the translation
+     */
+    translate(this: void, key: keyof Translations, variables: Variables | undefined, tags: Tags): ReactNode;
+
+    /**
+     * Convert a timestamp into a translated, human-readable time,
+     * using the current system time as a reference, eg. "5 minutes ago".
+     * @param timeMillis - The time in milliseconds since epoch
+     */
+    humanizeTime(this: void, timeMillis: number): string;
+}
diff --git a/packages/module-api/src/api/index.test.ts b/packages/module-api/src/api/index.test.ts
new file mode 100644
index 0000000000..8cd7a879fb
--- /dev/null
+++ b/packages/module-api/src/api/index.test.ts
@@ -0,0 +1,22 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { expect, test } from "vitest";
+
+import { type Api, isModule } from ".";
+
+const TestModule = {
+    default: class TestModule {
+        public static moduleApiVersion = "1.0.0";
+        public constructor(private readonly api: Api) {}
+        public async load(): Promise<void> {}
+    },
+};
+
+test("isModule correctly identifies valid modules", () => {
+    expect(isModule(TestModule)).toBe(true);
+});
diff --git a/packages/module-api/src/api/index.ts b/packages/module-api/src/api/index.ts
new file mode 100644
index 0000000000..3d60fc2a43
--- /dev/null
+++ b/packages/module-api/src/api/index.ts
@@ -0,0 +1,169 @@
+/*
+Copyright 2025 New Vector Ltd.
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import type { Root } from "react-dom/client";
+import { type LegacyModuleApiExtension } from "./legacy-modules";
+import { type LegacyCustomisationsApiExtension } from "./legacy-customisations";
+import { type ConfigApi } from "./config";
+import { type I18nApi } from "./i18n";
+import { type CustomComponentsApi } from "./custom-components";
+import { type NavigationApi } from "./navigation.ts";
+import { type DialogApiExtension } from "./dialog.ts";
+import { type AccountAuthApiExtension } from "./auth.ts";
+import { type ProfileApiExtension } from "./profile.ts";
+import { type ExtrasApi } from "./extras.ts";
+import { type BuiltinsApi } from "./builtins.ts";
+import { type StoresApi } from "./stores.ts";
+import { type ClientApi } from "./client.ts";
+import { type WidgetLifecycleApi } from "./widget-lifecycle.ts";
+import { type WidgetApi } from "./widget.ts";
+import { type CustomisationsApi } from "./customisations.ts";
+
+/**
+ * Module interface for modules to implement.
+ * @public
+ */
+export interface Module {
+    load(): Promise<void>;
+}
+
+const moduleSignature: Record<keyof Module, Type> = {
+    load: "function",
+};
+
+/**
+ * Module interface for modules to export as the default export.
+ * @public
+ */
+export interface ModuleFactory {
+    readonly moduleApiVersion: string;
+    new (api: Api): Module;
+    readonly prototype: Module;
+}
+
+const moduleFactorySignature: Record<keyof ModuleFactory, Type> = {
+    moduleApiVersion: "string",
+    prototype: "object",
+};
+
+export interface ModuleExport {
+    default: ModuleFactory;
+}
+
+const moduleExportSignature: Record<keyof ModuleExport, Type> = {
+    default: "function",
+};
+
+type Type = "function" | "string" | "number" | "boolean" | "object";
+
+function isInterface<T>(obj: unknown, type: "object" | "function", keys: Record<keyof T, Type>): obj is T {
+    if (obj === null || typeof obj !== type) return false;
+    for (const key in keys) {
+        if (typeof (obj as Record<keyof T, unknown>)[key] !== keys[key]) return false;
+    }
+    return true;
+}
+
+export function isModule(module: unknown): module is ModuleExport {
+    return (
+        isInterface(module, "object", moduleExportSignature) &&
+        isInterface(module.default, "function", moduleFactorySignature) &&
+        isInterface(module.default.prototype, "object", moduleSignature)
+    );
+}
+
+/**
+ * The API for modules to interact with the application.
+ * @public
+ */
+export interface Api
+    extends
+        LegacyModuleApiExtension,
+        LegacyCustomisationsApiExtension,
+        DialogApiExtension,
+        AccountAuthApiExtension,
+        ProfileApiExtension {
+    /**
+     * The API to read config.json values.
+     * Keys should be scoped to the module in reverse domain name notation.
+     * @public
+     */
+    readonly config: ConfigApi;
+    /**
+     * The internationalisation API.
+     * @public
+     */
+    readonly i18n: I18nApi;
+    /**
+     * The root node the main application is rendered to.
+     * Intended for rendering sibling React trees.
+     * @public
+     */
+    readonly rootNode: HTMLElement;
+
+    /**
+     * The custom message component API.
+     * @alpha
+     */
+    readonly customComponents: CustomComponentsApi;
+
+    /**
+     * Allows modules to render components that are part of Element Web.
+     * @alpha
+     */
+    readonly builtins: BuiltinsApi;
+
+    /**
+     * API to navigate the application.
+     * @public
+     */
+    readonly navigation: NavigationApi;
+
+    /**
+     * Allows modules to insert extra UI into Element Web.
+     * @alpha
+     */
+    readonly extras: ExtrasApi;
+
+    /**
+     * Allows modules to access a limited functionality of certain stores from Element Web.
+     */
+    readonly stores: StoresApi;
+
+    /**
+     * Access some very specific functionality from the client.
+     */
+    readonly client: ClientApi;
+
+    /**
+     * API for modules to auto-approve widget preloading, identity token requests, and capability requests.
+     * @alpha Subject to change.
+     */
+    readonly widgetLifecycle: WidgetLifecycleApi;
+
+    /**
+     * API for modules to interact with widgets in Element Web, including getting what widgets
+     * are active in a given room.
+     * @alpha Subject to change.
+     */
+    readonly widget: WidgetApi;
+
+    /**
+     * Allows modules to customise behaviour of app's components.
+     * @alpha Subject to change.
+     */
+    readonly customisations: CustomisationsApi;
+
+    /**
+     * Create a ReactDOM root for rendering React components.
+     * Exposed to allow modules to avoid needing to bundle their own ReactDOM.
+     * @param element - the element to render use as the root.
+     * @public
+     */
+    createRoot(element: Element): Root;
+}
diff --git a/packages/module-api/src/api/legacy-customisations.ts b/packages/module-api/src/api/legacy-customisations.ts
new file mode 100644
index 0000000000..6374789b5b
--- /dev/null
+++ b/packages/module-api/src/api/legacy-customisations.ts
@@ -0,0 +1,259 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/**
+ * The types here suck but these customisations are deprecated and will be removed soon.
+ */
+
+/**
+ * @alpha
+ * @deprecated in favour of the new Module API
+ */
+export interface AliasCustomisations {
+    // E.g. prefer one of the aliases over another
+    getDisplayAliasForAliasSet?(canonicalAlias: string | null, altAliases: string[]): string | null;
+}
+
+/**
+ * @alpha
+ * @deprecated in favour of the new Module API
+ */
+export interface ChatExportCustomisations<ExportFormat, ExportType> {
+    /**
+     * Force parameters in room chat export fields returned here are forced
+     * and not allowed to be edited in the chat export form
+     */
+    getForceChatExportParameters(): {
+        format?: ExportFormat;
+        range?: ExportType;
+        // must be < 10**8
+        // only used when range is 'LastNMessages'
+        // default is 100
+        numberOfMessages?: number;
+        includeAttachments?: boolean;
+        // maximum size of exported archive
+        // must be > 0 and < 8000
+        sizeMb?: number;
+    };
+}
+
+/**
+ * @alpha
+ * @deprecated in favour of the new Module API
+ */
+export interface ComponentVisibilityCustomisations {
+    /**
+     * Determines whether or not the active MatrixClient user should be able to use
+     * the given UI component. If shown, the user might still not be able to use the
+     * component depending on their contextual permissions. For example, invite options
+     * might be shown to the user but they won't have permission to invite users to
+     * the current room: the button will appear disabled.
+     * @param component - The component to check visibility for.
+     * @returns True (default) if the user is able to see the component, false otherwise.
+     */
+    shouldShowComponent?(
+        component:
+            | "UIComponent.sendInvites"
+            | "UIComponent.roomCreation"
+            | "UIComponent.spaceCreation"
+            | "UIComponent.exploreRooms"
+            | "UIComponent.addIntegrations"
+            | "UIComponent.filterContainer"
+            | "UIComponent.roomOptionsMenu",
+    ): boolean;
+}
+
+/**
+ * @alpha
+ * @deprecated in favour of the new Module API
+ */
+export interface DirectoryCustomisations {
+    requireCanonicalAliasAccessToPublish?(): boolean;
+}
+
+/**
+ * @alpha
+ * @deprecated in favour of the new Module API
+ */
+export interface LifecycleCustomisations {
+    onLoggedOutAndStorageCleared?(): void;
+}
+
+/**
+ * @alpha
+ * @deprecated in favour of the new Module API
+ */
+export interface Media {
+    readonly isEncrypted: boolean;
+    readonly srcMxc: string;
+    readonly thumbnailMxc: string | null | undefined;
+    readonly hasThumbnail: boolean;
+    readonly srcHttp: string | null;
+    readonly thumbnailHttp: string | null;
+    getThumbnailHttp(width: number, height: number, mode?: "scale" | "crop"): string | null;
+    getThumbnailOfSourceHttp(width: number, height: number, mode?: "scale" | "crop"): string | null;
+    getSquareThumbnailHttp(dim: number): string | null;
+    downloadSource(): Promise<Response>;
+}
+
+/**
+ * @alpha
+ * @deprecated in favour of the new Module API
+ */
+export interface MediaContructable<PreparedMedia> {
+    new (prepared: PreparedMedia): Media;
+}
+
+/**
+ * @alpha
+ * @deprecated in favour of the new Module API
+ */
+export interface MediaCustomisations<Content, Client, PreparedMedia> {
+    readonly Media: MediaContructable<PreparedMedia>;
+    mediaFromContent(content: Content, client?: Client): Media;
+    mediaFromMxc(mxc?: string, client?: Client): Media;
+}
+
+/**
+ * @alpha
+ * @deprecated in favour of the new Module API
+ */
+export interface RoomListCustomisations<Room> {
+    /**
+     * Determines if a room is visible in the room list or not. By default,
+     * all rooms are visible. Where special handling is performed by Element,
+     * those rooms will not be able to override their visibility in the room
+     * list - Element will make the decision without calling this function.
+     *
+     * This function should be as fast as possible to avoid slowing down the
+     * client.
+     * @param room - The room to check the visibility of.
+     * @returns True if the room should be visible, false otherwise.
+     */
+    isRoomVisible?(room: Room): boolean;
+}
+
+/**
+ * @alpha
+ * @deprecated in favour of the new Module API
+ */
+export interface UserIdentifierCustomisations {
+    /**
+     * Customise display of the user identifier
+     * hide userId for guests, display 3pid
+     *
+     * Set withDisplayName to true when user identifier will be displayed alongside user name
+     */
+    getDisplayUserIdentifier(userId: string, opts: { roomId?: string; withDisplayName?: boolean }): string | null;
+}
+
+/**
+ * @alpha
+ * @deprecated in favour of the new Module API
+ */
+export interface WidgetPermissionsCustomisations<Widget, Capability> {
+    /**
+     * Approves the widget for capabilities that it requested, if any can be
+     * approved. Typically this will be used to give certain widgets capabilities
+     * without having to prompt the user to approve them. This cannot reject
+     * capabilities that Element will be automatically granting, such as the
+     * ability for Jitsi widgets to stay on screen - those will be approved
+     * regardless.
+     * @param widget - The widget to approve capabilities for.
+     * @param requestedCapabilities - The capabilities the widget requested.
+     * @returns Resolves to the capabilities that are approved for use
+     * by the widget. If none are approved, this should return an empty Set.
+     */
+    preapproveCapabilities?(widget: Widget, requestedCapabilities: Set<Capability>): Promise<Set<Capability>>;
+}
+
+/**
+ * @alpha
+ * @deprecated in favour of the new Module API
+ */
+export interface WidgetVariablesCustomisations {
+    /**
+     * Provides a partial set of the variables needed to render any widget. If
+     * variables are missing or not provided then they will be filled with the
+     * application-determined defaults.
+     *
+     * This will not be called until after isReady() resolves.
+     * @returns The variables.
+     */
+    provideVariables?(): {
+        currentUserId: string;
+        userDisplayName?: string;
+        userHttpAvatarUrl?: string;
+        clientId?: string;
+        clientTheme?: string;
+        clientLanguage?: string;
+        deviceId?: string;
+        baseUrl?: string;
+    };
+    /**
+     * Resolves to whether or not the customisation point is ready for variables
+     * to be provided. This will block widgets being rendered.
+     * If not provided, the app will assume that the customisation is always ready.
+     * @returns a promise which resolves when ready.
+     */
+    isReady?(): Promise<void>;
+}
+
+/**
+ * @alpha
+ * @deprecated in favour of the new Module API
+ */
+export type LegacyCustomisations<T extends object> = (customisations: T) => void;
+
+/**
+ * @alpha
+ * @deprecated in favour of the new Module API
+ */
+export interface LegacyCustomisationsApiExtension {
+    /**
+     * @deprecated in favour of the new Module API
+     */
+    readonly _registerLegacyAliasCustomisations: LegacyCustomisations<AliasCustomisations>;
+    /**
+     * @deprecated in favour of the new Module API
+     */
+    readonly _registerLegacyChatExportCustomisations: LegacyCustomisations<ChatExportCustomisations<never, never>>;
+    /**
+     * @deprecated in favour of the new Module API
+     */
+    readonly _registerLegacyComponentVisibilityCustomisations: LegacyCustomisations<ComponentVisibilityCustomisations>;
+    /**
+     * @deprecated in favour of the new Module API
+     */
+    readonly _registerLegacyDirectoryCustomisations: LegacyCustomisations<DirectoryCustomisations>;
+    /**
+     * @deprecated in favour of the new Module API
+     */
+    readonly _registerLegacyLifecycleCustomisations: LegacyCustomisations<LifecycleCustomisations>;
+    /**
+     * @deprecated in favour of the new Module API
+     */
+    readonly _registerLegacyMediaCustomisations: LegacyCustomisations<MediaCustomisations<never, never, never>>;
+    /**
+     * @deprecated in favour of the new Module API
+     */
+    readonly _registerLegacyRoomListCustomisations: LegacyCustomisations<RoomListCustomisations<never>>;
+    /**
+     * @deprecated in favour of the new Module API
+     */
+    readonly _registerLegacyUserIdentifierCustomisations: LegacyCustomisations<UserIdentifierCustomisations>;
+    /**
+     * @deprecated in favour of the new Module API
+     */
+    readonly _registerLegacyWidgetPermissionsCustomisations: LegacyCustomisations<
+        WidgetPermissionsCustomisations<never, never>
+    >;
+    /**
+     * @deprecated in favour of the new Module API
+     */
+    readonly _registerLegacyWidgetVariablesCustomisations: LegacyCustomisations<WidgetVariablesCustomisations>;
+}
diff --git a/packages/module-api/src/api/legacy-modules.ts b/packages/module-api/src/api/legacy-modules.ts
new file mode 100644
index 0000000000..baaad96b01
--- /dev/null
+++ b/packages/module-api/src/api/legacy-modules.ts
@@ -0,0 +1,30 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore -- optional interface, will gracefully degrade to `any` if `react-sdk-module-api` isn't installed
+import type { ModuleApi, RuntimeModule } from "@matrix-org/react-sdk-module-api";
+
+/**
+ * @alpha
+ * @deprecated in favour of the new module API
+ */
+export type RuntimeModuleConstructor = new (api: ModuleApi) => RuntimeModule;
+
+/**
+ * @alpha
+ * @deprecated in favour of the new module API
+ */
+/* eslint-disable @typescript-eslint/naming-convention */
+export interface LegacyModuleApiExtension {
+    /**
+     * Register a legacy module based on \@matrix-org/react-sdk-module-api
+     * @param LegacyModule - the module class to register
+     * @deprecated provided only as a transition path for legacy modules
+     */
+    _registerLegacyModule(LegacyModule: RuntimeModuleConstructor): Promise<void>;
+}
diff --git a/packages/module-api/src/api/navigation.ts b/packages/module-api/src/api/navigation.ts
new file mode 100644
index 0000000000..76ff59f1c3
--- /dev/null
+++ b/packages/module-api/src/api/navigation.ts
@@ -0,0 +1,59 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type JSX } from "react";
+
+/**
+ * A function called to render a component when a user navigates to the corresponding
+ * location. Currently renders alongside just the SpacePanel.
+ * @alpha
+ */
+export type LocationRenderFunction = () => JSX.Element;
+
+/**
+ * The options available for changing the open behaviour.
+ * @public
+ */
+export interface OpenRoomOptions {
+    /**
+     * The list of servers to join via.
+     */
+    viaServers?: string[];
+
+    /**
+     * Whether to automatically join the room if we are not already in it.
+     */
+    autoJoin?: boolean;
+}
+
+/**
+ * API methods to navigate the application.
+ * @public
+ */
+export interface NavigationApi {
+    /**
+     * Navigate to a permalink, optionally causing a join if the user is not already a member of the room/space.
+     * @param link - The permalink to navigate to, e.g. `https://matrix.to/#/!roomId:example.com`.
+     * @param join - If true, the user will be made to attempt to join the room/space if they are not already a member.
+     */
+    toMatrixToLink(link: string, join?: boolean): Promise<void>;
+
+    /**
+     * Register a renderer for a given location path.
+     * @param path - The location path to register the renderer for.
+     * @param renderer - The function that will render the component for the location.
+     * @alpha
+     */
+    registerLocationRenderer(path: string, renderer: LocationRenderFunction): void;
+
+    /**
+     * Open a room in element-web.
+     * @param roomIdOrAlias - id/alias of the room to open
+     * @param opts - Options to control the open action, see {@link OpenRoomOptions}
+     */
+    openRoom(roomIdOrAlias: string, opts?: OpenRoomOptions): void;
+}
diff --git a/packages/module-api/src/api/profile.ts b/packages/module-api/src/api/profile.ts
new file mode 100644
index 0000000000..6be444f05f
--- /dev/null
+++ b/packages/module-api/src/api/profile.ts
@@ -0,0 +1,38 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type Watchable } from "./watchable.ts";
+
+/**
+ * The profile of the user currently logged in.
+ * @public
+ */
+export interface Profile {
+    /**
+     * Indicates whether the user is a guest user.
+     */
+    isGuest?: boolean;
+    /**
+     * The user ID of the logged-in user, if undefined then no user is logged in.
+     */
+    userId?: string;
+    /**
+     * The display name of the logged-in user.
+     */
+    displayName?: string;
+}
+
+/**
+ * API extensions for modules to access the profile of the logged-in user.
+ * @public
+ */
+export interface ProfileApiExtension {
+    /**
+     * The profile of the user currently logged in.
+     */
+    readonly profile: Watchable<Profile>;
+}
diff --git a/packages/module-api/src/api/stores.ts b/packages/module-api/src/api/stores.ts
new file mode 100644
index 0000000000..9e5bfa252d
--- /dev/null
+++ b/packages/module-api/src/api/stores.ts
@@ -0,0 +1,36 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import type { Room } from "../models/Room";
+import { type Watchable } from "./watchable";
+
+/**
+ * Provides some basic functionality of the Room List Store from element-web.
+ * @public
+ */
+export interface RoomListStoreApi {
+    /**
+     * Returns a watchable holding a flat list of sorted room.
+     */
+    getRooms(): Watchable<Room[]>;
+
+    /**
+     * Returns a promise that resolves when RLS is ready.
+     */
+    waitForReady(): Promise<void>;
+}
+
+/**
+ * Provides access to certain stores from element-web.
+ * @public
+ */
+export interface StoresApi {
+    /**
+     * Use this to access limited functionality of the RLS from element-web.
+     */
+    roomListStore: RoomListStoreApi;
+}
diff --git a/packages/module-api/src/api/watchable.test.ts b/packages/module-api/src/api/watchable.test.ts
new file mode 100644
index 0000000000..e55695c29c
--- /dev/null
+++ b/packages/module-api/src/api/watchable.test.ts
@@ -0,0 +1,99 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { expect, test, vi, vitest } from "vitest";
+
+import { Watchable } from "./watchable";
+
+test("initial value is set correctly", () => {
+    const watchable = new Watchable(42);
+    expect(watchable.value).toBe(42);
+});
+
+test("value can be updated", () => {
+    const watchable = new Watchable(100);
+    watchable.value = 200;
+    expect(watchable.value).toBe(200);
+});
+
+test("watchers are notified on value change", () => {
+    const watchable = new Watchable(1);
+    const listener = vitest.fn();
+
+    watchable.watch(listener);
+    watchable.value = 2; // This should trigger the listener
+    expect(listener).toHaveBeenCalledExactlyOnceWith(2);
+
+    watchable.unwatch(listener); // Clean up after the test
+});
+
+test("watchers are not notified if value does not change", () => {
+    const watchable = new Watchable(10);
+    const listener = vitest.fn();
+
+    watchable.watch(listener);
+    watchable.value = 10; // This should not trigger the listener
+    expect(listener).not.toHaveBeenCalled();
+
+    watchable.unwatch(listener); // Clean up after the test
+});
+
+test("when value is an object, shallow comparison works", () => {
+    const watchable = new Watchable({ a: 1, b: 2 });
+    const listener = vitest.fn();
+    watchable.watch(listener);
+
+    // Update with a new object that has the same properties
+    watchable.value = { a: 3, b: 2 }; // This should trigger the listener
+    expect(listener).toHaveBeenCalledExactlyOnceWith({ a: 3, b: 2 });
+    listener.mockClear();
+    watchable.value = { a: 3, b: 2 }; // This should not trigger the listener again
+    expect(listener).not.toHaveBeenCalled();
+
+    watchable.unwatch(listener); // Clean up after the test
+});
+
+test("onFirstWatch and onLastWatch are called when appropriate", () => {
+    const onFirstWatch = vi.fn();
+    const onLastWatch = vi.fn();
+    class CustomWatchable extends Watchable<number> {
+        protected onFirstWatch(): void {
+            onFirstWatch();
+        }
+        protected onLastWatch(): void {
+            onLastWatch();
+        }
+    }
+
+    const watchable = new CustomWatchable(10);
+    // No listeners yet, so expect no calls
+    expect(onFirstWatch).not.toHaveBeenCalled();
+    expect(onLastWatch).not.toHaveBeenCalled();
+
+    // Let's say that we have three listeners
+    const listeners = [vi.fn(), vi.fn(), vi.fn()];
+
+    // Let's add all of them via watch
+    for (const listener of listeners) {
+        watchable.watch(listener);
+    }
+
+    // Only expect onFirstWatch() to have been called once
+    expect(onFirstWatch).toHaveBeenCalledOnce();
+
+    // Let's remove all the listeners
+    for (const listener of listeners) {
+        watchable.unwatch(listener);
+    }
+
+    // Only expect onLastWatch to have been called once
+    expect(onLastWatch).toHaveBeenCalledOnce();
+
+    // Should call onFirstWatch again once we have more listeners
+    watchable.watch(vi.fn());
+    expect(onFirstWatch).toHaveBeenCalledTimes(2);
+});
diff --git a/packages/module-api/src/api/watchable.ts b/packages/module-api/src/api/watchable.ts
new file mode 100644
index 0000000000..69296571c8
--- /dev/null
+++ b/packages/module-api/src/api/watchable.ts
@@ -0,0 +1,101 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { useEffect, useState } from "react";
+
+type WatchFn<T> = (value: T) => void;
+
+function shallowCompare<T extends object>(obj1: T, obj2: T): boolean {
+    return (
+        Object.keys(obj1).length === Object.keys(obj2).length &&
+        Object.keys(obj1).every((key) => obj1[key as keyof T] === obj2[key as keyof T])
+    );
+}
+
+function isObject(value: unknown): value is object {
+    return value !== null && typeof value === "object";
+}
+
+/**
+ * Utility class to wrap a value and allow listeners to be notified when the value changes.
+ * If T is an object, it will use a shallow comparison to determine if the value has changed.
+ * @public
+ */
+export class Watchable<T> {
+    protected readonly listeners = new Set<WatchFn<T>>();
+
+    public constructor(private currentValue: T) {}
+
+    /**
+     * The value stored in this watchable.
+     * Warning: Could potentially return stale data if you haven't called {@link Watchable#watch}.
+     */
+    public get value(): T {
+        return this.currentValue;
+    }
+
+    public set value(value: T) {
+        // If the value hasn't changed, do nothing.
+        if (value === this.currentValue) {
+            return;
+        }
+        if (isObject(value) && isObject(this.currentValue) && shallowCompare(this.currentValue as object, value)) {
+            return;
+        }
+
+        this.currentValue = value;
+        for (const listener of this.listeners) {
+            listener(this.currentValue);
+        }
+    }
+
+    public watch(listener: (value: T) => void): void {
+        // Call onFirstWatch if there was no listener before.
+        if (this.listeners.size === 0) {
+            this.onFirstWatch();
+        }
+        this.listeners.add(listener);
+    }
+
+    public unwatch(listener: (value: T) => void): void {
+        const hasDeleted = this.listeners.delete(listener);
+        // Call onLastWatch if every listener has been removed.
+        if (hasDeleted && this.listeners.size === 0) {
+            this.onLastWatch();
+        }
+    }
+
+    /**
+     * This is called when the number of listeners go from zero to one.
+     * Could be used to add external event listeners.
+     */
+    protected onFirstWatch(): void {}
+
+    /**
+     * This is called when the number of listeners go from one to zero.
+     * Could be used to remove external event listeners.
+     */
+    protected onLastWatch(): void {}
+}
+
+/**
+ * A React hook to use an updated Watchable value.
+ * @param watchable - The Watchable instance to watch.
+ * @returns The live value of the Watchable.
+ * @public
+ */
+export function useWatchable<T>(watchable: Watchable<T>): T {
+    const [value, setValue] = useState<T>(watchable.value);
+    useEffect(() => {
+        setValue(watchable.value);
+        watchable.watch(setValue);
+        return (): void => {
+            watchable.unwatch(setValue);
+        };
+    }, [watchable]);
+    return value;
+}
diff --git a/packages/module-api/src/api/widget-lifecycle.ts b/packages/module-api/src/api/widget-lifecycle.ts
new file mode 100644
index 0000000000..6258629eab
--- /dev/null
+++ b/packages/module-api/src/api/widget-lifecycle.ts
@@ -0,0 +1,76 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import type { MaybePromise } from "../utils";
+
+/**
+ * A description of a widget passed to approver callbacks.
+ * Contains the information needed to make approval decisions.
+ * @alpha Subject to change.
+ */
+export type WidgetDescriptor = {
+    /** The unique identifier of the widget. */
+    id: string;
+    /** The template URL of the widget, which may contain `$matrix_*` placeholder variables. */
+    templateUrl: string;
+    /** The Matrix user ID of the user who created the widget. */
+    creatorUserId: string;
+    /** The widget type, e.g. `m.custom`, `m.jitsi`, `m.stickerpicker`. */
+    type: string;
+    /** The origin of the widget URL. */
+    origin: string;
+    /** The room ID the widget belongs to, if it is a room widget. */
+    roomId?: string;
+};
+
+/**
+ * Callback that decides whether a widget should be auto-approved for preloading
+ * (i.e. loaded without the user clicking "Continue").
+ * Return `true` to auto-approve, or any other value to defer to the default consent flow.
+ * @alpha Subject to change.
+ */
+export type PreloadApprover = (widget: WidgetDescriptor) => MaybePromise<boolean | undefined>;
+/**
+ * Callback that decides whether a widget should be auto-approved to receive
+ * the user's OpenID identity token.
+ * Return `true` to auto-approve, or any other value to defer to the default consent flow.
+ * @alpha Subject to change.
+ */
+export type IdentityApprover = (widget: WidgetDescriptor) => MaybePromise<boolean | undefined>;
+/**
+ * Callback that decides which of a widget's requested capabilities should be auto-approved.
+ * Return a `Set` of approved capability strings, or `undefined` to defer to the default consent flow.
+ * @alpha Subject to change.
+ */
+export type CapabilitiesApprover = (
+    widget: WidgetDescriptor,
+    requestedCapabilities: Set<string>,
+) => MaybePromise<Set<string> | undefined>;
+
+/**
+ * API for modules to auto-approve widget preloading, identity token requests, and capability requests.
+ * @alpha Subject to change.
+ */
+export interface WidgetLifecycleApi {
+    /**
+     * Register a handler that can auto-approve widget preloading.
+     * Returning true auto-approves; any other value results in no auto-approval.
+     */
+    registerPreloadApprover(approver: PreloadApprover): void;
+
+    /**
+     * Register a handler that can auto-approve identity token requests.
+     * Returning true auto-approves; any other value results in no auto-approval.
+     */
+    registerIdentityApprover(approver: IdentityApprover): void;
+
+    /**
+     * Register a handler that can auto-approve widget capabilities.
+     * Return a set containing the capabilities to approve.
+     */
+    registerCapabilitiesApprover(approver: CapabilitiesApprover): void;
+}
diff --git a/packages/module-api/src/api/widget.ts b/packages/module-api/src/api/widget.ts
new file mode 100644
index 0000000000..66c8b31e73
--- /dev/null
+++ b/packages/module-api/src/api/widget.ts
@@ -0,0 +1,68 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type IWidget } from "matrix-widget-api";
+
+/**
+ * Containers that control where a widget is displayed on the screen.
+ *
+ * "top" is the app drawer, and currently the only sensible value.
+ *
+ * "right" is the right panel, and the default for widgets. Setting
+ * this as a container on a widget is essentially like saying "no
+ * changes needed", though this may change in the future.
+ *
+ * "center" was uncodumented at time of porting this from an enum.
+ * Possibly when a widget replaces the main chat view like element call.
+ *
+ * @alpha Subject to change.
+ */
+export type Container = "top" | "right" | "center";
+
+/**
+ * An API for interfacing with widgets in Element Web, including getting what widgets
+ * are active in a given room.
+ * @alpha Subject to change.
+ */
+export interface WidgetApi {
+    /**
+     * Gets the widgets active in a given room.
+     *
+     * @param roomId - The room to get the widgets for.
+     */
+    getWidgetsInRoom(roomId: string): IWidget[];
+
+    /**
+     * Gets the URL of a widget's avatar, if it has one.
+     *
+     * @param app - The widget to get the avatar URL for.
+     * @param width - Optional width to resize the avatar to.
+     * @param height - Optional height to resize the avatar to.
+     * @param resizeMethod - Optional method to use when resizing the avatar.
+     * @returns The URL of the widget's avatar, or null if it doesn't have one.
+     */
+    getAppAvatarUrl(app: IWidget, width?: number, height?: number, resizeMethod?: string): string | null;
+
+    /**
+     * Checks if a widget is in a specific container in a given room.
+     *
+     * @param app - The widget to check.
+     * @param container - The container to check.
+     * @param roomId - The room to check in.
+     * @returns True if the widget is in the specified container, false otherwise.
+     */
+    isAppInContainer(app: IWidget, container: Container, roomId: string): boolean;
+
+    /**
+     * Moves a widget to a specific container in a given room.
+     *
+     * @param app - The widget to move.
+     * @param container - The container to move the widget to.
+     * @param roomId - The room to move the widget in.
+     */
+    moveAppToContainer(app: IWidget, container: Container, roomId: string): void;
+}
diff --git a/packages/module-api/src/index.ts b/packages/module-api/src/index.ts
new file mode 100644
index 0000000000..a246b12f9e
--- /dev/null
+++ b/packages/module-api/src/index.ts
@@ -0,0 +1,30 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+export { ModuleLoader, ModuleIncompatibleError } from "./loader";
+export type { Api, Module, ModuleFactory } from "./api";
+export type { Config, ConfigApi } from "./api/config";
+export type { I18nApi, Variables, Translations, SubstitutionValue, Tags } from "./api/i18n";
+export type * from "./models/event";
+export type * from "./models/Room";
+export type * from "./api/custom-components";
+export type * from "./api/extras";
+export type * from "./api/legacy-modules";
+export type * from "./api/legacy-customisations";
+export type * from "./api/auth";
+export type * from "./api/dialog";
+export type * from "./api/profile";
+export type * from "./api/navigation";
+export type * from "./api/builtins";
+export type * from "./api/stores";
+export type * from "./api/client";
+export type * from "./api/widget-lifecycle";
+export type * from "./api/widget";
+export type * from "./api/customisations";
+export { UIComponent } from "./api/customisations";
+export * from "./api/watchable";
+export type * from "./utils";
diff --git a/packages/module-api/src/loader.test.ts b/packages/module-api/src/loader.test.ts
new file mode 100644
index 0000000000..8010c72af4
--- /dev/null
+++ b/packages/module-api/src/loader.test.ts
@@ -0,0 +1,58 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { expect, test, describe, vi, beforeEach } from "vitest";
+
+import { type Api, ModuleIncompatibleError, ModuleLoader } from ".";
+
+describe("ModuleIncompatibleError", () => {
+    test("should extend Error", () => {
+        expect(new ModuleIncompatibleError("1.0.0")).toBeInstanceOf(Error);
+    });
+});
+
+describe("ModuleLoader", () => {
+    const mockApi = {} as Api;
+
+    beforeEach(() => {
+        vi.stubGlobal("__VERSION__", "1.0.1");
+    });
+
+    test("should load a module", async () => {
+        const TestModule = {
+            default: class TestModule {
+                public static moduleApiVersion = "^1.0.0";
+                public constructor(private readonly api: Api) {}
+                public async load(): Promise<void> {}
+            },
+        };
+
+        const spy = vi.spyOn(TestModule.default.prototype, "load");
+
+        const loader = new ModuleLoader(mockApi);
+        await loader.load(TestModule);
+        await loader.start();
+        expect(spy).toHaveBeenCalledWith();
+    });
+
+    test("should fail to load an incompatible module", async () => {
+        const TestModule = {
+            default: class TestModule {
+                public static moduleApiVersion = "^2";
+                public constructor(private readonly api: Api) {}
+                public async load(): Promise<void> {}
+            },
+        };
+
+        const spy = vi.spyOn(TestModule.default.prototype, "load");
+
+        const loader = new ModuleLoader(mockApi);
+        await expect(loader.load(TestModule)).rejects.toThrowError(ModuleIncompatibleError);
+        await loader.start();
+        expect(spy).not.toHaveBeenCalledWith();
+    });
+});
diff --git a/packages/module-api/src/loader.ts b/packages/module-api/src/loader.ts
new file mode 100644
index 0000000000..c057109f28
--- /dev/null
+++ b/packages/module-api/src/loader.ts
@@ -0,0 +1,55 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { satisfies } from "semver";
+
+import { type Api, isModule, type Module, type ModuleExport } from "./api";
+
+/**
+ * Error thrown when a module is incompatible with the engine version.
+ * @public
+ */
+export class ModuleIncompatibleError extends Error {
+    public constructor(pluginVersion: string) {
+        super(`Plugin version ${pluginVersion} is incompatible with engine version ${__VERSION__}`);
+    }
+}
+
+/**
+ * A module loader for loading and starting modules.
+ * @public
+ */
+export class ModuleLoader {
+    private modules: Module[] = [];
+    private started = false;
+
+    public constructor(private api: Api) {}
+
+    public async load(moduleExport: ModuleExport): Promise<void> {
+        if (this.started) {
+            throw new Error("PluginEngine.start() has already been called");
+        }
+
+        if (!isModule(moduleExport)) {
+            throw new Error("Invalid plugin");
+        }
+        if (!satisfies(__VERSION__, moduleExport.default.moduleApiVersion)) {
+            throw new ModuleIncompatibleError(moduleExport.default.moduleApiVersion);
+        }
+        const { default: Module } = moduleExport;
+        this.modules.push(new Module(this.api));
+    }
+
+    public async start(): Promise<void> {
+        if (this.started) {
+            throw new Error("PluginEngine.start() has already been called");
+        }
+        this.started = true;
+
+        await Promise.all(this.modules.map((plugin) => plugin.load()));
+    }
+}
diff --git a/packages/module-api/src/models/Room.ts b/packages/module-api/src/models/Room.ts
new file mode 100644
index 0000000000..eb67d8054e
--- /dev/null
+++ b/packages/module-api/src/models/Room.ts
@@ -0,0 +1,28 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type Watchable } from "../api/watchable";
+
+/**
+ * Represents a room from element-web.
+ * @public
+ */
+export interface Room {
+    /**
+     * Id of this room.
+     */
+    id: string;
+    /**
+     * {@link Watchable} holding the name for this room.
+     */
+    name: Watchable<string>;
+    /**
+     * Get the timestamp of the last message in this room.
+     * @returns last active timestamp
+     */
+    getLastActiveTimestamp: () => number;
+}
diff --git a/packages/module-api/src/models/event.ts b/packages/module-api/src/models/event.ts
new file mode 100644
index 0000000000..b75606090e
--- /dev/null
+++ b/packages/module-api/src/models/event.ts
@@ -0,0 +1,48 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/**
+ * Representation of a Matrix event, as specified by the client server specification.
+ * @alpha Subject to change.
+ * @see https://spec.matrix.org/v1.14/client-server-api/#room-event-format
+ */
+export interface MatrixEvent {
+    /**
+     * The event ID of this event.
+     */
+    eventId: string;
+    /**
+     * The room ID which contains this event.
+     */
+    roomId: string;
+    /**
+     * The Matrix ID of the user who sent this event.
+     */
+    sender: string;
+    /**
+     * The content of the event.
+     * If the event was encrypted, this is the decrypted content.
+     */
+    content: Record<string, unknown>;
+    /**
+     * Contains optional extra information about the event.
+     */
+    unsigned: Record<string, unknown>;
+    /**
+     * The type of the event.
+     */
+    type: string;
+    /**
+     * The state key of the event.
+     * If this key is set, including `""` then the event is a state event.
+     */
+    stateKey?: string;
+    /**
+     * Timestamp (in milliseconds since the unix epoch) on originating homeserver when this event was sent.
+     */
+    originServerTs: number;
+}
diff --git a/packages/module-api/src/utils.ts b/packages/module-api/src/utils.ts
new file mode 100644
index 0000000000..8692b180c8
--- /dev/null
+++ b/packages/module-api/src/utils.ts
@@ -0,0 +1,13 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/**
+ * A value that may be a direct value or a Promise resolving to that value.
+ * Useful for callback APIs that can operate synchronously or asynchronously.
+ * @public
+ */
+export type MaybePromise<T> = T | PromiseLike<T>;
diff --git a/packages/module-api/tsconfig.json b/packages/module-api/tsconfig.json
new file mode 100644
index 0000000000..79beeb700d
--- /dev/null
+++ b/packages/module-api/tsconfig.json
@@ -0,0 +1,19 @@
+{
+    "$schema": "http://json.schemastore.org/tsconfig",
+    "compilerOptions": {
+        "rootDir": "./src",
+        "target": "esnext",
+        "lib": ["dom", "es2022", "esnext"],
+        "esModuleInterop": true,
+        "strict": true,
+        "declaration": true,
+        "module": "es2022",
+        "moduleResolution": "bundler",
+        "types": [],
+        "outDir": "lib",
+        "jsx": "react-jsx",
+        "declarationMap": true,
+        "allowImportingTsExtensions": true
+    },
+    "include": ["src"]
+}
diff --git a/packages/module-api/vite.config.ts b/packages/module-api/vite.config.ts
new file mode 100644
index 0000000000..43dd25d974
--- /dev/null
+++ b/packages/module-api/vite.config.ts
@@ -0,0 +1,63 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+import dts from "unplugin-dts/vite";
+import externalGlobals from "rollup-plugin-external-globals";
+
+import packageJson from "./package.json" with { type: "json" };
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+    build: {
+        lib: {
+            entry: resolve(__dirname, "src/index.ts"),
+            name: "element-web-plugin-engine",
+            fileName: "element-web-plugin-engine",
+        },
+        outDir: "lib",
+        target: "esnext",
+        sourcemap: true,
+    },
+    plugins: [
+        dts(),
+        externalGlobals({
+            // Reuse React from the host app
+            react: "window.React",
+        }),
+    ],
+    define: {
+        // We cannot use `process.env.npm_package_version` as when building element-web with module-api set to `workspace`
+        // this would contain the version of element-web rather than that of the module-api.
+        __VERSION__: JSON.stringify(packageJson.version),
+        // Use production mode for the build as it is tested against production builds of Element Web,
+        // this is required for React JSX versions to be compatible.
+        process: { env: { NODE_ENV: "production" } },
+    },
+    test: {
+        coverage: {
+            provider: "v8",
+            include: ["src/**/*"],
+            reporter: [["lcov", { projectRoot: "../../" }]],
+        },
+        reporters: [
+            ["default", { summary: false }],
+            [
+                "vitest-sonar-reporter",
+                {
+                    outputFile: "coverage/sonar-report.xml",
+                    onWritePath(path: string): string {
+                        return `packages/element-web-module-api/${path}`;
+                    },
+                },
+            ],
+        ],
+    },
+});
diff --git a/packages/playwright-common/.gitignore b/packages/playwright-common/.gitignore
new file mode 100644
index 0000000000..c3af857904
--- /dev/null
+++ b/packages/playwright-common/.gitignore
@@ -0,0 +1 @@
+lib/
diff --git a/packages/playwright-common/Dockerfile b/packages/playwright-common/Dockerfile
index 20bb7713a3..6480d62602 100644
--- a/packages/playwright-common/Dockerfile
+++ b/packages/playwright-common/Dockerfile
@@ -6,10 +6,26 @@ ARG PLAYWRIGHT_VERSION
 WORKDIR /work
 
 # fonts-dejavu is needed for the same RTL rendering as on CI
-RUN apt-get update && apt-get -y install docker.io fonts-dejavu
+RUN apt-get update && \
+    apt-get -y install docker.io fonts-dejavu && \
+    apt-get purge -y --auto-remove && \
+    rm -rf /var/lib/apt/lists/*
+
 # Install the matching playwright runtime, the docker image only includes browsers
 RUN npm i -g playwright@${PLAYWRIGHT_VERSION}
 
+# switch to pwuser
+USER 1001:1001
+
 COPY docker-entrypoint.sh /docker-entrypoint.sh
 
-ENTRYPOINT ["/docker-entrypoint.sh"]
+# We use `docker-init` as PID 1, which means that the container shuts down correctly on SIGTERM.
+#
+# (The problem is that PID 1 doesn't get default signal handlers, and
+# playwright server doesn't register a SIGTERM handler, so if that ends up as
+# PID 1, then it ignores SIGTERM. Likewise bash doesn't set a SIGTERM handler by default.
+#
+# The easiest solution is to use docker-init, which is in fact `tini` (https://github.com/krallin/tini).
+#
+# See https://github.com/krallin/tini/issues/8#issuecomment-146135930 for a good explanation of all this.)
+ENTRYPOINT ["/usr/bin/docker-init", "/docker-entrypoint.sh"]
diff --git a/packages/playwright-common/README.md b/packages/playwright-common/README.md
index ab7c192315..47355e1dc8 100644
--- a/packages/playwright-common/README.md
+++ b/packages/playwright-common/README.md
@@ -1,10 +1,16 @@
 # @element-hq/element-web-playwright-common
 
-Set of Playwright utilities to make it easier to write tests for Element Web, Element Web Modules & Element Desktop.
+Set of Playwright & testcontainers utilities to make it easier to write tests for Element Web, Element Web Modules & Element Desktop.
 
-# This is a partial clone of https://github.com/element-hq/element-modules/tree/main/packages/element-web-playwright-common
+The main export includes a number of fixtures and custom assertions as documented in JSDoc.
 
-In the future the rest of the package will be brought into this monorepo, for now it serves as an experimental alternative to https://github.com/element-hq/element-modules/pull/188
+The `lib/testcontainers` export contains the following modules:
+
+- `SynapseContainer` - A testcontainer for running a Synapse server
+- `MatrixAuthenticationServiceContainer` - A testcontainer for running a Matrix Authentication Service
+- `MailpitContainer` - A testcontainer for running a Mailpit SMTP server
+
+There are a number of utils available in the `lib/utils` export.
 
 ## Releases
 
diff --git a/packages/playwright-common/docker-entrypoint.sh b/packages/playwright-common/docker-entrypoint.sh
index 66a71fcd58..b615bf24d6 100755
--- a/packages/playwright-common/docker-entrypoint.sh
+++ b/packages/playwright-common/docker-entrypoint.sh
@@ -1,4 +1,2 @@
 #!/bin/bash
-
-# We use npm here as we used `npm i -g` to install playwright in the Dockerfile
-npm exec -- playwright run-server --port "$PORT" --host 0.0.0.0
+exec /usr/bin/playwright run-server --port "$PORT" --host 0.0.0.0
diff --git a/packages/playwright-common/package.json b/packages/playwright-common/package.json
index 26b5447f70..978f924392 100644
--- a/packages/playwright-common/package.json
+++ b/packages/playwright-common/package.json
@@ -1,7 +1,7 @@
 {
-    "name": "@element-hq/element-web-playwright-common-local",
+    "name": "@element-hq/element-web-playwright-common",
     "type": "module",
-    "version": "3.0.0",
+    "version": "4.0.0",
     "license": "SEE LICENSE IN README.md",
     "repository": {
         "type": "git",
@@ -12,10 +12,34 @@
     "engines": {
         "node": ">=20.0.0"
     },
+    "main": "lib/index.js",
+    "types": "lib/index.d.ts",
     "bin": {
-        "playwright-screenshots-experimental": "playwright-screenshots.sh"
+        "playwright-screenshots": "playwright-screenshots.sh"
+    },
+    "scripts": {
+        "prepack": "nx build:playwright",
+        "lint:types": "nx lint:types"
     },
     "devDependencies": {
-        "wait-on": "^9.0.4"
+        "@element-hq/element-web-module-api": "workspace:*",
+        "@types/lodash-es": "^4.17.12",
+        "typescript": "^6.0.0"
+    },
+    "dependencies": {
+        "@axe-core/playwright": "^4.10.1",
+        "@testcontainers/postgresql": "^11.0.0",
+        "glob": "^13.0.5",
+        "lodash-es": "^4.17.23",
+        "mailpit-api": "^1.2.0",
+        "strip-ansi": "^7.1.0",
+        "testcontainers": "^11.0.0",
+        "wait-on": "^9.0.4",
+        "yaml": "^2.7.0"
+    },
+    "peerDependencies": {
+        "@element-hq/element-web-module-api": "*",
+        "@playwright/test": "catalog:",
+        "playwright-core": "catalog:"
     }
 }
diff --git a/packages/playwright-common/playwright-screenshots.sh b/packages/playwright-common/playwright-screenshots.sh
index 7fc1a1fa33..d860e34d12 100755
--- a/packages/playwright-common/playwright-screenshots.sh
+++ b/packages/playwright-common/playwright-screenshots.sh
@@ -9,7 +9,7 @@ SCRIPT_DIR=$(dirname "$SCRIPT_PATH")
 function build_image() {
     local IMAGE_NAME="$1"
 
-    echo "Building $IMAGE_NAME image in $SCRIPT_DIR"
+    echo "playwright-screenshots: Building $IMAGE_NAME image in $SCRIPT_DIR"
     docker build -t "$IMAGE_NAME" --build-arg "PLAYWRIGHT_VERSION=${IMAGE_NAME#*:}" "$SCRIPT_DIR"
 }
 
@@ -19,24 +19,34 @@ WS_PORT=3000
 PW_VERSION=$(pnpm --silent -- playwright --version | awk '{print $2}')
 IMAGE_NAME="ghcr.io/element-hq/element-web/playwright-server:$PW_VERSION"
 
-# Pull the image, failing that build the image
-docker pull "$IMAGE_NAME" 2>/dev/null || build_image "$IMAGE_NAME"
+# If the image exists in the repository, pull it; otherwise, build it.
+#
+# (This explicit test gives the user clearer progress info than just
+# `docker pull 2>/dev/null || build_image`.)
+if docker manifest inspect "$IMAGE_NAME" &>/dev/null; then
+    docker pull "$IMAGE_NAME"
+else
+    build_image "$IMAGE_NAME"
+fi
 
 # Start the playwright-server in docker
 CONTAINER=$(docker run --network=host -v /tmp:/tmp --rm -d -e PORT="$WS_PORT" "$IMAGE_NAME")
 # Set up an exit trap to clean up the docker container
 clean_up() {
     ARG=$?
-    echo "Stopping playwright-server"
+    echo "playwright-screenshots: Stopping playwright-server"
     docker stop "$CONTAINER" > /dev/null
     exit $ARG
 }
 trap clean_up EXIT
 
 # Wait for playwright-server to be ready
-echo "Waiting for playwright-server"
+echo "playwright-screenshots: Waiting for playwright-server"
 pnpm --dir "$SCRIPT_DIR" exec wait-on "tcp:$WS_PORT"
 
+# Playwright seems to overwrite the last line from the console, so add an
+# extra newline to make sure this doesn't get lost.
+echo -e "playwright-screenshots: Running '$@'\n"
+
 # Run the test we were given, setting PW_TEST_CONNECT_WS_ENDPOINT accordingly
-echo "Running '$@'"
 PW_TEST_CONNECT_WS_ENDPOINT="http://localhost:$WS_PORT" "$@"
diff --git a/packages/playwright-common/project.json b/packages/playwright-common/project.json
index 8bb084571d..bf6ef190c2 100644
--- a/packages/playwright-common/project.json
+++ b/packages/playwright-common/project.json
@@ -3,6 +3,19 @@
     "projectType": "library",
     "root": "packages/playwright-common",
     "targets": {
+        "build:playwright": {
+            "cache": true,
+            "command": "tsc",
+            "inputs": ["src"],
+            "outputs": ["{projectRoot}/lib"],
+            "options": { "cwd": "packages/playwright-common" },
+            "dependsOn": ["^build"]
+        },
+        "lint:types": {
+            "command": "pnpm exec tsc --noEmit",
+            "options": { "cwd": "packages/playwright-common" },
+            "dependsOn": ["^build"]
+        },
         "docker:prebuild": {
             "cache": true,
             "command": "echo PLAYWRIGHT_VERSION=$(pnpm --silent -- playwright --version | awk '{print $2}') > .env.docker:build",
diff --git a/packages/playwright-common/src/@types/playwright-core.d.ts b/packages/playwright-common/src/@types/playwright-core.d.ts
new file mode 100644
index 0000000000..3db7bb9c4c
--- /dev/null
+++ b/packages/playwright-common/src/@types/playwright-core.d.ts
@@ -0,0 +1,12 @@
+/*
+Copyright 2024-2025 New Vector Ltd.
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+declare module "playwright-core/lib/utils" {
+    // This type is not public in playwright-core utils
+    export function sanitizeForFilePath(filePath: string): string;
+}
diff --git a/packages/playwright-common/src/expect/axe.ts b/packages/playwright-common/src/expect/axe.ts
new file mode 100644
index 0000000000..ab798d9a96
--- /dev/null
+++ b/packages/playwright-common/src/expect/axe.ts
@@ -0,0 +1,37 @@
+/*
+Copyright 2024-2025 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect as baseExpect, type ExpectMatcherState, type MatcherReturnType } from "@playwright/test";
+
+import type { AxeBuilder } from "@axe-core/playwright";
+
+export type Expectations = {
+    /**
+     * Assert that the given AxeBuilder instance has no violations.
+     * @param receiver - The AxeBuilder instance to check.
+     */
+    toHaveNoViolations: (this: ExpectMatcherState, receiver: AxeBuilder) => Promise<MatcherReturnType>;
+};
+
+export const expect = baseExpect.extend<Expectations>({
+    async toHaveNoViolations(this: ExpectMatcherState, receiver: AxeBuilder) {
+        const testInfo = test.info();
+        if (!testInfo) throw new Error(`toHaveNoViolations() must be called during the test`);
+
+        const results = await receiver.analyze();
+
+        await testInfo.attach("accessibility-scan-results", {
+            body: JSON.stringify(results, null, 2),
+            contentType: "application/json",
+        });
+
+        baseExpect(results.violations).toEqual([]);
+
+        return { pass: true, message: (): string => "", name: "toHaveNoViolations" };
+    },
+});
diff --git a/packages/playwright-common/src/expect/index.ts b/packages/playwright-common/src/expect/index.ts
new file mode 100644
index 0000000000..3ef2a00bf1
--- /dev/null
+++ b/packages/playwright-common/src/expect/index.ts
@@ -0,0 +1,21 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { mergeExpects, type Expect } from "@playwright/test";
+
+import {
+    expect as screenshotExpectations,
+    type Expectations as ScreenshotExpectations,
+    type ToMatchScreenshotOptions,
+} from "./screenshot.js";
+import { expect as axeExpectations, type Expectations as AxeExpectations } from "./axe.js";
+
+export const expect = mergeExpects(screenshotExpectations, axeExpectations) as Expect<
+    ScreenshotExpectations & AxeExpectations
+>;
+
+export type { ToMatchScreenshotOptions };
diff --git a/packages/playwright-common/src/expect/screenshot.ts b/packages/playwright-common/src/expect/screenshot.ts
new file mode 100644
index 0000000000..9936ae982b
--- /dev/null
+++ b/packages/playwright-common/src/expect/screenshot.ts
@@ -0,0 +1,79 @@
+/*
+Copyright 2024-2025 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import {
+    test,
+    expect as baseExpect,
+    type ElementHandle,
+    type ExpectMatcherState,
+    type Locator,
+    type Page,
+    type PageAssertionsToHaveScreenshotOptions,
+    type MatcherReturnType,
+} from "@playwright/test";
+import { sanitizeForFilePath } from "playwright-core/lib/utils";
+import { extname } from "node:path";
+
+import { ANNOTATION } from "../stale-screenshot-reporter.js";
+
+// Based on https://github.com/microsoft/playwright/blob/2b77ed4d7aafa85a600caa0b0d101b72c8437eeb/packages/playwright/src/util.ts#L206C8-L210C2
+function sanitizeFilePathBeforeExtension(filePath: string): string {
+    const ext = extname(filePath);
+    const base = filePath.substring(0, filePath.length - ext.length);
+    return sanitizeForFilePath(base) + ext;
+}
+
+export interface ToMatchScreenshotOptions extends PageAssertionsToHaveScreenshotOptions {
+    css?: string;
+}
+
+export type Expectations = {
+    toMatchScreenshot: (
+        this: ExpectMatcherState,
+        receiver: Page | Locator,
+        name: `${string}.png`,
+        options?: ToMatchScreenshotOptions,
+    ) => Promise<MatcherReturnType>;
+};
+
+/**
+ * Provides an upgrade to the `toHaveScreenshot` expectation.
+ * Unfortunately, we can't just extend the existing `toHaveScreenshot` expectation
+ */
+export const expect = baseExpect.extend<Expectations>({
+    async toMatchScreenshot(receiver, name, options) {
+        const testInfo = test.info();
+        if (!testInfo) throw new Error(`toMatchScreenshot() must be called during the test`);
+
+        if (!testInfo.tags.includes("@screenshot")) {
+            throw new Error("toMatchScreenshot() must be used in a test tagged with @screenshot");
+        }
+
+        const page = "page" in receiver ? receiver.page() : receiver;
+
+        let style: ElementHandle<Element> | undefined;
+        if (options?.css) {
+            // We add a custom style tag before taking screenshots
+            style = (await page.addStyleTag({
+                content: options.css,
+            })) as ElementHandle<Element>;
+        }
+
+        const screenshotName = sanitizeFilePathBeforeExtension(name);
+        await baseExpect(receiver).toHaveScreenshot(screenshotName, options);
+
+        await style?.evaluate((tag) => tag.remove());
+
+        testInfo.annotations.push({
+            type: ANNOTATION,
+            description: testInfo.snapshotPath(screenshotName),
+        });
+
+        return { pass: true, message: (): string => "", name: "toMatchScreenshot" };
+    },
+});
diff --git a/packages/playwright-common/src/fixtures/axe.ts b/packages/playwright-common/src/fixtures/axe.ts
new file mode 100644
index 0000000000..6f99b489c0
--- /dev/null
+++ b/packages/playwright-common/src/fixtures/axe.ts
@@ -0,0 +1,24 @@
+/*
+Copyright 2024-2025 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test as base } from "@playwright/test";
+import { AxeBuilder } from "@axe-core/playwright";
+
+// This fixture is useful for simple component library tests that won't want any extra services like a homeserver, so we
+// explicitly avoid pulling anything more than playwright's base fixtures in.
+export const test = base.extend<{
+    /**
+     * AxeBuilder instance for the current page
+     */
+    axe: AxeBuilder;
+}>({
+    axe: async ({ page }, use) => {
+        const builder = new AxeBuilder({ page });
+        await use(builder);
+    },
+});
diff --git a/packages/playwright-common/src/fixtures/index.ts b/packages/playwright-common/src/fixtures/index.ts
new file mode 100644
index 0000000000..04dfb50189
--- /dev/null
+++ b/packages/playwright-common/src/fixtures/index.ts
@@ -0,0 +1,12 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+export { type Services, type WorkerOptions } from "./services.js";
+
+// We avoid using `mergeTests` because it drops useful type information about the fixtures.
+// `user` is the top of our stack of extensions (it extends services, axe, etc), so it includes everything.
+export { test } from "./user.js";
diff --git a/packages/playwright-common/src/fixtures/services.ts b/packages/playwright-common/src/fixtures/services.ts
new file mode 100644
index 0000000000..de5e9af680
--- /dev/null
+++ b/packages/playwright-common/src/fixtures/services.ts
@@ -0,0 +1,171 @@
+/*
+Copyright 2024-2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type MailpitClient } from "mailpit-api";
+import { Network, type StartedNetwork } from "testcontainers";
+import { type StartedPostgreSqlContainer } from "@testcontainers/postgresql";
+
+import {
+    type SynapseConfig,
+    SynapseContainer,
+    type StartedMatrixAuthenticationServiceContainer,
+    type HomeserverContainer,
+    type StartedHomeserverContainer,
+    MailpitContainer,
+    type StartedMailpitContainer,
+} from "../testcontainers/index.js";
+import { Logger } from "../utils/logger.js";
+// We want to avoid using `mergeTests` in index.ts because it drops useful type information about the fixtures. Instead,
+// we add `axe` into our fixture suite by using its `test` as a base, so that there is a linear hierarchy.
+import { test as base } from "./axe.js";
+import { makePostgres } from "../testcontainers/postgres.js";
+
+/**
+ * Test-scoped fixtures available in the test
+ */
+export interface TestFixtures {
+    /**
+     * The mailpit client instance for the test.
+     * This is a fresh client instance with no messages from prior tests.
+     */
+    mailpitClient: MailpitClient;
+}
+
+export interface WorkerOptions {
+    /**
+     * The synapse configuration to use for the homeserver.
+     */
+    synapseConfig: Partial<SynapseConfig>;
+}
+
+/**
+ * Worker-scoped "service" fixtures available in the test
+ */
+export interface Services {
+    /**
+     * The logger instance for the worker.
+     */
+    logger: Logger;
+
+    /**
+     * The started testcontainers network instance for the worker.
+     */
+    network: StartedNetwork;
+
+    /**
+     * The started postgres container instance for the worker.
+     */
+    postgres: StartedPostgreSqlContainer;
+
+    /**
+     * The started mailpit container instance for the worker.
+     */
+    mailpit: StartedMailpitContainer;
+
+    /**
+     * The homeserver instance container to use for the worker.
+     */
+    _homeserver: HomeserverContainer<unknown>;
+    /**
+     * The started homeserver instance container for the worker.
+     */
+    homeserver: StartedHomeserverContainer;
+
+    /**
+     * The Matrix Authentication Service container instance for the worker.
+     * May be undefined if no delegated auth is in use.
+     */
+    mas?: StartedMatrixAuthenticationServiceContainer;
+}
+
+export const test = base.extend<TestFixtures, WorkerOptions & Services>({
+    logger: [
+        // eslint-disable-next-line no-empty-pattern
+        async ({}, use) => {
+            const logger = new Logger();
+            await use(logger);
+        },
+        { scope: "worker" },
+    ],
+    network: [
+        // eslint-disable-next-line no-empty-pattern
+        async ({}, use) => {
+            const network = await new Network().start();
+            await use(network);
+            await network.stop();
+        },
+        { scope: "worker" },
+    ],
+    postgres: [
+        async ({ logger, network }, use) => {
+            const container = await makePostgres(network, logger);
+            await use(container);
+            await container.stop();
+        },
+        { scope: "worker" },
+    ],
+
+    mailpit: [
+        async ({ logger, network }, use) => {
+            const container = await new MailpitContainer()
+                .withNetwork(network)
+                .withNetworkAliases("mailpit")
+                .withLogConsumer(logger.getConsumer("mailpit"))
+                .start();
+            await use(container);
+            await container.stop();
+        },
+        { scope: "worker" },
+    ],
+    mailpitClient: async ({ mailpit: container }, use) => {
+        await container.client.deleteMessages();
+        await use(container.client);
+    },
+
+    synapseConfig: [{}, { scope: "worker" }],
+    _homeserver: [
+        async ({ logger }, use) => {
+            const container = new SynapseContainer().withLogConsumer(logger.getConsumer("synapse"));
+            await use(container);
+        },
+        { scope: "worker" },
+    ],
+    homeserver: [
+        async ({ logger, network, _homeserver: homeserver, synapseConfig, mas }, use) => {
+            if (homeserver instanceof SynapseContainer) {
+                homeserver.withConfig(synapseConfig);
+            }
+            const container = await homeserver
+                .withNetwork(network)
+                .withNetworkAliases("homeserver")
+                .withLogConsumer(logger.getConsumer("homeserver"))
+                .withMatrixAuthenticationService(mas)
+                .start();
+
+            await use(container);
+            await container.stop();
+        },
+        { scope: "worker" },
+    ],
+    mas: [
+        // eslint-disable-next-line no-empty-pattern
+        async ({}, use) => {
+            // we stub the mas fixture to allow `homeserver` to depend on it to ensure
+            // when it is specified by `masHomeserver` it is started before the homeserver
+            await use(undefined);
+        },
+        { scope: "worker" },
+    ],
+
+    context: async ({ logger, context, request, homeserver }, use, testInfo) => {
+        homeserver.setRequest(request);
+        await logger.onTestStarted(context);
+        await use(context);
+        await logger.onTestFinished(testInfo);
+        await homeserver.onTestFinished(testInfo);
+    },
+});
diff --git a/packages/playwright-common/src/fixtures/toasts.ts b/packages/playwright-common/src/fixtures/toasts.ts
new file mode 100644
index 0000000000..cf6f6c8bb2
--- /dev/null
+++ b/packages/playwright-common/src/fixtures/toasts.ts
@@ -0,0 +1,163 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { expect, type Locator, type Page } from "@playwright/test";
+
+// We want to avoid using `mergeTests` in index.ts because it drops useful type
+// information about the fixtures. Instead, we add `services` into our fixture
+// suite by using its `test` as a base, so that there is a linear hierarchy.
+import { test as base } from "./services.js";
+
+// This fixture provides convenient handling of Element Web's toasts.
+export const test = base.extend<{
+    /**
+     * Convenience functions for handling toasts.
+     */
+    toasts: Toasts;
+}>({
+    toasts: async ({ page }, use) => {
+        const toasts = new Toasts(page);
+        await use(toasts);
+    },
+});
+
+class Toasts {
+    public constructor(public readonly page: Page) {}
+
+    /**
+     * Assert that no toasts exist.
+     */
+    public async assertNoToasts(): Promise<void> {
+        await expect(this.page.locator(".mx_Toast_toast")).not.toBeVisible();
+    }
+
+    /**
+     * Return the toast with the supplied title. Fail or return null if it does
+     * not exist.
+     *
+     * If `required` is false, you should supply a relatively short `timeout`
+     * (e.g. 2000, meaning 2 seconds) to prevent your test taking too long.
+     *
+     * @param title - Expected title of the toast.
+     * @param timeout - Time in ms before we give up and decide the toast does
+     *                  not exist. If `required` is true, defaults to `timeout`
+     *                  in `TestConfig.expect`. Otherwise, defaults to 2000 (2
+     *                  seconds).
+     * @param required - If true, fail the test (throw an exception) if the
+     *                   toast is not visible. Otherwise, just return null if
+     *                   the toast is not visible.
+     * @returns the Locator for the matching toast, or null if it is not
+     *          visible. (null will only be returned if `required` is false.)
+     */
+    public async getToast(title: string, timeout?: number, required?: true): Promise<Locator>;
+    public async getToast(title: string, timeout: number | undefined, required: false): Promise<Locator | null>;
+    public async getToast(title: string, timeout?: number, required = true): Promise<Locator | null> {
+        const toast = this.page.locator(".mx_Toast_toast", { hasText: title }).first();
+
+        if (required) {
+            await expect(toast).toBeVisible({ timeout });
+            return toast;
+        } else {
+            // If we don't set a timeout, waitFor will wait forever. Since
+            // required is false, we definitely don't want to wait forever.
+            timeout = timeout ?? 2000;
+
+            try {
+                await toast.waitFor({ state: "visible", timeout });
+                return toast;
+            } catch {
+                return null;
+            }
+        }
+    }
+
+    /**
+     * Accept the toast with the supplied title, or fail if it does not exist.
+     *
+     * Only works if this toast is at the top of the stack of toasts.
+     *
+     * @param title - Expected title of the toast.
+     */
+    public async acceptToast(title: string): Promise<void> {
+        return await clickToastButton(this, title, "primary");
+    }
+
+    /**
+     * Accept the toast with the supplied title, if it exists, or return after 2
+     * seconds if it is not found.
+     *
+     * Only works if this toast is at the top of the stack of toasts.
+     *
+     * @param title - Expected title of the toast.
+     */
+    public async acceptToastIfExists(title: string): Promise<void> {
+        return await clickToastButton(this, title, "primary", 2000, false);
+    }
+
+    /**
+     * Reject the toast with the supplied title, or fail if it does not exist.
+     *
+     * Only works if this toast is at the top of the stack of toasts.
+     *
+     * @param title - Expected title of the toast.
+     */
+    public async rejectToast(title: string): Promise<void> {
+        return await clickToastButton(this, title, "secondary");
+    }
+
+    /**
+     * Reject the toast with the supplied title, if it exists, or return after 2
+     * seconds if it is not found.
+     *
+     * Only works if this toast is at the top of the stack of toasts.
+     *
+     * @param title - Expected title of the toast.
+     */
+    public async rejectToastIfExists(title: string): Promise<void> {
+        return await clickToastButton(this, title, "secondary", 2000, false);
+    }
+}
+
+/**
+ * Find the toast with the supplied title and click a button on it.
+ *
+ * Only works if this toast is at the top of the stack of toasts.
+ *
+ * If `required` is false, you should supply a relatively short `timeout`
+ * (e.g. 2000, meaning 2 seconds) to prevent your test taking too long.
+ *
+ * @param toasts - A Toasts instance.
+ * @param title - Expected title of the toast.
+ * @param button - Which button to click on the toast. Allowed values are
+ *                 "primary", which will accept the toast, or "secondary",
+ *                 which will reject it.
+ * @param timeout - Time in ms before we give up and decide the toast does
+ *                  not exist. If `required` is true, defaults to `timeout`
+ *                  in `TestConfig.expect`. Otherwise, defaults to 2000 (2
+ *                  seconds).
+ * @param required - If true, fail the test (throw an exception) if the
+ *                   toast is not visible. Otherwise, just return after
+ *                   `timeout` if the toast is not visible.
+ */
+async function clickToastButton(
+    toasts: Toasts,
+    title: string,
+    button: "primary" | "secondary",
+    timeout?: number,
+    required = true,
+): Promise<void> {
+    let toast: Locator | null;
+    if (required) {
+        toast = await toasts.getToast(title, timeout, true);
+    } else {
+        toast = await toasts.getToast(title, timeout, false);
+    }
+
+    if (toast) {
+        await toast.locator(`.mx_Toast_buttons button[data-kind="${button}"]`).click();
+    }
+}
diff --git a/packages/playwright-common/src/fixtures/user.ts b/packages/playwright-common/src/fixtures/user.ts
new file mode 100644
index 0000000000..61f8d70105
--- /dev/null
+++ b/packages/playwright-common/src/fixtures/user.ts
@@ -0,0 +1,104 @@
+/*
+Copyright 2024-2025 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type Page } from "@playwright/test";
+import { sample, uniqueId } from "lodash-es";
+
+// We want to avoid using `mergeTests` in index.ts because it drops useful type
+// information about the fixtures. Instead, we add `toasts` into our fixture
+// suite by using its `test` as a base, so that there is a linear hierarchy.
+import { test as base } from "./toasts.js";
+import { type Credentials } from "../utils/api.js";
+
+/** Adds an initScript to the given page which will populate localStorage appropriately so that Element will use the given credentials. */
+export async function populateLocalStorageWithCredentials(page: Page, credentials: Credentials) {
+    await page.addInitScript(
+        ({ credentials }) => {
+            window.localStorage.setItem("mx_hs_url", credentials.homeserverBaseUrl);
+            window.localStorage.setItem("mx_user_id", credentials.userId);
+            window.localStorage.setItem("mx_access_token", credentials.accessToken);
+            window.localStorage.setItem("mx_device_id", credentials.deviceId);
+            window.localStorage.setItem("mx_is_guest", "false");
+            window.localStorage.setItem("mx_has_pickle_key", "false");
+            window.localStorage.setItem("mx_has_access_token", "true");
+
+            window.localStorage.setItem(
+                "mx_local_settings",
+                JSON.stringify({
+                    // Retain any other settings which may have already been set
+                    ...JSON.parse(window.localStorage.getItem("mx_local_settings") ?? "{}"),
+                    // Ensure the language is set to a consistent value
+                    language: "en",
+                }),
+            );
+        },
+        { credentials },
+    );
+}
+
+export const test = base.extend<{
+    /**
+     * The displayname to use for the user registered in {@link #credentials}.
+     *
+     * To set it, call `test.use({ displayName: "myDisplayName" })` in the test file or `describe` block.
+     * See {@link https://playwright.dev/docs/api/class-test#test-use}.
+     */
+    displayName?: string;
+
+    /**
+     * A test fixture which registers a test user on the {@link #homeserver} and supplies the details
+     * of the registered user.
+     */
+    credentials: Credentials;
+
+    /**
+     * The same as {@link https://playwright.dev/docs/api/class-fixtures#fixtures-page|`page`},
+     * but adds an initScript which will populate localStorage with the user's details from
+     * {@link #credentials} and {@link #homeserver}.
+     *
+     * Similar to {@link #user}, but doesn't load the app.
+     */
+    pageWithCredentials: Page;
+
+    /**
+     * A (rather poorly-named) test fixture which registers a user per {@link #credentials}, stores
+     * the credentials into localStorage per {@link #pageWithCredentials}, and then loads the front page of the
+     * app.
+     */
+    user: Credentials;
+}>({
+    displayName: undefined,
+
+    // We don't directly depend upon the `context` fixture, but we do need to make sure that it has been run
+    // before this fixture, since it is responsible for configuring the APIRequestContext on the homeserver, so
+    // without it we cannot register the user.
+    credentials: async ({ context, homeserver, displayName: testDisplayName }, use, testInfo) => {
+        const names = ["Alice", "Bob", "Charlie", "Daniel", "Eve", "Frank", "Grace", "Hannah", "Isaac", "Judy"];
+        const password = uniqueId("password_");
+        const displayName = testDisplayName ?? sample(names)!;
+
+        const credentials = await homeserver.registerUser(`user_${testInfo.testId}`, password, displayName);
+        console.log(`Registered test user ${credentials.userId} with displayname ${displayName}`);
+
+        await use({
+            ...credentials,
+            displayName,
+        });
+    },
+
+    pageWithCredentials: async ({ page, credentials }, use) => {
+        await populateLocalStorageWithCredentials(page, credentials);
+        await use(page);
+    },
+
+    user: async ({ pageWithCredentials: page, credentials }, use) => {
+        await page.goto("/");
+        await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 });
+        await use(credentials);
+    },
+});
diff --git a/packages/playwright-common/flaky-reporter.ts b/packages/playwright-common/src/flaky-reporter.ts
similarity index 88%
rename from packages/playwright-common/flaky-reporter.ts
rename to packages/playwright-common/src/flaky-reporter.ts
index 520c2553a2..cebfee7702 100644
--- a/packages/playwright-common/flaky-reporter.ts
+++ b/packages/playwright-common/src/flaky-reporter.ts
@@ -24,6 +24,8 @@ type PaginationLinks = {
     first?: string;
 };
 
+const ANSI_COLOUR_REGEX = /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
+
 // We see quite a few test flakes which are caused by the app exploding
 // so we have some magic strings we check the logs for to better track the flake with its cause
 const SPECIAL_CASES: Record<string, string> = {
@@ -38,18 +40,35 @@ class FlakyReporter implements Reporter {
     public onTestEnd(test: TestCase): void {
         // Ignores flakes on Dendrite and Pinecone as they have their own flakes we do not track
         if (["Dendrite", "Pinecone"].includes(test.parent.project()!.name!)) return;
-        let failures = [`${test.location.file.split("playwright/e2e/")[1]}: ${test.title}`];
+
         if (test.outcome() === "flaky") {
+            const failures: string[] = [];
+
             const timedOutRuns = test.results.filter((result) => result.status === "timedOut");
             const pageLogs = timedOutRuns.flatMap((result) =>
                 result.attachments.filter((attachment) => attachment.name.startsWith("page-")),
             );
+
             // If a test failed due to a systemic fault then the test is not flaky, the app is, record it as such.
             const specialCases = Object.keys(SPECIAL_CASES).filter((log) =>
                 pageLogs.some((attachment) => attachment.name.startsWith("page-") && attachment.body?.includes(log)),
             );
             if (specialCases.length > 0) {
-                failures = specialCases.map((specialCase) => SPECIAL_CASES[specialCase]);
+                failures.push(...specialCases.map((specialCase) => SPECIAL_CASES[specialCase]));
+            }
+
+            // Check for fixtures failing to set up
+            const errorMessages = timedOutRuns
+                .map((r) => r.error?.message?.replace(ANSI_COLOUR_REGEX, ""))
+                .filter(Boolean) as string[];
+            for (const error of errorMessages) {
+                if (error.startsWith("Fixture") && error.endsWith("exceeded during setup.")) {
+                    failures.push(error);
+                }
+            }
+
+            if (failures.length < 1) {
+                failures.push(`${test.location.file.split("playwright/e2e/")[1]}: ${test.title}`);
             }
 
             for (const title of failures) {
diff --git a/packages/playwright-common/src/index.ts b/packages/playwright-common/src/index.ts
new file mode 100644
index 0000000000..afc92244e4
--- /dev/null
+++ b/packages/playwright-common/src/index.ts
@@ -0,0 +1,102 @@
+/*
+Copyright 2024-2025 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type Config as BaseConfig } from "@element-hq/element-web-module-api";
+
+import { test as base } from "./fixtures/index.js";
+import { routeConfigJson } from "./utils/config_json.js";
+
+export * from "./utils/config_json.js";
+export * from "./utils/context.js";
+
+export { populateLocalStorageWithCredentials } from "./fixtures/user.js";
+
+// Enable experimental service worker support
+// See https://playwright.dev/docs/service-workers-experimental#how-to-enable
+process.env["PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS"] = "1";
+
+// We extend the Module API Config interface so that all modules
+// which use declaration merging will have their config types correctly applied.
+export interface Config extends BaseConfig {
+    default_server_config: {
+        "m.homeserver"?: {
+            base_url: string;
+            server_name?: string;
+        };
+        "m.identity_server"?: {
+            base_url: string;
+            server_name?: string;
+        };
+    };
+    enable_presence_by_hs_url?: Record<string, boolean>;
+    setting_defaults: Record<string, unknown>;
+    map_style_url?: string;
+    features: Record<string, boolean>;
+    modules?: string[];
+}
+
+// This is deliberately quite a minimal config.json, so that we can test that the default settings actually work.
+export const CONFIG_JSON: Partial<Config> = {
+    default_server_config: {},
+
+    // The default language is set here for test consistency
+    setting_defaults: {
+        language: "en-GB",
+    },
+
+    // the location tests want a map style url.
+    map_style_url: "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx",
+
+    features: {
+        // We don't want to go through the feature announcement during the e2e test
+        feature_release_announcement: false,
+    },
+};
+
+export interface TestFixtures {
+    /**
+     * The contents of the config.json to send when the client requests it.
+     */
+    config: Partial<typeof CONFIG_JSON>;
+
+    labsFlags: string[];
+    disablePresence: boolean;
+    /**
+     * Whether the left panel should have its width fixed.
+     * This is done because the library that we use for rendering collapsible
+     * panels uses math to calculate the width which can sometimes leads to +/-1px
+     * difference. While this does not matter to the user, it can lead to screenshot
+     * tests failing.
+     * Defaults to true, should be set to false via {@link base.use} when you want to test the collapse
+     * behaviour.
+     */
+    lockLeftPanelWidth: boolean;
+}
+
+export const test = base.extend<TestFixtures>({
+    // We merge this atop the default CONFIG_JSON in the page fixture to make extending it easier
+    config: async ({}, use) => use({}),
+    labsFlags: async ({}, use) => use([]),
+    disablePresence: async ({}, use) => use(false),
+    lockLeftPanelWidth: true,
+    page: async ({ homeserver, context, page, config, labsFlags, disablePresence, lockLeftPanelWidth }, use) => {
+        await routeConfigJson(context, homeserver.baseUrl, config, labsFlags, disablePresence);
+        if (lockLeftPanelWidth) {
+            await page.addStyleTag({
+                content: `
+                        #left-panel {
+                            flex: 0 0 369.6875px !important;
+                        }
+                `,
+            });
+        }
+        await use(page);
+    },
+});
+
+export { expect, type ToMatchScreenshotOptions } from "./expect/index.js";
diff --git a/packages/playwright-common/src/stale-screenshot-reporter.ts b/packages/playwright-common/src/stale-screenshot-reporter.ts
new file mode 100644
index 0000000000..2d7b1ec095
--- /dev/null
+++ b/packages/playwright-common/src/stale-screenshot-reporter.ts
@@ -0,0 +1,104 @@
+/*
+Copyright 2024 - 2025 New Vector Ltd.
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/**
+ * Test reporter which compares the reported screenshots vs those on disk to find stale screenshots
+ * Only intended to run from within GitHub Actions
+ */
+
+import { glob } from "glob";
+import path from "node:path";
+import { type Reporter, type TestCase } from "@playwright/test/reporter";
+import { type FullConfig } from "@playwright/test";
+
+/**
+ * The annotation type used to mark screenshots in tests.
+ * `_` prefix hides it from the HTML reporter
+ */
+export const ANNOTATION = "_screenshot";
+
+class StaleScreenshotReporter implements Reporter {
+    private readonly snapshotRoots = new Set<string>();
+    private readonly screenshots = new Set<string>();
+    private readonly failing = new Set<string>();
+    private success = true;
+
+    public onBegin(config: FullConfig): void {
+        for (const project of config.projects) {
+            this.snapshotRoots.add(project.snapshotDir);
+        }
+    }
+
+    public onTestEnd(test: TestCase): void {
+        if (!test.ok()) {
+            this.failing.add(test.id);
+            return;
+        }
+        this.failing.delete(test.id); // delete if passed on re-run
+
+        for (const annotation of test.annotations) {
+            if (annotation.type === ANNOTATION && annotation.description) {
+                this.screenshots.add(annotation.description);
+            }
+        }
+    }
+
+    private error(msg: string, file: string) {
+        if (process.env.GITHUB_ACTIONS) {
+            console.log(`::error file=${file}::${msg}`);
+        }
+        console.error(msg, file);
+        this.success = false;
+    }
+
+    private async checkStaleScreenshots(): Promise<void> {
+        if (!this.snapshotRoots.size) {
+            this.error("No snapshot directories found, did you set the snapshotDir in your Playwright config?", "");
+            return;
+        }
+
+        const screenshotFiles = new Set<string>();
+        for (const snapshotRoot of this.snapshotRoots) {
+            const files = await glob(`**/*.png`, { cwd: snapshotRoot });
+            for (const file of files) {
+                screenshotFiles.add(path.join(snapshotRoot, file));
+            }
+        }
+
+        for (const screenshot of screenshotFiles) {
+            if (screenshot.split("-").at(-1) !== "linux.png") {
+                this.error(
+                    "Found screenshot belonging to different platform, this should not be checked in",
+                    screenshot,
+                );
+            }
+        }
+        for (const screenshot of this.screenshots) {
+            screenshotFiles.delete(screenshot);
+        }
+        if (screenshotFiles.size > 0) {
+            for (const screenshot of screenshotFiles) {
+                this.error("Stale screenshot file", screenshot);
+            }
+        }
+    }
+
+    public async onExit(): Promise<void> {
+        if (this.failing.size) {
+            this.error(`${this.failing.size} tests failed, skipping stale screenshot reporter.`, "");
+        } else {
+            await this.checkStaleScreenshots();
+        }
+
+        if (!this.success) {
+            process.exit(1);
+        }
+    }
+}
+
+export default StaleScreenshotReporter;
diff --git a/packages/playwright-common/src/testcontainers/HomeserverContainer.ts b/packages/playwright-common/src/testcontainers/HomeserverContainer.ts
new file mode 100644
index 0000000000..dcb5efa386
--- /dev/null
+++ b/packages/playwright-common/src/testcontainers/HomeserverContainer.ts
@@ -0,0 +1,87 @@
+/*
+Copyright 2024-2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type AbstractStartedContainer, type GenericContainer } from "testcontainers";
+import { type APIRequestContext, type TestInfo } from "@playwright/test";
+
+import { type StartedMatrixAuthenticationServiceContainer } from "./mas.js";
+import { type ClientServerApi, type Credentials } from "../utils/api.js";
+import { type StartedMailpitContainer } from "./mailpit.js";
+
+export interface HomeserverInstance {
+    readonly baseUrl: string;
+    readonly csApi: ClientServerApi;
+
+    /**
+     * Register a user on the given Homeserver using the shared registration secret.
+     * @param username the username of the user to register
+     * @param password the password of the user to register
+     * @param displayName optional display name to set on the newly registered user
+     */
+    registerUser(username: string, password: string, displayName?: string): Promise<Credentials>;
+
+    /**
+     * Logs into synapse with the given username/password
+     * @param userId login username
+     * @param password login password
+     */
+    loginUser(userId: string, password: string): Promise<Credentials>;
+
+    /**
+     * Sets a third party identifier for the given user. This only supports setting a single 3pid and will
+     * replace any others.
+     * @param userId The full ID of the user to edit (as returned from registerUser)
+     * @param medium The medium of the 3pid to set
+     * @param address The address of the 3pid to set
+     */
+    setThreepid(userId: string, medium: string, address: string): Promise<void>;
+}
+
+export interface HomeserverContainer<Config> extends GenericContainer {
+    /**
+     * Set a configuration field in the config
+     * @param key - the key to set
+     * @param value - the value to set
+     */
+    withConfigField<Key extends keyof Config>(key: Key, value: Config[Key]): this;
+
+    /**
+     * Merge a partial configuration into the config
+     * @param config - the partial configuration to merge
+     */
+    withConfig(config: Partial<Config>): this;
+
+    /**
+     * Set the SMTP server to use for sending emails
+     * @param mailpit - the mailpit container to use
+     */
+    withSmtpServer(mailpit: StartedMailpitContainer): this;
+    /**
+     * Set the MAS server to use for delegated auth
+     * @param mas - the MAS container to use
+     */
+    withMatrixAuthenticationService(mas?: StartedMatrixAuthenticationServiceContainer): this;
+
+    /**
+     * Start the container
+     */
+    start(): Promise<StartedHomeserverContainer>;
+}
+
+export interface StartedHomeserverContainer extends AbstractStartedContainer, HomeserverInstance {
+    /**
+     * Set the request context for the APIs
+     * @param request - the request context to set
+     */
+    setRequest(request: APIRequestContext): void;
+
+    /**
+     * Clean up the server to prevent rooms leaking between tests
+     * @param testInfo - the test info for the test that just finished
+     */
+    onTestFinished(testInfo: TestInfo): Promise<void>;
+}
diff --git a/packages/playwright-common/src/testcontainers/index.ts b/packages/playwright-common/src/testcontainers/index.ts
new file mode 100644
index 0000000000..c7dbb4fd68
--- /dev/null
+++ b/packages/playwright-common/src/testcontainers/index.ts
@@ -0,0 +1,18 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+export { PostgreSqlContainer, StartedPostgreSqlContainer } from "@testcontainers/postgresql";
+export { makePostgres } from "./postgres.js";
+export type { HomeserverInstance, HomeserverContainer, StartedHomeserverContainer } from "./HomeserverContainer.js";
+export { type SynapseConfig, SynapseContainer, StartedSynapseContainer } from "./synapse.js";
+export {
+    type MasConfig,
+    MatrixAuthenticationServiceContainer,
+    StartedMatrixAuthenticationServiceContainer,
+    makeMas,
+} from "./mas.js";
+export { type MailpitClient, MailpitContainer, StartedMailpitContainer } from "./mailpit.js";
diff --git a/packages/playwright-common/src/testcontainers/mailpit.ts b/packages/playwright-common/src/testcontainers/mailpit.ts
new file mode 100644
index 0000000000..cfa8ad2b27
--- /dev/null
+++ b/packages/playwright-common/src/testcontainers/mailpit.ts
@@ -0,0 +1,62 @@
+/*
+Copyright 2024-2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { AbstractStartedContainer, GenericContainer, type StartedTestContainer, Wait } from "testcontainers";
+import { MailpitClient } from "mailpit-api";
+
+export type { MailpitClient };
+
+/**
+ * A testcontainer for Mailpit.
+ *
+ * Exposes port 8025.
+ * Waits for listening ports.
+ * Disables SMTP authentication.
+ */
+export class MailpitContainer extends GenericContainer {
+    public constructor() {
+        super("axllent/mailpit:latest");
+
+        this.withExposedPorts(8025).withWaitStrategy(Wait.forListeningPorts()).withEnvironment({
+            MP_SMTP_AUTH_ALLOW_INSECURE: "true",
+            MP_SMTP_AUTH_ACCEPT_ANY: "true",
+        });
+    }
+
+    /**
+     * Start the Mailpit container.
+     */
+    public override async start(): Promise<StartedMailpitContainer> {
+        return new StartedMailpitContainer(await super.start());
+    }
+}
+
+/**
+ * A started Mailpit container.
+ */
+export class StartedMailpitContainer extends AbstractStartedContainer {
+    public readonly client: MailpitClient;
+
+    public constructor(container: StartedTestContainer) {
+        super(container);
+        this.client = new MailpitClient(`http://${container.getHost()}:${container.getMappedPort(8025)}`);
+    }
+
+    /**
+     * Get the hostname to use to connect to the Mailpit container from inside the docker network.
+     */
+    public get internalHost(): string {
+        return "mailpit";
+    }
+
+    /**
+     * Get the port to use to connect to the Mailpit container from inside the docker network.
+     */
+    public get internalSmtpPort(): number {
+        return 1025;
+    }
+}
diff --git a/packages/playwright-common/src/testcontainers/mas-config.ts b/packages/playwright-common/src/testcontainers/mas-config.ts
new file mode 100644
index 0000000000..1f3a911ecd
--- /dev/null
+++ b/packages/playwright-common/src/testcontainers/mas-config.ts
@@ -0,0 +1,1383 @@
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+
+/**
+ * Authentication method used by clients
+ */
+export type ClientAuthMethodConfig =
+    | "none"
+    | "client_secret_basic"
+    | "client_secret_post"
+    | "client_secret_jwt"
+    | "private_key_jwt";
+export type JsonWebKeyFor_JsonWebKeyPublicParameters = {
+    "use"?: JsonWebKeyUse;
+    "key_ops"?: JsonWebKeyOperation[];
+    "alg"?: JsonWebSignatureAlg;
+    "kid"?: string;
+    "x5u"?: string;
+    "x5c"?: string[];
+    "x5t"?: string;
+    "x5t#S256"?: string;
+    [k: string]: unknown;
+} & JsonWebKeyFor_JsonWebKeyPublicParameters1;
+/**
+ * JSON Web Key Use
+ */
+export type JsonWebKeyUse = "sig" | "enc";
+/**
+ * JSON Web Key Operation
+ */
+export type JsonWebKeyOperation =
+    | "sign"
+    | "verify"
+    | "encrypt"
+    | "decrypt"
+    | "wrapKey"
+    | "unwrapKey"
+    | "deriveKey"
+    | "deriveBits";
+/**
+ * JSON Web Signature "alg" parameter
+ */
+export type JsonWebSignatureAlg =
+    | "HS256"
+    | "HS384"
+    | "HS512"
+    | "RS256"
+    | "RS384"
+    | "RS512"
+    | "ES256"
+    | "ES384"
+    | "ES512"
+    | "PS256"
+    | "PS384"
+    | "PS512"
+    | "none"
+    | "EdDSA"
+    | "ES256K"
+    | "Ed25519"
+    | "Ed448";
+export type JsonWebKeyFor_JsonWebKeyPublicParameters1 =
+    | {
+          kty: "RSA";
+          n: string;
+          e: string;
+          [k: string]: unknown;
+      }
+    | {
+          kty: "EC";
+          crv: JsonWebKeyEcEllipticCurve;
+          x: string;
+          y: string;
+          [k: string]: unknown;
+      }
+    | {
+          kty: "OKP";
+          crv: JsonWebKeyOkpEllipticCurve;
+          x: string;
+          [k: string]: unknown;
+      };
+/**
+ * JSON Web Key EC Elliptic Curve
+ */
+export type JsonWebKeyEcEllipticCurve = "P-256" | "P-384" | "P-521" | "secp256k1";
+/**
+ * JSON Web Key OKP Elliptic Curve
+ */
+export type JsonWebKeyOkpEllipticCurve = "Ed25519" | "Ed448" | "X25519" | "X448";
+/**
+ * HTTP resources to mount
+ */
+export type Resource =
+    | {
+          name: "health";
+          [k: string]: unknown;
+      }
+    | {
+          name: "prometheus";
+          [k: string]: unknown;
+      }
+    | {
+          name: "discovery";
+          [k: string]: unknown;
+      }
+    | {
+          name: "human";
+          [k: string]: unknown;
+      }
+    | {
+          name: "graphql";
+          /**
+           * Enabled the GraphQL playground
+           */
+          playground?: boolean;
+          /**
+           * Allow access for OAuth 2.0 clients (undocumented)
+           */
+          undocumented_oauth2_access?: boolean;
+          [k: string]: unknown;
+      }
+    | {
+          name: "oauth";
+          [k: string]: unknown;
+      }
+    | {
+          name: "compat";
+          [k: string]: unknown;
+      }
+    | {
+          name: "assets";
+          /**
+           * Path to the directory to serve.
+           */
+          path?: string;
+          [k: string]: unknown;
+      }
+    | {
+          name: "adminapi";
+          [k: string]: unknown;
+      }
+    | {
+          name: "connection-info";
+          [k: string]: unknown;
+      };
+/**
+ * Configuration of a single listener
+ */
+export type BindConfig =
+    | {
+          /**
+           * Host on which to listen.
+           *
+           * Defaults to listening on all addresses
+           */
+          host?: string;
+          /**
+           * Port on which to listen.
+           */
+          port: number;
+          [k: string]: unknown;
+      }
+    | {
+          /**
+           * Host and port on which to listen
+           */
+          address: string;
+          [k: string]: unknown;
+      }
+    | {
+          /**
+           * Path to the socket
+           */
+          socket: string;
+          [k: string]: unknown;
+      }
+    | {
+          /**
+           * Index of the file descriptor. Note that this is offseted by 3 because of the standard input/output sockets, so setting here a value of `0` will grab the file descriptor `3`
+           */
+          fd?: number;
+          /**
+           * Whether the socket is a TCP socket or a UNIX domain socket. Defaults to TCP.
+           */
+          kind?: UnixOrTcp & string;
+          [k: string]: unknown;
+      };
+/**
+ * Kind of socket
+ */
+export type UnixOrTcp = "unix" | "tcp";
+export type IpNetwork = V4 | V6;
+export type V4 = Ipv4Network;
+export type Ipv4Network = string;
+export type V6 = Ipv6Network;
+export type Ipv6Network = string;
+export type Hostname = string;
+/**
+ * Options for controlling the level of protection provided for PostgreSQL SSL connections.
+ */
+export type PgSslMode = "disable" | "allow" | "prefer" | "require" | "verify-ca" | "verify-full";
+/**
+ * Exporter to use when exporting traces
+ */
+export type TracingExporterKind = "none" | "stdout" | "otlp";
+/**
+ * Propagation format for incoming and outgoing requests
+ */
+export type Propagator = "tracecontext" | "baggage" | "jaeger";
+/**
+ * Exporter to use when exporting metrics
+ */
+export type MetricsExporterKind = "none" | "stdout" | "otlp" | "prometheus";
+/**
+ * What backend should be used when sending emails
+ */
+export type EmailTransportKind = "blackhole" | "smtp" | "sendmail";
+/**
+ * Encryption mode to use
+ */
+export type EmailSmtpMode = "plain" | "starttls" | "tls";
+/**
+ * A hashing algorithm
+ */
+export type Algorithm = "bcrypt" | "argon2id" | "pbkdf2";
+/**
+ * The kind of homeserver it is.
+ */
+export type HomeserverKind = "synapse" | "synapse_read_only" | "synapse_legacy" | "synapse_modern";
+/**
+ * Authentication methods used against the OAuth 2.0 provider
+ */
+export type TokenAuthMethod =
+    | "none"
+    | "client_secret_basic"
+    | "client_secret_post"
+    | "client_secret_jwt"
+    | "private_key_jwt"
+    | "sign_in_with_apple";
+/**
+ * How to discover the provider's configuration
+ */
+export type DiscoveryMode = "oidc" | "insecure" | "disabled";
+/**
+ * Whether to use proof key for code exchange (PKCE) when requesting and exchanging the token.
+ */
+export type PkceMethod = "auto" | "always" | "never";
+/**
+ * The response mode we ask the provider to use for the callback
+ */
+export type ResponseMode = "query" | "form_post";
+/**
+ * How to handle a claim
+ */
+export type ImportAction = "ignore" | "suggest" | "force" | "require";
+/**
+ * How to handle an existing localpart claim
+ */
+export type OnConflict = "fail" | "add";
+/**
+ * What to do when receiving an OIDC Backchannel logout request.
+ */
+export type OnBackchannelLogout = "do_nothing" | "logout_browser_only" | "logout_all";
+/**
+ * Which service should be used for CAPTCHA protection
+ */
+export type CaptchaServiceKind = "recaptcha_v2" | "cloudflare_turnstile" | "hcaptcha";
+
+/**
+ * Application configuration root
+ */
+export interface RootConfig {
+    /**
+     * List of OAuth 2.0/OIDC clients config
+     */
+    clients?: ClientConfig[];
+    /**
+     * Configuration of the HTTP server
+     */
+    http?: HttpConfig;
+    /**
+     * Database connection configuration
+     */
+    database?: DatabaseConfig;
+    /**
+     * Configuration related to sending monitoring data
+     */
+    telemetry?: TelemetryConfig;
+    /**
+     * Configuration related to templates
+     */
+    templates?: TemplatesConfig;
+    /**
+     * Configuration related to sending emails
+     */
+    email?: EmailConfig;
+    /**
+     * Application secrets
+     */
+    secrets: SecretsConfig;
+    /**
+     * Configuration related to user passwords
+     */
+    passwords?: PasswordsConfig;
+    /**
+     * Configuration related to the homeserver
+     */
+    matrix: MatrixConfig;
+    /**
+     * Configuration related to the OPA policies
+     */
+    policy?: PolicyConfig;
+    /**
+     * Configuration related to limiting the rate of user actions to prevent abuse
+     */
+    rate_limiting?: RateLimitingConfig;
+    /**
+     * Configuration related to upstream OAuth providers
+     */
+    upstream_oauth2?: UpstreamOAuth2Config;
+    /**
+     * Configuration section for tweaking the branding of the service
+     */
+    branding?: BrandingConfig;
+    /**
+     * Configuration section to setup CAPTCHA protection on a few operations
+     */
+    captcha?: CaptchaConfig;
+    /**
+     * Configuration section to configure features related to account management
+     */
+    account?: AccountConfig;
+    /**
+     * Experimental configuration options
+     */
+    experimental?: ExperimentalConfig;
+    [k: string]: unknown;
+}
+/**
+ * An OAuth 2.0 client configuration
+ */
+export interface ClientConfig {
+    /**
+     * A ULID as per https://github.com/ulid/spec
+     */
+    client_id: string;
+    /**
+     * Authentication method used for this client
+     */
+    client_auth_method: ClientAuthMethodConfig;
+    /**
+     * Name of the `OAuth2` client
+     */
+    client_name?: string;
+    /**
+     * The client secret, used by the `client_secret_basic`, `client_secret_post` and `client_secret_jwt` authentication methods
+     */
+    client_secret?: string;
+    /**
+     * The JSON Web Key Set (JWKS) used by the `private_key_jwt` authentication method. Mutually exclusive with `jwks_uri`
+     */
+    jwks?: JsonWebKeySetFor_JsonWebKeyPublicParameters;
+    /**
+     * The URL of the JSON Web Key Set (JWKS) used by the `private_key_jwt` authentication method. Mutually exclusive with `jwks`
+     */
+    jwks_uri?: string;
+    /**
+     * List of allowed redirect URIs
+     */
+    redirect_uris?: string[];
+    [k: string]: unknown;
+}
+export interface JsonWebKeySetFor_JsonWebKeyPublicParameters {
+    keys: JsonWebKeyFor_JsonWebKeyPublicParameters[];
+    [k: string]: unknown;
+}
+/**
+ * Configuration related to the web server
+ */
+export interface HttpConfig {
+    /**
+     * List of listeners to run
+     */
+    listeners?: ListenerConfig[];
+    /**
+     * List of trusted reverse proxies that can set the `X-Forwarded-For` header
+     */
+    trusted_proxies?: IpNetwork[];
+    /**
+     * Public URL base from where the authentication service is reachable
+     */
+    public_base: string;
+    /**
+     * OIDC issuer URL. Defaults to `public_base` if not set.
+     */
+    issuer?: string;
+    [k: string]: unknown;
+}
+/**
+ * Configuration of a listener
+ */
+export interface ListenerConfig {
+    /**
+     * A unique name for this listener which will be shown in traces and in metrics labels
+     */
+    name?: string;
+    /**
+     * List of resources to mount
+     */
+    resources: Resource[];
+    /**
+     * HTTP prefix to mount the resources on
+     */
+    prefix?: string;
+    /**
+     * List of sockets to bind
+     */
+    binds: BindConfig[];
+    /**
+     * Accept `HAProxy`'s Proxy Protocol V1
+     */
+    proxy_protocol?: boolean;
+    /**
+     * If set, makes the listener use TLS with the provided certificate and key
+     */
+    tls?: TlsConfig;
+    [k: string]: unknown;
+}
+/**
+ * Configuration related to TLS on a listener
+ */
+export interface TlsConfig {
+    /**
+     * PEM-encoded X509 certificate chain
+     *
+     * Exactly one of `certificate` or `certificate_file` must be set.
+     */
+    certificate?: string;
+    /**
+     * File containing the PEM-encoded X509 certificate chain
+     *
+     * Exactly one of `certificate` or `certificate_file` must be set.
+     */
+    certificate_file?: string;
+    /**
+     * PEM-encoded private key
+     *
+     * Exactly one of `key` or `key_file` must be set.
+     */
+    key?: string;
+    /**
+     * File containing a PEM or DER-encoded private key
+     *
+     * Exactly one of `key` or `key_file` must be set.
+     */
+    key_file?: string;
+    /**
+     * Password used to decode the private key
+     *
+     * One of `password` or `password_file` must be set if the key is encrypted.
+     */
+    password?: string;
+    /**
+     * Password file used to decode the private key
+     *
+     * One of `password` or `password_file` must be set if the key is encrypted.
+     */
+    password_file?: string;
+    [k: string]: unknown;
+}
+/**
+ * Database connection configuration
+ */
+export interface DatabaseConfig {
+    /**
+     * Connection URI
+     *
+     * This must not be specified if `host`, `port`, `socket`, `username`, `password`, or `database` are specified.
+     */
+    uri?: string;
+    /**
+     * Name of host to connect to
+     *
+     * This must not be specified if `uri` is specified.
+     */
+    host?: Hostname;
+    /**
+     * Port number to connect at the server host
+     *
+     * This must not be specified if `uri` is specified.
+     */
+    port?: number;
+    /**
+     * Directory containing the UNIX socket to connect to
+     *
+     * This must not be specified if `uri` is specified.
+     */
+    socket?: string;
+    /**
+     * PostgreSQL user name to connect as
+     *
+     * This must not be specified if `uri` is specified.
+     */
+    username?: string;
+    /**
+     * Password to be used if the server demands password authentication
+     *
+     * This must not be specified if `uri` is specified.
+     */
+    password?: string;
+    /**
+     * The database name
+     *
+     * This must not be specified if `uri` is specified.
+     */
+    database?: string;
+    /**
+     * How to handle SSL connections
+     */
+    ssl_mode?: PgSslMode;
+    /**
+     * The PEM-encoded root certificate for SSL connections
+     *
+     * This must not be specified if the `ssl_ca_file` option is specified.
+     */
+    ssl_ca?: string;
+    /**
+     * Path to the root certificate for SSL connections
+     *
+     * This must not be specified if the `ssl_ca` option is specified.
+     */
+    ssl_ca_file?: string;
+    /**
+     * The PEM-encoded client certificate for SSL connections
+     *
+     * This must not be specified if the `ssl_certificate_file` option is specified.
+     */
+    ssl_certificate?: string;
+    /**
+     * Path to the client certificate for SSL connections
+     *
+     * This must not be specified if the `ssl_certificate` option is specified.
+     */
+    ssl_certificate_file?: string;
+    /**
+     * The PEM-encoded client key for SSL connections
+     *
+     * This must not be specified if the `ssl_key_file` option is specified.
+     */
+    ssl_key?: string;
+    /**
+     * Path to the client key for SSL connections
+     *
+     * This must not be specified if the `ssl_key` option is specified.
+     */
+    ssl_key_file?: string;
+    /**
+     * Set the maximum number of connections the pool should maintain
+     */
+    max_connections?: number;
+    /**
+     * Set the minimum number of connections the pool should maintain
+     */
+    min_connections?: number;
+    /**
+     * Set the amount of time to attempt connecting to the database
+     */
+    connect_timeout?: number;
+    /**
+     * Set a maximum idle duration for individual connections
+     */
+    idle_timeout?: number;
+    /**
+     * Set the maximum lifetime of individual connections
+     */
+    max_lifetime?: number;
+    [k: string]: unknown;
+}
+/**
+ * Configuration related to sending monitoring data
+ */
+export interface TelemetryConfig {
+    /**
+     * Configuration related to exporting traces
+     */
+    tracing?: TracingConfig;
+    /**
+     * Configuration related to exporting metrics
+     */
+    metrics?: MetricsConfig;
+    /**
+     * Configuration related to the Sentry integration
+     */
+    sentry?: SentryConfig;
+    [k: string]: unknown;
+}
+/**
+ * Configuration related to exporting traces
+ */
+export interface TracingConfig {
+    /**
+     * Exporter to use when exporting traces
+     */
+    exporter?: TracingExporterKind & string;
+    /**
+     * OTLP exporter: OTLP over HTTP compatible endpoint
+     */
+    endpoint?: string;
+    /**
+     * List of propagation formats to use for incoming and outgoing requests
+     */
+    propagators?: Propagator[];
+    /**
+     * Sample rate for traces
+     *
+     * Defaults to `1.0` if not set.
+     */
+    sample_rate?: number;
+    [k: string]: unknown;
+}
+/**
+ * Configuration related to exporting metrics
+ */
+export interface MetricsConfig {
+    /**
+     * Exporter to use when exporting metrics
+     */
+    exporter?: MetricsExporterKind & string;
+    /**
+     * OTLP exporter: OTLP over HTTP compatible endpoint
+     */
+    endpoint?: string;
+    [k: string]: unknown;
+}
+/**
+ * Configuration related to the Sentry integration
+ */
+export interface SentryConfig {
+    /**
+     * Sentry DSN
+     */
+    dsn?: string;
+    /**
+     * Environment to use when sending events to Sentry
+     *
+     * Defaults to `production` if not set.
+     */
+    environment?: string;
+    /**
+     * Sample rate for event submissions
+     *
+     * Defaults to `1.0` if not set.
+     */
+    sample_rate?: number;
+    /**
+     * Sample rate for tracing transactions
+     *
+     * Defaults to `0.0` if not set.
+     */
+    traces_sample_rate?: number;
+    [k: string]: unknown;
+}
+/**
+ * Configuration related to templates
+ */
+export interface TemplatesConfig {
+    /**
+     * Path to the folder which holds the templates
+     */
+    path?: string;
+    /**
+     * Path to the assets manifest
+     */
+    assets_manifest?: string;
+    /**
+     * Path to the translations
+     */
+    translations_path?: string;
+    [k: string]: unknown;
+}
+/**
+ * Configuration related to sending emails
+ */
+export interface EmailConfig {
+    /**
+     * Email address to use as From when sending emails
+     */
+    from?: string;
+    /**
+     * Email address to use as Reply-To when sending emails
+     */
+    reply_to?: string;
+    /**
+     * What backend should be used when sending emails
+     */
+    transport: EmailTransportKind;
+    /**
+     * SMTP transport: Connection mode to the relay
+     */
+    mode?: EmailSmtpMode;
+    /**
+     * SMTP transport: Hostname to connect to
+     */
+    hostname?: Hostname;
+    /**
+     * SMTP transport: Port to connect to. Default is 25 for plain, 465 for TLS and 587 for `StartTLS`
+     */
+    port?: number;
+    /**
+     * SMTP transport: Username for use to authenticate when connecting to the SMTP server
+     *
+     * Must be set if the `password` field is set
+     */
+    username?: string;
+    /**
+     * SMTP transport: Password for use to authenticate when connecting to the SMTP server
+     *
+     * Must be set if the `username` field is set
+     */
+    password?: string;
+    /**
+     * Sendmail transport: Command to use to send emails
+     */
+    command?: string;
+    [k: string]: unknown;
+}
+/**
+ * Application secrets
+ */
+export interface SecretsConfig {
+    /**
+     * List of private keys to use for signing and encrypting payloads
+     */
+    keys?: KeyConfig[];
+    /**
+     * File containing the encryption key for secure cookies.
+     */
+    encryption_file?: string;
+    /**
+     * Encryption key for secure cookies.
+     */
+    encryption?: string;
+    [k: string]: unknown;
+}
+/**
+ * A single key with its key ID and optional password.
+ */
+export interface KeyConfig {
+    kid: string;
+    password_file?: string;
+    password?: string;
+    key_file?: string;
+    key?: string;
+    [k: string]: unknown;
+}
+/**
+ * User password hashing config
+ */
+export interface PasswordsConfig {
+    /**
+     * Whether password-based authentication is enabled
+     */
+    enabled?: boolean;
+    /**
+     * The hashing schemes to use for hashing and validating passwords
+     *
+     * The hashing scheme with the highest version number will be used for hashing new passwords.
+     */
+    schemes?: HashingScheme[];
+    /**
+     * Score between 0 and 4 determining the minimum allowed password complexity. Scores are based on the ESTIMATED number of guesses needed to guess the password.
+     *
+     * - 0: less than 10^2 (100) - 1: less than 10^4 (10'000) - 2: less than 10^6 (1'000'000) - 3: less than 10^8 (100'000'000) - 4: any more than that
+     */
+    minimum_complexity?: number;
+    [k: string]: unknown;
+}
+/**
+ * Parameters for a password hashing scheme
+ */
+export interface HashingScheme {
+    /**
+     * The version of the hashing scheme. They must be unique, and the highest version will be used for hashing new passwords.
+     */
+    version: number;
+    /**
+     * The hashing algorithm to use
+     */
+    algorithm: Algorithm;
+    /**
+     * Whether to apply Unicode normalization to the password before hashing
+     *
+     * Defaults to `false`, and generally recommended to stay false. This is although recommended when importing password hashs from Synapse, as it applies an NFKC normalization to the password before hashing it.
+     */
+    unicode_normalization?: boolean;
+    /**
+     * Cost for the bcrypt algorithm
+     */
+    cost?: number;
+    /**
+     * An optional secret to use when hashing passwords. This makes it harder to brute-force the passwords in case of a database leak.
+     */
+    secret?: string;
+    /**
+     * Same as `secret`, but read from a file.
+     */
+    secret_file?: string;
+    [k: string]: unknown;
+}
+/**
+ * Configuration related to the Matrix homeserver
+ */
+export interface MatrixConfig {
+    /**
+     * The kind of homeserver it is.
+     */
+    kind?: HomeserverKind & string;
+    /**
+     * The server name of the homeserver.
+     */
+    homeserver?: string;
+    /**
+     * Shared secret to use for calls to the admin API
+     */
+    secret: string;
+    /**
+     * The base URL of the homeserver's client API
+     */
+    endpoint?: string;
+    [k: string]: unknown;
+}
+/**
+ * Application secrets
+ */
+export interface PolicyConfig {
+    /**
+     * Path to the WASM module
+     */
+    wasm_module?: string;
+    /**
+     * Entrypoint to use when evaluating client registrations
+     */
+    client_registration_entrypoint?: string;
+    /**
+     * Entrypoint to use when evaluating user registrations
+     */
+    register_entrypoint?: string;
+    /**
+     * Entrypoint to use when evaluating authorization grants
+     */
+    authorization_grant_entrypoint?: string;
+    /**
+     * Entrypoint to use when changing password
+     */
+    password_entrypoint?: string;
+    /**
+     * Entrypoint to use when adding an email address
+     */
+    email_entrypoint?: string;
+    /**
+     * Arbitrary data to pass to the policy
+     */
+    data?: {
+        [k: string]: unknown;
+    };
+    [k: string]: unknown;
+}
+/**
+ * Configuration related to sending emails
+ */
+export interface RateLimitingConfig {
+    /**
+     * Account Recovery-specific rate limits
+     */
+    account_recovery?: AccountRecoveryRateLimitingConfig;
+    /**
+     * Login-specific rate limits
+     */
+    login?: LoginRateLimitingConfig;
+    /**
+     * Controls how many registrations attempts are permitted based on source address.
+     */
+    registration?: RateLimiterConfiguration;
+    /**
+     * Email authentication-specific rate limits
+     */
+    email_authentication?: EmailauthenticationRateLimitingConfig;
+    [k: string]: unknown;
+}
+export interface AccountRecoveryRateLimitingConfig {
+    /**
+     * Controls how many account recovery attempts are permitted based on source IP address. This can protect against causing e-mail spam to many targets.
+     *
+     * Note: this limit also applies to re-sends.
+     */
+    per_ip?: RateLimiterConfiguration;
+    /**
+     * Controls how many account recovery attempts are permitted based on the e-mail address entered into the recovery form. This can protect against causing e-mail spam to one target.
+     *
+     * Note: this limit also applies to re-sends.
+     */
+    per_address?: RateLimiterConfiguration;
+    [k: string]: unknown;
+}
+export interface RateLimiterConfiguration {
+    /**
+     * A one-off burst of actions that the user can perform in one go without waiting.
+     */
+    burst: number;
+    /**
+     * How quickly the allowance replenishes, in number of actions per second. Can be fractional to replenish slower.
+     */
+    per_second: number;
+    [k: string]: unknown;
+}
+export interface LoginRateLimitingConfig {
+    /**
+     * Controls how many login attempts are permitted based on source IP address. This can protect against brute force login attempts.
+     *
+     * Note: this limit also applies to password checks when a user attempts to change their own password.
+     */
+    per_ip?: RateLimiterConfiguration;
+    /**
+     * Controls how many login attempts are permitted based on the account that is being attempted to be logged into. This can protect against a distributed brute force attack but should be set high enough to prevent someone's account being casually locked out.
+     *
+     * Note: this limit also applies to password checks when a user attempts to change their own password.
+     */
+    per_account?: RateLimiterConfiguration;
+    [k: string]: unknown;
+}
+export interface EmailauthenticationRateLimitingConfig {
+    /**
+     * Controls how many email authentication attempts are permitted based on the source IP address. This can protect against causing e-mail spam to many targets.
+     */
+    per_ip?: RateLimiterConfiguration;
+    /**
+     * Controls how many email authentication attempts are permitted based on the e-mail address entered into the authentication form. This can protect against causing e-mail spam to one target.
+     *
+     * Note: this limit also applies to re-sends.
+     */
+    per_address?: RateLimiterConfiguration;
+    /**
+     * Controls how many authentication emails are permitted to be sent per authentication session. This ensures not too many authentication codes are created for the same authentication session.
+     */
+    emails_per_session?: RateLimiterConfiguration;
+    /**
+     * Controls how many code authentication attempts are permitted per authentication session. This can protect against brute-forcing the code.
+     */
+    attempt_per_session?: RateLimiterConfiguration;
+    [k: string]: unknown;
+}
+/**
+ * Upstream OAuth 2.0 providers configuration
+ */
+export interface UpstreamOAuth2Config {
+    /**
+     * List of OAuth 2.0 providers
+     */
+    providers: Provider[];
+    [k: string]: unknown;
+}
+/**
+ * Configuration for one upstream OAuth 2 provider.
+ */
+export interface Provider {
+    /**
+     * Whether this provider is enabled.
+     *
+     * Defaults to `true`
+     */
+    enabled?: boolean;
+    /**
+     * A ULID as per https://github.com/ulid/spec
+     */
+    id: string;
+    /**
+     * The ID of the provider that was used by Synapse. In order to perform a Synapse-to-MAS migration, this must be specified.
+     *
+     * ## For providers that used OAuth 2.0 or OpenID Connect in Synapse
+     *
+     * ### For `oidc_providers`: This should be specified as `oidc-` followed by the ID that was configured as `idp_id` in one of the `oidc_providers` in the Synapse configuration. For example, if Synapse's configuration contained `idp_id: wombat` for this provider, then specify `oidc-wombat` here.
+     *
+     * ### For `oidc_config` (legacy): Specify `oidc` here.
+     */
+    synapse_idp_id?: string;
+    /**
+     * The OIDC issuer URL
+     *
+     * This is required if OIDC discovery is enabled (which is the default)
+     */
+    issuer?: string;
+    /**
+     * A human-readable name for the provider, that will be shown to users
+     */
+    human_name?: string;
+    /**
+     * A brand identifier used to customise the UI, e.g. `apple`, `google`, `github`, etc.
+     *
+     * Values supported by the default template are:
+     *
+     * - `apple` - `google` - `facebook` - `github` - `gitlab` - `twitter` - `discord`
+     */
+    brand_name?: string;
+    /**
+     * The client ID to use when authenticating with the provider
+     */
+    client_id: string;
+    /**
+     * The client secret to use when authenticating with the provider
+     *
+     * Used by the `client_secret_basic`, `client_secret_post`, and `client_secret_jwt` methods
+     */
+    client_secret?: string;
+    /**
+     * The method to authenticate the client with the provider
+     */
+    token_endpoint_auth_method: TokenAuthMethod;
+    /**
+     * Additional parameters for the `sign_in_with_apple` method
+     */
+    sign_in_with_apple?: SignInWithApple;
+    /**
+     * The JWS algorithm to use when authenticating the client with the provider
+     *
+     * Used by the `client_secret_jwt` and `private_key_jwt` methods
+     */
+    token_endpoint_auth_signing_alg?: JsonWebSignatureAlg;
+    /**
+     * Expected signature for the JWT payload returned by the token authentication endpoint.
+     *
+     * Defaults to `RS256`.
+     */
+    id_token_signed_response_alg?: JsonWebSignatureAlg;
+    /**
+     * The scopes to request from the provider
+     *
+     * Defaults to `openid`.
+     */
+    scope?: string;
+    /**
+     * How to discover the provider's configuration
+     *
+     * Defaults to `oidc`, which uses OIDC discovery with strict metadata verification
+     */
+    discovery_mode?: DiscoveryMode;
+    /**
+     * Whether to use proof key for code exchange (PKCE) when requesting and exchanging the token.
+     *
+     * Defaults to `auto`, which uses PKCE if the provider supports it.
+     */
+    pkce_method?: PkceMethod;
+    /**
+     * Whether to fetch the user profile from the userinfo endpoint, or to rely on the data returned in the `id_token` from the `token_endpoint`.
+     *
+     * Defaults to `false`.
+     */
+    fetch_userinfo?: boolean;
+    /**
+     * Expected signature for the JWT payload returned by the userinfo endpoint.
+     *
+     * If not specified, the response is expected to be an unsigned JSON payload.
+     */
+    userinfo_signed_response_alg?: JsonWebSignatureAlg;
+    /**
+     * The URL to use for the provider's authorization endpoint
+     *
+     * Defaults to the `authorization_endpoint` provided through discovery
+     */
+    authorization_endpoint?: string;
+    /**
+     * The URL to use for the provider's userinfo endpoint
+     *
+     * Defaults to the `userinfo_endpoint` provided through discovery
+     */
+    userinfo_endpoint?: string;
+    /**
+     * The URL to use for the provider's token endpoint
+     *
+     * Defaults to the `token_endpoint` provided through discovery
+     */
+    token_endpoint?: string;
+    /**
+     * The URL to use for getting the provider's public keys
+     *
+     * Defaults to the `jwks_uri` provided through discovery
+     */
+    jwks_uri?: string;
+    /**
+     * The response mode we ask the provider to use for the callback
+     */
+    response_mode?: ResponseMode;
+    /**
+     * How claims should be imported from the `id_token` provided by the provider
+     */
+    claims_imports?: ClaimsImports;
+    /**
+     * Additional parameters to include in the authorization request
+     *
+     * Orders of the keys are not preserved.
+     */
+    additional_authorization_parameters?: {
+        [k: string]: string;
+    };
+    /**
+     * Whether the `login_hint` should be forwarded to the provider in the authorization request.
+     *
+     * Defaults to `false`.
+     */
+    forward_login_hint?: boolean;
+    /**
+     * What to do when receiving an OIDC Backchannel logout request.
+     *
+     * Defaults to "do_nothing".
+     */
+    on_backchannel_logout?: OnBackchannelLogout;
+    [k: string]: unknown;
+}
+export interface SignInWithApple {
+    /**
+     * The private key file used to sign the `id_token`
+     */
+    private_key_file?: string;
+    /**
+     * The private key used to sign the `id_token`
+     */
+    private_key?: string;
+    /**
+     * The Team ID of the Apple Developer Portal
+     */
+    team_id: string;
+    /**
+     * The key ID of the Apple Developer Portal
+     */
+    key_id: string;
+    [k: string]: unknown;
+}
+/**
+ * How claims should be imported
+ */
+export interface ClaimsImports {
+    /**
+     * How to determine the subject of the user
+     */
+    subject?: SubjectImportPreference;
+    /**
+     * Import the localpart of the MXID
+     */
+    localpart?: LocalpartImportPreference;
+    /**
+     * Import the displayname of the user.
+     */
+    displayname?: DisplaynameImportPreference;
+    /**
+     * Import the email address of the user based on the `email` and `email_verified` claims
+     */
+    email?: EmailImportPreference;
+    /**
+     * Set a human-readable name for the upstream account for display purposes
+     */
+    account_name?: AccountNameImportPreference;
+    [k: string]: unknown;
+}
+/**
+ * What should be done for the subject attribute
+ */
+export interface SubjectImportPreference {
+    /**
+     * The Jinja2 template to use for the subject attribute
+     *
+     * If not provided, the default template is `{{ user.sub }}`
+     */
+    template?: string;
+    [k: string]: unknown;
+}
+/**
+ * What should be done for the localpart attribute
+ */
+export interface LocalpartImportPreference {
+    /**
+     * How to handle the attribute
+     */
+    action?: ImportAction;
+    /**
+     * The Jinja2 template to use for the localpart attribute
+     *
+     * If not provided, the default template is `{{ user.preferred_username }}`
+     */
+    template?: string;
+    /**
+     * How to handle conflicts on the claim, default value is `Fail`
+     */
+    on_conflict?: OnConflict;
+    [k: string]: unknown;
+}
+/**
+ * What should be done for the displayname attribute
+ */
+export interface DisplaynameImportPreference {
+    /**
+     * How to handle the attribute
+     */
+    action?: ImportAction;
+    /**
+     * The Jinja2 template to use for the displayname attribute
+     *
+     * If not provided, the default template is `{{ user.name }}`
+     */
+    template?: string;
+    [k: string]: unknown;
+}
+/**
+ * What should be done with the email attribute
+ */
+export interface EmailImportPreference {
+    /**
+     * How to handle the claim
+     */
+    action?: ImportAction;
+    /**
+     * The Jinja2 template to use for the email address attribute
+     *
+     * If not provided, the default template is `{{ user.email }}`
+     */
+    template?: string;
+    [k: string]: unknown;
+}
+/**
+ * What should be done for the account name attribute
+ */
+export interface AccountNameImportPreference {
+    /**
+     * The Jinja2 template to use for the account name. This name is only used for display purposes.
+     *
+     * If not provided, it will be ignored.
+     */
+    template?: string;
+    [k: string]: unknown;
+}
+/**
+ * Configuration section for tweaking the branding of the service
+ */
+export interface BrandingConfig {
+    /**
+     * A human-readable name. Defaults to the server's address.
+     */
+    service_name?: string;
+    /**
+     * Link to a privacy policy, displayed in the footer of web pages and emails. It is also advertised to clients through the `op_policy_uri` OIDC provider metadata.
+     */
+    policy_uri?: string;
+    /**
+     * Link to a terms of service document, displayed in the footer of web pages and emails. It is also advertised to clients through the `op_tos_uri` OIDC provider metadata.
+     */
+    tos_uri?: string;
+    /**
+     * Legal imprint, displayed in the footer in the footer of web pages and emails.
+     */
+    imprint?: string;
+    /**
+     * Logo displayed in some web pages.
+     */
+    logo_uri?: string;
+    [k: string]: unknown;
+}
+/**
+ * Configuration section to setup CAPTCHA protection on a few operations
+ */
+export interface CaptchaConfig {
+    /**
+     * Which service should be used for CAPTCHA protection
+     */
+    service?: CaptchaServiceKind;
+    /**
+     * The site key to use
+     */
+    site_key?: string;
+    /**
+     * The secret key to use
+     */
+    secret_key?: string;
+    [k: string]: unknown;
+}
+/**
+ * Configuration section to configure features related to account management
+ */
+export interface AccountConfig {
+    /**
+     * Whether users are allowed to change their email addresses. Defaults to `true`.
+     */
+    email_change_allowed?: boolean;
+    /**
+     * Whether users are allowed to change their display names. Defaults to `true`.
+     *
+     * This should be in sync with the policy in the homeserver configuration.
+     */
+    displayname_change_allowed?: boolean;
+    /**
+     * Whether to enable self-service password registration. Defaults to `false` if password authentication is enabled.
+     *
+     * This has no effect if password login is disabled.
+     */
+    password_registration_enabled?: boolean;
+    /**
+     * Whether users are allowed to change their passwords. Defaults to `true`.
+     *
+     * This has no effect if password login is disabled.
+     */
+    password_change_allowed?: boolean;
+    /**
+     * Whether email-based password recovery is enabled. Defaults to `false`.
+     *
+     * This has no effect if password login is disabled.
+     */
+    password_recovery_enabled?: boolean;
+    /**
+     * Whether users are allowed to delete their own account. Defaults to `true`.
+     */
+    account_deactivation_allowed?: boolean;
+    /**
+     * Whether users can log in with their email address. Defaults to `false`.
+     *
+     * This has no effect if password login is disabled.
+     */
+    login_with_email_allowed?: boolean;
+    /**
+     * Whether registration tokens are required for password registrations. Defaults to `false`.
+     *
+     * When enabled, users must provide a valid registration token during password registration. This has no effect if password registration is disabled.
+     */
+    registration_token_required?: boolean;
+    [k: string]: unknown;
+}
+/**
+ * Configuration sections for experimental options
+ *
+ * Do not change these options unless you know what you are doing.
+ */
+export interface ExperimentalConfig {
+    /**
+     * Time-to-live of access tokens in seconds. Defaults to 5 minutes.
+     */
+    access_token_ttl?: number;
+    /**
+     * Time-to-live of compatibility access tokens in seconds. Defaults to 5 minutes.
+     */
+    compat_token_ttl?: number;
+    /**
+     * Experimetal feature to automatically expire inactive sessions
+     *
+     * Disabled by default
+     */
+    inactive_session_expiration?: InactiveSessionExpirationConfig;
+    /**
+     * Experimental feature to show a plan management tab and iframe. This value is passed through "as is" to the client without any validation.
+     */
+    plan_management_iframe_uri?: string;
+    [k: string]: unknown;
+}
+/**
+ * Configuration options for the inactive session expiration feature
+ */
+export interface InactiveSessionExpirationConfig {
+    /**
+     * Time after which an inactive session is automatically finished
+     */
+    ttl: number;
+    /**
+     * Should compatibility sessions expire after inactivity
+     */
+    expire_compat_sessions?: boolean;
+    /**
+     * Should OAuth 2.0 sessions expire after inactivity
+     */
+    expire_oauth_sessions?: boolean;
+    /**
+     * Should user sessions expire after inactivity
+     */
+    expire_user_sessions?: boolean;
+    [k: string]: unknown;
+}
diff --git a/packages/playwright-common/src/testcontainers/mas.ts b/packages/playwright-common/src/testcontainers/mas.ts
new file mode 100644
index 0000000000..8e64db59f8
--- /dev/null
+++ b/packages/playwright-common/src/testcontainers/mas.ts
@@ -0,0 +1,369 @@
+/*
+Copyright 2024-2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import {
+    AbstractStartedContainer,
+    GenericContainer,
+    type StartedTestContainer,
+    Wait,
+    type ExecResult,
+    type StartedNetwork,
+} from "testcontainers";
+import { type StartedPostgreSqlContainer } from "@testcontainers/postgresql";
+import * as YAML from "yaml";
+
+import { getFreePort } from "../utils/port.js";
+import { deepCopy } from "../utils/object.js";
+import { type Credentials } from "../utils/api.js";
+// This file can be updated by running:
+//
+//   curl -sL https://element-hq.github.io/matrix-authentication-service/config.schema.json \
+//     | npx json-schema-to-typescript -o packages/element-web-playwright-common/src/testconainers/mas-config.ts
+import type { RootConfig as MasConfig } from "./mas-config.js";
+import type { Logger } from "../utils/logger.js";
+
+export { type MasConfig };
+
+const DEFAULT_CONFIG = {
+    http: {
+        listeners: [
+            {
+                name: "web",
+                resources: [
+                    { name: "discovery" },
+                    { name: "human" },
+                    { name: "oauth" },
+                    { name: "compat" },
+                    { name: "graphql" },
+                    { name: "assets" },
+                ],
+                binds: [
+                    {
+                        address: "[::]:8080",
+                    },
+                ],
+                proxy_protocol: false,
+            },
+            {
+                name: "internal",
+                resources: [
+                    {
+                        name: "health",
+                    },
+                ],
+                binds: [
+                    {
+                        address: "[::]:8081",
+                    },
+                ],
+                proxy_protocol: false,
+            },
+        ],
+        public_base: "", // Needs to be set
+        issuer: "", // Needs to be set
+    },
+    database: {
+        host: "postgres",
+        port: 5432,
+        database: "postgres",
+        username: "postgres",
+        password: "p4S5w0rD",
+    },
+    email: {
+        from: '"Authentication Service" <root@localhost>',
+        reply_to: '"Authentication Service" <root@localhost>',
+        transport: "smtp",
+        mode: "plain",
+        hostname: "mailpit",
+        port: 1025,
+        username: "username",
+        password: "password",
+    },
+    secrets: {
+        encryption: "984b18e207c55ad5fbb2a49b217481a722917ee87b2308d4cf314c83fed8e3b5",
+        keys: [
+            {
+                kid: "YEAhzrKipJ",
+                key: "-----BEGIN RSA PRIVATE KEY-----\nMIIEowIBAAKCAQEAuIV+AW5vx52I4CuumgSxp6yvKfIAnRdALeZZCoFkIGxUli1B\nS79NJ3ls46oLh1pSD9RrhaMp6HTNoi4K3hnP9Q9v77pD7KwdFKG3UdG1zksIB0s/\n+/Ey/DmX4LPluwBBS7r/LkQ1jk745lENA++oiDqZf2D/uP8jCHlvaSNyVKTqi1ki\nOXPd4T4xBUjzuas9ze5jQVSYtfOidgnv1EzUipbIxgvH1jNt4raRlmP8mOq7xEnW\nR+cF5x6n/g17PdSEfrwO4kz6aKGZuMP5lVlDEEnMHKabFSQDBl7+Mpok6jXutbtA\nuiBnsKEahF9eoj4na4fpbRNPdIVyoaN5eGvm5wIDAQABAoIBAApyFCYEmHNWaa83\nCdVSOrRhRDE9r+c0r79pcNT1ajOjrk4qFa4yEC4R46YntCtfY5Hd1pBkIjU0l4d8\nz8Su9WTMEOwjQUEepS7L0NLi6kXZXYT8L40VpGs+32grBvBFHW0qEtQNrHJ36gMv\nx2rXoFTF7HaXiSJx3wvVxAbRqOE9tBXLsmNHaWaAdWQG5o77V9+zvMri3cAeEg2w\nVkKokb0dza7es7xG3tqS26k69SrwGeeuKo7qCHPH2cfyWmY5Yhv8iOoA59JzzbiK\nUdxyzCHskrPSpRKVkVVwmY3RBt282TmSRG7td7e5ESSj50P2e5BI5uu1Hp/dvU4F\nvYjV7kECgYEA6WqYoUpVsgQiqhvJwJIc/8gRm0mUy8TenI36z4Iim01Nt7fibWH7\nXnsFqLGjXtYNVWvBcCrUl9doEnRbJeG2eRGbGKYAWVrOeFvwM4fYvw9GoOiJdDj4\ncgWDe7eHbHE+UTqR7Nnr/UBfipoNWDh6X68HRBuXowh0Q6tOfxsrRFECgYEAyl/V\n4b8bFp3pKZZCb+KPSYsQf793cRmrBexPcLWcDPYbMZQADEZ/VLjbrNrpTOWxUWJT\nhr8MrWswnHO+l5AFu5CNO+QgV2dHLk+2w8qpdpFRPJCfXfo2D3wZ0c4cv3VCwv1V\n5y7f6XWVjDWZYV4wj6c3shxZJjZ+9Hbhf3/twbcCgYA6fuRRR3fCbRbi2qPtBrEN\nyO3gpMgNaQEA6vP4HPzfPrhDWmn8T5nXS61XYW03zxz4U1De81zj0K/cMBzHmZFJ\nNghQXQmpWwBzWVcREvJWr1Vb7erEnaJlsMwKrSvbGWYspSj82oAxr3hCG+lMOpsw\nb4S6pM+TpAK/EqdRY1WsgQKBgQCGoMaaTRXqL9bC0bEU2XVVCWxKb8c3uEmrwQ7/\n/fD4NmjUzI5TnDps1CVfkqoNe+hAKddDFqmKXHqUOfOaxDbsFje+lf5l5tDVoDYH\nfjTKKdYPIm7CiAeauYY7qpA5Vfq52Opixy4yEwUPp0CII67OggFtPaqY3zwJyWQt\n+57hdQKBgGCXM/KKt7ceUDcNJxSGjvu0zD9D5Sv2ihYlEBT/JLaTCCJdvzREevaJ\n1d+mpUAt0Lq6A8NWOMq8HPaxAik3rMQ0WtM5iG+XgsUqvTSb7NcshArDLuWGnW3m\nMC4rM0UBYAS4QweduUSH1imrwH/1Gu5+PxbiecceRMMggWpzu0Bq\n-----END RSA PRIVATE KEY-----\n",
+            },
+            {
+                kid: "8J1AxrlNZT",
+                key: "-----BEGIN EC PRIVATE KEY-----\nMHcCAQEEIF1cjfIOEdy3BXJ72x6fKpEB8WP1ddZAUJAaqqr/6CpToAoGCCqGSM49\nAwEHoUQDQgAEfHdNuI1Yeh3/uOq2PlnW2vymloOVpwBYebbw4VVsna9xhnutIdQW\ndE8hkX8Yb0pIDasrDiwllVLzSvsWJAI0Kw==\n-----END EC PRIVATE KEY-----\n",
+            },
+            {
+                kid: "3BW6un1EBi",
+                key: "-----BEGIN EC PRIVATE KEY-----\nMIGkAgEBBDA+3ZV17r8TsiMdw1cpbTSNbyEd5SMy3VS1Mk/kz6O2Ev/3QZut8GE2\nq3eGtLBoVQigBwYFK4EEACKhZANiAASs8Wxjk/uRimRKXnPr2/wDaXkN9wMDjYQK\nmZULb+0ZP1/cXmuXuri8hUGhQvIU8KWY9PkpV+LMPEdpE54mHPKSLjq5CDXoSZ/P\n9f7cdRaOZ000KQPZfIFR9ujJTtDN7Vs=\n-----END EC PRIVATE KEY-----\n",
+            },
+            {
+                kid: "pkZ0pTKK0X",
+                key: "-----BEGIN EC PRIVATE KEY-----\nMHQCAQEEIHenfsXYPc5yzjZKUfvmydDR1YRwdsfZYvwHf/2wsYxooAcGBSuBBAAK\noUQDQgAEON1x7Vlu+nA0KvC5vYSOHhDUkfLYNZwYSLPFVT02h9E13yFFMIJegIBl\nAer+6PMZpPc8ycyeH9N+U9NAyliBhQ==\n-----END EC PRIVATE KEY-----\n",
+            },
+        ],
+    },
+    passwords: {
+        enabled: true,
+        schemes: [
+            {
+                version: 1,
+                algorithm: "argon2id",
+            },
+        ],
+        minimum_complexity: 0,
+    },
+    policy: {
+        data: {
+            client_registration: {
+                // allow non-SSL and localhost URIs
+                allow_insecure_uris: true,
+            },
+        },
+    },
+    account: {
+        password_registration_enabled: true,
+    },
+    matrix: {
+        kind: "synapse",
+        secret: "", // Needs to be set
+    },
+    rate_limiting: {
+        login: {
+            burst: 10,
+            per_second: 1,
+        },
+        registration: {
+            burst: 10,
+            per_second: 1,
+        },
+    },
+} satisfies MasConfig;
+
+/**
+ * A container running the Matrix Authentication Service.
+ *
+ * Exposes the MAS API on port 8080 and the health check on port 8081.
+ * Waits for HTTP /health on port 8081 to be available.
+ */
+export class MatrixAuthenticationServiceContainer extends GenericContainer {
+    private config: MasConfig;
+    private readonly args = ["-c", "/config/config.yaml"];
+
+    public constructor(
+        db: StartedPostgreSqlContainer,
+        image: string = "ghcr.io/element-hq/matrix-authentication-service:latest",
+    ) {
+        super(image);
+
+        const initialConfig = deepCopy(DEFAULT_CONFIG);
+        initialConfig.database.host = db.getHostname();
+        initialConfig.database.username = db.getUsername();
+        initialConfig.database.password = db.getPassword();
+
+        this.config = initialConfig;
+
+        this.withExposedPorts(8080, 8081)
+            .withWaitStrategy(Wait.forHttp("/health", 8081))
+            .withCommand(["server", ...this.args]);
+    }
+
+    /**
+     * Adds additional configuration to the MAS config.
+     * @param config - additional config fields to add
+     */
+    public withConfig(config: Partial<MasConfig>): this {
+        this.config = {
+            ...this.config,
+            ...config,
+        };
+        return this;
+    }
+
+    /**
+     * Starts the MAS container
+     */
+    public override async start(): Promise<StartedMatrixAuthenticationServiceContainer> {
+        // MAS config issuer needs to know what URL it'll be accessed from, so we have to map the port manually
+        const port = await getFreePort();
+
+        this.config.http = {
+            ...this.config.http,
+            public_base: `http://localhost:${port}/`,
+            issuer: `http://localhost:${port}/`,
+        };
+
+        this.withExposedPorts({
+            container: 8080,
+            host: port,
+        }).withCopyContentToContainer([
+            {
+                target: "/config/config.yaml",
+                content: YAML.stringify(this.config),
+            },
+        ]);
+
+        return new StartedMatrixAuthenticationServiceContainer(
+            await super.start(),
+            `http://localhost:${port}`,
+            this.args,
+            this.config.matrix.secret,
+        );
+    }
+}
+
+/**
+ * A started Matrix Authentication Service container.
+ */
+export class StartedMatrixAuthenticationServiceContainer extends AbstractStartedContainer {
+    private adminTokenPromise?: Promise<string>;
+
+    public constructor(
+        container: StartedTestContainer,
+        public readonly baseUrl: string,
+        private readonly args: string[],
+        public readonly sharedSecret: string,
+    ) {
+        super(container);
+    }
+
+    /**
+     * Retrieves a valid HS admin token
+     */
+    public async getAdminToken(): Promise<string> {
+        if (this.adminTokenPromise === undefined) {
+            this.adminTokenPromise = this.registerUserInternal(
+                "admin",
+                "totalyinsecureadminpassword",
+                undefined,
+                true,
+            ).then((res) => res.accessToken);
+        }
+        return this.adminTokenPromise;
+    }
+
+    public async manage(cmd: string, ...args: string[]): Promise<ExecResult> {
+        const result = await this.exec(["mas-cli", "manage", cmd, ...this.args, ...args]);
+        if (result.exitCode !== 0) {
+            throw new Error(`Failed mas-cli manage ${cmd}: ${result.output}`);
+        }
+        return result;
+    }
+
+    private async manageRegisterUser(
+        username: string,
+        password: string,
+        displayName?: string,
+        admin = false,
+    ): Promise<string> {
+        const args: string[] = [];
+        if (admin) args.push("-a");
+        const result = await this.manage(
+            "register-user",
+            ...args,
+            "-y",
+            "-p",
+            password,
+            "-d",
+            displayName ?? "",
+            username,
+        );
+
+        const registerLines = result.output.trim().split("\n");
+        const userId = registerLines
+            .find((line) => line.includes("Matrix ID: "))
+            ?.split(": ")
+            .pop();
+
+        if (!userId) {
+            throw new Error(`Failed to register user: ${result.output}`);
+        }
+
+        return userId;
+    }
+
+    private async manageIssueCompatibilityToken(
+        username: string,
+        admin = false,
+    ): Promise<{ accessToken: string; deviceId: string }> {
+        const args: string[] = [];
+        if (admin) args.push("--yes-i-want-to-grant-synapse-admin-privileges");
+        const result = await this.manage("issue-compatibility-token", ...args, username);
+
+        const parts = result.output.trim().split(/\s+/);
+        const accessToken = parts.find((part) => part.startsWith("mct_"));
+        const deviceId = parts.find((part) => part.startsWith("compat_session.device="))?.split("=")[1];
+
+        if (!accessToken || !deviceId) {
+            throw new Error(`Failed to issue compatibility token: ${result.output}`);
+        }
+
+        return { accessToken, deviceId };
+    }
+
+    private async registerUserInternal(
+        username: string,
+        password: string,
+        displayName?: string,
+        admin = false,
+    ): Promise<Omit<Credentials, "homeserverBaseUrl">> {
+        const userId = await this.manageRegisterUser(username, password, displayName, admin);
+        const { deviceId, accessToken } = await this.manageIssueCompatibilityToken(username, admin);
+
+        return {
+            userId,
+            accessToken,
+            deviceId,
+            homeServer: userId.slice(1).split(":").slice(1).join(":"),
+            displayName,
+            username,
+            password,
+        };
+    }
+
+    /**
+     * Registers a user
+     *
+     * @param username - the username of the user to register
+     * @param password - the password of the user to register
+     * @param displayName - optional display name to set on the newly registered user
+     */
+    public async registerUser(
+        username: string,
+        password: string,
+        displayName?: string,
+    ): Promise<Omit<Credentials, "homeserverBaseUrl">> {
+        return this.registerUserInternal(username, password, displayName, false);
+    }
+
+    /**
+     * Binds a 3pid
+     * @param username - the username of the user to bind the 3pid to
+     * @param medium - the medium of the 3pid to bind
+     * @param address - the address of the 3pid to bind
+     */
+    public async setThreepid(username: string, medium: string, address: string): Promise<void> {
+        if (medium !== "email") {
+            throw new Error("Only email threepids are supported by MAS");
+        }
+
+        await this.manage("add-email", username, address);
+    }
+}
+
+export async function makeMas(
+    postgres: StartedPostgreSqlContainer,
+    network: StartedNetwork,
+    logger: Logger,
+    config: Partial<MasConfig>,
+    name = "mas",
+): Promise<StartedMatrixAuthenticationServiceContainer> {
+    const container = await new MatrixAuthenticationServiceContainer(postgres)
+        .withNetwork(network)
+        .withNetworkAliases(name)
+        .withLogConsumer(logger.getConsumer(name))
+        .withConfig(config)
+        .start();
+    return container;
+}
diff --git a/packages/playwright-common/src/testcontainers/postgres.ts b/packages/playwright-common/src/testcontainers/postgres.ts
new file mode 100644
index 0000000000..0dd0eab27d
--- /dev/null
+++ b/packages/playwright-common/src/testcontainers/postgres.ts
@@ -0,0 +1,40 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { PostgreSqlContainer, type StartedPostgreSqlContainer } from "@testcontainers/postgresql";
+import { type StartedNetwork } from "testcontainers";
+
+import { type Logger } from "../utils/logger.js";
+
+export async function makePostgres(
+    network: StartedNetwork,
+    logger: Logger,
+    name = "postgres",
+): Promise<StartedPostgreSqlContainer> {
+    const container = await new PostgreSqlContainer("postgres:13.3-alpine")
+        .withNetwork(network)
+        .withNetworkAliases(name)
+        .withLogConsumer(logger.getConsumer(name))
+        .withTmpFs({
+            "/dev/shm/pgdata/data": "",
+        })
+        .withEnvironment({
+            PG_DATA: "/dev/shm/pgdata/data",
+        })
+        .withCommand([
+            "-c",
+            "shared_buffers=128MB",
+            "-c",
+            `fsync=off`,
+            "-c",
+            `synchronous_commit=off`,
+            "-c",
+            "full_page_writes=off",
+        ])
+        .start();
+    return container;
+}
diff --git a/packages/playwright-common/src/testcontainers/synapse.ts b/packages/playwright-common/src/testcontainers/synapse.ts
new file mode 100644
index 0000000000..65d92c0ab9
--- /dev/null
+++ b/packages/playwright-common/src/testcontainers/synapse.ts
@@ -0,0 +1,529 @@
+/*
+Copyright 2024-2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import {
+    AbstractStartedContainer,
+    GenericContainer,
+    type RestartOptions,
+    type StartedTestContainer,
+    Wait,
+} from "testcontainers";
+import { type APIRequestContext, type TestInfo } from "@playwright/test";
+import crypto from "node:crypto";
+import * as YAML from "yaml";
+import { set } from "lodash-es";
+
+import { getFreePort } from "../utils/port.js";
+import { randB64Bytes } from "../utils/rand.js";
+import { deepCopy } from "../utils/object.js";
+import { type HomeserverContainer, type StartedHomeserverContainer } from "./HomeserverContainer.js";
+import { type StartedMatrixAuthenticationServiceContainer } from "./mas.js";
+import { Api, ClientServerApi, type Verb, type Credentials } from "../utils/api.js";
+import { type StartedMailpitContainer } from "./mailpit.js";
+
+const DEFAULT_CONFIG = {
+    server_name: "localhost",
+    public_baseurl: "", // set by start method
+    pid_file: "/homeserver.pid",
+    web_client: false,
+    soft_file_limit: 0,
+    // Needs to be configured to log to the console like a good docker process
+    log_config: "/data/log.config",
+    listeners: [
+        {
+            // Listener is always port 8008 (configured in the container)
+            port: 8008,
+            tls: false,
+            bind_addresses: ["::"],
+            type: "http",
+            x_forwarded: true,
+            resources: [
+                {
+                    names: ["client"],
+                    compress: false,
+                },
+            ],
+        },
+    ],
+    database: {
+        // An sqlite in-memory database is fast & automatically wipes each time
+        name: "sqlite3",
+        args: {
+            database: ":memory:",
+        },
+    },
+    rc_messages_per_second: 10000,
+    rc_message_burst_count: 10000,
+    rc_registration: {
+        per_second: 10000,
+        burst_count: 10000,
+    },
+    rc_joins: {
+        local: {
+            per_second: 9999,
+            burst_count: 9999,
+        },
+        remote: {
+            per_second: 9999,
+            burst_count: 9999,
+        },
+    },
+    rc_joins_per_room: {
+        per_second: 9999,
+        burst_count: 9999,
+    },
+    rc_3pid_validation: {
+        per_second: 1000,
+        burst_count: 1000,
+    },
+    rc_invites: {
+        per_room: {
+            per_second: 1000,
+            burst_count: 1000,
+        },
+        per_user: {
+            per_second: 1000,
+            burst_count: 1000,
+        },
+    },
+    rc_login: {
+        address: {
+            per_second: 10000,
+            burst_count: 10000,
+        },
+        account: {
+            per_second: 10000,
+            burst_count: 10000,
+        },
+        failed_attempts: {
+            per_second: 10000,
+            burst_count: 10000,
+        },
+    },
+    rc_room_creation: {
+        per_second: 1000,
+        burst_count: 1000,
+    },
+    media_store_path: "/tmp/media_store",
+    max_upload_size: "50M",
+    max_image_pixels: "32M",
+    dynamic_thumbnails: false,
+    enable_registration: true,
+    enable_registration_without_verification: true,
+    disable_msisdn_registration: false,
+    registrations_require_3pid: [],
+    enable_metrics: false,
+    report_stats: false,
+    // These placeholders will be replaced with values generated at start
+    registration_shared_secret: "secret",
+    macaroon_secret_key: "secret",
+    form_secret: "secret",
+    // Signing key must be here: it will be generated to this file
+    signing_key_path: "/data/localhost.signing.key",
+    trusted_key_servers: [],
+    password_config: {
+        enabled: true,
+    },
+    ui_auth: {},
+    background_updates: {
+        // Inhibit background updates as this Synapse isn't long-lived
+        min_batch_size: 100000,
+        sleep_duration_ms: 100000,
+    },
+    enable_authenticated_media: true,
+    email: undefined as
+        | undefined
+        | {
+              enable_notifs: boolean;
+              smtp_host: string;
+              smtp_port: number;
+              smtp_user: string;
+              smtp_pass: string;
+              require_transport_security: false;
+              notif_from: string;
+              app_name: string;
+              notif_template_html: string;
+              notif_template_text: string;
+              notif_for_new_users: boolean;
+              client_base_url: string;
+          },
+    user_consent: undefined as
+        | undefined
+        | {
+              template_dir: string;
+              version: string;
+              server_notice_content: Record<string, unknown>;
+              send_server_notice_to_guests: boolean;
+              block_events_error: string;
+              require_at_registration: boolean;
+          },
+    server_notices: undefined as
+        | undefined
+        | {
+              system_mxid_localpart: string;
+              system_mxid_display_name: string;
+              system_mxid_avatar_url: string;
+              room_name: string;
+          },
+    allow_guest_access: false,
+    experimental_features: {} as Record<string, boolean>,
+    matrix_rtc: undefined as
+        | undefined
+        | {
+              transports: Array<{ type: string; [field: string]: string }>;
+          },
+    oidc_providers: [],
+    serve_server_wellknown: true,
+    presence: {
+        enabled: true,
+        include_offline_users_on_sync: true,
+    },
+    room_list_publication_rules: [{ action: "allow" }],
+    modules: [] as Array<{ module: string; config?: Record<string, unknown> }>,
+    matrix_authentication_service: undefined as
+        | undefined
+        | {
+              enabled?: boolean;
+              endpoint?: string;
+              secret?: string | null;
+              secret_path?: string | null;
+          },
+};
+
+/**
+ * Incomplete type describing the configuration for a Synapse homeserver
+ */
+export type SynapseConfig = typeof DEFAULT_CONFIG;
+
+/**
+ * A Synapse testcontainer
+ *
+ * Exposes port 8008.
+ * Waits for HTTP /health 8008 to 200.
+ */
+export class SynapseContainer extends GenericContainer implements HomeserverContainer<SynapseConfig> {
+    protected config: SynapseConfig;
+    protected mas?: StartedMatrixAuthenticationServiceContainer;
+
+    public constructor(image = "ghcr.io/element-hq/synapse:develop") {
+        super(image);
+
+        this.config = deepCopy(DEFAULT_CONFIG);
+        this.config.registration_shared_secret = randB64Bytes(16);
+        this.config.macaroon_secret_key = randB64Bytes(16);
+        this.config.form_secret = randB64Bytes(16);
+
+        const signingKey = randB64Bytes(32);
+        this.withWaitStrategy(Wait.forHttp("/health", 8008)).withCopyContentToContainer([
+            { target: this.config.signing_key_path, content: `ed25519 x ${signingKey}` },
+            {
+                target: this.config.log_config,
+                content: YAML.stringify({
+                    version: 1,
+                    formatters: {
+                        precise: {
+                            format: "%(asctime)s - %(name)s - %(lineno)d - %(levelname)s - %(request)s - %(message)s",
+                        },
+                    },
+                    handlers: {
+                        console: {
+                            class: "logging.StreamHandler",
+                            formatter: "precise",
+                        },
+                    },
+                    loggers: {
+                        "synapse.storage.SQL": {
+                            level: "DEBUG",
+                        },
+                        "twisted": {
+                            handlers: ["console"],
+                            propagate: false,
+                        },
+                    },
+                    root: {
+                        level: "DEBUG",
+                        handlers: ["console"],
+                    },
+                    disable_existing_loggers: false,
+                }),
+            },
+        ]);
+    }
+
+    public withConfigField(key: string, value: unknown): this {
+        set(this.config, key, value);
+        return this;
+    }
+
+    public withConfig(config: Partial<SynapseConfig>): this {
+        this.config = {
+            ...this.config,
+            ...config,
+        };
+        return this;
+    }
+
+    public withSmtpServer(mailpit: StartedMailpitContainer): this {
+        this.config.email = {
+            enable_notifs: false,
+            smtp_host: mailpit.internalHost,
+            smtp_port: mailpit.internalSmtpPort,
+            smtp_user: "username",
+            smtp_pass: "password",
+            require_transport_security: false,
+            notif_from: "Your Friendly %(app)s homeserver <noreply@example.com>",
+            app_name: "Matrix",
+            notif_template_html: "notif_mail.html",
+            notif_template_text: "notif_mail.txt",
+            notif_for_new_users: true,
+            client_base_url: "http://localhost/element",
+        };
+        return this;
+    }
+
+    public withMatrixAuthenticationService(mas?: StartedMatrixAuthenticationServiceContainer): this {
+        if (mas) {
+            this.mas = mas;
+            this.withConfig({
+                matrix_authentication_service: {
+                    enabled: true,
+                    endpoint: `http://${mas.getHostname()}:8080/`,
+                    secret: mas.sharedSecret,
+                },
+                // Must be disabled when using MAS.
+                password_config: {
+                    enabled: false,
+                },
+                // Must be disabled when using MAS.
+                enable_registration: false,
+            });
+        }
+        return this;
+    }
+
+    public override async start(): Promise<StartedSynapseContainer> {
+        // Synapse config public_baseurl needs to know what URL it'll be accessed from, so we have to map the port manually
+        const port = await getFreePort();
+
+        this.withExposedPorts({
+            container: 8008,
+            host: port,
+        })
+            .withConfig({
+                public_baseurl: `http://localhost:${port}`,
+            })
+            .withCopyContentToContainer([
+                {
+                    target: "/data/homeserver.yaml",
+                    content: YAML.stringify(this.config),
+                },
+            ]);
+
+        const container = await super.start();
+        const baseUrl = `http://localhost:${port}`;
+        if (this.mas) {
+            return new StartedSynapseWithMasContainer(
+                container,
+                baseUrl,
+                this.config.registration_shared_secret,
+                this.mas,
+            );
+        }
+
+        return new StartedSynapseContainer(container, baseUrl, this.config.registration_shared_secret);
+    }
+}
+
+/**
+ * A started Synapse testcontainer
+ */
+export class StartedSynapseContainer extends AbstractStartedContainer implements StartedHomeserverContainer {
+    protected adminTokenPromise?: Promise<string>;
+    protected readonly adminApi: Api;
+    public readonly csApi: ClientServerApi;
+
+    public constructor(
+        container: StartedTestContainer,
+        public readonly baseUrl: string,
+        private readonly registrationSharedSecret: string,
+    ) {
+        super(container);
+        this.adminApi = new Api(`${this.baseUrl}/_synapse/admin`);
+        this.csApi = new ClientServerApi(this.baseUrl);
+    }
+
+    /**
+     * Restart the container
+     * Useful to reset the state of the homeserver between tests
+     * @param options - options to pass to the restart
+     */
+    public restart(options?: Partial<RestartOptions>): Promise<void> {
+        this.adminTokenPromise = undefined;
+        return super.restart(options);
+    }
+
+    public setRequest(request: APIRequestContext): void {
+        this.csApi.setRequest(request);
+        this.adminApi.setRequest(request);
+    }
+
+    public async onTestFinished(testInfo: TestInfo): Promise<void> {
+        // Clean up the server to prevent rooms leaking between tests
+        await this.deletePublicRooms();
+    }
+
+    protected async deletePublicRooms(): Promise<void> {
+        const token = await this.getAdminToken();
+        // We hide the rooms from the room directory to save time between tests and for portability between homeservers
+        const { chunk: rooms } = await this.csApi.request<{
+            chunk: { room_id: string }[];
+        }>("GET", "/v3/publicRooms", token, {});
+        await Promise.all(
+            rooms.map((room) =>
+                this.csApi.request("PUT", `/v3/directory/list/room/${room.room_id}`, token, { visibility: "private" }),
+            ),
+        );
+    }
+
+    private async registerUserInternal(
+        username: string,
+        password: string,
+        displayName?: string,
+        admin = false,
+    ): Promise<Credentials> {
+        const path = "/v1/register";
+        const { nonce } = await this.adminApi.request<{ nonce: string }>("GET", path, undefined, {});
+        const mac = crypto
+            .createHmac("sha1", this.registrationSharedSecret)
+            .update(`${nonce}\0${username}\0${password}\0${admin ? "" : "not"}admin`)
+            .digest("hex");
+        const data = await this.adminApi.request<{
+            home_server: string;
+            access_token: string;
+            user_id: string;
+            device_id: string;
+        }>("POST", path, undefined, {
+            nonce,
+            username,
+            password,
+            mac,
+            admin,
+            displayname: displayName,
+        });
+
+        return {
+            homeServer: data.home_server || data.user_id.split(":").slice(1).join(":"),
+            homeserverBaseUrl: this.baseUrl,
+            accessToken: data.access_token,
+            userId: data.user_id,
+            deviceId: data.device_id,
+            password,
+            displayName,
+            username,
+        };
+    }
+
+    protected async getAdminToken(): Promise<string> {
+        if (this.adminTokenPromise === undefined) {
+            this.adminTokenPromise = this.registerUserInternal(
+                "admin",
+                "totalyinsecureadminpassword",
+                undefined,
+                true,
+            ).then((res) => res.accessToken);
+        }
+        return this.adminTokenPromise;
+    }
+
+    private async adminRequest<R extends object>(verb: "GET", path: string, data?: never): Promise<R>;
+    private async adminRequest<R extends object>(verb: Verb, path: string, data?: object): Promise<R>;
+    private async adminRequest<R extends object>(verb: Verb, path: string, data?: object): Promise<R> {
+        const adminToken = await this.getAdminToken();
+        return this.adminApi.request(verb, path, adminToken, data);
+    }
+
+    /**
+     * Register a user on the given Homeserver using the shared registration secret.
+     * @param username - the username of the user to register
+     * @param password - the password of the user to register
+     * @param displayName - optional display name to set on the newly registered user
+     */
+    public registerUser(username: string, password: string, displayName?: string): Promise<Credentials> {
+        return this.registerUserInternal(username, password, displayName, false);
+    }
+
+    /**
+     * Logs into synapse with the given username/password
+     * @param userId - login username
+     * @param password - login password
+     */
+    public async loginUser(userId: string, password: string): Promise<Credentials> {
+        return {
+            ...(await this.csApi.loginUser(userId, password)),
+            homeserverBaseUrl: this.baseUrl,
+        };
+    }
+
+    /**
+     * Binds a 3pid
+     * @param userId - the username of the user to bind the 3pid to
+     * @param medium - the medium of the 3pid to bind
+     * @param address - the address of the 3pid to bind
+     */
+    public async setThreepid(userId: string, medium: string, address: string): Promise<void> {
+        await this.adminRequest("PUT", `/v2/users/${userId}`, {
+            threepids: [
+                {
+                    medium,
+                    address,
+                },
+            ],
+        });
+    }
+}
+
+/**
+ * A started Synapse container when delegating auth to MAS
+ */
+export class StartedSynapseWithMasContainer extends StartedSynapseContainer {
+    public constructor(
+        container: StartedTestContainer,
+        baseUrl: string,
+        registrationSharedSecret: string,
+        private readonly mas: StartedMatrixAuthenticationServiceContainer,
+    ) {
+        super(container, baseUrl, registrationSharedSecret);
+    }
+
+    protected async getAdminToken(): Promise<string> {
+        if (this.adminTokenPromise === undefined) {
+            this.adminTokenPromise = this.mas.getAdminToken();
+        }
+        return this.adminTokenPromise;
+    }
+
+    /**
+     * Register a user on the given Homeserver using the shared registration secret.
+     * @param username - the username of the user to register
+     * @param password - the password of the user to register
+     * @param displayName - optional display name to set on the newly registered user
+     */
+    public async registerUser(username: string, password: string, displayName?: string): Promise<Credentials> {
+        const registered = await this.mas.registerUser(username, password, displayName);
+        return { ...registered, homeserverBaseUrl: this.baseUrl };
+    }
+
+    /**
+     * Binds a 3pid
+     * @param userId - the username of the user to bind the 3pid to
+     * @param medium - the medium of the 3pid to bind
+     * @param address - the address of the 3pid to bind
+     */
+    public async setThreepid(userId: string, medium: string, address: string): Promise<void> {
+        return this.mas.setThreepid(userId, medium, address);
+    }
+}
diff --git a/packages/playwright-common/src/utils/api.ts b/packages/playwright-common/src/utils/api.ts
new file mode 100644
index 0000000000..8ce6f2f5dc
--- /dev/null
+++ b/packages/playwright-common/src/utils/api.ts
@@ -0,0 +1,119 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type APIRequestContext } from "@playwright/test";
+
+export type Verb = "GET" | "POST" | "PUT" | "DELETE";
+
+/**
+ * A generic API client.
+ */
+export class Api {
+    private _request?: APIRequestContext;
+
+    public constructor(private readonly baseUrl: string) {}
+
+    /**
+     * Set the request context to use for making requests.
+     * @param request - The request context to use.
+     */
+    public setRequest(request: APIRequestContext): void {
+        this._request = request;
+    }
+
+    /**
+     * Make a request to the API.
+     * @param verb - The HTTP verb to use.
+     * @param path - The path to request.
+     * @param token - The access token to use for the request.
+     * @param data - The data to send with the request.
+     */
+    public async request<R extends object>(verb: "GET", path: string, token?: string, data?: never): Promise<R>;
+    public async request<R extends object>(verb: Verb, path: string, token?: string, data?: object): Promise<R>;
+    public async request<R extends object>(verb: Verb, path: string, token?: string, data?: object): Promise<R> {
+        if (!this._request) {
+            throw new Error("No request context set");
+        }
+
+        const url = `${this.baseUrl}${path}`;
+        const res = await this._request.fetch(url, {
+            data,
+            method: verb,
+            headers: token
+                ? {
+                      Authorization: `Bearer ${token}`,
+                  }
+                : undefined,
+        });
+
+        if (!res.ok()) {
+            throw new Error(
+                `Request to ${url} failed with status ${res.status()}: ${JSON.stringify(await res.json())}`,
+            );
+        }
+
+        return res.json();
+    }
+}
+
+/**
+ * Credentials for a user.
+ */
+export interface Credentials {
+    /** The base URL of the homeserver's CS API. */
+    homeserverBaseUrl: string;
+
+    accessToken: string;
+    userId: string;
+    deviceId: string;
+
+    /** The domain part of the user's matrix ID. */
+    homeServer: string;
+
+    password: string | null; // null for password-less users
+    displayName?: string;
+    username: string; // the localpart of the userId
+}
+
+/**
+ * A client-server API for interacting with a Matrix homeserver.
+ */
+export class ClientServerApi extends Api {
+    public constructor(baseUrl: string) {
+        super(`${baseUrl}/_matrix/client`);
+    }
+
+    /**
+     * Register a user on the homeserver.
+     * @param userId - The user ID to register.
+     * @param password - The password to use for the user.
+     */
+    public async loginUser(userId: string, password: string): Promise<Omit<Credentials, "homeserverBaseUrl">> {
+        const json = await this.request<{
+            access_token: string;
+            user_id: string;
+            device_id: string;
+            home_server: string;
+        }>("POST", "/v3/login", undefined, {
+            type: "m.login.password",
+            identifier: {
+                type: "m.id.user",
+                user: userId,
+            },
+            password: password,
+        });
+
+        return {
+            password,
+            accessToken: json.access_token,
+            userId: json.user_id,
+            deviceId: json.device_id,
+            homeServer: json.home_server || json.user_id.split(":").slice(1).join(":"),
+            username: userId.slice(1).split(":")[0],
+        };
+    }
+}
diff --git a/packages/playwright-common/src/utils/config_json.ts b/packages/playwright-common/src/utils/config_json.ts
new file mode 100644
index 0000000000..cc97a07be5
--- /dev/null
+++ b/packages/playwright-common/src/utils/config_json.ts
@@ -0,0 +1,71 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type BrowserContext, type Page } from "@playwright/test";
+
+import { type Config, CONFIG_JSON } from "../index.js";
+
+/** Construct a suitable config.json for the given homeserver
+ *
+ * @param homeserverBaseUrl - The `baseUrl` of the homeserver that the client should be configured to connect to.
+ * @param additionalConfig - Additional config to add to the default config.json.
+ * @param labsFlags - Lab flags to enable in the client.
+ * @param disablePresence - Whether to disable presence for the given homeserver.
+ */
+export function buildConfigJson(
+    homeserverBaseUrl: string,
+    additionalConfig: Partial<Config> = {},
+    labsFlags: string[] = [],
+    disablePresence: boolean = false,
+): Partial<Config> {
+    const json = {
+        ...CONFIG_JSON,
+        ...additionalConfig,
+        default_server_config: {
+            "m.homeserver": {
+                base_url: homeserverBaseUrl,
+            },
+            ...additionalConfig.default_server_config,
+        },
+    };
+    json["features"] = {
+        ...json["features"],
+        // Enable the lab features
+        ...labsFlags.reduce<NonNullable<(typeof CONFIG_JSON)["features"]>>((obj, flag) => {
+            obj[flag] = true;
+            return obj;
+        }, {}),
+    };
+    if (disablePresence) {
+        json["enable_presence_by_hs_url"] = {
+            [homeserverBaseUrl]: false,
+        };
+    }
+    return json;
+}
+
+/**
+ * Add a route to the browser context/page which will serve a suitable config.json for the given homeserver.
+ *
+ * @param context - The browser context or page to route the config.json to.
+ * @param homeserverBaseUrl - The `baseUrl` of the homeserver that the client should be configured to connect to.
+ * @param additionalConfig - Additional config to add to the default config.json.
+ * @param labsFlags - Lab flags to enable in the client.
+ * @param disablePresence - Whether to disable presence for the given homeserver.
+ */
+export async function routeConfigJson(
+    context: BrowserContext | Page,
+    homeserverBaseUrl: string,
+    additionalConfig: Partial<Config> = {},
+    labsFlags: string[] = [],
+    disablePresence: boolean = false,
+): Promise<void> {
+    await context.route(`http://localhost:8080/config.json*`, async (route) => {
+        const json = buildConfigJson(homeserverBaseUrl, additionalConfig, labsFlags, disablePresence);
+        await route.fulfill({ json });
+    });
+}
diff --git a/packages/playwright-common/src/utils/context.ts b/packages/playwright-common/src/utils/context.ts
new file mode 100644
index 0000000000..c11477fe9c
--- /dev/null
+++ b/packages/playwright-common/src/utils/context.ts
@@ -0,0 +1,38 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type Browser } from "playwright-core";
+import { type Page } from "@playwright/test";
+
+import { type Credentials } from "./api.js";
+import { type Config } from "../index.js";
+import { routeConfigJson } from "./config_json.js";
+import { populateLocalStorageWithCredentials } from "../fixtures/user.js";
+
+/** Create a new instance of the application, in a separate browser context, using the given credentials.
+ *
+ * @param browser - the browser to use
+ * @param credentials - the credentials to use for the new instance
+ * @param additionalConfig - additional config for the `config.json` for the new instance
+ * @param labsFlags - additional labs flags for the `config.json` for the new instance
+ * @param disablePresence - whether to disable presence for the new instance
+ */
+export async function createNewInstance(
+    browser: Browser,
+    credentials: Credentials,
+    additionalConfig: Partial<Config> = {},
+    labsFlags: string[] = [],
+    disablePresence: boolean = false,
+): Promise<Page> {
+    const context = await browser.newContext();
+    await routeConfigJson(context, credentials.homeserverBaseUrl, additionalConfig, labsFlags, disablePresence);
+    const page = await context.newPage();
+    await populateLocalStorageWithCredentials(page, credentials);
+    await page.goto("/");
+    await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 });
+    return page;
+}
diff --git a/packages/playwright-common/src/utils/logger.ts b/packages/playwright-common/src/utils/logger.ts
new file mode 100644
index 0000000000..294a87067b
--- /dev/null
+++ b/packages/playwright-common/src/utils/logger.ts
@@ -0,0 +1,79 @@
+/*
+Copyright 2024-2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type BrowserContext, type Page, type TestInfo } from "@playwright/test";
+import { type Readable } from "node:stream";
+import stripAnsi from "strip-ansi";
+
+/**
+ * A logger that captures console logs from pages and testcontainers.
+ */
+export class Logger {
+    private pages: Page[] = [];
+    private logs: Record<string, string> = {};
+
+    /**
+     * Get a consumer function that captures logs for a given container.
+     * @param container - the human-readable name of the container.
+     */
+    public getConsumer(container: string) {
+        this.logs[container] = "";
+        return (stream: Readable) => {
+            stream.on("data", (chunk) => {
+                this.logs[container] += chunk.toString();
+            });
+            stream.on("err", (chunk) => {
+                this.logs[container] += "ERR " + chunk.toString();
+            });
+        };
+    }
+
+    /**
+     * Hook to call when a test starts.
+     * @param context - the browser context of the test.
+     */
+    public async onTestStarted(context: BrowserContext) {
+        this.pages = [];
+        for (const id in this.logs) {
+            if (id.startsWith("page-")) {
+                delete this.logs[id];
+            } else {
+                this.logs[id] = "";
+            }
+        }
+
+        context.on("console", (msg) => {
+            const page = msg.page();
+            if (!page) return;
+            let pageIdx = this.pages.indexOf(page);
+            if (pageIdx === -1) {
+                this.pages.push(page);
+                pageIdx = this.pages.length - 1;
+                this.logs[`page-${pageIdx}`] = `Console logs for page with URL: ${page.url()}\n\n`;
+            }
+            const type = msg.type();
+            const text = msg.text();
+            this.logs[`page-${pageIdx}`] += `${type}: ${text}\n`;
+        });
+    }
+
+    /**
+     * Hook to call when a test finishes.
+     * @param testInfo - the info about the test that just finished.
+     */
+    public async onTestFinished(testInfo: TestInfo) {
+        if (testInfo.status !== "passed") {
+            for (const id in this.logs) {
+                if (!this.logs[id]) continue;
+                await testInfo.attach(id, {
+                    body: stripAnsi(this.logs[id]),
+                    contentType: "text/plain",
+                });
+            }
+        }
+    }
+}
diff --git a/packages/playwright-common/src/utils/object.ts b/packages/playwright-common/src/utils/object.ts
new file mode 100644
index 0000000000..645e50bbad
--- /dev/null
+++ b/packages/playwright-common/src/utils/object.ts
@@ -0,0 +1,16 @@
+/*
+Copyright 2024-2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+/**
+ * Deep copy the given object. The object MUST NOT have circular references and
+ * MUST NOT have functions.
+ * @param obj - The object to deep copy.
+ * @returns A copy of the object without any references to the original.
+ */
+export function deepCopy<T>(obj: T): T {
+    return JSON.parse(JSON.stringify(obj));
+}
diff --git a/packages/playwright-common/src/utils/port.ts b/packages/playwright-common/src/utils/port.ts
new file mode 100644
index 0000000000..d39594caac
--- /dev/null
+++ b/packages/playwright-common/src/utils/port.ts
@@ -0,0 +1,22 @@
+/*
+Copyright 2024-2025 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import * as net from "node:net";
+
+/**
+ * Get a free networking port on the system.
+ */
+export async function getFreePort(): Promise<number> {
+    return new Promise<number>((resolve) => {
+        const srv = net.createServer();
+        srv.listen(0, () => {
+            const port = (<net.AddressInfo>srv.address()).port;
+            srv.close(() => resolve(port));
+        });
+    });
+}
diff --git a/packages/playwright-common/src/utils/rand.ts b/packages/playwright-common/src/utils/rand.ts
new file mode 100644
index 0000000000..debb5bc69a
--- /dev/null
+++ b/packages/playwright-common/src/utils/rand.ts
@@ -0,0 +1,17 @@
+/*
+Copyright 2024-2025 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import crypto from "node:crypto";
+
+/**
+ * Generate a random base64 string of the given number of bytes.
+ * @param numBytes - The number of bytes to generate.
+ */
+export function randB64Bytes(numBytes: number): string {
+    return crypto.randomBytes(numBytes).toString("base64").replace(/=*$/, "");
+}
diff --git a/packages/playwright-common/tsconfig.json b/packages/playwright-common/tsconfig.json
new file mode 100644
index 0000000000..4cee1a0269
--- /dev/null
+++ b/packages/playwright-common/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "$schema": "http://json.schemastore.org/tsconfig",
+    "compilerOptions": {
+        "rootDir": "./src",
+        "target": "esnext",
+        "lib": ["dom", "es2022", "esnext"],
+        "esModuleInterop": true,
+        "strict": true,
+        "declaration": true,
+        "outDir": "lib",
+        "declarationMap": true,
+        "module": "es2022",
+        "moduleResolution": "bundler",
+        "types": [],
+        "allowImportingTsExtensions": false
+    },
+    "include": ["src"]
+}
diff --git a/packages/shared-components/README.md b/packages/shared-components/README.md
index 8af1621ff2..138a458197 100644
--- a/packages/shared-components/README.md
+++ b/packages/shared-components/README.md
@@ -365,4 +365,4 @@ pnpm i18n
 Two steps are required to publish a new version of this package:
 
 1. Bump the version in `package.json` following semver rules and open a PR.
-2. Once merged run the [github workflow](https://github.com/element-hq/element-web/actions/workflows/shared-component-publish.yaml)
+2. Once merged run the [github workflow](https://github.com/element-hq/element-web/actions/workflows/npm-publish.yaml)
diff --git a/packages/shared-components/__vis__/linux/__baselines__/core/avatar/AvatarWithDetails/AvatarWithDetails.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/core/AvatarWithDetails/AvatarWithDetails.stories.tsx/default-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/core/avatar/AvatarWithDetails/AvatarWithDetails.stories.tsx/default-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/core/AvatarWithDetails/AvatarWithDetails.stories.tsx/default-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/default-auto.png
index ff1cfa2b24..fd8d058387 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-and-description-auto.png b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-and-description-auto.png
index 5767d6aa32..67801f4c04 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-and-description-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-and-description-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-auto.png b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-auto.png
index 390c358959..340540e14a 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tooltip-auto.png b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tooltip-auto.png
index d4b4048145..e24a3b4422 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tooltip-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tooltip-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-very-long-text-auto.png b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-very-long-text-auto.png
index 263f3b1eef..c3e635491c 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-very-long-text-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-very-long-text-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/default-auto.png
index b41968503d..8171d99b63 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-hidden-auto.png b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-hidden-auto.png
index fc3272f314..d618d89d47 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-hidden-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-hidden-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-visible-auto.png b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-visible-auto.png
index 2a5a79992b..8fc73653b8 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-visible-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-visible-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/with-compact-view-auto.png b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/with-compact-view-auto.png
index bca73a6e3b..adfc1670f7 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/with-compact-view-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/with-compact-view-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/plus-icon-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/plus-icon-auto.png
new file mode 100644
index 0000000000..58f146e165
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/plus-icon-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx/chat-moved-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx/chat-moved-auto.png
new file mode 100644
index 0000000000..0d4111e53b
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx/chat-moved-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx/section-created-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx/section-created-auto.png
new file mode 100644
index 0000000000..977772886a
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx/section-created-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/toast-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/toast-auto.png
new file mode 100644
index 0000000000..722398dc96
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/toast-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx/flat-list-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx/flat-list-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx/flat-list-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx/flat-list-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx/sections-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx/sections-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx/sections-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx/sections-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/activity-indicator-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/activity-indicator-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/activity-indicator-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/activity-indicator-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/invited-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/invited-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/invited-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/invited-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/mention-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/mention-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/mention-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/mention-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/mention-with-count-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/mention-with-count-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/mention-with-count-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/mention-with-count-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/muted-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/muted-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/muted-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/muted-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/muted-without-activity-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/muted-without-activity-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/muted-without-activity-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/muted-without-activity-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/no-notification-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/no-notification-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/no-notification-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/no-notification-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/notification-with-count-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/notification-with-count-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/notification-with-count-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/notification-with-count-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/unsent-message-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/unsent-message-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/unsent-message-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/unsent-message-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/video-call-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/video-call-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/video-call-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/video-call-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/video-call-without-activity-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/video-call-without-activity-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/video-call-without-activity-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/video-call-without-activity-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/voice-call-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/voice-call-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx/voice-call-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/voice-call-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/bold-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/bold-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/bold-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/bold-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/default-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/default-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/default-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/first-item-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/first-item-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/first-item-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/first-item-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/invitation-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/invitation-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/invitation-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/invitation-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/last-item-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/last-item-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/last-item-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/last-item-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/long-content-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/long-content-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/long-content-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/long-content-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/no-message-preview-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/no-message-preview-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/no-message-preview-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/no-message-preview-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/selected-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/selected-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/selected-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/selected-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/unsent-message-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/unsent-message-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/unsent-message-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/unsent-message-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-hover-menu-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-hover-menu-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-hover-menu-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-hover-menu-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-large-font-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-large-font-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-large-font-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-large-font-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-mention-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-mention-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-mention-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-mention-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-notification-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-notification-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-notification-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-notification-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-video-call-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-video-call-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-video-call-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-video-call-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-voice-call-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-voice-call-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-voice-call-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-voice-call-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-zoom-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-zoom-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-zoom-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-zoom-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/without-hover-menu-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/without-hover-menu-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/without-hover-menu-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/without-hover-menu-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/collapsed-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/collapsed-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/collapsed-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/collapsed-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/default-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/default-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/default-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/first-header-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/first-header-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/first-header-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/first-header-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/last-header-collapsed-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/last-header-collapsed-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/last-header-collapsed-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/last-header-collapsed-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/long-title-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/long-title-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/long-title-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/long-title-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/unread-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/unread-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/unread-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/unread-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/critical-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/critical-auto.png
new file mode 100644
index 0000000000..155515af35
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/critical-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..f0be1266dc
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/info-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/info-auto.png
new file mode 100644
index 0000000000..9e45644442
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/info-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/success-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/success-auto.png
new file mode 100644
index 0000000000..b607ad24d0
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/success-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/with-action-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/with-action-auto.png
new file mode 100644
index 0000000000..0db399b5af
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/with-action-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/with-avatar-image-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/with-avatar-image-auto.png
new file mode 100644
index 0000000000..6188892034
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/with-avatar-image-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/with-loads-of-content-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/with-loads-of-content-auto.png
new file mode 100644
index 0000000000..e53356df7f
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/with-loads-of-content-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/without-close-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/without-close-auto.png
new file mode 100644
index 0000000000..fd13d4ee0b
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/composer/Banner/Banner.stories.tsx/without-close-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..eed37c101a
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.stories.tsx/only-basic-modification-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.stories.tsx/only-basic-modification-auto.png
new file mode 100644
index 0000000000..fcc53714a7
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.stories.tsx/only-basic-modification-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/ReadMarker/ReadMarker.stories.tsx/current-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/ReadMarker/ReadMarker.stories.tsx/current-auto.png
new file mode 100644
index 0000000000..bdb6e51256
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/ReadMarker/ReadMarker.stories.tsx/current-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/ReadMarker/ReadMarker.stories.tsx/ghost-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/ReadMarker/ReadMarker.stories.tsx/ghost-auto.png
new file mode 100644
index 0000000000..bdb6e51256
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/ReadMarker/ReadMarker.stories.tsx/ghost-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/ReadMarker/ReadMarker.stories.tsx/hidden-current-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/ReadMarker/ReadMarker.stories.tsx/hidden-current-auto.png
new file mode 100644
index 0000000000..2c12d0bf31
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/ReadMarker/ReadMarker.stories.tsx/hidden-current-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/article-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/article-auto.png
new file mode 100644
index 0000000000..2e57f020f3
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/article-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..4fc1b93e59
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/social-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/social-auto.png
new file mode 100644
index 0000000000..c03a2ed302
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/social-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/social-with-image-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/social-with-image-auto.png
new file mode 100644
index 0000000000..d534819e82
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/social-with-image-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-and-description-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-and-description-auto.png
new file mode 100644
index 0000000000..2e55d7ca0f
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-and-description-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-auto.png
new file mode 100644
index 0000000000..0181507fab
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/video-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/video-auto.png
new file mode 100644
index 0000000000..663f81254e
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/video-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-site-icon-and-description-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-site-icon-and-description-auto.png
new file mode 100644
index 0000000000..c49a6499a1
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-site-icon-and-description-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-site-icon-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-site-icon-auto.png
new file mode 100644
index 0000000000..17793f85dd
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-site-icon-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tooltip-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tooltip-auto.png
new file mode 100644
index 0000000000..35f640c84d
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tooltip-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-very-long-text-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-very-long-text-auto.png
new file mode 100644
index 0000000000..c973c6a066
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-very-long-text-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..83409d52cd
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-hidden-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-hidden-auto.png
new file mode 100644
index 0000000000..47bec1a162
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-hidden-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-visible-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-visible-auto.png
new file mode 100644
index 0000000000..7fc88379ba
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-visible-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/with-compact-view-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/with-compact-view-auto.png
new file mode 100644
index 0000000000..893a166693
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/with-compact-view-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/animated-preview-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/animated-preview-auto.png
new file mode 100644
index 0000000000..996f5ec6d1
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/animated-preview-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..62ea65c997
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/error-state-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/error-state-auto.png
new file mode 100644
index 0000000000..a61b7cdf2c
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/error-state-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/hidden-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/hidden-auto.png
new file mode 100644
index 0000000000..4f09d381a5
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/hidden-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/loading-with-blurhash-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/loading-with-blurhash-auto.png
new file mode 100644
index 0000000000..9934c59d57
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/loading-with-blurhash-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/loading-with-spinner-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/loading-with-spinner-auto.png
new file mode 100644
index 0000000000..6653fe161a
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/loading-with-spinner-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/with-tooltip-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/with-tooltip-auto.png
new file mode 100644
index 0000000000..866d94ddf9
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/with-tooltip-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/caption-with-preview-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/caption-with-preview-auto.png
new file mode 100644
index 0000000000..5250dc03ed
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/caption-with-preview-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..e47c6b1f86
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/edited-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/edited-auto.png
new file mode 100644
index 0000000000..5a6416705f
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/edited-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/emote-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/emote-auto.png
new file mode 100644
index 0000000000..f71301034c
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/emote-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/highlight-link-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/highlight-link-auto.png
new file mode 100644
index 0000000000..e47c6b1f86
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/highlight-link-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/notice-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/notice-auto.png
new file mode 100644
index 0000000000..1112a2b9c0
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/notice-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/pending-moderation-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/pending-moderation-auto.png
new file mode 100644
index 0000000000..cda879c609
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/pending-moderation-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/starter-link-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/starter-link-auto.png
new file mode 100644
index 0000000000..4fb76984cd
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx/starter-link-auto.png differ
diff --git a/packages/shared-components/package.json b/packages/shared-components/package.json
index 390010a2a6..5f834d5432 100644
--- a/packages/shared-components/package.json
+++ b/packages/shared-components/package.json
@@ -51,28 +51,30 @@
         "lint:types": "tsc --noEmit && tsc --noEmit -p tsconfig.node.json"
     },
     "dependencies": {
-        "@element-hq/element-web-module-api": "catalog:",
+        "@element-hq/element-web-module-api": "workspace:*",
         "@matrix-org/spec": "^1.7.0",
         "@vector-im/compound-design-tokens": "catalog:",
         "classnames": "^2.5.1",
         "counterpart": "^0.18.6",
-        "html-react-parser": "^5.2.2",
+        "html-react-parser": "^6.0.0",
         "linkify-html": "4.3.2",
         "linkify-react": "4.3.2",
         "linkify-string": "4.3.2",
         "linkifyjs": "4.3.2",
         "lodash": "npm:lodash-es@^4.17.21",
         "matrix-web-i18n": "catalog:",
+        "react-blurhash": "^0.3.0",
         "react-merge-refs": "^3.0.2",
-        "react-resizable-panels": "^4.6.5",
+        "react-resizable-panels": "4.7.2",
         "react-virtuoso": "^4.14.0",
         "temporal-polyfill": "^0.3.0"
     },
     "devDependencies": {
-        "@element-hq/element-web-playwright-common-local": "workspace:*",
+        "@element-hq/element-web-playwright-common": "workspace:*",
         "@fetch-mock/vitest": "^0.2.18",
         "@fontsource/inter": "catalog:",
         "@matrix-org/react-sdk-module-api": "^2.5.0",
+        "@microsoft/api-extractor": "^7.56.0",
         "@playwright/test": "catalog:",
         "@storybook/addon-a11y": "^10.0.7",
         "@storybook/addon-designs": "^11.0.1",
@@ -107,13 +109,13 @@
         "eslint-plugin-unicorn": "^56.0.0",
         "prettier": "^3.6.2",
         "storybook": "^10.0.7",
-        "storybook-addon-vis": "^3.1.2",
+        "storybook-addon-vis": "^4.0.0",
         "typedoc": "^0.28.16",
         "typedoc-plugin-markdown": "^4.9.0",
         "typedoc-plugin-missing-exports": "^4.1.2",
         "typescript": "catalog:",
+        "unplugin-dts": "1.0.0-beta.6",
         "vite": "^8.0.0",
-        "vite-plugin-dts": "^4.5.4",
         "vite-plugin-node-polyfills": "^0.26.0",
         "vitest": "^4.0.18",
         "vitest-sonar-reporter": "^3.0.0"
@@ -123,6 +125,6 @@
     },
     "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319",
     "peerDependencies": {
-        "@vector-im/compound-web": "^8.3.5"
+        "@vector-im/compound-web": "^8.3.5 || ^9.0.0"
     }
 }
diff --git a/packages/shared-components/project.json b/packages/shared-components/project.json
index 13d072b225..1751c4c6c4 100644
--- a/packages/shared-components/project.json
+++ b/packages/shared-components/project.json
@@ -7,11 +7,13 @@
             "command": "vite build",
             "inputs": ["src"],
             "outputs": ["{projectRoot}/dist"],
-            "options": { "cwd": "packages/shared-components" }
+            "options": { "cwd": "packages/shared-components" },
+            "dependsOn": ["^build"]
         },
         "start": {
             "command": "vite build --watch",
             "options": { "cwd": "packages/shared-components" },
+            "dependsOn": ["^start"],
             "continuous": true
         },
         "typedoc": {
@@ -19,7 +21,8 @@
             "command": "typedoc",
             "inputs": ["src"],
             "outputs": ["{projectRoot}/typedoc"],
-            "options": { "cwd": "packages/shared-components" }
+            "options": { "cwd": "packages/shared-components" },
+            "dependsOn": ["^build"]
         },
         "storybook": {
             "cache": "true",
@@ -40,17 +43,17 @@
         "test:storybook": {
             "command": "vitest --project=storybook",
             "options": { "cwd": "packages/shared-components" },
-            "dependsOn": ["typedoc"]
+            "dependsOn": ["typedoc", "^build:playwright"]
         },
         "test:storybook:update": {
-            "command": "playwright-screenshots-experimental nx test:storybook --run --update",
+            "command": "playwright-screenshots nx test:storybook --run --update",
             "options": {
                 "env": {
                     "CI": "1"
                 },
                 "cwd": "packages/shared-components"
             },
-            "dependsOn": ["typedoc"]
+            "dependsOn": ["typedoc", "^build:playwright"]
         }
     }
 }
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/core/avatar/AvatarWithDetails/AvatarWithDetails.module.css b/packages/shared-components/src/core/AvatarWithDetails/AvatarWithDetails.module.css
similarity index 100%
rename from packages/shared-components/src/core/avatar/AvatarWithDetails/AvatarWithDetails.module.css
rename to packages/shared-components/src/core/AvatarWithDetails/AvatarWithDetails.module.css
diff --git a/packages/shared-components/src/core/avatar/AvatarWithDetails/AvatarWithDetails.stories.tsx b/packages/shared-components/src/core/AvatarWithDetails/AvatarWithDetails.stories.tsx
similarity index 95%
rename from packages/shared-components/src/core/avatar/AvatarWithDetails/AvatarWithDetails.stories.tsx
rename to packages/shared-components/src/core/AvatarWithDetails/AvatarWithDetails.stories.tsx
index 9d8a7f5c30..a306f147d8 100644
--- a/packages/shared-components/src/core/avatar/AvatarWithDetails/AvatarWithDetails.stories.tsx
+++ b/packages/shared-components/src/core/AvatarWithDetails/AvatarWithDetails.stories.tsx
@@ -11,7 +11,7 @@ import { type Meta, type StoryObj } from "@storybook/react-vite";
 import { AvatarWithDetails } from "./AvatarWithDetails";
 
 const meta = {
-    title: "Avatar/AvatarWithDetails",
+    title: "core/AvatarWithDetails",
     component: AvatarWithDetails,
     tags: ["autodocs"],
     args: {
diff --git a/packages/shared-components/src/core/avatar/AvatarWithDetails/AvatarWithDetails.test.tsx b/packages/shared-components/src/core/AvatarWithDetails/AvatarWithDetails.test.tsx
similarity index 100%
rename from packages/shared-components/src/core/avatar/AvatarWithDetails/AvatarWithDetails.test.tsx
rename to packages/shared-components/src/core/AvatarWithDetails/AvatarWithDetails.test.tsx
diff --git a/packages/shared-components/src/core/avatar/AvatarWithDetails/AvatarWithDetails.tsx b/packages/shared-components/src/core/AvatarWithDetails/AvatarWithDetails.tsx
similarity index 97%
rename from packages/shared-components/src/core/avatar/AvatarWithDetails/AvatarWithDetails.tsx
rename to packages/shared-components/src/core/AvatarWithDetails/AvatarWithDetails.tsx
index aab5729d5f..787506122a 100644
--- a/packages/shared-components/src/core/avatar/AvatarWithDetails/AvatarWithDetails.tsx
+++ b/packages/shared-components/src/core/AvatarWithDetails/AvatarWithDetails.tsx
@@ -10,7 +10,7 @@ import React from "react";
 import classNames from "classnames";
 
 import styles from "./AvatarWithDetails.module.css";
-import { Flex } from "../../utils/Flex";
+import { Flex } from "../utils/Flex";
 
 export type AvatarWithDetailsProps<C extends ElementType> = {
     /**
diff --git a/packages/shared-components/src/core/avatar/AvatarWithDetails/__snapshots__/AvatarWithDetails.test.tsx.snap b/packages/shared-components/src/core/AvatarWithDetails/__snapshots__/AvatarWithDetails.test.tsx.snap
similarity index 76%
rename from packages/shared-components/src/core/avatar/AvatarWithDetails/__snapshots__/AvatarWithDetails.test.tsx.snap
rename to packages/shared-components/src/core/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/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/avatar/AvatarWithDetails/index.tsx b/packages/shared-components/src/core/AvatarWithDetails/index.tsx
similarity index 100%
rename from packages/shared-components/src/core/avatar/AvatarWithDetails/index.tsx
rename to packages/shared-components/src/core/AvatarWithDetails/index.tsx
diff --git a/packages/shared-components/src/core/VirtualizedList/GroupedVirtualizedList/GroupedVirtualizedList.tsx b/packages/shared-components/src/core/VirtualizedList/GroupedVirtualizedList/GroupedVirtualizedList.tsx
index a20d64d530..eb183586e2 100644
--- a/packages/shared-components/src/core/VirtualizedList/GroupedVirtualizedList/GroupedVirtualizedList.tsx
+++ b/packages/shared-components/src/core/VirtualizedList/GroupedVirtualizedList/GroupedVirtualizedList.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { type JSX, useCallback, useMemo } from "react";
-import { Virtuoso } from "react-virtuoso";
+import { Virtuoso, type VirtuosoHandle } from "react-virtuoso";
 
 import { useVirtualizedList, type VirtualizedListContext, type VirtualizedListProps } from "../virtualized-list";
 
@@ -33,6 +33,11 @@ export interface GroupedVirtualizedListProps<Header, Item, Context> extends Omit
     VirtualizedListProps<Item, Context>,
     "items" | "isItemFocusable" | "getItemKey"
 > {
+    /**
+     * Optional ref to the underlying Virtuoso handle, for imperative scrolling.
+     */
+    scrollHandleRef?: React.RefCallback<VirtuosoHandle>;
+
     /**
      * The groups to display in the virtualized list.
      * Each group has a header and an array of child items.
@@ -126,6 +131,7 @@ export function GroupedVirtualizedList<Header, Item, Context>(
         isGroupHeaderFocusable,
         getItemKey,
         getHeaderKey,
+        scrollHandleRef,
         ...restProps
     } = props;
 
@@ -171,6 +177,7 @@ export function GroupedVirtualizedList<Header, Item, Context>(
             isItemFocusable: wrappedIsEntryFocusable,
             getItemKey: wrappedGetEntryKey,
         },
+        scrollHandleRef,
     );
 
     // Convert (Item, e) → (NavigationEntry, e) for regular items
diff --git a/packages/shared-components/src/core/VirtualizedList/virtualized-list.tsx b/packages/shared-components/src/core/VirtualizedList/virtualized-list.tsx
index 2324ec2b3d..0eb632f3f1 100644
--- a/packages/shared-components/src/core/VirtualizedList/virtualized-list.tsx
+++ b/packages/shared-components/src/core/VirtualizedList/virtualized-list.tsx
@@ -128,7 +128,7 @@ export interface UseVirtualizedListResult<Item, Context> extends Omit<
     VirtuosoProps<Item, VirtualizedListContext<Context>>,
     "data" | "itemContent" | "context" | "onKeyDown" | "onFocus" | "onBlur" | "rangeChanged" | "scrollerRef" | "ref"
 > {
-    ref: React.RefObject<VirtuosoHandle | null>;
+    ref: React.RefCallback<VirtuosoHandle>;
     scrollerRef: (element: HTMLElement | Window | null) => void;
     onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     onFocus: (e: React.FocusEvent) => void;
@@ -155,6 +155,7 @@ export interface UseVirtualizedListResult<Item, Context> extends Omit<
  */
 export function useVirtualizedList<Item, Context>(
     props: VirtualizedListProps<Item, Context>,
+    handleRef?: React.RefCallback<VirtuosoHandle>,
 ): UseVirtualizedListResult<Item, Context> {
     // Extract our custom props to avoid conflicts with Virtuoso props
     const {
@@ -380,9 +381,17 @@ export function useVirtualizedList<Item, Context>(
         [rangeChanged, mapRangeIndex],
     );
 
+    const setRef = useCallback(
+        (handle: VirtuosoHandle | null) => {
+            virtuosoHandleRef.current = handle;
+            handleRef?.(handle);
+        },
+        [handleRef],
+    );
+
     return {
         ...virtuosoProps,
-        ref: virtuosoHandleRef,
+        ref: setRef,
         scrollerRef,
         onKeyDown: keyDownCallback,
         onFocus,
diff --git a/packages/shared-components/src/core/i18n/I18nApi.test.ts b/packages/shared-components/src/core/i18n/I18nApi.test.tsx
similarity index 54%
rename from packages/shared-components/src/core/i18n/I18nApi.test.ts
rename to packages/shared-components/src/core/i18n/I18nApi.test.tsx
index a9fd287c4f..75f4ae6d8a 100644
--- a/packages/shared-components/src/core/i18n/I18nApi.test.ts
+++ b/packages/shared-components/src/core/i18n/I18nApi.test.tsx
@@ -6,6 +6,7 @@
  */
 
 import { describe, it, expect } from "vitest";
+import React from "react";
 
 import { I18nApi } from "./I18nApi";
 
@@ -20,4 +21,21 @@ describe("I18nApi", () => {
 
         expect(i18n.translate("hello.world" as TranslationKey)).toBe("Hello, World!");
     });
+
+    it("can register a translation and use it with tags", () => {
+        const i18n = new I18nApi();
+        i18n.register({
+            ["hello.world" as TranslationKey]: {
+                en: "Hello, <Bold>World!</Bold>",
+            },
+        });
+
+        expect(
+            i18n.translate("hello.world" as TranslationKey, {}, { Bold: (sub) => <strong>{sub}</strong> }),
+        ).toStrictEqual(
+            <span>
+                Hello, <strong>World!</strong>
+            </span>,
+        );
+    });
 });
diff --git a/packages/shared-components/src/core/i18n/I18nApi.ts b/packages/shared-components/src/core/i18n/I18nApi.ts
index c15d1c3204..66ed14dbec 100644
--- a/packages/shared-components/src/core/i18n/I18nApi.ts
+++ b/packages/shared-components/src/core/i18n/I18nApi.ts
@@ -5,7 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type I18nApi as II18nApi, type Variables, type Translations } from "@element-hq/element-web-module-api";
+import {
+    type I18nApi as II18nApi,
+    type Variables,
+    type Translations,
+    type Tags,
+} from "@element-hq/element-web-module-api";
 
 import { humanizeTime } from "../utils/humanize";
 import { _t, getLocale, registerTranslations } from "./i18n";
@@ -41,8 +46,12 @@ export class I18nApi implements II18nApi {
      * Perform a translation, with optional variables
      * @param key - The key to translate
      * @param variables - Optional variables to interpolate into the translation
+     * @param tags - Optional tags to interpolate into the translation
      */
-    public translate(this: void, key: TranslationKey, variables?: Variables): string {
+    public translate(this: void, key: TranslationKey, variables?: Variables): string;
+    public translate(this: void, key: TranslationKey, variables: Variables | undefined, tags: Tags): React.ReactNode;
+    public translate(this: void, key: TranslationKey, variables?: Variables, tags?: Tags): React.ReactNode | string {
+        if (tags) return _t(key, variables, tags);
         return _t(key, variables);
     }
 
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/LinkPreview.module.css b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
deleted file mode 100644
index 86e67b73c7..0000000000
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * Copyright 2026 Element Creations Ltd.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
-
-.thumbnail {
-    /* Thumbnails are always limited to a maximum of 100px */
-    max-width: 100px;
-    max-height: 100px;
-    /* Ensure we don't stretch the image */
-    object-fit: cover;
-}
-
-.link {
-    color: var(--cpd-color-text-link-external);
-    text-decoration-line: none;
-}
-
-.container {
-    display: inline flex;
-    column-gap: var(--cpd-space-1x);
-    border-inline-start: 2px solid var(--cpd-color-bg-subtle-primary);
-    border-radius: 2px;
-    color: var(--cpd-color-gray-900);
-
-    .wrapImageCaption {
-        display: inline-flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        row-gap: var(--cpd-space-2x);
-        flex: 1;
-    }
-
-    .image,
-    .caption {
-        display: inline-flex;
-        flex-direction: column;
-        margin-inline-start: var(--cpd-space-4x);
-        min-width: 0; /* Prevent blowout */
-    }
-
-    .image {
-        /* Clear default <button> styles */
-        padding: 0;
-        border: none;
-        background: none;
-
-        /* Consistent image size */
-        flex: 0 0 100px;
-    }
-
-    .caption {
-        flex: 1;
-        overflow: hidden; /* cause it to wrap rather than clip */
-    }
-
-    .title,
-    .description {
-        display: inline-block;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        white-space: normal;
-    }
-
-    .title {
-        display: inline-block;
-        line-clamp: 2;
-        -webkit-line-clamp: 2;
-        margin: var(--cpd-space-1x) 0;
-
-        > a {
-            font-weight: var(--cpd-font-weight-semibold);
-            text-decoration: none;
-        }
-    }
-
-    .description {
-        margin: var(--cpd-space-1x) 0;
-        word-wrap: break-word;
-        line-clamp: 3;
-        -webkit-line-clamp: 3;
-    }
-}
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx
deleted file mode 100644
index de02feefdd..0000000000
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- * Copyright 2026 Element Creations Ltd.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
-
-import React from "react";
-import { fn } from "storybook/test";
-
-import type { Meta, StoryFn } from "@storybook/react-vite";
-import imageFile from "../../../../static/element.png";
-import { LinkPreview } from "./LinkPreview";
-import { LinkedTextContext } from "../../../core/utils/LinkedText";
-
-export default {
-    title: "Event/UrlPreviewGroupView/LinkPreview",
-    component: LinkPreview,
-    tags: ["autodocs"],
-    args: {
-        onImageClick: fn(),
-    },
-} satisfies Meta<typeof LinkPreview>;
-
-const Template: StoryFn<typeof LinkPreview> = (args) => (
-    <LinkedTextContext.Provider value={{}}>
-        <LinkPreview {...args} />
-    </LinkedTextContext.Provider>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-    title: "A simple title",
-    description: "A simple description",
-    link: "https://matrix.org",
-    siteName: "Site name",
-    image: {
-        imageThumb: imageFile,
-        imageFull: imageFile,
-    },
-};
-
-export const Title = Template.bind({});
-Title.args = {
-    title: "A simple title",
-    link: "https://matrix.org",
-};
-
-export const TitleAndDescription = Template.bind({});
-TitleAndDescription.args = {
-    title: "A simple title",
-    description: "A simple description with a link to https://matrix.org",
-    link: "https://matrix.org",
-};
-
-export const WithTooltip = Template.bind({});
-WithTooltip.args = {
-    title: "A simple title",
-    description: "A simple description",
-    showTooltipOnLink: true,
-    link: "https://matrix.org",
-};
-
-export const WithVeryLongText = Template.bind({});
-WithVeryLongText.args = {
-    title: "GitHub - element-hq/not-a-real-repo: A very very long PR title that should be rendered nicely",
-    description:
-        "This PR doesn't actually exist and neither does the repository. It might exist one day if we go into the business of making paradoxical repository names.",
-    link: "https://matrix.org",
-    siteName: "GitHub",
-    image: {
-        imageThumb: imageFile,
-        imageFull: imageFile,
-    },
-};
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
deleted file mode 100644
index 4aef86ca32..0000000000
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
- * Copyright 2026 Element Creations Ltd.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
-
-import React, { type MouseEventHandler, type JSX, useCallback, useMemo } from "react";
-import { Tooltip, Text } from "@vector-im/compound-web";
-import classNames from "classnames";
-
-import { useI18n } from "../../../core/i18n/i18nContext";
-import styles from "./LinkPreview.module.css";
-import type { UrlPreview } from "../types";
-import { LinkedText } from "../../../core/utils/LinkedText";
-
-export interface LinkPreviewActions {
-    onImageClick: () => void;
-}
-
-export type LinkPreviewProps = UrlPreview & LinkPreviewActions;
-
-/**
- * LinkPreview renders a single preview component for a single link on an event. It is usually rendered as part of
- * a `UrlPreviewGroupView`.
- */
-export function LinkPreview({ onImageClick, ...preview }: LinkPreviewProps): JSX.Element {
-    const { translate: _t } = useI18n();
-
-    const tooltipCaption = useMemo(() => {
-        if (preview.showTooltipOnLink) {
-            return new URL(preview.link, window.location.href).toString();
-        }
-        return null;
-    }, [preview.link, preview.showTooltipOnLink]);
-
-    const onImageClickHandler = useCallback<MouseEventHandler>(
-        (ev) => {
-            if (ev.button != 0 || ev.metaKey) return;
-            ev.preventDefault();
-
-            if (!preview.image?.imageFull) {
-                return;
-            }
-            onImageClick();
-        },
-        [preview.image?.imageFull, onImageClick],
-    );
-
-    let img: JSX.Element | undefined;
-    // Don't render a button to show the image, just hide it outright
-    if (preview.image?.imageThumb) {
-        img = (
-            <button
-                aria-label={_t("timeline|url_preview|view_image")}
-                className={styles.image}
-                onClick={onImageClickHandler}
-            >
-                <img className={styles.thumbnail} src={preview.image.imageThumb} alt="" />
-            </button>
-        );
-    }
-
-    const anchor = (
-        <a className={styles.link} href={preview.link} target="_blank" rel="noreferrer noopener">
-            {preview.title}
-        </a>
-    );
-    return (
-        <div className={classNames(styles.container)}>
-            <div className={styles.wrapImageCaption}>
-                {img}
-                <div className={styles.caption}>
-                    <Text type="body" size="md" className={styles.title}>
-                        {tooltipCaption ? <Tooltip label={tooltipCaption}>{anchor}</Tooltip> : anchor}
-                        {preview.siteName && (
-                            <Text as="span" size="md" weight="regular">
-                                {" - " + preview.siteName}
-                            </Text>
-                        )}
-                    </Text>
-                    {preview.description && (
-                        <LinkedText className={styles.description}>{preview.description}</LinkedText>
-                    )}
-                </div>
-            </div>
-        </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
deleted file mode 100644
index 83d50ff719..0000000000
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/__snapshots__/LinkPreview.test.tsx.snap
+++ /dev/null
@@ -1,121 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`LinkPreview > renders a preview 1`] = `
-<div>
-  <div
-    class="container"
-  >
-    <div
-      class="wrapImageCaption"
-    >
-      <button
-        aria-label="View image"
-        class="image"
-      >
-        <img
-          alt=""
-          class="thumbnail"
-          src="/static/element.png"
-        />
-      </button>
-      <div
-        class="caption"
-      >
-        <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-        >
-          <a
-            class="link"
-            href="https://matrix.org"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            A simple title
-          </a>
-          <span
-            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
-          >
-             - Site name
-          </span>
-        </p>
-        <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-        >
-          A simple description
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`LinkPreview > renders a preview with just a title 1`] = `
-<div>
-  <div
-    class="container"
-  >
-    <div
-      class="wrapImageCaption"
-    >
-      <div
-        class="caption"
-      >
-        <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-        >
-          <a
-            class="link"
-            href="https://matrix.org"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            A simple title
-          </a>
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`LinkPreview > renders a preview with just a title and description 1`] = `
-<div>
-  <div
-    class="container"
-  >
-    <div
-      class="wrapImageCaption"
-    >
-      <div
-        class="caption"
-      >
-        <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-        >
-          <a
-            class="link"
-            href="https://matrix.org"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            A simple title
-          </a>
-        </p>
-        <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-        >
-          A simple description with a link to 
-          <a
-            data-linkified="true"
-            href="https://matrix.org"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            https://matrix.org
-          </a>
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
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
deleted file mode 100644
index 39854e0bfd..0000000000
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap
+++ /dev/null
@@ -1,492 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`UrlPreviewGroupView > renders a single preview 1`] = `
-<div>
-  <div
-    class="wrapper"
-  >
-    <div
-      class="previewGroup"
-    >
-      <div
-        class="container"
-      >
-        <div
-          class="wrapImageCaption"
-        >
-          <button
-            aria-label="View image"
-            class="image"
-          >
-            <img
-              alt=""
-              class="thumbnail"
-              src="/static/element.png"
-            />
-          </button>
-          <div
-            class="caption"
-          >
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-            >
-              <a
-                class="link"
-                href="https://matrix.org"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                A simple title
-              </a>
-            </p>
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-            >
-              A simple description
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <button
-      aria-label="Close preview"
-      class="_icon-button_1215g_8"
-      data-kind="primary"
-      role="button"
-      style="--cpd-icon-button-size: 20px;"
-      tabindex="0"
-    >
-      <div
-        class="_indicator-icon_147l5_17"
-        style="--cpd-icon-button-size: 100%;"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-          />
-        </svg>
-      </div>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
-<div>
-  <div
-    class="wrapper"
-  >
-    <div
-      class="previewGroup"
-    >
-      <div
-        class="container"
-      >
-        <div
-          class="wrapImageCaption"
-        >
-          <button
-            aria-label="View image"
-            class="image"
-          >
-            <img
-              alt=""
-              class="thumbnail"
-              src="/static/element.png"
-            />
-          </button>
-          <div
-            class="caption"
-          >
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-            >
-              <a
-                class="link"
-                href="https://matrix.org"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                One
-              </a>
-            </p>
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-            >
-              A regular square image.
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        class="container"
-      >
-        <div
-          class="wrapImageCaption"
-        >
-          <button
-            aria-label="View image"
-            class="image"
-          >
-            <img
-              alt=""
-              class="thumbnail"
-              src="/static/tallImage.png"
-            />
-          </button>
-          <div
-            class="caption"
-          >
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-            >
-              <a
-                class="link"
-                href="https://matrix.org"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                Two
-              </a>
-            </p>
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-            >
-              This one has a taller image which should crop nicely.
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        class="container"
-      >
-        <div
-          class="wrapImageCaption"
-        >
-          <button
-            aria-label="View image"
-            class="image"
-          >
-            <img
-              alt=""
-              class="thumbnail"
-              src="/static/element.png"
-            />
-          </button>
-          <div
-            class="caption"
-          >
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-            >
-              <a
-                class="link"
-                href="https://matrix.org"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                Three
-              </a>
-            </p>
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-            >
-              One more description
-            </p>
-          </div>
-        </div>
-      </div>
-      <button
-        class="_button_13vu4_8 toggleButton"
-        data-kind="tertiary"
-        data-size="sm"
-        role="button"
-        tabindex="0"
-      >
-        Collapse
-      </button>
-    </div>
-    <button
-      aria-label="Close preview"
-      class="_icon-button_1215g_8"
-      data-kind="primary"
-      role="button"
-      style="--cpd-icon-button-size: 20px;"
-      tabindex="0"
-    >
-      <div
-        class="_indicator-icon_147l5_17"
-        style="--cpd-icon-button-size: 100%;"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-          />
-        </svg>
-      </div>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`UrlPreviewGroupView > renders multiple previews which are hidden 1`] = `
-<div>
-  <div
-    class="wrapper"
-  >
-    <div
-      class="previewGroup"
-    >
-      <div
-        class="container"
-      >
-        <div
-          class="wrapImageCaption"
-        >
-          <button
-            aria-label="View image"
-            class="image"
-          >
-            <img
-              alt=""
-              class="thumbnail"
-              src="/static/element.png"
-            />
-          </button>
-          <div
-            class="caption"
-          >
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-            >
-              <a
-                class="link"
-                href="https://matrix.org"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                A simple title
-              </a>
-            </p>
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-            >
-              A simple description
-            </p>
-          </div>
-        </div>
-      </div>
-      <button
-        class="_button_13vu4_8 toggleButton"
-        data-kind="tertiary"
-        data-size="sm"
-        role="button"
-        tabindex="0"
-      >
-        Show 9 other previews
-      </button>
-    </div>
-    <button
-      aria-label="Close preview"
-      class="_icon-button_1215g_8"
-      data-kind="primary"
-      role="button"
-      style="--cpd-icon-button-size: 20px;"
-      tabindex="0"
-    >
-      <div
-        class="_indicator-icon_147l5_17"
-        style="--cpd-icon-button-size: 100%;"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-          />
-        </svg>
-      </div>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`UrlPreviewGroupView > renders with a compact view 1`] = `
-<div>
-  <div
-    class="wrapper"
-  >
-    <div
-      class="previewGroup compactLayout"
-    >
-      <div
-        class="container"
-      >
-        <div
-          class="wrapImageCaption"
-        >
-          <button
-            aria-label="View image"
-            class="image"
-          >
-            <img
-              alt=""
-              class="thumbnail"
-              src="/static/element.png"
-            />
-          </button>
-          <div
-            class="caption"
-          >
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-            >
-              <a
-                class="link"
-                href="https://matrix.org"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                One
-              </a>
-            </p>
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-            >
-              A regular square image.
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        class="container"
-      >
-        <div
-          class="wrapImageCaption"
-        >
-          <button
-            aria-label="View image"
-            class="image"
-          >
-            <img
-              alt=""
-              class="thumbnail"
-              src="/static/tallImage.png"
-            />
-          </button>
-          <div
-            class="caption"
-          >
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-            >
-              <a
-                class="link"
-                href="https://matrix.org"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                Two
-              </a>
-            </p>
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-            >
-              This one has a taller image which should crop nicely.
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        class="container"
-      >
-        <div
-          class="wrapImageCaption"
-        >
-          <button
-            aria-label="View image"
-            class="image"
-          >
-            <img
-              alt=""
-              class="thumbnail"
-              src="/static/element.png"
-            />
-          </button>
-          <div
-            class="caption"
-          >
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-            >
-              <a
-                class="link"
-                href="https://matrix.org"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                Three
-              </a>
-            </p>
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-            >
-              One more description
-            </p>
-          </div>
-        </div>
-      </div>
-      <button
-        class="_button_13vu4_8 toggleButton"
-        data-kind="tertiary"
-        data-size="sm"
-        role="button"
-        tabindex="0"
-      >
-        Collapse
-      </button>
-    </div>
-    <button
-      aria-label="Close preview"
-      class="_icon-button_1215g_8"
-      data-kind="primary"
-      role="button"
-      style="--cpd-icon-button-size: 20px;"
-      tabindex="0"
-    >
-      <div
-        class="_indicator-icon_147l5_17"
-        style="--cpd-icon-button-size: 100%;"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-          />
-        </svg>
-      </div>
-    </button>
-  </div>
-</div>
-`;
diff --git a/packages/shared-components/src/i18n/strings/en_EN.json b/packages/shared-components/src/i18n/strings/en_EN.json
index 7cd70dbb0d..1296591759 100644
--- a/packages/shared-components/src/i18n/strings/en_EN.json
+++ b/packages/shared-components/src/i18n/strings/en_EN.json
@@ -5,6 +5,7 @@
     "action": {
         "back": "Back",
         "click": "Click",
+        "close": "Close",
         "collapse": "Collapse",
         "delete": "Delete",
         "dismiss": "Dismiss",
@@ -16,6 +17,7 @@
         "invite": "Invite",
         "new_conversation": "New conversation",
         "new_room": "New room",
+        "new_section": "New section",
         "new_video_room": "New video room",
         "open_menu": "Open menu",
         "pause": "Pause",
@@ -34,6 +36,7 @@
     "common": {
         "attachment": "Attachment",
         "encryption_enabled": "Encryption enabled",
+        "loading": "Loading…",
         "options": "Options",
         "preferences": "Preferences",
         "state_encryption_enabled": "Experimental state encryption enabled"
@@ -96,6 +99,7 @@
             "voice_call": "Open room %(roomName)s with a voice call."
         },
         "appearance": "Appearance",
+        "chat_moved": "Chat moved",
         "collapse_filters": "Collapse filter list",
         "empty": {
             "no_chats": "No chats yet",
@@ -131,7 +135,8 @@
             "leave_room": "Leave room",
             "low_priority": "Low priority",
             "mark_read": "Mark as read",
-            "mark_unread": "Mark as unread"
+            "mark_unread": "Mark as unread",
+            "move_to_section": "Move to"
         },
         "notification_options": "Notification options",
         "open_space_menu": "Open space menu",
@@ -140,6 +145,7 @@
             "more_options": "More Options"
         },
         "room_options": "Room Options",
+        "section_created": "Section created",
         "section_header": {
             "toggle": "Toggle %(section)s section",
             "toggle_unread": "Toggle %(section)s section with unread room(s)"
@@ -219,6 +225,7 @@
         "message_timestamp_sent_at": "Sent at: %(dateTime)s",
         "url_preview": {
             "close": "Close preview",
+            "open_link": "Open link",
             "show_n_more": {
                 "one": "Show %(count)s other preview",
                 "other": "Show %(count)s other previews"
diff --git a/packages/shared-components/src/i18n/strings/et.json b/packages/shared-components/src/i18n/strings/et.json
index d267bc295a..015a1d6538 100644
--- a/packages/shared-components/src/i18n/strings/et.json
+++ b/packages/shared-components/src/i18n/strings/et.json
@@ -119,7 +119,7 @@
         "show_message_previews": "Näita sõnumite eelvaateid",
         "sort": "Järjesta",
         "sort_type": {
-            "activity": "Aktiivsuse alusel",
+            "activity": "Viimatine aktiivsus",
             "atoz": "Tähestiku järjekorras",
             "unread_first": "Esmalt lugemata"
         },
diff --git a/packages/shared-components/src/i18n/strings/fr.json b/packages/shared-components/src/i18n/strings/fr.json
index 74af7f0369..6ca3001216 100644
--- a/packages/shared-components/src/i18n/strings/fr.json
+++ b/packages/shared-components/src/i18n/strings/fr.json
@@ -4,6 +4,7 @@
     },
     "action": {
         "back": "Retour",
+        "click": "Clic",
         "collapse": "Réduire",
         "delete": "Supprimer",
         "dismiss": "Ignorer",
@@ -11,24 +12,36 @@
         "edit": "Modifier",
         "explore_rooms": "Parcourir les salons",
         "go": "C’est parti",
+        "hide": "Masquer",
         "invite": "Inviter",
         "new_conversation": "Nouvelle conversation",
         "new_room": "Nouveau salon",
         "new_video_room": "Nouveau salon visio",
         "open_menu": "Ouvrir le menu",
         "pause": "Pause",
+        "pin": "Épingler",
         "play": "Lecture",
+        "react": "Réagir",
         "remove": "Supprimer",
+        "reply": "Répondre",
+        "reply_in_thread": "Répondre dans le fil de discussion",
         "retry": "Réessayer",
         "search": "Rechercher",
-        "start_chat": "Démarrer une discussion"
+        "start_chat": "Démarrer une discussion",
+        "unpin": "Désépingler",
+        "view_source": "Voir la source"
     },
     "common": {
         "attachment": "Pièce jointe",
         "encryption_enabled": "Chiffrement activé",
+        "loading": "Chargement…",
+        "options": "Options",
         "preferences": "Préférences",
         "state_encryption_enabled": "Chiffrement expérimental de l'état activé"
     },
+    "keyboard": {
+        "shift": "Maj"
+    },
     "left_panel": {
         "open_dial_pad": "Ouvrir le pavé de numérotation",
         "separator_label": "Cliquez ou glissez pour agrandir"
@@ -129,7 +142,8 @@
         },
         "room_options": "Options du salon",
         "section_header": {
-            "toggle": "Afficher/masquer la section %(section)s"
+            "toggle": "Afficher/masquer la section %(section)s",
+            "toggle_unread": "Afficher ou masquer la section « %(section)s s » contenant un ou plusieurs salon non lus"
         },
         "show_message_previews": "Afficher les aperçus des messages",
         "sort": "Trier",
@@ -146,6 +160,9 @@
     "terms": {
         "tac_button": "Voir les conditions générales"
     },
+    "threads": {
+        "error_start_thread_existing_relation": "Impossible de créer un fil de discussion à partir d’un événement avec une relation existante"
+    },
     "time": {
         "about_day_ago": "il y a environ un jour",
         "about_hour_ago": "il y a environ une heure",
@@ -172,6 +189,8 @@
             "sender_unsigned_device": "Envoyé depuis un appareil non sécurisé.",
             "unable_to_decrypt": "Impossible de déchiffrer le message"
         },
+        "download_action_decrypting": "Déchiffrement",
+        "download_action_downloading": "Téléchargement en cours",
         "m.audio": {
             "audio_player": "Lecteur audio",
             "error_downloading_audio": "Erreur lors du téléchargement de l’audio",
@@ -190,6 +209,13 @@
             "state_enabled": "Les messages et les événements de ce salon sont chiffrés de bout en bout. Lorsque des personnes rejoignent le salon, vous pouvez les vérifier dans leur profil en cliquant sur leur photo de profil.",
             "unsupported": "Le chiffrement utilisé par ce salon n’est pas pris en charge."
         },
+        "mab": {
+            "collapse_reply_chain": "Réduire les citations",
+            "copy_link_thread": "Copier le lien du fil de discussion",
+            "expand_reply_chain": "Étendre les citations",
+            "label": "Actions de message",
+            "view_in_room": "Voir dans le salon"
+        },
         "message_timestamp_received_at": "Reçu à : %(dateTime)s",
         "message_timestamp_sent_at": "Envoyé à : %(dateTime)s",
         "url_preview": {
diff --git a/packages/shared-components/src/i18n/strings/ru.json b/packages/shared-components/src/i18n/strings/ru.json
index 38abf64ff5..cc269cfaa3 100644
--- a/packages/shared-components/src/i18n/strings/ru.json
+++ b/packages/shared-components/src/i18n/strings/ru.json
@@ -50,6 +50,14 @@
         "context_menu": {
             "title": "Настройки комнаты"
         },
+        "history_visibility_badge": {
+            "private": "Новые участники не видят историю",
+            "shared": "Новые участники видят историю",
+            "world_readable": "Кто угодно может видеть историю"
+        },
+        "jump_to_date": "Перейти к дате",
+        "jump_to_date_prompt": "Выберите дату для перехода",
+        "pinned_message_badge": "Закреплённое сообщение",
         "status_bar": {
             "delete_all": "Удалить всё",
             "exceeded_resource_limit_description": "Свяжись с администратором сервиса, чтобы продолжить пользоваться услугой.",
@@ -66,12 +74,41 @@
         }
     },
     "room_list": {
+        "a11y": {
+            "default": "Открыть комнату %(roomName)s",
+            "invitation": "Открыть приглашение в комнату %(roomName)s.",
+            "mention": {
+                "one": "Открыть чат %(roomName)s с 1 непрочитанным упоминанием.",
+                "few": "Открыть чат %(roomName)s с %(count)s непрочитанными упоминаниями.",
+                "many": "Открыть чат %(roomName)s с %(count)s непрочитанными упоминаниями."
+            },
+            "unread": {
+                "one": "Открыть чат %(roomName)s с 1 непрочитанным сообщением.",
+                "few": "Открыть чат %(roomName)s с %(count)s непрочитанными сообщениями.",
+                "many": "Открыть чат %(roomName)s с %(count)s непрочитанными сообщениями."
+            },
+            "unsent_message": "Открыть комнату %(roomName)s с неотправленным сообщением."
+        },
         "appearance": "Внешний вид",
         "collapse_filters": "Свернуть список фильтров",
         "empty": {
+            "no_chats": "Пока нет чатов",
+            "no_chats_description": "Начните с отправки сообщения или создания комнаты",
+            "no_chats_description_no_room_rights": "Начните переписку с отправки сообщения",
+            "no_favourites": "У вас пока нет избранных чатов",
+            "no_favourites_description": "Вы можете добавить чат в избранное в настройках чата",
+            "no_invites": "У вас нет непросмотренных приглашений",
+            "no_lowpriority": "У вас нет комнат с низким приориетом",
+            "no_mentions": "У вас нет непрочитанных упоминаний",
+            "no_people": "У вас нет личных чатов",
+            "no_people_description": "Вы можете убрать фильтры, чтобы просмотреть свои чаты",
+            "no_rooms": "Вы пока не состоите ни в одной комнате",
+            "no_rooms_description": "Вы можете убрать фильтры, чтобы увидеть свои чаты",
+            "no_unread": "Поздравляем! У вас нет непрочитанных сообщений",
             "show_activity": "Посмотреть всю активность",
             "show_chats": "Показать все чаты"
         },
+        "expand_filters": "Раскрыть список фильтров",
         "filters": {
             "favourite": "Избранное",
             "invites": "Приглашения",
@@ -101,6 +138,7 @@
         "sort": "Сортировать",
         "sort_type": {
             "activity": "Последняя активность",
+            "atoz": "А-Я",
             "unread_first": "Сначала непрочитанные"
         },
         "space_menu": {
@@ -129,12 +167,43 @@
     },
     "timeline": {
         "decryption_failure": {
-            "sender_unsigned_device": "Отправлено с незащищенного устройства"
+            "blocked": "Отправитель заблокировал получение этого сообщения, поскольку ваше устройство не проверено.",
+            "historical_event_no_key_backup": "История сообщений недоступна на этом устройстве",
+            "historical_event_unverified_device": "Вам необходимо подтвердить это устройство для доступа к истории сообщений.",
+            "historical_event_user_not_joined": "У вас нет доступа к этому сообщению",
+            "sender_identity_previously_verified": "Подтвержденная личность отправителя была сброшена",
+            "sender_unsigned_device": "Отправлено с незащищенного устройства",
+            "unable_to_decrypt": "Не удалось расшифровать сообщение"
         },
         "m.audio": {
             "audio_player": "Аудиоплеер",
-            "error_downloading_audio": "Ошибка загрузки аудио",
+            "error_downloading_audio": "Ошибка скачивания аудио",
             "unnamed_audio": "Безымянное аудио"
+        },
+        "m.room.encryption": {
+            "disable_attempt": "Проигнорированная попытка отключить шифрование",
+            "disabled": "Шифрование не включено",
+            "enabled": "Сообщения в этой комнате защищены сквозным шифрованием. Когда пользователи присоединяются, вы можете подтвердить их профиль, нажав на их аватар.",
+            "enabled_dm": "Сообщения защищены сквозным шифрованием. Подтвердите %(displayName)s в профиле, нажав на аватар.",
+            "enabled_local": "Сообщения в этом чате защищены сквозным шифрованием.",
+            "parameters_changed": "Некоторые параметры шифрования были изменены.",
+            "state_enabled": "Сообщения и события состояния в этой комнате защищены сквозным шифрованием. Когда пользователи присоединяются, вы можете подтвердить их профиль, нажав на аватар.",
+            "unsupported": "Шифрование, используемое в этой комнате, не поддерживается."
+        },
+        "mab": {
+            "view_in_room": "Просмотреть в чате"
+        },
+        "message_timestamp_received_at": "Получено в %(dateTime)s",
+        "message_timestamp_sent_at": "Отправлено в %(dateTime)s"
+    },
+    "widget": {
+        "context_menu": {
+            "move_left": "Переместить влево",
+            "move_right": "Переместить вправо",
+            "remove": "Скрыть для всех",
+            "revoke": "Отозвать разрешения",
+            "screenshot": "Сделать снимок",
+            "start_audio_stream": "Начать аудиотрансляцию"
         }
     }
 }
diff --git a/packages/shared-components/src/i18n/strings/zh_Hans.json b/packages/shared-components/src/i18n/strings/zh_Hans.json
index 7377fbbf45..c15efb87b4 100644
--- a/packages/shared-components/src/i18n/strings/zh_Hans.json
+++ b/packages/shared-components/src/i18n/strings/zh_Hans.json
@@ -1,14 +1,152 @@
 {
+    "a11y": {
+        "seek_bar_label": "音频定位栏"
+    },
     "action": {
+        "back": "返回",
+        "click": "点击",
+        "close": "关闭",
+        "collapse": "折叠",
         "delete": "删除",
         "dismiss": "忽略",
+        "download": "下载",
+        "edit": "编辑",
         "explore_rooms": "查找房间",
+        "go": "转到",
+        "hide": "隐藏",
+        "invite": "邀请",
+        "new_conversation": "新对话",
+        "new_room": "新房间",
+        "new_section": "新区域",
+        "new_video_room": "新视频房间",
+        "open_menu": "打开菜单",
         "pause": "暂停",
+        "pin": "置顶",
         "play": "播放",
-        "search": "搜索"
+        "react": "反应",
+        "remove": "移除",
+        "reply": "回复",
+        "reply_in_thread": "在消息列中回复",
+        "retry": "重试",
+        "search": "搜索",
+        "start_chat": "开始聊天",
+        "unpin": "取消置顶",
+        "view_source": "查看源代码"
+    },
+    "common": {
+        "attachment": "附件",
+        "encryption_enabled": "加密已启用",
+        "loading": "正在载入…",
+        "options": "选项",
+        "preferences": "偏好",
+        "state_encryption_enabled": "实验性的状态加密已启用"
     },
     "left_panel": {
-        "open_dial_pad": "打开拨号键盘"
+        "open_dial_pad": "打开拨号键盘",
+        "separator_label": "点击或拖动以展开"
+    },
+    "notifications": {
+        "all_messages": "所有消息",
+        "default_settings": "跟随系统设置",
+        "mentions_keywords": "提及与关键词",
+        "mute_room": "静默房间"
+    },
+    "room": {
+        "context_menu": {
+            "title": "房间选项"
+        },
+        "history_visibility_badge": {
+            "private": "新成员不能看到历史",
+            "shared": "新成员可以看到历史",
+            "world_readable": "任何人都可以看到历史"
+        },
+        "jump_to_date": "跳转到日期",
+        "jump_to_date_beginning": "房间的开头",
+        "jump_to_date_prompt": "选择日期以跳转",
+        "pinned_message_badge": "已被置顶的消息",
+        "status_bar": {
+            "delete_all": "全部删除",
+            "exceeded_resource_limit_description": "要继续使用此服务请联系服务器管理员。",
+            "exceeded_resource_limit_title": "你的消息未能发送，因为此服务器已超出资源限制。",
+            "failed_to_create_room_title": "无法与此用户开始聊天",
+            "homeserver_blocked_title": "你的消息未能发送，因为此服务器已被其管理员屏蔽。",
+            "monthly_user_limit_reached_title": "你的消息未能发送，因为此服务器已达到每月活跃用户上限。",
+            "requires_consent_agreement_title": "你需要同意我们的条款与条件才能发送任意消息。",
+            "retry_all": "全部重试",
+            "select_messages_to_retry": "你可以选择全部或个别消息以重试或删除。",
+            "server_connectivity_lost_description": "已发送的消息将保存直到恢复连接。",
+            "server_connectivity_lost_title": "已断开与服务器的连接。",
+            "some_messages_not_sent": "你的某些消息未能发送。"
+        }
+    },
+    "room_list": {
+        "appearance": "外观",
+        "collapse_filters": "折叠过滤器列表",
+        "empty": {
+            "no_chats": "暂无聊天",
+            "no_chats_description": "首先向人们发送消息或创建房间。",
+            "no_chats_description_no_room_rights": "开始向某人发送消息",
+            "no_favourites": "你还没有收藏聊天",
+            "no_favourites_description": "你可以在聊天设置中将聊天添加到收藏夹",
+            "no_invites": "你没有任何未读邀请",
+            "no_lowpriority": "你没有任何低优先级房间",
+            "no_mentions": "你没有任何未读提及",
+            "no_people": "你尚未与任何人私聊",
+            "no_people_description": "你可以取消选择筛选条件，以便查看其它聊天记录",
+            "no_rooms": "尚未处于任何房间",
+            "no_rooms_description": "你可以取消选择筛选条件，以便查看其它聊天记录",
+            "no_unread": "恭喜！你没有任何未读消息",
+            "show_activity": "查看所有活动",
+            "show_chats": "显示所有聊天"
+        },
+        "expand_filters": "展开过滤器列表",
+        "filters": {
+            "favourite": "收藏",
+            "invites": "邀请",
+            "low_priority": "低优先级",
+            "mentions": "提及",
+            "people": "人员",
+            "rooms": "房间",
+            "unread": "未读"
+        },
+        "list_title": "房间列表",
+        "more_options": {
+            "copy_link": "复制房间链接",
+            "favourited": "已收藏",
+            "leave_room": "离开房间",
+            "low_priority": "低优先级",
+            "mark_read": "设为已读",
+            "mark_unread": "设为未读",
+            "move_to_section": "移动到"
+        },
+        "notification_options": "通知选项",
+        "open_space_menu": "打开空间菜单",
+        "primary_filters": "房间列表筛选器",
+        "room": {
+            "more_options": "更多选项"
+        },
+        "room_options": "房间选项",
+        "section_created": "区域已创建",
+        "section_header": {
+            "toggle": "切换区域 %(section)s",
+            "toggle_unread": "切换到区域 %(section)s 中的未读房间"
+        },
+        "show_message_previews": "显示消息预览",
+        "sort": "排序",
+        "sort_type": {
+            "activity": "活动",
+            "unread_first": "未读优先"
+        },
+        "space_menu": {
+            "home": "空间主页",
+            "space_settings": "空间设置"
+        }
+    },
+    "terms": {
+        "tac_button": "阅读条款与条件"
+    },
+    "threads": {
+        "error_start_thread_existing_relation": "无法从现有相关的事件中创建消息列"
     },
     "time": {
         "about_day_ago": "约一天前",
@@ -27,9 +165,61 @@
         "n_minutes_ago": "%(num)s分钟前"
     },
     "timeline": {
+        "decryption_failure": {
+            "blocked": "由于你的设备未经验证，发件人已阻止你接收此消息。",
+            "historical_event_no_key_backup": "消息历史在此设备上不可用",
+            "historical_event_unverified_device": "你需要验证此设备才能访问历史消息",
+            "historical_event_user_not_joined": "你无权访问此消息",
+            "sender_identity_previously_verified": "发送者的数字身份已重置。",
+            "sender_unsigned_device": "从不安全的设备发送。",
+            "unable_to_decrypt": "无法解密消息"
+        },
+        "download_action_decrypting": "正在解密",
+        "download_action_downloading": "正在下载",
         "m.audio": {
+            "audio_player": "音频播放器",
             "error_downloading_audio": "下载音频时出错",
             "unnamed_audio": "未命名的音频"
+        },
+        "m.file": {
+            "error_invalid": "无效文件"
+        },
+        "m.room.encryption": {
+            "disable_attempt": "已忽略尝试禁用加密",
+            "disabled": "加密未启用",
+            "enabled": "此处的消息是端到端加密的。当人员加入时，你可以在其个人资料中点击其头像验证。",
+            "enabled_dm": "此处的消息是端到端加密的。点击其个人资料图像以验证 %(displayName)s。",
+            "enabled_local": "此聊天中的消息将被端到端加密。",
+            "parameters_changed": "某些加密参数已被更改。",
+            "state_enabled": "此房间内的消息与状态事件已被端到端加密。当人员加入时，你可以点击他们的头像以验证其身份。",
+            "unsupported": "该房间使用的加密方式不受支持。"
+        },
+        "mab": {
+            "collapse_reply_chain": "折叠引用",
+            "copy_link_thread": "复制关联到此消息列的链接",
+            "expand_reply_chain": "展开引用",
+            "label": "消息操作",
+            "view_in_room": "在房间中查看"
+        },
+        "message_timestamp_received_at": "接收于 %(dateTime)s",
+        "message_timestamp_sent_at": "发送于 %(dateTime)s",
+        "url_preview": {
+            "close": "关闭预览",
+            "show_n_more": {
+                "one": "显示剩余 %(count)s 个预览",
+                "other": "显示剩余 %(count)s 个预览"
+            },
+            "view_image": "查看图像"
+        }
+    },
+    "widget": {
+        "context_menu": {
+            "move_left": "向左移动",
+            "move_right": "向右移动",
+            "remove": "为所有人移除",
+            "revoke": "撤消权限",
+            "screenshot": "拍摄照片",
+            "start_audio_stream": "开始音频串流"
         }
     }
 }
diff --git a/packages/shared-components/src/index.ts b/packages/shared-components/src/index.ts
index c1f53abbb7..385bef992c 100644
--- a/packages/shared-components/src/index.ts
+++ b/packages/shared-components/src/index.ts
@@ -9,20 +9,23 @@
 export * from "./audio/Clock";
 export * from "./audio/PlayPauseButton";
 export * from "./audio/SeekBar";
-export * from "./core/avatar/AvatarWithDetails";
-export * from "./composer/Banner";
+export * from "./core/AvatarWithDetails";
+export * from "./room/composer/Banner";
 export * from "./crypto/SasEmoji";
-export * from "./event-tiles/UrlPreviewGroupView";
+export * from "./room/timeline/ReadMarker";
 export * from "./room/timeline/event-tile/body/EventContentBodyView";
 export * from "./room/timeline/event-tile/body/RedactedBodyView";
 export * from "./room/timeline/event-tile/body/MFileBodyView";
+export * from "./room/timeline/event-tile/body/MImageBodyView";
 export * from "./room/timeline/event-tile/body/MVideoBodyView";
+export * from "./room/timeline/event-tile/body/TextualBodyView";
 export * from "./room/timeline/event-tile/EventTileView/TileErrorView";
 export * from "./core/pill-input/Pill";
 export * from "./core/pill-input/PillInput";
 export * from "./room/RoomStatusBar";
 export * from "./room/WidgetPip";
 export * from "./room/HistoryVisibilityBadge";
+export * from "./room/right-panel/WidgetContextMenuView";
 export * from "./room/timeline/DateSeparatorView";
 export * from "./room/timeline/TimelineSeparator";
 export * from "./room/timeline/event-tile/actions/ActionBarView";
@@ -38,20 +41,20 @@ export * from "./room/timeline/event-tile/reactions/ReactionsRow";
 export * from "./room/timeline/event-tile/reactions/ReactionsRowButton";
 export * from "./room/timeline/event-tile/reactions/ReactionsRowButtonTooltip";
 export * from "./room/timeline/event-tile/timestamp/MessageTimestampView";
+export * from "./room/timeline/event-tile/UrlPreviewGroupView";
 export * from "./core/rich-list/RichItem";
 export * from "./core/rich-list/RichList";
 export * from "./room-list/RoomListHeaderView";
 export * from "./room-list/RoomListSearchView";
-export * from "./room-list/RoomListSectionHeaderView";
 export * from "./room-list/RoomListView";
-export * from "./room-list/RoomListItemView";
-export * from "./room-list/RoomListItemAccessibilityWrapper";
+export * from "./room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView";
 export * from "./room-list/RoomListPrimaryFilters";
 export * from "./room-list/VirtualizedRoomListView";
+export * from "./room-list/VirtualizedRoomListView/RoomListSectionHeaderView";
+export * from "./room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper";
 export * from "./core/utils/Box";
 export * from "./core/utils/Flex";
 export * from "./core/utils/LinkedText";
-export * from "./right-panel/WidgetContextMenu";
 export * from "./core/VirtualizedList";
 export * from "./resize";
 
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/RoomListHeaderView.module.css b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.module.css
index e7932ba81e..252b3bde7a 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.module.css
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.module.css
@@ -25,5 +25,6 @@
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
+        user-select: none; /* currently supported by Chrome, Edge, Opera and Firefox */
     }
 }
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx
index 35b5fd201b..83551bc21b 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx
@@ -30,6 +30,7 @@ const RoomListHeaderViewWrapperImpl = ({
     openSpacePreferences,
     sort,
     toggleMessagePreview,
+    createSection,
     ...rest
 }: RoomListHeaderProps): JSX.Element => {
     const vm = useMockedViewModel(rest, {
@@ -42,6 +43,7 @@ const RoomListHeaderViewWrapperImpl = ({
         sort,
         openSpacePreferences,
         toggleMessagePreview,
+        createSection,
     });
     return <RoomListHeaderView vm={vm} />;
 };
@@ -62,6 +64,7 @@ const meta = {
         sort: fn(),
         openSpacePreferences: fn(),
         toggleMessagePreview: fn(),
+        createSection: fn(),
     },
     parameters: {
         design: {
@@ -100,3 +103,9 @@ export const LongTitle: Story = {
         title: "Loooooooooooooooooooooooooooooooooooooong title",
     },
 };
+
+export const PlusIcon: Story = {
+    args: {
+        useComposeIcon: false,
+    },
+};
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx
index 2125ea9af2..05254899ea 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx
@@ -8,6 +8,7 @@
 import React, { type JSX } from "react";
 import { IconButton, H1 } from "@vector-im/compound-web";
 import ComposeIcon from "@vector-im/compound-design-tokens/assets/web/icons/compose";
+import PlusIcon from "@vector-im/compound-design-tokens/assets/web/icons/plus";
 
 import { type ViewModel, useViewModel } from "../../core/viewmodel";
 import { Flex } from "../../core/utils/Flex";
@@ -59,6 +60,14 @@ export interface RoomListHeaderViewSnapshot {
      * Whether message previews are enabled in the room list.
      */
     isMessagePreviewEnabled: boolean;
+    /**
+     * Whether the user can create sections in the room list.
+     */
+    canCreateSection: boolean;
+    /**
+     * Whether to use the compose icon instead of the create icon.
+     */
+    useComposeIcon: boolean;
 }
 
 export interface RoomListHeaderViewActions {
@@ -98,6 +107,10 @@ export interface RoomListHeaderViewActions {
      * Toggle message preview display in the room list.
      */
     toggleMessagePreview: () => void;
+    /**
+     * Create a new section in the room list.
+     */
+    createSection: () => void;
 }
 
 /**
@@ -123,7 +136,7 @@ interface RoomListHeaderViewProps {
  */
 export function RoomListHeaderView({ vm }: Readonly<RoomListHeaderViewProps>): JSX.Element {
     const { translate: _t } = useI18n();
-    const { title, displaySpaceMenu, displayComposeMenu } = useViewModel(vm);
+    const { title, displaySpaceMenu, displayComposeMenu, useComposeIcon } = useViewModel(vm);
 
     return (
         <Flex
@@ -153,7 +166,11 @@ export function RoomListHeaderView({ vm }: Readonly<RoomListHeaderViewProps>): J
                             onClick={(e) => vm.createChatRoom(e.nativeEvent)}
                             tooltip={_t("action|new_conversation")}
                         >
-                            <ComposeIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
+                            {useComposeIcon ? (
+                                <ComposeIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
+                            ) : (
+                                <PlusIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
+                            )}
                         </IconButton>
                     )}
                 </Flex>
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..6608b5b3f3 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
@@ -110,6 +110,7 @@ exports[`RoomListHeaderView > renders the default state 1`] = `
           >
             <svg
               aria-hidden="true"
+              color="var(--cpd-color-icon-secondary)"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -137,16 +138,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 +161,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 +189,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 +266,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 +286,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
@@ -340,6 +341,7 @@ exports[`RoomListHeaderView > renders without space menu 1`] = `
           >
             <svg
               aria-hidden="true"
+              color="var(--cpd-color-icon-secondary)"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/default-snapshot.ts b/packages/shared-components/src/room-list/RoomListHeaderView/default-snapshot.ts
index ab02dbfe76..41887e8ed4 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/default-snapshot.ts
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/default-snapshot.ts
@@ -17,4 +17,6 @@ export const defaultSnapshot: RoomListHeaderViewSnapshot = {
     canAccessSpaceSettings: true,
     activeSortOption: "recent",
     isMessagePreviewEnabled: true,
+    useComposeIcon: true,
+    canCreateSection: true,
 };
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.test.tsx b/packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.test.tsx
index db06051cc2..029a1226fa 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.test.tsx
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.test.tsx
@@ -101,4 +101,15 @@ describe("<ComposeMenuView />", () => {
 
         expect(vm.createVideoRoom).toHaveBeenCalledTimes(1);
     });
+
+    it("should create a new section", async () => {
+        const user = userEvent.setup();
+
+        const vm = new MockedViewModel({ ...defaultSnapshot, isMessagePreviewEnabled: true });
+        render(<ComposeMenuView vm={vm} />);
+
+        await user.click(screen.getByRole("button", { name: "New conversation" }));
+        await user.click(screen.getByRole("menuitem", { name: "New section" }));
+        expect(vm.createSection).toHaveBeenCalled();
+    });
 });
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.tsx b/packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.tsx
index 0e4a2f2b73..3803c23fcf 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.tsx
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.tsx
@@ -11,6 +11,8 @@ import ComposeIcon from "@vector-im/compound-design-tokens/assets/web/icons/comp
 import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call";
 import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
 import RoomIcon from "@vector-im/compound-design-tokens/assets/web/icons/room";
+import SectionIcon from "@vector-im/compound-design-tokens/assets/web/icons/section";
+import PlusIcon from "@vector-im/compound-design-tokens/assets/web/icons/plus";
 
 import { type RoomListHeaderViewModel } from "../RoomListHeaderView";
 import { useI18n } from "../../../core/i18n/i18nContext";
@@ -35,7 +37,7 @@ interface ComposeMenuViewProps {
 export function ComposeMenuView({ vm }: ComposeMenuViewProps): JSX.Element {
     const { translate: _t } = useI18n();
     const [open, setOpen] = useState(false);
-    const { canCreateRoom, canCreateVideoRoom } = useViewModel(vm);
+    const { canCreateRoom, canCreateVideoRoom, canCreateSection, useComposeIcon } = useViewModel(vm);
 
     return (
         <Menu
@@ -47,7 +49,11 @@ export function ComposeMenuView({ vm }: ComposeMenuViewProps): JSX.Element {
             trigger={
                 // 28px button with a 20px icon
                 <IconButton size="28px" style={{ padding: "4px" }} tooltip={_t("action|new_conversation")}>
-                    <ComposeIcon aria-hidden />
+                    {useComposeIcon ? (
+                        <ComposeIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
+                    ) : (
+                        <PlusIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
+                    )}
                 </IconButton>
             }
         >
@@ -63,6 +69,9 @@ export function ComposeMenuView({ vm }: ComposeMenuViewProps): JSX.Element {
                     hideChevron
                 />
             )}
+            {canCreateSection && (
+                <MenuItem Icon={SectionIcon} label={_t("action|new_section")} onSelect={vm.createSection} hideChevron />
+            )}
         </Menu>
     );
 }
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/ComposeMenuView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/ComposeMenuView.test.tsx.snap
index d269845351..2f43a667bc 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/ComposeMenuView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/ComposeMenuView.test.tsx.snap
@@ -22,6 +22,7 @@ exports[`<ComposeMenuView /> > should match snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
+        color="var(--cpd-color-icon-secondary)"
         fill="currentColor"
         height="1em"
         viewBox="0 0 24 24"
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/RoomListHeaderView/test-utils.ts b/packages/shared-components/src/room-list/RoomListHeaderView/test-utils.ts
index 661c534328..37b53af6f3 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/test-utils.ts
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/test-utils.ts
@@ -23,6 +23,7 @@ export class MockedViewModel extends MockViewModel<RoomListHeaderViewSnapshot> i
     public sort = vi.fn<() => void>();
     public openSpacePreferences = vi.fn<() => void>();
     public toggleMessagePreview = vi.fn<() => void>();
+    public createSection = vi.fn<() => void>();
 }
 
 export { defaultSnapshot } from "./default-snapshot";
diff --git a/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.module.css b/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.module.css
index 7bb7cd8006..49d1900a35 100644
--- a/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.module.css
+++ b/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.module.css
@@ -20,6 +20,7 @@
      */
     height: 100%;
     flex: 1;
+    user-select: none; /* currently supported by Chrome, Edge, Opera and Firefox */
 }
 
 /* IconButton styles for chevron */
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/RoomListView/RoomListToast/RoomListToast.module.css b/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.module.css
new file mode 100644
index 0000000000..288ec1000e
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.module.css
@@ -0,0 +1,15 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.toast {
+    position: absolute;
+    bottom: var(--cpd-space-4x);
+    left: var(--cpd-space-3x);
+    right: var(--cpd-space-3x);
+    width: fit-content;
+    margin: 0 auto;
+}
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx
new file mode 100644
index 0000000000..7f8b4ed9ae
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { fn } from "storybook/test";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { RoomListToast } from "./RoomListToast";
+
+const meta = {
+    title: "Room List/RoomListView/RoomListToast",
+    component: RoomListToast,
+    tags: ["autodocs"],
+    args: {
+        type: "section_created",
+        onClose: fn(),
+    },
+    argTypes: {
+        type: {
+            control: "select",
+            options: ["section_created"],
+        },
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ position: "relative", width: "320px", height: "100px", backgroundColor: "grey" }}>
+                <Story />
+            </div>
+        ),
+    ],
+} satisfies Meta<typeof RoomListToast>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SectionCreated: Story = {};
+
+export const ChatMoved: Story = {
+    args: {
+        type: "chat_moved",
+    },
+};
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.test.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.test.tsx
new file mode 100644
index 0000000000..e9f4303e52
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.test.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { render, screen } from "@test-utils";
+import { composeStories } from "@storybook/react-vite";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+
+import * as stories from "./RoomListToast.stories";
+
+const { SectionCreated, ChatMoved } = composeStories(stories);
+
+describe("<RoomListToast />", () => {
+    it("renders SectionCreated story", () => {
+        const { container } = render(<SectionCreated />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders ChatMoved story", () => {
+        const { container } = render(<ChatMoved />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("calls onClose when the close button is clicked", async () => {
+        const user = userEvent.setup();
+        render(<SectionCreated />);
+        const closeButton = screen.getByRole("button", { name: "Close" });
+        await user.click(closeButton);
+        expect(SectionCreated.args.onClose).toHaveBeenCalled();
+    });
+});
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.tsx
new file mode 100644
index 0000000000..e46b000fd4
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type ComponentType, type JSX, type MouseEventHandler } from "react";
+import { Toast } from "@vector-im/compound-web";
+import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
+
+import styles from "./RoomListToast.module.css";
+import { useI18n } from "../../../core/i18n/i18nContext";
+
+export type ToastType = "section_created" | "chat_moved";
+
+interface RoomListToastProps {
+    /** The type of toast to display */
+    type: ToastType;
+    /** Callback when the close button is clicked */
+    onClose: MouseEventHandler<HTMLButtonElement>;
+}
+
+/**
+ * A toast component used for displaying temporary messages in the room list view.
+ *
+ * @example
+ * ```tsx
+ *   <RoomListToast type="section_created" onClose={onCloseHandler} />
+ * ```
+ */
+export function RoomListToast({ type, onClose }: Readonly<RoomListToastProps>): JSX.Element {
+    const { translate: _t } = useI18n();
+
+    let content: { text: string; icon: ComponentType<React.SVGAttributes<SVGElement>> };
+    switch (type) {
+        case "section_created":
+            content = { text: _t("room_list|section_created"), icon: CheckIcon };
+            break;
+        case "chat_moved":
+            content = { text: _t("room_list|chat_moved"), icon: CheckIcon };
+            break;
+    }
+
+    return (
+        <Toast className={styles.toast} Icon={content.icon} onClose={onClose} tooltip={_t("action|close")}>
+            {content.text}
+        </Toast>
+    );
+}
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListToast/__snapshots__/RoomListToast.test.tsx.snap b/packages/shared-components/src/room-list/RoomListView/RoomListToast/__snapshots__/RoomListToast.test.tsx.snap
new file mode 100644
index 0000000000..05d35de67a
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListToast/__snapshots__/RoomListToast.test.tsx.snap
@@ -0,0 +1,113 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<RoomListToast /> > renders ChatMoved story 1`] = `
+<div>
+  <div
+    style="position: relative; width: 320px; height: 100px; background-color: grey;"
+  >
+    <div
+      class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _toast-container_1ysb3_8 RoomListToast-module_toast _has-close_1ysb3_30"
+    >
+      <div
+        class="_content_1ysb3_34"
+      >
+        <svg
+          aria-hidden="true"
+          class="_icon_1ysb3_26"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+          />
+        </svg>
+        Chat moved
+      </div>
+      <button
+        aria-labelledby="_r_6_"
+        class="_icon-button_1215g_8 _close_1ysb3_41 _no-background_1215g_42"
+        data-kind="secondary"
+        role="button"
+        style="--cpd-icon-button-size: 24px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_147l5_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListToast /> > renders SectionCreated story 1`] = `
+<div>
+  <div
+    style="position: relative; width: 320px; height: 100px; background-color: grey;"
+  >
+    <div
+      class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _toast-container_1ysb3_8 RoomListToast-module_toast _has-close_1ysb3_30"
+    >
+      <div
+        class="_content_1ysb3_34"
+      >
+        <svg
+          aria-hidden="true"
+          class="_icon_1ysb3_26"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+          />
+        </svg>
+        Section created
+      </div>
+      <button
+        aria-labelledby="_r_0_"
+        class="_icon-button_1215g_8 _close_1ysb3_41 _no-background_1215g_42"
+        data-kind="secondary"
+        role="button"
+        style="--cpd-icon-button-size: 24px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_147l5_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListToast/index.ts b/packages/shared-components/src/room-list/RoomListView/RoomListToast/index.ts
new file mode 100644
index 0000000000..3a6b6a5cf5
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListToast/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export type { ToastType } from "./RoomListToast";
+export { RoomListToast } from "./RoomListToast";
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListView.module.css b/packages/shared-components/src/room-list/RoomListView/RoomListView.module.css
new file mode 100644
index 0000000000..c20d3006bf
--- /dev/null
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListView.module.css
@@ -0,0 +1,11 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.list {
+    position: relative;
+    flex: 1;
+}
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListView.stories.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListView.stories.tsx
index ceae8c78ca..dfdab19c92 100644
--- a/packages/shared-components/src/room-list/RoomListView/RoomListView.stories.tsx
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListView.stories.tsx
@@ -9,9 +9,9 @@ import React, { type JSX } from "react";
 import { fn } from "storybook/test";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { Room } from "../RoomListItemView";
 import type { FilterId } from "../RoomListPrimaryFilters";
 import { RoomListView, type RoomListViewSnapshot, type RoomListViewActions } from "./RoomListView";
+import type { Room } from "../VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView";
 import { useMockedViewModel } from "../../core/viewmodel";
 import { withViewDocs } from "../../../.storybook/withViewDocs";
 import {
@@ -39,6 +39,7 @@ const RoomListViewWrapperImpl = ({
     getSectionHeaderViewModel,
     updateVisibleRooms,
     renderAvatar: renderAvatarProp,
+    closeToast,
     ...rest
 }: RoomListViewProps): JSX.Element => {
     const vm = useMockedViewModel(rest, {
@@ -48,6 +49,7 @@ const RoomListViewWrapperImpl = ({
         getRoomItemViewModel,
         getSectionHeaderViewModel,
         updateVisibleRooms,
+        closeToast,
     });
     return <RoomListView vm={vm} renderAvatar={renderAvatarProp} />;
 };
@@ -98,6 +100,8 @@ const meta = {
         updateVisibleRooms: fn(),
         renderAvatar,
         isFlatList: true,
+        toast: undefined,
+        closeToast: fn(),
     },
     parameters: {
         design: {
@@ -245,3 +249,9 @@ export const LargeSectionList: Story = {
         getSectionHeaderViewModel: createGetSectionHeaderViewModel(mockLargeListSections.map((section) => section.id)),
     },
 };
+
+export const Toast: Story = {
+    args: {
+        toast: "section_created",
+    },
+};
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListView.test.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListView.test.tsx
index 380600541a..5d84e05d05 100644
--- a/packages/shared-components/src/room-list/RoomListView/RoomListView.test.tsx
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListView.test.tsx
@@ -31,6 +31,7 @@ const {
     EmptyInvitesFilter,
     EmptyMentionsFilter,
     EmptyLowPriorityFilter,
+    Toast,
 } = composeStories(stories);
 
 const renderWithMockContext = (component: React.ReactElement): ReturnType<typeof render> => {
@@ -124,6 +125,11 @@ describe("<RoomListView />", () => {
         expect(container).toMatchSnapshot();
     });
 
+    it("renders Toast story", () => {
+        const { container } = renderWithMockContext(<Toast />);
+        expect(container).toMatchSnapshot();
+    });
+
     it("should call onToggleFilter when filter is clicked", async () => {
         const user = userEvent.setup();
         renderWithMockContext(<Default />);
@@ -186,4 +192,13 @@ describe("<RoomListView />", () => {
 
         expect(EmptyLowPriorityFilter.args.onToggleFilter).toHaveBeenCalled();
     });
+
+    it("should call closeToast when close button is clicked on toast", async () => {
+        const user = userEvent.setup();
+        renderWithMockContext(<Toast />);
+
+        await user.click(screen.getByRole("button", { name: "Close" }));
+
+        expect(EmptyLowPriorityFilter.args.closeToast).toHaveBeenCalled();
+    });
 });
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListView.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListView.tsx
index 784f60f99b..3cace4b400 100644
--- a/packages/shared-components/src/room-list/RoomListView/RoomListView.tsx
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListView.tsx
@@ -12,8 +12,14 @@ import { RoomListPrimaryFilters, type FilterId } from "../RoomListPrimaryFilters
 import { RoomListLoadingSkeleton } from "./RoomListLoadingSkeleton";
 import { RoomListEmptyStateView } from "./RoomListEmptyStateView";
 import { VirtualizedRoomListView, type RoomListViewState } from "../VirtualizedRoomListView";
-import { type Room, type RoomListItemViewModel } from "../RoomListItemView";
-import { type RoomListSectionHeaderViewModel } from "../RoomListSectionHeaderView";
+import {
+    type Room,
+    type RoomListItemViewModel,
+} from "../VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView";
+import { type RoomListSectionHeaderViewModel } from "../VirtualizedRoomListView/RoomListSectionHeaderView";
+import { type ToastType, RoomListToast } from "./RoomListToast";
+import styles from "./RoomListView.module.css";
+import { Flex } from "../../core/utils/Flex";
 
 export type RoomListSection = {
     /** Unique identifier for the section */
@@ -46,6 +52,8 @@ export type RoomListViewSnapshot = {
     canCreateRoom?: boolean;
     /** Whether the room list is displayed as a flat list */
     isFlatList: boolean;
+    /** Optional toast to display */
+    toast?: ToastType;
 };
 
 /**
@@ -67,6 +75,8 @@ export interface RoomListViewActions {
     updateVisibleRooms: (startIndex: number, endIndex: number) => void;
     /** Get view model for a specific section header (virtualization API) */
     getSectionHeaderViewModel: (sectionId: string) => RoomListSectionHeaderViewModel;
+    /** Called to close the toast message */
+    closeToast: () => void;
 }
 
 /**
@@ -110,7 +120,10 @@ export const RoomListView: React.FC<RoomListViewProps> = ({ vm, renderAvatar, on
                     onToggleFilter={vm.onToggleFilter}
                 />
             </div>
-            {listBody}
+            <Flex direction="column" className={styles.list}>
+                {listBody}
+                {snapshot.toast && <RoomListToast type={snapshot.toast} onClose={vm.closeToast} />}
+            </Flex>
         </>
     );
 };
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..2cab617342 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;"
@@ -58,2610 +58,2616 @@ exports[`<RoomListView /> > renders Default story 1`] = `
       </div>
     </div>
     <div
-      aria-label="Room list"
-      data-testid="room-list"
-      data-virtuoso-scroller="true"
-      role="listbox"
-      style="height: 100%; outline: none; overflow-y: auto; position: relative;"
-      tabindex="0"
+      class="Flex-module_flex RoomListView-module_list"
+      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;"
     >
       <div
-        data-viewport-type="element"
-        style="height: 100%; position: absolute; top: 0px; width: 100%;"
+        aria-label="Room list"
+        class="VirtualizedRoomListView-module_roomList"
+        data-testid="room-list"
+        data-virtuoso-scroller="true"
+        role="listbox"
+        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+        tabindex="0"
       >
         <div
-          data-testid="virtuoso-item-list"
-          style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
+          data-viewport-type="element"
+          style="height: 100%; position: absolute; top: 0px; width: 100%;"
         >
           <div
-            data-index="0"
-            data-item-index="0"
-            data-known-size="52"
-            style="overflow-anchor: none;"
+            data-testid="virtuoso-item-list"
+            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
           >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room General"
-              aria-posinset="1"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView bold 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;"
-              tabindex="-1"
-              type="button"
+            <div
+              data-index="0"
+              data-item-index="0"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room General"
+                aria-posinset="1"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="General avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  GE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="General avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="General"
-                    >
-                      General
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in General"
-                    >
-                      Last message in General
-                    </div>
+                    GE
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_3_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_1_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="General"
+                      >
+                        General
+                      </div>
+                      <div
+                        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-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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_3_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_a_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_8_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
                       >
                         <svg
-                          fill="currentColor"
-                          height="1em"
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
                           viewBox="0 0 24 24"
-                          width="1em"
+                          width="20px"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                           />
                         </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_a_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_8_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  >
-                    <div
-                      class="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;"
-                    >
-                      <svg
-                        fill="var(--cpd-color-icon-accent-primary)"
-                        height="20px"
-                        viewBox="0 0 24 24"
-                        width="20px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                        <div
+                          class="_unread-counter_1147r_8"
                         />
-                      </svg>
-                      <div
-                        class="_unread-counter_1147r_8"
-                      />
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="1"
-            data-item-index="1"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Random"
-              aria-posinset="2"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="1"
+              data-item-index="1"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Random"
+                aria-posinset="2"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Random avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  RA
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Random avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    RA
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Random"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Random
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Random"
+                      >
+                        Random
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_h_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_f_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_h_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_f_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_o_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_m_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_o_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_m_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="2"
-            data-item-index="2"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Engineering"
-              aria-posinset="3"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="2"
+              data-item-index="2"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Engineering"
+                aria-posinset="3"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Engineering avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  EN
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Engineering avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Engineering"
-                    >
-                      Engineering
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Engineering"
-                    >
-                      Last message in Engineering
-                    </div>
+                    EN
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_v_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_t_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Engineering"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Engineering
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_16_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_14_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Engineering"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Engineering
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_v_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_t_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_16_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_14_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="3"
-            data-item-index="3"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Design"
-              aria-posinset="4"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="3"
+              data-item-index="3"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Design"
+                aria-posinset="4"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Design avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  DE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Design avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    DE
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Design"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Design
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Design"
+                      >
+                        Design
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_1d_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_1b_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_1d_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1b_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_1k_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_1i_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_1k_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1i_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="4"
-            data-item-index="4"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Product"
-              aria-posinset="5"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="4"
+              data-item-index="4"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Product"
+                aria-posinset="5"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Product avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  PR
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Product avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Product"
-                    >
-                      Product
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Product"
-                    >
-                      Last message in Product
-                    </div>
+                    PR
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_1r_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_1p_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Product"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Product
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_22_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_20_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Product"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Product
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_1r_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1p_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_22_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_20_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="5"
-            data-item-index="5"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Marketing with 5 unread mentions."
-              aria-posinset="6"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="5"
+              data-item-index="5"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Marketing with 5 unread mentions."
+                aria-posinset="6"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Marketing avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  MA
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Marketing avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Marketing"
-                    >
-                      Marketing
-                    </div>
+                    MA
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_29_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_27_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Marketing"
+                      >
+                        Marketing
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_29_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_27_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_2g_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_2e_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
                       >
                         <svg
-                          fill="currentColor"
-                          height="1em"
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
                           viewBox="0 0 24 24"
-                          width="1em"
+                          width="20px"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                           />
                         </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_2g_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_2e_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <span
+                          class="_unread-counter_1147r_8"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                          5
+                        </span>
                       </div>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  >
-                    <div
-                      class="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;"
-                    >
-                      <svg
-                        fill="var(--cpd-color-icon-accent-primary)"
-                        height="20px"
-                        viewBox="0 0 24 24"
-                        width="20px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                        />
-                      </svg>
-                      <span
-                        class="_unread-counter_1147r_8"
-                      >
-                        5
-                      </span>
                     </div>
                   </div>
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="6"
-            data-item-index="6"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Sales"
-              aria-posinset="7"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="6"
+              data-item-index="6"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Sales"
+                aria-posinset="7"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Sales avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  SA
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Sales avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Sales"
-                    >
-                      Sales
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Sales"
-                    >
-                      Last message in Sales
-                    </div>
+                    SA
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_2n_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_2l_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Sales"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Sales
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_2u_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_2s_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Sales"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Sales
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_2n_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_2l_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_2u_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_2s_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="7"
-            data-item-index="7"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Support"
-              aria-posinset="8"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="7"
+              data-item-index="7"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Support"
+                aria-posinset="8"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Support avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  SU
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Support avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    SU
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Support"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Support
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Support"
+                      >
+                        Support
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_35_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_33_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_35_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_33_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_3c_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_3a_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_3c_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_3a_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="8"
-            data-item-index="8"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Announcements"
-              aria-posinset="9"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="8"
+              data-item-index="8"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Announcements"
+                aria-posinset="9"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Announcements avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  AN
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Announcements avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Announcements"
-                    >
-                      Announcements
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Announcements"
-                    >
-                      Last message in Announcements
-                    </div>
+                    AN
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_3j_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_3h_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Announcements"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Announcements
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_3q_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_3o_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Announcements"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Announcements
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_3j_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_3h_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_3q_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_3o_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="9"
-            data-item-index="9"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Off-topic"
-              aria-posinset="10"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="9"
+              data-item-index="9"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Off-topic"
+                aria-posinset="10"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Off-topic avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  OF
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Off-topic avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    OF
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Off-topic"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Off-topic
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Off-topic"
+                      >
+                        Off-topic
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_41_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_3v_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_41_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_3v_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_48_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_46_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_48_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_46_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="10"
-            data-item-index="10"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Team Alpha with 10 unread mentions."
-              aria-posinset="11"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="10"
+              data-item-index="10"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Team Alpha with 10 unread mentions."
+                aria-posinset="11"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Team Alpha avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  TE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Team Alpha avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Team Alpha"
-                    >
-                      Team Alpha
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Team Alpha"
-                    >
-                      Last message in Team Alpha
-                    </div>
+                    TE
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_4f_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_4d_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        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 RoomListItemView-module_ellipsis"
+                        title="Last message in Team Alpha"
+                      >
+                        Last message in Team Alpha
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_4f_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_4d_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_4m_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_4k_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
                       >
                         <svg
-                          fill="currentColor"
-                          height="1em"
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
                           viewBox="0 0 24 24"
-                          width="1em"
+                          width="20px"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                           />
                         </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_4m_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_4k_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <span
+                          class="_unread-counter_1147r_8"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                          10
+                        </span>
                       </div>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  >
-                    <div
-                      class="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;"
-                    >
-                      <svg
-                        fill="var(--cpd-color-icon-accent-primary)"
-                        height="20px"
-                        viewBox="0 0 24 24"
-                        width="20px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                        />
-                      </svg>
-                      <span
-                        class="_unread-counter_1147r_8"
-                      >
-                        10
-                      </span>
                     </div>
                   </div>
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="11"
-            data-item-index="11"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Team Beta"
-              aria-posinset="12"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="11"
+              data-item-index="11"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Team Beta"
+                aria-posinset="12"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Team Beta avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  TE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Team Beta avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    TE
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Team Beta"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Team Beta
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Team Beta"
+                      >
+                        Team Beta
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_4t_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_4r_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_4t_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_4r_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_54_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_52_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_54_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_52_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="12"
-            data-item-index="12"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Project X"
-              aria-posinset="13"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="12"
+              data-item-index="12"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Project X"
+                aria-posinset="13"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Project X avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  PR
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Project X avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Project X"
-                    >
-                      Project X
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Project X"
-                    >
-                      Last message in Project X
-                    </div>
+                    PR
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_5b_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_59_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Project X"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Project X
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_5i_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_5g_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Project X"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Project X
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_5b_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_59_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_5i_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_5g_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="13"
-            data-item-index="13"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Project Y"
-              aria-posinset="14"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="13"
+              data-item-index="13"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Project Y"
+                aria-posinset="14"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Project Y avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  PR
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Project Y avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    PR
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Project Y"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Project Y
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Project Y"
+                      >
+                        Project Y
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_5p_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_5n_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_5p_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_5n_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_60_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_5u_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_60_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_5u_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="14"
-            data-item-index="14"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Water Cooler"
-              aria-posinset="15"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="14"
+              data-item-index="14"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Water Cooler"
+                aria-posinset="15"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Water Cooler avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  WA
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Water Cooler avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Water Cooler"
-                    >
-                      Water Cooler
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Water Cooler"
-                    >
-                      Last message in Water Cooler
-                    </div>
+                    WA
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_67_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_65_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Water Cooler"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Water Cooler
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_6e_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_6c_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Water Cooler"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Water Cooler
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_67_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_65_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_6e_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_6c_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="15"
-            data-item-index="15"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Feedback with 15 unread mentions."
-              aria-posinset="16"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="15"
+              data-item-index="15"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Feedback with 15 unread mentions."
+                aria-posinset="16"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Feedback avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  FE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Feedback avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Feedback"
-                    >
-                      Feedback
-                    </div>
+                    FE
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_6l_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_6j_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Feedback"
+                      >
+                        Feedback
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_6l_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_6j_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_6s_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_6q_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
                       >
                         <svg
-                          fill="currentColor"
-                          height="1em"
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
                           viewBox="0 0 24 24"
-                          width="1em"
+                          width="20px"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                           />
                         </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_6s_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_6q_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <span
+                          class="_unread-counter_1147r_8"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                          15
+                        </span>
                       </div>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  >
-                    <div
-                      class="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;"
-                    >
-                      <svg
-                        fill="var(--cpd-color-icon-accent-primary)"
-                        height="20px"
-                        viewBox="0 0 24 24"
-                        width="20px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                        />
-                      </svg>
-                      <span
-                        class="_unread-counter_1147r_8"
-                      >
-                        15
-                      </span>
                     </div>
                   </div>
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="16"
-            data-item-index="16"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Ideas"
-              aria-posinset="17"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="16"
+              data-item-index="16"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Ideas"
+                aria-posinset="17"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Ideas avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  ID
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Ideas avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Ideas"
-                    >
-                      Ideas
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Ideas"
-                    >
-                      Last message in Ideas
-                    </div>
+                    ID
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_73_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_71_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Ideas"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Ideas
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_7a_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_78_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Ideas"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Ideas
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_73_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_71_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_7a_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_78_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="17"
-            data-item-index="17"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Bugs"
-              aria-posinset="18"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="17"
+              data-item-index="17"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Bugs"
+                aria-posinset="18"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Bugs avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  BU
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Bugs avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    BU
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Bugs"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Bugs
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Bugs"
+                      >
+                        Bugs
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_7h_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_7f_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_7h_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_7f_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_7o_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_7m_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_7o_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_7m_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="18"
-            data-item-index="18"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Features"
-              aria-posinset="19"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="18"
+              data-item-index="18"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Features"
+                aria-posinset="19"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Features avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  FE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Features avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Features"
-                    >
-                      Features
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Features"
-                    >
-                      Last message in Features
-                    </div>
+                    FE
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_7v_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_7t_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Features"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Features
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_86_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_84_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Features"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Features
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_7v_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_7t_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_86_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_84_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="19"
-            data-item-index="19"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Releases"
-              aria-posinset="20"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="19"
+              data-item-index="19"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Releases"
+                aria-posinset="20"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Releases avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  RE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Releases avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    RE
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Releases"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Releases
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Releases"
+                      >
+                        Releases
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_8d_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_8b_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_8d_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_8b_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_8k_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_8i_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_8k_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_8i_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -2677,13 +2683,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,66 +2734,71 @@ exports[`<RoomListView /> > renders Empty story 1`] = `
       </div>
     </div>
     <div
-      class="flex 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;"
+      class="Flex-module_flex RoomListView-module_list"
+      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"
-      >
-        No chats yet
-      </span>
-      <span
-        class="description"
-      >
-        Get started by messaging someone or by creating a room
-      </span>
       <div
-        class="flex 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;"
+        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;"
       >
-        <button
-          class="_button_13vu4_8 _has-icon_13vu4_60"
-          data-kind="secondary"
-          data-size="sm"
-          role="button"
-          tabindex="0"
+        <span
+          class="RoomListEmptyStateView-module_title"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="20"
-            viewBox="0 0 24 24"
-            width="20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
-            />
-          </svg>
-          Start chat
-        </button>
-        <button
-          class="_button_13vu4_8 _has-icon_13vu4_60"
-          data-kind="secondary"
-          data-size="sm"
-          role="button"
-          tabindex="0"
+          No chats yet
+        </span>
+        <span
+          class="RoomListEmptyStateView-module_description"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="20"
-            viewBox="0 0 24 24"
-            width="20"
-            xmlns="http://www.w3.org/2000/svg"
+          Get started by messaging someone or by creating a room
+        </span>
+        <div
+          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
+            class="_button_13vu4_8 _has-icon_13vu4_60"
+            data-kind="secondary"
+            data-size="sm"
+            role="button"
+            tabindex="0"
           >
-            <path
-              d="m8.566 17-.944 4.094q-.086.406-.372.656t-.687.25q-.543 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.801-3.5H3.158q-.572 0-.916-.484a1.27 1.27 0 0 1-.2-1.078 1.12 1.12 0 0 1 1.116-.938H6.85l1.145-5h-3.12q-.57 0-.915-.484a1.27 1.27 0 0 1-.2-1.078A1.12 1.12 0 0 1 4.875 7h3.691l.945-4.094q.085-.406.372-.656.286-.25.686-.25.544 0 .887.469.345.468.2 1.031l-.8 3.5h4.578l.944-4.094q.085-.406.372-.656.286-.25.687-.25.543 0 .887.469t.2 1.031L17.723 7h3.119q.573 0 .916.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937H17.15l-1.145 5h3.12q.57 0 .915.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937h-3.691l-.944 4.094q-.087.406-.373.656t-.686.25q-.544 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.8-3.5zm.573-2.5h4.578l1.144-5h-4.578z"
-            />
-          </svg>
-          New room
-        </button>
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="20"
+              viewBox="0 0 24 24"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
+              />
+            </svg>
+            Start chat
+          </button>
+          <button
+            class="_button_13vu4_8 _has-icon_13vu4_60"
+            data-kind="secondary"
+            data-size="sm"
+            role="button"
+            tabindex="0"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="20"
+              viewBox="0 0 24 24"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m8.566 17-.944 4.094q-.086.406-.372.656t-.687.25q-.543 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.801-3.5H3.158q-.572 0-.916-.484a1.27 1.27 0 0 1-.2-1.078 1.12 1.12 0 0 1 1.116-.938H6.85l1.145-5h-3.12q-.57 0-.915-.484a1.27 1.27 0 0 1-.2-1.078A1.12 1.12 0 0 1 4.875 7h3.691l.945-4.094q.085-.406.372-.656.286-.25.686-.25.544 0 .887.469.345.468.2 1.031l-.8 3.5h4.578l.944-4.094q.085-.406.372-.656.286-.25.687-.25.543 0 .887.469t.2 1.031L17.723 7h3.119q.573 0 .916.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937H17.15l-1.145 5h3.12q.57 0 .915.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937h-3.691l-.944 4.094q-.087.406-.373.656t-.686.25q-.544 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.8-3.5zm.573-2.5h4.578l1.144-5h-4.578z"
+              />
+            </svg>
+            New room
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -2801,13 +2812,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,20 +2845,25 @@ exports[`<RoomListView /> > renders EmptyFavouriteFilter story 1`] = `
       </div>
     </div>
     <div
-      class="flex 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;"
+      class="Flex-module_flex RoomListView-module_list"
+      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"
+      <div
+        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;"
       >
-        You don't have favourite chats yet
-      </span>
-      <span
-        class="description"
-      >
-        You can add a chat to your favourites in the chat settings
-      </span>
+        <span
+          class="RoomListEmptyStateView-module_title"
+        >
+          You don't have favourite chats yet
+        </span>
+        <span
+          class="RoomListEmptyStateView-module_description"
+        >
+          You can add a chat to your favourites in the chat settings
+        </span>
+      </div>
     </div>
   </div>
 </div>
@@ -2860,13 +2876,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,24 +2909,29 @@ exports[`<RoomListView /> > renders EmptyInvitesFilter story 1`] = `
       </div>
     </div>
     <div
-      class="flex 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;"
+      class="Flex-module_flex RoomListView-module_list"
+      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"
+      <div
+        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;"
       >
-        You don't have any unread invites
-      </span>
-      <button
-        class="_button_13vu4_8"
-        data-kind="tertiary"
-        data-size="lg"
-        role="button"
-        tabindex="0"
-      >
-        See all activity
-      </button>
+        <span
+          class="RoomListEmptyStateView-module_title"
+        >
+          You don't have any unread invites
+        </span>
+        <button
+          class="_button_13vu4_8"
+          data-kind="tertiary"
+          data-size="lg"
+          role="button"
+          tabindex="0"
+        >
+          See all activity
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -2923,13 +2944,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,24 +2977,29 @@ exports[`<RoomListView /> > renders EmptyLowPriorityFilter story 1`] = `
       </div>
     </div>
     <div
-      class="flex 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;"
+      class="Flex-module_flex RoomListView-module_list"
+      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"
+      <div
+        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;"
       >
-        You don't have any low priority rooms
-      </span>
-      <button
-        class="_button_13vu4_8"
-        data-kind="tertiary"
-        data-size="lg"
-        role="button"
-        tabindex="0"
-      >
-        See all activity
-      </button>
+        <span
+          class="RoomListEmptyStateView-module_title"
+        >
+          You don't have any low priority rooms
+        </span>
+        <button
+          class="_button_13vu4_8"
+          data-kind="tertiary"
+          data-size="lg"
+          role="button"
+          tabindex="0"
+        >
+          See all activity
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -2986,13 +3012,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,24 +3045,29 @@ exports[`<RoomListView /> > renders EmptyMentionsFilter story 1`] = `
       </div>
     </div>
     <div
-      class="flex 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;"
+      class="Flex-module_flex RoomListView-module_list"
+      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"
+      <div
+        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;"
       >
-        You don't have any unread mentions
-      </span>
-      <button
-        class="_button_13vu4_8"
-        data-kind="tertiary"
-        data-size="lg"
-        role="button"
-        tabindex="0"
-      >
-        See all activity
-      </button>
+        <span
+          class="RoomListEmptyStateView-module_title"
+        >
+          You don't have any unread mentions
+        </span>
+        <button
+          class="_button_13vu4_8"
+          data-kind="tertiary"
+          data-size="lg"
+          role="button"
+          tabindex="0"
+        >
+          See all activity
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -3049,13 +3080,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,20 +3113,25 @@ exports[`<RoomListView /> > renders EmptyPeopleFilter story 1`] = `
       </div>
     </div>
     <div
-      class="flex 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;"
+      class="Flex-module_flex RoomListView-module_list"
+      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"
+      <div
+        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;"
       >
-        You don’t have direct chats with anyone yet
-      </span>
-      <span
-        class="description"
-      >
-        You can deselect filters in order to see your other chats
-      </span>
+        <span
+          class="RoomListEmptyStateView-module_title"
+        >
+          You don’t have direct chats with anyone yet
+        </span>
+        <span
+          class="RoomListEmptyStateView-module_description"
+        >
+          You can deselect filters in order to see your other chats
+        </span>
+      </div>
     </div>
   </div>
 </div>
@@ -3108,13 +3144,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,20 +3177,25 @@ exports[`<RoomListView /> > renders EmptyRoomsFilter story 1`] = `
       </div>
     </div>
     <div
-      class="flex 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;"
+      class="Flex-module_flex RoomListView-module_list"
+      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"
+      <div
+        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;"
       >
-        You’re not in any room yet
-      </span>
-      <span
-        class="description"
-      >
-        You can deselect filters in order to see your other chats
-      </span>
+        <span
+          class="RoomListEmptyStateView-module_title"
+        >
+          You’re not in any room yet
+        </span>
+        <span
+          class="RoomListEmptyStateView-module_description"
+        >
+          You can deselect filters in order to see your other chats
+        </span>
+      </div>
     </div>
   </div>
 </div>
@@ -3167,13 +3208,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,24 +3241,29 @@ exports[`<RoomListView /> > renders EmptyUnreadFilter story 1`] = `
       </div>
     </div>
     <div
-      class="flex 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;"
+      class="Flex-module_flex RoomListView-module_list"
+      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"
+      <div
+        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;"
       >
-        Congrats! You don’t have any unread messages
-      </span>
-      <button
-        class="_button_13vu4_8"
-        data-kind="tertiary"
-        data-size="lg"
-        role="button"
-        tabindex="0"
-      >
-        Show all chats
-      </button>
+        <span
+          class="RoomListEmptyStateView-module_title"
+        >
+          Congrats! You don’t have any unread messages
+        </span>
+        <button
+          class="_button_13vu4_8"
+          data-kind="tertiary"
+          data-size="lg"
+          role="button"
+          tabindex="0"
+        >
+          Show all chats
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -3230,13 +3276,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,45 +3327,50 @@ exports[`<RoomListView /> > renders EmptyWithoutCreatePermission story 1`] = `
       </div>
     </div>
     <div
-      class="flex 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;"
+      class="Flex-module_flex RoomListView-module_list"
+      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"
-      >
-        No chats yet
-      </span>
-      <span
-        class="description"
-      >
-        Get started by messaging someone
-      </span>
       <div
-        class="flex 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;"
+        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;"
       >
-        <button
-          class="_button_13vu4_8 _has-icon_13vu4_60"
-          data-kind="secondary"
-          data-size="sm"
-          role="button"
-          tabindex="0"
+        <span
+          class="RoomListEmptyStateView-module_title"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="20"
-            viewBox="0 0 24 24"
-            width="20"
-            xmlns="http://www.w3.org/2000/svg"
+          No chats yet
+        </span>
+        <span
+          class="RoomListEmptyStateView-module_description"
+        >
+          Get started by messaging someone
+        </span>
+        <div
+          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
+            class="_button_13vu4_8 _has-icon_13vu4_60"
+            data-kind="secondary"
+            data-size="sm"
+            role="button"
+            tabindex="0"
           >
-            <path
-              d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
-            />
-          </svg>
-          Start chat
-        </button>
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="20"
+              viewBox="0 0 24 24"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
+              />
+            </svg>
+            Start chat
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -3333,13 +3384,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;"
@@ -3384,4830 +3435,4836 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
       </div>
     </div>
     <div
-      aria-label="Room list"
-      data-testid="room-list"
-      data-virtuoso-scroller="true"
-      role="listbox"
-      style="height: 100%; outline: none; overflow-y: auto; position: relative;"
-      tabindex="0"
+      class="Flex-module_flex RoomListView-module_list"
+      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;"
     >
       <div
-        data-viewport-type="element"
-        style="height: 100%; position: absolute; top: 0px; width: 100%;"
+        aria-label="Room list"
+        class="VirtualizedRoomListView-module_roomList"
+        data-testid="room-list"
+        data-virtuoso-scroller="true"
+        role="listbox"
+        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+        tabindex="0"
       >
         <div
-          data-testid="virtuoso-item-list"
-          style="box-sizing: border-box; margin-top: 0px; padding-bottom: 3276px; padding-top: 0px;"
+          data-viewport-type="element"
+          style="height: 100%; position: absolute; top: 0px; width: 100%;"
         >
           <div
-            data-index="0"
-            data-item-index="0"
-            data-known-size="52"
-            style="overflow-anchor: none;"
+            data-testid="virtuoso-item-list"
+            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 3276px; padding-top: 0px;"
           >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room General"
-              aria-posinset="1"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView bold 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;"
-              tabindex="-1"
-              type="button"
+            <div
+              data-index="0"
+              data-item-index="0"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room General"
+                aria-posinset="1"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="General avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  GE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="General avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="General"
-                    >
-                      General
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in General"
-                    >
-                      Last message in General
-                    </div>
+                    GE
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_l9_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_l7_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="General"
+                      >
+                        General
+                      </div>
+                      <div
+                        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-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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_l9_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_l7_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_lg_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_le_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
                       >
                         <svg
-                          fill="currentColor"
-                          height="1em"
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
                           viewBox="0 0 24 24"
-                          width="1em"
+                          width="20px"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                           />
                         </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_lg_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_le_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  >
-                    <div
-                      class="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;"
-                    >
-                      <svg
-                        fill="var(--cpd-color-icon-accent-primary)"
-                        height="20px"
-                        viewBox="0 0 24 24"
-                        width="20px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                        <div
+                          class="_unread-counter_1147r_8"
                         />
-                      </svg>
-                      <div
-                        class="_unread-counter_1147r_8"
-                      />
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="1"
-            data-item-index="1"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Random"
-              aria-posinset="2"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="1"
+              data-item-index="1"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Random"
+                aria-posinset="2"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Random avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  RA
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Random avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    RA
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Random"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Random
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Random"
+                      >
+                        Random
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_ln_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_ll_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_ln_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_ll_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_lu_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_ls_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_lu_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_ls_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="2"
-            data-item-index="2"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Engineering"
-              aria-posinset="3"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="2"
+              data-item-index="2"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Engineering"
+                aria-posinset="3"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Engineering avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  EN
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Engineering avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Engineering"
-                    >
-                      Engineering
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Engineering"
-                    >
-                      Last message in Engineering
-                    </div>
+                    EN
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_m5_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_m3_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Engineering"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Engineering
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_mc_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_ma_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Engineering"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Engineering
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_m5_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_m3_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_mc_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_ma_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="3"
-            data-item-index="3"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Design"
-              aria-posinset="4"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="3"
+              data-item-index="3"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Design"
+                aria-posinset="4"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Design avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  DE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Design avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    DE
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Design"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Design
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Design"
+                      >
+                        Design
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_mj_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_mh_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_mj_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_mh_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_mq_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_mo_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_mq_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_mo_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="4"
-            data-item-index="4"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Product"
-              aria-posinset="5"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="4"
+              data-item-index="4"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Product"
+                aria-posinset="5"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Product avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  PR
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Product avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Product"
-                    >
-                      Product
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Product"
-                    >
-                      Last message in Product
-                    </div>
+                    PR
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_n1_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_mv_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Product"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Product
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_n8_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_n6_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Product"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Product
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_n1_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_mv_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_n8_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_n6_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="5"
-            data-item-index="5"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Marketing with 5 unread mentions."
-              aria-posinset="6"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="5"
+              data-item-index="5"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Marketing with 5 unread mentions."
+                aria-posinset="6"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Marketing avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  MA
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Marketing avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Marketing"
-                    >
-                      Marketing
-                    </div>
+                    MA
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_nf_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_nd_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Marketing"
+                      >
+                        Marketing
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_nf_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_nd_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_nm_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_nk_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
                       >
                         <svg
-                          fill="currentColor"
-                          height="1em"
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
                           viewBox="0 0 24 24"
-                          width="1em"
+                          width="20px"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                           />
                         </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_nm_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_nk_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <span
+                          class="_unread-counter_1147r_8"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                          5
+                        </span>
                       </div>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  >
-                    <div
-                      class="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;"
-                    >
-                      <svg
-                        fill="var(--cpd-color-icon-accent-primary)"
-                        height="20px"
-                        viewBox="0 0 24 24"
-                        width="20px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                        />
-                      </svg>
-                      <span
-                        class="_unread-counter_1147r_8"
-                      >
-                        5
-                      </span>
                     </div>
                   </div>
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="6"
-            data-item-index="6"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Sales"
-              aria-posinset="7"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="6"
+              data-item-index="6"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Sales"
+                aria-posinset="7"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Sales avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  SA
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Sales avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Sales"
-                    >
-                      Sales
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Sales"
-                    >
-                      Last message in Sales
-                    </div>
+                    SA
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_nt_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_nr_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Sales"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Sales
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_o4_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_o2_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Sales"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Sales
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_nt_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_nr_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_o4_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_o2_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="7"
-            data-item-index="7"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Support"
-              aria-posinset="8"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="7"
+              data-item-index="7"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Support"
+                aria-posinset="8"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Support avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  SU
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Support avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    SU
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Support"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Support
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Support"
+                      >
+                        Support
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_ob_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_o9_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_ob_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_o9_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_oi_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_og_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_oi_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_og_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="8"
-            data-item-index="8"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Announcements"
-              aria-posinset="9"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="8"
+              data-item-index="8"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Announcements"
+                aria-posinset="9"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Announcements avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  AN
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Announcements avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Announcements"
-                    >
-                      Announcements
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Announcements"
-                    >
-                      Last message in Announcements
-                    </div>
+                    AN
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_op_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_on_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Announcements"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Announcements
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_p0_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_ou_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Announcements"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Announcements
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_op_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_on_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_p0_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_ou_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="9"
-            data-item-index="9"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Off-topic"
-              aria-posinset="10"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="9"
+              data-item-index="9"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Off-topic"
+                aria-posinset="10"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Off-topic avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  OF
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Off-topic avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    OF
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Off-topic"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Off-topic
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Off-topic"
+                      >
+                        Off-topic
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_p7_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_p5_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_p7_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_p5_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_pe_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_pc_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_pe_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_pc_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="10"
-            data-item-index="10"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Team Alpha with 10 unread mentions."
-              aria-posinset="11"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="10"
+              data-item-index="10"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Team Alpha with 10 unread mentions."
+                aria-posinset="11"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Team Alpha avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  TE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Team Alpha avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Team Alpha"
-                    >
-                      Team Alpha
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Team Alpha"
-                    >
-                      Last message in Team Alpha
-                    </div>
+                    TE
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_pl_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_pj_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        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 RoomListItemView-module_ellipsis"
+                        title="Last message in Team Alpha"
+                      >
+                        Last message in Team Alpha
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_pl_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_pj_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_ps_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_pq_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
                       >
                         <svg
-                          fill="currentColor"
-                          height="1em"
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
                           viewBox="0 0 24 24"
-                          width="1em"
+                          width="20px"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                           />
                         </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_ps_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_pq_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <span
+                          class="_unread-counter_1147r_8"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                          10
+                        </span>
                       </div>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  >
-                    <div
-                      class="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;"
-                    >
-                      <svg
-                        fill="var(--cpd-color-icon-accent-primary)"
-                        height="20px"
-                        viewBox="0 0 24 24"
-                        width="20px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                        />
-                      </svg>
-                      <span
-                        class="_unread-counter_1147r_8"
-                      >
-                        10
-                      </span>
                     </div>
                   </div>
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="11"
-            data-item-index="11"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Team Beta"
-              aria-posinset="12"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="11"
+              data-item-index="11"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Team Beta"
+                aria-posinset="12"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Team Beta avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  TE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Team Beta avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    TE
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Team Beta"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Team Beta
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Team Beta"
+                      >
+                        Team Beta
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_q3_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_q1_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_q3_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_q1_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_qa_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_q8_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_qa_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_q8_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="12"
-            data-item-index="12"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Project X"
-              aria-posinset="13"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="12"
+              data-item-index="12"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Project X"
+                aria-posinset="13"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Project X avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  PR
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Project X avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Project X"
-                    >
-                      Project X
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Project X"
-                    >
-                      Last message in Project X
-                    </div>
+                    PR
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_qh_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_qf_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Project X"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Project X
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_qo_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_qm_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Project X"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Project X
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_qh_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_qf_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_qo_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_qm_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="13"
-            data-item-index="13"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Project Y"
-              aria-posinset="14"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="13"
+              data-item-index="13"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Project Y"
+                aria-posinset="14"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Project Y avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  PR
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Project Y avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    PR
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Project Y"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Project Y
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Project Y"
+                      >
+                        Project Y
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_qv_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_qt_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_qv_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_qt_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_r6_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_r4_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_r6_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_r4_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="14"
-            data-item-index="14"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Water Cooler"
-              aria-posinset="15"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="14"
+              data-item-index="14"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Water Cooler"
+                aria-posinset="15"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Water Cooler avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  WA
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Water Cooler avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Water Cooler"
-                    >
-                      Water Cooler
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Water Cooler"
-                    >
-                      Last message in Water Cooler
-                    </div>
+                    WA
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_rd_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_rb_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Water Cooler"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Water Cooler
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_rk_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_ri_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Water Cooler"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Water Cooler
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_rd_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_rb_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_rk_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_ri_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="15"
-            data-item-index="15"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Feedback with 15 unread mentions."
-              aria-posinset="16"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="15"
+              data-item-index="15"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Feedback with 15 unread mentions."
+                aria-posinset="16"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Feedback avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  FE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Feedback avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Feedback"
-                    >
-                      Feedback
-                    </div>
+                    FE
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_rr_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_rp_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Feedback"
+                      >
+                        Feedback
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_rr_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_rp_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_s2_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_s0_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
                       >
                         <svg
-                          fill="currentColor"
-                          height="1em"
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
                           viewBox="0 0 24 24"
-                          width="1em"
+                          width="20px"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                           />
                         </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_s2_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_s0_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <span
+                          class="_unread-counter_1147r_8"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                          15
+                        </span>
                       </div>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  >
-                    <div
-                      class="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;"
-                    >
-                      <svg
-                        fill="var(--cpd-color-icon-accent-primary)"
-                        height="20px"
-                        viewBox="0 0 24 24"
-                        width="20px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                        />
-                      </svg>
-                      <span
-                        class="_unread-counter_1147r_8"
-                      >
-                        15
-                      </span>
                     </div>
                   </div>
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="16"
-            data-item-index="16"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Ideas"
-              aria-posinset="17"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="16"
+              data-item-index="16"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Ideas"
+                aria-posinset="17"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Ideas avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  ID
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Ideas avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Ideas"
-                    >
-                      Ideas
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Ideas"
-                    >
-                      Last message in Ideas
-                    </div>
+                    ID
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_s9_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_s7_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Ideas"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Ideas
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_sg_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_se_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Ideas"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Ideas
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_s9_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_s7_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_sg_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_se_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="17"
-            data-item-index="17"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Bugs"
-              aria-posinset="18"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="17"
+              data-item-index="17"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Bugs"
+                aria-posinset="18"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Bugs avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  BU
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Bugs avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    BU
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Bugs"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Bugs
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Bugs"
+                      >
+                        Bugs
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_sn_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_sl_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_sn_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_sl_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_su_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_ss_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_su_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_ss_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="18"
-            data-item-index="18"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Features"
-              aria-posinset="19"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="18"
+              data-item-index="18"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Features"
+                aria-posinset="19"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Features avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  FE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Features avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Features"
-                    >
-                      Features
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Features"
-                    >
-                      Last message in Features
-                    </div>
+                    FE
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_t5_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_t3_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Features"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Features
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_tc_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_ta_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Features"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Features
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_t5_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_t3_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_tc_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_ta_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="19"
-            data-item-index="19"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Releases"
-              aria-posinset="20"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="19"
+              data-item-index="19"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Releases"
+                aria-posinset="20"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Releases avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  RE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Releases avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    RE
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Releases"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Releases
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Releases"
+                      >
+                        Releases
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_tj_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_th_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_tj_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_th_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_tq_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_to_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_tq_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_to_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="20"
-            data-item-index="20"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room General with 20 unread mentions."
-              aria-posinset="21"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="20"
+              data-item-index="20"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room General with 20 unread mentions."
+                aria-posinset="21"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="General avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  GE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="General avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="General"
-                    >
-                      General
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in General"
-                    >
-                      Last message in General
-                    </div>
+                    GE
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_u1_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_tv_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="General"
+                      >
+                        General
+                      </div>
+                      <div
+                        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-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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_u1_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_tv_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_u8_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_u6_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
                       >
                         <svg
-                          fill="currentColor"
-                          height="1em"
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
                           viewBox="0 0 24 24"
-                          width="1em"
+                          width="20px"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                           />
                         </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_u8_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_u6_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <span
+                          class="_unread-counter_1147r_8"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                          20
+                        </span>
                       </div>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  >
-                    <div
-                      class="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;"
-                    >
-                      <svg
-                        fill="var(--cpd-color-icon-accent-primary)"
-                        height="20px"
-                        viewBox="0 0 24 24"
-                        width="20px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                        />
-                      </svg>
-                      <span
-                        class="_unread-counter_1147r_8"
-                      >
-                        20
-                      </span>
                     </div>
                   </div>
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="21"
-            data-item-index="21"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Random"
-              aria-posinset="22"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="21"
+              data-item-index="21"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Random"
+                aria-posinset="22"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Random avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  RA
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Random avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    RA
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Random"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Random
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Random"
+                      >
+                        Random
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_uf_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_ud_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_uf_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_ud_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_um_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_uk_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_um_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_uk_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="22"
-            data-item-index="22"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Engineering"
-              aria-posinset="23"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="22"
+              data-item-index="22"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Engineering"
+                aria-posinset="23"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Engineering avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  EN
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Engineering avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Engineering"
-                    >
-                      Engineering
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Engineering"
-                    >
-                      Last message in Engineering
-                    </div>
+                    EN
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_ut_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_ur_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Engineering"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Engineering
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_v4_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_v2_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Engineering"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Engineering
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_ut_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_ur_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_v4_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_v2_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="23"
-            data-item-index="23"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Design"
-              aria-posinset="24"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="23"
+              data-item-index="23"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Design"
+                aria-posinset="24"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Design avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  DE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Design avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    DE
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Design"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Design
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Design"
+                      >
+                        Design
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_vb_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_v9_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_vb_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_v9_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_vi_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_vg_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_vi_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_vg_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="24"
-            data-item-index="24"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Product"
-              aria-posinset="25"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="24"
+              data-item-index="24"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Product"
+                aria-posinset="25"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Product avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  PR
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Product avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Product"
-                    >
-                      Product
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Product"
-                    >
-                      Last message in Product
-                    </div>
+                    PR
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_vp_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_vn_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Product"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Product
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_100_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_vu_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Product"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Product
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_vp_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_vn_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_100_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_vu_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="25"
-            data-item-index="25"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Marketing with 25 unread mentions."
-              aria-posinset="26"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="25"
+              data-item-index="25"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Marketing with 25 unread mentions."
+                aria-posinset="26"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Marketing avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  MA
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Marketing avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Marketing"
-                    >
-                      Marketing
-                    </div>
+                    MA
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_107_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_105_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Marketing"
+                      >
+                        Marketing
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_107_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_105_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_10e_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_10c_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
                       >
                         <svg
-                          fill="currentColor"
-                          height="1em"
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
                           viewBox="0 0 24 24"
-                          width="1em"
+                          width="20px"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                           />
                         </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_10e_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_10c_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <span
+                          class="_unread-counter_1147r_8"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                          25
+                        </span>
                       </div>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  >
-                    <div
-                      class="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;"
-                    >
-                      <svg
-                        fill="var(--cpd-color-icon-accent-primary)"
-                        height="20px"
-                        viewBox="0 0 24 24"
-                        width="20px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                        />
-                      </svg>
-                      <span
-                        class="_unread-counter_1147r_8"
-                      >
-                        25
-                      </span>
                     </div>
                   </div>
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="26"
-            data-item-index="26"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Sales"
-              aria-posinset="27"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="26"
+              data-item-index="26"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Sales"
+                aria-posinset="27"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Sales avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  SA
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Sales avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Sales"
-                    >
-                      Sales
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Sales"
-                    >
-                      Last message in Sales
-                    </div>
+                    SA
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_10l_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_10j_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Sales"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Sales
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_10s_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_10q_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Sales"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Sales
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_10l_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_10j_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_10s_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_10q_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="27"
-            data-item-index="27"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Support"
-              aria-posinset="28"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="27"
+              data-item-index="27"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Support"
+                aria-posinset="28"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Support avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  SU
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Support avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    SU
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Support"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Support
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Support"
+                      >
+                        Support
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_113_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_111_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_113_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_111_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_11a_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_118_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_11a_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_118_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="28"
-            data-item-index="28"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Announcements"
-              aria-posinset="29"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="28"
+              data-item-index="28"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Announcements"
+                aria-posinset="29"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Announcements avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  AN
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Announcements avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Announcements"
-                    >
-                      Announcements
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Announcements"
-                    >
-                      Last message in Announcements
-                    </div>
+                    AN
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_11h_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_11f_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Announcements"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Announcements
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_11o_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_11m_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Announcements"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Announcements
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_11h_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_11f_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_11o_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_11m_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="29"
-            data-item-index="29"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Off-topic"
-              aria-posinset="30"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="29"
+              data-item-index="29"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Off-topic"
+                aria-posinset="30"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Off-topic avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  OF
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Off-topic avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    OF
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Off-topic"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Off-topic
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Off-topic"
+                      >
+                        Off-topic
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_11v_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_11t_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_11v_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_11t_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_126_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_124_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_126_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_124_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="30"
-            data-item-index="30"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Team Alpha with 30 unread mentions."
-              aria-posinset="31"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="30"
+              data-item-index="30"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Team Alpha with 30 unread mentions."
+                aria-posinset="31"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Team Alpha avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  TE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Team Alpha avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Team Alpha"
-                    >
-                      Team Alpha
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Team Alpha"
-                    >
-                      Last message in Team Alpha
-                    </div>
+                    TE
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_12d_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_12b_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        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 RoomListItemView-module_ellipsis"
+                        title="Last message in Team Alpha"
+                      >
+                        Last message in Team Alpha
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_12d_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_12b_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_12k_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_12i_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
                       >
                         <svg
-                          fill="currentColor"
-                          height="1em"
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
                           viewBox="0 0 24 24"
-                          width="1em"
+                          width="20px"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                           />
                         </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_12k_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_12i_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <span
+                          class="_unread-counter_1147r_8"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                          30
+                        </span>
                       </div>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  >
-                    <div
-                      class="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;"
-                    >
-                      <svg
-                        fill="var(--cpd-color-icon-accent-primary)"
-                        height="20px"
-                        viewBox="0 0 24 24"
-                        width="20px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                        />
-                      </svg>
-                      <span
-                        class="_unread-counter_1147r_8"
-                      >
-                        30
-                      </span>
                     </div>
                   </div>
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="31"
-            data-item-index="31"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Team Beta"
-              aria-posinset="32"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="31"
+              data-item-index="31"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Team Beta"
+                aria-posinset="32"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Team Beta avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  TE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Team Beta avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    TE
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Team Beta"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Team Beta
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Team Beta"
+                      >
+                        Team Beta
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_12r_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_12p_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_12r_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_12p_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_132_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_130_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_132_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_130_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="32"
-            data-item-index="32"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Project X"
-              aria-posinset="33"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="32"
+              data-item-index="32"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Project X"
+                aria-posinset="33"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Project X avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  PR
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Project X avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Project X"
-                    >
-                      Project X
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Project X"
-                    >
-                      Last message in Project X
-                    </div>
+                    PR
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_139_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_137_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Project X"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Project X
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_13g_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_13e_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Project X"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Project X
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_139_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_137_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_13g_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_13e_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="33"
-            data-item-index="33"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Project Y"
-              aria-posinset="34"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="33"
+              data-item-index="33"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Project Y"
+                aria-posinset="34"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Project Y avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  PR
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Project Y avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    PR
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Project Y"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Project Y
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Project Y"
+                      >
+                        Project Y
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_13n_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_13l_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_13n_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_13l_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_13u_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_13s_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_13u_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_13s_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="34"
-            data-item-index="34"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Water Cooler"
-              aria-posinset="35"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="34"
+              data-item-index="34"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Water Cooler"
+                aria-posinset="35"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Water Cooler avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  WA
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Water Cooler avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Water Cooler"
-                    >
-                      Water Cooler
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Water Cooler"
-                    >
-                      Last message in Water Cooler
-                    </div>
+                    WA
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_145_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_143_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Water Cooler"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Water Cooler
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_14c_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_14a_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Water Cooler"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Water Cooler
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_145_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_143_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_14c_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_14a_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="35"
-            data-item-index="35"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Feedback with 35 unread mentions."
-              aria-posinset="36"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="35"
+              data-item-index="35"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Feedback with 35 unread mentions."
+                aria-posinset="36"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Feedback avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  FE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Feedback avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Feedback"
-                    >
-                      Feedback
-                    </div>
+                    FE
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_14j_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_14h_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Feedback"
+                      >
+                        Feedback
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_14j_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_14h_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_14q_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_14o_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
                       >
                         <svg
-                          fill="currentColor"
-                          height="1em"
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
                           viewBox="0 0 24 24"
-                          width="1em"
+                          width="20px"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                           />
                         </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_14q_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_14o_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <span
+                          class="_unread-counter_1147r_8"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                          35
+                        </span>
                       </div>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  >
-                    <div
-                      class="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;"
-                    >
-                      <svg
-                        fill="var(--cpd-color-icon-accent-primary)"
-                        height="20px"
-                        viewBox="0 0 24 24"
-                        width="20px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                        />
-                      </svg>
-                      <span
-                        class="_unread-counter_1147r_8"
-                      >
-                        35
-                      </span>
                     </div>
                   </div>
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="36"
-            data-item-index="36"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Ideas"
-              aria-posinset="37"
-              aria-selected="false"
-              aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="36"
+              data-item-index="36"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Ideas"
+                aria-posinset="37"
+                aria-selected="false"
+                aria-setsize="100"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Ideas avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  ID
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Ideas avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Ideas"
-                    >
-                      Ideas
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Ideas"
-                    >
-                      Last message in Ideas
-                    </div>
+                    ID
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_151_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_14v_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Ideas"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Ideas
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_158_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_156_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Ideas"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Ideas
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_151_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_14v_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_158_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_156_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -8223,13 +8280,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;"
@@ -8274,4824 +8331,4830 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
       </div>
     </div>
     <div
-      aria-label="Room list"
-      aria-rowcount="103"
-      data-testid="room-list"
-      data-virtuoso-scroller="true"
-      role="treegrid"
-      style="height: 100%; outline: none; overflow-y: auto; position: relative;"
-      tabindex="0"
+      class="Flex-module_flex RoomListView-module_list"
+      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;"
     >
       <div
-        data-viewport-type="element"
-        style="height: 100%; position: absolute; top: 0px; width: 100%;"
+        aria-label="Room list"
+        aria-rowcount="103"
+        class="VirtualizedRoomListView-module_roomList"
+        data-testid="room-list"
+        data-virtuoso-scroller="true"
+        role="treegrid"
+        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+        tabindex="0"
       >
         <div
-          data-testid="virtuoso-item-list"
-          style="box-sizing: border-box; margin-top: 0px; padding-bottom: 3432px; padding-top: 0px;"
+          data-viewport-type="element"
+          style="height: 100%; position: absolute; top: 0px; width: 100%;"
         >
           <div
-            data-index="0"
-            data-item-index="0"
-            data-known-size="52"
-            style="overflow-anchor: none;"
+            data-testid="virtuoso-item-list"
+            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 3432px; padding-top: 0px;"
           >
             <div
-              aria-expanded="true"
-              aria-level="1"
-              aria-posinset="1"
-              aria-rowindex="1"
-              aria-setsize="23"
-              role="row"
+              data-index="0"
+              data-item-index="0"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
+              <div
                 aria-expanded="true"
-                aria-label="Toggle Favourites section"
-                class="header firstHeader"
-                role="gridcell"
-                tabindex="-1"
-                type="button"
+                aria-level="1"
+                aria-posinset="1"
+                aria-rowindex="1"
+                aria-setsize="23"
+                role="row"
               >
-                <div
-                  class="flex 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
-                    fill="var(--cpd-color-icon-secondary)"
-                    height="24px"
-                    viewBox="0 0 24 24"
-                    width="24px"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
-                    />
-                  </svg>
-                  <span
-                    class="title"
-                  >
-                    Favourites
-                  </span>
-                </div>
-              </button>
-            </div>
-          </div>
-          <div
-            data-index="1"
-            data-item-index="1"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <div
-              aria-level="2"
-              aria-posinset="1"
-              aria-rowindex="1"
-              role="row"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room General"
-                aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView 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;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-expanded="true"
+                  aria-label="Toggle Favourites section"
+                  class="RoomListSectionHeaderView-module_header RoomListSectionHeaderView-module_firstHeader"
+                  role="gridcell"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="General avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    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;"
                   >
-                    GE
+                    <svg
+                      fill="var(--cpd-color-icon-secondary)"
+                      height="24px"
+                      viewBox="0 0 24 24"
+                      width="24px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+                      />
+                    </svg>
+                    <span
+                      class="RoomListSectionHeaderView-module_title"
+                    >
+                      Favourites
+                    </span>
                   </div>
+                </button>
+              </div>
+            </div>
+            <div
+              data-index="1"
+              data-item-index="1"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <div
+                aria-level="2"
+                aria-posinset="1"
+                aria-rowindex="1"
+                role="row"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room General"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
+                >
                   <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="General avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="General"
-                      >
-                        General
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in General"
-                      >
-                        Last message in General
-                      </div>
+                      GE
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_18r_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_18p_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="General"
+                        >
+                          General
+                        </div>
+                        <div
+                          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-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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_18r_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_18p_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_192_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_190_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          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;"
                         >
                           <svg
-                            fill="currentColor"
-                            height="1em"
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
                             viewBox="0 0 24 24"
-                            width="1em"
+                            width="20px"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                             />
                           </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_192_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_190_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    >
-                      <div
-                        class="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;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                          <div
+                            class="_unread-counter_1147r_8"
                           />
-                        </svg>
-                        <div
-                          class="_unread-counter_1147r_8"
-                        />
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="2"
-            data-item-index="2"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="2"
-              aria-rowindex="2"
-              role="row"
+              data-index="2"
+              data-item-index="2"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Random"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="2"
+                aria-rowindex="2"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Random"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Random avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    RA
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Random avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      RA
+                    </div>
+                    <div
+                      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="roomName"
-                        data-testid="room-name"
-                        title="Random"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Random
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Random"
+                        >
+                          Random
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="flex 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
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_199_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_197_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        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;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_199_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_197_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_19g_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_19e_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_19g_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_19e_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="3"
-            data-item-index="3"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="3"
-              aria-rowindex="3"
-              role="row"
+              data-index="3"
+              data-item-index="3"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Engineering"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="3"
+                aria-rowindex="3"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Engineering"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Engineering avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    EN
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Engineering avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Engineering"
-                      >
-                        Engineering
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in Engineering"
-                      >
-                        Last message in Engineering
-                      </div>
+                      EN
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_19n_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_19l_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Engineering"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Engineering
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_19u_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_19s_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Engineering"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Engineering
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_19n_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_19l_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_19u_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_19s_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="4"
-            data-item-index="4"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="4"
-              aria-rowindex="4"
-              role="row"
+              data-index="4"
+              data-item-index="4"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Design"
-                aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="4"
+                aria-rowindex="4"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Design"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Design avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    DE
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Design avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      DE
+                    </div>
+                    <div
+                      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="roomName"
-                        data-testid="room-name"
-                        title="Design"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Design
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Design"
+                        >
+                          Design
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="flex 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
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1a5_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1a3_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        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;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1a5_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1a3_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1ac_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1aa_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1ac_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1aa_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="5"
-            data-item-index="5"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="5"
-              aria-rowindex="5"
-              role="row"
+              data-index="5"
+              data-item-index="5"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Product"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="5"
+                aria-rowindex="5"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Product"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Product avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Product avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Product"
-                      >
-                        Product
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in Product"
-                      >
-                        Last message in Product
-                      </div>
+                      PR
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1aj_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1ah_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Product"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Product
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1aq_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1ao_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Product"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Product
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1aj_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1ah_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1aq_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1ao_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="6"
-            data-item-index="6"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="6"
-              aria-rowindex="6"
-              role="row"
+              data-index="6"
+              data-item-index="6"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Marketing with 5 unread mentions."
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="6"
+                aria-rowindex="6"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Marketing with 5 unread mentions."
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Marketing avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    MA
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Marketing avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Marketing"
-                      >
-                        Marketing
-                      </div>
+                      MA
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1b1_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1av_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Marketing"
+                        >
+                          Marketing
+                        </div>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1b1_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1av_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1b8_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1b6_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          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;"
                         >
                           <svg
-                            fill="currentColor"
-                            height="1em"
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
                             viewBox="0 0 24 24"
-                            width="1em"
+                            width="20px"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                             />
                           </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1b8_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1b6_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <span
+                            class="_unread-counter_1147r_8"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                            5
+                          </span>
                         </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    >
-                      <div
-                        class="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;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          5
-                        </span>
                       </div>
                     </div>
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="7"
-            data-item-index="7"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="7"
-              aria-rowindex="7"
-              role="row"
+              data-index="7"
+              data-item-index="7"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Sales"
-                aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="7"
+                aria-rowindex="7"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Sales"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Sales avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    SA
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Sales avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Sales"
-                      >
-                        Sales
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in Sales"
-                      >
-                        Last message in Sales
-                      </div>
+                      SA
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1bf_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1bd_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Sales"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Sales
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1bm_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1bk_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Sales"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Sales
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1bf_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1bd_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1bm_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1bk_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="8"
-            data-item-index="8"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="8"
-              aria-rowindex="8"
-              role="row"
+              data-index="8"
+              data-item-index="8"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Support"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="8"
+                aria-rowindex="8"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Support"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Support avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    SU
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Support avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      SU
+                    </div>
+                    <div
+                      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="roomName"
-                        data-testid="room-name"
-                        title="Support"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Support
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Support"
+                        >
+                          Support
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="flex 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
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1bt_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1br_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        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;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1bt_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1br_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1c4_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1c2_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1c4_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1c2_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="9"
-            data-item-index="9"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="9"
-              aria-rowindex="9"
-              role="row"
+              data-index="9"
+              data-item-index="9"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Announcements"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="9"
+                aria-rowindex="9"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Announcements"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Announcements avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    AN
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Announcements avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Announcements"
-                      >
-                        Announcements
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in Announcements"
-                      >
-                        Last message in Announcements
-                      </div>
+                      AN
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1cb_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1c9_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Announcements"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Announcements
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1ci_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1cg_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Announcements"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Announcements
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1cb_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1c9_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1ci_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1cg_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="10"
-            data-item-index="10"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="10"
-              aria-rowindex="10"
-              role="row"
+              data-index="10"
+              data-item-index="10"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Off-topic"
-                aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="10"
+                aria-rowindex="10"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Off-topic"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Off-topic avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    OF
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Off-topic avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      OF
+                    </div>
+                    <div
+                      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="roomName"
-                        data-testid="room-name"
-                        title="Off-topic"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Off-topic
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Off-topic"
+                        >
+                          Off-topic
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="flex 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
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1cp_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1cn_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        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;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1cp_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1cn_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1d0_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1cu_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1d0_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1cu_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="11"
-            data-item-index="11"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="11"
-              aria-rowindex="11"
-              role="row"
+              data-index="11"
+              data-item-index="11"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Team Alpha with 10 unread mentions."
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="11"
+                aria-rowindex="11"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Team Alpha with 10 unread mentions."
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Team Alpha avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    TE
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Team Alpha avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Team Alpha"
-                      >
-                        Team Alpha
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in Team Alpha"
-                      >
-                        Last message in Team Alpha
-                      </div>
+                      TE
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1d7_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1d5_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          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 RoomListItemView-module_ellipsis"
+                          title="Last message in Team Alpha"
+                        >
+                          Last message in Team Alpha
+                        </div>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1d7_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1d5_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1de_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1dc_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          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;"
                         >
                           <svg
-                            fill="currentColor"
-                            height="1em"
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
                             viewBox="0 0 24 24"
-                            width="1em"
+                            width="20px"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                             />
                           </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1de_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1dc_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <span
+                            class="_unread-counter_1147r_8"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                            10
+                          </span>
                         </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    >
-                      <div
-                        class="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;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          10
-                        </span>
                       </div>
                     </div>
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="12"
-            data-item-index="12"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="12"
-              aria-rowindex="12"
-              role="row"
+              data-index="12"
+              data-item-index="12"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Team Beta"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="12"
+                aria-rowindex="12"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Team Beta"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Team Beta avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    TE
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Team Beta avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      TE
+                    </div>
+                    <div
+                      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="roomName"
-                        data-testid="room-name"
-                        title="Team Beta"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Team Beta
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Team Beta"
+                        >
+                          Team Beta
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="flex 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
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1dl_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1dj_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        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;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1dl_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1dj_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1ds_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1dq_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1ds_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1dq_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="13"
-            data-item-index="13"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="13"
-              aria-rowindex="13"
-              role="row"
+              data-index="13"
+              data-item-index="13"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Project X"
-                aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="13"
+                aria-rowindex="13"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Project X"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Project X avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Project X avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Project X"
-                      >
-                        Project X
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in Project X"
-                      >
-                        Last message in Project X
-                      </div>
+                      PR
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1e3_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1e1_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Project X"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Project X
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1ea_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1e8_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Project X"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Project X
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1e3_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1e1_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1ea_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1e8_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="14"
-            data-item-index="14"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="14"
-              aria-rowindex="14"
-              role="row"
+              data-index="14"
+              data-item-index="14"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Project Y"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="14"
+                aria-rowindex="14"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Project Y"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Project Y avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Project Y avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      PR
+                    </div>
+                    <div
+                      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="roomName"
-                        data-testid="room-name"
-                        title="Project Y"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Project Y
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Project Y"
+                        >
+                          Project Y
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="flex 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
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1eh_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1ef_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        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;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1eh_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1ef_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1eo_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1em_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1eo_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1em_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="15"
-            data-item-index="15"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="15"
-              aria-rowindex="15"
-              role="row"
+              data-index="15"
+              data-item-index="15"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Water Cooler"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="15"
+                aria-rowindex="15"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Water Cooler"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Water Cooler avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    WA
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Water Cooler avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Water Cooler"
-                      >
-                        Water Cooler
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in Water Cooler"
-                      >
-                        Last message in Water Cooler
-                      </div>
+                      WA
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1ev_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1et_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Water Cooler"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Water Cooler
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1f6_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1f4_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Water Cooler"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Water Cooler
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1ev_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1et_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1f6_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1f4_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="16"
-            data-item-index="16"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="16"
-              aria-rowindex="16"
-              role="row"
+              data-index="16"
+              data-item-index="16"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Feedback with 15 unread mentions."
-                aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="16"
+                aria-rowindex="16"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Feedback with 15 unread mentions."
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Feedback avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    FE
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Feedback avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Feedback"
-                      >
-                        Feedback
-                      </div>
+                      FE
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1fd_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1fb_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Feedback"
+                        >
+                          Feedback
+                        </div>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1fd_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1fb_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1fk_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1fi_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          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;"
                         >
                           <svg
-                            fill="currentColor"
-                            height="1em"
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
                             viewBox="0 0 24 24"
-                            width="1em"
+                            width="20px"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                             />
                           </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1fk_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1fi_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <span
+                            class="_unread-counter_1147r_8"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                            15
+                          </span>
                         </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    >
-                      <div
-                        class="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;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          15
-                        </span>
                       </div>
                     </div>
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="17"
-            data-item-index="17"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="17"
-              aria-rowindex="17"
-              role="row"
+              data-index="17"
+              data-item-index="17"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Ideas"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="17"
+                aria-rowindex="17"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Ideas"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Ideas avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    ID
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Ideas avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Ideas"
-                      >
-                        Ideas
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in Ideas"
-                      >
-                        Last message in Ideas
-                      </div>
+                      ID
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1fr_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1fp_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Ideas"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Ideas
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1g2_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1g0_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Ideas"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Ideas
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1fr_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1fp_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1g2_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1g0_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="18"
-            data-item-index="18"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="18"
-              aria-rowindex="18"
-              role="row"
+              data-index="18"
+              data-item-index="18"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Bugs"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="18"
+                aria-rowindex="18"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Bugs"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Bugs avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    BU
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Bugs avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      BU
+                    </div>
+                    <div
+                      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="roomName"
-                        data-testid="room-name"
-                        title="Bugs"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Bugs
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Bugs"
+                        >
+                          Bugs
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="flex 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
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1g9_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1g7_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        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;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1g9_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1g7_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1gg_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1ge_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1gg_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1ge_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="19"
-            data-item-index="19"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="19"
-              aria-rowindex="19"
-              role="row"
+              data-index="19"
+              data-item-index="19"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Features"
-                aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="19"
+                aria-rowindex="19"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Features"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Features avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    FE
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Features avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Features"
-                      >
-                        Features
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in Features"
-                      >
-                        Last message in Features
-                      </div>
+                      FE
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1gn_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1gl_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Features"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Features
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1gu_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1gs_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Features"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Features
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1gn_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1gl_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1gu_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1gs_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="20"
-            data-item-index="20"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="20"
-              aria-rowindex="20"
-              role="row"
+              data-index="20"
+              data-item-index="20"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Releases"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="20"
+                aria-rowindex="20"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Releases"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Releases avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    RE
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Releases avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      RE
+                    </div>
+                    <div
+                      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="roomName"
-                        data-testid="room-name"
-                        title="Releases"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Releases
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Releases"
+                        >
+                          Releases
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="flex 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
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1h5_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1h3_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        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;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1h5_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1h3_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1hc_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1ha_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1hc_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1ha_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="21"
-            data-item-index="21"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="21"
-              aria-rowindex="21"
-              role="row"
+              data-index="21"
+              data-item-index="21"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room General with 20 unread mentions."
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="21"
+                aria-rowindex="21"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room General with 20 unread mentions."
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="General avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    GE
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="General avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="General"
-                      >
-                        General
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in General"
-                      >
-                        Last message in General
-                      </div>
+                      GE
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1hj_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1hh_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="General"
+                        >
+                          General
+                        </div>
+                        <div
+                          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-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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1hj_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1hh_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1hq_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1ho_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          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;"
                         >
                           <svg
-                            fill="currentColor"
-                            height="1em"
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
                             viewBox="0 0 24 24"
-                            width="1em"
+                            width="20px"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                             />
                           </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1hq_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1ho_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <span
+                            class="_unread-counter_1147r_8"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                            20
+                          </span>
                         </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    >
-                      <div
-                        class="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;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          20
-                        </span>
                       </div>
                     </div>
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="22"
-            data-item-index="22"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="22"
-              aria-rowindex="22"
-              role="row"
+              data-index="22"
+              data-item-index="22"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Random"
-                aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="22"
+                aria-rowindex="22"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Random"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Random avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    RA
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Random avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      RA
+                    </div>
+                    <div
+                      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="roomName"
-                        data-testid="room-name"
-                        title="Random"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Random
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Random"
+                        >
+                          Random
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="flex 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
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1i1_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1hv_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        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;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1i1_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1hv_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1i8_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1i6_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1i8_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1i6_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="23"
-            data-item-index="23"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="23"
-              aria-rowindex="23"
-              role="row"
+              data-index="23"
+              data-item-index="23"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Engineering"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="23"
+                aria-rowindex="23"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Engineering"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Engineering avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    EN
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Engineering avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Engineering"
-                      >
-                        Engineering
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in Engineering"
-                      >
-                        Last message in Engineering
-                      </div>
+                      EN
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1if_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1id_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Engineering"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Engineering
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1im_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1ik_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Engineering"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Engineering
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1if_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1id_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1im_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1ik_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="24"
-            data-item-index="24"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-expanded="true"
-              aria-level="1"
-              aria-posinset="2"
-              aria-rowindex="25"
-              aria-setsize="29"
-              role="row"
+              data-index="24"
+              data-item-index="24"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
+              <div
                 aria-expanded="true"
-                aria-label="Toggle Chats section"
-                class="header"
-                role="gridcell"
-                tabindex="-1"
-                type="button"
+                aria-level="1"
+                aria-posinset="2"
+                aria-rowindex="25"
+                aria-setsize="29"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-expanded="true"
+                  aria-label="Toggle Chats section"
+                  class="RoomListSectionHeaderView-module_header"
+                  role="gridcell"
+                  tabindex="-1"
+                  type="button"
                 >
-                  <svg
-                    fill="var(--cpd-color-icon-secondary)"
-                    height="24px"
-                    viewBox="0 0 24 24"
-                    width="24px"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    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;"
                   >
-                    <path
-                      d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
-                    />
-                  </svg>
-                  <span
-                    class="title"
-                  >
-                    Chats
-                  </span>
-                </div>
-              </button>
+                    <svg
+                      fill="var(--cpd-color-icon-secondary)"
+                      height="24px"
+                      viewBox="0 0 24 24"
+                      width="24px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+                      />
+                    </svg>
+                    <span
+                      class="RoomListSectionHeaderView-module_title"
+                    >
+                      Chats
+                    </span>
+                  </div>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="25"
-            data-item-index="25"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="1"
-              aria-rowindex="24"
-              role="row"
+              data-index="25"
+              data-item-index="25"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Design"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="1"
+                aria-rowindex="24"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Design"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Design avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    DE
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Design avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      DE
+                    </div>
+                    <div
+                      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="roomName"
-                        data-testid="room-name"
-                        title="Design"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Design
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Design"
+                        >
+                          Design
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="flex 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
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1it_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1ir_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        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;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1it_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1ir_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1j4_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1j2_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1j4_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1j2_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="26"
-            data-item-index="26"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="2"
-              aria-rowindex="25"
-              role="row"
+              data-index="26"
+              data-item-index="26"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Product"
-                aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="2"
+                aria-rowindex="25"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Product"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Product avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Product avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Product"
-                      >
-                        Product
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in Product"
-                      >
-                        Last message in Product
-                      </div>
+                      PR
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1jb_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1j9_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Product"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Product
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1ji_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1jg_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Product"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Product
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1jb_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1j9_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1ji_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1jg_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="27"
-            data-item-index="27"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="3"
-              aria-rowindex="26"
-              role="row"
+              data-index="27"
+              data-item-index="27"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Marketing with 25 unread mentions."
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="3"
+                aria-rowindex="26"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Marketing with 25 unread mentions."
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Marketing avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    MA
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Marketing avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Marketing"
-                      >
-                        Marketing
-                      </div>
+                      MA
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1jp_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1jn_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Marketing"
+                        >
+                          Marketing
+                        </div>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1jp_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1jn_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1k0_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1ju_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          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;"
                         >
                           <svg
-                            fill="currentColor"
-                            height="1em"
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
                             viewBox="0 0 24 24"
-                            width="1em"
+                            width="20px"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                             />
                           </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1k0_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1ju_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <span
+                            class="_unread-counter_1147r_8"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                            25
+                          </span>
                         </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    >
-                      <div
-                        class="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;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          25
-                        </span>
                       </div>
                     </div>
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="28"
-            data-item-index="28"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="4"
-              aria-rowindex="27"
-              role="row"
+              data-index="28"
+              data-item-index="28"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Sales"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="4"
+                aria-rowindex="27"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Sales"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Sales avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    SA
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Sales avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Sales"
-                      >
-                        Sales
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in Sales"
-                      >
-                        Last message in Sales
-                      </div>
+                      SA
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1k7_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1k5_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Sales"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Sales
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1ke_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1kc_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Sales"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Sales
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1k7_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1k5_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1ke_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1kc_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="29"
-            data-item-index="29"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="5"
-              aria-rowindex="28"
-              role="row"
+              data-index="29"
+              data-item-index="29"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Support"
-                aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="5"
+                aria-rowindex="28"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Support"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Support avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    SU
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Support avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      SU
+                    </div>
+                    <div
+                      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="roomName"
-                        data-testid="room-name"
-                        title="Support"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Support
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Support"
+                        >
+                          Support
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="flex 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
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1kl_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1kj_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        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;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1kl_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1kj_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1ks_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1kq_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1ks_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1kq_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="30"
-            data-item-index="30"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="6"
-              aria-rowindex="29"
-              role="row"
+              data-index="30"
+              data-item-index="30"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Announcements"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="6"
+                aria-rowindex="29"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Announcements"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Announcements avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    AN
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Announcements avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Announcements"
-                      >
-                        Announcements
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in Announcements"
-                      >
-                        Last message in Announcements
-                      </div>
+                      AN
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1l3_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1l1_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Announcements"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Announcements
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1la_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1l8_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Announcements"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Announcements
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1l3_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1l1_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1la_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1l8_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="31"
-            data-item-index="31"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="7"
-              aria-rowindex="30"
-              role="row"
+              data-index="31"
+              data-item-index="31"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Off-topic"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="7"
+                aria-rowindex="30"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Off-topic"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Off-topic avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    OF
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Off-topic avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      OF
+                    </div>
+                    <div
+                      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="roomName"
-                        data-testid="room-name"
-                        title="Off-topic"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Off-topic
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Off-topic"
+                        >
+                          Off-topic
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="flex 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
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1lh_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1lf_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        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;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1lh_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1lf_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1lo_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1lm_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1lo_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1lm_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="32"
-            data-item-index="32"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="8"
-              aria-rowindex="31"
-              role="row"
+              data-index="32"
+              data-item-index="32"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Team Alpha with 30 unread mentions."
-                aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="8"
+                aria-rowindex="31"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Team Alpha with 30 unread mentions."
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Team Alpha avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    TE
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Team Alpha avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Team Alpha"
-                      >
-                        Team Alpha
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in Team Alpha"
-                      >
-                        Last message in Team Alpha
-                      </div>
+                      TE
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1lv_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1lt_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          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 RoomListItemView-module_ellipsis"
+                          title="Last message in Team Alpha"
+                        >
+                          Last message in Team Alpha
+                        </div>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1lv_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1lt_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1m6_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1m4_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          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;"
                         >
                           <svg
-                            fill="currentColor"
-                            height="1em"
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
                             viewBox="0 0 24 24"
-                            width="1em"
+                            width="20px"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                             />
                           </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1m6_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1m4_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <span
+                            class="_unread-counter_1147r_8"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                            30
+                          </span>
                         </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    >
-                      <div
-                        class="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;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          30
-                        </span>
                       </div>
                     </div>
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="33"
-            data-item-index="33"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="9"
-              aria-rowindex="32"
-              role="row"
+              data-index="33"
+              data-item-index="33"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Team Beta"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="9"
+                aria-rowindex="32"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Team Beta"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Team Beta avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    TE
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Team Beta avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      TE
+                    </div>
+                    <div
+                      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="roomName"
-                        data-testid="room-name"
-                        title="Team Beta"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Team Beta
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Team Beta"
+                        >
+                          Team Beta
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="flex 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
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1md_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1mb_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        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;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1md_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1mb_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1mk_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1mi_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1mk_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1mi_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="34"
-            data-item-index="34"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="10"
-              aria-rowindex="33"
-              role="row"
+              data-index="34"
+              data-item-index="34"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Project X"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="10"
+                aria-rowindex="33"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Project X"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Project X avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Project X avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Project X"
-                      >
-                        Project X
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in Project X"
-                      >
-                        Last message in Project X
-                      </div>
+                      PR
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1mr_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1mp_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Project X"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Project X
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1n2_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1n0_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Project X"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Project X
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1mr_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1mp_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1n2_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1n0_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="35"
-            data-item-index="35"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="11"
-              aria-rowindex="34"
-              role="row"
+              data-index="35"
+              data-item-index="35"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Project Y"
-                aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="11"
+                aria-rowindex="34"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Project Y"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Project Y avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Project Y avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      PR
+                    </div>
+                    <div
+                      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="roomName"
-                        data-testid="room-name"
-                        title="Project Y"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Project Y
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Project Y"
+                        >
+                          Project Y
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="flex 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
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1n9_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1n7_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        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;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1n9_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1n7_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1ng_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1ne_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1ng_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1ne_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
-          </div>
-          <div
-            data-index="36"
-            data-item-index="36"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="12"
-              aria-rowindex="35"
-              role="row"
+              data-index="36"
+              data-item-index="36"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Water Cooler"
-                aria-selected="false"
-                class="flex 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;"
-                tabindex="-1"
-                type="button"
+              <div
+                aria-level="2"
+                aria-posinset="12"
+                aria-rowindex="35"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Water Cooler"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Water Cooler avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    WA
-                  </div>
-                  <div
-                    class="flex 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;"
+                    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
-                      class="ellipsis"
+                      aria-label="Water Cooler avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="roomName"
-                        data-testid="room-name"
-                        title="Water Cooler"
-                      >
-                        Water Cooler
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                        title="Last message in Water Cooler"
-                      >
-                        Last message in Water Cooler
-                      </div>
+                      WA
                     </div>
                     <div
-                      class="flex 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;"
+                      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;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1nn_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1nl_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Water Cooler"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Water Cooler
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1nu_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1ns_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Water Cooler"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Water Cooler
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_1nn_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1nl_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_1nu_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_1ns_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -13108,13 +13171,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,8 +13222,13 @@ exports[`<RoomListView /> > renders Loading story 1`] = `
       </div>
     </div>
     <div
-      class="skeleton"
-    />
+      class="Flex-module_flex RoomListView-module_list"
+      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;"
+    >
+      <div
+        class="RoomListLoadingSkeleton-module_skeleton"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -13172,13 +13240,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;"
@@ -13223,291 +13291,297 @@ exports[`<RoomListView /> > renders SmallFlatList story 1`] = `
       </div>
     </div>
     <div
-      aria-label="Room list"
-      data-testid="room-list"
-      data-virtuoso-scroller="true"
-      role="listbox"
-      style="height: 100%; outline: none; overflow-y: auto; position: relative;"
-      tabindex="0"
+      class="Flex-module_flex RoomListView-module_list"
+      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;"
     >
       <div
-        data-viewport-type="element"
-        style="height: 100%; position: absolute; top: 0px; width: 100%;"
+        aria-label="Room list"
+        class="VirtualizedRoomListView-module_roomList"
+        data-testid="room-list"
+        data-virtuoso-scroller="true"
+        role="listbox"
+        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+        tabindex="0"
       >
         <div
-          data-testid="virtuoso-item-list"
-          style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
+          data-viewport-type="element"
+          style="height: 100%; position: absolute; top: 0px; width: 100%;"
         >
           <div
-            data-index="0"
-            data-item-index="0"
-            data-known-size="52"
-            style="overflow-anchor: none;"
+            data-testid="virtuoso-item-list"
+            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
           >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room General"
-              aria-posinset="1"
-              aria-selected="false"
-              aria-setsize="2"
-              class="flex roomListItem mx_RoomListItemView bold 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;"
-              tabindex="-1"
-              type="button"
+            <div
+              data-index="0"
+              data-item-index="0"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room General"
+                aria-posinset="1"
+                aria-selected="false"
+                aria-setsize="2"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="General avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  GE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="General avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="General"
-                    >
-                      General
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in General"
-                    >
-                      Last message in General
-                    </div>
+                    GE
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_k8_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_k6_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="General"
+                      >
+                        General
+                      </div>
+                      <div
+                        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-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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_k8_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_k6_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_kf_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_kd_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
                       >
                         <svg
-                          fill="currentColor"
-                          height="1em"
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
                           viewBox="0 0 24 24"
-                          width="1em"
+                          width="20px"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                           />
                         </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_kf_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_kd_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  >
-                    <div
-                      class="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;"
-                    >
-                      <svg
-                        fill="var(--cpd-color-icon-accent-primary)"
-                        height="20px"
-                        viewBox="0 0 24 24"
-                        width="20px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                        <div
+                          class="_unread-counter_1147r_8"
                         />
-                      </svg>
-                      <div
-                        class="_unread-counter_1147r_8"
-                      />
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="1"
-            data-item-index="1"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Random"
-              aria-posinset="2"
-              aria-selected="false"
-              aria-setsize="2"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="1"
+              data-item-index="1"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Random"
+                aria-posinset="2"
+                aria-selected="false"
+                aria-setsize="2"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Random avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  RA
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Random avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    RA
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Random"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Random
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Random"
+                      >
+                        Random
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_km_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_kk_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_km_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_kk_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_kt_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_kr_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_kt_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_kr_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -13523,13 +13597,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;"
@@ -13574,93 +13648,507 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
       </div>
     </div>
     <div
-      aria-label="Room list"
-      aria-rowcount="4"
-      data-testid="room-list"
-      data-virtuoso-scroller="true"
-      role="treegrid"
-      style="height: 100%; outline: none; overflow-y: auto; position: relative;"
-      tabindex="0"
+      class="Flex-module_flex RoomListView-module_list"
+      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;"
     >
       <div
-        data-viewport-type="element"
-        style="height: 100%; position: absolute; top: 0px; width: 100%;"
+        aria-label="Room list"
+        aria-rowcount="4"
+        class="VirtualizedRoomListView-module_roomList"
+        data-testid="room-list"
+        data-virtuoso-scroller="true"
+        role="treegrid"
+        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+        tabindex="0"
       >
         <div
-          data-testid="virtuoso-item-list"
-          style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
+          data-viewport-type="element"
+          style="height: 100%; position: absolute; top: 0px; width: 100%;"
         >
           <div
-            data-index="0"
-            data-item-index="0"
-            data-known-size="52"
-            style="overflow-anchor: none;"
+            data-testid="virtuoso-item-list"
+            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
           >
             <div
-              aria-expanded="true"
-              aria-level="1"
-              aria-posinset="1"
-              aria-rowindex="1"
-              aria-setsize="2"
-              role="row"
+              data-index="0"
+              data-item-index="0"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <button
+              <div
                 aria-expanded="true"
-                aria-label="Toggle Favourites section"
-                class="header firstHeader"
-                role="gridcell"
-                tabindex="-1"
-                type="button"
+                aria-level="1"
+                aria-posinset="1"
+                aria-rowindex="1"
+                aria-setsize="2"
+                role="row"
               >
-                <div
-                  class="flex 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;"
+                <button
+                  aria-expanded="true"
+                  aria-label="Toggle Favourites section"
+                  class="RoomListSectionHeaderView-module_header RoomListSectionHeaderView-module_firstHeader"
+                  role="gridcell"
+                  tabindex="-1"
+                  type="button"
                 >
-                  <svg
-                    fill="var(--cpd-color-icon-secondary)"
-                    height="24px"
-                    viewBox="0 0 24 24"
-                    width="24px"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    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;"
                   >
-                    <path
-                      d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
-                    />
-                  </svg>
-                  <span
-                    class="title"
+                    <svg
+                      fill="var(--cpd-color-icon-secondary)"
+                      height="24px"
+                      viewBox="0 0 24 24"
+                      width="24px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+                      />
+                    </svg>
+                    <span
+                      class="RoomListSectionHeaderView-module_title"
+                    >
+                      Favourites
+                    </span>
+                  </div>
+                </button>
+              </div>
+            </div>
+            <div
+              data-index="1"
+              data-item-index="1"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <div
+                aria-level="2"
+                aria-posinset="1"
+                aria-rowindex="1"
+                role="row"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room General"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    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;"
                   >
-                    Favourites
-                  </span>
-                </div>
-              </button>
+                    <div
+                      aria-label="General avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      GE
+                    </div>
+                    <div
+                      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="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="General"
+                        >
+                          General
+                        </div>
+                        <div
+                          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-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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_17q_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_17o_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_181_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_17v_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          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;"
+                        >
+                          <svg
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
+                            viewBox="0 0 24 24"
+                            width="20px"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                            />
+                          </svg>
+                          <div
+                            class="_unread-counter_1147r_8"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              </div>
+            </div>
+            <div
+              data-index="2"
+              data-item-index="2"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <div
+                aria-level="2"
+                aria-posinset="2"
+                aria-rowindex="2"
+                role="row"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Random"
+                  aria-selected="false"
+                  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;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    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
+                      aria-label="Random avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      RA
+                    </div>
+                    <div
+                      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="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Random"
+                        >
+                          Random
+                        </div>
+                      </div>
+                      <div
+                        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
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="_r_188_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_186_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="_r_18f_"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-_r_18d_"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+            </div>
+            <div
+              data-index="3"
+              data-item-index="3"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <div
+                aria-expanded="true"
+                aria-level="1"
+                aria-posinset="2"
+                aria-rowindex="4"
+                aria-setsize="0"
+                role="row"
+              >
+                <button
+                  aria-expanded="true"
+                  aria-label="Toggle Chats section"
+                  class="RoomListSectionHeaderView-module_header"
+                  role="gridcell"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    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
+                      fill="var(--cpd-color-icon-secondary)"
+                      height="24px"
+                      viewBox="0 0 24 24"
+                      width="24px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+                      />
+                    </svg>
+                    <span
+                      class="RoomListSectionHeaderView-module_title"
+                    >
+                      Chats
+                    </span>
+                  </div>
+                </button>
+              </div>
             </div>
           </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders Toast story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        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-module_flex RoomListPrimaryFilters-module_list"
+          id="_r_1qg_"
+          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;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Unreads
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Rooms
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Favourites
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="Flex-module_flex RoomListView-module_list"
+      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;"
+    >
+      <div
+        aria-label="Room list"
+        class="VirtualizedRoomListView-module_roomList"
+        data-testid="room-list"
+        data-virtuoso-scroller="true"
+        role="listbox"
+        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+        tabindex="0"
+      >
+        <div
+          data-viewport-type="element"
+          style="height: 100%; position: absolute; top: 0px; width: 100%;"
+        >
           <div
-            data-index="1"
-            data-item-index="1"
-            data-known-size="52"
-            style="overflow-anchor: none;"
+            data-testid="virtuoso-item-list"
+            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
           >
             <div
-              aria-level="2"
-              aria-posinset="1"
-              aria-rowindex="1"
-              role="row"
+              data-index="0"
+              data-item-index="0"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
               <button
                 aria-haspopup="menu"
                 aria-label="Open room General"
+                aria-posinset="1"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView bold"
+                aria-setsize="20"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
                 data-state="closed"
-                role="gridcell"
+                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;"
                 tabindex="-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 +14159,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
@@ -13700,11 +14188,11 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="More Options"
-                        aria-labelledby="_r_17q_"
+                        aria-labelledby="_r_1qo_"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_17o_"
+                        id="radix-_r_1qm_"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -13732,11 +14220,11 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="Notification options"
-                        aria-labelledby="_r_181_"
+                        aria-labelledby="_r_1qv_"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_17v_"
+                        id="radix-_r_1qt_"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -13762,10 +14250,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;"
                       >
@@ -13789,32 +14277,27 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                 </div>
               </button>
             </div>
-          </div>
-          <div
-            data-index="2"
-            data-item-index="2"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
             <div
-              aria-level="2"
-              aria-posinset="2"
-              aria-rowindex="2"
-              role="row"
+              data-index="1"
+              data-item-index="1"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
               <button
                 aria-haspopup="menu"
                 aria-label="Open room Random"
+                aria-posinset="2"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                aria-setsize="20"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
-                role="gridcell"
+                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;"
                 tabindex="-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 +14308,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 +14323,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
@@ -13848,11 +14331,11 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="More Options"
-                        aria-labelledby="_r_188_"
+                        aria-labelledby="_r_1r6_"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_186_"
+                        id="radix-_r_1r4_"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -13880,11 +14363,11 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="Notification options"
-                        aria-labelledby="_r_18f_"
+                        aria-labelledby="_r_1rd_"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_18d_"
+                        id="radix-_r_1rb_"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -13910,61 +14393,2381 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="2"
+              data-item-index="2"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Engineering"
+                aria-posinset="3"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Engineering avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    EN
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Engineering"
+                      >
+                        Engineering
+                      </div>
+                      <div
+                        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-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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_1rk_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1ri_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_1rr_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1rp_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="3"
+              data-item-index="3"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Design"
+                aria-posinset="4"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Design avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    DE
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Design"
+                      >
+                        Design
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_1s2_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1s0_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_1s9_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1s7_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="4"
+              data-item-index="4"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Product"
+                aria-posinset="5"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Product avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    PR
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Product"
+                      >
+                        Product
+                      </div>
+                      <div
+                        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-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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_1sg_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1se_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_1sn_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1sl_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="5"
+              data-item-index="5"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Marketing with 5 unread mentions."
+                aria-posinset="6"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Marketing avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    MA
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Marketing"
+                      >
+                        Marketing
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_1su_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1ss_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_1t5_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1t3_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
+                      >
+                        <svg
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
+                          viewBox="0 0 24 24"
+                          width="20px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                          />
+                        </svg>
+                        <span
+                          class="_unread-counter_1147r_8"
+                        >
+                          5
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="6"
+              data-item-index="6"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Sales"
+                aria-posinset="7"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Sales avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    SA
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Sales"
+                      >
+                        Sales
+                      </div>
+                      <div
+                        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-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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_1tc_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1ta_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_1tj_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1th_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="7"
+              data-item-index="7"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Support"
+                aria-posinset="8"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Support avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    SU
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Support"
+                      >
+                        Support
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_1tq_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1to_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_1u1_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1tv_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="8"
+              data-item-index="8"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Announcements"
+                aria-posinset="9"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Announcements avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    AN
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Announcements"
+                      >
+                        Announcements
+                      </div>
+                      <div
+                        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-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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_1u8_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1u6_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_1uf_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1ud_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="9"
+              data-item-index="9"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Off-topic"
+                aria-posinset="10"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Off-topic avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    OF
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Off-topic"
+                      >
+                        Off-topic
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_1um_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1uk_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_1ut_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1ur_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="10"
+              data-item-index="10"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Team Alpha with 10 unread mentions."
+                aria-posinset="11"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Team Alpha avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    TE
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        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 RoomListItemView-module_ellipsis"
+                        title="Last message in Team Alpha"
+                      >
+                        Last message in Team Alpha
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_1v4_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1v2_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_1vb_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1v9_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
+                      >
+                        <svg
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
+                          viewBox="0 0 24 24"
+                          width="20px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                          />
+                        </svg>
+                        <span
+                          class="_unread-counter_1147r_8"
+                        >
+                          10
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="11"
+              data-item-index="11"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Team Beta"
+                aria-posinset="12"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Team Beta avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    TE
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Team Beta"
+                      >
+                        Team Beta
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_1vi_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1vg_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_1vp_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1vn_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="12"
+              data-item-index="12"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Project X"
+                aria-posinset="13"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Project X avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    PR
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        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 RoomListItemView-module_ellipsis"
+                        title="Last message in Project X"
+                      >
+                        Last message in Project X
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_200_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_1vu_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_207_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_205_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="13"
+              data-item-index="13"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Project Y"
+                aria-posinset="14"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Project Y avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    PR
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Project Y"
+                      >
+                        Project Y
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_20e_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_20c_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_20l_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_20j_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="14"
+              data-item-index="14"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Water Cooler"
+                aria-posinset="15"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Water Cooler avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    WA
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        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 RoomListItemView-module_ellipsis"
+                        title="Last message in Water Cooler"
+                      >
+                        Last message in Water Cooler
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_20s_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_20q_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_213_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_211_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="15"
+              data-item-index="15"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Feedback with 15 unread mentions."
+                aria-posinset="16"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Feedback avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    FE
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Feedback"
+                      >
+                        Feedback
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_21a_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_218_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_21h_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_21f_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
+                      >
+                        <svg
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
+                          viewBox="0 0 24 24"
+                          width="20px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                          />
+                        </svg>
+                        <span
+                          class="_unread-counter_1147r_8"
+                        >
+                          15
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="16"
+              data-item-index="16"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Ideas"
+                aria-posinset="17"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Ideas avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    ID
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Ideas"
+                      >
+                        Ideas
+                      </div>
+                      <div
+                        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-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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_21o_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_21m_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_21v_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_21t_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="17"
+              data-item-index="17"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Bugs"
+                aria-posinset="18"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Bugs avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    BU
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Bugs"
+                      >
+                        Bugs
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_226_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_224_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_22d_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_22b_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="18"
+              data-item-index="18"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Features"
+                aria-posinset="19"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Features avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    FE
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Features"
+                      >
+                        Features
+                      </div>
+                      <div
+                        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-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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_22k_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_22i_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_22r_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_22p_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
+                  </div>
+                </div>
+              </button>
+            </div>
+            <div
+              data-index="19"
+              data-item-index="19"
+              data-known-size="52"
+              style="overflow-anchor: none;"
+            >
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Releases"
+                aria-posinset="20"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  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
+                    aria-label="Releases avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    RE
+                  </div>
+                  <div
+                    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="RoomListItemView-module_ellipsis"
+                    >
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Releases"
+                      >
+                        Releases
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_232_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_230_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_239_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_237_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
               </button>
             </div>
           </div>
-          <div
-            data-index="3"
-            data-item-index="3"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <div
-              aria-expanded="true"
-              aria-level="1"
-              aria-posinset="2"
-              aria-rowindex="4"
-              aria-setsize="0"
-              role="row"
-            >
-              <button
-                aria-expanded="true"
-                aria-label="Toggle Chats section"
-                class="header"
-                role="gridcell"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="flex 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
-                    fill="var(--cpd-color-icon-secondary)"
-                    height="24px"
-                    viewBox="0 0 24 24"
-                    width="24px"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
-                    />
-                  </svg>
-                  <span
-                    class="title"
-                  >
-                    Chats
-                  </span>
-                </div>
-              </button>
-            </div>
-          </div>
         </div>
       </div>
+      <div
+        class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _toast-container_1ysb3_8 RoomListToast-module_toast _has-close_1ysb3_30"
+      >
+        <div
+          class="_content_1ysb3_34"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_1ysb3_26"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+            />
+          </svg>
+          Section created
+        </div>
+        <button
+          aria-labelledby="_r_1qh_"
+          class="_icon-button_1215g_8 _close_1ysb3_41 _no-background_1215g_42"
+          data-kind="secondary"
+          role="button"
+          style="--cpd-icon-button-size: 24px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -13977,13 +16780,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;"
@@ -14028,2610 +16831,2616 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
       </div>
     </div>
     <div
-      aria-label="Room list"
-      data-testid="room-list"
-      data-virtuoso-scroller="true"
-      role="listbox"
-      style="height: 100%; outline: none; overflow-y: auto; position: relative;"
-      tabindex="0"
+      class="Flex-module_flex RoomListView-module_list"
+      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;"
     >
       <div
-        data-viewport-type="element"
-        style="height: 100%; position: absolute; top: 0px; width: 100%;"
+        aria-label="Room list"
+        class="VirtualizedRoomListView-module_roomList"
+        data-testid="room-list"
+        data-virtuoso-scroller="true"
+        role="listbox"
+        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+        tabindex="0"
       >
         <div
-          data-testid="virtuoso-item-list"
-          style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
+          data-viewport-type="element"
+          style="height: 100%; position: absolute; top: 0px; width: 100%;"
         >
           <div
-            data-index="0"
-            data-item-index="0"
-            data-known-size="52"
-            style="overflow-anchor: none;"
+            data-testid="virtuoso-item-list"
+            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
           >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room General"
-              aria-posinset="1"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView bold 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;"
-              tabindex="-1"
-              type="button"
+            <div
+              data-index="0"
+              data-item-index="0"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room General"
+                aria-posinset="1"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="General avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  GE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="General avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="General"
-                    >
-                      General
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in General"
-                    >
-                      Last message in General
-                    </div>
+                    GE
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_a7_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_a5_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="General"
+                      >
+                        General
+                      </div>
+                      <div
+                        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-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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_a7_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_a5_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_ae_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_ac_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
                       >
                         <svg
-                          fill="currentColor"
-                          height="1em"
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
                           viewBox="0 0 24 24"
-                          width="1em"
+                          width="20px"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                           />
                         </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_ae_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_ac_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  >
-                    <div
-                      class="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;"
-                    >
-                      <svg
-                        fill="var(--cpd-color-icon-accent-primary)"
-                        height="20px"
-                        viewBox="0 0 24 24"
-                        width="20px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                        <div
+                          class="_unread-counter_1147r_8"
                         />
-                      </svg>
-                      <div
-                        class="_unread-counter_1147r_8"
-                      />
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="1"
-            data-item-index="1"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Random"
-              aria-posinset="2"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="1"
+              data-item-index="1"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Random"
+                aria-posinset="2"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Random avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  RA
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Random avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    RA
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Random"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Random
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Random"
+                      >
+                        Random
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_al_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_aj_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_al_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_aj_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_as_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_aq_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_as_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_aq_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="2"
-            data-item-index="2"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Engineering"
-              aria-posinset="3"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="2"
+              data-item-index="2"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Engineering"
+                aria-posinset="3"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Engineering avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  EN
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Engineering avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Engineering"
-                    >
-                      Engineering
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Engineering"
-                    >
-                      Last message in Engineering
-                    </div>
+                    EN
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_b3_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_b1_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Engineering"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Engineering
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_ba_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_b8_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Engineering"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Engineering
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_b3_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_b1_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_ba_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_b8_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="3"
-            data-item-index="3"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Design"
-              aria-posinset="4"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="3"
+              data-item-index="3"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Design"
+                aria-posinset="4"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Design avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  DE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Design avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    DE
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Design"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Design
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Design"
+                      >
+                        Design
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_bh_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_bf_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_bh_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_bf_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_bo_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_bm_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_bo_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_bm_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="4"
-            data-item-index="4"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Product"
-              aria-posinset="5"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="4"
+              data-item-index="4"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Product"
+                aria-posinset="5"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Product avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  PR
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Product avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Product"
-                    >
-                      Product
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Product"
-                    >
-                      Last message in Product
-                    </div>
+                    PR
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_bv_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_bt_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Product"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Product
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_c6_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_c4_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Product"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Product
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_bv_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_bt_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_c6_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_c4_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="5"
-            data-item-index="5"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Marketing with 5 unread mentions."
-              aria-posinset="6"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="5"
+              data-item-index="5"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Marketing with 5 unread mentions."
+                aria-posinset="6"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Marketing avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  MA
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Marketing avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Marketing"
-                    >
-                      Marketing
-                    </div>
+                    MA
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_cd_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_cb_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Marketing"
+                      >
+                        Marketing
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_cd_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_cb_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_ck_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_ci_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
                       >
                         <svg
-                          fill="currentColor"
-                          height="1em"
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
                           viewBox="0 0 24 24"
-                          width="1em"
+                          width="20px"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                           />
                         </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_ck_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_ci_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <span
+                          class="_unread-counter_1147r_8"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                          5
+                        </span>
                       </div>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  >
-                    <div
-                      class="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;"
-                    >
-                      <svg
-                        fill="var(--cpd-color-icon-accent-primary)"
-                        height="20px"
-                        viewBox="0 0 24 24"
-                        width="20px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                        />
-                      </svg>
-                      <span
-                        class="_unread-counter_1147r_8"
-                      >
-                        5
-                      </span>
                     </div>
                   </div>
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="6"
-            data-item-index="6"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Sales"
-              aria-posinset="7"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="6"
+              data-item-index="6"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Sales"
+                aria-posinset="7"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Sales avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  SA
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Sales avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Sales"
-                    >
-                      Sales
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Sales"
-                    >
-                      Last message in Sales
-                    </div>
+                    SA
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_cr_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_cp_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Sales"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Sales
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_d2_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_d0_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Sales"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Sales
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_cr_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_cp_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_d2_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_d0_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="7"
-            data-item-index="7"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Support"
-              aria-posinset="8"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="7"
+              data-item-index="7"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Support"
+                aria-posinset="8"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Support avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  SU
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Support avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    SU
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Support"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Support
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Support"
+                      >
+                        Support
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_d9_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_d7_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_d9_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_d7_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_dg_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_de_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_dg_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_de_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="8"
-            data-item-index="8"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Announcements"
-              aria-posinset="9"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="8"
+              data-item-index="8"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Announcements"
+                aria-posinset="9"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Announcements avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  AN
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Announcements avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Announcements"
-                    >
-                      Announcements
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Announcements"
-                    >
-                      Last message in Announcements
-                    </div>
+                    AN
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_dn_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_dl_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Announcements"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Announcements
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_du_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_ds_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Announcements"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Announcements
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_dn_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_dl_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_du_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_ds_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="9"
-            data-item-index="9"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Off-topic"
-              aria-posinset="10"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="9"
+              data-item-index="9"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Off-topic"
+                aria-posinset="10"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Off-topic avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  OF
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Off-topic avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    OF
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Off-topic"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Off-topic
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Off-topic"
+                      >
+                        Off-topic
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_e5_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_e3_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_e5_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_e3_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_ec_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_ea_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_ec_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_ea_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="10"
-            data-item-index="10"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Team Alpha with 10 unread mentions."
-              aria-posinset="11"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="10"
+              data-item-index="10"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Team Alpha with 10 unread mentions."
+                aria-posinset="11"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Team Alpha avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  TE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Team Alpha avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Team Alpha"
-                    >
-                      Team Alpha
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Team Alpha"
-                    >
-                      Last message in Team Alpha
-                    </div>
+                    TE
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_ej_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_eh_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        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 RoomListItemView-module_ellipsis"
+                        title="Last message in Team Alpha"
+                      >
+                        Last message in Team Alpha
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_ej_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_eh_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_eq_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_eo_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
                       >
                         <svg
-                          fill="currentColor"
-                          height="1em"
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
                           viewBox="0 0 24 24"
-                          width="1em"
+                          width="20px"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                           />
                         </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_eq_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_eo_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <span
+                          class="_unread-counter_1147r_8"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                          10
+                        </span>
                       </div>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  >
-                    <div
-                      class="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;"
-                    >
-                      <svg
-                        fill="var(--cpd-color-icon-accent-primary)"
-                        height="20px"
-                        viewBox="0 0 24 24"
-                        width="20px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                        />
-                      </svg>
-                      <span
-                        class="_unread-counter_1147r_8"
-                      >
-                        10
-                      </span>
                     </div>
                   </div>
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="11"
-            data-item-index="11"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Team Beta"
-              aria-posinset="12"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="11"
+              data-item-index="11"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Team Beta"
+                aria-posinset="12"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Team Beta avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  TE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Team Beta avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    TE
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Team Beta"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Team Beta
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Team Beta"
+                      >
+                        Team Beta
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_f1_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_ev_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_f1_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_ev_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_f8_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_f6_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_f8_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_f6_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="12"
-            data-item-index="12"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Project X"
-              aria-posinset="13"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="12"
+              data-item-index="12"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Project X"
+                aria-posinset="13"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Project X avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  PR
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Project X avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Project X"
-                    >
-                      Project X
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Project X"
-                    >
-                      Last message in Project X
-                    </div>
+                    PR
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_ff_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_fd_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Project X"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Project X
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_fm_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_fk_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Project X"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Project X
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_ff_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_fd_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_fm_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_fk_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="13"
-            data-item-index="13"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Project Y"
-              aria-posinset="14"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="13"
+              data-item-index="13"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Project Y"
+                aria-posinset="14"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Project Y avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  PR
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Project Y avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    PR
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Project Y"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Project Y
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Project Y"
+                      >
+                        Project Y
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_ft_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_fr_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_ft_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_fr_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_g4_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_g2_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_g4_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_g2_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="14"
-            data-item-index="14"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Water Cooler"
-              aria-posinset="15"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="14"
+              data-item-index="14"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Water Cooler"
+                aria-posinset="15"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Water Cooler avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  WA
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Water Cooler avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Water Cooler"
-                    >
-                      Water Cooler
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Water Cooler"
-                    >
-                      Last message in Water Cooler
-                    </div>
+                    WA
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_gb_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_g9_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Water Cooler"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Water Cooler
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_gi_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_gg_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Water Cooler"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Water Cooler
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_gb_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_g9_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_gi_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_gg_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="15"
-            data-item-index="15"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Feedback with 15 unread mentions."
-              aria-posinset="16"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="15"
+              data-item-index="15"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Feedback with 15 unread mentions."
+                aria-posinset="16"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Feedback avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  FE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Feedback avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Feedback"
-                    >
-                      Feedback
-                    </div>
+                    FE
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_gp_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_gn_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Feedback"
+                      >
+                        Feedback
+                      </div>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_gp_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_gn_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_h0_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_gu_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    >
+                      <div
+                        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;"
                       >
                         <svg
-                          fill="currentColor"
-                          height="1em"
+                          fill="var(--cpd-color-icon-accent-primary)"
+                          height="20px"
                           viewBox="0 0 24 24"
-                          width="1em"
+                          width="20px"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                           />
                         </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_h0_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_gu_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <span
+                          class="_unread-counter_1147r_8"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                          15
+                        </span>
                       </div>
-                    </button>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  >
-                    <div
-                      class="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;"
-                    >
-                      <svg
-                        fill="var(--cpd-color-icon-accent-primary)"
-                        height="20px"
-                        viewBox="0 0 24 24"
-                        width="20px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                        />
-                      </svg>
-                      <span
-                        class="_unread-counter_1147r_8"
-                      >
-                        15
-                      </span>
                     </div>
                   </div>
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="16"
-            data-item-index="16"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Ideas"
-              aria-posinset="17"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="16"
+              data-item-index="16"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Ideas"
+                aria-posinset="17"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Ideas avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  ID
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Ideas avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Ideas"
-                    >
-                      Ideas
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Ideas"
-                    >
-                      Last message in Ideas
-                    </div>
+                    ID
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_h7_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_h5_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Ideas"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Ideas
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_he_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_hc_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Ideas"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Ideas
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_h7_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_h5_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_he_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_hc_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="17"
-            data-item-index="17"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Bugs"
-              aria-posinset="18"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="17"
+              data-item-index="17"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Bugs"
+                aria-posinset="18"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Bugs avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  BU
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Bugs avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    BU
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Bugs"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Bugs
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Bugs"
+                      >
+                        Bugs
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_hl_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_hj_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_hl_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_hj_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_hs_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_hq_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_hs_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_hq_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="18"
-            data-item-index="18"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Features"
-              aria-posinset="19"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="18"
+              data-item-index="18"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Features"
+                aria-posinset="19"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Features avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  FE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Features avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                   >
-                    <div
-                      class="roomName"
-                      data-testid="room-name"
-                      title="Features"
-                    >
-                      Features
-                    </div>
-                    <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
-                      title="Last message in Features"
-                    >
-                      Last message in Features
-                    </div>
+                    FE
                   </div>
                   <div
-                    class="flex 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;"
+                    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;"
                   >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_i3_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_i1_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Features"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
+                        Features
                       </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_ia_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_i8_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
                       <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                        title="Last message in Features"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
+                        Last message in Features
                       </div>
-                    </button>
+                    </div>
+                    <div
+                      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
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_i3_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_i1_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_ia_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_i8_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
-          </div>
-          <div
-            data-index="19"
-            data-item-index="19"
-            data-known-size="52"
-            style="overflow-anchor: none;"
-          >
-            <button
-              aria-haspopup="menu"
-              aria-label="Open room Releases"
-              aria-posinset="20"
-              aria-selected="false"
-              aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView 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;"
-              tabindex="-1"
-              type="button"
+              </button>
+            </div>
+            <div
+              data-index="19"
+              data-item-index="19"
+              data-known-size="52"
+              style="overflow-anchor: none;"
             >
-              <div
-                class="flex 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;"
+              <button
+                aria-haspopup="menu"
+                aria-label="Open room Releases"
+                aria-posinset="20"
+                aria-selected="false"
+                aria-setsize="20"
+                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;"
+                tabindex="-1"
+                type="button"
               >
                 <div
-                  aria-label="Releases avatar"
-                  role="img"
-                  style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                >
-                  RE
-                </div>
-                <div
-                  class="flex 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;"
+                  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
-                    class="ellipsis"
+                    aria-label="Releases avatar"
+                    role="img"
+                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                  >
+                    RE
+                  </div>
+                  <div
+                    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="roomName"
-                      data-testid="room-name"
-                      title="Releases"
+                      class="RoomListItemView-module_ellipsis"
                     >
-                      Releases
+                      <div
+                        class="RoomListItemView-module_roomName"
+                        data-testid="room-name"
+                        title="Releases"
+                      >
+                        Releases
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="flex 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
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="More Options"
-                      aria-labelledby="_r_ih_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_if_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
+                    <div
+                      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;"
                     >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="More Options"
+                        aria-labelledby="_r_ih_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_if_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                          />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="menu"
-                      aria-label="Notification options"
-                      aria-labelledby="_r_io_"
-                      class="_icon-button_1215g_8"
-                      data-kind="primary"
-                      data-state="closed"
-                      id="radix-_r_im_"
-                      role="button"
-                      style="--cpd-icon-button-size: 24px; padding: 2px;"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <div
-                        class="_indicator-icon_147l5_17"
-                        style="--cpd-icon-button-size: 100%;"
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        aria-disabled="false"
+                        aria-expanded="false"
+                        aria-haspopup="menu"
+                        aria-label="Notification options"
+                        aria-labelledby="_r_io_"
+                        class="_icon-button_1215g_8"
+                        data-kind="primary"
+                        data-state="closed"
+                        id="radix-_r_im_"
+                        role="button"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
+                        tabindex="0"
+                        type="button"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="_indicator-icon_147l5_17"
+                          style="--cpd-icon-button-size: 100%;"
                         >
-                          <path
-                            d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                          />
-                        </svg>
-                      </div>
-                    </button>
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      aria-hidden="true"
+                      class="RoomListItemView-module_notificationDecoration"
+                    />
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="notificationDecoration"
-                  />
                 </div>
-              </div>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/shared-components/src/room-list/RoomListView/index.tsx b/packages/shared-components/src/room-list/RoomListView/index.tsx
index b35793e1a1..9b7ee15528 100644
--- a/packages/shared-components/src/room-list/RoomListView/index.tsx
+++ b/packages/shared-components/src/room-list/RoomListView/index.tsx
@@ -16,3 +16,5 @@ export type {
 export { RoomListLoadingSkeleton } from "./RoomListLoadingSkeleton";
 export { RoomListEmptyStateView } from "./RoomListEmptyStateView";
 export type { RoomListEmptyStateViewProps } from "./RoomListEmptyStateView";
+export * from "../VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView";
+export * from "./RoomListToast";
diff --git a/packages/shared-components/src/room-list/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx
similarity index 95%
rename from packages/shared-components/src/room-list/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx
index d5e5c18b0a..7e131593ba 100644
--- a/packages/shared-components/src/room-list/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx
@@ -10,7 +10,7 @@ import { fn } from "storybook/test";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { RoomListItemAccessibilityWrapper } from "./RoomListItemAccessibilityWrapper";
-import { createMockRoomItemViewModel, renderAvatar } from "../story-mocks";
+import { createMockRoomItemViewModel, renderAvatar } from "../../story-mocks";
 
 const meta = {
     title: "Room List/RoomListItemAccessibiltyWrapper",
diff --git a/packages/shared-components/src/room-list/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.tsx
similarity index 91%
rename from packages/shared-components/src/room-list/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.tsx
index 1ea7ecf1fb..5158c70997 100644
--- a/packages/shared-components/src/room-list/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.tsx
@@ -7,8 +7,8 @@
 
 import React, { memo, type JSX } from "react";
 
-import { RoomListItemView, type RoomListItemViewProps } from "../RoomListItemView";
-import { getItemAccessibleProps } from "../../core/VirtualizedList";
+import { RoomListItemView, type RoomListItemViewProps } from "./RoomListItemView";
+import { getItemAccessibleProps } from "../../../core/VirtualizedList";
 
 export interface RoomListItemAccessibilityWrapperPros extends RoomListItemViewProps {
     /** Index of this room in the list */
diff --git a/packages/shared-components/src/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx
similarity index 100%
rename from packages/shared-components/src/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.stories.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx
diff --git a/packages/shared-components/src/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.test.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.test.tsx
similarity index 100%
rename from packages/shared-components/src/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.test.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.test.tsx
diff --git a/packages/shared-components/src/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.tsx
similarity index 98%
rename from packages/shared-components/src/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.tsx
index 7a3e02722c..a5033cb918 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/NotificationDecoration/NotificationDecoration.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.tsx
@@ -16,7 +16,7 @@ import {
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { UnreadCounter, Unread } from "@vector-im/compound-web";
 
-import { Flex } from "../../../core/utils/Flex";
+import { Flex } from "../../../../core/utils/Flex";
 
 /**
  * Data representing the notification state for a room or item.
diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemContextMenu.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemContextMenu.tsx
similarity index 95%
rename from packages/shared-components/src/room-list/RoomListItemView/RoomListItemContextMenu.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemContextMenu.tsx
index 404162dc85..6a5c608d5e 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemContextMenu.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemContextMenu.tsx
@@ -8,7 +8,7 @@
 import React, { type JSX, type PropsWithChildren } from "react";
 import { ContextMenu } from "@vector-im/compound-web";
 
-import { _t } from "../../core/i18n/i18n";
+import { _t } from "../../../../core/i18n/i18n";
 import { MoreOptionContent, type RoomListItemViewModel } from "./RoomListItemMoreOptionsMenu";
 
 /**
diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemHoverMenu.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemHoverMenu.tsx
similarity index 96%
rename from packages/shared-components/src/room-list/RoomListItemView/RoomListItemHoverMenu.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemHoverMenu.tsx
index 6d0b5bf457..e71723bb02 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemHoverMenu.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemHoverMenu.tsx
@@ -7,7 +7,7 @@
 
 import React, { type JSX } from "react";
 
-import { Flex } from "../../core/utils/Flex";
+import { Flex } from "../../../../core/utils/Flex";
 import { RoomListItemMoreOptionsMenu, type RoomListItemViewModel } from "./RoomListItemMoreOptionsMenu";
 import { RoomListItemNotificationMenu } from "./RoomListItemNotificationMenu";
 import styles from "./RoomListItemView.module.css";
diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemMoreOptionsMenu.test.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.test.tsx
similarity index 71%
rename from packages/shared-components/src/room-list/RoomListItemView/RoomListItemMoreOptionsMenu.test.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.test.tsx
index 7931bd7f07..a6d657b2a5 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemMoreOptionsMenu.test.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.test.tsx
@@ -10,8 +10,8 @@ import { render, screen } from "@test-utils";
 import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi } from "vitest";
 
-import { RoomListItemMoreOptionsMenu } from "./RoomListItemMoreOptionsMenu";
-import { useMockedViewModel } from "../../core/viewmodel";
+import { RoomListItemMoreOptionsMenu, MoreOptionContent } from "./RoomListItemMoreOptionsMenu";
+import { useMockedViewModel } from "../../../../core/viewmodel";
 import type { RoomListItemViewSnapshot } from "./RoomListItemView";
 import { defaultSnapshot } from "./default-snapshot";
 
@@ -26,6 +26,8 @@ describe("<RoomListItemMoreOptionsMenu />", () => {
         onCopyRoomLink: vi.fn(),
         onLeaveRoom: vi.fn(),
         onSetRoomNotifState: vi.fn(),
+        onCreateSection: vi.fn(),
+        onToggleSection: vi.fn(),
     };
 
     const renderMenu = (overrides: Partial<RoomListItemViewSnapshot> = {}): ReturnType<typeof render> => {
@@ -224,4 +226,74 @@ describe("<RoomListItemMoreOptionsMenu />", () => {
 
         expect(mockCallbacks.onLeaveRoom).toHaveBeenCalled();
     });
+
+    it("should call onCreateSection when new section is clicked", async () => {
+        const user = userEvent.setup();
+        // We need to render the MoreOptionContent directly here as radix is kind of messing in the test env
+        const TestComponent = (): JSX.Element => {
+            const vm = useMockedViewModel(defaultSnapshot, mockCallbacks);
+            return <MoreOptionContent vm={vm} />;
+        };
+        render(<TestComponent />);
+
+        const newSection = screen.getByRole("menuitem", { name: "New section" });
+        await user.click(newSection);
+
+        expect(mockCallbacks.onCreateSection).toHaveBeenCalled();
+    });
+
+    it("should render section items in move to section submenu", () => {
+        const sections = [
+            { tag: "m.favourite", name: "Favourites", isSelected: false },
+            { tag: "element.io.section.custom1", name: "Work", isSelected: true },
+            { tag: "element.io.section.custom2", name: "Personal", isSelected: false },
+        ];
+
+        const TestComponent = (): JSX.Element => {
+            const vm = useMockedViewModel({ ...defaultSnapshot, sections }, mockCallbacks);
+            return <MoreOptionContent vm={vm} />;
+        };
+        render(<TestComponent />);
+
+        const favouriteItem = screen.getByRole("menuitem", { name: "Favourites" });
+        expect(favouriteItem).toBeInTheDocument();
+        expect(favouriteItem).toHaveAttribute("aria-checked", "false");
+
+        const workItem = screen.getByRole("menuitem", { name: "Work" });
+        expect(workItem).toBeInTheDocument();
+        expect(workItem).toHaveAttribute("aria-checked", "true");
+
+        const personalItem = screen.getByRole("menuitem", { name: "Personal" });
+        expect(personalItem).toBeInTheDocument();
+        expect(personalItem).toHaveAttribute("aria-checked", "false");
+    });
+
+    it("should call onToggleSection when a section item is clicked", async () => {
+        const user = userEvent.setup();
+        const sections = [
+            { tag: "m.favourite", name: "Favourites", isSelected: false },
+            { tag: "element.io.section.custom1", name: "Work", isSelected: false },
+        ];
+
+        const TestComponent = (): JSX.Element => {
+            const vm = useMockedViewModel({ ...defaultSnapshot, sections }, mockCallbacks);
+            return <MoreOptionContent vm={vm} />;
+        };
+        render(<TestComponent />);
+
+        const workItem = screen.getByRole("menuitem", { name: "Work" });
+        await user.click(workItem);
+
+        expect(mockCallbacks.onToggleSection).toHaveBeenCalledWith("element.io.section.custom1");
+    });
+
+    it("should not render section items when sections array is empty", () => {
+        const TestComponent = (): JSX.Element => {
+            const vm = useMockedViewModel({ ...defaultSnapshot, sections: [] }, mockCallbacks);
+            return <MoreOptionContent vm={vm} />;
+        };
+        render(<TestComponent />);
+
+        expect(screen.getByRole("menuitem", { name: "New section" })).toBeInTheDocument();
+    });
 });
diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemMoreOptionsMenu.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.tsx
similarity index 74%
rename from packages/shared-components/src/room-list/RoomListItemView/RoomListItemMoreOptionsMenu.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.tsx
index 9d638c84ff..00690a445b 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemMoreOptionsMenu.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { useState, type JSX } from "react";
-import { IconButton, Menu, MenuItem, Separator, ToggleMenuItem } from "@vector-im/compound-web";
+import { IconButton, Menu, MenuItem, Separator, SubMenu, ToggleMenuItem } from "@vector-im/compound-web";
 import {
     MarkAsReadIcon,
     MarkAsUnreadIcon,
@@ -16,10 +16,12 @@ import {
     LinkIcon,
     LeaveIcon,
     OverflowHorizontalIcon,
+    ArrowRightIcon,
+    CheckIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { _t } from "../../core/i18n/i18n";
-import { useViewModel, type ViewModel } from "../../core/viewmodel";
+import { _t } from "../../../../core/i18n/i18n";
+import { useViewModel, type ViewModel } from "../../../../core/viewmodel";
 import type { RoomListItemViewSnapshot, RoomListItemViewActions } from "./RoomListItemView";
 
 /**
@@ -106,6 +108,7 @@ export function MoreOptionContent({ vm }: MoreOptionContentProps): JSX.Element {
                 onSelect={vm.onToggleLowPriority}
                 onClick={(evt) => evt.stopPropagation()}
             />
+            <Separator />
             {snapshot.canInvite && (
                 <MenuItem
                     Icon={UserAddIcon}
@@ -124,6 +127,34 @@ export function MoreOptionContent({ vm }: MoreOptionContentProps): JSX.Element {
                     hideChevron={true}
                 />
             )}
+            {snapshot.canMoveToSection && (
+                <SubMenu
+                    trigger={
+                        <MenuItem
+                            Icon={ArrowRightIcon}
+                            label={_t("room_list|more_options|move_to_section")}
+                            onSelect={null}
+                        />
+                    }
+                >
+                    {snapshot.sections.map((section) => (
+                        <MenuItem
+                            key={section.tag}
+                            label={section.name}
+                            onSelect={() => vm.onToggleSection(section.tag)}
+                            onClick={(evt) => evt.stopPropagation()}
+                            hideChevron={true}
+                            aria-checked={section.isSelected}
+                        >
+                            {section.isSelected && (
+                                <CheckIcon color="var(--cpd-color-icon-tertiary)" width="24px" height="24px" />
+                            )}
+                        </MenuItem>
+                    ))}
+                    <Separator />
+                    <MenuItem label={_t("action|new_section")} onSelect={vm.onCreateSection} hideChevron={true} />
+                </SubMenu>
+            )}
             <Separator />
             <MenuItem
                 kind="critical"
diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemNotificationMenu.test.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemNotificationMenu.test.tsx
similarity index 97%
rename from packages/shared-components/src/room-list/RoomListItemView/RoomListItemNotificationMenu.test.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemNotificationMenu.test.tsx
index b0c54f2a5b..f7fb857077 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemNotificationMenu.test.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemNotificationMenu.test.tsx
@@ -12,7 +12,7 @@ import { describe, it, expect, vi } from "vitest";
 
 import { RoomListItemNotificationMenu } from "./RoomListItemNotificationMenu";
 import { RoomNotifState } from "./RoomNotifs";
-import { useMockedViewModel } from "../../core/viewmodel";
+import { useMockedViewModel } from "../../../../core/viewmodel";
 import type { RoomListItemViewSnapshot } from "./RoomListItemView";
 import { defaultSnapshot } from "./default-snapshot";
 
@@ -27,6 +27,8 @@ describe("<RoomListItemNotificationMenu />", () => {
         onCopyRoomLink: vi.fn(),
         onLeaveRoom: vi.fn(),
         onSetRoomNotifState: vi.fn(),
+        onCreateSection: vi.fn(),
+        onToggleSection: vi.fn(),
     };
 
     const renderMenu = (roomNotifState: RoomNotifState = RoomNotifState.AllMessages): ReturnType<typeof render> => {
diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemNotificationMenu.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemNotificationMenu.tsx
similarity index 97%
rename from packages/shared-components/src/room-list/RoomListItemView/RoomListItemNotificationMenu.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemNotificationMenu.tsx
index 4fdd404b8b..35aee35eaf 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemNotificationMenu.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemNotificationMenu.tsx
@@ -13,9 +13,9 @@ import {
     CheckIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { _t } from "../../core/i18n/i18n";
+import { _t } from "../../../../core/i18n/i18n";
 import { RoomNotifState } from "./RoomNotifs";
-import { useViewModel, type ViewModel } from "../../core/viewmodel";
+import { useViewModel, type ViewModel } from "../../../../core/viewmodel";
 import type { RoomListItemViewSnapshot, RoomListItemViewActions } from "./RoomListItemView";
 
 /**
diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.module.css b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.module.css
similarity index 100%
rename from packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.module.css
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.module.css
diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.stories.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx
similarity index 96%
rename from packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.stories.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx
index c948c7f777..21bf2806d2 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.stories.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx
@@ -11,10 +11,10 @@ import { fn } from "storybook/test";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { Room } from "./RoomListItemView";
 import { RoomListItemView, type RoomListItemViewSnapshot, type RoomListItemViewActions } from "./RoomListItemView";
-import { useMockedViewModel } from "../../core/viewmodel";
-import { withViewDocs } from "../../../.storybook/withViewDocs";
+import { useMockedViewModel } from "../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../.storybook/withViewDocs";
 import { defaultSnapshot } from "./default-snapshot";
-import { renderAvatar } from "../story-mocks";
+import { renderAvatar } from "../../../story-mocks";
 import { mockedActions } from "./mocked-actions";
 
 type RoomListItemProps = RoomListItemViewSnapshot &
@@ -38,6 +38,8 @@ const RoomListItemWrapperImpl = ({
     onCopyRoomLink,
     onLeaveRoom,
     onSetRoomNotifState,
+    onCreateSection,
+    onToggleSection,
     isSelected,
     isFocused,
     onFocus,
@@ -56,6 +58,8 @@ const RoomListItemWrapperImpl = ({
         onCopyRoomLink,
         onLeaveRoom,
         onSetRoomNotifState,
+        onCreateSection,
+        onToggleSection,
     });
     return (
         <RoomListItemView
diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.test.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.test.tsx
similarity index 100%
rename from packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.test.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.test.tsx
diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.tsx
similarity index 89%
rename from packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.tsx
index 723986336a..363a25feb0 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.tsx
@@ -9,14 +9,14 @@ import React, { type JSX, memo, useEffect, useRef, type ReactNode } from "react"
 import classNames from "classnames";
 import { Text } from "@vector-im/compound-web";
 
-import { Flex } from "../../core/utils/Flex";
+import { Flex } from "../../../../core/utils/Flex";
 import { NotificationDecoration, type NotificationDecorationData } from "./NotificationDecoration";
 import { RoomListItemHoverMenu } from "./RoomListItemHoverMenu";
 import { RoomListItemContextMenu } from "./RoomListItemContextMenu";
 import { type RoomNotifState } from "./RoomNotifs";
 import styles from "./RoomListItemView.module.css";
-import { useViewModel, type ViewModel } from "../../core/viewmodel";
-import { _t } from "../../core/i18n/i18n";
+import { useViewModel, type ViewModel } from "../../../../core/viewmodel";
+import { _t } from "../../../../core/i18n/i18n";
 
 /**
  * Opaque type representing a Room object from the parent application
@@ -44,6 +44,19 @@ function getA11yLabel(roomName: string, notification: NotificationDecorationData
     }
 }
 
+/**
+ * Describes a section that a room can be assigned to.
+ * Used to render toggle items in the "Move to section" submenu.
+ */
+export interface Section {
+    /** The tag that identifies this section (e.g. `m.favourite`, custom tag) */
+    tag: string;
+    /** The human-readable display name of the section */
+    name: string;
+    /** Whether the room currently belongs to this section */
+    isSelected: boolean;
+}
+
 /**
  * Snapshot for a room list item.
  * Contains all the data needed to render a room in the list.
@@ -79,6 +92,10 @@ export interface RoomListItemViewSnapshot {
     canMarkAsUnread: boolean;
     /** The room's notification state */
     roomNotifState: RoomNotifState;
+    /** Whether the room can be moved to a section */
+    canMoveToSection: boolean;
+    /** Available sections the room can be assigned to */
+    sections: Section[];
 }
 
 /**
@@ -104,6 +121,10 @@ export interface RoomListItemViewActions {
     onLeaveRoom: () => void;
     /** Called when setting the room notification state */
     onSetRoomNotifState: (state: RoomNotifState) => void;
+    /** Called when creating a new section */
+    onCreateSection: () => void;
+    /** Called when toggling a room's membership in a section */
+    onToggleSection: (tag: string) => void;
 }
 
 /**
diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomNotifs.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomNotifs.ts
similarity index 100%
rename from packages/shared-components/src/room-list/RoomListItemView/RoomNotifs.ts
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomNotifs.ts
diff --git a/packages/shared-components/src/room-list/RoomListItemView/NotificationDecoration/__snapshots__/NotificationDecoration.test.tsx.snap b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/__snapshots__/NotificationDecoration.test.tsx.snap
similarity index 96%
rename from packages/shared-components/src/room-list/RoomListItemView/NotificationDecoration/__snapshots__/NotificationDecoration.test.tsx.snap
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/__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/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/__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/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
similarity index 90%
rename from packages/shared-components/src/room-list/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/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/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/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/RoomListItemView/default-snapshot.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/default-snapshot.ts
similarity index 73%
rename from packages/shared-components/src/room-list/RoomListItemView/default-snapshot.ts
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/default-snapshot.ts
index 2ec961ff98..bf0cb0189e 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/default-snapshot.ts
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/default-snapshot.ts
@@ -36,4 +36,22 @@ export const defaultSnapshot: RoomListItemViewSnapshot = {
     canMarkAsRead: false,
     canMarkAsUnread: true,
     roomNotifState: RoomNotifState.AllMessages,
+    canMoveToSection: true,
+    sections: [
+        {
+            tag: "m.favourite",
+            name: "Favourites",
+            isSelected: false,
+        },
+        {
+            tag: "element.io.section.work",
+            name: "Work",
+            isSelected: true,
+        },
+        {
+            tag: "m.lowpriority",
+            name: "Low Priority",
+            isSelected: false,
+        },
+    ],
 };
diff --git a/packages/shared-components/src/room-list/RoomListItemView/index.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/index.ts
similarity index 99%
rename from packages/shared-components/src/room-list/RoomListItemView/index.ts
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/index.ts
index 13db309fd0..72f2f98119 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/index.ts
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/index.ts
@@ -12,6 +12,7 @@ export type {
     RoomListItemViewModel,
     RoomListItemViewActions,
     RoomListItemViewProps,
+    Section,
 } from "./RoomListItemView";
 export { RoomListItemNotificationMenu } from "./RoomListItemNotificationMenu";
 export type { RoomListItemNotificationMenuProps } from "./RoomListItemNotificationMenu";
diff --git a/packages/shared-components/src/room-list/RoomListItemView/mocked-actions.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/mocked-actions.ts
similarity index 91%
rename from packages/shared-components/src/room-list/RoomListItemView/mocked-actions.ts
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/mocked-actions.ts
index bda12ac114..8e79c52cc5 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/mocked-actions.ts
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/mocked-actions.ts
@@ -19,4 +19,6 @@ export const mockedActions: RoomListItemViewActions = {
     onCopyRoomLink: fn(),
     onLeaveRoom: fn(),
     onSetRoomNotifState: fn(),
+    onCreateSection: fn(),
+    onToggleSection: fn(),
 };
diff --git a/packages/shared-components/src/room-list/RoomListItemAccessibilityWrapper/index.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/index.ts
similarity index 100%
rename from packages/shared-components/src/room-list/RoomListItemAccessibilityWrapper/index.ts
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/index.ts
diff --git a/packages/shared-components/src/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.module.css b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.module.css
similarity index 100%
rename from packages/shared-components/src/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.module.css
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.module.css
diff --git a/packages/shared-components/src/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx
similarity index 95%
rename from packages/shared-components/src/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx
index a1e507afce..9b48f089c9 100644
--- a/packages/shared-components/src/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx
@@ -15,8 +15,8 @@ import {
     type RoomListSectionHeaderActions,
     type RoomListSectionHeaderViewProps,
 } from "./RoomListSectionHeaderView";
-import { useMockedViewModel } from "../../core/viewmodel";
-import { withViewDocs } from "../../../.storybook/withViewDocs";
+import { useMockedViewModel } from "../../../core/viewmodel";
+import { withViewDocs } from "../../../../.storybook/withViewDocs";
 
 type RoomListSectionHeaderProps = RoomListSectionHeaderViewSnapshot &
     RoomListSectionHeaderActions &
diff --git a/packages/shared-components/src/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.test.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.test.tsx
similarity index 100%
rename from packages/shared-components/src/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.test.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.test.tsx
diff --git a/packages/shared-components/src/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.tsx
similarity index 94%
rename from packages/shared-components/src/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.tsx
index f5a2a17f5d..b12ee1aea9 100644
--- a/packages/shared-components/src/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.tsx
@@ -9,11 +9,11 @@ import React, { memo, type JSX, type FocusEvent, type MouseEventHandler } from "
 import ChevronRightIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-right";
 import classNames from "classnames";
 
-import { useViewModel, type ViewModel } from "../../core/viewmodel";
+import { useViewModel, type ViewModel } from "../../../core/viewmodel";
 import styles from "./RoomListSectionHeaderView.module.css";
-import { Flex } from "../../core/utils/Flex";
-import { useI18n } from "../../core/i18n/i18nContext";
-import { getGroupHeaderAccessibleProps } from "../../core/VirtualizedList";
+import { Flex } from "../../../core/utils/Flex";
+import { useI18n } from "../../../core/i18n/i18nContext";
+import { getGroupHeaderAccessibleProps } from "../../../core/VirtualizedList";
 
 /**
  * The observable state snapshot for a room list section header.
diff --git a/packages/shared-components/src/room-list/RoomListSectionHeaderView/__snapshots__/RoomListSectionHeaderView.test.tsx.snap b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/__snapshots__/RoomListSectionHeaderView.test.tsx.snap
similarity index 87%
rename from packages/shared-components/src/room-list/RoomListSectionHeaderView/__snapshots__/RoomListSectionHeaderView.test.tsx.snap
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/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/VirtualizedRoomListView/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/RoomListSectionHeaderView/index.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/index.ts
similarity index 100%
rename from packages/shared-components/src/room-list/RoomListSectionHeaderView/index.ts
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/index.ts
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.module.css b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.module.css
index c444c8c1cd..e42f1fbaca 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.module.css
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.module.css
@@ -9,6 +9,5 @@
  * Room list container styles
  */
 .roomList {
-    height: 100%;
     width: 100%;
 }
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx
index 942130acac..b1c312cee0 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx
@@ -9,7 +9,7 @@ import React, { type JSX } from "react";
 import { fn } from "storybook/test";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { Room } from "../RoomListItemView";
+import type { Room } from "./RoomListItemAccessibilityWrapper/RoomListItemView";
 import { VirtualizedRoomListView, type RoomListViewState } from "./VirtualizedRoomListView";
 import type { RoomListViewSnapshot, RoomListViewActions } from "../RoomListView";
 import { useMockedViewModel } from "../../core/viewmodel";
@@ -34,6 +34,7 @@ const RoomListWrapperImpl = ({
     getRoomItemViewModel,
     getSectionHeaderViewModel,
     updateVisibleRooms,
+    closeToast,
     renderAvatar: renderAvatarProp,
     ...rest
 }: RoomListStoryProps): JSX.Element => {
@@ -44,6 +45,7 @@ const RoomListWrapperImpl = ({
         getRoomItemViewModel,
         getSectionHeaderViewModel,
         updateVisibleRooms,
+        closeToast,
     });
 
     return (
@@ -82,6 +84,7 @@ const meta = {
         updateVisibleRooms: fn(),
         renderAvatar,
         isFlatList: true,
+        closeToast: fn(),
     },
     parameters: {
         design: {
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.test.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.test.tsx
index 2d5ff3ed34..f37302a129 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.test.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.test.tsx
@@ -13,7 +13,7 @@ import { describe, it, expect } from "vitest";
 
 import * as stories from "./VirtualizedRoomListView.stories";
 
-const { Default } = composeStories(stories);
+const { Default, Sections } = composeStories(stories);
 
 const renderWithMockContext = (component: React.ReactElement): ReturnType<typeof render> => {
     return render(component, {
@@ -64,4 +64,28 @@ describe("<VirtualizedRoomListView />", () => {
         renderWithMockContext(<Default />);
         expect(Default.args.updateVisibleRooms).toHaveBeenCalled();
     });
+
+    describe("scrollToSectionTag", () => {
+        it("skips scroll when scrollToSectionTag does not match any section", () => {
+            const roomListState = {
+                activeRoomIndex: 0,
+                spaceId: "!space:server",
+                scrollToSectionTag: "nonexistent",
+            };
+            renderWithMockContext(<Sections roomListState={roomListState} />);
+            expect(screen.getByRole("treegrid", { name: "Room list" })).toBeInTheDocument();
+        });
+
+        it("scrolls to the section when scrollToSectionTag matches", () => {
+            // sections: favourites(3 rooms), chats(1 room), low-priority(6 rooms)
+            // flat index for "chats" = 3 rooms + 1 header = 4
+            const roomListState = {
+                activeRoomIndex: 0,
+                spaceId: "!space:server",
+                scrollToSectionTag: "chats",
+            };
+            renderWithMockContext(<Sections roomListState={roomListState} />);
+            expect(screen.getByRole("treegrid", { name: "Room list" })).toBeInTheDocument();
+        });
+    });
 });
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx
index fbfb3d617a..2cf7ce76c7 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx
@@ -5,11 +5,11 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { useCallback, useMemo, useRef, type JSX, type ReactNode } from "react";
-import { type ScrollIntoViewLocation } from "react-virtuoso";
+import React, { useCallback, useLayoutEffect, useMemo, useRef, type JSX, type ReactNode } from "react";
+import { type ScrollIntoViewLocation, type VirtuosoHandle } from "react-virtuoso";
 import { isEqual } from "lodash";
 
-import { type Room } from "../RoomListItemView";
+import { type Room } from "./RoomListItemAccessibilityWrapper/RoomListItemView";
 import { useViewModel } from "../../core/viewmodel";
 import { _t } from "../../core/i18n/i18n";
 import {
@@ -19,8 +19,9 @@ import {
 } from "../../core/VirtualizedList";
 import type { RoomListViewSnapshot, RoomListViewModel } from "../RoomListView";
 import { GroupedVirtualizedList } from "../../core/VirtualizedList";
-import { RoomListSectionHeaderView } from "../RoomListSectionHeaderView";
-import { RoomListItemAccessibilityWrapper } from "../RoomListItemAccessibilityWrapper";
+import { RoomListSectionHeaderView } from "./RoomListSectionHeaderView";
+import { RoomListItemAccessibilityWrapper } from "./RoomListItemAccessibilityWrapper";
+import styles from "./VirtualizedRoomListView.module.css";
 
 /**
  * Filter key type - opaque string type for filter identifiers
@@ -37,6 +38,8 @@ export interface RoomListViewState {
     spaceId?: string;
     /** Active filter keys for context tracking */
     filterKeys?: FilterKey[];
+    /** Tag of a newly created section header to scroll into view */
+    scrollToSectionTag?: string;
 }
 
 /**
@@ -109,8 +112,13 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
     const snapshot = useViewModel(vm);
     const { roomListState, sections, isFlatList } = snapshot;
     const activeRoomIndex = roomListState.activeRoomIndex;
+    const scrollToSectionTag = roomListState.scrollToSectionTag;
     const lastSpaceId = useRef<string | undefined>(undefined);
     const lastFilterKeys = useRef<FilterKey[] | undefined>(undefined);
+    const virtuosoHandleRef = useRef<VirtuosoHandle | null>(null);
+    const setVirtuosoHandle = useCallback((handle: VirtuosoHandle | null) => {
+        virtuosoHandleRef.current = handle;
+    }, []);
     const roomIds = useMemo(() => sections.flatMap((section) => section.roomIds), [sections]);
     const roomCount = roomIds.length;
     const sectionCount = sections.length;
@@ -327,6 +335,16 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
         [activeRoomIndex],
     );
 
+    // Imperatively scroll to a newly created section header.
+    // scrollIntoView on virtuoso handle is more reliable in this case vs scrollIntoViewOnChange
+    useLayoutEffect(() => {
+        if (scrollToSectionTag === undefined) return;
+        const sectionIndex = sections.findIndex((s) => s.id === scrollToSectionTag);
+        if (sectionIndex === -1) return;
+        const flatIndex = sections.slice(0, sectionIndex).reduce((acc, s) => acc + s.roomIds.length + 1, 0);
+        virtuosoHandleRef.current?.scrollIntoView({ index: flatIndex, align: "start", behavior: "auto" });
+    }, [scrollToSectionTag, sections]);
+
     const isItemFocusable = useCallback(() => true, []);
     const isGroupHeaderFocusable = useCallback(() => true, []);
     const increaseViewportBy = useMemo(
@@ -350,6 +368,7 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
         rangeChanged,
         onKeyDown,
         increaseViewportBy,
+        className: styles.roomList,
     };
 
     if (isFlatList) {
@@ -367,6 +386,7 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
         <GroupedVirtualizedList<string, string, Context>
             {...commonProps}
             {...getContainerAccessibleProps("treegrid", totalCount)}
+            scrollHandleRef={setVirtuosoHandle}
             groups={groups}
             getHeaderKey={getHeaderKey}
             getGroupHeaderComponent={getGroupHeaderComponent}
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..03e092feff 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
@@ -10,6 +10,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
     >
       <div
         aria-label="Room list"
+        class="VirtualizedRoomListView-module_roomList"
         data-testid="room-list"
         data-virtuoso-scroller="true"
         role="listbox"
@@ -36,7 +37,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 +45,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 +56,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 +147,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 +186,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 +194,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 +205,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 +220,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 +290,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -307,7 +308,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 +316,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 +327,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 +418,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -435,7 +436,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 +444,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 +455,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 +470,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 +540,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -557,7 +558,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 +566,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 +577,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 +668,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -685,7 +686,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 +694,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 +705,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 +720,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 +790,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 +831,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 +839,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 +850,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 +941,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -958,7 +959,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 +967,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 +978,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 +993,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 +1063,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -1080,7 +1081,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 +1089,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 +1100,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 +1191,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -1208,7 +1209,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 +1217,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 +1228,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 +1243,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 +1313,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-list/VirtualizedRoomListView/index.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/index.ts
index da5840ada5..fc310f6cb5 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/index.ts
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/index.ts
@@ -7,3 +7,5 @@
 
 export { VirtualizedRoomListView } from "./VirtualizedRoomListView";
 export type { VirtualizedRoomListViewProps, RoomListViewState, FilterKey } from "./VirtualizedRoomListView";
+export * from "./RoomListSectionHeaderView";
+export * from "./RoomListItemAccessibilityWrapper";
diff --git a/packages/shared-components/src/room-list/story-mocks.tsx b/packages/shared-components/src/room-list/story-mocks.tsx
index bd4b2b6a90..5d2e615859 100644
--- a/packages/shared-components/src/room-list/story-mocks.tsx
+++ b/packages/shared-components/src/room-list/story-mocks.tsx
@@ -13,8 +13,8 @@ import {
     type RoomListItemViewModel,
     type RoomListItemViewSnapshot,
     RoomNotifState,
-} from "./RoomListItemView";
-import { type RoomListSectionHeaderViewModel } from "./RoomListSectionHeaderView";
+} from "./VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView";
+import { type RoomListSectionHeaderViewModel } from "./VirtualizedRoomListView/RoomListSectionHeaderView";
 import { MockViewModel } from "../core/viewmodel";
 
 /**
@@ -105,6 +105,8 @@ export const createMockRoomSnapshot = (id: string, name: string, index: number):
     canMarkAsRead: false,
     canMarkAsUnread: true,
     roomNotifState: RoomNotifState.AllMessages,
+    canMoveToSection: true,
+    sections: [],
 });
 
 export function createMockRoomItemViewModel(roomId: string, name: string, index: number): RoomListItemViewModel {
@@ -121,6 +123,8 @@ export function createMockRoomItemViewModel(roomId: string, name: string, index:
         onCopyRoomLink: fn(),
         onLeaveRoom: fn(),
         onSetRoomNotifState: fn(),
+        onCreateSection: fn(),
+        onToggleSection: fn(),
     };
 }
 
diff --git a/packages/shared-components/src/room/HistoryVisibilityBadge/__snapshots__/HistoryVisibilityBadge.test.tsx.snap b/packages/shared-components/src/room/HistoryVisibilityBadge/__snapshots__/HistoryVisibilityBadge.test.tsx.snap
index e284eb7a51..51459abcdc 100644
--- a/packages/shared-components/src/room/HistoryVisibilityBadge/__snapshots__/HistoryVisibilityBadge.test.tsx.snap
+++ b/packages/shared-components/src/room/HistoryVisibilityBadge/__snapshots__/HistoryVisibilityBadge.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`HistoryVisibilityBadge > renders the badge for invited 1`] = `
 <div>
   <span
-    class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+    class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
     data-kind="blue"
   >
     <svg
@@ -26,7 +26,7 @@ exports[`HistoryVisibilityBadge > renders the badge for invited 1`] = `
 exports[`HistoryVisibilityBadge > renders the badge for joined 1`] = `
 <div>
   <span
-    class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+    class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
     data-kind="blue"
   >
     <svg
@@ -49,7 +49,7 @@ exports[`HistoryVisibilityBadge > renders the badge for joined 1`] = `
 exports[`HistoryVisibilityBadge > renders the badge for shared 1`] = `
 <div>
   <span
-    class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+    class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
     data-kind="blue"
   >
     <svg
@@ -75,7 +75,7 @@ exports[`HistoryVisibilityBadge > renders the badge for shared 1`] = `
 exports[`HistoryVisibilityBadge > renders the badge for world_readable 1`] = `
 <div>
   <span
-    class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
+    class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_10dml_8"
     data-kind="blue"
   >
     <svg
diff --git a/packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.tsx b/packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.tsx
index a5bbb63994..f6706f7360 100644
--- a/packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.tsx
+++ b/packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.tsx
@@ -12,7 +12,7 @@ import { Button, InlineSpinner, Text } from "@vector-im/compound-web";
 import styles from "./RoomStatusBarView.module.css";
 import { type ViewModel, useViewModel } from "../../core/viewmodel";
 import { useI18n } from "../../core/i18n/i18nContext";
-import { Banner } from "../../composer/Banner";
+import { Banner } from "../composer/Banner";
 export interface RoomStatusBarViewActions {
     /**
      * Called when the user clicks on the 'resend all' button in the 'unsent messages' bar.
@@ -291,7 +291,6 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
                                         size="sm"
                                         kind="secondary"
                                         Icon={DeleteIcon}
-                                        disabled={snapshot.isResending}
                                         className={styles.secondaryAction}
                                         onClick={deleteAllClick}
                                     >
@@ -303,7 +302,6 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
                                         size="sm"
                                         kind="primary"
                                         Icon={RestartIcon}
-                                        disabled={snapshot.isResending}
                                         onClick={resendClick}
                                         className={styles.primaryAction}
                                     >
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 46fbdd824c..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,30 +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
-        aria-disabled="false"
-        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"
@@ -303,8 +302,7 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
         Delete all
       </button>
       <button
-        aria-disabled="false"
-        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"
@@ -333,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"
@@ -354,30 +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
-        aria-disabled="false"
-        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"
@@ -398,8 +395,7 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
         Delete all
       </button>
       <button
-        aria-disabled="false"
-        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"
@@ -428,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"
@@ -449,30 +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
-        aria-disabled="false"
-        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"
@@ -493,8 +488,7 @@ exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
         Delete all
       </button>
       <button
-        aria-disabled="false"
-        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/composer/Banner/Banner.module.css b/packages/shared-components/src/room/composer/Banner/Banner.module.css
similarity index 100%
rename from packages/shared-components/src/composer/Banner/Banner.module.css
rename to packages/shared-components/src/room/composer/Banner/Banner.module.css
diff --git a/packages/shared-components/src/composer/Banner/Banner.stories.tsx b/packages/shared-components/src/room/composer/Banner/Banner.stories.tsx
similarity index 100%
rename from packages/shared-components/src/composer/Banner/Banner.stories.tsx
rename to packages/shared-components/src/room/composer/Banner/Banner.stories.tsx
diff --git a/packages/shared-components/src/composer/Banner/Banner.test.tsx b/packages/shared-components/src/room/composer/Banner/Banner.test.tsx
similarity index 100%
rename from packages/shared-components/src/composer/Banner/Banner.test.tsx
rename to packages/shared-components/src/room/composer/Banner/Banner.test.tsx
diff --git a/packages/shared-components/src/composer/Banner/Banner.tsx b/packages/shared-components/src/room/composer/Banner/Banner.tsx
similarity index 98%
rename from packages/shared-components/src/composer/Banner/Banner.tsx
rename to packages/shared-components/src/room/composer/Banner/Banner.tsx
index 0e5779d8fd..1253c25fe1 100644
--- a/packages/shared-components/src/composer/Banner/Banner.tsx
+++ b/packages/shared-components/src/room/composer/Banner/Banner.tsx
@@ -20,7 +20,7 @@ import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"
 import InfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info";
 
 import styles from "./Banner.module.css";
-import { _t } from "../../core/i18n/i18n";
+import { _t } from "../../../core/i18n/i18n";
 
 interface BannerProps {
     /**
diff --git a/packages/shared-components/src/composer/Banner/__snapshots__/Banner.test.tsx.snap b/packages/shared-components/src/room/composer/Banner/__snapshots__/Banner.test.tsx.snap
similarity index 89%
rename from packages/shared-components/src/composer/Banner/__snapshots__/Banner.test.tsx.snap
rename to packages/shared-components/src/room/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/room/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/composer/Banner/index.ts b/packages/shared-components/src/room/composer/Banner/index.ts
similarity index 100%
rename from packages/shared-components/src/composer/Banner/index.ts
rename to packages/shared-components/src/room/composer/Banner/index.ts
diff --git a/packages/shared-components/src/right-panel/WidgetContextMenu/WidgetContextMenuView.stories.tsx b/packages/shared-components/src/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.stories.tsx
similarity index 94%
rename from packages/shared-components/src/right-panel/WidgetContextMenu/WidgetContextMenuView.stories.tsx
rename to packages/shared-components/src/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.stories.tsx
index 6776d119be..d693baf939 100644
--- a/packages/shared-components/src/right-panel/WidgetContextMenu/WidgetContextMenuView.stories.tsx
+++ b/packages/shared-components/src/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.stories.tsx
@@ -16,8 +16,8 @@ import {
     type WidgetContextMenuViewSnapshot,
     WidgetContextMenuView,
 } from "./WidgetContextMenuView";
-import { useMockedViewModel } from "../../core/viewmodel/useMockedViewModel";
-import { withViewDocs } from "../../../.storybook/withViewDocs";
+import { useMockedViewModel } from "../../../core/viewmodel/useMockedViewModel";
+import { withViewDocs } from "../../../../.storybook/withViewDocs";
 
 type WidgetContextMenuViewModelProps = WidgetContextMenuViewSnapshot & WidgetContextMenuViewActions;
 
diff --git a/packages/shared-components/src/right-panel/WidgetContextMenu/WidgetContextMenuView.test.tsx b/packages/shared-components/src/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.test.tsx
similarity index 95%
rename from packages/shared-components/src/right-panel/WidgetContextMenu/WidgetContextMenuView.test.tsx
rename to packages/shared-components/src/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.test.tsx
index 231f77f856..073d2bb963 100644
--- a/packages/shared-components/src/right-panel/WidgetContextMenu/WidgetContextMenuView.test.tsx
+++ b/packages/shared-components/src/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.test.tsx
@@ -19,9 +19,9 @@ import {
     WidgetContextMenuView,
 } from "./WidgetContextMenuView";
 import * as stories from "./WidgetContextMenuView.stories.tsx";
-import { MockViewModel } from "../../core/viewmodel/MockViewModel.ts";
-import { I18nApi } from "../../core/i18n/I18nApi.ts";
-import { I18nContext } from "../../core/i18n/i18nContext.ts";
+import { MockViewModel } from "../../../core/viewmodel/MockViewModel.ts";
+import { I18nApi } from "../../../core/i18n/I18nApi.ts";
+import { I18nContext } from "../../../core/i18n/i18nContext.ts";
 
 const { Default, OnlyBasicModification } = composeStories(stories);
 
diff --git a/packages/shared-components/src/right-panel/WidgetContextMenu/WidgetContextMenuView.tsx b/packages/shared-components/src/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.tsx
similarity index 96%
rename from packages/shared-components/src/right-panel/WidgetContextMenu/WidgetContextMenuView.tsx
rename to packages/shared-components/src/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.tsx
index 0aadc64e20..1cad04b59e 100644
--- a/packages/shared-components/src/right-panel/WidgetContextMenu/WidgetContextMenuView.tsx
+++ b/packages/shared-components/src/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.tsx
@@ -9,9 +9,9 @@ import React, { type ReactNode, type JSX } from "react";
 import { IconButton, Menu, MenuItem } from "@vector-im/compound-web";
 import TriggerIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
 
-import { type ViewModel } from "../../core/viewmodel/ViewModel.ts";
-import { useI18n } from "../../core/i18n/i18nContext.ts";
-import { useViewModel } from "../../core/viewmodel/useViewModel.ts";
+import { type ViewModel } from "../../../core/viewmodel/ViewModel.ts";
+import { useI18n } from "../../../core/i18n/i18nContext.ts";
+import { useViewModel } from "../../../core/viewmodel/useViewModel.ts";
 
 export interface WidgetContextMenuViewSnapshot {
     /**
diff --git a/packages/shared-components/src/right-panel/WidgetContextMenu/__snapshots__/WidgetContextMenuView.test.tsx.snap b/packages/shared-components/src/room/right-panel/WidgetContextMenuView/__snapshots__/WidgetContextMenuView.test.tsx.snap
similarity index 100%
rename from packages/shared-components/src/right-panel/WidgetContextMenu/__snapshots__/WidgetContextMenuView.test.tsx.snap
rename to packages/shared-components/src/room/right-panel/WidgetContextMenuView/__snapshots__/WidgetContextMenuView.test.tsx.snap
diff --git a/packages/shared-components/src/right-panel/WidgetContextMenu/index.ts b/packages/shared-components/src/room/right-panel/WidgetContextMenuView/index.ts
similarity index 100%
rename from packages/shared-components/src/right-panel/WidgetContextMenu/index.ts
rename to packages/shared-components/src/room/right-panel/WidgetContextMenuView/index.ts
diff --git a/packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorButton.tsx b/packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorButton.tsx
index 0f1bd9b3a4..d259d3325f 100644
--- a/packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorButton.tsx
+++ b/packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorButton.tsx
@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React from "react";
+import React, { forwardRef } from "react";
 import { Heading, Tooltip } from "@vector-im/compound-web";
 import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
 
@@ -20,8 +20,6 @@ export interface DateSeparatorButtonProps {
     tooltipOpen?: boolean;
     /** Extra CSS classes to apply to the component. */
     className?: string;
-    /** Optional ref for the button container element. */
-    buttonRef?: React.Ref<HTMLDivElement>;
     /** Called when the pointer enters the button trigger. */
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
     /** Called when the pointer leaves the button trigger. */
@@ -32,19 +30,17 @@ export interface DateSeparatorButtonProps {
     onBlur?: React.FocusEventHandler<HTMLDivElement>;
 }
 
-/** Interactive date separator button that opens the jump-to-date menu. */
-export function DateSeparatorButton({
-    label,
-    tooltipOpen,
-    className,
-    buttonRef,
-    ...props
-}: DateSeparatorButtonProps): React.ReactNode {
+/** Interactive date separator button that forwards its ref to the underlying trigger element used by Compound Menu. */
+export const DateSeparatorButton = forwardRef<HTMLDivElement, DateSeparatorButtonProps>(function DateSeparatorButton(
+    { label, tooltipOpen, className, ...props },
+    forwardedRef,
+): React.ReactNode {
     const { translate: _t } = useI18n();
+
     return (
         <Tooltip description={_t("room|jump_to_date")} placement="right" open={tooltipOpen}>
             <Flex
-                ref={buttonRef}
+                ref={forwardedRef}
                 data-testid="jump-to-date-separator-button"
                 className={className}
                 aria-live="off"
@@ -60,4 +56,4 @@ export function DateSeparatorButton({
             </Flex>
         </Tooltip>
     );
-}
+});
diff --git a/packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorView.test.tsx b/packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorView.test.tsx
index 703b0cd195..b21f1efecc 100644
--- a/packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorView.test.tsx
+++ b/packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorView.test.tsx
@@ -7,12 +7,13 @@
 
 import { render, screen } from "@test-utils";
 import { composeStories } from "@storybook/react-vite";
-import React from "react";
+import React, { createRef } from "react";
 import { describe, it, expect } from "vitest";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import { BaseViewModel } from "../../../core/viewmodel/BaseViewModel";
+import { DateSeparatorButton } from "./DateSeparatorButton";
 import { DateSeparatorView, type DateSeparatorViewModel, type DateSeparatorViewSnapshot } from "./DateSeparatorView";
 import * as stories from "./DateSeparatorView.stories";
 
@@ -73,4 +74,12 @@ describe("DateSeparatorView", () => {
         vm.setSnapshot({ label: "Yesterday" });
         await waitFor(() => expect(screen.getByText("Yesterday", { selector: "h2" })).toBeInTheDocument());
     });
+
+    it("forwards refs to the trigger element", () => {
+        const ref = createRef<HTMLDivElement>();
+
+        render(<DateSeparatorButton ref={ref} label="Today" />);
+
+        expect(ref.current).toBe(screen.getByTestId("jump-to-date-separator-button"));
+    });
 });
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/ReadMarker/ReadMarker.module.css b/packages/shared-components/src/room/timeline/ReadMarker/ReadMarker.module.css
new file mode 100644
index 0000000000..b2717d31b3
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/ReadMarker/ReadMarker.module.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.readMarker {
+    height: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+.line {
+    margin-top: 0;
+    position: relative;
+    top: -1px;
+    z-index: 1;
+    width: 99%;
+    opacity: 1;
+    border-top: solid 1px var(--cpd-color-icon-accent-tertiary);
+    border-bottom: solid 1px var(--cpd-color-icon-accent-tertiary);
+    will-change: width, opacity;
+    transition:
+        width 400ms easeinsine 1s,
+        opacity 400ms easeinsine 1s;
+}
diff --git a/packages/shared-components/src/room/timeline/ReadMarker/ReadMarker.stories.tsx b/packages/shared-components/src/room/timeline/ReadMarker/ReadMarker.stories.tsx
new file mode 100644
index 0000000000..8b393e0151
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/ReadMarker/ReadMarker.stories.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import { fn } from "storybook/test";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ReadMarker, type ReadMarkerProps } from "./ReadMarker";
+
+const ReadMarkerWrapper = ({
+    className,
+    onCurrentMarkerRef,
+    onGhostLineRef,
+    onGhostTransitionEnd,
+    ...props
+}: Readonly<ReadMarkerProps>): JSX.Element => {
+    return (
+        <ul>
+            <ReadMarker
+                {...props}
+                className={className}
+                onCurrentMarkerRef={onCurrentMarkerRef ?? fn()}
+                onGhostLineRef={onGhostLineRef ?? fn()}
+                onGhostTransitionEnd={onGhostTransitionEnd ?? fn()}
+            />
+        </ul>
+    );
+};
+
+const meta = {
+    title: "Timeline/ReadMarker",
+    component: ReadMarkerWrapper,
+    tags: ["autodocs"],
+    args: {
+        eventId: "$event",
+        kind: "current",
+        showLine: true,
+    },
+} satisfies Meta<typeof ReadMarkerWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Current: Story = {};
+
+export const HiddenCurrent: Story = {
+    args: {
+        showLine: false,
+    },
+};
+
+export const Ghost: Story = {
+    args: {
+        kind: "ghost",
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/ReadMarker/ReadMarker.test.tsx b/packages/shared-components/src/room/timeline/ReadMarker/ReadMarker.test.tsx
new file mode 100644
index 0000000000..37d8ad186f
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/ReadMarker/ReadMarker.test.tsx
@@ -0,0 +1,85 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { composeStories } from "@storybook/react-vite";
+import { fireEvent, render, screen } from "@test-utils";
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { ReadMarker } from "./ReadMarker";
+import * as stories from "./ReadMarker.stories";
+
+const { Current, HiddenCurrent, Ghost } = composeStories(stories);
+
+describe("ReadMarker", () => {
+    it("renders the current read marker", () => {
+        const { container } = render(<Current />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders the hidden current read marker without a line", () => {
+        const { container } = render(<HiddenCurrent />);
+        expect(container).toMatchSnapshot();
+        expect(container.querySelector("hr")).toBeNull();
+    });
+
+    it("renders the ghost read marker", () => {
+        const { container } = render(<Ghost />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("applies custom className to the list item", () => {
+        render(
+            <ul>
+                <ReadMarker
+                    eventId="$event"
+                    kind="current"
+                    showLine={true}
+                    className="custom-read-marker compatibility-class"
+                />
+            </ul>,
+        );
+
+        const item = screen.getByRole("listitem");
+        expect(item).toHaveClass("custom-read-marker", "compatibility-class");
+        expect(item).toHaveAttribute("data-scroll-tokens", "$event");
+    });
+
+    it("wires ghost marker actions", () => {
+        const onGhostLineRef = vi.fn();
+        const onGhostTransitionEnd = vi.fn();
+
+        render(
+            <ul>
+                <ReadMarker
+                    eventId="$ghost"
+                    kind="ghost"
+                    onGhostLineRef={onGhostLineRef}
+                    onGhostTransitionEnd={onGhostTransitionEnd}
+                />
+            </ul>,
+        );
+
+        const line = screen.getByRole("separator");
+        fireEvent.transitionEnd(line);
+
+        expect(onGhostLineRef).toHaveBeenCalled();
+        expect(onGhostTransitionEnd).toHaveBeenCalledTimes(1);
+    });
+
+    it("wires the current marker ref", () => {
+        const onCurrentMarkerRef = vi.fn();
+
+        render(
+            <ul>
+                <ReadMarker eventId="$current" kind="current" showLine={true} onCurrentMarkerRef={onCurrentMarkerRef} />
+            </ul>,
+        );
+
+        expect(onCurrentMarkerRef).toHaveBeenCalled();
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/ReadMarker/ReadMarker.tsx b/packages/shared-components/src/room/timeline/ReadMarker/ReadMarker.tsx
new file mode 100644
index 0000000000..48396b14cd
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/ReadMarker/ReadMarker.tsx
@@ -0,0 +1,80 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX, type RefCallback, type TransitionEventHandler } from "react";
+import classNames from "classnames";
+
+import styles from "./ReadMarker.module.css";
+
+export type ReadMarkerKind = "current" | "ghost";
+
+export interface ReadMarkerProps {
+    /**
+     * The event ID this marker is associated with.
+     */
+    eventId: string;
+    /**
+     * Whether this is the active read marker or a ghost marker transitioning out.
+     */
+    kind: ReadMarkerKind;
+    /**
+     * Whether the visible line should be rendered for the active marker.
+     * Hidden active markers still render the host `<li>` to preserve layout calculations.
+     */
+    showLine?: boolean;
+    /**
+     * Ref callback for the active read marker `<li>`.
+     */
+    onCurrentMarkerRef?: RefCallback<HTMLLIElement>;
+    /**
+     * Ref callback for the ghost marker `<hr>`.
+     */
+    onGhostLineRef?: RefCallback<HTMLHRElement>;
+    /**
+     * Transition-end handler for the ghost marker `<hr>`.
+     */
+    onGhostTransitionEnd?: TransitionEventHandler<HTMLHRElement>;
+    /**
+     * Optional CSS className for the outer list item.
+     */
+    className?: string;
+}
+
+export function ReadMarker({
+    eventId,
+    kind,
+    showLine = true,
+    onCurrentMarkerRef,
+    onGhostLineRef,
+    onGhostTransitionEnd,
+    className,
+}: Readonly<ReadMarkerProps>): JSX.Element {
+    let line: JSX.Element | null = null;
+
+    if (kind === "ghost") {
+        line = (
+            <hr
+                className={styles.line}
+                ref={onGhostLineRef}
+                onTransitionEnd={onGhostTransitionEnd}
+                data-eventid={eventId}
+            />
+        );
+    } else if (showLine) {
+        line = <hr className={styles.line} />;
+    }
+
+    return (
+        <li
+            className={classNames(className, styles.readMarker)}
+            ref={kind === "current" ? onCurrentMarkerRef : undefined}
+            data-scroll-tokens={kind === "current" ? eventId : undefined}
+        >
+            {line}
+        </li>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/ReadMarker/__snapshots__/ReadMarker.test.tsx.snap b/packages/shared-components/src/room/timeline/ReadMarker/__snapshots__/ReadMarker.test.tsx.snap
new file mode 100644
index 0000000000..1edd576858
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/ReadMarker/__snapshots__/ReadMarker.test.tsx.snap
@@ -0,0 +1,42 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ReadMarker > renders the current read marker 1`] = `
+<div>
+  <ul>
+    <li
+      class="ReadMarker-module_readMarker"
+      data-scroll-tokens="$event"
+    >
+      <hr
+        class="ReadMarker-module_line"
+      />
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`ReadMarker > renders the ghost read marker 1`] = `
+<div>
+  <ul>
+    <li
+      class="ReadMarker-module_readMarker"
+    >
+      <hr
+        class="ReadMarker-module_line"
+        data-eventid="$event"
+      />
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`ReadMarker > renders the hidden current read marker without a line 1`] = `
+<div>
+  <ul>
+    <li
+      class="ReadMarker-module_readMarker"
+      data-scroll-tokens="$event"
+    />
+  </ul>
+</div>
+`;
diff --git a/packages/shared-components/src/room-list/RoomListItemView/NotificationDecoration/index.tsx b/packages/shared-components/src/room/timeline/ReadMarker/index.tsx
similarity index 55%
rename from packages/shared-components/src/room-list/RoomListItemView/NotificationDecoration/index.tsx
rename to packages/shared-components/src/room/timeline/ReadMarker/index.tsx
index 42c7a3451f..b172c3a943 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/NotificationDecoration/index.tsx
+++ b/packages/shared-components/src/room/timeline/ReadMarker/index.tsx
@@ -5,5 +5,4 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-export { NotificationDecoration } from "./NotificationDecoration";
-export type { NotificationDecorationProps, NotificationDecorationData } from "./NotificationDecoration";
+export { ReadMarker, type ReadMarkerKind, type ReadMarkerProps } from "./ReadMarker";
diff --git a/packages/shared-components/src/room/timeline/ReadMarkerView/.gitkeep b/packages/shared-components/src/room/timeline/ReadMarkerView/.gitkeep
deleted file mode 100644
index 8b13789179..0000000000
--- a/packages/shared-components/src/room/timeline/ReadMarkerView/.gitkeep
+++ /dev/null
@@ -1 +0,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/TextualEventView/TextualEventView.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.tsx
index 7984d70ab9..f22c0e5edd 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.tsx
@@ -17,6 +17,12 @@ export interface Props {
     vm: ViewModel<TextualEventViewSnapshot>;
 }
 
+/**
+ * Renders a plain textual timeline event without message-body decorations.
+ *
+ * This view is used for simple informational timeline entries where the
+ * content is already prepared by the view model.
+ */
 export function TextualEventView({ vm }: Props): JSX.Element {
     const snapshot = useViewModel(vm);
     return <div className="mx_TextualEvent">{snapshot.content}</div>;
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/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
new file mode 100644
index 0000000000..407f26e06a
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
@@ -0,0 +1,126 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+button.preview {
+    background: #fff;
+}
+
+.preview {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 200px;
+    background-size: cover;
+    background-position: center;
+    border: none;
+    padding: 0;
+    > img {
+        width: 100%;
+        object-fit: cover;
+    }
+    .playButton[data-kind="primary"] {
+        padding: 0;
+        width: 50px;
+        height: 50px;
+        margin: auto;
+        background: var(--cpd-color-text-on-solid-primary);
+        > svg {
+            margin: auto;
+            border-radius: 50px;
+            color: var(--cpd-color-icon-primary);
+        }
+    }
+}
+
+.container {
+    max-width: 478px;
+    display: flex;
+    border: 1px solid var(--cpd-color-bg-subtle-secondary);
+    border-radius: 12px; /* Get radius from cpd */
+    flex-direction: column;
+    color: var(--cpd-color-gray-900);
+    overflow: clip;
+
+    background: var(--cpd-color-bg-subtle-secondary);
+
+    &.inline {
+        flex-direction: row;
+        gap: var(--cpd-space-4x);
+        padding: var(--cpd-space-3x) var(--cpd-space-4x);
+
+        .title {
+            margin: 0;
+        }
+
+        .siteAvatar {
+            margin: auto 0;
+        }
+
+        .siteName {
+            margin: 0;
+        }
+    }
+
+    .textContent {
+        padding: var(--cpd-space-3x) var(--cpd-space-4x);
+        &.inline {
+            padding: 0;
+        }
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-1x);
+    }
+
+    .caption {
+        display: inline-flex;
+        flex-direction: column;
+        min-width: 0; /* Prevent blowout */
+    }
+    .caption {
+        flex: 1;
+        overflow: hidden; /* cause it to wrap rather than clip */
+    }
+
+    .title,
+    .description {
+        display: inline-block;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        white-space: normal;
+    }
+
+    .title {
+        display: inline-block;
+        line-clamp: 2;
+        -webkit-line-clamp: 2;
+        margin: var(--cpd-space-1x) 0;
+        font-weight: var(--cpd-font-weight-semibold);
+        color: var(--cpd-color-text-primary);
+        text-decoration-line: none;
+    }
+
+    .description {
+        font-size: var(--cpd-font-size-body-lg);
+        margin: 0;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        overflow: hidden;
+    }
+
+    .siteName {
+        margin-top: var(--cpd-space-1x);
+        vertical-align: middle;
+        display: flex;
+        gap: var(--cpd-space-1-5x);
+        > * {
+            /* Center everything */
+            margin: auto 0;
+        }
+    }
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx
new file mode 100644
index 0000000000..dceaecc1df
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx
@@ -0,0 +1,169 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { fn } from "storybook/test";
+
+import type { Meta, StoryFn } from "@storybook/react-vite";
+import { LinkPreview } from "./LinkPreview";
+import { LinkedTextContext } from "../../../../../core/utils/LinkedText";
+import imageFile from "../../../../../../static/element.png";
+import imageFileWide from "../../../../../../static/wideImage.png";
+
+export default {
+    title: "Event/UrlPreviewGroupView/LinkPreview",
+    component: LinkPreview,
+    tags: ["autodocs"],
+    args: {
+        onImageClick: fn(),
+    },
+    argTypes: {
+        siteName: {
+            control: "text",
+        },
+        author: {
+            control: "text",
+        },
+        siteIcon: { control: { type: "file", accept: ".png" } },
+        image: {},
+    },
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/sI9A2kV2K4xeiyqJsL7Ey3/Link-Previews?node-id=87-7920",
+        },
+    },
+} satisfies Meta<typeof LinkPreview>;
+
+const Template: StoryFn<typeof LinkPreview> = (args) => (
+    <LinkedTextContext.Provider value={{}}>
+        <LinkPreview {...args} />
+    </LinkedTextContext.Provider>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    title: "A simple title",
+    description: "A simple description",
+    link: "https://matrix.org",
+    siteName: "Site name",
+    image: {
+        imageThumb: imageFile,
+        imageFull: imageFile,
+        alt: "Element logo",
+        playable: false,
+    },
+};
+
+export const Title = Template.bind({});
+Title.args = {
+    title: "A simple title",
+    link: "https://matrix.org",
+    siteName: "matrix.org",
+};
+
+export const TitleAndDescription = Template.bind({});
+TitleAndDescription.args = {
+    title: "A simple title",
+    description: "A simple description with a link to https://matrix.org",
+    link: "https://matrix.org",
+    siteName: "matrix.org",
+};
+export const WithSiteIcon = Template.bind({});
+WithSiteIcon.args = {
+    title: "A simple title",
+    link: "https://matrix.org",
+    siteName: "matrix.org",
+    siteIcon: imageFile,
+};
+
+export const WithSiteIconAndDescription = Template.bind({});
+WithSiteIconAndDescription.args = {
+    title: "A simple title",
+    description: "A simple description with a link to https://matrix.org",
+    link: "https://matrix.org",
+    siteName: "matrix.org",
+    siteIcon: imageFile,
+};
+
+export const WithTooltip = Template.bind({});
+WithTooltip.args = {
+    title: "A simple title",
+    description: "A simple description",
+    showTooltipOnLink: true,
+    link: "https://matrix.org",
+    siteName: "matrix.org",
+};
+
+export const Article = Template.bind({});
+Article.args = {
+    title: "A linked article",
+    description:
+        "This is a basic description returned from the linked source, usually with a word or two about what the link contains.",
+    link: "https://matrix.org",
+    siteName: "blog.example.org",
+    image: {
+        imageThumb: imageFileWide,
+        imageFull: imageFileWide,
+        alt: "A dog",
+        playable: false,
+    },
+};
+
+export const Video = Template.bind({});
+Video.args = {
+    title: "A linked video",
+    description:
+        "This is a link to a video. You cannot play the video inline yet, but you can click the play button to open the link",
+    link: "https://matrix.org",
+    siteName: "blog.example.org",
+    image: {
+        imageThumb: imageFileWide,
+        imageFull: imageFileWide,
+        alt: "A dog",
+        playable: true,
+    },
+};
+
+export const Social = Template.bind({});
+Social.args = {
+    description: "Sending a small message",
+    link: "https://matrix.org",
+    siteName: "socialsite.example.org",
+    title: "Test user (@test)",
+    author: "@test",
+};
+
+export const SocialWithImage = Template.bind({});
+SocialWithImage.args = {
+    description: "Sending a message with an attached image.",
+    title: "Test user (@test)",
+    link: "https://matrix.org",
+    siteName: "socialsite.example.org",
+    author: "@test",
+    image: {
+        imageThumb: imageFileWide,
+        imageFull: imageFileWide,
+        alt: "A dog",
+        playable: false,
+    },
+};
+
+export const WithVeryLongText = Template.bind({});
+WithVeryLongText.args = {
+    title: "GitHub - element-hq/not-a-real-repo: A very very long PR title that should be rendered nicely",
+    description:
+        "This PR doesn't actually exist and neither does the repository. It might exist one day if we go into the business of making paradoxical repository names.",
+    link: "https://matrix.org",
+    siteName: "GitHub",
+    image: {
+        imageThumb: imageFile,
+        imageFull: imageFile,
+        alt: "Element logo",
+        playable: false,
+    },
+};
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.test.tsx b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.test.tsx
similarity index 77%
rename from packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.test.tsx
rename to packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.test.tsx
index 3309fe9888..1fa218b6ca 100644
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.test.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.test.tsx
@@ -13,7 +13,7 @@ import userEvent from "@testing-library/user-event";
 
 import * as stories from "./LinkPreview.stories.tsx";
 
-const { Default, WithTooltip, Title, TitleAndDescription } = composeStories(stories);
+const { Default, WithTooltip, Title, TitleAndDescription, Video } = composeStories(stories);
 
 describe("LinkPreview", () => {
     it("renders a preview", () => {
@@ -36,4 +36,10 @@ describe("LinkPreview", () => {
         // Tooltip has the URL
         expect(await screen.findByText("https://matrix.org/")).toBeVisible();
     });
+    it("renders a playable preview that can be opened with a click", () => {
+        const { container } = render(<Video />);
+        expect(container).toMatchSnapshot();
+        const button = screen.getByLabelText("Open link");
+        expect(button).toHaveAttribute("href", "https://matrix.org");
+    });
 });
diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
new file mode 100644
index 0000000000..cea4477e29
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
@@ -0,0 +1,165 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type MouseEventHandler, type JSX, useCallback } from "react";
+import { Tooltip, Text, Avatar, Button } from "@vector-im/compound-web";
+import PlaySolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/play-solid";
+import classNames from "classnames";
+
+import { useI18n } from "../../../../../core/i18n/i18nContext";
+import type { UrlPreview } from "../types";
+import { LinkedText } from "../../../../../core/utils/LinkedText";
+import styles from "./LinkPreview.module.css";
+
+export interface LinkPreviewActions {
+    onImageClick: () => void;
+}
+
+export type LinkPreviewProps = UrlPreview & LinkPreviewActions;
+
+function LinkTitle({
+    title,
+    showTooltipOnLink,
+    link,
+}: Pick<LinkPreviewProps, "title" | "showTooltipOnLink" | "link">): JSX.Element {
+    const caption = new URL(link).toString();
+    const anchor = (
+        <Text
+            as="a"
+            type="body"
+            weight="semibold"
+            size="lg"
+            className={styles.title}
+            href={link}
+            target="_blank"
+            rel="noreferrer noopener"
+        >
+            {title}
+        </Text>
+    );
+    return showTooltipOnLink ? <Tooltip label={caption}>{anchor}</Tooltip> : anchor;
+}
+
+function LinkSiteName({ siteIcon, siteName }: { siteIcon?: string; siteName: string }): JSX.Element {
+    return (
+        <div className={styles.siteName}>
+            {siteIcon && <Avatar size="16px" name={siteName} id={siteName} src={siteIcon} />}
+            <Text as="span" size="sm" weight="regular">
+                {siteName}
+            </Text>
+        </div>
+    );
+}
+
+/**
+ * A condensed link preview that only contains the site icon, the title of the link and the site name.
+ */
+function LinkPreviewInline({
+    title,
+    showTooltipOnLink,
+    siteIcon,
+    siteName,
+    link,
+}: Omit<LinkPreviewProps, "image" | "description" | "author" | "onImageClick">): JSX.Element {
+    return (
+        <div className={classNames(styles.container, styles.inline)}>
+            {siteIcon && (
+                <div className={styles.siteAvatar}>
+                    <Avatar type="square" size="48px" name={title} id={title} src={siteIcon} />
+                </div>
+            )}
+            <div className={classNames(styles.textContent, styles.inline)}>
+                <LinkTitle title={title} showTooltipOnLink={showTooltipOnLink} link={link} />
+                {siteName && <LinkSiteName siteName={siteName} />}
+            </div>
+        </div>
+    );
+}
+
+/**
+ * LinkPreview renders a single preview component for a single link on an event. It is usually rendered as part of
+ * a `UrlPreviewGroupView`.
+ */
+export function LinkPreview({ onImageClick, ...preview }: LinkPreviewProps): JSX.Element {
+    const { translate: _t } = useI18n();
+
+    const onImageClickHandler = useCallback<MouseEventHandler>(
+        (ev) => {
+            if (ev.button != 0 || ev.metaKey) return;
+            ev.preventDefault();
+
+            if (!preview.image?.imageFull) {
+                return;
+            }
+            onImageClick();
+        },
+        [preview.image?.imageFull, onImageClick],
+    );
+
+    if (!preview.image && !preview.author && !preview.description) {
+        return <LinkPreviewInline {...preview} />;
+    }
+
+    let img: JSX.Element | undefined;
+
+    if (preview.image) {
+        if (preview.image.playable) {
+            // Playable media do not have clickable images so we don't
+            // overlay buttons atop buttons, instead we render a
+            // button for them to open the media.
+            img = (
+                <div
+                    style={{
+                        backgroundImage: `url('${preview.image.imageThumb}')`,
+                    }}
+                    className={styles.preview}
+                >
+                    <Button
+                        as="a"
+                        href={preview.link}
+                        aria-label={_t("timeline|url_preview|open_link")}
+                        className={styles.playButton}
+                        target="_blank"
+                        rel="noreferrer noopener"
+                        kind="primary"
+                    >
+                        <PlaySolidIcon width="24px" height="24px" />
+                    </Button>
+                </div>
+            );
+        } else {
+            // Otherwise, the preview can be clicked on.
+            img = (
+                <button
+                    className={styles.preview}
+                    onClick={onImageClickHandler}
+                    aria-label={_t("timeline|url_preview|view_image")}
+                >
+                    <img src={preview.image.imageThumb} alt={preview.image.alt} title={preview.image.alt} />
+                </button>
+            );
+        }
+    }
+
+    return (
+        <div className={styles.container}>
+            {img}
+            <div className={styles.textContent}>
+                {preview.author && (
+                    <Text as="span" size="md" weight="semibold">
+                        {preview.author}
+                    </Text>
+                )}
+                <LinkTitle title={preview.title} showTooltipOnLink={preview.showTooltipOnLink} link={preview.link} />
+                <LinkedText type="body" size="md" className={styles.description}>
+                    {preview.description}
+                </LinkedText>
+                {preview.siteName && <LinkSiteName siteName={preview.siteName} siteIcon={preview.siteIcon} />}
+            </div>
+        </div>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/__snapshots__/LinkPreview.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/__snapshots__/LinkPreview.test.tsx.snap
new file mode 100644
index 0000000000..889d181664
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/__snapshots__/LinkPreview.test.tsx.snap
@@ -0,0 +1,182 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`LinkPreview > renders a playable preview that can be opened with a click 1`] = `
+<div>
+  <div
+    class="LinkPreview-module_container"
+  >
+    <div
+      class="LinkPreview-module_preview"
+      style="background-image: url("/static/wideImage.png");"
+    >
+      <a
+        aria-label="Open link"
+        class="_button_13vu4_8 LinkPreview-module_playButton"
+        data-kind="primary"
+        data-size="lg"
+        href="https://matrix.org"
+        rel="noreferrer noopener"
+        role="link"
+        tabindex="0"
+        target="_blank"
+      >
+        <svg
+          fill="currentColor"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743"
+          />
+        </svg>
+      </a>
+    </div>
+    <div
+      class="LinkPreview-module_textContent"
+    >
+      <a
+        class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 LinkPreview-module_title"
+        href="https://matrix.org"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        A linked video
+      </a>
+      <p
+        class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
+      >
+        This is a link to a video. You cannot play the video inline yet, but you can click the play button to open the link
+      </p>
+      <div
+        class="LinkPreview-module_siteName"
+      >
+        <span
+          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+        >
+          blog.example.org
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LinkPreview > renders a preview 1`] = `
+<div>
+  <div
+    class="LinkPreview-module_container"
+  >
+    <button
+      aria-label="View image"
+      class="LinkPreview-module_preview"
+    >
+      <img
+        alt="Element logo"
+        src="/static/element.png"
+        title="Element logo"
+      />
+    </button>
+    <div
+      class="LinkPreview-module_textContent"
+    >
+      <a
+        class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 LinkPreview-module_title"
+        href="https://matrix.org"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        A simple title
+      </a>
+      <p
+        class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
+      >
+        A simple description
+      </p>
+      <div
+        class="LinkPreview-module_siteName"
+      >
+        <span
+          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+        >
+          Site name
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LinkPreview > renders a preview with just a title 1`] = `
+<div>
+  <div
+    class="LinkPreview-module_container LinkPreview-module_inline"
+  >
+    <div
+      class="LinkPreview-module_textContent LinkPreview-module_inline"
+    >
+      <a
+        class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 LinkPreview-module_title"
+        href="https://matrix.org"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        A simple title
+      </a>
+      <div
+        class="LinkPreview-module_siteName"
+      >
+        <span
+          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+        >
+          matrix.org
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LinkPreview > renders a preview with just a title and description 1`] = `
+<div>
+  <div
+    class="LinkPreview-module_container"
+  >
+    <div
+      class="LinkPreview-module_textContent"
+    >
+      <a
+        class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 LinkPreview-module_title"
+        href="https://matrix.org"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        A simple title
+      </a>
+      <p
+        class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
+      >
+        A simple description with a link to 
+        <a
+          data-linkified="true"
+          href="https://matrix.org"
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          https://matrix.org
+        </a>
+      </p>
+      <div
+        class="LinkPreview-module_siteName"
+      >
+        <span
+          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+        >
+          matrix.org
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/index.ts b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/index.ts
similarity index 100%
rename from packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/index.ts
rename to packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/index.ts
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.module.css b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.module.css
similarity index 100%
rename from packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.module.css
rename to packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.module.css
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx
similarity index 71%
rename from packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx
rename to packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx
index 9a07b08098..43a0e90023 100644
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx
@@ -8,20 +8,21 @@
 import React, { type JSX } from "react";
 import { fn } from "storybook/test";
 
-import imageFile from "../../../static/element.png";
-import tallImageFile from "../../../static/tallImage.png";
+import imageFile from "../../../../../static/element.png";
+import tallImageFile from "../../../../../static/tallImage.png";
 import type { Meta, StoryFn } from "@storybook/react-vite";
 import {
     UrlPreviewGroupView,
     type UrlPreviewGroupViewActions,
     type UrlPreviewGroupViewSnapshot,
 } from "./UrlPreviewGroupView";
-import { useMockedViewModel } from "../../core/viewmodel";
-import { LinkedTextContext } from "../../core/utils/LinkedText";
+import { useMockedViewModel } from "../../../../core/viewmodel";
+import { LinkedTextContext } from "../../../../core/utils/LinkedText";
+import { withViewDocs } from "../../../../../.storybook/withViewDocs";
 
 type UrlPreviewGroupViewProps = UrlPreviewGroupViewSnapshot & UrlPreviewGroupViewActions;
 
-const UrlPreviewGroupViewWrapper = ({
+const UrlPreviewGroupViewWrapperImpl = ({
     onHideClick,
     onImageClick,
     onTogglePreviewLimit,
@@ -39,6 +40,8 @@ const UrlPreviewGroupViewWrapper = ({
     );
 };
 
+const UrlPreviewGroupViewWrapper = withViewDocs(UrlPreviewGroupViewWrapperImpl, UrlPreviewGroupView);
+
 export default {
     title: "Event/UrlPreviewGroupView",
     component: UrlPreviewGroupViewWrapper,
@@ -48,6 +51,12 @@ export default {
         onImageClick: fn(),
         onTogglePreviewLimit: fn(),
     },
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/sI9A2kV2K4xeiyqJsL7Ey3/Link-Previews?node-id=87-7920",
+        },
+    },
 } satisfies Meta<typeof UrlPreviewGroupViewWrapper>;
 
 const Template: StoryFn<typeof UrlPreviewGroupViewWrapper> = (args) => <UrlPreviewGroupViewWrapper {...args} />;
@@ -59,9 +68,13 @@ Default.args = {
             title: "A simple title",
             description: "A simple description",
             link: "https://matrix.org",
+            showTooltipOnLink: false,
+            siteName: "matrix.org",
             image: {
                 imageThumb: imageFile,
                 imageFull: imageFile,
+                alt: "The element logo",
+                playable: false,
             },
         },
     ],
@@ -69,17 +82,7 @@ Default.args = {
 
 export const MultiplePreviewsHidden = Template.bind({});
 MultiplePreviewsHidden.args = {
-    previews: [
-        {
-            title: "A simple title",
-            description: "A simple description",
-            link: "https://matrix.org",
-            image: {
-                imageThumb: imageFile,
-                imageFull: imageFile,
-            },
-        },
-    ],
+    previews: Default.args.previews,
     overPreviewLimit: true,
     previewsLimited: true,
     totalPreviewCount: 10,
@@ -92,9 +95,13 @@ MultiplePreviewsVisible.args = {
             title: "One",
             description: "A regular square image.",
             link: "https://matrix.org",
+            siteName: "matrix.org",
+            showTooltipOnLink: false,
             image: {
                 imageThumb: imageFile,
                 imageFull: imageFile,
+                alt: "The element logo",
+                playable: false,
             },
         },
         // These images should appear the same size despite having different dimensions.
@@ -102,18 +109,26 @@ MultiplePreviewsVisible.args = {
             title: "Two",
             description: "This one has a taller image which should crop nicely.",
             link: "https://matrix.org",
+            siteName: "matrix.org",
+            showTooltipOnLink: false,
             image: {
                 imageThumb: tallImageFile,
                 imageFull: tallImageFile,
+                alt: "A dog",
+                playable: false,
             },
         },
         {
             title: "Three",
             description: "One more description",
             link: "https://matrix.org",
+            siteName: "matrix.org",
+            showTooltipOnLink: false,
             image: {
                 imageThumb: imageFile,
                 imageFull: imageFile,
+                alt: "The element logo",
+                playable: false,
             },
         },
     ],
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.test.tsx
similarity index 100%
rename from packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.test.tsx
rename to packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.test.tsx
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.tsx b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.tsx
similarity index 81%
rename from packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.tsx
rename to packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.tsx
index 8adc982f91..e809ae7b05 100644
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.tsx
@@ -10,8 +10,8 @@ import { Button, IconButton } from "@vector-im/compound-web";
 import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 import classNames from "classnames";
 
-import { useViewModel, type ViewModel } from "../../core/viewmodel";
-import { useI18n } from "../../core/i18n/i18nContext";
+import { useViewModel, type ViewModel } from "../../../../core/viewmodel";
+import { useI18n } from "../../../../core/i18n/i18nContext";
 import type { UrlPreview } from "./types";
 import { LinkPreview } from "./LinkPreview";
 import styles from "./UrlPreviewGroupView.module.css";
@@ -37,7 +37,10 @@ export interface UrlPreviewGroupViewActions {
 export type UrlPreviewGroupViewModel = ViewModel<UrlPreviewGroupViewSnapshot, UrlPreviewGroupViewActions>;
 
 /**
- * UrlPreviewGroupView renders a list of URL previews for a single event.
+ * Renders the URL preview group attached to a single event.
+ *
+ * The view lays out one or more link previews, can collapse or expand
+ * overflowed previews, and exposes a control to hide the group.
  */
 export function UrlPreviewGroupView({ vm }: UrlPreviewGroupViewProps): JSX.Element | null {
     const { translate: _t } = useI18n();
@@ -65,7 +68,12 @@ export function UrlPreviewGroupView({ vm }: UrlPreviewGroupViewProps): JSX.Eleme
                 ))}
                 {toggleButton}
             </div>
-            <IconButton size="20px" onClick={vm.onHideClick} aria-label={_t("timeline|url_preview|close")}>
+            <IconButton
+                kind="secondary"
+                size="28px"
+                onClick={vm.onHideClick}
+                aria-label={_t("timeline|url_preview|close")}
+            >
                 <CloseIcon />
             </IconButton>
         </div>
diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap
new file mode 100644
index 0000000000..616099219e
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap
@@ -0,0 +1,500 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`UrlPreviewGroupView > renders a single preview 1`] = `
+<div>
+  <div
+    class="UrlPreviewGroupView-module_wrapper"
+  >
+    <div
+      class="UrlPreviewGroupView-module_previewGroup"
+    >
+      <div
+        class="LinkPreview-module_container"
+      >
+        <button
+          aria-label="View image"
+          class="LinkPreview-module_preview"
+        >
+          <img
+            alt="The element logo"
+            src="/static/element.png"
+            title="The element logo"
+          />
+        </button>
+        <div
+          class="LinkPreview-module_textContent"
+        >
+          <a
+            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 LinkPreview-module_title"
+            href="https://matrix.org"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            A simple title
+          </a>
+          <p
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
+          >
+            A simple description
+          </p>
+          <div
+            class="LinkPreview-module_siteName"
+          >
+            <span
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+            >
+              matrix.org
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <button
+      aria-label="Close preview"
+      class="_icon-button_1215g_8"
+      data-kind="secondary"
+      role="button"
+      style="--cpd-icon-button-size: 28px;"
+      tabindex="0"
+    >
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
+<div>
+  <div
+    class="UrlPreviewGroupView-module_wrapper"
+  >
+    <div
+      class="UrlPreviewGroupView-module_previewGroup"
+    >
+      <div
+        class="LinkPreview-module_container"
+      >
+        <button
+          aria-label="View image"
+          class="LinkPreview-module_preview"
+        >
+          <img
+            alt="The element logo"
+            src="/static/element.png"
+            title="The element logo"
+          />
+        </button>
+        <div
+          class="LinkPreview-module_textContent"
+        >
+          <a
+            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 LinkPreview-module_title"
+            href="https://matrix.org"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            One
+          </a>
+          <p
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
+          >
+            A regular square image.
+          </p>
+          <div
+            class="LinkPreview-module_siteName"
+          >
+            <span
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+            >
+              matrix.org
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="LinkPreview-module_container"
+      >
+        <button
+          aria-label="View image"
+          class="LinkPreview-module_preview"
+        >
+          <img
+            alt="A dog"
+            src="/static/tallImage.png"
+            title="A dog"
+          />
+        </button>
+        <div
+          class="LinkPreview-module_textContent"
+        >
+          <a
+            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 LinkPreview-module_title"
+            href="https://matrix.org"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            Two
+          </a>
+          <p
+            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>
+          <div
+            class="LinkPreview-module_siteName"
+          >
+            <span
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+            >
+              matrix.org
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="LinkPreview-module_container"
+      >
+        <button
+          aria-label="View image"
+          class="LinkPreview-module_preview"
+        >
+          <img
+            alt="The element logo"
+            src="/static/element.png"
+            title="The element logo"
+          />
+        </button>
+        <div
+          class="LinkPreview-module_textContent"
+        >
+          <a
+            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 LinkPreview-module_title"
+            href="https://matrix.org"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            Three
+          </a>
+          <p
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
+          >
+            One more description
+          </p>
+          <div
+            class="LinkPreview-module_siteName"
+          >
+            <span
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+            >
+              matrix.org
+            </span>
+          </div>
+        </div>
+      </div>
+      <button
+        class="_button_13vu4_8 UrlPreviewGroupView-module_toggleButton"
+        data-kind="tertiary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Collapse
+      </button>
+    </div>
+    <button
+      aria-label="Close preview"
+      class="_icon-button_1215g_8"
+      data-kind="secondary"
+      role="button"
+      style="--cpd-icon-button-size: 28px;"
+      tabindex="0"
+    >
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`UrlPreviewGroupView > renders multiple previews which are hidden 1`] = `
+<div>
+  <div
+    class="UrlPreviewGroupView-module_wrapper"
+  >
+    <div
+      class="UrlPreviewGroupView-module_previewGroup"
+    >
+      <div
+        class="LinkPreview-module_container"
+      >
+        <button
+          aria-label="View image"
+          class="LinkPreview-module_preview"
+        >
+          <img
+            alt="The element logo"
+            src="/static/element.png"
+            title="The element logo"
+          />
+        </button>
+        <div
+          class="LinkPreview-module_textContent"
+        >
+          <a
+            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 LinkPreview-module_title"
+            href="https://matrix.org"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            A simple title
+          </a>
+          <p
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
+          >
+            A simple description
+          </p>
+          <div
+            class="LinkPreview-module_siteName"
+          >
+            <span
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+            >
+              matrix.org
+            </span>
+          </div>
+        </div>
+      </div>
+      <button
+        class="_button_13vu4_8 UrlPreviewGroupView-module_toggleButton"
+        data-kind="tertiary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Show 9 other previews
+      </button>
+    </div>
+    <button
+      aria-label="Close preview"
+      class="_icon-button_1215g_8"
+      data-kind="secondary"
+      role="button"
+      style="--cpd-icon-button-size: 28px;"
+      tabindex="0"
+    >
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`UrlPreviewGroupView > renders with a compact view 1`] = `
+<div>
+  <div
+    class="UrlPreviewGroupView-module_wrapper"
+  >
+    <div
+      class="UrlPreviewGroupView-module_previewGroup UrlPreviewGroupView-module_compactLayout"
+    >
+      <div
+        class="LinkPreview-module_container"
+      >
+        <button
+          aria-label="View image"
+          class="LinkPreview-module_preview"
+        >
+          <img
+            alt="The element logo"
+            src="/static/element.png"
+            title="The element logo"
+          />
+        </button>
+        <div
+          class="LinkPreview-module_textContent"
+        >
+          <a
+            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 LinkPreview-module_title"
+            href="https://matrix.org"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            One
+          </a>
+          <p
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
+          >
+            A regular square image.
+          </p>
+          <div
+            class="LinkPreview-module_siteName"
+          >
+            <span
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+            >
+              matrix.org
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="LinkPreview-module_container"
+      >
+        <button
+          aria-label="View image"
+          class="LinkPreview-module_preview"
+        >
+          <img
+            alt="A dog"
+            src="/static/tallImage.png"
+            title="A dog"
+          />
+        </button>
+        <div
+          class="LinkPreview-module_textContent"
+        >
+          <a
+            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 LinkPreview-module_title"
+            href="https://matrix.org"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            Two
+          </a>
+          <p
+            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>
+          <div
+            class="LinkPreview-module_siteName"
+          >
+            <span
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+            >
+              matrix.org
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="LinkPreview-module_container"
+      >
+        <button
+          aria-label="View image"
+          class="LinkPreview-module_preview"
+        >
+          <img
+            alt="The element logo"
+            src="/static/element.png"
+            title="The element logo"
+          />
+        </button>
+        <div
+          class="LinkPreview-module_textContent"
+        >
+          <a
+            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 LinkPreview-module_title"
+            href="https://matrix.org"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            Three
+          </a>
+          <p
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
+          >
+            One more description
+          </p>
+          <div
+            class="LinkPreview-module_siteName"
+          >
+            <span
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+            >
+              matrix.org
+            </span>
+          </div>
+        </div>
+      </div>
+      <button
+        class="_button_13vu4_8 UrlPreviewGroupView-module_toggleButton"
+        data-kind="tertiary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Collapse
+      </button>
+    </div>
+    <button
+      aria-label="Close preview"
+      class="_icon-button_1215g_8"
+      data-kind="secondary"
+      role="button"
+      style="--cpd-icon-button-size: 28px;"
+      tabindex="0"
+    >
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/index.ts b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/index.ts
similarity index 100%
rename from packages/shared-components/src/event-tiles/UrlPreviewGroupView/index.ts
rename to packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/index.ts
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/types.ts b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/types.ts
similarity index 70%
rename from packages/shared-components/src/event-tiles/UrlPreviewGroupView/types.ts
rename to packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/types.ts
index 4e9da4d4d6..8d26743987 100644
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/types.ts
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/types.ts
@@ -5,7 +5,6 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-/** Represents a URL preview. */
 export interface UrlPreview {
     /**
      * The URL for the preview.
@@ -14,7 +13,7 @@ export interface UrlPreview {
     /**
      * Should the link have a tooltip. Should be `true` if the platform does not provide a tooltip.
      */
-    showTooltipOnLink?: boolean;
+    showTooltipOnLink: boolean;
     /**
      * The title of the page being previewed.
      */
@@ -22,7 +21,11 @@ export interface UrlPreview {
     /**
      * The site name to be displayed alongside the title.
      */
-    siteName?: string;
+    siteName: string;
+    /**
+     * The HTTP URI of the the sites icon.
+     */
+    siteIcon?: string;
     /**
      * Description of the site. May contain links.
      */
@@ -44,12 +47,26 @@ export interface UrlPreview {
          */
         fileSize?: number;
         /**
-         * The width of the thumbnail. Must not exceed 100px.
+         * The width of the thumbnail.
          */
         width?: number;
         /**
-         * The height of the thumbnail. Must not exceed 100px.
+         * The height of the thumbnail.
          */
         height?: number;
+        /**
+         * Alt text for the image
+         */
+        alt?: string;
+
+        /**
+         * Is the media playable.
+         */
+        playable: boolean;
     };
+
+    /**
+     * Author of the content, if specified.
+     */
+    author?: string;
 }
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..14dbb2ae42 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"
@@ -560,7 +560,7 @@ exports[`ActionBarView > story snapshots > renders DecryptingAttachment 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="_icon_11k6c_18"
+        class="_icon_1855a_18"
         fill="currentColor"
         height="20"
         style="width: 20px; height: 20px;"
@@ -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"
@@ -730,7 +730,7 @@ exports[`ActionBarView > story snapshots > renders DownloadingAttachment 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="_icon_11k6c_18"
+        class="_icon_1855a_18"
         fill="currentColor"
         height="20"
         style="width: 20px; height: 20px;"
@@ -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/MImageBodyView/.gitkeep b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/.gitkeep
deleted file mode 100644
index 8b13789179..0000000000
--- a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/.gitkeep
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.module.css b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.module.css
new file mode 100644
index 0000000000..05d56d3987
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.module.css
@@ -0,0 +1,144 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cpd-space-2x);
+    min-width: var(--cpd-space-0x);
+}
+
+.link {
+    display: block;
+    width: fit-content;
+    color: inherit;
+    text-decoration: none;
+}
+
+.thumbnailContainer {
+    position: relative;
+    overflow: hidden;
+    contain: paint;
+    border-radius: var(--MBody-border-radius);
+}
+
+.placeholder {
+    position: absolute;
+    inset: var(--cpd-space-0x);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--cpd-color-bg-canvas-default);
+    z-index: 1;
+}
+
+.placeholderBlurhash {
+    background-color: transparent;
+}
+
+.blurhash {
+    width: 100%;
+    height: 100%;
+}
+
+.blurhash > canvas {
+    width: 100%;
+    height: 100%;
+    animation: blurhashPulse 1.75s infinite cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+.mediaContent {
+    position: relative;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.image {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.banner {
+    position: absolute;
+    bottom: var(--cpd-space-2x);
+    left: var(--cpd-space-2x);
+    max-width: min(100%, 350px);
+    overflow: hidden;
+    padding: var(--cpd-space-1x);
+    border-radius: var(--MBody-border-radius);
+    background-color: rgb(0 0 0 / 0.6);
+    color: #fff;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font: var(--cpd-font-body-sm-regular);
+    user-select: none;
+    pointer-events: none;
+}
+
+.gifLabel {
+    position: absolute;
+    display: block;
+    top: var(--cpd-space-0x);
+    left: 14px; /* Preserve the original GIF badge offset from _MImageBody.pcss. */
+    padding: 5px; /* Preserve the original GIF badge padding from _MImageBody.pcss. */
+    border-radius: 5px; /* Preserve the original GIF badge corner radius from _MImageBody.pcss. */
+    background: rgba(0, 0, 0, 0.7);
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    color: rgba(255, 255, 255, 1);
+    pointer-events: none;
+}
+
+.hiddenButton {
+    border: none;
+    width: 100%;
+    height: 100%;
+    padding: var(--cpd-space-0x);
+    inset: var(--cpd-space-0x);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    cursor: pointer;
+    background-color: var(--cpd-color-bg-subtle-secondary);
+}
+
+.hiddenButton:hover,
+.hiddenButton:focus-visible {
+    background-color: var(--cpd-color-bg-canvas-default);
+}
+
+.hiddenButtonContent {
+    display: flex;
+    color: var(--cpd-color-text-action-accent);
+}
+
+.hiddenButtonContent > svg {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.error {
+    display: block;
+    color: var(--cpd-color-text-critical-primary);
+}
+
+.errorIcon {
+    margin-right: var(--cpd-space-1x);
+    vertical-align: text-top;
+}
+
+@keyframes blurhashPulse {
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.65;
+    }
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx
new file mode 100644
index 0000000000..3b6c66cf38
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx
@@ -0,0 +1,157 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type ReactNode } from "react";
+import { expect, fn, userEvent, within } from "storybook/test";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useMockedViewModel } from "../../../../../core/viewmodel/useMockedViewModel";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
+import {
+    ImageBodyView,
+    ImageBodyViewPlaceholder,
+    ImageBodyViewState,
+    type ImageBodyViewActions,
+    type ImageBodyViewSnapshot,
+} from "./ImageBodyView";
+
+const imageSrc = new URL("../../../../../../static/image-body/install-spinner.png", import.meta.url).href;
+const thumbnailSrc = new URL("../../../../../../static/image-body/install-spinner.png", import.meta.url).href;
+const animatedGifSrc = new URL("../../../../../../static/image-body/install-spinner.gif", import.meta.url).href;
+const demoBlurhash = "LEHV6nWB2yk8pyo0adR*.7kCMdnj";
+const imageBodyViewStateOptions = [ImageBodyViewState.ERROR, ImageBodyViewState.HIDDEN, ImageBodyViewState.READY];
+const imageBodyViewPlaceholderOptions = [
+    ImageBodyViewPlaceholder.NONE,
+    ImageBodyViewPlaceholder.SPINNER,
+    ImageBodyViewPlaceholder.BLURHASH,
+];
+
+type ImageBodyViewProps = ImageBodyViewSnapshot &
+    ImageBodyViewActions & {
+        className?: string;
+        children?: ReactNode;
+    };
+
+const ImageBodyViewWrapperImpl = ({
+    onLinkClick,
+    onHiddenButtonClick,
+    onImageLoad,
+    onImageError,
+    className,
+    children,
+    ...snapshotProps
+}: ImageBodyViewProps): ReactNode => {
+    const vm = useMockedViewModel(snapshotProps, {
+        onLinkClick: onLinkClick ?? fn(),
+        onHiddenButtonClick: onHiddenButtonClick ?? fn(),
+        onImageLoad: onImageLoad ?? fn(),
+        onImageError: onImageError ?? fn(),
+    });
+
+    return (
+        <ImageBodyView vm={vm} className={className}>
+            {children}
+        </ImageBodyView>
+    );
+};
+
+const ImageBodyViewWrapper = withViewDocs(ImageBodyViewWrapperImpl, ImageBodyView);
+
+const meta = {
+    title: "MessageBody/ImageBodyView",
+    component: ImageBodyViewWrapper,
+    tags: ["autodocs"],
+    argTypes: {
+        state: {
+            options: imageBodyViewStateOptions,
+            control: { type: "select" },
+        },
+        placeholder: {
+            options: imageBodyViewPlaceholderOptions,
+            control: { type: "select" },
+        },
+        className: { control: "text" },
+    },
+    args: {
+        state: ImageBodyViewState.READY,
+        alt: "Element logo",
+        hiddenButtonLabel: "Show image",
+        errorLabel: "Unable to show image due to error",
+        src: imageSrc,
+        thumbnailSrc,
+        showAnimatedContentOnHover: false,
+        placeholder: ImageBodyViewPlaceholder.NONE,
+        blurhash: demoBlurhash,
+        maxWidth: 320,
+        maxHeight: 320,
+        aspectRatio: "1 / 1",
+        isSvg: false,
+        gifLabel: undefined,
+        bannerLabel: "install-spinner.png",
+        tooltipLabel: undefined,
+        linkUrl: imageSrc,
+        linkTarget: undefined,
+        className: undefined,
+        children: <div>File body slot</div>,
+    },
+} satisfies Meta<typeof ImageBodyViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Hidden: Story = {
+    args: {
+        state: ImageBodyViewState.HIDDEN,
+        linkUrl: undefined,
+        tooltipLabel: undefined,
+    },
+};
+
+export const LoadingWithSpinner: Story = {
+    args: {
+        placeholder: ImageBodyViewPlaceholder.SPINNER,
+    },
+};
+
+export const LoadingWithBlurhash: Story = {
+    args: {
+        placeholder: ImageBodyViewPlaceholder.BLURHASH,
+    },
+};
+
+export const AnimatedPreview: Story = {
+    args: {
+        src: animatedGifSrc,
+        thumbnailSrc,
+        linkUrl: animatedGifSrc,
+        showAnimatedContentOnHover: true,
+        gifLabel: "GIF",
+    },
+};
+
+export const ErrorState: Story = {
+    args: {
+        state: ImageBodyViewState.ERROR,
+        linkUrl: undefined,
+        children: undefined,
+    },
+};
+
+export const WithTooltip: Story = {
+    args: {
+        tooltipLabel: "Tooltip image name",
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.hover(canvas.getByRole("img", { name: "Element logo" }));
+        await expect(
+            within(canvasElement.ownerDocument.body).findByText("Tooltip image name"),
+        ).resolves.toBeInTheDocument();
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.test.tsx
new file mode 100644
index 0000000000..2eaeeba41f
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.test.tsx
@@ -0,0 +1,181 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { composeStories } from "@storybook/react-vite";
+import { fireEvent, render, screen } from "@test-utils";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { MockViewModel } from "../../../../../core/viewmodel/MockViewModel";
+import * as stories from "./ImageBodyView.stories";
+import {
+    ImageBodyView,
+    ImageBodyViewPlaceholder,
+    ImageBodyViewState,
+    type ImageBodyViewActions,
+    type ImageBodyViewSnapshot,
+} from "./ImageBodyView";
+
+const { Default, Hidden, LoadingWithSpinner, LoadingWithBlurhash, AnimatedPreview, ErrorState } =
+    composeStories(stories);
+
+class TestImageBodyViewModel extends MockViewModel<ImageBodyViewSnapshot> implements ImageBodyViewActions {
+    public onLinkClick?: ImageBodyViewActions["onLinkClick"];
+    public onHiddenButtonClick?: ImageBodyViewActions["onHiddenButtonClick"];
+    public onImageLoad?: ImageBodyViewActions["onImageLoad"];
+    public onImageError?: ImageBodyViewActions["onImageError"];
+
+    public constructor(snapshot: ImageBodyViewSnapshot, actions: ImageBodyViewActions = {}) {
+        super(snapshot);
+        this.onLinkClick = actions.onLinkClick;
+        this.onHiddenButtonClick = actions.onHiddenButtonClick;
+        this.onImageLoad = actions.onImageLoad;
+        this.onImageError = actions.onImageError;
+    }
+}
+
+describe("ImageBodyView", () => {
+    it.each([
+        ["default", Default],
+        ["hidden", Hidden],
+        ["loading-with-spinner", LoadingWithSpinner],
+        ["loading-with-blurhash", LoadingWithBlurhash],
+        ["animated-preview", AnimatedPreview],
+        ["error", ErrorState],
+    ])("matches snapshot for %s story", (_name, Story) => {
+        const { container } = render(<Story />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders the hidden preview button and invokes the click handler", async () => {
+        const user = userEvent.setup();
+        const onHiddenButtonClick = vi.fn();
+        const vm = new TestImageBodyViewModel(
+            {
+                state: ImageBodyViewState.HIDDEN,
+                hiddenButtonLabel: "Show image",
+                maxWidth: 320,
+                maxHeight: 240,
+                aspectRatio: "4 / 3",
+            },
+            { onHiddenButtonClick },
+        );
+
+        render(<ImageBodyView vm={vm} />);
+
+        await user.click(screen.getByRole("button", { name: "Show image" }));
+        expect(onHiddenButtonClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("renders an error label when the media cannot be displayed", () => {
+        const vm = new TestImageBodyViewModel({
+            state: ImageBodyViewState.ERROR,
+            errorLabel: "Error decrypting image",
+        });
+
+        render(<ImageBodyView vm={vm} />);
+
+        expect(screen.getByText("Error decrypting image")).toBeInTheDocument();
+        expect(screen.queryByRole("img")).not.toBeInTheDocument();
+    });
+
+    it("renders a link wrapper and forwards the click handler", () => {
+        const onLinkClick = vi.fn();
+        const vm = new TestImageBodyViewModel(
+            {
+                state: ImageBodyViewState.READY,
+                alt: "Linked image",
+                src: "https://example.org/full.png",
+                thumbnailSrc: "https://example.org/thumb.png",
+                linkUrl: "https://example.org/full.png",
+                linkTarget: "_blank",
+                maxWidth: 320,
+                maxHeight: 240,
+                aspectRatio: "4 / 3",
+            },
+            { onLinkClick },
+        );
+
+        render(<ImageBodyView vm={vm} />);
+
+        const link = screen.getByRole("link");
+        expect(link).toHaveAttribute("href", "https://example.org/full.png");
+        expect(link).toHaveAttribute("target", "_blank");
+        expect(link).toHaveAttribute("rel", "noreferrer noopener");
+
+        fireEvent.click(link);
+        expect(onLinkClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("swaps to the full source on hover for animated previews", async () => {
+        const user = userEvent.setup();
+        const vm = new TestImageBodyViewModel({
+            state: ImageBodyViewState.READY,
+            alt: "Animated image",
+            src: "https://example.org/full.gif",
+            thumbnailSrc: "https://example.org/thumb.png",
+            showAnimatedContentOnHover: true,
+            gifLabel: "GIF",
+            maxWidth: 320,
+            maxHeight: 240,
+            aspectRatio: "4 / 3",
+        });
+
+        render(<ImageBodyView vm={vm} />);
+
+        const image = screen.getByRole("img", { name: "Animated image" }) as HTMLImageElement;
+        expect(image).toHaveAttribute("src", "https://example.org/thumb.png");
+        expect(screen.getByText("GIF")).toBeInTheDocument();
+
+        await user.hover(image);
+        expect(image).toHaveAttribute("src", "https://example.org/full.gif");
+        expect(screen.queryByText("GIF")).not.toBeInTheDocument();
+    });
+
+    it("renders the configured placeholder state", () => {
+        const vm = new TestImageBodyViewModel({
+            state: ImageBodyViewState.READY,
+            alt: "Loading image",
+            src: "https://example.org/full.png",
+            placeholder: ImageBodyViewPlaceholder.SPINNER,
+            maxWidth: 320,
+            maxHeight: 240,
+            aspectRatio: "4 / 3",
+        });
+
+        render(<ImageBodyView vm={vm} />);
+
+        expect(screen.getByRole("progressbar")).toBeInTheDocument();
+    });
+
+    it("invokes image load and error handlers", () => {
+        const onImageLoad = vi.fn();
+        const onImageError = vi.fn();
+        const vm = new TestImageBodyViewModel(
+            {
+                state: ImageBodyViewState.READY,
+                alt: "Loaded image",
+                src: "https://example.org/full.png",
+                thumbnailSrc: "https://example.org/thumb.png",
+                maxWidth: 320,
+                maxHeight: 240,
+                aspectRatio: "4 / 3",
+            },
+            { onImageLoad, onImageError },
+        );
+
+        render(<ImageBodyView vm={vm} />);
+
+        const image = screen.getByRole("img", { name: "Loaded image" });
+        fireEvent.load(image);
+        fireEvent.error(image);
+
+        expect(onImageLoad).toHaveBeenCalledTimes(1);
+        expect(onImageError).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.tsx
new file mode 100644
index 0000000000..7a4ea96acb
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.tsx
@@ -0,0 +1,354 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, {
+    type CSSProperties,
+    type HTMLAttributeAnchorTarget,
+    type JSX,
+    type MouseEventHandler,
+    type PropsWithChildren,
+    type ReactEventHandler,
+    useState,
+} from "react";
+import classNames from "classnames";
+import { Blurhash } from "react-blurhash";
+import { ImageErrorIcon, VisibilityOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { InlineSpinner, Tooltip } from "@vector-im/compound-web";
+
+import { useI18n } from "../../../../../core/i18n/i18nContext";
+import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
+import styles from "./ImageBodyView.module.css";
+
+/**
+ * High-level rendering state for the shared image body view.
+ */
+export const enum ImageBodyViewState {
+    ERROR = "ERROR",
+    HIDDEN = "HIDDEN",
+    READY = "READY",
+}
+
+/**
+ * Placeholder variant shown over the media frame while the image is still settling.
+ */
+export const enum ImageBodyViewPlaceholder {
+    NONE = "NONE",
+    SPINNER = "SPINNER",
+    BLURHASH = "BLURHASH",
+}
+
+export interface ImageBodyViewSnapshot {
+    /**
+     * Controls whether the component renders an error state, a hidden-preview state,
+     * or a visible image frame.
+     */
+    state: ImageBodyViewState;
+    /**
+     * Image alt text.
+     */
+    alt?: string;
+    /**
+     * Label shown when media processing fails.
+     */
+    errorLabel?: string;
+    /**
+     * Label used by the hidden-media reveal button.
+     */
+    hiddenButtonLabel?: string;
+    /**
+     * Full-resolution image source.
+     */
+    src?: string;
+    /**
+     * Thumbnail/static preview image source.
+     * Falls back to `src` when omitted.
+     */
+    thumbnailSrc?: string;
+    /**
+     * Whether hovering or focusing the link should swap to the full-resolution image.
+     */
+    showAnimatedContentOnHover?: boolean;
+    /**
+     * Which placeholder to render over the image frame.
+     */
+    placeholder?: ImageBodyViewPlaceholder;
+    /**
+     * Blurhash string used when `placeholder` is `BLURHASH`.
+     */
+    blurhash?: string;
+    /**
+     * Maximum rendered width for the media frame.
+     */
+    maxWidth?: number;
+    /**
+     * Maximum rendered height for the media frame.
+     */
+    maxHeight?: number;
+    /**
+     * Aspect ratio reserved for the media frame.
+     */
+    aspectRatio?: CSSProperties["aspectRatio"];
+    /**
+     * Whether the displayed image is an SVG and should therefore use explicit width sizing.
+     */
+    isSvg?: boolean;
+    /**
+     * Optional badge shown for animated images when not hovered/focused.
+     */
+    gifLabel?: string;
+    /**
+     * Optional overlay banner shown while hovered/focused.
+     */
+    bannerLabel?: string;
+    /**
+     * Optional tooltip shown on the media frame.
+     */
+    tooltipLabel?: string;
+    /**
+     * Optional link target for the media frame.
+     */
+    linkUrl?: string;
+    /**
+     * Optional anchor target applied when `linkUrl` is provided.
+     */
+    linkTarget?: HTMLAttributeAnchorTarget;
+}
+
+export interface ImageBodyViewActions {
+    /**
+     * Invoked when the linked image is activated.
+     */
+    onLinkClick?: MouseEventHandler<HTMLAnchorElement>;
+    /**
+     * Invoked when the user chooses to reveal hidden media.
+     */
+    onHiddenButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Invoked when the visible image loads.
+     */
+    onImageLoad?: ReactEventHandler<HTMLImageElement>;
+    /**
+     * Invoked when the visible image fails to load.
+     */
+    onImageError?: ReactEventHandler<HTMLImageElement>;
+}
+
+export type ImageBodyViewModel = ViewModel<ImageBodyViewSnapshot, ImageBodyViewActions>;
+
+interface ImageBodyViewProps {
+    /**
+     * The view model for the component.
+     */
+    vm: ImageBodyViewModel;
+    /**
+     * Optional host CSS class.
+     */
+    className?: string;
+    /**
+     * Optional supplemental content rendered after the media frame.
+     */
+    children?: PropsWithChildren["children"];
+}
+
+function renderPlaceholder({
+    placeholder,
+    blurhash,
+    maxWidth,
+    maxHeight,
+    loadingLabel,
+}: Pick<ImageBodyViewSnapshot, "placeholder" | "blurhash" | "maxWidth" | "maxHeight"> & {
+    loadingLabel: string;
+}): JSX.Element | null {
+    switch (placeholder) {
+        case ImageBodyViewPlaceholder.BLURHASH:
+            if (!blurhash) {
+                return <InlineSpinner aria-label={loadingLabel} role="progressbar" />;
+            }
+
+            return (
+                <Blurhash
+                    className={styles.blurhash}
+                    hash={blurhash}
+                    width={maxWidth ?? 320}
+                    height={maxHeight ?? 240}
+                />
+            );
+
+        case ImageBodyViewPlaceholder.SPINNER:
+            return <InlineSpinner aria-label={loadingLabel} role="progressbar" />;
+
+        case ImageBodyViewPlaceholder.NONE:
+        default:
+            return null;
+    }
+}
+
+/**
+ * Renders the body of an image message with ready, hidden, and error states.
+ *
+ * The media frame supports thumbnail fallbacks, optional loading placeholders,
+ * animated-content preview on hover/focus, and optional tooltip/banner labels.
+ * Supplemental content such as a file body row can be rendered after the image
+ * through `children`.
+ *
+ * @example
+ * ```tsx
+ * <ImageBodyView vm={imageBodyViewModel}>
+ *     <div>File body slot</div>
+ * </ImageBodyView>
+ * ```
+ */
+export function ImageBodyView({ vm, className, children }: Readonly<ImageBodyViewProps>): JSX.Element {
+    const { translate: _t } = useI18n();
+    const {
+        state,
+        alt,
+        errorLabel,
+        hiddenButtonLabel,
+        src,
+        thumbnailSrc,
+        showAnimatedContentOnHover,
+        placeholder = ImageBodyViewPlaceholder.NONE,
+        blurhash,
+        maxWidth,
+        maxHeight,
+        aspectRatio,
+        isSvg,
+        gifLabel,
+        bannerLabel,
+        tooltipLabel,
+        linkUrl,
+        linkTarget,
+    } = useViewModel(vm);
+
+    const [hover, setHover] = useState(false);
+    const [focus, setFocus] = useState(false);
+    const hoverOrFocus = hover || focus;
+
+    const rootClassName = classNames(className, styles.root);
+
+    if (state === ImageBodyViewState.ERROR) {
+        return (
+            <span className={classNames(rootClassName, styles.error)}>
+                <ImageErrorIcon className={styles.errorIcon} width="16" height="16" />
+                {errorLabel}
+            </span>
+        );
+    }
+
+    const resolvedThumbnailSrc = thumbnailSrc ?? src;
+    const resolvedImageSrc = hoverOrFocus && showAnimatedContentOnHover && src ? src : resolvedThumbnailSrc;
+
+    // Reserve the media box on the container itself so the timeline doesn't jump
+    // while the image element or loading state is still settling.
+    const resolvedWidth = maxWidth === undefined ? undefined : `min(100%, ${maxWidth}px)`;
+    const containerStyle: CSSProperties = {
+        width: resolvedWidth,
+        maxWidth,
+        maxHeight,
+        aspectRatio,
+    };
+    const mediaStyle: CSSProperties | undefined = isSvg
+        ? {
+              width: resolvedWidth,
+              maxWidth,
+              maxHeight,
+          }
+        : undefined;
+
+    const placeholderNode = renderPlaceholder({
+        placeholder,
+        blurhash,
+        maxWidth,
+        maxHeight,
+        loadingLabel: _t("common|loading"),
+    });
+    const showPlaceholder = placeholderNode !== null;
+
+    const media =
+        state === ImageBodyViewState.HIDDEN ? (
+            <div style={{ width: maxWidth, height: maxHeight }}>
+                <button type="button" className={styles.hiddenButton} onClick={vm.onHiddenButtonClick}>
+                    <div className={styles.hiddenButtonContent}>
+                        <VisibilityOnIcon />
+                        <span>{hiddenButtonLabel}</span>
+                    </div>
+                </button>
+            </div>
+        ) : resolvedImageSrc ? (
+            <img
+                className={styles.image}
+                src={resolvedImageSrc}
+                alt={alt}
+                onError={vm.onImageError}
+                onLoad={vm.onImageLoad}
+                onMouseEnter={(): void => setHover(true)}
+                onMouseLeave={(): void => setHover(false)}
+            />
+        ) : null;
+
+    const banner =
+        state === ImageBodyViewState.READY && bannerLabel && hoverOrFocus ? (
+            <span className={styles.banner}>{bannerLabel}</span>
+        ) : null;
+
+    const gifBadge =
+        state === ImageBodyViewState.READY && gifLabel && !hoverOrFocus ? (
+            <p className={styles.gifLabel}>{gifLabel}</p>
+        ) : null;
+
+    let frame = (
+        <div className={styles.thumbnailContainer} style={containerStyle}>
+            {showPlaceholder && (
+                <div
+                    className={classNames(styles.placeholder, {
+                        [styles.placeholderBlurhash]: placeholder === ImageBodyViewPlaceholder.BLURHASH && !!blurhash,
+                    })}
+                >
+                    {placeholderNode}
+                </div>
+            )}
+
+            <div className={styles.mediaContent} style={mediaStyle}>
+                {media}
+                {gifBadge}
+                {banner}
+            </div>
+        </div>
+    );
+
+    if (tooltipLabel) {
+        frame = (
+            <Tooltip description={tooltipLabel} placement="right" isTriggerInteractive={true}>
+                {frame}
+            </Tooltip>
+        );
+    }
+
+    if (state === ImageBodyViewState.READY && linkUrl) {
+        frame = (
+            <a
+                href={linkUrl}
+                target={linkTarget}
+                rel={linkTarget === "_blank" ? "noreferrer noopener" : undefined}
+                className={styles.link}
+                onClick={vm.onLinkClick}
+                onFocus={(): void => setFocus(true)}
+                onBlur={(): void => setFocus(false)}
+            >
+                {frame}
+            </a>
+        );
+    }
+
+    return (
+        <div className={rootClassName}>
+            {frame}
+            {children}
+        </div>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/__snapshots__/ImageBodyView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/__snapshots__/ImageBodyView.test.tsx.snap
new file mode 100644
index 0000000000..4b5f47340c
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/__snapshots__/ImageBodyView.test.tsx.snap
@@ -0,0 +1,238 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ImageBodyView > matches snapshot for animated-preview story 1`] = `
+<div>
+  <div
+    class="ImageBodyView-module_root"
+  >
+    <a
+      class="ImageBodyView-module_link"
+      href="http://localhost:63315/static/image-body/install-spinner.gif"
+    >
+      <div
+        class="ImageBodyView-module_thumbnailContainer"
+        style="width: min(100%, 320px); max-width: 320px; max-height: 320px; aspect-ratio: 1 / 1;"
+      >
+        <div
+          class="ImageBodyView-module_mediaContent"
+        >
+          <img
+            alt="Element logo"
+            class="ImageBodyView-module_image"
+            src="http://localhost:63315/static/image-body/install-spinner.png"
+          />
+          <p
+            class="ImageBodyView-module_gifLabel"
+          >
+            GIF
+          </p>
+        </div>
+      </div>
+    </a>
+    <div>
+      File body slot
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ImageBodyView > matches snapshot for default story 1`] = `
+<div>
+  <div
+    class="ImageBodyView-module_root"
+  >
+    <a
+      class="ImageBodyView-module_link"
+      href="http://localhost:63315/static/image-body/install-spinner.png"
+    >
+      <div
+        class="ImageBodyView-module_thumbnailContainer"
+        style="width: min(100%, 320px); max-width: 320px; max-height: 320px; aspect-ratio: 1 / 1;"
+      >
+        <div
+          class="ImageBodyView-module_mediaContent"
+        >
+          <img
+            alt="Element logo"
+            class="ImageBodyView-module_image"
+            src="http://localhost:63315/static/image-body/install-spinner.png"
+          />
+        </div>
+      </div>
+    </a>
+    <div>
+      File body slot
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ImageBodyView > matches snapshot for error story 1`] = `
+<div>
+  <span
+    class="ImageBodyView-module_root ImageBodyView-module_error"
+  >
+    <svg
+      class="ImageBodyView-module_errorIcon"
+      fill="currentColor"
+      height="16"
+      viewBox="0 0 24 24"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7.803a6 6 0 0 1-.72-2H5v-3.172l4-4 3.585 3.585a6 6 0 0 1 1.172-1.656l-3.343-3.343a2 2 0 0 0-2.828 0L5 13V5h14v7.083c.718.12 1.393.368 2 .72V5a2 2 0 0 0-2-2z"
+      />
+      <path
+        d="M17 9a2 2 0 1 1-4 0 2 2 0 0 1 4 0m1 5a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0v-3a1 1 0 0 1 1-1m-1 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0"
+      />
+    </svg>
+    Unable to show image due to error
+  </span>
+</div>
+`;
+
+exports[`ImageBodyView > matches snapshot for hidden story 1`] = `
+<div>
+  <div
+    class="ImageBodyView-module_root"
+  >
+    <div
+      class="ImageBodyView-module_thumbnailContainer"
+      style="width: min(100%, 320px); max-width: 320px; max-height: 320px; aspect-ratio: 1 / 1;"
+    >
+      <div
+        class="ImageBodyView-module_mediaContent"
+      >
+        <div
+          style="width: 320px; height: 320px;"
+        >
+          <button
+            class="ImageBodyView-module_hiddenButton"
+            type="button"
+          >
+            <div
+              class="ImageBodyView-module_hiddenButtonContent"
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 16q1.875 0 3.188-1.312Q16.5 13.375 16.5 11.5t-1.312-3.187T12 7 8.813 8.313 7.5 11.5t1.313 3.188T12 16m0-1.8q-1.125 0-1.912-.787A2.6 2.6 0 0 1 9.3 11.5q0-1.125.787-1.912A2.6 2.6 0 0 1 12 8.8q1.125 0 1.912.787.788.788.788 1.913t-.787 1.912A2.6 2.6 0 0 1 12 14.2m0 4.8q-3.475 0-6.35-1.837Q2.775 15.324 1.3 12.2a.8.8 0 0 1-.1-.312 3 3 0 0 1 0-.775.8.8 0 0 1 .1-.313q1.475-3.125 4.35-4.962Q8.525 4 12 4t6.35 1.838T22.7 10.8a.8.8 0 0 1 .1.313 3 3 0 0 1 0 .774.8.8 0 0 1-.1.313q-1.475 3.125-4.35 4.963Q15.475 19 12 19m0-2a9.54 9.54 0 0 0 5.188-1.488A9.77 9.77 0 0 0 20.8 11.5a9.77 9.77 0 0 0-3.613-4.012A9.54 9.54 0 0 0 12 6a9.55 9.55 0 0 0-5.187 1.487A9.77 9.77 0 0 0 3.2 11.5a9.77 9.77 0 0 0 3.613 4.012A9.54 9.54 0 0 0 12 17"
+                />
+              </svg>
+              <span>
+                Show image
+              </span>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div>
+      File body slot
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ImageBodyView > matches snapshot for loading-with-blurhash story 1`] = `
+<div>
+  <div
+    class="ImageBodyView-module_root"
+  >
+    <a
+      class="ImageBodyView-module_link"
+      href="http://localhost:63315/static/image-body/install-spinner.png"
+    >
+      <div
+        class="ImageBodyView-module_thumbnailContainer"
+        style="width: min(100%, 320px); max-width: 320px; max-height: 320px; aspect-ratio: 1 / 1;"
+      >
+        <div
+          class="ImageBodyView-module_placeholder ImageBodyView-module_placeholderBlurhash"
+        >
+          <div
+            class="ImageBodyView-module_blurhash"
+            style="display: inline-block; height: 320px; width: 320px; position: relative;"
+          >
+            <canvas
+              height="32"
+              style="position: absolute; inset: 0px; width: 100%; height: 100%;"
+              width="32"
+            />
+          </div>
+        </div>
+        <div
+          class="ImageBodyView-module_mediaContent"
+        >
+          <img
+            alt="Element logo"
+            class="ImageBodyView-module_image"
+            src="http://localhost:63315/static/image-body/install-spinner.png"
+          />
+        </div>
+      </div>
+    </a>
+    <div>
+      File body slot
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ImageBodyView > matches snapshot for loading-with-spinner story 1`] = `
+<div>
+  <div
+    class="ImageBodyView-module_root"
+  >
+    <a
+      class="ImageBodyView-module_link"
+      href="http://localhost:63315/static/image-body/install-spinner.png"
+    >
+      <div
+        class="ImageBodyView-module_thumbnailContainer"
+        style="width: min(100%, 320px); max-width: 320px; max-height: 320px; aspect-ratio: 1 / 1;"
+      >
+        <div
+          class="ImageBodyView-module_placeholder"
+        >
+          <svg
+            aria-label="Loading…"
+            class="_icon_1855a_18"
+            fill="currentColor"
+            height="1em"
+            role="progressbar"
+            style="width: 20px; height: 20px;"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </div>
+        <div
+          class="ImageBodyView-module_mediaContent"
+        >
+          <img
+            alt="Element logo"
+            class="ImageBodyView-module_image"
+            src="http://localhost:63315/static/image-body/install-spinner.png"
+          />
+        </div>
+      </div>
+    </a>
+    <div>
+      File body slot
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/index.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/index.tsx
new file mode 100644
index 0000000000..a71a80c047
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/index.tsx
@@ -0,0 +1,15 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export {
+    ImageBodyView,
+    ImageBodyViewPlaceholder,
+    ImageBodyViewState,
+    type ImageBodyViewActions,
+    type ImageBodyViewModel,
+    type ImageBodyViewSnapshot,
+} from "./ImageBodyView";
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.tsx
index 44011704bd..8b1fc95164 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.tsx
@@ -127,6 +127,12 @@ interface VideoBodyViewProps {
     children?: PropsWithChildren["children"];
 }
 
+/**
+ * Renders the body of a video message with ready, hidden, loading, and error states.
+ *
+ * The media frame preserves layout while loading and can render
+ * supplemental content such as a file body row after the video.
+ */
 export function VideoBodyView({
     vm,
     className,
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/RedactedBodyView.tsx b/packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/RedactedBodyView.tsx
index 7d4b7b0f64..82e391bec7 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/RedactedBodyView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/RedactedBodyView.tsx
@@ -42,6 +42,12 @@ interface RedactedBodyViewProps {
     ref?: Ref<HTMLSpanElement>;
 }
 
+/**
+ * Renders the body for a redacted event.
+ *
+ * The view shows the delete icon with localized redaction text and can
+ * optionally wrap the content in a tooltip for extra context.
+ */
 export function RedactedBodyView({ vm, className, ref }: Readonly<RedactedBodyViewProps>): JSX.Element {
     const { text, tooltip } = useViewModel(vm);
 
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/.gitkeep b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/.gitkeep
deleted file mode 100644
index 8b13789179..0000000000
--- a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/.gitkeep
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBody.module.css b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBody.module.css
new file mode 100644
index 0000000000..683c8a8a2a
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBody.module.css
@@ -0,0 +1,81 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.root {
+    overflow-y: hidden;
+    overflow-x: hidden;
+}
+
+.text,
+.caption {
+    white-space: pre-wrap;
+}
+
+.notice {
+    white-space: pre-wrap;
+    color: var(--cpd-color-text-secondary);
+}
+
+.emote {
+    white-space: pre-wrap;
+    text-align: start;
+}
+
+.annotated {
+    display: flex;
+}
+
+.annotatedInline {
+    display: inline-flex;
+}
+
+.annotation {
+    user-select: none;
+    display: inline-block;
+    margin-inline-start: 9px; /* Preserve legacy EventTile spacing for inline annotations like (edited) */
+    font: var(--cpd-font-body-xs-regular);
+    color: var(--cpd-color-text-secondary);
+}
+
+.editedMarker {
+    appearance: none;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+}
+
+.bodyLink,
+.bodyAction {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+.bodyAction {
+    appearance: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    padding: 0;
+    text-align: inherit;
+}
+
+.emoteSender {
+    all: unset;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+}
+
+.editedMarker:focus-visible,
+.bodyAction:focus-visible,
+.emoteSender:focus-visible {
+    outline: 2px solid var(--cpd-color-border-focused);
+    outline-offset: 2px;
+    border-radius: var(--cpd-space-0-5x);
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx
new file mode 100644
index 0000000000..26604c0814
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx
@@ -0,0 +1,160 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX, type ReactElement, type ReactNode } from "react";
+import { fn } from "storybook/test";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useMockedViewModel } from "../../../../../core/viewmodel/useMockedViewModel";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
+import {
+    TextualBodyView,
+    TextualBodyViewBodyWrapperKind,
+    TextualBodyViewKind,
+    type TextualBodyViewActions,
+    type TextualBodyViewSnapshot,
+} from "./TextualBodyView";
+
+type WrapperProps = TextualBodyViewSnapshot &
+    Partial<TextualBodyViewActions> & {
+        body: ReactElement;
+        urlPreviews?: ReactNode;
+        className?: string;
+    };
+
+const TextualBodyViewWrapperImpl = ({
+    body,
+    urlPreviews,
+    className,
+    onRootClick,
+    onBodyActionClick,
+    onEditedMarkerClick,
+    onEmoteSenderClick,
+    ...snapshotProps
+}: WrapperProps): JSX.Element => {
+    const vm = useMockedViewModel(snapshotProps, {
+        onRootClick: onRootClick ?? fn(),
+        onBodyActionClick: onBodyActionClick ?? fn(),
+        onEditedMarkerClick: onEditedMarkerClick ?? fn(),
+        onEmoteSenderClick: onEmoteSenderClick ?? fn(),
+    });
+
+    return <TextualBodyView vm={vm} body={body} urlPreviews={urlPreviews} className={className} />;
+};
+
+const TextualBodyViewWrapper = withViewDocs(TextualBodyViewWrapperImpl, TextualBodyView);
+
+const DefaultBody = <div>Hello, this is a textual message.</div>;
+const Preview = (
+    <div
+        style={{
+            marginTop: "8px",
+            padding: "8px",
+            borderRadius: "8px",
+            backgroundColor: "var(--cpd-color-bg-subtle-secondary)",
+        }}
+    >
+        URL preview
+    </div>
+);
+
+const TEXTUAL_BODY_VIEW_KIND_OPTIONS = [
+    TextualBodyViewKind.TEXT,
+    TextualBodyViewKind.NOTICE,
+    TextualBodyViewKind.EMOTE,
+    TextualBodyViewKind.CAPTION,
+];
+
+const TEXTUAL_BODY_VIEW_BODY_WRAPPER_KIND_OPTIONS = [
+    TextualBodyViewBodyWrapperKind.NONE,
+    TextualBodyViewBodyWrapperKind.LINK,
+    TextualBodyViewBodyWrapperKind.ACTION,
+];
+
+const meta = {
+    title: "MessageBody/TextualBody",
+    component: TextualBodyViewWrapper,
+    tags: ["autodocs"],
+    argTypes: {
+        kind: {
+            options: TEXTUAL_BODY_VIEW_KIND_OPTIONS,
+            control: { type: "select" },
+        },
+        bodyWrapper: {
+            options: TEXTUAL_BODY_VIEW_BODY_WRAPPER_KIND_OPTIONS,
+            control: { type: "select" },
+        },
+    },
+    args: {
+        kind: TextualBodyViewKind.TEXT,
+        bodyWrapper: TextualBodyViewBodyWrapperKind.NONE,
+        body: DefaultBody,
+        urlPreviews: undefined,
+        showEditedMarker: false,
+        editedMarkerText: "(edited)",
+        editedMarkerTooltip: "Edited yesterday at 11:48",
+        editedMarkerCaption: "View edit history",
+        showPendingModerationMarker: false,
+        pendingModerationText: "(Visible to you while moderation is pending)",
+        emoteSenderName: "Alice",
+        bodyActionAriaLabel: "Open starter link",
+    },
+} satisfies Meta<typeof TextualBodyViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Notice: Story = {
+    args: {
+        kind: TextualBodyViewKind.NOTICE,
+        body: <div>This is a notice message.</div>,
+    },
+};
+
+export const CaptionWithPreview: Story = {
+    args: {
+        kind: TextualBodyViewKind.CAPTION,
+        body: <div>Caption for the uploaded image.</div>,
+        urlPreviews: Preview,
+    },
+};
+
+export const Edited: Story = {
+    args: {
+        showEditedMarker: true,
+    },
+};
+
+export const PendingModeration: Story = {
+    args: {
+        showPendingModerationMarker: true,
+    },
+};
+
+export const HighlightLink: Story = {
+    args: {
+        bodyWrapper: TextualBodyViewBodyWrapperKind.LINK,
+        bodyLinkHref: "https://example.org/#/room/!room:example.org/$event",
+    },
+};
+
+export const StarterLink: Story = {
+    args: {
+        bodyWrapper: TextualBodyViewBodyWrapperKind.ACTION,
+        body: <div>Launch the integration flow.</div>,
+    },
+};
+
+export const Emote: Story = {
+    args: {
+        kind: TextualBodyViewKind.EMOTE,
+        body: <span>waves enthusiastically</span>,
+        showEditedMarker: true,
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBody.test.tsx b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBody.test.tsx
new file mode 100644
index 0000000000..5e4d8a3e89
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBody.test.tsx
@@ -0,0 +1,192 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { createRef, type MouseEventHandler } from "react";
+import { composeStories } from "@storybook/react-vite";
+import userEvent from "@testing-library/user-event";
+import { render, screen } from "@test-utils";
+import { describe, expect, it, vi } from "vitest";
+
+import { MockViewModel } from "../../../../../core/viewmodel";
+import {
+    TextualBodyView,
+    TextualBodyViewBodyWrapperKind,
+    TextualBodyViewKind,
+    type TextualBodyContentElement,
+    type TextualBodyViewActions,
+    type TextualBodyViewModel,
+    type TextualBodyViewSnapshot,
+} from "./TextualBodyView";
+import * as publicApi from "./index";
+import * as stories from "./TextualBody.stories";
+
+const { Default, Notice, CaptionWithPreview, Emote } = composeStories(stories);
+
+describe("TextualBodyView", () => {
+    it("renders the default message body", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders the notice branch", () => {
+        const { container } = render(<Notice />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders caption messages with url previews", () => {
+        const { container } = render(<CaptionWithPreview />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders emote messages with annotations", () => {
+        const { container } = render(<Emote />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("re-exports the public TextualBodyView API", () => {
+        expect(publicApi.TextualBodyView).toBe(TextualBodyView);
+    });
+
+    it("forwards body refs to the rendered body element", () => {
+        const bodyRef = createRef<TextualBodyContentElement>();
+        const vm = new MockViewModel<TextualBodyViewSnapshot>({
+            kind: TextualBodyViewKind.TEXT,
+        }) as TextualBodyViewModel;
+
+        render(<TextualBodyView vm={vm} body={<div>Body content</div>} bodyRef={bodyRef} />);
+
+        expect(bodyRef.current).not.toBeNull();
+        expect(bodyRef.current?.textContent).toBe("Body content");
+    });
+
+    it("invokes edited marker, body action, and emote sender handlers", async () => {
+        const user = userEvent.setup();
+        const onEditedMarkerClick = vi.fn();
+        const onBodyActionClick = vi.fn();
+        const onEmoteSenderClick = vi.fn();
+
+        class TestTextualBodyViewModel
+            extends MockViewModel<TextualBodyViewSnapshot>
+            implements TextualBodyViewActions
+        {
+            public onEditedMarkerClick?: MouseEventHandler<HTMLButtonElement>;
+            public onBodyActionClick?: MouseEventHandler<HTMLElement>;
+            public onEmoteSenderClick?: MouseEventHandler<HTMLButtonElement>;
+
+            public constructor(snapshot: TextualBodyViewSnapshot, actions: TextualBodyViewActions) {
+                super(snapshot);
+                Object.assign(this, actions);
+            }
+        }
+
+        const vm = new TestTextualBodyViewModel(
+            {
+                kind: TextualBodyViewKind.EMOTE,
+                bodyWrapper: TextualBodyViewBodyWrapperKind.ACTION,
+                bodyActionAriaLabel: "Open starter link",
+                showEditedMarker: true,
+                editedMarkerText: "(edited)",
+                editedMarkerTooltip: "Edited yesterday at 11:48",
+                editedMarkerCaption: "View edit history",
+                emoteSenderName: "Alice",
+            },
+            {
+                onEditedMarkerClick,
+                onBodyActionClick,
+                onEmoteSenderClick,
+            },
+        ) as TextualBodyViewModel;
+
+        render(<TextualBodyView vm={vm} body={<span>waves</span>} />);
+
+        await user.click(screen.getByRole("button", { name: "Alice" }));
+        await user.click(screen.getByRole("button", { name: "Open starter link" }));
+        await user.click(screen.getByRole("button", { name: "(edited)" }));
+
+        expect(onEmoteSenderClick).toHaveBeenCalledTimes(1);
+        expect(onBodyActionClick).toHaveBeenCalledTimes(1);
+        expect(onEditedMarkerClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("renders link-wrapped annotated bodies without an edited tooltip", async () => {
+        const user = userEvent.setup();
+        const onEditedMarkerClick = vi.fn();
+
+        class TestTextualBodyViewModel
+            extends MockViewModel<TextualBodyViewSnapshot>
+            implements TextualBodyViewActions
+        {
+            public onEditedMarkerClick?: MouseEventHandler<HTMLButtonElement>;
+
+            public constructor(snapshot: TextualBodyViewSnapshot, actions: TextualBodyViewActions) {
+                super(snapshot);
+                Object.assign(this, actions);
+            }
+        }
+
+        const vm = new TestTextualBodyViewModel(
+            {
+                kind: TextualBodyViewKind.TEXT,
+                bodyWrapper: TextualBodyViewBodyWrapperKind.LINK,
+                bodyLinkHref: "https://example.org/#/room/!room:example.org/$event",
+                showEditedMarker: true,
+                editedMarkerText: "(edited)",
+                showPendingModerationMarker: true,
+                pendingModerationText: "(Visible to you while moderation is pending)",
+            },
+            { onEditedMarkerClick },
+        ) as TextualBodyViewModel;
+
+        render(<TextualBodyView vm={vm} body={<div>Body content</div>} />);
+
+        expect(screen.getByRole("link")).toHaveAttribute("href", "https://example.org/#/room/!room:example.org/$event");
+        expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+        expect(screen.getByText("(Visible to you while moderation is pending)")).toBeInTheDocument();
+
+        await user.click(screen.getByRole("button", { name: "(edited)" }));
+
+        expect(onEditedMarkerClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("renders action wrappers as native buttons and activates them for Enter and Space key presses", async () => {
+        const user = userEvent.setup();
+        const onBodyActionClick = vi.fn();
+
+        class TestTextualBodyViewModel
+            extends MockViewModel<TextualBodyViewSnapshot>
+            implements TextualBodyViewActions
+        {
+            public onBodyActionClick?: MouseEventHandler<HTMLElement>;
+
+            public constructor(snapshot: TextualBodyViewSnapshot, actions: TextualBodyViewActions) {
+                super(snapshot);
+                Object.assign(this, actions);
+            }
+        }
+
+        const vm = new TestTextualBodyViewModel(
+            {
+                kind: TextualBodyViewKind.TEXT,
+                bodyWrapper: TextualBodyViewBodyWrapperKind.ACTION,
+                bodyActionAriaLabel: "Open starter link",
+            },
+            { onBodyActionClick },
+        ) as TextualBodyViewModel;
+
+        render(<TextualBodyView vm={vm} body={<span>Launch the integration flow.</span>} />);
+
+        const action = screen.getByRole("button", { name: "Open starter link" });
+        expect(action).toHaveAttribute("type", "button");
+
+        action.focus();
+        await user.keyboard("{Escape}");
+        await user.keyboard("{Enter}");
+        await user.keyboard(" ");
+
+        expect(onBodyActionClick).toHaveBeenCalledTimes(2);
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBodyView.tsx b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBodyView.tsx
new file mode 100644
index 0000000000..340bed6bd8
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBodyView.tsx
@@ -0,0 +1,285 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, {
+    cloneElement,
+    isValidElement,
+    type JSX,
+    type MouseEventHandler,
+    type ReactElement,
+    type ReactNode,
+    type Ref,
+} from "react";
+import classNames from "classnames";
+import { Tooltip } from "@vector-im/compound-web";
+
+import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
+import styles from "./TextualBody.module.css";
+
+export const enum TextualBodyViewKind {
+    TEXT = "TEXT",
+    NOTICE = "NOTICE",
+    EMOTE = "EMOTE",
+    CAPTION = "CAPTION",
+}
+
+export const enum TextualBodyViewBodyWrapperKind {
+    NONE = "NONE",
+    LINK = "LINK",
+    ACTION = "ACTION",
+}
+
+export interface TextualBodyViewSnapshot {
+    /**
+     * Optional id passed to the root message-body element.
+     */
+    id?: string;
+    /**
+     * Controls the layout and styling branch for the body.
+     */
+    kind: TextualBodyViewKind;
+    /**
+     * Optional outer wrapper applied around the rendered body content.
+     */
+    bodyWrapper?: TextualBodyViewBodyWrapperKind;
+    /**
+     * Href used when `bodyWrapper` is `LINK`.
+     */
+    bodyLinkHref?: string;
+    /**
+     * Accessible label used when `bodyWrapper` is `ACTION`.
+     */
+    bodyActionAriaLabel?: string;
+    /**
+     * Whether to render the edited marker.
+     */
+    showEditedMarker?: boolean;
+    /**
+     * Visible label for the edited marker.
+     */
+    editedMarkerText?: string;
+    /**
+     * Tooltip description for the edited marker.
+     */
+    editedMarkerTooltip?: string;
+    /**
+     * Optional tooltip caption for the edited marker.
+     */
+    editedMarkerCaption?: string;
+    /**
+     * Whether to render the pending-moderation marker.
+     */
+    showPendingModerationMarker?: boolean;
+    /**
+     * Visible label for the pending-moderation marker.
+     */
+    pendingModerationText?: string;
+    /**
+     * Sender label rendered for emote events.
+     */
+    emoteSenderName?: string;
+}
+
+export interface TextualBodyViewActions {
+    /**
+     * Capture-phase click handler attached to the root message-body container.
+     */
+    onRootClick?: MouseEventHandler<HTMLDivElement>;
+    /**
+     * Activation handler used when `bodyWrapper` is `ACTION`.
+     */
+    onBodyActionClick?: MouseEventHandler<HTMLElement>;
+    /**
+     * Click handler for the edited marker.
+     */
+    onEditedMarkerClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Click handler for the emote sender.
+     */
+    onEmoteSenderClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+export type TextualBodyViewModel = ViewModel<TextualBodyViewSnapshot, TextualBodyViewActions>;
+
+export type TextualBodyContentElement = HTMLDivElement | HTMLSpanElement;
+export type TextualBodyContentRef = Ref<TextualBodyContentElement>;
+
+interface TextualBodyViewProps {
+    /**
+     * The view model providing the layout state and event handlers.
+     */
+    vm: TextualBodyViewModel;
+    /**
+     * The message body element, typically `EventContentBodyView`.
+     */
+    body: ReactElement;
+    /**
+     * Optional ref to attach to the message body element.
+     */
+    bodyRef?: TextualBodyContentRef;
+    /**
+     * Optional URL preview subtree rendered after the body.
+     */
+    urlPreviews?: ReactNode;
+    /**
+     * Optional host-level class names.
+     */
+    className?: string;
+}
+
+/**
+ * Re-clones the supplied body element so consumers can observe the rendered
+ * body node via `bodyRef` without constraining the `body` prop shape.
+ */
+function attachBodyRef(body: ReactElement, bodyRef?: TextualBodyContentRef): ReactElement {
+    if (!bodyRef || !isValidElement(body)) {
+        return body;
+    }
+
+    return cloneElement(body as ReactElement<{ ref?: TextualBodyContentRef }>, { ref: bodyRef });
+}
+
+/**
+ * Renders a textual message body for timeline events.
+ *
+ * The view supports text, notice, emote, and caption layouts, optional
+ * link or action wrappers, edited and moderation markers, and appended
+ * URL previews.
+ */
+export function TextualBodyView({
+    vm,
+    body,
+    bodyRef,
+    urlPreviews,
+    className,
+}: Readonly<TextualBodyViewProps>): JSX.Element {
+    const {
+        id,
+        kind,
+        bodyWrapper = TextualBodyViewBodyWrapperKind.NONE,
+        bodyLinkHref,
+        bodyActionAriaLabel,
+        showEditedMarker,
+        editedMarkerText,
+        editedMarkerTooltip,
+        editedMarkerCaption,
+        showPendingModerationMarker,
+        pendingModerationText,
+        emoteSenderName,
+    } = useViewModel(vm);
+
+    const rootClasses = classNames(className, styles.root, {
+        [styles.text]: kind === TextualBodyViewKind.TEXT,
+        [styles.notice]: kind === TextualBodyViewKind.NOTICE,
+        [styles.emote]: kind === TextualBodyViewKind.EMOTE,
+        [styles.caption]: kind === TextualBodyViewKind.CAPTION,
+    });
+
+    let renderedBody: ReactNode = attachBodyRef(body, bodyRef);
+    const onEditedMarkerClick: MouseEventHandler<HTMLButtonElement> | undefined = vm.onEditedMarkerClick
+        ? (event): void => {
+              event.preventDefault();
+              event.stopPropagation();
+              vm.onEditedMarkerClick?.(event);
+          }
+        : undefined;
+
+    const markers: ReactNode[] = [];
+    if (showEditedMarker) {
+        const editedMarkerButton = (
+            <button
+                type="button"
+                className={classNames(styles.annotation, styles.editedMarker)}
+                onClick={onEditedMarkerClick}
+            >
+                <span>{editedMarkerText}</span>
+            </button>
+        );
+
+        markers.push(
+            editedMarkerTooltip ? (
+                <Tooltip
+                    key="edited-marker"
+                    description={editedMarkerTooltip}
+                    caption={editedMarkerCaption}
+                    isTriggerInteractive={true}
+                >
+                    {editedMarkerButton}
+                </Tooltip>
+            ) : (
+                React.cloneElement(editedMarkerButton, { key: "edited-marker" })
+            ),
+        );
+    }
+
+    if (showPendingModerationMarker) {
+        markers.push(
+            <span key="pending-moderation-marker" className={styles.annotation}>
+                {pendingModerationText}
+            </span>,
+        );
+    }
+
+    if (bodyWrapper === TextualBodyViewBodyWrapperKind.LINK && bodyLinkHref) {
+        renderedBody = (
+            <a href={bodyLinkHref} className={styles.bodyLink}>
+                {renderedBody}
+            </a>
+        );
+    } else if (bodyWrapper === TextualBodyViewBodyWrapperKind.ACTION) {
+        renderedBody = (
+            <button
+                type="button"
+                aria-label={bodyActionAriaLabel}
+                className={styles.bodyAction}
+                onClick={vm.onBodyActionClick}
+            >
+                {renderedBody}
+            </button>
+        );
+    }
+
+    if (markers.length > 0) {
+        const annotatedClasses = classNames(styles.annotated, {
+            [styles.annotatedInline]: kind === TextualBodyViewKind.EMOTE,
+        });
+
+        renderedBody =
+            kind === TextualBodyViewKind.EMOTE ? (
+                <span dir="auto" className={annotatedClasses}>
+                    {renderedBody}
+                    {markers}
+                </span>
+            ) : (
+                <div dir="auto" className={annotatedClasses}>
+                    {renderedBody}
+                    {markers}
+                </div>
+            );
+    }
+
+    if (kind === TextualBodyViewKind.EMOTE) {
+        return (
+            <div id={id} className={rootClasses} onClickCapture={vm.onRootClick} dir="auto">
+                *&nbsp;
+                <button type="button" className={styles.emoteSender} onClick={vm.onEmoteSenderClick}>
+                    {emoteSenderName}
+                </button>
+                &nbsp;
+                {renderedBody}
+                {urlPreviews}
+            </div>
+        );
+    }
+
+    return (
+        <div id={id} className={rootClasses} onClickCapture={vm.onRootClick}>
+            {renderedBody}
+            {urlPreviews}
+        </div>
+    );
+}
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
new file mode 100644
index 0000000000..79201640bc
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/__snapshots__/TextualBody.test.tsx.snap
@@ -0,0 +1,76 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TextualBodyView > renders caption messages with url previews 1`] = `
+<div>
+  <div
+    class="TextualBody-module_root TextualBody-module_caption"
+  >
+    <div>
+      Caption for the uploaded image.
+    </div>
+    <div
+      style="margin-top: 8px; padding: 8px; border-radius: 8px; background-color: var(--cpd-color-bg-subtle-secondary);"
+    >
+      URL preview
+    </div>
+  </div>
+</div>
+`;
+
+exports[`TextualBodyView > renders emote messages with annotations 1`] = `
+<div>
+  <div
+    class="TextualBody-module_root TextualBody-module_emote"
+    dir="auto"
+  >
+    * 
+    <button
+      class="TextualBody-module_emoteSender"
+      type="button"
+    >
+      Alice
+    </button>
+     
+    <span
+      class="TextualBody-module_annotated TextualBody-module_annotatedInline"
+      dir="auto"
+    >
+      <span>
+        waves enthusiastically
+      </span>
+      <button
+        class="TextualBody-module_annotation TextualBody-module_editedMarker"
+        type="button"
+      >
+        <span>
+          (edited)
+        </span>
+      </button>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`TextualBodyView > renders the default message body 1`] = `
+<div>
+  <div
+    class="TextualBody-module_root TextualBody-module_text"
+  >
+    <div>
+      Hello, this is a textual message.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`TextualBodyView > renders the notice branch 1`] = `
+<div>
+  <div
+    class="TextualBody-module_root TextualBody-module_notice"
+  >
+    <div>
+      This is a notice message.
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/index.tsx b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/index.tsx
new file mode 100644
index 0000000000..dce11459c8
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/index.tsx
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export {
+    TextualBodyView,
+    TextualBodyViewKind,
+    TextualBodyViewBodyWrapperKind,
+    type TextualBodyViewSnapshot,
+    type TextualBodyViewActions,
+    type TextualBodyViewModel,
+    type TextualBodyContentElement,
+    type TextualBodyContentRef,
+} from "./TextualBodyView";
diff --git a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/ReactionsRow.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/ReactionsRow.stories.tsx
index f7a4c615b7..ac89e8de0e 100644
--- a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/ReactionsRow.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/ReactionsRow.stories.tsx
@@ -11,6 +11,7 @@ import { fn } from "storybook/test";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ReactionsRowButtonView } from "../ReactionsRowButton";
 import { useMockedViewModel } from "../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
 import { ReactionsRowView, type ReactionsRowViewActions, type ReactionsRowViewSnapshot } from "./ReactionsRowView";
 
 interface MockReactionButtonProps {
@@ -56,7 +57,7 @@ const DefaultReactionButtons = (): JSX.Element => (
 
 type WrapperProps = ReactionsRowViewSnapshot & Partial<ReactionsRowViewActions>;
 
-const ReactionsRowViewWrapper = ({
+const ReactionsRowViewWrapperImpl = ({
     onShowAllClick,
     onAddReactionClick,
     onAddReactionContextMenu,
@@ -77,6 +78,8 @@ const ReactionsRowViewWrapper = ({
     );
 };
 
+const ReactionsRowViewWrapper = withViewDocs(ReactionsRowViewWrapperImpl, ReactionsRowView);
+
 const meta = {
     title: "MessageBody/ReactionsRow",
     component: ReactionsRowViewWrapper,
diff --git a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/ReactionsRowView.tsx b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/ReactionsRowView.tsx
index db7efb8ecd..6268de3024 100644
--- a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/ReactionsRowView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/ReactionsRowView.tsx
@@ -81,6 +81,12 @@ interface ReactionsRowViewProps {
     children?: PropsWithChildren["children"];
 }
 
+/**
+ * Renders the reactions toolbar for an event tile.
+ *
+ * The row can show individual reaction buttons, an optional "show all"
+ * control, and the add-reaction affordance.
+ */
 export function ReactionsRowView({ vm, className, children }: Readonly<ReactionsRowViewProps>): JSX.Element {
     const {
         ariaLabel,
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/ReactionsRowButton.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/ReactionsRowButton.stories.tsx
index 907228a173..6001d1bf52 100644
--- a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/ReactionsRowButton.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/ReactionsRowButton.stories.tsx
@@ -10,6 +10,7 @@ import { fn } from "storybook/test";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useMockedViewModel } from "../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
 import { type ReactionsRowButtonTooltipViewSnapshot } from "../ReactionsRowButtonTooltip";
 import {
     ReactionsRowButtonView,
@@ -25,7 +26,7 @@ type WrapperProps = Omit<ReactionsRowButtonViewSnapshot, "tooltipVm"> &
         tooltipOpen?: ReactionsRowButtonTooltipViewSnapshot["tooltipOpen"];
     };
 
-const ReactionsRowButtonViewWrapper = ({
+const ReactionsRowButtonViewWrapperImpl = ({
     tooltipFormattedSenders,
     tooltipCaption,
     tooltipOpen,
@@ -54,6 +55,8 @@ const ReactionsRowButtonViewWrapper = ({
     return <ReactionsRowButtonView vm={vm} />;
 };
 
+const ReactionsRowButtonViewWrapper = withViewDocs(ReactionsRowButtonViewWrapperImpl, ReactionsRowButtonView);
+
 const meta = {
     title: "MessageBody/ReactionsRowButton",
     component: ReactionsRowButtonViewWrapper,
diff --git a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/ReactionsRowButtonView.tsx b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/ReactionsRowButtonView.tsx
index 3d57c96d42..2e6e346130 100644
--- a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/ReactionsRowButtonView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/ReactionsRowButtonView.tsx
@@ -64,7 +64,10 @@ interface ReactionsRowButtonViewProps {
 }
 
 /**
- * Renders the reaction button in a reactions row.
+ * Renders a single reaction button within a reactions row.
+ *
+ * The button supports text or image reactions, selected and disabled
+ * styling, and wraps its content in the reactions tooltip view.
  */
 export function ReactionsRowButtonView({ vm }: Readonly<ReactionsRowButtonViewProps>): JSX.Element {
     const snapshot = useViewModel(vm) as ReactionsRowButtonViewSnapshot & { ariaLabel?: string };
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/static/image-body/install-spinner.gif b/packages/shared-components/static/image-body/install-spinner.gif
new file mode 100644
index 0000000000..ce6c17844a
Binary files /dev/null and b/packages/shared-components/static/image-body/install-spinner.gif differ
diff --git a/packages/shared-components/static/image-body/install-spinner.png b/packages/shared-components/static/image-body/install-spinner.png
new file mode 100644
index 0000000000..75c3f48ad8
Binary files /dev/null and b/packages/shared-components/static/image-body/install-spinner.png differ
diff --git a/packages/shared-components/static/wideImage.png b/packages/shared-components/static/wideImage.png
new file mode 100644
index 0000000000..746015d81b
Binary files /dev/null and b/packages/shared-components/static/wideImage.png differ
diff --git a/packages/shared-components/vite.config.ts b/packages/shared-components/vite.config.ts
index e0831b2ad9..0a27742816 100644
--- a/packages/shared-components/vite.config.ts
+++ b/packages/shared-components/vite.config.ts
@@ -9,7 +9,7 @@
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { defineConfig, esmExternalRequirePlugin } from "vite";
-import dts from "vite-plugin-dts";
+import dts from "unplugin-dts/vite";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -51,10 +51,10 @@ export default defineConfig({
     },
     plugins: [
         dts({
-            rollupTypes: true,
+            bundleTypes: true,
             include: ["src/**/*.{ts,tsx}"],
             exclude: ["src/**/*.test.{ts,tsx}", "src/**/*.stories.{ts,tsx}"],
-            copyDtsFiles: true,
+            copyDtsFiles: false,
         }),
     ],
 });
diff --git a/packages/shared-components/vitest.config.ts b/packages/shared-components/vitest.config.ts
index 3965060eac..1fa6c1b3a7 100644
--- a/packages/shared-components/vitest.config.ts
+++ b/packages/shared-components/vitest.config.ts
@@ -142,15 +142,19 @@ 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]",
                     },
                 },
             },
         ],
     },
     optimizeDeps: {
-        include: ["vite-plugin-node-polyfills/shims/buffer", "vite-plugin-node-polyfills/shims/process"],
+        include: [
+            "vite-plugin-node-polyfills/shims/buffer",
+            "vite-plugin-node-polyfills/shims/process",
+            "@vector-im/compound-design-tokens/assets/web/icons",
+        ],
     },
     resolve: {
         alias: {
diff --git a/patches/unplugin-dts.patch b/patches/unplugin-dts.patch
new file mode 100644
index 0000000000..969172836f
--- /dev/null
+++ b/patches/unplugin-dts.patch
@@ -0,0 +1,13 @@
+diff --git a/dist/shared/unplugin-dts.Dv6DEU-x.mjs b/dist/shared/unplugin-dts.Dv6DEU-x.mjs
+index ad5f1183abb26a97ed92068f623ef1eb61fc54ca..5e3e5d0d25fe067ecfd5f3f8ecbd4808139758b9 100644
+--- a/dist/shared/unplugin-dts.Dv6DEU-x.mjs
++++ b/dist/shared/unplugin-dts.Dv6DEU-x.mjs
+@@ -920,7 +920,7 @@ class Runtime {
+     const maybeEmitted = (sourceFile) => {
+       return !(compilerOptions.noEmitForJsFiles && jsRE.test(sourceFile.fileName)) && !sourceFile.isDeclarationFile && !program.isSourceFileFromExternalLibrary(sourceFile);
+     };
+-    let publicRoot = compilerOptions.rootDir ? ensureAbsolute(resolveConfigDir(compilerOptions.rootDir, root), root) : compilerOptions.composite && compilerOptions.configFilePath ? dirname(compilerOptions.configFilePath) : queryPublicPath(
++    let publicRoot = compilerOptions.rootDir ? ensureAbsolute(resolveConfigDir(compilerOptions.rootDir, root), root) : compilerOptions.composite && compilerOptions.configFilePath ? dirname(compilerOptions.configFilePath) : compare(ts.version, '6.0.0', '>=') ? (configPath ? dirname(configPath) : root) : queryPublicPath(
+       program.getSourceFiles().filter(maybeEmitted).map((sourceFile) => sourceFile.fileName)
+     );
+     publicRoot = normalizePath(publicRoot);
diff --git a/playwright-merge.config.ts b/playwright-merge.config.ts
index c4498527a3..3a30236e14 100644
--- a/playwright-merge.config.ts
+++ b/playwright-merge.config.ts
@@ -14,7 +14,7 @@ export default defineConfig({
     testDir: "apps/web/playwright/e2e",
     reporter: [
         ["html", { open: "never" }],
-        ["./packages/playwright-common/flaky-reporter.ts"],
-        ["@element-hq/element-web-playwright-common/lib/stale-screenshot-reporter.js"],
+        ["./packages/playwright-common/src/flaky-reporter.ts"],
+        ["./packages/playwright-common/src/stale-screenshot-reporter.ts"],
     ],
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 91ecc4b9ea..0dbea9d892 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,12 +6,6 @@ settings:
 
 catalogs:
   default:
-    '@element-hq/element-web-module-api':
-      specifier: 1.12.0
-      version: 1.12.0
-    '@element-hq/element-web-playwright-common':
-      specifier: 2.4.0
-      version: 2.4.0
     '@fontsource/inter':
       specifier: 5.2.8
       version: 5.2.8
@@ -19,11 +13,11 @@ catalogs:
       specifier: 1.59.1
       version: 1.59.1
     '@vector-im/compound-design-tokens':
-      specifier: 8.0.0
-      version: 8.0.0
+      specifier: 10.1.0
+      version: 10.1.0
     '@vector-im/compound-web':
-      specifier: 8.4.0
-      version: 8.4.0
+      specifier: 9.2.0
+      version: 9.2.0
     matrix-web-i18n:
       specifier: 3.6.0
       version: 3.6.0
@@ -32,57 +26,43 @@ catalogs:
       version: 1.59.1
     react:
       specifier: ^19.0.0
-      version: 19.2.4
+      version: 19.2.5
     react-dom:
       specifier: ^19.0.0
-      version: 19.2.4
+      version: 19.2.5
     typescript:
-      specifier: 5.9.3
-      version: 5.9.3
+      specifier: 6.0.3
+      version: 6.0.3
 
 overrides:
-  pretty-format@30>react-is: 19.2.4
+  pretty-format@30>react-is: 19.2.5
   '@types/react': ^19.2.10
   '@types/react-dom': ^19.2.3
   oidc-client-ts: 3.5.0
   jwt-decode: 4.0.0
-  caniuse-lite: 1.0.30001781
+  caniuse-lite: 1.0.30001788
   markdown-it: 14.1.1
   testcontainers: ^11.0.0
   matrix-widget-api: ^1.17.0
   qs: 6.15.0
-  serialize-javascript: 7.0.5
-  atomically: 2.1.1
   '@types/node': 18.19.130
   config-file-ts: 0.2.8-rc1
-  node-abi: 4.27.0
+  node-abi: 4.28.0
   '@types/pg-pool': 2.0.7
-  flatted@3.4.1: 3.4.2
   ajv@6.12.6: 6.14.0
   ajv@>=8 <8.18.0: 8.18.0
-  bn.js@4.12.2: 4.12.3
-  bn.js@5.2.2: 5.2.3
-  brace-expansion@1.1.12: 1.1.13
-  brace-expansion@2.0.2: 2.0.3
-  brace-expansion@5.0.4: 5.0.5
-  handlebars@4.7.8: 4.7.9
-  path-to-regexp@0.1.12: 0.2.5
-  path-to-regexp@8.3.0: 8.4.2
-  picomatch@2.3.1: 2.3.2
-  picomatch@4.0: 4.0.4
-  rollup@4.57.1: 4.60.1
-  smol-toml@1.6.0: 1.6.1
-  svgo@3.3.2: 3.3.3
-  svgo@4.0.0: 4.0.1
-  underscore@1.13.7: 1.13.8
-  yaml@1.10.2: 1.10.3
-  yaml@2.8.2: 2.8.3
-  undici@7.22.2: 7.24.7
-  '@xmldom/xmldom@0.8.11': 0.9.9
-  esbuild@<=0.24.2: '>=0.25.0'
+  axios@>1.0.0 <1.15.0: 1.15.0
+  picomatch@>=4.0.0 <4.0.4: 4.0.4
+  esbuild@<=0.24.2: 0.27.4
+  esbuild@~0.27.0: 0.27.4
   minimatch@>=10.0.0 <10.2.3: '>=10.2.3'
+  lodash@4.17.23: 4.18.1
+  follow-redirects@1.15.11: 1.16.0
+  '@actions/github@6.0.1': 8.0.1
+  dompurify@>=3.0.0 <=3.3.3: 3.4.0
+  protobufjs@>=7.0.0 <7.5.5: 7.5.5
 
-packageExtensionsChecksum: sha256-OFePh8Fn8A1ZEWgJF51vTMPT/HEVyXQyj6YGIztPb0w=
+packageExtensionsChecksum: sha256-EMEi1vcyzQthk7O/0AcntvnHgJaKCoFBlzp6iX/qNYk=
 
 patchedDependencies:
   '@matrix-org/react-sdk-module-api':
@@ -127,6 +107,9 @@ patchedDependencies:
   rollup:
     hash: 603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8
     path: patches/rollup.patch
+  unplugin-dts:
+    hash: c71b9e0f229ad1d76152030e8eceff26ee0b23c18619c205aa55fee274f89073
+    path: patches/unplugin-dts.patch
 
 importers:
 
@@ -138,15 +121,9 @@ importers:
       '@action-validator/core':
         specifier: ^0.6.0
         version: 0.6.0
-      '@element-hq/element-web-playwright-common':
-        specifier: 'catalog:'
-        version: 2.4.0(@element-hq/element-web-module-api@1.12.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4))(@playwright/test@1.59.1)(playwright-core@1.59.1)
       '@nx-tools/nx-container':
         specifier: ^7.2.1
-        version: 7.2.1(@nx/devkit@22.5.3(nx@22.5.4))(@nx/js@22.5.3(@babel/traverse@7.29.0)(nx@22.5.4))(dotenv@17.4.0)(nx@22.5.4)(tslib@2.8.1)
-      '@nx/jest':
-        specifier: ^22.5.0
-        version: 22.5.3(@babel/traverse@7.29.0)(@types/node@18.19.130)(babel-plugin-macros@3.1.0)(nx@22.5.4)(typescript@5.9.3)
+        version: 7.2.1(@nx/devkit@22.6.5(nx@22.6.5))(@nx/js@22.6.5(@babel/traverse@7.29.0)(nx@22.6.5))(dotenv@17.4.2)(nx@22.6.5)(tslib@2.8.1)
       '@playwright/test':
         specifier: 'catalog:'
         version: 1.59.1
@@ -158,18 +135,18 @@ importers:
         version: 3.14.0
       eslint-plugin-matrix-org:
         specifier: ^3.0.0
-        version: 3.0.0(d28b6cfeddcbcf776e114e7554fcab7e)
+        version: 3.0.0(756bde0db757d9adac5fccdfadf6b9bb)
       husky:
         specifier: ^9.0.0
         version: 9.1.7
       knip:
-        specifier: 6.3.0
-        version: 6.3.0(patch_hash=9ee905cce2466e391db69dfcea905b0fe2502afd935d1dc6a6ac94ffe2855c28)(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)
+        specifier: 6.4.1
+        version: 6.4.1(patch_hash=9ee905cce2466e391db69dfcea905b0fe2502afd935d1dc6a6ac94ffe2855c28)(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
       lint-staged:
         specifier: ^16.0.0
         version: 16.4.0
       lodash:
-        specifier: ^4.17.21
+        specifier: 4.18.1
         version: 4.18.1
       mermaid:
         specifier: ^11.13.0
@@ -178,29 +155,29 @@ importers:
         specifier: ^1.2.6
         version: 1.2.8
       nx:
-        specifier: 22.5.4
-        version: 22.5.4
+        specifier: 22.6.5
+        version: 22.6.5
       prettier:
-        specifier: 3.8.1
-        version: 3.8.1
+        specifier: 3.8.3
+        version: 3.8.3
       typescript:
         specifier: 'catalog:'
-        version: 5.9.3
+        version: 6.0.3
       vitepress:
         specifier: ^1.6.4
-        version: 1.6.4(@algolia/client-search@5.50.0)(@types/node@18.19.130)(@types/react@19.2.10)(axios@1.13.5)(jwt-decode@4.0.0)(lightningcss@1.32.0)(postcss@8.5.8)(qrcode@1.5.4)(react@19.2.4)(search-insights@2.17.3)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(typescript@5.9.3)
+        version: 1.6.4(@algolia/client-search@5.50.0)(@types/node@18.19.130)(@types/react@19.2.14)(axios@1.15.0)(jwt-decode@4.0.0)(lightningcss@1.32.0)(postcss@8.5.10)(qrcode@1.5.4)(search-insights@2.17.3)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(typescript@6.0.3)
       vitepress-plugin-mermaid:
         specifier: ^2.0.17
-        version: 2.0.17(mermaid@11.14.0)(vitepress@1.6.4(@algolia/client-search@5.50.0)(@types/node@18.19.130)(@types/react@19.2.10)(axios@1.13.5)(jwt-decode@4.0.0)(lightningcss@1.32.0)(postcss@8.5.8)(qrcode@1.5.4)(react@19.2.4)(search-insights@2.17.3)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(typescript@5.9.3))
+        version: 2.0.17(mermaid@11.14.0)(vitepress@1.6.4(@algolia/client-search@5.50.0)(@types/node@18.19.130)(@types/react@19.2.14)(axios@1.15.0)(jwt-decode@4.0.0)(lightningcss@1.32.0)(postcss@8.5.10)(qrcode@1.5.4)(search-insights@2.17.3)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(typescript@6.0.3))
       yaml:
-        specifier: 2.8.3
+        specifier: ^2.3.3
         version: 2.8.3
 
   apps/desktop:
     dependencies:
       '@sentry/electron':
         specifier: ^7.0.0
-        version: 7.10.0
+        version: 7.11.0
       auto-launch:
         specifier: ^5.0.5
         version: 5.0.6
@@ -220,27 +197,30 @@ importers:
         specifier: ^3.0.0
         version: 3.0.1
       uuid:
-        specifier: ^13.0.0
-        version: 13.0.0
+        specifier: ^14.0.0
+        version: 14.0.0
     devDependencies:
       '@babel/core':
         specifier: ^7.18.10
         version: 7.29.0
       '@babel/preset-env':
         specifier: ^7.18.10
-        version: 7.29.0(@babel/core@7.29.0)
+        version: 7.29.2(@babel/core@7.29.0)
       '@babel/preset-typescript':
         specifier: ^7.18.6
         version: 7.28.5(@babel/core@7.29.0)
       '@electron/asar':
-        specifier: 4.1.2
-        version: 4.1.2
+        specifier: 4.2.0
+        version: 4.2.0
+      '@electron/fuses':
+        specifier: ^2.1.1
+        version: 2.1.1
       '@playwright/test':
         specifier: 'catalog:'
         version: 1.59.1
       '@stylistic/eslint-plugin':
         specifier: ^5.0.0
-        version: 5.9.0(eslint@8.57.1)
+        version: 5.10.0(eslint@8.57.1)
       '@types/auto-launch':
         specifier: ^5.0.1
         version: 5.0.5(patch_hash=b60dc9846a11a1684ce52c55493f29ea398d3dc44b88f66ab44e9843d6c01538)
@@ -258,13 +238,13 @@ importers:
         version: 11.1.8
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.0.0
-        version: 8.57.2(@typescript-eslint/parser@8.58.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3)
+        version: 8.58.2(@typescript-eslint/parser@8.58.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3)
       '@typescript-eslint/parser':
         specifier: ^8.0.0
-        version: 8.58.0(eslint@8.57.1)(typescript@5.9.3)
+        version: 8.58.2(eslint@8.57.1)(typescript@6.0.3)
       app-builder-lib:
-        specifier: 26.8.2
-        version: 26.8.2(patch_hash=2dfb3fcdfe573cca6c248cecf63ddea5c8fa0276859695fba6c9664d0ff285d6)(dmg-builder@26.8.2)(electron-builder-squirrel-windows@26.8.2)
+        specifier: 26.9.0
+        version: 26.9.0(patch_hash=2dfb3fcdfe573cca6c248cecf63ddea5c8fa0276859695fba6c9664d0ff285d6)(dmg-builder@26.9.0)(electron-builder-squirrel-windows@26.9.0)
       chokidar:
         specifier: ^5.0.0
         version: 5.0.0
@@ -272,14 +252,14 @@ importers:
         specifier: ^2.0.0
         version: 2.1.2
       electron:
-        specifier: 41.1.0
-        version: 41.1.0
+        specifier: 41.2.2
+        version: 41.2.2
       electron-builder:
-        specifier: 26.8.2
-        version: 26.8.2(electron-builder-squirrel-windows@26.8.2)
+        specifier: 26.9.0
+        version: 26.9.0(electron-builder-squirrel-windows@26.9.0)
       electron-builder-squirrel-windows:
-        specifier: 26.8.2
-        version: 26.8.2(dmg-builder@26.8.2)
+        specifier: 26.9.0
+        version: 26.9.0(dmg-builder@26.9.0)
       electron-devtools-installer:
         specifier: ^4.0.0
         version: 4.0.0
@@ -294,13 +274,13 @@ importers:
         version: 10.1.8(eslint@8.57.1)
       eslint-plugin-import:
         specifier: ^2.25.4
-        version: 2.32.0(@typescript-eslint/parser@8.58.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)
+        version: 2.32.0(@typescript-eslint/parser@8.58.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)
       eslint-plugin-matrix-org:
         specifier: ^3.0.0
-        version: 3.0.0(d28b6cfeddcbcf776e114e7554fcab7e)
+        version: 3.0.0(756bde0db757d9adac5fccdfadf6b9bb)
       eslint-plugin-n:
         specifier: ^17.12.0
-        version: 17.24.0(eslint@8.57.1)(typescript@5.9.3)
+        version: 17.24.0(eslint@8.57.1)(typescript@6.0.3)
       eslint-plugin-unicorn:
         specifier: ^56.0.0
         version: 56.0.1(eslint@8.57.1)
@@ -318,7 +298,7 @@ importers:
         version: 21.5.0
       prettier:
         specifier: ^3.0.0
-        version: 3.8.1
+        version: 3.8.3
       rimraf:
         specifier: ^6.0.0
         version: 6.1.3
@@ -326,17 +306,17 @@ importers:
         specifier: ^7.5.8
         version: 7.5.13
       typescript:
-        specifier: 5.9.3
-        version: 5.9.3
+        specifier: 6.0.3
+        version: 6.0.3
 
   apps/web:
     dependencies:
       '@babel/runtime':
         specifier: ^7.12.5
-        version: 7.28.6
+        version: 7.29.2
       '@element-hq/element-web-module-api':
-        specifier: 'catalog:'
-        version: 1.12.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4)
+        specifier: workspace:*
+        version: link:../../packages/module-api
       '@element-hq/web-shared-components':
         specifier: workspace:*
         version: link:../../packages/shared-components
@@ -348,7 +328,7 @@ importers:
         version: 5.2.8
       '@formatjs/intl-segmenter':
         specifier: ^12.0.0
-        version: 12.2.1
+        version: 12.2.2
       '@matrix-org/analytics-events':
         specifier: ^0.33.0
         version: 0.33.2
@@ -357,22 +337,22 @@ importers:
         version: 1.5.0
       '@matrix-org/react-sdk-module-api':
         specifier: ^2.4.0
-        version: 2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4)
+        version: 2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.5)
       '@sentry/browser':
         specifier: ^10.0.0
-        version: 10.47.0
+        version: 10.49.0
       '@types/png-chunks-extract':
         specifier: ^1.0.2
         version: 1.0.2
       '@vector-im/compound-design-tokens':
         specifier: 'catalog:'
-        version: 8.0.0(@types/react@19.2.10)(react@19.2.4)
+        version: 10.1.0(@types/react@19.2.14)(react@19.2.5)
       '@vector-im/compound-web':
         specifier: 'catalog:'
-        version: 8.4.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@8.0.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 9.2.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.14)(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@vector-im/matrix-wysiwyg':
         specifier: 2.40.0
-        version: 2.40.0(patch_hash=7bdf6150f2905bc2f055a6bcaa7b9d78fa7ffde82e800bcc454ac7b0096bd65e)(react@19.2.4)
+        version: 2.40.0(patch_hash=7bdf6150f2905bc2f055a6bcaa7b9d78fa7ffde82e800bcc454ac7b0096bd65e)(react@19.2.5)
       '@zxcvbn-ts/core':
         specifier: ^3.0.4
         version: 3.0.4
@@ -437,8 +417,8 @@ importers:
         specifier: ^2.0.0
         version: 2.6.0
       html-react-parser:
-        specifier: ^5.2.2
-        version: 5.2.17(@types/react@19.2.10)(react@19.2.4)
+        specifier: ^6.0.0
+        version: 6.0.1(@types/react@19.2.14)(react@19.2.5)
       is-ip:
         specifier: ^5.0.0
         version: 5.0.1
@@ -447,7 +427,7 @@ importers:
         version: 5.0.1
       jsrsasign:
         specifier: ^11.0.0
-        version: 11.1.1
+        version: 11.1.3
       jszip:
         specifier: ^3.7.0
         version: 3.10.1
@@ -459,13 +439,13 @@ importers:
         version: lodash-es@4.18.1
       maplibre-gl:
         specifier: ^5.0.0
-        version: 5.22.0
+        version: 5.23.0
       matrix-encrypt-attachment:
         specifier: ^1.0.3
         version: 1.0.3
       matrix-js-sdk:
         specifier: github:matrix-org/matrix-js-sdk#develop
-        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6371e4b25206dcd459d19375f5d046993ce11b1b
+        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa424c44b4991acacc7524066a54a352e140f7b6
       matrix-widget-api:
         specifier: ^1.17.0
         version: 1.17.0
@@ -488,53 +468,50 @@ importers:
         specifier: ^1.0.0
         version: 1.0.0
       posthog-js:
-        specifier: 1.364.7
-        version: 1.364.7
+        specifier: 1.369.3
+        version: 1.369.3
       qrcode:
         specifier: 1.5.4
         version: 1.5.4
       re-resizable:
         specifier: 6.11.2
-        version: 6.11.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 6.11.2(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       react:
         specifier: 'catalog:'
-        version: 19.2.4
+        version: 19.2.5
       react-beautiful-dnd:
         specifier: ^13.1.0
-        version: 13.1.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 13.1.1(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       react-blurhash:
         specifier: ^0.3.0
-        version: 0.3.0(patch_hash=58bc7f075478017ce27bcc252e8509876390db106246bd5b0a7446642cc4b505)(blurhash@2.0.5)(react@19.2.4)
+        version: 0.3.0(patch_hash=58bc7f075478017ce27bcc252e8509876390db106246bd5b0a7446642cc4b505)(blurhash@2.0.5)(react@19.2.5)
       react-dom:
         specifier: 'catalog:'
-        version: 19.2.4(react@19.2.4)
+        version: 19.2.5(react@19.2.5)
       react-focus-lock:
         specifier: ^2.5.1
-        version: 2.13.7(@types/react@19.2.10)(react@19.2.4)
+        version: 2.13.7(@types/react@19.2.14)(react@19.2.5)
       react-string-replace:
         specifier: ^2.0.0
         version: 2.0.1
       react-transition-group:
         specifier: ^4.4.1
-        version: 4.4.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 4.4.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       rfc4648:
         specifier: ^1.4.0
         version: 1.5.4
       sanitize-filename:
         specifier: ^1.6.3
-        version: 1.6.3
+        version: 1.6.4
       sanitize-html:
-        specifier: 2.17.2
-        version: 2.17.2
+        specifier: 2.17.3
+        version: 2.17.3
       tar-js:
         specifier: ^0.3.0
         version: 0.3.0
       ua-parser-js:
         specifier: 1.0.40
         version: 1.0.40
-      uuid:
-        specifier: ^13.0.0
-        version: 13.0.0
       what-input:
         specifier: ^5.2.10
         version: 5.2.12
@@ -583,7 +560,7 @@ importers:
         version: 7.29.0(@babel/core@7.29.0)
       '@babel/preset-env':
         specifier: ^7.12.11
-        version: 7.29.0(@babel/core@7.29.0)
+        version: 7.29.2(@babel/core@7.29.0)
       '@babel/preset-react':
         specifier: ^7.12.10
         version: 7.28.5(@babel/core@7.29.0)
@@ -591,15 +568,12 @@ importers:
         specifier: ^7.12.7
         version: 7.28.5(@babel/core@7.29.0)
       '@casualbot/jest-sonar-reporter':
-        specifier: 2.5.0
-        version: 2.5.0
+        specifier: 2.6.0
+        version: 2.6.0
       '@element-hq/element-call-embedded':
-        specifier: 0.18.0
-        version: 0.18.0
+        specifier: 0.19.1
+        version: 0.19.1
       '@element-hq/element-web-playwright-common':
-        specifier: 'catalog:'
-        version: 2.4.0(@element-hq/element-web-module-api@1.12.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4))(@playwright/test@1.59.1)(playwright-core@1.59.1)
-      '@element-hq/element-web-playwright-common-local':
         specifier: workspace:*
         version: link:../../packages/playwright-common
       '@fetch-mock/jest':
@@ -616,16 +590,16 @@ importers:
         version: 1.59.1
       '@principalstudio/html-webpack-inject-preload':
         specifier: ^1.2.7
-        version: 1.2.7(html-webpack-plugin@5.6.6(webpack@5.105.4))(webpack@5.105.4)
+        version: 1.2.7(html-webpack-plugin@5.6.7(webpack@5.106.2))(webpack@5.106.2)
       '@sentry/webpack-plugin':
         specifier: ^5.0.0
-        version: 5.1.1(encoding@0.1.13)(webpack@5.105.4)
+        version: 5.2.0(encoding@0.1.13)(webpack@5.106.2)
       '@stylistic/eslint-plugin':
         specifier: ^5.0.0
-        version: 5.9.0(eslint@8.57.1)
+        version: 5.10.0(eslint@8.57.1)
       '@svgr/webpack':
         specifier: ^8.0.0
-        version: 8.1.0(typescript@5.9.3)
+        version: 8.1.0(typescript@6.0.3)
       '@testing-library/dom':
         specifier: ^10.4.0
         version: 10.4.1
@@ -634,7 +608,7 @@ importers:
         version: 6.9.1
       '@testing-library/react':
         specifier: ^16.0.0
-        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.6.1(@testing-library/dom@10.4.1)
@@ -694,16 +668,16 @@ importers:
         version: 1.5.6
       '@types/react':
         specifier: ^19.2.10
-        version: 19.2.10
+        version: 19.2.14
       '@types/react-beautiful-dnd':
         specifier: ^13.0.0
         version: 13.1.8
       '@types/react-dom':
         specifier: ^19.2.3
-        version: 19.2.3(@types/react@19.2.10)
+        version: 19.2.3(@types/react@19.2.14)
       '@types/react-transition-group':
         specifier: ^4.4.0
-        version: 4.4.12(@types/react@19.2.10)
+        version: 4.4.12(@types/react@19.2.14)
       '@types/sanitize-html':
         specifier: 2.16.1
         version: 2.16.1
@@ -721,16 +695,16 @@ importers:
         version: 0.7.39
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.19.0
-        version: 8.57.2(@typescript-eslint/parser@8.58.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3)
+        version: 8.58.2(@typescript-eslint/parser@8.58.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3)
       '@typescript-eslint/parser':
         specifier: ^8.19.0
-        version: 8.58.0(eslint@8.57.1)(typescript@5.9.3)
+        version: 8.58.2(eslint@8.57.1)(typescript@6.0.3)
       babel-jest:
         specifier: ^30.0.0
         version: 30.3.0(@babel/core@7.29.0)
       babel-loader:
         specifier: ^10.0.0
-        version: 10.0.0(@babel/core@7.29.0)(webpack@5.105.4)
+        version: 10.1.1(@babel/core@7.29.0)(webpack@5.106.2)
       babel-plugin-jsx-remove-data-test-id:
         specifier: ^3.0.0
         version: 3.0.0(@babel/core@7.29.0)
@@ -739,16 +713,16 @@ importers:
         version: 9.0.20240710
       copy-webpack-plugin:
         specifier: ^14.0.0
-        version: 14.0.0(webpack@5.105.4)
+        version: 14.0.0(webpack@5.106.2)
       css-loader:
         specifier: ^7.0.0
-        version: 7.1.4(webpack@5.105.4)
+        version: 7.1.4(webpack@5.106.2)
       css-minimizer-webpack-plugin:
         specifier: ^8.0.0
-        version: 8.0.0(lightningcss@1.32.0)(webpack@5.105.4)
+        version: 8.0.0(lightningcss@1.32.0)(webpack@5.106.2)
       dotenv:
         specifier: ^17.0.0
-        version: 17.4.0
+        version: 17.4.2
       eslint:
         specifier: 8.57.1
         version: 8.57.1
@@ -763,16 +737,16 @@ importers:
         version: 0.9.0(eslint@8.57.1)
       eslint-plugin-import:
         specifier: ^2.25.4
-        version: 2.32.0(@typescript-eslint/parser@8.58.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)
+        version: 2.32.0(@typescript-eslint/parser@8.58.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)
       eslint-plugin-jest:
         specifier: ^29.0.0
-        version: 29.15.0(@typescript-eslint/eslint-plugin@8.57.2(@typescript-eslint/parser@8.58.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(jest@30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0))(typescript@5.9.3)
+        version: 29.15.2(@typescript-eslint/eslint-plugin@8.58.2(@typescript-eslint/parser@8.58.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(jest@30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0))(typescript@6.0.3)
       eslint-plugin-jsx-a11y:
         specifier: ^6.5.1
         version: 6.10.2(eslint@8.57.1)
       eslint-plugin-matrix-org:
         specifier: ^3.0.0
-        version: 3.0.0(d28b6cfeddcbcf776e114e7554fcab7e)
+        version: 3.0.0(756bde0db757d9adac5fccdfadf6b9bb)
       eslint-plugin-react:
         specifier: ^7.28.0
         version: 7.37.5(eslint@8.57.1)
@@ -781,7 +755,7 @@ importers:
         version: 19.0.0-beta-ebf51a3-20250411(eslint@8.57.1)
       eslint-plugin-react-hooks:
         specifier: ^7.0.0
-        version: 7.0.1(eslint@8.57.1)
+        version: 7.1.1(eslint@8.57.1)
       eslint-plugin-unicorn:
         specifier: ^56.0.0
         version: 56.0.1(eslint@8.57.1)
@@ -793,10 +767,10 @@ importers:
         version: 6.2.5
       file-loader:
         specifier: ^6.0.0
-        version: 6.2.0(webpack@5.105.4)
+        version: 6.2.0(webpack@5.106.2)
       html-webpack-plugin:
         specifier: ^5.5.3
-        version: 5.6.6(webpack@5.105.4)
+        version: 5.6.7(webpack@5.106.2)
       identity-obj-proxy:
         specifier: ^3.0.0
         version: 3.0.0
@@ -826,7 +800,7 @@ importers:
         version: 3.6.0
       mini-css-extract-plugin:
         specifier: 2.10.2
-        version: 2.10.2(webpack@5.105.4)
+        version: 2.10.2(webpack@5.106.2)
       modernizr:
         specifier: ^3.12.0
         version: 3.13.1
@@ -834,71 +808,71 @@ importers:
         specifier: 'catalog:'
         version: 1.59.1
       postcss:
-        specifier: 8.5.8
-        version: 8.5.8
+        specifier: 8.5.10
+        version: 8.5.10
       postcss-easings:
         specifier: 4.0.0
-        version: 4.0.0(postcss@8.5.8)
+        version: 4.0.0(postcss@8.5.10)
       postcss-hexrgba:
         specifier: 2.1.0
-        version: 2.1.0(postcss@8.5.8)
+        version: 2.1.0(postcss@8.5.10)
       postcss-import:
         specifier: 16.1.1
-        version: 16.1.1(postcss@8.5.8)
+        version: 16.1.1(postcss@8.5.10)
       postcss-loader:
         specifier: 8.2.1
-        version: 8.2.1(postcss@8.5.8)(typescript@5.9.3)(webpack@5.105.4)
+        version: 8.2.1(postcss@8.5.10)(typescript@6.0.3)(webpack@5.106.2)
       postcss-mixins:
         specifier: 12.1.2
-        version: 12.1.2(patch_hash=30fc882486b610a1c252340c87a99f1030c50e698a3c57c837eff7232e29d6d0)(postcss@8.5.8)
+        version: 12.1.2(patch_hash=30fc882486b610a1c252340c87a99f1030c50e698a3c57c837eff7232e29d6d0)(postcss@8.5.10)
       postcss-nested:
         specifier: 7.0.2
-        version: 7.0.2(postcss@8.5.8)
+        version: 7.0.2(postcss@8.5.10)
       postcss-preset-env:
-        specifier: 11.2.0
-        version: 11.2.0(postcss@8.5.8)
+        specifier: 11.2.1
+        version: 11.2.1(postcss@8.5.10)
       postcss-scss:
         specifier: 4.0.9
-        version: 4.0.9(postcss@8.5.8)
+        version: 4.0.9(postcss@8.5.10)
       postcss-simple-vars:
         specifier: 7.0.1
-        version: 7.0.1(postcss@8.5.8)
+        version: 7.0.1(postcss@8.5.10)
       prettier:
-        specifier: 3.8.1
-        version: 3.8.1
+        specifier: 3.8.3
+        version: 3.8.3
       process:
         specifier: ^0.11.10
         version: 0.11.10
       raw-loader:
         specifier: ^4.0.2
-        version: 4.0.2(webpack@5.105.4)
+        version: 4.0.2(webpack@5.106.2)
       semver:
         specifier: ^7.5.2
         version: 7.7.4
       source-map-loader:
         specifier: ^5.0.0
-        version: 5.0.0(webpack@5.105.4)
+        version: 5.0.0(webpack@5.106.2)
       stylelint:
         specifier: ^17.0.0
-        version: 17.6.0(typescript@5.9.3)
+        version: 17.8.0(typescript@6.0.3)
       stylelint-config-standard:
         specifier: ^40.0.0
-        version: 40.0.0(stylelint@17.6.0(typescript@5.9.3))
+        version: 40.0.0(stylelint@17.8.0(typescript@6.0.3))
       stylelint-scss:
         specifier: ^7.0.0
-        version: 7.0.0(stylelint@17.6.0(typescript@5.9.3))
+        version: 7.0.0(stylelint@17.8.0(typescript@6.0.3))
       stylelint-value-no-unknown-custom-properties:
         specifier: ^6.0.1
-        version: 6.1.1(stylelint@17.6.0(typescript@5.9.3))
+        version: 6.1.1(stylelint@17.8.0(typescript@6.0.3))
       terser-webpack-plugin:
         specifier: ^5.3.9
-        version: 5.4.0(webpack@5.105.4)
+        version: 5.4.0(webpack@5.106.2)
       testcontainers:
         specifier: ^11.0.0
-        version: 11.12.0
+        version: 11.14.0
       typescript:
         specifier: 'catalog:'
-        version: 5.9.3
+        version: 6.0.3
       util:
         specifier: ^0.12.5
         version: 0.12.5
@@ -907,43 +881,138 @@ importers:
         version: 4.2.0
       webpack:
         specifier: ^5.89.0
-        version: 5.105.4(webpack-cli@7.0.2)
+        version: 5.106.2(webpack-cli@7.0.2)
       webpack-bundle-analyzer:
         specifier: ^5.0.0
         version: 5.3.0
       webpack-cli:
         specifier: ^7.0.0
-        version: 7.0.2(webpack-bundle-analyzer@5.3.0)(webpack-dev-server@5.2.3)(webpack@5.105.4)
+        version: 7.0.2(webpack-bundle-analyzer@5.3.0)(webpack-dev-server@5.2.3)(webpack@5.106.2)
       webpack-dev-server:
         specifier: ^5.0.0
-        version: 5.2.3(tslib@2.8.1)(webpack-cli@7.0.2)(webpack@5.105.4)
+        version: 5.2.3(tslib@2.8.1)(webpack-cli@7.0.2)(webpack@5.106.2)
       webpack-retry-chunk-load-plugin:
         specifier: ^3.1.1
-        version: 3.1.1(webpack@5.105.4)
+        version: 3.1.1(webpack@5.106.2)
       webpack-version-file-plugin:
         specifier: ^0.5.0
-        version: 0.5.0(webpack@5.105.4)
+        version: 0.5.0(webpack@5.106.2)
       yaml:
-        specifier: 2.8.3
+        specifier: ^2.3.3
         version: 2.8.3
 
-  packages/playwright-common:
+  packages/module-api:
+    dependencies:
+      matrix-web-i18n:
+        specifier: '*'
+        version: 3.6.0
+      react:
+        specifier: ^19
+        version: 19.2.5
     devDependencies:
+      '@matrix-org/react-sdk-module-api':
+        specifier: ^2.5.0
+        version: 2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.5)
+      '@microsoft/api-extractor':
+        specifier: ^7.49.1
+        version: 7.58.5(@types/node@18.19.130)
+      '@types/node':
+        specifier: 18.19.130
+        version: 18.19.130
+      '@types/react':
+        specifier: ^19.2.10
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      '@types/semver':
+        specifier: ^7.5.8
+        version: 7.7.1
+      '@vitest/coverage-v8':
+        specifier: ^4.0.0
+        version: 4.1.5(@vitest/browser@4.1.5)(vitest@4.1.5)
+      matrix-widget-api:
+        specifier: ^1.17.0
+        version: 1.17.0
+      rollup-plugin-external-globals:
+        specifier: ^0.13.0
+        version: 0.13.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))
+      semver:
+        specifier: ^7.6.3
+        version: 7.7.4
+      typescript:
+        specifier: ^6.0.0
+        version: 6.0.3
+      unplugin-dts:
+        specifier: 1.0.0-beta.6
+        version: 1.0.0-beta.6(patch_hash=c71b9e0f229ad1d76152030e8eceff26ee0b23c18619c205aa55fee274f89073)(@microsoft/api-extractor@7.58.5(@types/node@18.19.130))(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(typescript@6.0.3)(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.106.2(esbuild@0.27.4))
+      vite:
+        specifier: ^8.0.0
+        version: 8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vitest:
+        specifier: ^4.0.0
+        version: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      vitest-sonar-reporter:
+        specifier: ^3.0.0
+        version: 3.0.0(vitest@4.1.5)
+
+  packages/playwright-common:
+    dependencies:
+      '@axe-core/playwright':
+        specifier: ^4.10.1
+        version: 4.11.2(playwright-core@1.59.1)
+      '@playwright/test':
+        specifier: 'catalog:'
+        version: 1.59.1
+      '@testcontainers/postgresql':
+        specifier: ^11.0.0
+        version: 11.14.0
+      glob:
+        specifier: ^13.0.5
+        version: 13.0.6
+      lodash-es:
+        specifier: ^4.17.23
+        version: 4.18.1
+      mailpit-api:
+        specifier: ^1.2.0
+        version: 1.9.0(react@19.2.5)
+      playwright-core:
+        specifier: 'catalog:'
+        version: 1.59.1
+      strip-ansi:
+        specifier: ^7.1.0
+        version: 7.2.0
+      testcontainers:
+        specifier: ^11.0.0
+        version: 11.14.0
       wait-on:
         specifier: ^9.0.4
-        version: 9.0.4
+        version: 9.0.5
+      yaml:
+        specifier: ^2.7.0
+        version: 2.8.3
+    devDependencies:
+      '@element-hq/element-web-module-api':
+        specifier: workspace:*
+        version: link:../module-api
+      '@types/lodash-es':
+        specifier: ^4.17.12
+        version: 4.17.12
+      typescript:
+        specifier: ^6.0.0
+        version: 6.0.3
 
   packages/shared-components:
     dependencies:
       '@element-hq/element-web-module-api':
-        specifier: 'catalog:'
-        version: 1.12.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4)
+        specifier: workspace:*
+        version: link:../module-api
       '@matrix-org/spec':
         specifier: ^1.7.0
         version: 1.16.0
       '@vector-im/compound-design-tokens':
         specifier: 'catalog:'
-        version: 8.0.0(@types/react@19.2.10)(react@19.2.4)
+        version: 10.1.0(@types/react@19.2.14)(react@19.2.5)
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
@@ -951,14 +1020,14 @@ importers:
         specifier: ^0.18.6
         version: 0.18.6
       html-react-parser:
-        specifier: ^5.2.2
-        version: 5.2.17(@types/react@19.2.10)(react@19.2.4)
+        specifier: ^6.0.0
+        version: 6.0.1(@types/react@19.2.14)(react@19.2.5)
       linkify-html:
         specifier: 4.3.2
         version: 4.3.2(patch_hash=1761c1eabe25d9fae83f74f27a20b3d24515840a4a8747bb04828df46bcfdea2)(linkifyjs@4.3.2)
       linkify-react:
         specifier: 4.3.2
-        version: 4.3.2(linkifyjs@4.3.2)(react@19.2.4)
+        version: 4.3.2(linkifyjs@4.3.2)(react@19.2.5)
       linkify-string:
         specifier: 4.3.2
         version: 4.3.2(linkifyjs@4.3.2)
@@ -967,65 +1036,71 @@ importers:
         version: 4.3.2
       lodash:
         specifier: npm:lodash-es@^4.17.21
-        version: 4.18.1
+        version: lodash-es@4.18.1
       matrix-web-i18n:
         specifier: 'catalog:'
         version: 3.6.0
+      react-blurhash:
+        specifier: ^0.3.0
+        version: 0.3.0(patch_hash=58bc7f075478017ce27bcc252e8509876390db106246bd5b0a7446642cc4b505)(blurhash@2.0.5)(react@19.2.5)
       react-merge-refs:
         specifier: ^3.0.2
-        version: 3.0.2(react@19.2.4)
+        version: 3.0.2(react@19.2.5)
       react-resizable-panels:
-        specifier: ^4.6.5
-        version: 4.7.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        specifier: 4.7.2
+        version: 4.7.2(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       react-virtuoso:
         specifier: ^4.14.0
-        version: 4.18.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 4.18.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       temporal-polyfill:
         specifier: ^0.3.0
         version: 0.3.2
     devDependencies:
-      '@element-hq/element-web-playwright-common-local':
+      '@element-hq/element-web-playwright-common':
         specifier: workspace:*
         version: link:../playwright-common
       '@fetch-mock/vitest':
         specifier: ^0.2.18
-        version: 0.2.18(vitest@4.1.2)
+        version: 0.2.18(vitest@4.1.5)
       '@fontsource/inter':
         specifier: 'catalog:'
         version: 5.2.8
       '@matrix-org/react-sdk-module-api':
         specifier: ^2.5.0
-        version: 2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4)
+        version: 2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.5)
+      '@microsoft/api-extractor':
+        specifier: ^7.56.0
+        version: 7.58.5(@types/node@18.19.130)
       '@playwright/test':
         specifier: 'catalog:'
         version: 1.59.1
       '@storybook/addon-a11y':
         specifier: ^10.0.7
-        version: 10.2.19(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
+        version: 10.3.5(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
       '@storybook/addon-designs':
         specifier: ^11.0.1
-        version: 11.1.2(@storybook/addon-docs@10.2.19(@types/react@19.2.10)(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(esbuild@0.27.4)))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
+        version: 11.1.3(@storybook/addon-docs@10.3.5(@types/react@19.2.14)(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.106.2(esbuild@0.27.4)))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
       '@storybook/addon-docs':
         specifier: ^10.0.7
-        version: 10.2.19(@types/react@19.2.10)(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(esbuild@0.27.4))
+        version: 10.3.5(@types/react@19.2.14)(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.106.2(esbuild@0.27.4))
       '@storybook/addon-vitest':
         specifier: ^10.1.11
-        version: 10.2.19(@vitest/browser-playwright@4.1.2)(@vitest/browser@4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2))(@vitest/runner@4.1.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vitest@4.1.2)
+        version: 10.3.5(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(@vitest/runner@4.1.5)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vitest@4.1.5)
       '@storybook/icons':
         specifier: ^2.0.0
-        version: 2.0.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 2.0.1(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@storybook/react-vite':
         specifier: ^10.0.7
-        version: 10.2.19(esbuild@0.27.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(esbuild@0.27.4))
+        version: 10.3.5(esbuild@0.27.4)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.3)(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.106.2(esbuild@0.27.4))
       '@stylistic/eslint-plugin':
         specifier: ^5.7.0
-        version: 5.9.0(eslint@8.57.1)
+        version: 5.10.0(eslint@8.57.1)
       '@testing-library/dom':
         specifier: ^10.4.1
         version: 10.4.1
       '@testing-library/react':
         specifier: ^16.3.2
-        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@testing-library/user-event':
         specifier: ^14.6.1
         version: 14.6.1(@testing-library/dom@10.4.1)
@@ -1037,25 +1112,25 @@ importers:
         version: 4.17.24
       '@types/react':
         specifier: ^19.2.10
-        version: 19.2.10
+        version: 19.2.14
       '@types/react-dom':
         specifier: ^19.2.3
-        version: 19.2.3(@types/react@19.2.10)
+        version: 19.2.3(@types/react@19.2.14)
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.53.1
-        version: 8.57.2(@typescript-eslint/parser@8.58.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3)
+        version: 8.58.2(@typescript-eslint/parser@8.58.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3)
       '@typescript-eslint/parser':
         specifier: ^8.53.1
-        version: 8.58.0(eslint@8.57.1)(typescript@5.9.3)
+        version: 8.58.2(eslint@8.57.1)(typescript@6.0.3)
       '@vector-im/compound-web':
         specifier: 'catalog:'
-        version: 8.4.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@8.0.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 9.2.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.14)(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@vitest/browser-playwright':
         specifier: ^4.0.17
-        version: 4.1.2(playwright@1.59.1)(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2)
+        version: 4.1.5(playwright@1.59.1)(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.5)
       '@vitest/coverage-v8':
         specifier: ^4.0.17
-        version: 4.1.2(@vitest/browser@4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2))(vitest@4.1.2)
+        version: 4.1.5(@vitest/browser@4.1.5)(vitest@4.1.5)
       eslint:
         specifier: '8'
         version: 8.57.1
@@ -1070,13 +1145,13 @@ importers:
         version: 0.9.0(eslint@8.57.1)
       eslint-plugin-import:
         specifier: ^2.32.0
-        version: 2.32.0(@typescript-eslint/parser@8.58.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)
+        version: 2.32.0(@typescript-eslint/parser@8.58.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)
       eslint-plugin-jsx-a11y:
         specifier: ^6.10.2
         version: 6.10.2(eslint@8.57.1)
       eslint-plugin-matrix-org:
         specifier: ^3.0.0
-        version: 3.0.0(d28b6cfeddcbcf776e114e7554fcab7e)
+        version: 3.0.0(756bde0db757d9adac5fccdfadf6b9bb)
       eslint-plugin-react:
         specifier: ^7.37.5
         version: 7.37.5(eslint@8.57.1)
@@ -1085,49 +1160,49 @@ importers:
         version: 19.1.0-rc.2(eslint@8.57.1)
       eslint-plugin-react-hooks:
         specifier: ^7.0.1
-        version: 7.0.1(eslint@8.57.1)
+        version: 7.1.1(eslint@8.57.1)
       eslint-plugin-storybook:
         specifier: ^10.0.7
-        version: 10.2.13(eslint@8.57.1)(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+        version: 10.3.5(eslint@8.57.1)(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.3)
       eslint-plugin-unicorn:
         specifier: ^56.0.0
         version: 56.0.1(eslint@8.57.1)
       prettier:
         specifier: ^3.6.2
-        version: 3.8.1
+        version: 3.8.3
       storybook:
         specifier: ^10.0.7
-        version: 10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       storybook-addon-vis:
-        specifier: ^3.1.2
-        version: 3.1.2(@storybook/addon-vitest@10.2.19(@vitest/browser-playwright@4.1.2)(@vitest/browser@4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2))(@vitest/runner@4.1.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vitest@4.1.2))(@vitest/browser-playwright@4.1.2)(@vitest/browser@4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2))(babel-plugin-macros@3.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vitest@4.1.2)
+        specifier: ^4.0.0
+        version: 4.2.1(@storybook/addon-vitest@10.3.5(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(@vitest/runner@4.1.5)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vitest@4.1.5))(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(babel-plugin-macros@3.1.0)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.3)(vitest@4.1.5)
       typedoc:
         specifier: ^0.28.16
-        version: 0.28.17(typescript@5.9.3)
+        version: 0.28.19(typescript@6.0.3)
       typedoc-plugin-markdown:
         specifier: ^4.9.0
-        version: 4.10.0(typedoc@0.28.17(typescript@5.9.3))
+        version: 4.11.0(typedoc@0.28.19(typescript@6.0.3))
       typedoc-plugin-missing-exports:
         specifier: ^4.1.2
-        version: 4.1.2(typedoc@0.28.17(typescript@5.9.3))
+        version: 4.1.3(typedoc@0.28.19(typescript@6.0.3))
       typescript:
         specifier: 'catalog:'
-        version: 5.9.3
+        version: 6.0.3
+      unplugin-dts:
+        specifier: 1.0.0-beta.6
+        version: 1.0.0-beta.6(patch_hash=c71b9e0f229ad1d76152030e8eceff26ee0b23c18619c205aa55fee274f89073)(@microsoft/api-extractor@7.58.5(@types/node@18.19.130))(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(typescript@6.0.3)(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.106.2(esbuild@0.27.4))
       vite:
         specifier: ^8.0.0
-        version: 8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
-      vite-plugin-dts:
-        specifier: ^4.5.4
-        version: 4.5.4(@types/node@18.19.130)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(typescript@5.9.3)(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+        version: 8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
       vite-plugin-node-polyfills:
         specifier: ^0.26.0
-        version: 0.26.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+        version: 0.26.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
       vitest:
         specifier: ^4.0.18
-        version: 4.1.2(@opentelemetry/api@1.9.0)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.2)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+        version: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
       vitest-sonar-reporter:
         specifier: ^3.0.0
-        version: 3.0.0(vitest@4.1.2)
+        version: 3.0.0(vitest@4.1.5)
 
 packages:
 
@@ -1143,11 +1218,11 @@ packages:
   '@action-validator/core@0.6.0':
     resolution: {integrity: sha512-tPglwCr8Mm8SWzwnVewwFmqRx91F0WvMsM0BRAqH4CLalyGndm53Xvp+UcUSzswpk1wkjIDYI7RyEhWMLyPkig==}
 
-  '@actions/github@6.0.1':
-    resolution: {integrity: sha512-xbZVcaqD4XnQAe35qSQqskb3SqIAfRyLBrHMd/8TuL7hJSz2QtbDwnNM8zWx4zO5l2fnGtseNE3MbEvD7BxVMw==}
+  '@actions/github@8.0.1':
+    resolution: {integrity: sha512-cue7mS+kx1/2Dnc/094pitRUm+0uPXVXYVaqOdZwD15BsXATWYHW3idJDYOlyBc5gJlzAQ/w5YLU4LR8D7hjVg==}
 
-  '@actions/http-client@2.2.3':
-    resolution: {integrity: sha512-mx8hyJi/hjFvbPokCg4uRd4ZX78t+YyRPtnKWwIl+RzNaVuFpQHfmlGVfsKEJN8LwTCvL+DfVgAM04XaHkm6bA==}
+  '@actions/http-client@3.0.2':
+    resolution: {integrity: sha512-JP38FYYpyqvUsz+Igqlc/JG6YO9PaKuvqjM3iGvaLqFnJ7TFmcLyy2IDrY0bI0qCQug8E9K+elv5ZNfw62ZJzA==}
 
   '@actions/io@1.1.3':
     resolution: {integrity: sha512-wi9JjgKLYS7U/z8PPbco+PvTb/nRWjeoFlJ1Qer83k/3C5PHQi28hiVdeE2kHXmIL99mQFawx8qt/JPjZilJ8Q==}
@@ -1237,8 +1312,8 @@ packages:
   '@asamuzakjp/css-color@3.2.0':
     resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
 
-  '@axe-core/playwright@4.11.1':
-    resolution: {integrity: sha512-mKEfoUIB1MkVTht0BGZFXtSAEKXMJoDkyV5YZ9jbBmZCcWDz71tegNsdTkIN8zc/yMi5Gm2kx7Z5YQ9PfWNAWw==}
+  '@axe-core/playwright@4.11.2':
+    resolution: {integrity: sha512-iP6hfNl9G0j/SEUSo8M7D80RbcDo9KRAAfDP4IT5OHB+Wm6zUHIrm8Y51BKI+Oyqduvipf9u1hcRy57zCBKzWQ==}
     peerDependencies:
       playwright-core: '>= 1.0.0'
 
@@ -1292,8 +1367,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-define-polyfill-provider@0.6.6':
-    resolution: {integrity: sha512-mOAsxeeKkUKayvZR3HeTYD/fICpCPLJrU5ZjelT/PA6WHtNDBOE436YiaEUvHN454bRM3CebhDsIpieCc4texA==}
+  '@babel/helper-define-polyfill-provider@0.6.8':
+    resolution: {integrity: sha512-47UwBLPpQi1NoWzLuHNjRoHlYXMwIJoBf7MFou6viC/sIHWYygpvr0B6IAyh5sBdA2nr2LPIRww8lfaUVQINBA==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
@@ -1881,8 +1956,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/preset-env@7.29.0':
-    resolution: {integrity: sha512-fNEdfc0yi16lt6IZo2Qxk3knHVdfMYX33czNb4v8yWhemoBhibCpQK/uYHtSKIiO+p/zd3+8fYVXhQdOVV608w==}
+  '@babel/preset-env@7.29.2':
+    resolution: {integrity: sha512-DYD23veRYGvBFhcTY1iUvJnDNpuqNd/BzBwCvzOTKUnJjKg5kpUBh3/u9585Agdkgj+QuygG7jLfOPWMa2KVNw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1904,8 +1979,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/runtime@7.28.6':
-    resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==}
+  '@babel/runtime@7.29.2':
+    resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==}
     engines: {node: '>=6.9.0'}
 
   '@babel/template@7.28.6':
@@ -1945,8 +2020,8 @@ packages:
   '@cacheable/utils@2.4.1':
     resolution: {integrity: sha512-eiFgzCbIneyMlLOmNG4g9xzF7Hv3Mga4LjxjcSC/ues6VYq2+gUbQI8JqNuw/ZM8tJIeIaBGpswAsqV2V7ApgA==}
 
-  '@casualbot/jest-sonar-reporter@2.5.0':
-    resolution: {integrity: sha512-2/kaSndRYHPqxrnWLszHCzKD5kkmoDq9X54x68ghSxLWzLDEwKzTRiJcRsjRHtqOeMJmwf0EgS/nuv/1BDGI8g==}
+  '@casualbot/jest-sonar-reporter@2.6.0':
+    resolution: {integrity: sha512-PzOeZXtexA9bchpjlRsFsnzUD9NY6Rdzvqs4B3QYUfiYOzDYbxpn4beH3tiAaqNUHrI17AAEB9UGBYTUZHuaag==}
     engines: {node: '>=14.0.0'}
 
   '@chevrotain/cst-dts-gen@12.0.0':
@@ -1986,8 +2061,8 @@ packages:
       '@csstools/css-parser-algorithms': ^3.0.5
       '@csstools/css-tokenizer': ^3.0.4
 
-  '@csstools/css-calc@3.1.1':
-    resolution: {integrity: sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==}
+  '@csstools/css-calc@3.2.0':
+    resolution: {integrity: sha512-bR9e6o2BDB12jzN/gIbjHa5wLJ4UjD1CB9pM7ehlc0ddk6EBz+yYS1EV2MF55/HUxrHcB/hehAyt5vhsA3hx7w==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       '@csstools/css-parser-algorithms': ^4.0.0
@@ -2000,8 +2075,8 @@ packages:
       '@csstools/css-parser-algorithms': ^3.0.5
       '@csstools/css-tokenizer': ^3.0.4
 
-  '@csstools/css-color-parser@4.0.2':
-    resolution: {integrity: sha512-0GEfbBLmTFf0dJlpsNU7zwxRIH0/BGEMuXLTCvFYxuL1tNhqzTbtnFICyJLTNK4a+RechKP75e7w42ClXSnJQw==}
+  '@csstools/css-color-parser@4.1.0':
+    resolution: {integrity: sha512-U0KhLYmy2GVj6q4T3WaAe6NPuFYCPQoE3b0dRGxejWDgcPp8TP7S5rVdM5ZrFaqu4N67X8YaPBw14dQSYx3IyQ==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       '@csstools/css-parser-algorithms': ^4.0.0
@@ -2019,8 +2094,8 @@ packages:
     peerDependencies:
       '@csstools/css-tokenizer': ^4.0.0
 
-  '@csstools/css-syntax-patches-for-csstree@1.1.2':
-    resolution: {integrity: sha512-5GkLzz4prTIpoyeUiIu3iV6CSG3Plo7xRVOFPKI7FVEJ3mZ0A8SwK0XU3Gl7xAkiQ+mDyam+NNp875/C5y+jSA==}
+  '@csstools/css-syntax-patches-for-csstree@1.1.3':
+    resolution: {integrity: sha512-SH60bMfrRCJF3morcdk57WklujF4Jr/EsQUzqkarfHXEFcAR1gg7fS/chAE922Sehgzc1/+Tz5H3Ypa1HiEKrg==}
     peerDependencies:
       css-tree: ^3.2.1
     peerDependenciesMeta:
@@ -2042,8 +2117,8 @@ packages:
       '@csstools/css-parser-algorithms': ^4.0.0
       '@csstools/css-tokenizer': ^4.0.0
 
-  '@csstools/postcss-alpha-function@2.0.3':
-    resolution: {integrity: sha512-8GqzD3JnfpKJSVxPIC0KadyAfB5VRzPZdv7XQ4zvK1q0ku+uHVUAS2N/IDavQkW40gkuUci64O0ea6QB/zgCSw==}
+  '@csstools/postcss-alpha-function@2.0.4':
+    resolution: {integrity: sha512-fti7+GybzvfMrv5TSU6x8rWtXWOth5nLefT5w5AKJ3F3T0bZoxlRqajF0ZUgTtnytfMd4dQ8n5UiaNmsjFA65A==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2054,26 +2129,26 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-color-function-display-p3-linear@2.0.2':
-    resolution: {integrity: sha512-TWUwSe1+2KdYGGWTx5LR4JQN07vKHAeSho+bGYRgow+9cs3dqgOqS1f/a1odiX30ESmZvwIudJ86wzeiDR6UGg==}
+  '@csstools/postcss-color-function-display-p3-linear@2.0.3':
+    resolution: {integrity: sha512-u8QNV2TKOxG6cqK4ZrJkpctnxdrwdNTMrkyokmCi+iuLpJegOraA0cqC7HoxF2tHhxjuXc+BxwY/Qd62SwvanQ==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-color-function@5.0.2':
-    resolution: {integrity: sha512-CjBdFemUFcAh3087MEJhZcO+QT1b8S75agysa1rU9TEC1YecznzwV+jpMxUc0JRBEV4ET2PjLssqmndR9IygeA==}
+  '@csstools/postcss-color-function@5.0.3':
+    resolution: {integrity: sha512-BiBukIeQ7rPjx9A//9+qgJugBjX6FY9eWiojbnfIJCPulWrl8J07rCgQbFkloTXena+a6Aw5xa25weU+3MA75A==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-color-mix-function@4.0.2':
-    resolution: {integrity: sha512-PFKQKswFqZrYKpajZsP4lhqjU/6+J5PTOWq1rKiFnniKsf4LgpGXrgHS/C6nn5Rc51LX0n4dWOWqY5ZN2i5IjA==}
+  '@csstools/postcss-color-mix-function@4.0.3':
+    resolution: {integrity: sha512-M8ju3iqHRXtW1/5HYuOmi9WFR5rGGFgqkPh+kXkv/eG56oYK/WYtTeIwJgdcro7lRwjlo4Ut8xqbV3Iovkwfrw==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-color-mix-variadic-function-arguments@2.0.2':
-    resolution: {integrity: sha512-zEchsghpDH/6SytyjKu9TIPm4hiiWcur102cENl54cyIwTZsa+2MBJl/vtyALZ+uQ17h27L4waD+0Ow96sgZow==}
+  '@csstools/postcss-color-mix-variadic-function-arguments@2.0.3':
+    resolution: {integrity: sha512-tL46UyFjIjz7mDywoPOe/JgOpvMic0rsTUfdMBB1OHrUcCtE8MQpBILzYl/cAOtinJGu+ZQLuDhqTgTBOoeg3g==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2084,14 +2159,14 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-contrast-color-function@3.0.2':
-    resolution: {integrity: sha512-fwOz/m+ytFPz4aIph2foQS9nEDOdOjYcN5bgwbGR2jGUV8mYaeD/EaTVMHTRb/zqB65y2qNwmcFcE6VQty69Pw==}
+  '@csstools/postcss-contrast-color-function@3.0.3':
+    resolution: {integrity: sha512-YcohXq+/hfYeobKirg3oXGivDaaTfOPv568bE3jYQCn9ILpFz+RgyJR/kF7ZWh5560TTlTjeCqF4ZmVsj2zwnw==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-exponential-functions@3.0.1':
-    resolution: {integrity: sha512-WHJ52Uk0AVUIICEYRY9xFHJZAuq0ZVg0f8xzqUN2zRFrZvGgRPpFwxK7h9FWvqKIOueOwN6hnJD23A8FwsUiVw==}
+  '@csstools/postcss-exponential-functions@3.0.2':
+    resolution: {integrity: sha512-WDrfdFJXF4M67+wniEGr/5XVzsmn1rt2lL1YAlTfE7x7XDlRstTc5e+HuFoGv6jkiMWTwPsiADJaLwsnGC3UjQ==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2108,20 +2183,20 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-gamut-mapping@3.0.2':
-    resolution: {integrity: sha512-IrXAW3KQ3Sxm29C3/4mYQ/iA0Q5OH9YFOPQ2w24iIlXpD06A9MHvmQapP2vAGtQI3tlp2Xw5LIdm9F8khARfOA==}
+  '@csstools/postcss-gamut-mapping@3.0.3':
+    resolution: {integrity: sha512-3v5ZvcVuynhFh5qCJX2LIJ9Iry8/SvxfOEj6vDngNxbH/3OKTZBFLgK+DgLuIbsP1DLA9LLH3Rn7jmRxXgEDLA==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-gradients-interpolation-method@6.0.2':
-    resolution: {integrity: sha512-saQHvD1PD/zCdn+kxCWCcQOdXZBljr8L6BKlCLs0w8GXYfo3SHdWL1HZQ+I1hVCPlU+MJPJJbZJjG/jHRJSlAw==}
+  '@csstools/postcss-gradients-interpolation-method@6.0.3':
+    resolution: {integrity: sha512-wrRIaRv1dkq30a8nvYWtSAf41bwCl+sVzLBKGnqeOwk81aSktKN3NattJpkiPyoOtEoFqChisl3WH3Csj/rOsw==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-hwb-function@5.0.2':
-    resolution: {integrity: sha512-ChR0+pKc/2cs900jakiv8dLrb69aez5P3T+g+wfJx1j6mreAe8orKTiMrVBk+DZvCRqpdOA2m8VoFms64A3Dew==}
+  '@csstools/postcss-hwb-function@5.0.3':
+    resolution: {integrity: sha512-bHz0uc/PBg2wJEAlGinUf494nMyuXsVKH/fExc2xGkvL6WHOKlxzx/lkn+2AVCQACtWBLVRCBDgDnkYr4RSC9w==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2180,8 +2255,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-media-minmax@3.0.1':
-    resolution: {integrity: sha512-I+CrmZt23fyejMItpLQFOg9gPXkDBBDjTqRT0UxCTZlYZfGrzZn4z+2kbXLRwDfR59OK8zaf26M4kwYwG0e1MA==}
+  '@csstools/postcss-media-minmax@3.0.2':
+    resolution: {integrity: sha512-+ABxs2ZhJDhy+B9PJg7pgkGq6/d3XPXsWl7+6yZfAk4b2ba6aQ1h2AiTn04XwS6rpMpZEF3tONli/ubfu4y8AQ==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2210,8 +2285,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-oklab-function@5.0.2':
-    resolution: {integrity: sha512-3d/Wcnp2uW6Io0Tajl0croeUo46gwOVQI9N32PjA/HVQo6z1iL7yp19Gp+6e5E5CDKGpW7U822MsDVo2XK1z0Q==}
+  '@csstools/postcss-oklab-function@5.0.3':
+    resolution: {integrity: sha512-vTMgJFMwMt9gnPvhKaDnMR7E/h9Nb+rPUv825SY5VUo4PWj+w0OH/N2NqgvjYeubaA3BVckbKDlvADATRpD4Hw==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2234,14 +2309,14 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-random-function@3.0.1':
-    resolution: {integrity: sha512-SvKGfmj+WHfn4bWHaBYlkXDyU3SlA3fL8aaYZ8Op6M8tunNf3iV9uZyZZGWMCbDw0sGeoTmYZW9nmKN8Qi/ctg==}
+  '@csstools/postcss-random-function@3.0.2':
+    resolution: {integrity: sha512-iQ3vfX1LIqRXX7P1/ol45EpJ5CTWdQCAfdpTlHlsRPU4jMQeepmeNjQ0F60bj8RWTS1RkJ318fzzq4mUlyZ7hA==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-relative-color-syntax@4.0.2':
-    resolution: {integrity: sha512-HaMN+qMURinllszbps2AhXKaLeibg/2VW6FriYDrqE58ji82+z2S3/eLloywVOY8BQCJ9lZMdy6TcRQNbn9u3w==}
+  '@csstools/postcss-relative-color-syntax@4.0.3':
+    resolution: {integrity: sha512-SZSImz4KufmLi0dRwYivWXlza+7HF84SRApY8R48SyWgn+f0gDvmCn7D2Ie4CED7qU0JJK+YfCUC1HVlaQ10dg==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2252,14 +2327,14 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-sign-functions@2.0.1':
-    resolution: {integrity: sha512-C3br0qcHJkQ0qSGUBnDJHXQdO8XObnCpGwai5m1L2tv2nCjt0vRHG6A9aVCQHvh08OqHNM2ty1dYDNNXV99YAQ==}
+  '@csstools/postcss-sign-functions@2.0.2':
+    resolution: {integrity: sha512-vOxkkMCMVnyaj7CW03uKR2R/zhJaCrptsXlm31HgI/dqC1lSIGnmu5W7N68x23XwcSgc8fE/fg0jKj4x1XFH4w==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-stepped-value-functions@5.0.1':
-    resolution: {integrity: sha512-vZf7zPzRb7xIi2o5Z9q6wyeEAjoRCg74O2QvYxmQgxYO5V5cdBv4phgJDyOAOP3JHy4abQlm2YaEUS3gtGQo0g==}
+  '@csstools/postcss-stepped-value-functions@5.0.2':
+    resolution: {integrity: sha512-4PtqkRoBcMSxZG00gcDv+nq7cxVUua+Yd7TmG16qzJjdolyICHkx1RfhNL5mKSnWOLxUnk/IdxAoWN+KU7E/ng==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2282,8 +2357,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-trigonometric-functions@5.0.1':
-    resolution: {integrity: sha512-e8me32Mhl8JeBnxVJgsQUYpV4Md4KiyvpILpQlaY/eK1Gwdb04kasiTTswPQ5q7Z8+FppJZ2Z4d8HRfn6rjD3w==}
+  '@csstools/postcss-trigonometric-functions@5.0.2':
+    resolution: {integrity: sha512-hRansZmQk1HH11WGUNlWy8H/DCB9Wy6zDbRcyBfF2UUP+V2fubK+qwmq0q6LIDje5gRzxlKyWhgFYxPy1ohivA==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2352,8 +2427,8 @@ packages:
     engines: {node: '>=10.12.0'}
     hasBin: true
 
-  '@electron/asar@4.1.2':
-    resolution: {integrity: sha512-J3gAHIvBwz8cLT74MfAt0+Rel4Nk+YElWMMbAetvGKW3HmKPeMzF3xTbtRIDIA1jcAG6ArdNZdag0BjpUYiikw==}
+  '@electron/asar@4.2.0':
+    resolution: {integrity: sha512-npW1NW5yy8EB9XY/vEw9sUdgmq0sJEhmSBb6bqyFOAw1CSkrhvAvO6QWlW8CdIMo8VN1lkdF345l/MeW0LrY0Q==}
     engines: {node: '>=22.12.0'}
     hasBin: true
 
@@ -2361,6 +2436,11 @@ packages:
     resolution: {integrity: sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==}
     hasBin: true
 
+  '@electron/fuses@2.1.1':
+    resolution: {integrity: sha512-38ho27/mtUV/LpsZ1LCDJUomKBBSUZDk/qBH4FNNtoN5fmnkmWDcIp5pm1Kv3InqhRjKZKs7Jzx+wWZNMArHrA==}
+    engines: {node: '>=22.12.0'}
+    hasBin: true
+
   '@electron/get@2.0.3':
     resolution: {integrity: sha512-Qkzpg2s9GnVV2I2BjRksUi43U5e6+zaQMcjoJy0C+C5oxaKl+fmckGDQFtRpZpZV0NQekuZZ+tGz7EA9TVnQtQ==}
     engines: {node: '>=12'}
@@ -2392,41 +2472,23 @@ packages:
     engines: {node: '>=14.14'}
     hasBin: true
 
-  '@element-hq/element-call-embedded@0.18.0':
-    resolution: {integrity: sha512-Fg2VlORZWkQ9t9OJTcWFXCwVzlHVLtkaiCF0qFTCOZSYYHlA3kXDRM8TagjLkIoOVR6y+9xZldbwejgKYUS9xw==}
+  '@element-hq/element-call-embedded@0.19.1':
+    resolution: {integrity: sha512-RDZY3P3LTx10ACaGhzkwh2+boNB3x54zHF/7v/cCyoQlAVfEYMhgMEb4CRTwJFwwYFe1r++6Higa0A0G5XxZ8Q==}
 
-  '@element-hq/element-web-module-api@1.12.0':
-    resolution: {integrity: sha512-fLhHFiL1UbRjolpgera3osHHxhSzfnDGTRhaDEv1UsrHRHwMu3hb/IcyXNqGhLXkJiuX8XoOH0aetaAUqQ0YQA==}
-    engines: {node: '>=20.0.0'}
-    peerDependencies:
-      '@matrix-org/react-sdk-module-api': '*'
-      '@types/react': ^19.2.10
-      '@types/react-dom': ^19.2.3
-      matrix-web-i18n: '*'
-      react: ^19
-    peerDependenciesMeta:
-      '@matrix-org/react-sdk-module-api':
-        optional: true
-      matrix-web-i18n:
-        optional: true
+  '@emnapi/core@1.10.0':
+    resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
 
-  '@element-hq/element-web-playwright-common@2.4.0':
-    resolution: {integrity: sha512-6zXRkeTlCEEBfUKgE42+5+RYGQloQB4p/HBdTBxjnMArAnZY/+8GE8pY1CeoJrmRISxGdDbdWkMEyT7bwIBx/g==}
-    engines: {node: '>=20.0.0'}
-    hasBin: true
-    peerDependencies:
-      '@element-hq/element-web-module-api': '*'
-      '@playwright/test': ^1.52.0
-      playwright-core: ^1.52.0
+  '@emnapi/core@1.9.2':
+    resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==}
 
-  '@emnapi/core@1.8.1':
-    resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
+  '@emnapi/runtime@1.10.0':
+    resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
 
-  '@emnapi/runtime@1.8.1':
-    resolution: {integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==}
+  '@emnapi/runtime@1.9.2':
+    resolution: {integrity: sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==}
 
-  '@emnapi/wasi-threads@1.1.0':
-    resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
+  '@emnapi/wasi-threads@1.2.1':
+    resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
   '@esbuild/aix-ppc64@0.27.4':
     resolution: {integrity: sha512-cQPwL2mp2nSmHHJlCyoXgHGhbEPMrEEU5xhkcy3Hs/O7nGZqEpZ2sUtLaL9MORLtDfRvVl2/3PAuEkYZH0Ty8Q==}
@@ -2602,12 +2664,8 @@ packages:
     resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  '@fastify/busboy@2.1.1':
-    resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
-    engines: {node: '>=14'}
-
-  '@fastify/otel@0.16.0':
-    resolution: {integrity: sha512-2304BdM5Q/kUvQC9qJO1KZq3Zn1WWsw+WWkVmFEaj1UE2hEIiuFqrPeglQOwEtw/ftngisqfQ3v70TWMmwhhHA==}
+  '@fastify/otel@0.18.0':
+    resolution: {integrity: sha512-3TASCATfw+ctICSb4ymrv7iCm0qJ0N9CarB+CZ7zIJ7KqNbwI5JjyDL1/sxoC0ccTO1Zyd1iQ+oqncPg5FJXaA==}
     peerDependencies:
       '@opentelemetry/api': ^1.9.0
 
@@ -2662,20 +2720,14 @@ packages:
   '@fontsource/inter@5.2.8':
     resolution: {integrity: sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==}
 
-  '@formatjs/bigdecimal@0.2.0':
-    resolution: {integrity: sha512-GeaxHZbUoYvHL9tC5eltHLs+1zU70aPw0s7LwqgktIzF5oMhNY4o4deEtusJMsq7WFJF3Ye2zQEzdG8beVk73w==}
+  '@formatjs/fast-memoize@3.1.2':
+    resolution: {integrity: sha512-vPnriihkfK0lzoQGaXq+qXH23VsYyansRTkTgo2aTG0k1NjLFyZimFVdfj4C9JkSE5dm7CEngcQ5TTc1yAyBfQ==}
 
-  '@formatjs/ecma402-abstract@3.2.0':
-    resolution: {integrity: sha512-dHnqHgBo6GXYGRsepaE1wmsC2etaivOWd5VaJstZd+HI2zR3DCUjbDVZRtoPGkkXZmyHvBwrdEUuqfvzhF/DtQ==}
+  '@formatjs/intl-localematcher@0.8.3':
+    resolution: {integrity: sha512-pHUjWb9NuhnMs8+PxQdzBtZRFJHlGhrURGAbm6Ltwl82BFajeuiIR3jblSa7ia3r62rXe/0YtVpUG3xWr5bFCA==}
 
-  '@formatjs/fast-memoize@3.1.1':
-    resolution: {integrity: sha512-CbNbf+tlJn1baRnPkNePnBqTLxGliG6DDgNa/UtV66abwIjwsliPMOt0172tzxABYzSuxZBZfcp//qI8AvBWPg==}
-
-  '@formatjs/intl-localematcher@0.8.2':
-    resolution: {integrity: sha512-q05KMYGJLyqFNFtIb8NhWLF5X3aK/k0wYt7dnRFuy6aLQL+vUwQ1cg5cO4qawEiINybeCPXAWlprY2mSBjSXAQ==}
-
-  '@formatjs/intl-segmenter@12.2.1':
-    resolution: {integrity: sha512-nGEixPBG6aYQ922TwFv0fX0ZbPKi1xt77IqJQynAMJP3dpi7PhpTIvmODP9gb6zGaAzfNMNVAABBWtY958nXyg==}
+  '@formatjs/intl-segmenter@12.2.2':
+    resolution: {integrity: sha512-23U4W8SXyBOAQkYmQo6VU6Mu10GUVrpXqaQV+a4C7AuQ0Vx54zJrBFpA5a5WUTgq1toMRfsaatS1w7APdvQWNg==}
 
   '@gar/promise-retry@1.0.3':
     resolution: {integrity: sha512-GmzA9ckNokPypTg10pgpeHNQe7ph+iIKKmhKu3Ob9ANkswreCx7R3cKmY781K8QK3AqVL3xVh9A42JvIAbkkSA==}
@@ -2711,8 +2763,8 @@ packages:
   '@hapi/pinpoint@2.0.1':
     resolution: {integrity: sha512-EKQmr16tM8s16vTT3cA5L0kZZcTMU5DUOZTuvpnY738m+jyP3JIUj+Mm1xc1rsLkGBQ/gVnfKYPwOmPg1tUR4Q==}
 
-  '@hapi/tlds@1.1.5':
-    resolution: {integrity: sha512-Vq/1gnIIsvFUpKlDdfrPd/ssHDpAyBP/baVukh3u2KSG2xoNjsnRNjQiPmuyPPGqsn1cqVWWhtZHfOBaLizFRQ==}
+  '@hapi/tlds@1.1.6':
+    resolution: {integrity: sha512-xdi7A/4NZokvV0ewovme3aUO5kQhW9pQ2YD1hRqZGhhSi5rBv4usHYidVocXSi9eihYsznZxLtAiEYYUL6VBGw==}
     engines: {node: '>=14.0.0'}
 
   '@hapi/topo@6.0.2':
@@ -2752,8 +2804,8 @@ packages:
     resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
     engines: {node: '>=8'}
 
-  '@istanbuljs/schema@0.1.3':
-    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
+  '@istanbuljs/schema@0.1.6':
+    resolution: {integrity: sha512-+Sg6GCR/wy1oSmQDFq4LQDAhm3ETKnorxN+y5nbLULOR3P0c14f2Wurzj3/xqPXtasLFfHd5iRFQ7AJt4KH2cw==}
     engines: {node: '>=8'}
 
   '@jest/console@30.3.0':
@@ -2848,11 +2900,11 @@ packages:
     resolution: {integrity: sha512-JHm87k7bA33hpBngtU8h6UBub/fqqA9uXfw+21j5Hmk7ooPHlboRNxHq0JcMtC+n8VJGP1mcfnD3Mk+XKe1oSw==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.4':
-    resolution: {integrity: sha512-6PyZBYKnnVNqOSB0YFly+62R7dmov8segT27A+RVTBVd4iAE6kbW9QBJGlyR2yG4D4ohzhZSTIu7BK1UTtmFFA==}
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0':
+    resolution: {integrity: sha512-qvsTEwEFefhdirGOPnu9Wp6ChfIwy2dBCRuETU3uE+4cC+PFoxMSiiEhxk4lOluA34eARHA0OxqsEUYDqRMgeQ==}
     peerDependencies:
       typescript: '>= 4.3.x'
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -3037,8 +3089,8 @@ packages:
   '@mapbox/point-geometry@1.1.0':
     resolution: {integrity: sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==}
 
-  '@mapbox/tiny-sdf@2.0.7':
-    resolution: {integrity: sha512-25gQLQMcpivjOSA40g3gO6qgiFPDpWRoMfd+G/GoppPIeP6JDaMMkMrEJnMZhKyyS6iKwVt5YKu02vCUyJM3Ug==}
+  '@mapbox/tiny-sdf@2.1.0':
+    resolution: {integrity: sha512-uFJhNh36BR4OCuWIEiWaEix9CA2WzT6CAIcqVjWYpnx8+QDtS+oC4QehRrx5cX4mgWs37MmKnwUejeHxVymzNg==}
 
   '@mapbox/unitbezier@0.0.1':
     resolution: {integrity: sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==}
@@ -3053,8 +3105,8 @@ packages:
   '@maplibre/geojson-vt@5.0.4':
     resolution: {integrity: sha512-KGg9sma45S+stfH9vPCJk1J0lSDLWZgCT9Y8u8qWZJyjFlP8MNP1WGTxIMYJZjDvVT3PDn05kN1C95Sut1HpgQ==}
 
-  '@maplibre/geojson-vt@6.0.4':
-    resolution: {integrity: sha512-HYv3POhMRCdhP3UPPATM/hfcy6/WuVIf5FKboH8u/ZuFMTnAIcSVlq5nfOqroLokd925w2QtE7YwquFOIacwVQ==}
+  '@maplibre/geojson-vt@6.1.0':
+    resolution: {integrity: sha512-2eIY4gZxeKIVOZVNkAMb+5NgXhgsMQpOveTQAvnp53LYqHGJZDidk7Ew0Tged9PThidpbS+NFTh0g4zivhPDzQ==}
 
   '@maplibre/maplibre-gl-style-spec@24.8.1':
     resolution: {integrity: sha512-zxa92qF96ZNojLxeAjnaRpjVCy+swoUNJvDhtpC90k7u5F0TMr4GmvNqMKvYrMoPB8d7gRSXbMG1hBbmgESIsw==}
@@ -3072,8 +3124,8 @@ packages:
   '@matrix-org/emojibase-bindings@1.5.0':
     resolution: {integrity: sha512-+W9/ow2Z3iQa7ZOF698PBhwNcgGkn36B5Sr8VDPx8N8CH7+Uw+7TrtbtKPZVdgf4m/THmgmfX40jS5YDBsLaYg==}
 
-  '@matrix-org/matrix-sdk-crypto-wasm@18.0.0':
-    resolution: {integrity: sha512-88+n+dvxLI1cjS10UIlKXVYK7TGWbpAnnaDC9fow7ch/hCvdu3dFhJ3tS3/13N9s9+1QFXB4FFuommj+tHJPhQ==}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.1.0':
+    resolution: {integrity: sha512-GxXK2U39+2qWNvR3fXJY7nxdikvpiT17RaS0/Dktk6R8FMKDk3vm79Hq65yrCWLBmT7pJZoerfILNZqhrcUHrg==}
     engines: {node: '>= 18'}
 
   '@matrix-org/react-sdk-module-api@2.5.0':
@@ -3096,15 +3148,15 @@ packages:
   '@mermaid-js/parser@1.1.0':
     resolution: {integrity: sha512-gxK9ZX2+Fex5zu8LhRQoMeMPEHbc73UKZ0FQ54YrQtUxE1VVhMwzeNtKRPAu5aXks4FasbMe4xB4bWrmq6Jlxw==}
 
-  '@microsoft/api-extractor-model@7.32.2':
-    resolution: {integrity: sha512-Ussc25rAalc+4JJs9HNQE7TuO9y6jpYQX9nWD1DhqUzYPBr3Lr7O9intf+ZY8kD5HnIqeIRJX7ccCT0QyBy2Ww==}
+  '@microsoft/api-extractor-model@7.33.8':
+    resolution: {integrity: sha512-aIcoQggPyer3B6Ze3usz0YWC/oBwUHfRH5ETUsr+oT2BRA6SfTJl7IKPcPZkX4UR+PohowzW4uMxsvjrn8vm+w==}
 
-  '@microsoft/api-extractor@7.56.0':
-    resolution: {integrity: sha512-H0V69QG5jIb9Ayx35NVBv2lOgFSS3q+Eab2oyGEy0POL3ovYPST+rCNPbwYoczOZXNG8IKjWUmmAMxmDTsXlQA==}
+  '@microsoft/api-extractor@7.58.5':
+    resolution: {integrity: sha512-pKQs2MBtGCVcIs1pxkSjhb1GGxYaS3KRCoi7Ki6qCJw6S/zx5ZYvC3CX39RpexBqYcO0asphyrqdW2ifyuSX6A==}
     hasBin: true
 
-  '@microsoft/tsdoc-config@0.18.0':
-    resolution: {integrity: sha512-8N/vClYyfOH+l4fLkkr9+myAoR6M7akc8ntBJ4DJdWH2b09uVfr71+LTMpNyG19fNqWDg8KEDZhx5wxuqHyGjw==}
+  '@microsoft/tsdoc-config@0.18.1':
+    resolution: {integrity: sha512-9brPoVdfN9k9g0dcWkFeA7IH9bbcttzDJlXvkf8b2OBzd5MueR1V2wkKBL0abn0otvmkHJC6aapBOTJDDeMCZg==}
 
   '@microsoft/tsdoc@0.16.0':
     resolution: {integrity: sha512-xgAyonlVVS+q7Vc7qLW0UrJU7rSFcETRWsqdXZtjzRU8dF+6CkozTK4V4y1LwOX7j8r/vHphjDeMeGI4tNGeGA==}
@@ -3115,8 +3167,8 @@ packages:
   '@napi-rs/wasm-runtime@0.2.4':
     resolution: {integrity: sha512-9zESzOO5aDByvhIAsOy9TbpZ0Ur2AJbUI7UT73kcUTS2mxAMHOBaa1st/jAymNoCtvrit99kkzT1FZuXVcgfIQ==}
 
-  '@napi-rs/wasm-runtime@1.1.2':
-    resolution: {integrity: sha512-sNXv5oLJ7ob93xkZ1XnxisYhGYXfaG9f65/ZgYuAu3qt7b3NadcOEhLvx28hv31PgX8SZJRYrAIPQilQmFpLVw==}
+  '@napi-rs/wasm-runtime@1.1.4':
+    resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
     peerDependencies:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
@@ -3215,183 +3267,120 @@ packages:
       nx: '>=18.0.0 <23.0.0'
       tslib: ^2.6.0
 
-  '@nx/devkit@22.5.3':
-    resolution: {integrity: sha512-zhRNTFsi4pbwg7L/zhBHtTOSevlgwm1iKlhPlQWoOv2PR6b+3JvjL8o4P1MbkIkut3Lsn+oTuJJ1LUPlr5vprg==}
+  '@nx/devkit@22.6.5':
+    resolution: {integrity: sha512-9kvAI+kk2pfEXLqS8OyjI9XvWmp+Gdn7jPfxDAz8BOqxMyPy3p5hYl+jc4TIsLOWunAFl8azqrcYsHzEpaWCIA==}
     peerDependencies:
       nx: '>= 21 <= 23 || ^22.0.0-0'
 
-  '@nx/jest@22.5.3':
-    resolution: {integrity: sha512-4yaGlApTR09zdz4fC4Ep0aENcaon5rDRDOUnEJblU67ik35jds9mczHq2rBMJO4Cnjj1pM9acm08Vb0Wg+9cuQ==}
-
-  '@nx/js@22.5.3':
-    resolution: {integrity: sha512-gglQYL6GeSH0mt6NpEFTXMFFFePU3B7TEyZq7LLUYZDH5y65izgNpdSAuEqYR7xHLtahVnesDlhPw3rtRiwMwA==}
+  '@nx/js@22.6.5':
+    resolution: {integrity: sha512-bmikz6qaBHfuAgsqPB/TfLIKfvI4g+EKIRAiU2FHnEtVWOKDAmSQXHFwE3rMS49jl2JLgxkdNjZHpg4g/OLy0g==}
     peerDependencies:
       verdaccio: ^6.0.5
     peerDependenciesMeta:
       verdaccio:
         optional: true
 
-  '@nx/nx-darwin-arm64@22.5.3':
-    resolution: {integrity: sha512-cKXBq5bJanXp8uv6+wPvx/G4q4oFpOxMSPGaeFOVhbul2QHGGq+XMcSo+D8aYJCsk1YnbyAnnQ8r8RH/kTK5Mw==}
+  '@nx/nx-darwin-arm64@22.6.5':
+    resolution: {integrity: sha512-qT77Omkg5xQuL2+pDbneX2tI+XW5ZeayMylu7UUgK8OhTrAkJLKjpuYRH4xT5XBipxbDtlxmO3aLS3Ib1pKzJQ==}
     cpu: [arm64]
     os: [darwin]
 
-  '@nx/nx-darwin-arm64@22.5.4':
-    resolution: {integrity: sha512-Ib9znwSLQZSZ/9hhg5ODplpNhE/RhGVXzdfRj6YonTuWSj/kH3dLMio+4JEkjRdTQVm06cDW0KdwSgnwovqMGg==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@nx/nx-darwin-x64@22.5.3':
-    resolution: {integrity: sha512-mToS41o8I+8CfxYVRMTISkgT7I1cnazgwMf7U9DoLqKOwOZzj9WD3NmsWc1h69QNJPltbeRPS8y/wnhu7RHzRA==}
+  '@nx/nx-darwin-x64@22.6.5':
+    resolution: {integrity: sha512-9jICxb7vfJ56y/7Yuh3b/n1QJqWxO9xnXKYEs6SO8xPoW/KomVckILGc1C6RQSs6/3ixVJC7k1Dh1wm5tKPFrg==}
     cpu: [x64]
     os: [darwin]
 
-  '@nx/nx-darwin-x64@22.5.4':
-    resolution: {integrity: sha512-DjyXuQMc93MPU2XdRsJYjzbv1tgCzMi+zm7O0gc4x3h+ECFjKkjzQBg67pqGdhE3TV27MAlVRKrgHStyK9iigg==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@nx/nx-freebsd-x64@22.5.3':
-    resolution: {integrity: sha512-CAWysdFSZVbTfdjNXojd9TgXbZiK9i0k3njROeV+jORsDWw4Eth3PDmK94Wk916b3n2hS0UjyI6RZaMy2GEqzA==}
+  '@nx/nx-freebsd-x64@22.6.5':
+    resolution: {integrity: sha512-6B1wEKpqz5dI3AGMqttAVnA6M3DB/besAtuGyQiymK9ROlta1iuWgCcIYwcCQyhLn2Rx7vqj447KKcgCa8HlVw==}
     cpu: [x64]
     os: [freebsd]
 
-  '@nx/nx-freebsd-x64@22.5.4':
-    resolution: {integrity: sha512-DhxdP8AhIfN0yCtFhZQcbp32MVN3L7UiTotYqqnOgwW922NRGSd5e+KEAWiJVrIO6TdgnI7prxpg1hfQQK0WDw==}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@nx/nx-linux-arm-gnueabihf@22.5.3':
-    resolution: {integrity: sha512-PRjPrijQQbdrvYwNuA3xQ3VXEQ4zfhnPjy+S2ZlQZqhFI4mlP22xfhOH1bQ7pIfzCNC2f/J9UMNYOrq/bEFjBg==}
+  '@nx/nx-linux-arm-gnueabihf@22.6.5':
+    resolution: {integrity: sha512-xV50B8mnDPboct7JkAHftajI02s+8FszA8WTzhore+YGR+lEKHTLpucwGEaQuMlSdLplH7pQix4B4uK5pcMhZw==}
     cpu: [arm]
     os: [linux]
 
-  '@nx/nx-linux-arm-gnueabihf@22.5.4':
-    resolution: {integrity: sha512-pv1x1afTaLAOxPxVhQneLeXgjclp11f9ORxR7jA4E86bSgc9OL92dLSCkXtLQzqPNOej6SZ2fO+PPHVMZwtaPQ==}
-    cpu: [arm]
-    os: [linux]
-
-  '@nx/nx-linux-arm64-gnu@22.5.3':
-    resolution: {integrity: sha512-dmDBio/5z4Zch2VlRMdgBPm53d8xwq1l7xLj1dFMKjfE7ByfPukjPM7ZEYBiPckfiQfJBRh6HKDN7uEkA/y8CQ==}
+  '@nx/nx-linux-arm64-gnu@22.6.5':
+    resolution: {integrity: sha512-2JkWuMGj+HpW6oPAvU5VdAx1afTnEbiM10Y3YOrl3fipWV4BiP5VDx762QTrfCraP4hl6yqTgvTe7F9xaby+jQ==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@nx/nx-linux-arm64-gnu@22.5.4':
-    resolution: {integrity: sha512-mPji9PzleWPvXpmFDKaXpTymRgZkk/hW8JHGhvEZpKHHXMYgTGWC+BqOEM2A4dYC4bu4fi9RrteL7aouRRWJoQ==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@nx/nx-linux-arm64-musl@22.5.3':
-    resolution: {integrity: sha512-E81ET/MnnKfuLhKiovF5ueJirHOMjhC1eK0MDM2Do9wdPyusZzfGSVFQ9DOHtg7L37dAE95NNd1lCVO8gJ96vg==}
+  '@nx/nx-linux-arm64-musl@22.6.5':
+    resolution: {integrity: sha512-Z/zMqFClnEyqDXouJKEPoWVhMQIif5F0YuECWBYjd3ZLwQsXGTItoh+6Wm3XF/nGMA2uLOHyTq/X7iFXQY3RzA==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@nx/nx-linux-arm64-musl@22.5.4':
-    resolution: {integrity: sha512-hF/HvEhbCjcFpTgY7RbP1tUTbp0M1adZq4ckyW8mwhDWQ/MDsc8FnOHwCO3Bzy9ZeJM0zQUES6/m0Onz8geaEA==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@nx/nx-linux-x64-gnu@22.5.3':
-    resolution: {integrity: sha512-AgXCsPCzC0sAu2VRclMjs7LrvPQfqS3sFiehlXWTbNHQitPZLuAmQGb2l4T8lbMOs0Xn3EIrg6BF6/ntTTp6Xg==}
+  '@nx/nx-linux-x64-gnu@22.6.5':
+    resolution: {integrity: sha512-FlotSyqNnaXSn0K+yWw+hRdYBwusABrPgKLyixfJIYRzsy+xPKN6pON6vZfqGwzuWF/9mEGReRz+iM8PiW0XSg==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@nx/nx-linux-x64-gnu@22.5.4':
-    resolution: {integrity: sha512-1+vicSYEOtc7CNMoRCjo59no4gFe8w2nGIT127wk1yeW3EJzRVNlOA7Deu10NUUbzLeOvHc8EFOaU7clT+F7XQ==}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@nx/nx-linux-x64-musl@22.5.3':
-    resolution: {integrity: sha512-sKs4bFQRu8Btxf5rMYKPsRVNxkQ2ey8sqoCyhJj8fwJF05DayK2ErJAR/rhtBK0c1NV7kQiKJA8nWBV3jnCdsg==}
+  '@nx/nx-linux-x64-musl@22.6.5':
+    resolution: {integrity: sha512-RVOe2qcwhoIx6mxQURPjUfAW5SEOmT2gdhewvdcvX9ICq1hj5B2VarmkhTg0qroO7xiyqOqwq26mCzoV2I3NgQ==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@nx/nx-linux-x64-musl@22.5.4':
-    resolution: {integrity: sha512-/KjndxVB14yU0SJOhqADHOWoTy4Y45h5RjW3cxcXlPSJZz7ar1FnlLne1rWMMMUttepc8ku+3T//SGKi2eu+Nw==}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@nx/nx-win32-arm64-msvc@22.5.3':
-    resolution: {integrity: sha512-KOCQLakSO5vl4D6et9qPytOAmkgq2IIuhI8A/g0xbD1LqrIlRPa+bdkZqOGpODYAk3NyKAk7hWHsqfXKHwwX6w==}
+  '@nx/nx-win32-arm64-msvc@22.6.5':
+    resolution: {integrity: sha512-ZqurqI8VuYnsr2Kn4K4t+Gx6j/BZdf6qz/6Tv4A7XQQ6oNYVQgTqoNEFj+CCkVaIe6aIdCWpousFLqs+ZgBqYQ==}
     cpu: [arm64]
     os: [win32]
 
-  '@nx/nx-win32-arm64-msvc@22.5.4':
-    resolution: {integrity: sha512-CrYt9FwhjOI6ZNy/G6YHLJmZuXCFJ24BCxugPXiZ7knDx7eGrr7owGgfht4SSiK3KCX40CvWCBJfqR4ZSgaSUA==}
-    cpu: [arm64]
-    os: [win32]
-
-  '@nx/nx-win32-x64-msvc@22.5.3':
-    resolution: {integrity: sha512-a6ZB2La82RIHcz4nrt3H6RZaOa+xkC2IPzhU9hMo2gbkLdIxn8wyof8uGA0frncmIVHuLc3nFAhpBOgf4j6tMA==}
+  '@nx/nx-win32-x64-msvc@22.6.5':
+    resolution: {integrity: sha512-i2QFBJIuaYg9BHxrrnBV4O7W9rVL2k0pSIdk/rRp3EYJEU93iUng+qbZiY9wh1xvmXuUCE2G7TRd+8/SG/RFKg==}
     cpu: [x64]
     os: [win32]
 
-  '@nx/nx-win32-x64-msvc@22.5.4':
-    resolution: {integrity: sha512-g5YByv4XsYwsYZvFe24A9bvfhZA+mwtIQt6qZtEVduZTT1hfhIsq0LXGHhkGoFLYwRMXSracWOqkalY0KT4IQw==}
-    cpu: [x64]
-    os: [win32]
+  '@nx/workspace@22.6.5':
+    resolution: {integrity: sha512-/CZtv1ESSfZ1MVqSlCsmnBWysU1z5VdNlwANlqL6BV2X6RUHKDPVj4YuNPvCK+0LsqyzfJdUt3pcnBYxnT5TIg==}
 
-  '@nx/workspace@22.5.3':
-    resolution: {integrity: sha512-pioGwlt5zKB9PhX36I5KAeSml19Mq+g2KyQ9mh3F+3Lvft2JM4nIMELBaUfwPicPAOwNmrsx806IXO67Q4UHxQ==}
+  '@octokit/auth-token@6.0.0':
+    resolution: {integrity: sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==}
+    engines: {node: '>= 20'}
 
-  '@octokit/auth-token@4.0.0':
-    resolution: {integrity: sha512-tY/msAuJo6ARbK6SPIxZrPBms3xPbfwBrulZe0Wtr/DIY9lje2HeV1uoebShn6mx7SjCHif6EjMvoREj+gZ+SA==}
-    engines: {node: '>= 18'}
+  '@octokit/core@7.0.6':
+    resolution: {integrity: sha512-DhGl4xMVFGVIyMwswXeyzdL4uXD5OGILGX5N8Y+f6W7LhC1Ze2poSNrkF/fedpVDHEEZ+PHFW0vL14I+mm8K3Q==}
+    engines: {node: '>= 20'}
 
-  '@octokit/core@5.2.2':
-    resolution: {integrity: sha512-/g2d4sW9nUDJOMz3mabVQvOGhVa4e/BN/Um7yca9Bb2XTzPPnfTWHWQg+IsEYO7M3Vx+EXvaM/I2pJWIMun1bg==}
-    engines: {node: '>= 18'}
+  '@octokit/endpoint@11.0.3':
+    resolution: {integrity: sha512-FWFlNxghg4HrXkD3ifYbS/IdL/mDHjh9QcsNyhQjN8dplUoZbejsdpmuqdA76nxj2xoWPs7p8uX2SNr9rYu0Ag==}
+    engines: {node: '>= 20'}
 
-  '@octokit/endpoint@9.0.6':
-    resolution: {integrity: sha512-H1fNTMA57HbkFESSt3Y9+FBICv+0jFceJFPWDePYlR/iMGrwM5ph+Dd4XRQs+8X+PUFURLQgX9ChPfhJ/1uNQw==}
-    engines: {node: '>= 18'}
-
-  '@octokit/graphql@7.1.1':
-    resolution: {integrity: sha512-3mkDltSfcDUoa176nlGoA32RGjeWjl3K7F/BwHwRMJUW/IteSa4bnSV8p2ThNkcIcZU2umkZWxwETSSCJf2Q7g==}
-    engines: {node: '>= 18'}
-
-  '@octokit/openapi-types@20.0.0':
-    resolution: {integrity: sha512-EtqRBEjp1dL/15V7WiX5LJMIxxkdiGJnabzYx5Apx4FkQIFgAfKumXeYAqqJCj1s+BMX4cPFIFC4OLCR6stlnA==}
+  '@octokit/graphql@9.0.3':
+    resolution: {integrity: sha512-grAEuupr/C1rALFnXTv6ZQhFuL1D8G5y8CN04RgrO4FIPMrtm+mcZzFG7dcBm+nq+1ppNixu+Jd78aeJOYxlGA==}
+    engines: {node: '>= 20'}
 
   '@octokit/openapi-types@22.2.0':
     resolution: {integrity: sha512-QBhVjcUa9W7Wwhm6DBFu6ZZ+1/t/oYxqc2tp81Pi41YNuJinbFRx8B133qVOrAaBbF7D/m0Et6f9/pZt9Rc+tg==}
 
-  '@octokit/openapi-types@24.2.0':
-    resolution: {integrity: sha512-9sIH3nSUttelJSXUrmGzl7QUBFul0/mB8HRYl3fOlgHbIWG+WnYDXU3v/2zMtAvuzZ/ed00Ei6on975FhBfzrg==}
+  '@octokit/openapi-types@27.0.0':
+    resolution: {integrity: sha512-whrdktVs1h6gtR+09+QsNk2+FO+49j6ga1c55YZudfEG+oKJVvJLQi3zkOm5JjiUXAagWK2tI2kTGKJ2Ys7MGA==}
 
-  '@octokit/plugin-paginate-rest@9.2.2':
-    resolution: {integrity: sha512-u3KYkGF7GcZnSD/3UP0S7K5XUFT2FkOQdcfXZGZQPGv3lm4F2Xbf71lvjldr8c1H3nNbF+33cLEkWYbokGWqiQ==}
-    engines: {node: '>= 18'}
+  '@octokit/plugin-paginate-rest@14.0.0':
+    resolution: {integrity: sha512-fNVRE7ufJiAA3XUrha2omTA39M6IXIc6GIZLvlbsm8QOQCYvpq/LkMNGyFlB1d8hTDzsAXa3OKtybdMAYsV/fw==}
+    engines: {node: '>= 20'}
     peerDependencies:
-      '@octokit/core': '5'
+      '@octokit/core': '>=6'
 
-  '@octokit/plugin-rest-endpoint-methods@10.4.1':
-    resolution: {integrity: sha512-xV1b+ceKV9KytQe3zCVqjg+8GTGfDYwaT1ATU5isiUyVtlVAO3HNdzpS4sr4GBx4hxQ46s7ITtZrAsxG22+rVg==}
-    engines: {node: '>= 18'}
+  '@octokit/plugin-rest-endpoint-methods@17.0.0':
+    resolution: {integrity: sha512-B5yCyIlOJFPqUUeiD0cnBJwWJO8lkJs5d8+ze9QDP6SvfiXSz1BF+91+0MeI1d2yxgOhU/O+CvtiZ9jSkHhFAw==}
+    engines: {node: '>= 20'}
     peerDependencies:
-      '@octokit/core': '5'
+      '@octokit/core': '>=6'
 
-  '@octokit/request-error@5.1.1':
-    resolution: {integrity: sha512-v9iyEQJH6ZntoENr9/yXxjuezh4My67CBSu9r6Ve/05Iu5gNgnisNWOsoJHTP6k0Rr0+HQIpnH+kyammu90q/g==}
-    engines: {node: '>= 18'}
+  '@octokit/request-error@7.1.0':
+    resolution: {integrity: sha512-KMQIfq5sOPpkQYajXHwnhjCC0slzCNScLHs9JafXc4RAJI+9f+jNDlBNaIMTvazOPLgb4BnlhGJOTbnN0wIjPw==}
+    engines: {node: '>= 20'}
 
-  '@octokit/request@8.4.1':
-    resolution: {integrity: sha512-qnB2+SY3hkCmBxZsR/MPCybNmbJe4KAlfWErXq+rBKkQJlbjdJeS85VI9r8UqeLYLvnAenU8Q1okM/0MBsAGXw==}
-    engines: {node: '>= 18'}
+  '@octokit/request@10.0.8':
+    resolution: {integrity: sha512-SJZNwY9pur9Agf7l87ywFi14W+Hd9Jg6Ifivsd33+/bGUQIjNujdFiXII2/qSlN2ybqUHfp5xpekMEjIBTjlSw==}
+    engines: {node: '>= 20'}
 
-  '@octokit/types@12.6.0':
-    resolution: {integrity: sha512-1rhSOfRa6H9w4YwK0yrf5faDaDTb+yLyBUKOCV4xtCDB5VmIPqd/v9yr9o6SAzOAlRxMiRiCic6JVM1/kunVkw==}
-
-  '@octokit/types@13.10.0':
-    resolution: {integrity: sha512-ifLaO34EbbPj0Xgro4G5lP5asESjwHracYJvVaPIyXMuiuXLlhic3S47cBdTb+jfODkTE5YtGCLt3Ay3+J97sA==}
+  '@octokit/types@16.0.0':
+    resolution: {integrity: sha512-sKq+9r1Mm4efXW1FCk7hFSeJo4QKreL/tTbR0rz/qx/r1Oa2VV83LTA/H/MuCOX7uCIJmQVRKBcbmWoySjAnSg==}
 
   '@opentelemetry/api-logs@0.207.0':
     resolution: {integrity: sha512-lAb0jQRVyleQQGiuuvCOTDVspc14nx6XJjP4FspJ1sNARo3Regq4ZZbrc3rN4b1TYSuUCvgH+UXUPug4SLOqEQ==}
@@ -3401,16 +3390,20 @@ packages:
     resolution: {integrity: sha512-CjruKY9V6NMssL/T1kAFgzosF1v9o6oeN+aX5JB/C/xPNtmgIJqcXHG7fA82Ou1zCpWGl4lROQUKwUNE1pMCyg==}
     engines: {node: '>=8.0.0'}
 
-  '@opentelemetry/api-logs@0.211.0':
-    resolution: {integrity: sha512-swFdZq8MCdmdR22jTVGQDhwqDzcI4M10nhjXkLr1EsIzXgZBqm4ZlmmcWsg3TSNf+3mzgOiqveXmBLZuDi2Lgg==}
+  '@opentelemetry/api-logs@0.212.0':
+    resolution: {integrity: sha512-TEEVrLbNROUkYY51sBJGk7lO/OLjuepch8+hmpM6ffMJQ2z/KVCjdHuCFX6fJj8OkJP2zckPjrJzQtXU3IAsFg==}
     engines: {node: '>=8.0.0'}
 
-  '@opentelemetry/api@1.9.0':
-    resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
+  '@opentelemetry/api-logs@0.214.0':
+    resolution: {integrity: sha512-40lSJeqYO8Uz2Yj7u94/SJWE/wONa7rmMKjI1ZcIjgf3MHNHv1OZUCrCETGuaRF62d5pQD1wKIW+L4lmSMTzZA==}
     engines: {node: '>=8.0.0'}
 
-  '@opentelemetry/context-async-hooks@2.6.0':
-    resolution: {integrity: sha512-L8UyDwqpTcbkIK5cgwDRDYDoEhQoj8wp8BwsO19w3LB1Z41yEQm2VJyNfAi9DrLP/YTqXqWpKHyZfR9/tFYo1Q==}
+  '@opentelemetry/api@1.9.1':
+    resolution: {integrity: sha512-gLyJlPHPZYdAk1JENA9LeHejZe1Ti77/pTeFm/nMXmQH/HFZlcS/O2XJB+L8fkbrNSqhdtlvjBVjxwUYanNH5Q==}
+    engines: {node: '>=8.0.0'}
+
+  '@opentelemetry/context-async-hooks@2.7.0':
+    resolution: {integrity: sha512-MWXggArM+Y11mPS8VOrqxOj+YMGQSRuvhM91eSBX4xFpJa05mpkeVvM8pPux5ElkEjV5RMgrkisrlP/R83SpBQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.0.0 <1.10.0'
@@ -3421,14 +3414,14 @@ packages:
     peerDependencies:
       '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@opentelemetry/core@2.5.0':
-    resolution: {integrity: sha512-ka4H8OM6+DlUhSAZpONu0cPBtPPTQKxbxVzC4CzVx5+K4JnroJVBtDzLAMx4/3CDTJXRvVFhpFjtl4SaiTNoyQ==}
+  '@opentelemetry/core@2.6.1':
+    resolution: {integrity: sha512-8xHSGWpJP9wBxgBpnqGL0R3PbdWQndL1Qp50qrg71+B28zK5OQmUgcDKLJgzyAAV38t4tOyLMGDD60LneR5W8g==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@opentelemetry/core@2.6.0':
-    resolution: {integrity: sha512-HLM1v2cbZ4TgYN6KEOj+Bbj8rAKriOdkF9Ed3tG25FoprSiQl7kYc+RRT6fUZGOvx0oMi5U67GoFdT+XUn8zEg==}
+  '@opentelemetry/core@2.7.0':
+    resolution: {integrity: sha512-DT12SXVwV2eoJrGf4nnsvZojxxeQo+LlNAsoYGRRObPWTeN6APiqZ2+nqDCQDvQX40eLi1AePONS0onoASp3yQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.0.0 <1.10.0'
@@ -3439,134 +3432,134 @@ packages:
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-amqplib@0.58.0':
-    resolution: {integrity: sha512-fjpQtH18J6GxzUZ+cwNhWUpb71u+DzT7rFkg5pLssDGaEber91Y2WNGdpVpwGivfEluMlNMZumzjEqfg8DeKXQ==}
+  '@opentelemetry/instrumentation-amqplib@0.61.0':
+    resolution: {integrity: sha512-mCKoyTGfRNisge4br0NpOFSy2Z1NnEW8hbCJdUDdJFHrPqVzc4IIBPA/vX0U+LUcQqrQvJX+HMIU0dbDRe0i0Q==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-connect@0.54.0':
-    resolution: {integrity: sha512-43RmbhUhqt3uuPnc16cX6NsxEASEtn8z/cYV8Zpt6EP4p2h9s4FNuJ4Q9BbEQ2C0YlCCB/2crO1ruVz/hWt8fA==}
+  '@opentelemetry/instrumentation-connect@0.57.0':
+    resolution: {integrity: sha512-FMEBChnI4FLN5TE9DHwfH7QpNir1JzXno1uz/TAucVdLCyrG0jTrKIcNHt/i30A0M2AunNBCkcd8Ei26dIPKdg==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-dataloader@0.28.0':
-    resolution: {integrity: sha512-ExXGBp0sUj8yhm6Znhf9jmuOaGDsYfDES3gswZnKr4MCqoBWQdEFn6EoDdt5u+RdbxQER+t43FoUihEfTSqsjA==}
+  '@opentelemetry/instrumentation-dataloader@0.31.0':
+    resolution: {integrity: sha512-f654tZFQXS5YeLDNb9KySrwtg7SnqZN119FauD7acBoTzuLduaiGTNz88ixcVSOOMGZ+EjJu/RFtx5klObC95g==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-express@0.59.0':
-    resolution: {integrity: sha512-pMKV/qnHiW/Q6pmbKkxt0eIhuNEtvJ7sUAyee192HErlr+a1Jx+FZ3WjfmzhQL1geewyGEiPGkmjjAgNY8TgDA==}
+  '@opentelemetry/instrumentation-express@0.62.0':
+    resolution: {integrity: sha512-Tvx+vgAZKEQxU3Rx+xWLiR0mLxHwmk69/8ya04+VsV9WYh8w6Lhx5hm5yAMvo1wy0KqWgFKBLwSeo3sHCwdOww==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-fs@0.30.0':
-    resolution: {integrity: sha512-n3Cf8YhG7reaj5dncGlRIU7iT40bxPOjsBEA5Bc1a1g6e9Qvb+JFJ7SEiMlPbUw4PBmxE3h40ltE8LZ3zVt6OA==}
+  '@opentelemetry/instrumentation-fs@0.33.0':
+    resolution: {integrity: sha512-sCZWXGalQ01wr3tAhSR9ucqFJ0phidpAle6/17HVjD6gN8FLmZMK/8sKxdXYHy3PbnlV1P4zeiSVFNKpbFMNLA==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-generic-pool@0.54.0':
-    resolution: {integrity: sha512-8dXMBzzmEdXfH/wjuRvcJnUFeWzZHUnExkmFJ2uPfa31wmpyBCMxO59yr8f/OXXgSogNgi/uPo9KW9H7LMIZ+g==}
+  '@opentelemetry/instrumentation-generic-pool@0.57.0':
+    resolution: {integrity: sha512-orhmlaK+ZIW9hKU+nHTbXrCSXZcH83AescTqmpamHRobRmYSQwRbD0a1odc0yAzuzOtxYiHiXAnpnIpaSSY7Ow==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-graphql@0.58.0':
-    resolution: {integrity: sha512-+yWVVY7fxOs3j2RixCbvue8vUuJ1inHxN2q1sduqDB0Wnkr4vOzVKRYl/Zy7B31/dcPS72D9lo/kltdOTBM3bQ==}
+  '@opentelemetry/instrumentation-graphql@0.62.0':
+    resolution: {integrity: sha512-3YNuLVPUxafXkH1jBAbGsKNsP3XVzcFDhCDCE3OqBwCwShlqQbLMRMFh1T/d5jaVZiGVmSsfof+ICKD2iOV8xg==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-hapi@0.57.0':
-    resolution: {integrity: sha512-Os4THbvls8cTQTVA8ApLfZZztuuqGEeqog0XUnyRW7QVF0d/vOVBEcBCk1pazPFmllXGEdNbbat8e2fYIWdFbw==}
+  '@opentelemetry/instrumentation-hapi@0.60.0':
+    resolution: {integrity: sha512-aNljZKYrEa7obLAxd1bCEDxF7kzCLGXTuTJZ8lMR9rIVEjmuKBXN1gfqpm/OB//Zc2zP4iIve1jBp7sr3mQV6w==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-http@0.211.0':
-    resolution: {integrity: sha512-n0IaQ6oVll9PP84SjbOCwDjaJasWRHi6BLsbMLiT6tNj7QbVOkuA5sk/EfZczwI0j5uTKl1awQPivO/ldVtsqA==}
+  '@opentelemetry/instrumentation-http@0.214.0':
+    resolution: {integrity: sha512-FlkDhZDRjDJDcO2LcSCtjRpkal1NJ8y0fBqBhTvfAR3JSYY2jAIj1kSS5IjmEBt4c3aWv+u/lqLuoCDrrKCSKg==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-ioredis@0.59.0':
-    resolution: {integrity: sha512-875UxzBHWkW+P4Y45SoFM2AR8f8TzBMD8eO7QXGCyFSCUMP5s9vtt/BS8b/r2kqLyaRPK6mLbdnZznK3XzQWvw==}
+  '@opentelemetry/instrumentation-ioredis@0.62.0':
+    resolution: {integrity: sha512-ZYt//zcPve8qklaZX+5Z4MkU7UpEkFRrxsf2cnaKYBitqDnsCN69CPAuuMOX6NYdW2rG9sFy7V/QWtBlP5XiNQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-kafkajs@0.20.0':
-    resolution: {integrity: sha512-yJXOuWZROzj7WmYCUiyT27tIfqBrVtl1/TwVbQyWPz7rL0r1Lu7kWjD0PiVeTCIL6CrIZ7M2s8eBxsTAOxbNvw==}
+  '@opentelemetry/instrumentation-kafkajs@0.23.0':
+    resolution: {integrity: sha512-4K+nVo+zI+aDz0Z85SObwbdixIbzS9moIuKJaYsdlzcHYnKOPtB7ya8r8Ezivy/GVIBHiKJVq4tv+BEkgOMLaQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-knex@0.55.0':
-    resolution: {integrity: sha512-FtTL5DUx5Ka/8VK6P1VwnlUXPa3nrb7REvm5ddLUIeXXq4tb9pKd+/ThB1xM/IjefkRSN3z8a5t7epYw1JLBJQ==}
+  '@opentelemetry/instrumentation-knex@0.58.0':
+    resolution: {integrity: sha512-Hc/o8fSsaWxZ8r1Yw4rNDLwTpUopTf4X32y4W6UhlHmW8Wizz8wfhgOKIelSeqFVTKBBPIDUOsQWuIMxBmu8Bw==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-koa@0.59.0':
-    resolution: {integrity: sha512-K9o2skADV20Skdu5tG2bogPKiSpXh4KxfLjz6FuqIVvDJNibwSdu5UvyyBzRVp1rQMV6UmoIk6d3PyPtJbaGSg==}
+  '@opentelemetry/instrumentation-koa@0.62.0':
+    resolution: {integrity: sha512-uVip0VuGUQXZ+vFxkKxAUNq8qNl+VFlyHDh/U6IQ8COOEDfbEchdaHnpFrMYF3psZRUuoSIgb7xOeXj00RdwDA==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.9.0
 
-  '@opentelemetry/instrumentation-lru-memoizer@0.55.0':
-    resolution: {integrity: sha512-FDBfT7yDGcspN0Cxbu/k8A0Pp1Jhv/m7BMTzXGpcb8ENl3tDj/51U65R5lWzUH15GaZA15HQ5A5wtafklxYj7g==}
+  '@opentelemetry/instrumentation-lru-memoizer@0.58.0':
+    resolution: {integrity: sha512-6grM3TdMyHzlGY1cUA+mwoPueB1F3dYKgKtZIH6jOFXqfHAByyLTc+6PFjGM9tKh52CFBJaDwodNlL/Td39z7Q==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-mongodb@0.64.0':
-    resolution: {integrity: sha512-pFlCJjweTqVp7B220mCvCld1c1eYKZfQt1p3bxSbcReypKLJTwat+wbL2YZoX9jPi5X2O8tTKFEOahO5ehQGsA==}
+  '@opentelemetry/instrumentation-mongodb@0.67.0':
+    resolution: {integrity: sha512-1WJp5N1lYfHq2IhECOTewFs5Tf2NfUOwQRqs/rZdXKTezArMlucxgzAaqcgp3A3YREXopXTpXHsxZTGHjNhMdQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-mongoose@0.57.0':
-    resolution: {integrity: sha512-MthiekrU/BAJc5JZoZeJmo0OTX6ycJMiP6sMOSRTkvz5BrPMYDqaJos0OgsLPL/HpcgHP7eo5pduETuLguOqcg==}
+  '@opentelemetry/instrumentation-mongoose@0.60.0':
+    resolution: {integrity: sha512-8BahAZpKsOoc+lrZGb7Ofn4g3z8qtp5IxDfvAVpKXsEheQN7ONMH5djT5ihy6yf8yyeQJGS0gXFfpEAEeEHqQg==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-mysql2@0.57.0':
-    resolution: {integrity: sha512-nHSrYAwF7+aV1E1V9yOOP9TchOodb6fjn4gFvdrdQXiRE7cMuffyLLbCZlZd4wsspBzVwOXX8mpURdRserAhNA==}
+  '@opentelemetry/instrumentation-mysql2@0.60.0':
+    resolution: {integrity: sha512-m/5d3bxQALllCzezYDk/6vajh0tj5OijMMvOZGr+qN1NMXm1dzMNwyJ0gNZW7Fo3YFRyj/jJMxIw+W7d525dlw==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-mysql@0.57.0':
-    resolution: {integrity: sha512-HFS/+FcZ6Q7piM7Il7CzQ4VHhJvGMJWjx7EgCkP5AnTntSN5rb5Xi3TkYJHBKeR27A0QqPlGaCITi93fUDs++Q==}
+  '@opentelemetry/instrumentation-mysql@0.60.0':
+    resolution: {integrity: sha512-08pO8GFPEIz2zquKDGteBZDNmwketdgH8hTe9rVYgW9kCJXq1Psj3wPQGx+VaX4ZJKCfPeoLMYup9+cxHvZyVQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-pg@0.63.0':
-    resolution: {integrity: sha512-dKm/ODNN3GgIQVlbD6ZPxwRc3kleLf95hrRWXM+l8wYo+vSeXtEpQPT53afEf6VFWDVzJK55VGn8KMLtSve/cg==}
+  '@opentelemetry/instrumentation-pg@0.66.0':
+    resolution: {integrity: sha512-KxfLGXBb7k2ueaPJfq2GXBDXBly8P+SpR/4Mj410hhNgmQF3sCqwXvUBQxZQkDAmsdBAoenM+yV1LhtsMRamcA==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-redis@0.59.0':
-    resolution: {integrity: sha512-JKv1KDDYA2chJ1PC3pLP+Q9ISMQk6h5ey+99mB57/ARk0vQPGZTTEb4h4/JlcEpy7AYT8HIGv7X6l+br03Neeg==}
+  '@opentelemetry/instrumentation-redis@0.62.0':
+    resolution: {integrity: sha512-y3pPpot7WzR/8JtHcYlTYsyY8g+pbFhAqbwAuG5bLPnR6v6pt1rQc0DpH0OlGP/9CZbWBP+Zhwp9yFoygf/ZXQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-tedious@0.30.0':
-    resolution: {integrity: sha512-bZy9Q8jFdycKQ2pAsyuHYUHNmCxCOGdG6eg1Mn75RvQDccq832sU5OWOBnc12EFUELI6icJkhR7+EQKMBam2GA==}
+  '@opentelemetry/instrumentation-tedious@0.33.0':
+    resolution: {integrity: sha512-Q6WQwAD01MMTub31GlejoiFACYNw26J426wyjvU7by7fDIr2nZXNW4vhTGs7i7F0TnXBO3xN688g1tdUgYwJ5w==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-undici@0.21.0':
-    resolution: {integrity: sha512-gok0LPUOTz2FQ1YJMZzaHcOzDFyT64XJ8M9rNkugk923/p6lDGms/cRW1cqgqp6N6qcd6K6YdVHwPEhnx9BWbw==}
+  '@opentelemetry/instrumentation-undici@0.24.0':
+    resolution: {integrity: sha512-oKzZ3uvqP17sV0EsoQcJgjEfIp0kiZRbYu/eD8p13Cbahumf8lb/xpYeNr/hfAJ4owzEtIDcGIjprfLcYbIKBQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.7.0
@@ -3577,14 +3570,14 @@ packages:
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation@0.208.0':
-    resolution: {integrity: sha512-Eju0L4qWcQS+oXxi6pgh7zvE2byogAkcsVv0OjHF/97iOz1N/aKE6etSGowYkie+YA1uo6DNwdSxaaNnLvcRlA==}
+  '@opentelemetry/instrumentation@0.212.0':
+    resolution: {integrity: sha512-IyXmpNnifNouMOe0I/gX7ENfv2ZCNdYTF0FpCsoBcpbIHzk81Ww9rQTYTnvghszCg7qGrIhNvWC8dhEifgX9Jg==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation@0.211.0':
-    resolution: {integrity: sha512-h0nrZEC/zvI994nhg7EgQ8URIHt0uDTwN90r3qQUdZORS455bbx+YebnGeEuFghUT0HlJSrLF4iHw67f+odY+Q==}
+  '@opentelemetry/instrumentation@0.214.0':
+    resolution: {integrity: sha512-MHqEX5Dk59cqVah5LiARMACku7jXSVk9iVDWOea4x3cr7VfdByeDCURK6o1lntT1JS/Tsovw01UJrBhN3/uC5w==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
@@ -3601,8 +3594,8 @@ packages:
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/redis-common@0.38.2':
-    resolution: {integrity: sha512-1BCcU93iwSRZvDAgwUxC/DV4T/406SkMfxGqu5ojc3AvNI+I9GhV7v0J1HljsczuuhcnFLYqD5VmwVXfCGHzxA==}
+  '@opentelemetry/redis-common@0.38.3':
+    resolution: {integrity: sha512-VCghU1JYs/4gP6Gqf/xro9MEsZ7LrMv2uONVsaESKL38ZOB9BqnI98FfS23wjMnHlpuE+TTaWSoAVNpTwYXzjw==}
     engines: {node: ^18.19.0 || >=20.6.0}
 
   '@opentelemetry/resources@2.2.0':
@@ -3611,8 +3604,8 @@ packages:
     peerDependencies:
       '@opentelemetry/api': '>=1.3.0 <1.10.0'
 
-  '@opentelemetry/resources@2.6.0':
-    resolution: {integrity: sha512-D4y/+OGe3JSuYUCBxtH5T9DSAWNcvCb/nQWIga8HNtXTVPQn59j0nTBAgaAXxUVBDl40mG3Tc76b46wPlZaiJQ==}
+  '@opentelemetry/resources@2.7.0':
+    resolution: {integrity: sha512-K+oi0hNMv94EpZbnW3eyu2X6SGVpD3O5DhG2NIp65Hc7lhAj9brRXTAVzh3wB82+q3ThakEf7Zd7RsFUqcTc7A==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.3.0 <1.10.0'
@@ -3635,14 +3628,14 @@ packages:
     peerDependencies:
       '@opentelemetry/api': '>=1.3.0 <1.10.0'
 
-  '@opentelemetry/sdk-trace-base@2.6.0':
-    resolution: {integrity: sha512-g/OZVkqlxllgFM7qMKqbPV9c1DUPhQ7d4n3pgZFcrnrNft9eJXZM2TNHTPYREJBrtNdRytYyvwjgL5geDKl3EQ==}
+  '@opentelemetry/sdk-trace-base@2.7.0':
+    resolution: {integrity: sha512-Yg9zEXJB50DLVLpsKPk7NmNqlPlS+OvqhJGh0A8oawIOTPOwlm4eXs9BMJV7L79lvEwI+dWtAj+YjTyddV336A==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.3.0 <1.10.0'
 
-  '@opentelemetry/semantic-conventions@1.39.0':
-    resolution: {integrity: sha512-R5R9tb2AXs2IRLNKLBJDynhkfmx7mX0vi8NkhZb3gUkPWHn6HXk5J8iQ/dql0U3ApfWym4kXXmBDRGO+oeOfjg==}
+  '@opentelemetry/semantic-conventions@1.40.0':
+    resolution: {integrity: sha512-cifvXDhcqMwwTlTK04GBNeIe7yyo28Mfby85QXFe1Yk8nmi36Ab/5UQwptOx84SsoGNRg+EVSjwzfSZMy6pmlw==}
     engines: {node: '>=14'}
 
   '@opentelemetry/sql-common@0.41.2':
@@ -3781,8 +3774,8 @@ packages:
   '@oxc-project/types@0.121.0':
     resolution: {integrity: sha512-CGtOARQb9tyv7ECgdAlFxi0Fv7lmzvmlm2rpD/RdijOO9rfk/JvB1CjT8EnoD+tjna/IYgKKw3IV7objRb+aYw==}
 
-  '@oxc-project/types@0.122.0':
-    resolution: {integrity: sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA==}
+  '@oxc-project/types@0.126.0':
+    resolution: {integrity: sha512-oGfVtjAgwQVVpfBrbtk4e1XDyWHRFta6BS3GWVzrF8xYBT2VGQAk39yJS/wFSMrZqoiCU4oghT3Ch0HaHGIHcQ==}
 
   '@oxc-resolver/binding-android-arm-eabi@11.19.1':
     resolution: {integrity: sha512-aUs47y+xyXHUKlbhqHUjBABjvycq6YSD7bpxSW7vplUmdzAlJ93yXY6ZR0c1o1x5A/QKbENCvs3+NlY8IpIVzg==}
@@ -3934,11 +3927,6 @@ packages:
     resolution: {integrity: sha512-C2Xj8FZ0uHWeCXXqX5B4/gVFQmtSkiuOolzAgutjTfseNOHT3pUjljDZsTSxXFGgio54bCzVFqmEOUrIVk8RDA==}
     engines: {node: '>=20.0.0'}
 
-  '@phenomnomnominal/tsquery@6.1.4':
-    resolution: {integrity: sha512-3tHlGy/fxjJCHqIV8nelAzbRTNkCUY+k7lqBGKNuQz99H2OKGRt6oU+U2SZs6LYrbOe8mxMFl6kq6gzHapFRkw==}
-    peerDependencies:
-      typescript: ^3 || ^4 || ^5
-
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -3955,11 +3943,11 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
-  '@posthog/core@1.24.6':
-    resolution: {integrity: sha512-9WkcRKqmXSWIJcca6m3VwA9YbFd4HiG2hKEtDq6FcwEHlvfDhQQUZ5/sJZ47Fw8OtyNMHQ6rW4+COttk4Bg5NQ==}
+  '@posthog/core@1.25.2':
+    resolution: {integrity: sha512-h2FO7ut/BbfwpAXWpwdDHTzQgUo9ibDFEs6ZO+3cI3KPWQt5XwczK1OLAuPprcjm8T/jl0SH8jSFo5XdU4RbTg==}
 
-  '@posthog/types@1.364.7':
-    resolution: {integrity: sha512-Rg6q4wSu8krrn8f3Nv44kGXjor4qh5iG0typt2sB7/SYQFRSbXYE2C46+qDMcBYGxmRMsWBitBcZ9x94DQCnfA==}
+  '@posthog/types@1.369.3':
+    resolution: {integrity: sha512-Ywqvs4513PixR2TIA5O3GMEyK4F65uefwxPfsIUeHr9ruGylyXp00YJ4CEbp8U0DMzCkeF+LsMKVnHgN3pAXcA==}
 
   '@principalstudio/html-webpack-inject-preload@1.2.7':
     resolution: {integrity: sha512-KJKkiKG63ugBjf8U0e9jUcI9CLPTFIsxXplEDE0oi3mPpxd90X9SJovo3W2l7yh/ARKIYXhQq8fSXUN7M29TzQ==}
@@ -3968,8 +3956,8 @@ packages:
       html-webpack-plugin: ^4.0.0 || ^5.0.0
       webpack: ^4.0.0 || ^5.0.0
 
-  '@prisma/instrumentation@7.2.0':
-    resolution: {integrity: sha512-Rh9Z4x5kEj1OdARd7U18AtVrnL6rmLSI0qYShaB4W7Wx5BKbgzndWF+QnuzMb7GLfVdlT5aYCXoPQVYuYtVu0g==}
+  '@prisma/instrumentation@7.6.0':
+    resolution: {integrity: sha512-ZPW2gRiwpPzEfgeZgaekhqXrbW+Y2RJKHVqUmlhZhKzRNCcvR6DykzylDrynpArKKRQtLxoZy36fK7U0p3pdgQ==}
     peerDependencies:
       '@opentelemetry/api': ^1.8
 
@@ -4382,109 +4370,109 @@ packages:
     resolution: {integrity: sha512-2FK1hF93Fuf1laSdfiEmJvSJPVIDHEUTz68D3Fi9s0IZrrpaEcj6pTFBTbYvsgC5du4ogrtf5re7yMMvrKNgkw==}
     engines: {node: ^20.9.0 || ^22.11.0 || ^24, pnpm: ^10.0.0}
 
-  '@rolldown/binding-android-arm64@1.0.0-rc.12':
-    resolution: {integrity: sha512-pv1y2Fv0JybcykuiiD3qBOBdz6RteYojRFY1d+b95WVuzx211CRh+ytI/+9iVyWQ6koTh5dawe4S/yRfOFjgaA==}
+  '@rolldown/binding-android-arm64@1.0.0-rc.16':
+    resolution: {integrity: sha512-rhY3k7Bsae9qQfOtph2Pm2jZEA+s8Gmjoz4hhmx70K9iMQ/ddeae+xhRQcM5IuVx5ry1+bGfkvMn7D6MJggVSA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-darwin-arm64@1.0.0-rc.12':
-    resolution: {integrity: sha512-cFYr6zTG/3PXXF3pUO+umXxt1wkRK/0AYT8lDwuqvRC+LuKYWSAQAQZjCWDQpAH172ZV6ieYrNnFzVVcnSflAg==}
+  '@rolldown/binding-darwin-arm64@1.0.0-rc.16':
+    resolution: {integrity: sha512-rNz0yK078yrNn3DrdgN+PKiMOW8HfQ92jQiXxwX8yW899ayV00MLVdaCNeVBhG/TbH3ouYVObo8/yrkiectkcQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-x64@1.0.0-rc.12':
-    resolution: {integrity: sha512-ZCsYknnHzeXYps0lGBz8JrF37GpE9bFVefrlmDrAQhOEi4IOIlcoU1+FwHEtyXGx2VkYAvhu7dyBf75EJQffBw==}
+  '@rolldown/binding-darwin-x64@1.0.0-rc.16':
+    resolution: {integrity: sha512-r/OmdR00HmD4i79Z//xO06uEPOq5hRXdhw7nzkxQxwSavs3PSHa1ijntdpOiZ2mzOQ3fVVu8C1M19FoNM+dMUQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@rolldown/binding-freebsd-x64@1.0.0-rc.12':
-    resolution: {integrity: sha512-dMLeprcVsyJsKolRXyoTH3NL6qtsT0Y2xeuEA8WQJquWFXkEC4bcu1rLZZSnZRMtAqwtrF/Ib9Ddtpa/Gkge9Q==}
+  '@rolldown/binding-freebsd-x64@1.0.0-rc.16':
+    resolution: {integrity: sha512-KcRE5w8h0OnjUatG8pldyD14/CQ5Phs1oxfR+3pKDjboHRo9+MkqQaiIZlZRpsxC15paeXme/I127tUa9TXJ6g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.12':
-    resolution: {integrity: sha512-YqWjAgGC/9M1lz3GR1r1rP79nMgo3mQiiA+Hfo+pvKFK1fAJ1bCi0ZQVh8noOqNacuY1qIcfyVfP6HoyBRZ85Q==}
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.16':
+    resolution: {integrity: sha512-bT0guA1bpxEJ/ZhTRniQf7rNF8ybvXOuWbNIeLABaV5NGjx4EtOWBTSRGWFU9ZWVkPOZ+HNFP8RMcBokBiZ0Kg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.12':
-    resolution: {integrity: sha512-/I5AS4cIroLpslsmzXfwbe5OmWvSsrFuEw3mwvbQ1kDxJ822hFHIx+vsN/TAzNVyepI/j/GSzrtCIwQPeKCLIg==}
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.16':
+    resolution: {integrity: sha512-+tHktCHWV8BDQSjemUqm/Jl/TPk3QObCTIjmdDy/nlupcujZghmKK2962LYrqFpWu+ai01AN/REOH3NEpqvYQg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.12':
-    resolution: {integrity: sha512-V6/wZztnBqlx5hJQqNWwFdxIKN0m38p8Jas+VoSfgH54HSj9tKTt1dZvG6JRHcjh6D7TvrJPWFGaY9UBVOaWPw==}
+  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.16':
+    resolution: {integrity: sha512-3fPzdREH806oRLxpTWW1Gt4tQHs0TitZFOECB2xzCFLPKnSOy90gwA7P29cksYilFO6XVRY1kzga0cL2nRjKPg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.12':
-    resolution: {integrity: sha512-AP3E9BpcUYliZCxa3w5Kwj9OtEVDYK6sVoUzy4vTOJsjPOgdaJZKFmN4oOlX0Wp0RPV2ETfmIra9x1xuayFB7g==}
+  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.16':
+    resolution: {integrity: sha512-EKwI1tSrLs7YVw+JPJT/G2dJQ1jl9qlTTTEG0V2Ok/RdOenRfBw2PQdLPyjhIu58ocdBfP7vIRN/pvMsPxs/AQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.12':
-    resolution: {integrity: sha512-nWwpvUSPkoFmZo0kQazZYOrT7J5DGOJ/+QHHzjvNlooDZED8oH82Yg67HvehPPLAg5fUff7TfWFHQS8IV1n3og==}
+  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.16':
+    resolution: {integrity: sha512-Uknladnb3Sxqu6SEcqBldQyJUpk8NleooZEc0MbRBJ4inEhRYWZX0NJu12vNf2mqAq7gsofAxHrGghiUYjhaLQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.12':
-    resolution: {integrity: sha512-RNrafz5bcwRy+O9e6P8Z/OCAJW/A+qtBczIqVYwTs14pf4iV1/+eKEjdOUta93q2TsT/FI0XYDP3TCky38LMAg==}
+  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.16':
+    resolution: {integrity: sha512-FIb8+uG49sZBtLTn+zt1AJ20TqVcqWeSIyoVt0or7uAWesgKaHbiBh6OpA/k9v0LTt+PTrb1Lao133kP4uVxkg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-rc.12':
-    resolution: {integrity: sha512-Jpw/0iwoKWx3LJ2rc1yjFrj+T7iHZn2JDg1Yny1ma0luviFS4mhAIcd1LFNxK3EYu3DHWCps0ydXQ5i/rrJ2ig==}
+  '@rolldown/binding-linux-x64-musl@1.0.0-rc.16':
+    resolution: {integrity: sha512-RuERhF9/EgWxZEXYWCOaViUWHIboceK4/ivdtQ3R0T44NjLkIIlGIAVAuCddFxsZ7vnRHtNQUrt2vR2n2slB2w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-rc.12':
-    resolution: {integrity: sha512-vRugONE4yMfVn0+7lUKdKvN4D5YusEiPilaoO2sgUWpCvrncvWgPMzK00ZFFJuiPgLwgFNP5eSiUlv2tfc+lpA==}
+  '@rolldown/binding-openharmony-arm64@1.0.0-rc.16':
+    resolution: {integrity: sha512-mXcXnvd9GpazCxeUCCnZ2+YF7nut+ZOEbE4GtaiPtyY6AkhZWbK70y1KK3j+RDhjVq5+U8FySkKRb/+w0EeUwA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-rc.12':
-    resolution: {integrity: sha512-ykGiLr/6kkiHc0XnBfmFJuCjr5ZYKKofkx+chJWDjitX+KsJuAmrzWhwyOMSHzPhzOHOy7u9HlFoa5MoAOJ/Zg==}
-    engines: {node: '>=14.0.0'}
+  '@rolldown/binding-wasm32-wasi@1.0.0-rc.16':
+    resolution: {integrity: sha512-3Q2KQxnC8IJOLqXmUMoYwyIPZU9hzRbnHaoV3Euz+VVnjZKcY8ktnNP8T9R4/GGQtb27C/UYKABxesKWb8lsvQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [wasm32]
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.12':
-    resolution: {integrity: sha512-5eOND4duWkwx1AzCxadcOrNeighiLwMInEADT0YM7xeEOOFcovWZCq8dadXgcRHSf3Ulh1kFo/qvzoFiCLOL1Q==}
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.16':
+    resolution: {integrity: sha512-tj7XRemQcOcFwv7qhpUxMTBbI5mWMlE4c1Omhg5+h8GuLXzyj8HviYgR+bB2DMDgRqUE+jiDleqSCRjx4aYk/Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.12':
-    resolution: {integrity: sha512-PyqoipaswDLAZtot351MLhrlrh6lcZPo2LSYE+VDxbVk24LVKAGOuE4hb8xZQmrPAuEtTZW8E6D2zc5EUZX4Lw==}
+  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.16':
+    resolution: {integrity: sha512-PH5DRZT+F4f2PTXRXR8uJxnBq2po/xFtddyabTJVJs/ZYVHqXPEgNIr35IHTEa6bpa0Q8Awg+ymkTaGnKITw4g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
-  '@rolldown/pluginutils@1.0.0-rc.12':
-    resolution: {integrity: sha512-HHMwmarRKvoFsJorqYlFeFRzXZqCt2ETQlEDOb9aqssrnVBB1/+xgTGtuTrIk5vzLNX1MjMtTf7W9z3tsSbrxw==}
+  '@rolldown/pluginutils@1.0.0-rc.16':
+    resolution: {integrity: sha512-45+YtqxLYKDWQouLKCrpIZhke+nXxhsw+qAHVzHDVwttyBlHNBVs2K25rDXrZzhpTp9w1FlAlvweV1H++fdZoA==}
 
   '@rollup/plugin-inject@5.0.5':
     resolution: {integrity: sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      rollup: 4.60.1
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
     peerDependenciesMeta:
       rollup:
         optional: true
@@ -4493,7 +4481,7 @@ packages:
     resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      rollup: 4.60.1
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
     peerDependenciesMeta:
       rollup:
         optional: true
@@ -4639,82 +4627,82 @@ packages:
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
-  '@rushstack/node-core-library@5.19.1':
-    resolution: {integrity: sha512-ESpb2Tajlatgbmzzukg6zyAhH+sICqJR2CNXNhXcEbz6UGCQfrKCtkxOpJTftWc8RGouroHG0Nud1SJAszvpmA==}
+  '@rushstack/node-core-library@5.23.1':
+    resolution: {integrity: sha512-wlKmIKIYCKuCASbITvOxLZXepPbwXvrv7S6ig6XNWFchSyhL/E2txmVXspHY49Wu2dzf7nI27a2k/yV5BA3EiA==}
     peerDependencies:
       '@types/node': 18.19.130
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@rushstack/problem-matcher@0.1.1':
-    resolution: {integrity: sha512-Fm5XtS7+G8HLcJHCWpES5VmeMyjAKaWeyZU5qPzZC+22mPlJzAsOxymHiWIfuirtPckX3aptWws+K2d0BzniJA==}
+  '@rushstack/problem-matcher@0.2.1':
+    resolution: {integrity: sha512-gulfhBs6n+I5b7DvjKRfhMGyUejtSgOHTclF/eONr8hcgF1APEDjhxIsfdUYYMzC3rvLwGluqLjbwCFZ8nxrog==}
     peerDependencies:
       '@types/node': 18.19.130
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@rushstack/rig-package@0.6.0':
-    resolution: {integrity: sha512-ZQmfzsLE2+Y91GF15c65L/slMRVhF6Hycq04D4TwtdGaUAbIXXg9c5pKA5KFU7M4QMaihoobp9JJYpYcaY3zOw==}
+  '@rushstack/rig-package@0.7.3':
+    resolution: {integrity: sha512-aAA518n6wxxjCfnTAOjQnm7ngNE0FVHxHAw2pxKlIhxrMn0XQjGcXKF0oKWpjBgJOmsaJpVob/v+zr3zxgPWuA==}
 
-  '@rushstack/terminal@0.21.0':
-    resolution: {integrity: sha512-cLaI4HwCNYmknM5ns4G+drqdEB6q3dCPV423+d3TZeBusYSSm09+nR7CnhzJMjJqeRcdMAaLnrA4M/3xDz4R3w==}
+  '@rushstack/terminal@0.23.0':
+    resolution: {integrity: sha512-7FfI9irLqnBDxCvMEXdEXLDjaouZsGbKkeGfmW8IOn8aYi7DV9aaXaEQHCcVxWMvEDOkuTf4y6RMDgIY5CFuUQ==}
     peerDependencies:
       '@types/node': 18.19.130
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@rushstack/ts-command-line@5.1.7':
-    resolution: {integrity: sha512-Ugwl6flarZcL2nqH5IXFYk3UR3mBVDsVFlCQW/Oaqidvdb/5Ota6b/Z3JXWIdqV3rOR2/JrYoAHanWF5rgenXA==}
-
-  '@sentry-internal/browser-utils@10.42.0':
-    resolution: {integrity: sha512-HCEICKvepxN4/6NYfnMMMlppcSwIEwtS66X6d1/mwaHdi2ivw0uGl52p7Nfhda/lIJArbrkWprxl0WcjZajhQA==}
-    engines: {node: '>=18'}
+  '@rushstack/ts-command-line@5.3.8':
+    resolution: {integrity: sha512-vKL4fVR2TdnMdCmlP71nZUzbNANOYlR7NfN+J/YL9UIvicDIEB+ZtH38LcJECOZUwHia8C5Mg98kc4kPt/ev5w==}
 
   '@sentry-internal/browser-utils@10.47.0':
     resolution: {integrity: sha512-bVFRAeJWMBcBCvJKIFCMJ1/yQToL4vPGqfmlnDZeypcxkqUDKQ/Y3ziLHXoDL2sx0lagcgU2vH1QhCQ67Aujjw==}
     engines: {node: '>=18'}
 
-  '@sentry-internal/feedback@10.42.0':
-    resolution: {integrity: sha512-lpPcHsog10MVYFTWE0Pf8vQRqQWwZHJpkVl2FEb9/HDdHFyTBUhCVoWo1KyKaG7GJl9AVKMAg7bp9SSNArhFNQ==}
+  '@sentry-internal/browser-utils@10.49.0':
+    resolution: {integrity: sha512-n0QRx0Ysx6mPfIydTkz7VP0FmwM+/EqMZiRqdsU3aTYsngE9GmEDV0OL1bAy6a8N/C1xf9vntkuAtj6N/8Z51w==}
     engines: {node: '>=18'}
 
   '@sentry-internal/feedback@10.47.0':
     resolution: {integrity: sha512-pdvMmi4dQpX5S/vAAzrhHPIw3T3HjUgDNgUiCBrlp7N9/6zGO2gNPhUnNekP+CjgI/z0rvf49RLqlDenpNrMOg==}
     engines: {node: '>=18'}
 
-  '@sentry-internal/replay-canvas@10.42.0':
-    resolution: {integrity: sha512-am3m1Fj8ihoPfoYo41Qq4KeCAAICn4bySso8Oepu9dMNe9Lcnsf+reMRS2qxTPg3pZDc4JEMOcLyNCcgnAfrHw==}
+  '@sentry-internal/feedback@10.49.0':
+    resolution: {integrity: sha512-JNsUBGv0faCFE7MeZUH99Y9lU9qq3LBALbLxpE1x7ngNrQnVYRlcFgdqaD/btNBKr8awjYL8gmcSkHBWskGqLQ==}
     engines: {node: '>=18'}
 
   '@sentry-internal/replay-canvas@10.47.0':
     resolution: {integrity: sha512-A5OY8friSe6g8WAK4L8IeOPiEd9D3Ps40DzRH5j2f6SUja0t90mKMvHRcRf8zq0d4BkdB+JM7tjOkwxpuv8heA==}
     engines: {node: '>=18'}
 
-  '@sentry-internal/replay@10.42.0':
-    resolution: {integrity: sha512-Zh3EoaH39x2lqVY1YyVB2vJEyCIrT+YLUQxYl1yvP0MJgLxaR6akVjkgxbSUJahan4cX5DxpZiEHfzdlWnYPyQ==}
+  '@sentry-internal/replay-canvas@10.49.0':
+    resolution: {integrity: sha512-7D/NrgH1Qwx5trDYaaTSSJmCb1yVQQLqFG4G/S9x2ltzl9876lSGJL8UeW8ReNQgF3CDAcwbmm/9aXaVSBUNZA==}
     engines: {node: '>=18'}
 
   '@sentry-internal/replay@10.47.0':
     resolution: {integrity: sha512-ScdovxP7hJxgMt70+7hFvwT02GIaIUAxdEM/YPsayZBeCoAukPW8WiwztJfoKtsfPyKJ5A6f0H3PIxTPcA9Row==}
     engines: {node: '>=18'}
 
-  '@sentry/babel-plugin-component-annotate@5.1.1':
-    resolution: {integrity: sha512-x2wEpBHwsTyTF2rWsLKJlzrRF1TTIGOfX+ngdE+Yd5DBkoS58HwQv824QOviPGQRla4/ypISqAXzjdDPL/zalg==}
-    engines: {node: '>= 18'}
-
-  '@sentry/browser@10.42.0':
-    resolution: {integrity: sha512-iXxYjXNEBwY1MH4lDSDZZUNjzPJDK7/YLwVIJq/3iBYpIQVIhaJsoJnf3clx9+NfJ8QFKyKfcvgae61zm+hgTA==}
+  '@sentry-internal/replay@10.49.0':
+    resolution: {integrity: sha512-IEy4lwHVMiRE3JAcn+kFKjsTgalDOCSTf20SoFd+nkt6rN/k1RDyr4xpdfF//Kj3UdeTmbuibYjK5H/FLhhnGg==}
     engines: {node: '>=18'}
 
+  '@sentry/babel-plugin-component-annotate@5.2.0':
+    resolution: {integrity: sha512-8LbOI5Kzb5F0+7LVQPi2+zGz1iPiRRFhM+7uZ/ZQ33L9BmDOYNIy3xWxCfMw2JCuMXXaxF47XCjGmR22/B0WPg==}
+    engines: {node: '>= 18'}
+
   '@sentry/browser@10.47.0':
     resolution: {integrity: sha512-rC0agZdxKA5XWfL4VwPOr/rJMogXDqZgnVzr93YWpFn9DMZT/7LzxSJVPIJwRUjx3bFEby3PcTa3YaX7pxm1AA==}
     engines: {node: '>=18'}
 
-  '@sentry/bundler-plugin-core@5.1.1':
-    resolution: {integrity: sha512-F+itpwR9DyQR7gEkrXd2tigREPTvtF5lC8qu6e4anxXYRTui1+dVR0fXNwjpyAZMhIesLfXRN7WY7ggdj7hi0Q==}
+  '@sentry/browser@10.49.0':
+    resolution: {integrity: sha512-bGCHc+wK2Dx67YoSbmtlt04alqWfQ+dasD/GVipVOq50gvw/BBIDHTEWRJEjACl+LrvszeY54V+24p8z4IgysA==}
+    engines: {node: '>=18'}
+
+  '@sentry/bundler-plugin-core@5.2.0':
+    resolution: {integrity: sha512-+C0x4gEIJRgoMwyRFGx+TFiJ1Po2BZlT1v61+PnouiaprKL5qtZG8n5PXx/5LPLDsVjSIcXjnDrTz9aSm8SJ3w==}
     engines: {node: '>= 18'}
 
   '@sentry/cli-darwin@2.58.5':
@@ -4769,29 +4757,30 @@ packages:
     engines: {node: '>= 10'}
     hasBin: true
 
-  '@sentry/core@10.42.0':
-    resolution: {integrity: sha512-L4rMrXMqUKBanpjpMT+TuAVk6xAijz6AWM6RiEYpohAr7SGcCEc1/T0+Ep1eLV8+pwWacfU27OvELIyNeOnGzA==}
-    engines: {node: '>=18'}
-
   '@sentry/core@10.47.0':
     resolution: {integrity: sha512-nsYRAx3EWezDut+Zl+UwwP07thh9uY7CfSAi2whTdcJl5hu1nSp2z8bba7Vq/MGbNLnazkd3A+GITBEML924JA==}
     engines: {node: '>=18'}
 
-  '@sentry/electron@7.10.0':
-    resolution: {integrity: sha512-RwifPIBQds31giWL5KF87R/owzcVamMcXkL2ctoe/ybsxV861cbNhXxba/XCI6YmYOGIaixqiCAasxeZ+mx1SA==}
+  '@sentry/core@10.49.0':
+    resolution: {integrity: sha512-UaFeum3LUM1mB0d67jvKnqId1yWQjyqmaDV6kWngG03x+jqXb08tJdGpSoxjXZe13jFBbiBL/wKDDYIK7rCK4g==}
+    engines: {node: '>=18'}
+
+  '@sentry/electron@7.11.0':
+    resolution: {integrity: sha512-AKz66R/o/tULOg23zJyQZU2RK2uyV7PRYEWxDeyGDIfJeg+tXN1Zwjf/WuPcpoVE3xsXcCGBReboqMLgff587Q==}
     peerDependencies:
-      '@sentry/node-native': 10.42.0
+      '@sentry/node-native': 10.47.0
     peerDependenciesMeta:
       '@sentry/node-native':
         optional: true
 
-  '@sentry/node-core@10.42.0':
-    resolution: {integrity: sha512-9tf3fPV6M071aps72D+PEtdQPTuj+SuqO2+PpTfdPP5ZL4TTKYo3VK0li76SL+5wGdTFGV5qmsokHq9IRBA0iA==}
+  '@sentry/node-core@10.47.0':
+    resolution: {integrity: sha512-qv6LsqHbkQmd0aQEUox/svRSz26J+l4gGjFOUNEay2armZu9XLD+Ct89jpFgZD5oIPNAj2jraodTRqydXiwS5w==}
     engines: {node: '>=18'}
     peerDependencies:
       '@opentelemetry/api': ^1.9.0
       '@opentelemetry/context-async-hooks': ^1.30.1 || ^2.1.0
       '@opentelemetry/core': ^1.30.1 || ^2.1.0
+      '@opentelemetry/exporter-trace-otlp-http': '>=0.57.0 <1'
       '@opentelemetry/instrumentation': '>=0.57.1 <1'
       '@opentelemetry/resources': ^1.30.1 || ^2.1.0
       '@opentelemetry/sdk-trace-base': ^1.30.1 || ^2.1.0
@@ -4803,6 +4792,8 @@ packages:
         optional: true
       '@opentelemetry/core':
         optional: true
+      '@opentelemetry/exporter-trace-otlp-http':
+        optional: true
       '@opentelemetry/instrumentation':
         optional: true
       '@opentelemetry/resources':
@@ -4812,12 +4803,12 @@ packages:
       '@opentelemetry/semantic-conventions':
         optional: true
 
-  '@sentry/node@10.42.0':
-    resolution: {integrity: sha512-ZZfU3Fnni7Aj0lTX4e3QpY3UxK4FGuzfM20316UAJycBGnripm+sDHwcekPMGfLnk/FrN9wa1atspVlHvOI0WQ==}
+  '@sentry/node@10.47.0':
+    resolution: {integrity: sha512-R+btqPepv88o635G6HtVewLjqCLUedBg5HBs7Nq1qbbKvyti01uArUF2f+3DsLenk5B9LUNiRlE+frZA44Ahmw==}
     engines: {node: '>=18'}
 
-  '@sentry/opentelemetry@10.42.0':
-    resolution: {integrity: sha512-5vsYz683iihzlIj3sT1+tEixf0awwXK86a+aYsnMHrTXJDrkBDq4U0ZT+yxdPfJlkaxRtYycFR08SXr2pSm7Eg==}
+  '@sentry/opentelemetry@10.47.0':
+    resolution: {integrity: sha512-f6Hw2lrpCjlOksiosP0Z2jK/+l+21SIdoNglVeG/sttMyx8C8ywONKh0Ha50sFsvB1VaB8n94RKzzf3hkh9V3g==}
     engines: {node: '>=18'}
     peerDependencies:
       '@opentelemetry/api': ^1.9.0
@@ -4826,8 +4817,8 @@ packages:
       '@opentelemetry/sdk-trace-base': ^1.30.1 || ^2.1.0
       '@opentelemetry/semantic-conventions': ^1.39.0
 
-  '@sentry/webpack-plugin@5.1.1':
-    resolution: {integrity: sha512-XgQg+t2aVrlQDfIiAEizqR/bsy6GtBygwgR+Kw11P/cYczj4W9PZ2IYqQEStBzHqnRTh5DbpyMcUNW2CujdA9A==}
+  '@sentry/webpack-plugin@5.2.0':
+    resolution: {integrity: sha512-ssV/uJK3ixf8UHBrNdLBXcnprUwppJNilbFv+19I81KTH4gVwzKXsVTMO91j6lyAXtk2mORwmEFwxZqScFfc7g==}
     engines: {node: '>= 18'}
     peerDependencies:
       webpack: '>=5.0.0'
@@ -4912,13 +4903,13 @@ packages:
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
-  '@storybook/addon-a11y@10.2.19':
-    resolution: {integrity: sha512-SJGf1ghCoRVlwyiRwz5GiHuNvu7C5iCDNIRJW8WGOJlnoQa3rYaY7WJ/8a/eT9N8buIscL9AYWudhh5zsI1W3g==}
+  '@storybook/addon-a11y@10.3.5':
+    resolution: {integrity: sha512-5k6lpgfIeLxvNhE8v3wEzdiu73ONKjF4gmH1AHvfqYd8kIVzQJai0KCDxgvqNncXHQhIWkaf1fg6+9hKaYJyaw==}
     peerDependencies:
-      storybook: ^10.2.19
+      storybook: ^10.3.5
 
-  '@storybook/addon-designs@11.1.2':
-    resolution: {integrity: sha512-d9tOOJSNrUOshK0hvnDtR17uk/gfDAbs0DKGRaKe0VacUVLJkJEPor4OpxKKFG59qtSi4iU1FYyb668hfMdCdw==}
+  '@storybook/addon-designs@11.1.3':
+    resolution: {integrity: sha512-AK+ij478Y6S16TCNPwm7H90OipVe2wZApOlHjC6qDvMW61zyd4yP1icrRtjehSadw5SCoz8HcAmIYfQCOY6E4A==}
     peerDependencies:
       '@storybook/addon-docs': ^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -4932,18 +4923,18 @@ packages:
       react-dom:
         optional: true
 
-  '@storybook/addon-docs@10.2.19':
-    resolution: {integrity: sha512-tXugthdzjX5AkGWDSP4pnRgA/CWlOaEKp/+y9JOGXHLQmm1GHjW+4brNvNkKbjBl06LALXwlcTOyU4lyVRDLAw==}
+  '@storybook/addon-docs@10.3.5':
+    resolution: {integrity: sha512-WuHbxia/o5TX4Rg/IFD0641K5qId/Nk0dxhmAUNoFs5L0+yfZUwh65XOBbzXqrkYmYmcVID4v7cgDRmzstQNkA==}
     peerDependencies:
-      storybook: ^10.2.19
+      storybook: ^10.3.5
 
-  '@storybook/addon-vitest@10.2.19':
-    resolution: {integrity: sha512-mx7B8QBT4YFLJ6+30rVxRfJNMDrIfVjJBWtdhP4mbZCS2IuoKAqf28KaC4ZZ4/UWAxjA/8VSQrV9CpXArepMlg==}
+  '@storybook/addon-vitest@10.3.5':
+    resolution: {integrity: sha512-PQDeeMwoF55kvzlhFqVKOryBJskkVk71AbDh7F0y8PdRRxlGbTvIUkKXktHZWBdESo0dV6BkeVxGQ4ZpiFxirg==}
     peerDependencies:
       '@vitest/browser': ^3.0.0 || ^4.0.0
       '@vitest/browser-playwright': ^4.0.0
       '@vitest/runner': ^3.0.0 || ^4.0.0
-      storybook: ^10.2.19
+      storybook: ^10.3.5
       vitest: ^3.0.0 || ^4.0.0
     peerDependenciesMeta:
       '@vitest/browser':
@@ -4955,18 +4946,18 @@ packages:
       vitest:
         optional: true
 
-  '@storybook/builder-vite@10.2.19':
-    resolution: {integrity: sha512-a59xALzM9GeYh6p+wzAeBbDyIe+qyrC4nxS3QNzb5i2ZOhrq1iIpvnDaOWe80NC8mV3IlqUEGY8Uawkf//1Rmg==}
+  '@storybook/builder-vite@10.3.5':
+    resolution: {integrity: sha512-i4KwCOKbhtlbQIbhm53+Kk7bMnxa0cwTn1pxmtA/x5wm1Qu7FrrBQV0V0DNjkUqzcSKo1CjspASJV/HlY0zYlw==}
     peerDependencies:
-      storybook: ^10.2.19
+      storybook: ^10.3.5
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  '@storybook/csf-plugin@10.2.19':
-    resolution: {integrity: sha512-BpjYIOdyQn/Rm6MjUAc5Gl8HlARZrskD/OhUNShiOh2fznb523dHjiE5mbU1kKM/+L1uvRlEqqih40rTx+xCrg==}
+  '@storybook/csf-plugin@10.3.5':
+    resolution: {integrity: sha512-qlEzNKxOjq86pvrbuMwiGD/bylnsXk1dg7ve0j77YFjEEchqtl7qTlrXvFdNaLA89GhW6D/EV6eOCu/eobPDgw==}
     peerDependencies:
-      esbuild: '>=0.25.0'
-      rollup: 4.60.1
-      storybook: ^10.2.19
+      esbuild: 0.27.4
+      rollup: '*'
+      storybook: ^10.3.5
       vite: '*'
       webpack: '*'
     peerDependenciesMeta:
@@ -4988,34 +4979,34 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@storybook/react-dom-shim@10.2.19':
-    resolution: {integrity: sha512-BXCEfBGVBRYBTYeBeH/PJsy0Bq5MERe/HiaylR+ah/XrvIr2Z9bkne1J8yYiXCjiyq5HQa7Bj11roz0+vyUaEw==}
+  '@storybook/react-dom-shim@10.3.5':
+    resolution: {integrity: sha512-Gw8R7XZm0zSUH0XAuxlQJhmizsLzyD6x00KOlP6l7oW9eQHXGfxg3seNDG3WrSAcW07iP1/P422kuiriQlOv7g==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.2.19
+      storybook: ^10.3.5
 
-  '@storybook/react-vite@10.2.19':
-    resolution: {integrity: sha512-2/yMKrK4IqMIZicRpPMoIg+foBuWnkaEWt0R4V4hjErDj/SC3D9ov+GUqhjKJ81TegijhKzNpwnSD7Nf87haKw==}
+  '@storybook/react-vite@10.3.5':
+    resolution: {integrity: sha512-UB5sJHeh26bfd8sNMx2YPGYRYmErIdTRaLOT28m4bykQIa1l9IgVktsYg/geW7KsJU0lXd3oTbnUjLD+enpi3w==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.2.19
+      storybook: ^10.3.5
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  '@storybook/react@10.2.19':
-    resolution: {integrity: sha512-gm2qxLyYSsGp7fee5i+d8jSVUKMla8yRaTJ1wxPEnyaJMd0QUu6U2v3p2rW7PH1DWop3D6NqWOY8kmZjmSZKlA==}
+  '@storybook/react@10.3.5':
+    resolution: {integrity: sha512-tpLTLaVGoA6fLK3ReyGzZUricq7lyPaV2hLPpj5wqdXLV/LpRtAHClUpNoPDYSBjlnSjL81hMZijbkGC3mA+gw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.2.19
+      storybook: ^10.3.5
       typescript: '>= 4.9.x'
     peerDependenciesMeta:
       typescript:
         optional: true
 
-  '@stylistic/eslint-plugin@5.9.0':
-    resolution: {integrity: sha512-FqqSkvDMYJReydrMhlugc71M76yLLQWNfmGq+SIlLa7N3kHp8Qq8i2PyWrVNAfjOyOIY+xv9XaaYwvVW7vroMA==}
+  '@stylistic/eslint-plugin@5.10.0':
+    resolution: {integrity: sha512-nPK52ZHvot8Ju/0A4ucSX1dcPV2/1clx0kLcH5wDmrE4naKso7TUC/voUyU1O9OTKTrR6MYip6LP0ogEMQ9jPQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^9.0.0 || ^10.0.0
@@ -5102,8 +5093,8 @@ packages:
     resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==}
     engines: {node: '>=10'}
 
-  '@testcontainers/postgresql@11.11.0':
-    resolution: {integrity: sha512-Og64I/h5LKLVvUTkAcLeTXfFcMhh3dCHCypN3Uzd+tQMd70SpCfQ0LCP9v/U+MS7JBRzU9EmqhUFkTOm4hyZWw==}
+  '@testcontainers/postgresql@11.14.0':
+    resolution: {integrity: sha512-wYbJn8GRTj8qfqzfVubxioYWlHJU/ImIjuzPwyy9C5Qfo6g3GLduPZAj+BifvqTZjgT3gd4gFVLCPhBji7dc1w==}
 
   '@testing-library/dom@10.4.1':
     resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
@@ -5319,9 +5310,6 @@ packages:
   '@types/eslint@9.6.1':
     resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
 
-  '@types/esquery@1.5.4':
-    resolution: {integrity: sha512-yYO4Q8H+KJHKW1rEeSzHxcZi90durqYgWVfnh5K6ZADVBjBv2e1NEveYX5yT2bffgN7RqzH3k9930m+i2yBoMA==}
-
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
@@ -5405,6 +5393,9 @@ packages:
   '@types/linkify-it@5.0.0':
     resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
 
+  '@types/lodash-es@4.17.12':
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+
   '@types/lodash@4.17.24':
     resolution: {integrity: sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==}
 
@@ -5505,8 +5496,8 @@ packages:
     peerDependencies:
       '@types/react': ^19.2.10
 
-  '@types/react@19.2.10':
-    resolution: {integrity: sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==}
+  '@types/react@19.2.14':
+    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
 
   '@types/resolve@1.20.6':
     resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
@@ -5601,93 +5592,100 @@ packages:
   '@types/yauzl@2.10.3':
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
 
-  '@typescript-eslint/eslint-plugin@8.57.2':
-    resolution: {integrity: sha512-NZZgp0Fm2IkD+La5PR81sd+g+8oS6JwJje+aRWsDocxHkjyRw0J5L5ZTlN3LI1LlOcGL7ph3eaIUmTXMIjLk0w==}
+  '@typescript-eslint/eslint-plugin@8.58.2':
+    resolution: {integrity: sha512-aC2qc5thQahutKjP+cl8cgN9DWe3ZUqVko30CMSZHnFEHyhOYoZSzkGtAI2mcwZ38xeImDucI4dnqsHiOYuuCw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.57.2
+      '@typescript-eslint/parser': ^8.58.2
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/parser@8.58.0':
-    resolution: {integrity: sha512-rLoGZIf9afaRBYsPUMtvkDWykwXwUPL60HebR4JgTI8mxfFe2cQTu3AGitANp4b9B2QlVru6WzjgB2IzJKiCSA==}
+  '@typescript-eslint/parser@8.58.2':
+    resolution: {integrity: sha512-/Zb/xaIDfxeJnvishjGdcR4jmr7S+bda8PKNhRGdljDM+elXhlvN0FyPSsMnLmJUrVG9aPO6dof80wjMawsASg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/project-service@8.57.2':
-    resolution: {integrity: sha512-FuH0wipFywXRTHf+bTTjNyuNQQsQC3qh/dYzaM4I4W0jrCqjCVuUh99+xd9KamUfmCGPvbO8NDngo/vsnNVqgw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/project-service@8.58.0':
-    resolution: {integrity: sha512-8Q/wBPWLQP1j16NxoPNIKpDZFMaxl7yWIoqXWYeWO+Bbd2mjgvoF0dxP2jKZg5+x49rgKdf7Ck473M8PC3V9lg==}
+  '@typescript-eslint/project-service@8.58.2':
+    resolution: {integrity: sha512-Cq6UfpZZk15+r87BkIh5rDpi38W4b+Sjnb8wQCPPDDweS/LRCFjCyViEbzHk5Ck3f2QDfgmlxqSa7S7clDtlfg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/scope-manager@8.57.2':
-    resolution: {integrity: sha512-snZKH+W4WbWkrBqj4gUNRIGb/jipDW3qMqVJ4C9rzdFc+wLwruxk+2a5D+uoFcKPAqyqEnSb4l2ULuZf95eSkw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/scope-manager@8.58.0':
-    resolution: {integrity: sha512-W1Lur1oF50FxSnNdGp3Vs6P+yBRSmZiw4IIjEeYxd8UQJwhUF0gDgDD/W/Tgmh73mxgEU3qX0Bzdl/NGuSPEpQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/tsconfig-utils@8.57.2':
-    resolution: {integrity: sha512-3Lm5DSM+DCowsUOJC+YqHHnKEfFh5CoGkj5Z31NQSNF4l5wdOwqGn99wmwN/LImhfY3KJnmordBq/4+VDe2eKw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/tsconfig-utils@8.58.0':
-    resolution: {integrity: sha512-doNSZEVJsWEu4htiVC+PR6NpM+pa+a4ClH9INRWOWCUzMst/VA9c4gXq92F8GUD1rwhNvRLkgjfYtFXegXQF7A==}
+  '@typescript-eslint/project-service@8.59.0':
+    resolution: {integrity: sha512-Lw5ITrR5s5TbC19YSvlr63ZfLaJoU6vtKTHyB0GQOpX0W7d5/Ir6vUahWi/8Sps/nOukZQ0IB3SmlxZnjaKVnw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/type-utils@8.57.2':
-    resolution: {integrity: sha512-Co6ZCShm6kIbAM/s+oYVpKFfW7LBc6FXoPXjTRQ449PPNBY8U0KZXuevz5IFuuUj2H9ss40atTaf9dlGLzbWZg==}
+  '@typescript-eslint/scope-manager@8.58.2':
+    resolution: {integrity: sha512-SgmyvDPexWETQek+qzZnrG6844IaO02UVyOLhI4wpo82dpZJY9+6YZCKAMFzXb7qhx37mFK1QcPQ18tud+vo6Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/scope-manager@8.59.0':
+    resolution: {integrity: sha512-UzR16Ut8IpA3Mc4DbgAShlPPkVm8xXMWafXxB0BocaVRHs8ZGakAxGRskF7FId3sdk9lgGD73GSFaWmWFDE4dg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.58.2':
+    resolution: {integrity: sha512-3SR+RukipDvkkKp/d0jP0dyzuls3DbGmwDpVEc5wqk5f38KFThakqAAO0XMirWAE+kT00oTauTbzMFGPoAzB0A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/tsconfig-utils@8.59.0':
+    resolution: {integrity: sha512-91Sbl3s4Kb3SybliIY6muFBmHVv+pYXfybC4Oolp3dvk8BvIE3wOPc+403CWIT7mJNkfQRGtdqghzs2+Z91Tqg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/type-utils@8.58.2':
+    resolution: {integrity: sha512-Z7EloNR/B389FvabdGeTo2XMs4W9TjtPiO9DAsmT0yom0bwlPyRjkJ1uCdW1DvrrrYP50AJZ9Xc3sByZA9+dcg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/types@8.57.2':
-    resolution: {integrity: sha512-/iZM6FnM4tnx9csuTxspMW4BOSegshwX5oBDznJ7S4WggL7Vczz5d2W11ecc4vRrQMQHXRSxzrCsyG5EsPPTbA==}
+  '@typescript-eslint/types@8.58.2':
+    resolution: {integrity: sha512-9TukXyATBQf/Jq9AMQXfvurk+G5R2MwfqQGDR2GzGz28HvY/lXNKGhkY+6IOubwcquikWk5cjlgPvD2uAA7htQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/types@8.58.0':
-    resolution: {integrity: sha512-O9CjxypDT89fbHxRfETNoAnHj/i6IpRK0CvbVN3qibxlLdo5p5hcLmUuCCrHMpxiWSwKyI8mCP7qRNYuOJ0Uww==}
+  '@typescript-eslint/types@8.59.0':
+    resolution: {integrity: sha512-nLzdsT1gdOgFxxxwrlNVUBzSNBEEHJ86bblmk4QAS6stfig7rcJzWKqCyxFy3YRRHXDWEkb2NralA1nOYkkm/A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.57.2':
-    resolution: {integrity: sha512-2MKM+I6g8tJxfSmFKOnHv2t8Sk3T6rF20A1Puk0svLK+uVapDZB/4pfAeB7nE83uAZrU6OxW+HmOd5wHVdXwXA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/typescript-estree@8.58.0':
-    resolution: {integrity: sha512-7vv5UWbHqew/dvs+D3e1RvLv1v2eeZ9txRHPnEEBUgSNLx5ghdzjHa0sgLWYVKssH+lYmV0JaWdoubo0ncGYLA==}
+  '@typescript-eslint/typescript-estree@8.58.2':
+    resolution: {integrity: sha512-ELGuoofuhhoCvNbQjFFiobFcGgcDCEm0ThWdmO4Z0UzLqPXS3KFvnEZ+SHewwOYHjM09tkzOWXNTv9u6Gqtyuw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/utils@8.57.2':
-    resolution: {integrity: sha512-krRIbvPK1ju1WBKIefiX+bngPs+odIQUtR7kymzPfo1POVw3jlF+nLkmexdSSd4UCbDcQn+wMBATOOmpBbqgKg==}
+  '@typescript-eslint/typescript-estree@8.59.0':
+    resolution: {integrity: sha512-O9Re9P1BmBLFJyikRbQpLku/QA3/AueZNO9WePLBwQrvkixTmDe8u76B6CYUAITRl/rHawggEqUGn5QIkVRLMw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/utils@8.58.2':
+    resolution: {integrity: sha512-QZfjHNEzPY8+l0+fIXMvuQ2sJlplB4zgDZvA+NmvZsZv3EQwOcc1DuIU1VJUTWZ/RKouBMhDyNaBMx4sWvrzRA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/visitor-keys@8.57.2':
-    resolution: {integrity: sha512-zhahknjobV2FiD6Ee9iLbS7OV9zi10rG26odsQdfBO/hjSzUQbkIYgda+iNKK1zNiW2ey+Lf8MU5btN17V3dUw==}
+  '@typescript-eslint/utils@8.59.0':
+    resolution: {integrity: sha512-I1R/K7V07XsMJ12Oaxg/O9GfrysGTmCRhvZJBv0RE0NcULMzjqVpR5kRRQjHsz3J/bElU7HwCO7zkqL+MSUz+g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/visitor-keys@8.58.2':
+    resolution: {integrity: sha512-f1WO2Lx8a9t8DARmcWAUPJbu0G20bJlj8L4z72K00TMeJAoyLr/tHhI/pzYBLrR4dXWkcxO1cWYZEOX8DKHTqA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/visitor-keys@8.58.0':
-    resolution: {integrity: sha512-XJ9UD9+bbDo4a4epraTwG3TsNPeiB9aShrUneAVXy8q4LuwowN+qu89/6ByLMINqvIMeI9H9hOHQtg/ijrYXzQ==}
+  '@typescript-eslint/visitor-keys@8.59.0':
+    resolution: {integrity: sha512-/uejZt4dSere1bx12WLlPfv8GktzcaDtuJ7s42/HEZ5zGj9oxRaD4bj7qwSunXkf+pbAhFt2zjpHYUiT5lHf0Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@ungap/structured-clone@1.3.0':
@@ -5799,8 +5797,8 @@ packages:
   '@upsetjs/venn.js@2.0.0':
     resolution: {integrity: sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw==}
 
-  '@vector-im/compound-design-tokens@8.0.0':
-    resolution: {integrity: sha512-9CffdYzNZp9A2uQ/pcVZBNZuv7fyR9Ye8e6KuimBv1TOcgegFb7F55WUCcEEqj8kRRcWcaPbbM6kkTzSpsMSmg==}
+  '@vector-im/compound-design-tokens@10.1.0':
+    resolution: {integrity: sha512-o+7DGx+NygpT2NPE1Jo//7NZDuyjzRH06eRchS0ZlkJicKx/impEmShmHU/XiE4P84BIFOo9eZ1Ws+rAym6Tuw==}
     peerDependencies:
       '@types/react': ^19.2.10
       react: ^17 || ^18 || ^19.0.0
@@ -5810,13 +5808,13 @@ packages:
       react:
         optional: true
 
-  '@vector-im/compound-web@8.4.0':
-    resolution: {integrity: sha512-xScGP2UP04qxXBCI6D7MfzwfT0w+8k5sepXehaHleLZX0pykdPFeFp+P1WJz2NocQgEnqWIYHrp50kMrYzs0fA==}
+  '@vector-im/compound-web@9.2.0':
+    resolution: {integrity: sha512-jHbABGEQ2yqNtm5xRIkklQs198VEfSk9AJQolI+e4WSJ0xg8Ozyv9t9KIuKQAmjdSV9aow5G6hDE861XB6DQgw==}
     peerDependencies:
       '@fontsource/inconsolata': ^5
       '@fontsource/inter': ^5
       '@types/react': ^19.2.10
-      '@vector-im/compound-design-tokens': '>=1.6.1 <7.0.0'
+      '@vector-im/compound-design-tokens': '>=1.6.1 <11.0.0'
       react: ^18 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
@@ -5836,22 +5834,22 @@ packages:
       vite: ^5.0.0 || ^6.0.0
       vue: ^3.2.25
 
-  '@vitest/browser-playwright@4.1.2':
-    resolution: {integrity: sha512-N0Z2HzMLvMR6k/tWPTS6Q/DaRscrkax/f2f9DIbNQr+Cd1l4W4wTf/I6S983PAMr0tNqqoTL+xNkLh9M5vbkLg==}
+  '@vitest/browser-playwright@4.1.5':
+    resolution: {integrity: sha512-CWy0lBQJq97nionyJJdnaU4961IXTl43a7UCu5nHy51IoKxAt6PVIJLo+76rVl7KOOgcWHNkG4kbJu/pW7knvA==}
     peerDependencies:
       playwright: '*'
-      vitest: 4.1.2
+      vitest: 4.1.5
 
-  '@vitest/browser@4.1.2':
-    resolution: {integrity: sha512-CwdIf90LNf1Zitgqy63ciMAzmyb4oIGs8WZ40VGYrWkssQKeEKr32EzO8MKUrDPPcPVHFI9oQ5ni2Hp24NaNRQ==}
+  '@vitest/browser@4.1.5':
+    resolution: {integrity: sha512-iCDGI8c4yg+xmjUg2VsygdAUSIIB4x5Rht/P68OXy1hPELKXHDkzh87lkuTcdYmemRChDkEpB426MmDjzC0ziA==}
     peerDependencies:
-      vitest: 4.1.2
+      vitest: 4.1.5
 
-  '@vitest/coverage-v8@4.1.2':
-    resolution: {integrity: sha512-sPK//PHO+kAkScb8XITeB1bf7fsk85Km7+rt4eeuRR3VS1/crD47cmV5wicisJmjNdfeokTZwjMk4Mj2d58Mgg==}
+  '@vitest/coverage-v8@4.1.5':
+    resolution: {integrity: sha512-38C0/Ddb7HcRG0Z4/DUem8x57d2p9jYgp18mkaYswEOQBGsI1CG4f/hjm0ZCeaJfWhSZ4k7jgs29V1Zom7Ki9A==}
     peerDependencies:
-      '@vitest/browser': 4.1.2
-      vitest: 4.1.2
+      '@vitest/browser': 4.1.5
+      vitest: 4.1.5
     peerDependenciesMeta:
       '@vitest/browser':
         optional: true
@@ -5859,11 +5857,11 @@ packages:
   '@vitest/expect@3.2.4':
     resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
 
-  '@vitest/expect@4.1.2':
-    resolution: {integrity: sha512-gbu+7B0YgUJ2nkdsRJrFFW6X7NTP44WlhiclHniUhxADQJH5Szt9mZ9hWnJPJ8YwOK5zUOSSlSvyzRf0u1DSBQ==}
+  '@vitest/expect@4.1.5':
+    resolution: {integrity: sha512-PWBaRY5JoKuRnHlUHfpV/KohFylaDZTupcXN1H9vYryNLOnitSw60Mw9IAE2r67NbwwzBw/Cc/8q9BK3kIX8Kw==}
 
-  '@vitest/mocker@4.1.2':
-    resolution: {integrity: sha512-Ize4iQtEALHDttPRCmN+FKqOl2vxTiNUhzobQFFt/BM1lRUTG7zRCLOykG/6Vo4E4hnUdfVLo5/eqKPukcWW7Q==}
+  '@vitest/mocker@4.1.5':
+    resolution: {integrity: sha512-/x2EmFC4mT4NNzqvC3fmesuV97w5FC903KPmey4gsnJiMQ3Be1IlDKVaDaG8iqaLFHqJ2FVEkxZk5VmeLjIItw==}
     peerDependencies:
       msw: ^2.4.9
       vite: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -5876,26 +5874,26 @@ packages:
   '@vitest/pretty-format@3.2.4':
     resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
 
-  '@vitest/pretty-format@4.1.2':
-    resolution: {integrity: sha512-dwQga8aejqeuB+TvXCMzSQemvV9hNEtDDpgUKDzOmNQayl2OG241PSWeJwKRH3CiC+sESrmoFd49rfnq7T4RnA==}
+  '@vitest/pretty-format@4.1.5':
+    resolution: {integrity: sha512-7I3q6l5qr03dVfMX2wCo9FxwSJbPdwKjy2uu/YPpU3wfHvIL4QHwVRp57OfGrDFeUJ8/8QdfBKIV12FTtLn00g==}
 
-  '@vitest/runner@4.1.2':
-    resolution: {integrity: sha512-Gr+FQan34CdiYAwpGJmQG8PgkyFVmARK8/xSijia3eTFgVfpcpztWLuP6FttGNfPLJhaZVP/euvujeNYar36OQ==}
+  '@vitest/runner@4.1.5':
+    resolution: {integrity: sha512-2D+o7Pr82IEO46YPpoA/YU0neeyr6FTerQb5Ro7BUnBuv6NQtT/kmVnczngiMEBhzgqz2UZYl5gArejsyERDSQ==}
 
-  '@vitest/snapshot@4.1.2':
-    resolution: {integrity: sha512-g7yfUmxYS4mNxk31qbOYsSt2F4m1E02LFqO53Xpzg3zKMhLAPZAjjfyl9e6z7HrW6LvUdTwAQR3HHfLjpko16A==}
+  '@vitest/snapshot@4.1.5':
+    resolution: {integrity: sha512-zypXEt4KH/XgKGPUz4eC2AvErYx0My5hfL8oDb1HzGFpEk1P62bxSohdyOmvz+d9UJwanI68MKwr2EquOaOgMQ==}
 
   '@vitest/spy@3.2.4':
     resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
 
-  '@vitest/spy@4.1.2':
-    resolution: {integrity: sha512-DU4fBnbVCJGNBwVA6xSToNXrkZNSiw59H8tcuUspVMsBDBST4nfvsPsEHDHGtWRRnqBERBQu7TrTKskmjqTXKA==}
+  '@vitest/spy@4.1.5':
+    resolution: {integrity: sha512-2lNOsh6+R2Idnf1TCZqSwYlKN2E/iDlD8sgU59kYVl+OMDmvldO1VDk39smRfpUNwYpNRVn3w4YfuC7KfbBnkQ==}
 
   '@vitest/utils@3.2.4':
     resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
-  '@vitest/utils@4.1.2':
-    resolution: {integrity: sha512-xw2/TiX82lQHA06cgbqRKFb5lCAy3axQ4H4SoUFhUsg+wztiet+co86IAMDtF6Vm1hc7J6j09oh/rgDn+JdKIQ==}
+  '@vitest/utils@4.1.5':
+    resolution: {integrity: sha512-76wdkrmfXfqGjueGgnb45ITPyUi1ycZ4IHgC2bhPDUfWHklY/q3MdLOAB+TF1e6xfl8NxNY0ZYaPCFNWSsw3Ug==}
 
   '@volar/language-core@2.4.28':
     resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
@@ -5918,9 +5916,6 @@ packages:
   '@vue/compiler-ssr@3.5.31':
     resolution: {integrity: sha512-h0xIMxrt/LHOvJKMri+vdYT92BrK3HFLtDqq9Pr/lVVfE4IyKZKvWf0vJFW10Yr6nX02OR4MkJwI0c1HDa1hog==}
 
-  '@vue/compiler-vue2@2.7.16':
-    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
-
   '@vue/devtools-api@7.7.9':
     resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==}
 
@@ -5930,14 +5925,6 @@ packages:
   '@vue/devtools-shared@7.7.9':
     resolution: {integrity: sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==}
 
-  '@vue/language-core@2.2.0':
-    resolution: {integrity: sha512-O1ZZFaaBGkKbsRfnVH1ifOK1/1BUkyK+3SQsfnh6PmMmD4qJcTU8godCeA96jjDRTL6zgnK7YzCHfaUlH2r0Mw==}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@vue/reactivity@3.5.31':
     resolution: {integrity: sha512-DtKXxk9E/KuVvt8VxWu+6Luc9I9ETNcqR1T1oW1gf02nXaZ1kuAx58oVu7uX9XxJR0iJCro6fqBLw9oSBELo5g==}
 
@@ -5962,7 +5949,7 @@ packages:
     resolution: {integrity: sha512-fbGYivgK5uBTRt7p5F3zy6VrETlV9RtZjBqd1/HxGdjdckBgBM4ugP8LHpjolqTj14TXTxSK1ZfgPbHYyGuH7g==}
     peerDependencies:
       async-validator: ^4
-      axios: ^1
+      axios: 1.15.0
       change-case: ^5
       drauu: ^0.4
       focus-trap: ^7
@@ -6050,9 +6037,13 @@ packages:
   '@webassemblyjs/wast-printer@1.14.1':
     resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
 
-  '@xmldom/xmldom@0.9.9':
-    resolution: {integrity: sha512-qycIHAucxy/LXAYIjmLmtQ8q9GPnMbnjG1KXhWm9o5sCr6pOYDATkMPiTNa6/v8eELyqOQ2FsEqeoFYmgv/gJg==}
-    engines: {node: '>=14.6'}
+  '@webcontainer/env@1.1.1':
+    resolution: {integrity: sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==}
+
+  '@xmldom/xmldom@0.8.12':
+    resolution: {integrity: sha512-9k/gHF6n/pAi/9tqr3m3aqkuiNosYTurLLUtc7xQ9sxB/wm7WPygCv8GYa6mS0fLJEHhqMC1ATYhz++U/lRHqg==}
+    engines: {node: '>=10.0.0'}
+    deprecated: this version has critical issues, please update to the latest version
 
   '@xtuc/ieee754@1.2.0':
     resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
@@ -6181,9 +6172,6 @@ packages:
     resolution: {integrity: sha512-yE5I83Q2s8euVou8Y3feXK08wyZInJWLYXgWO6Xti9jBUEZAGUahyeQ7wSZWkifLWVnQVKEz5RAmBlXG5nqxog==}
     engines: {node: '>= 14.0.0'}
 
-  alien-signals@0.4.14:
-    resolution: {integrity: sha512-itUAVzhczTmP2U5yX67xVpsbbOiquusbWVyA9N+sy6+r6YVbFkahXvNCeEPWEOMhwDYwbVbGHFkVL03N9I5g+Q==}
-
   another-json@0.2.0:
     resolution: {integrity: sha512-/Ndrl68UQLhnCdsAzEXLMFuOR546o2qbYRqCglaNHbjXrwG1ayTcdwr3zkSGOGtGXDyR5X9nCFfnyG2AFJIsqg==}
 
@@ -6231,12 +6219,12 @@ packages:
   app-builder-bin@5.0.0-alpha.12:
     resolution: {integrity: sha512-j87o0j6LqPL3QRr8yid6c+Tt5gC7xNfYo6uQIQkorAC6MpeayVMZrEDzKmJJ/Hlv7EnOQpaRm53k6ktDYZyB6w==}
 
-  app-builder-lib@26.8.2:
-    resolution: {integrity: sha512-z3ptLzJwNl35fyR0wxv4qWOfZuU36VysYHnbs8PDtf8S0QzIl2OWimdDFVmCxYMkIV1k/RT9CeTgcP7oUznFOw==}
+  app-builder-lib@26.9.0:
+    resolution: {integrity: sha512-f/1GhVrDfBH7sSzhAwiXa1rpR/7pB7Av5woUjmt+QYE0QyNvrOAiY05rngtR/PK4/1BzS6/zVoYobIwDAsrtBA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      dmg-builder: 26.8.2
-      electron-builder-squirrel-windows: 26.8.2
+      dmg-builder: 26.9.0
+      electron-builder-squirrel-windows: 26.9.0
 
   applescript@1.0.0:
     resolution: {integrity: sha512-yvtNHdWvtbYEiIazXAdp/NY+BBb65/DAseqlNiJQjOx9DynuzOYDbVLBJvuc0ve0VL9x6B3OHF6eH52y9hCBtQ==}
@@ -6378,12 +6366,15 @@ packages:
   await-lock@3.0.0:
     resolution: {integrity: sha512-eO6fLiSnrJrMdjWMNK8zbVRXPs2TKJg78iKZd9wDpN3na5tcoV6EoeiOlMgk2QaAQ1gIrK1YuMsJHXWqz89tSA==}
 
-  axe-core@4.11.1:
-    resolution: {integrity: sha512-BASOg+YwO2C+346x3LZOeoovTIoTrRqEsqMa6fmfAV0P+U9mFr9NsyOEpiYvFjbc64NMrSswhV50WdXzdb/Z5A==}
+  axe-core@4.11.3:
+    resolution: {integrity: sha512-zBQouZixDTbo3jMGqHKyePxYxr1e5W8UdTmBQ7sNtaA9M2bE32daxxPLS/jojhKOHxQ7LWwPjfiwf/fhaJWzlg==}
     engines: {node: '>=4'}
 
-  axios@1.13.5:
-    resolution: {integrity: sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==}
+  axios@1.15.0:
+    resolution: {integrity: sha512-wWyJDlAatxk30ZJer+GeCWS209sA42X+N5jU2jy6oHTp7ufw8uzUTVFBX9+wTfAlhiJXGS0Bq7X6efruWjuK9Q==}
+
+  axios@1.15.2:
+    resolution: {integrity: sha512-wLrXxPtcrPTsNlJmKjkPnNPK2Ihe0hn0wGSaTEiHRPxwjvJwT3hKmXF4dpqxmPO9SoNb2FsYXj/xEo0gHN+D5A==}
 
   axobject-query@4.1.0:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
@@ -6403,12 +6394,18 @@ packages:
     peerDependencies:
       '@babel/core': ^7.11.0 || ^8.0.0-0
 
-  babel-loader@10.0.0:
-    resolution: {integrity: sha512-z8jt+EdS61AMw22nSfoNJAZ0vrtmhPRVi6ghL3rCeRZI8cdNYFiV5xeV3HbE7rlZZNmGH8BVccwWt8/ED0QOHA==}
+  babel-loader@10.1.1:
+    resolution: {integrity: sha512-JwKSzk2kjIe7mgPK+/lyZ2QAaJcpahNAdM+hgR2HI8D0OJVkdj8Rl6J3kaLYki9pwF7P2iWnD8qVv80Lq1ABtg==}
     engines: {node: ^18.20.0 || ^20.10.0 || >=22.0.0}
     peerDependencies:
-      '@babel/core': ^7.12.0
+      '@babel/core': ^7.12.0 || ^8.0.0-beta.1
+      '@rspack/core': ^1.0.0 || ^2.0.0-0
       webpack: '>=5.61.0'
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+      webpack:
+        optional: true
 
   babel-plugin-const-enum@1.2.0:
     resolution: {integrity: sha512-o1m/6iyyFnp9MRsK1dHF3bneqyf3AlM2q3A/YbgQr2pCat6B6XJVDv2TXqzfY2RYUi4mak6WAksSBPlyYGx9dg==}
@@ -6432,8 +6429,8 @@ packages:
     resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
     engines: {node: '>=10', npm: '>=6'}
 
-  babel-plugin-polyfill-corejs2@0.4.15:
-    resolution: {integrity: sha512-hR3GwrRwHUfYwGfrisXPIDP3JcYfBrW7wKE7+Au6wDYl7fm/ka1NEII6kORzxNU556JjfidZeBsO10kYvtV1aw==}
+  babel-plugin-polyfill-corejs2@0.4.17:
+    resolution: {integrity: sha512-aTyf30K/rqAsNwN76zYrdtx8obu0E4KoUME29B1xj+B3WxgvWkp943vYQ+z8Mv3lw9xHXMHpvSPOBxzAkIa94w==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
@@ -6442,13 +6439,13 @@ packages:
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
-  babel-plugin-polyfill-corejs3@0.14.0:
-    resolution: {integrity: sha512-AvDcMxJ34W4Wgy4KBIIePQTAOP1Ie2WFwkQp3dB7FQ/f0lI5+nM96zUnYEOE1P9sEg0es5VCP0HxiWu5fUHZAQ==}
+  babel-plugin-polyfill-corejs3@0.14.2:
+    resolution: {integrity: sha512-coWpDLJ410R781Npmn/SIBZEsAetR4xVi0SxLMXPaMO4lSf1MwnkGYMtkFxew0Dn8B3/CpbpYxN0JCgg8mn67g==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
-  babel-plugin-polyfill-regenerator@0.6.6:
-    resolution: {integrity: sha512-hYm+XLYRMvupxiQzrvXUj7YyvFFVfv5gI0R71AJzudg1g2AI2vyCPPIFEBjk162/wFzti3inBHo7isWFuEVS/A==}
+  babel-plugin-polyfill-regenerator@0.6.8:
+    resolution: {integrity: sha512-M762rNHfSF1EV3SLtnCJXFoQbbIIz0OyRwnCmV0KPC7qosSfCO0QLTSuJX3ayAebubhE6oYBAYPrBA5ljowaZg==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
@@ -6487,8 +6484,8 @@ packages:
       bare-abort-controller:
         optional: true
 
-  bare-fs@4.5.5:
-    resolution: {integrity: sha512-XvwYM6VZqKoqDll8BmSww5luA5eflDzY0uEFfBJtFKe4PAAtxBjU3YIxzIBzhyaEQBy1VXEQBto4cpN5RZJw+w==}
+  bare-fs@4.7.0:
+    resolution: {integrity: sha512-xzqKsCFxAek9aezYhjJuJRXBIaYlg/0OGDTZp+T8eYmYMlm66cs6cYko02drIyjN2CBbi+I6L7YfXyqpqtKRXA==}
     engines: {bare: '>=1.16.0'}
     peerDependencies:
       bare-buffer: '*'
@@ -6496,26 +6493,29 @@ packages:
       bare-buffer:
         optional: true
 
-  bare-os@3.7.1:
-    resolution: {integrity: sha512-ebvMaS5BgZKmJlvuWh14dg9rbUI84QeV3WlWn6Ph6lFI8jJoh7ADtVTyD2c93euwbe+zgi0DVrl4YmqXeM9aIA==}
+  bare-os@3.8.7:
+    resolution: {integrity: sha512-G4Gr1UsGeEy2qtDTZwL7JFLo2wapUarz7iTMcYcMFdS89AIQuBoyjgXZz0Utv7uHs3xA9LckhVbeBi8lEQrC+w==}
     engines: {bare: '>=1.14.0'}
 
   bare-path@3.0.0:
     resolution: {integrity: sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==}
 
-  bare-stream@2.8.0:
-    resolution: {integrity: sha512-reUN0M2sHRqCdG4lUK3Fw8w98eeUIZHL5c3H7Mbhk2yVBL+oofgaIp0ieLfD5QXwPCypBpmEEKU2WZKzbAk8GA==}
+  bare-stream@2.13.0:
+    resolution: {integrity: sha512-3zAJRZMDFGjdn+RVnNpF9kuELw+0Fl3lpndM4NcEOhb9zwtSo/deETfuIwMSE5BXanA0FrN1qVjffGwAg2Y7EA==}
     peerDependencies:
+      bare-abort-controller: '*'
       bare-buffer: '*'
       bare-events: '*'
     peerDependenciesMeta:
+      bare-abort-controller:
+        optional: true
       bare-buffer:
         optional: true
       bare-events:
         optional: true
 
-  bare-url@2.3.2:
-    resolution: {integrity: sha512-ZMq4gd9ngV5aTMa5p9+UfY0b3skwhHELaDkhEHetMdX0LRkW9kzaym4oo/Eh+Ghm0CCDuMTsRIGM/ytUc1ZYmw==}
+  bare-url@2.4.0:
+    resolution: {integrity: sha512-NSTU5WN+fy/L0DDenfE8SXQna4voXuW0FHM7wH8i3/q9khUSchfPbPezO4zSFMnDGIf9YE+mt/RWhZgNRKRIXA==}
 
   base-x@5.0.1:
     resolution: {integrity: sha512-M7uio8Zt++eg3jPj+rHMfCC+IuygQHHCOU+IYsVtik6FWjuYpVt/+MRKcgsAMHh8mMFAwnB+Bs+mTrFiXjMzKg==}
@@ -6538,8 +6538,8 @@ packages:
   bcrypt-pbkdf@1.0.2:
     resolution: {integrity: sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==}
 
-  before-after-hook@2.2.3:
-    resolution: {integrity: sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==}
+  before-after-hook@4.0.0:
+    resolution: {integrity: sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==}
 
   big.js@5.2.2:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
@@ -6591,8 +6591,8 @@ packages:
   brace-expansion@1.1.13:
     resolution: {integrity: sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==}
 
-  brace-expansion@2.0.3:
-    resolution: {integrity: sha512-MCV/fYJEbqx68aE58kv2cA/kiky1G8vux3OR6/jbS+jIMe/6fJWa0DTzJU7dqijOWYwHi1t29FlfYI9uytqlpA==}
+  brace-expansion@2.1.0:
+    resolution: {integrity: sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==}
 
   brace-expansion@5.0.5:
     resolution: {integrity: sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==}
@@ -6662,12 +6662,12 @@ packages:
     resolution: {integrity: sha512-lHblz4ahamxpTmnsk+MNTRWsjYKv965MwOrSJyeD588rR3Jcu7swE+0wN5F+PbL5cjgu/9ObkhfzEPuofEMwLA==}
     engines: {node: '>=10.0.0'}
 
-  builder-util-runtime@9.5.1:
-    resolution: {integrity: sha512-qt41tMfgHTllhResqM5DcnHyDIWNgzHvuY2jDcYP9iaGpkWxTUzV6GQjDeLnlR1/DtdlcsWQbA7sByMpmJFTLQ==}
+  builder-util-runtime@9.6.0:
+    resolution: {integrity: sha512-k9V5I18PXLepLZ8jVmPzsH+gVCVZ+9aMVLyCZ0ZLOkT2KSyiBblDCCN8WxDbjOpfLGNHZqqJPBmW0HYeqxlgkQ==}
     engines: {node: '>=12.0.0'}
 
-  builder-util@26.8.1:
-    resolution: {integrity: sha512-pm1lTYbGyc90DHgCDO7eo8Rl4EqKLciayNbZqGziqnH9jrlKe8ZANGdityLZU+pJh16dfzjAx2xQq9McuIPEtw==}
+  builder-util@26.9.0:
+    resolution: {integrity: sha512-+eocmbdisnyb40B9nAp/KREfYLXvGagxV50KZv/Zh4aflsr1fdY9Qxs6QG1Jtx1vH5d5NQ3hIcemUi4RSlFK/Q==}
 
   builtin-modules@3.3.0:
     resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
@@ -6745,8 +6745,8 @@ packages:
   caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
 
-  caniuse-lite@1.0.30001781:
-    resolution: {integrity: sha512-RdwNCyMsNBftLjW6w01z8bKEvT6e/5tpPVEgtn22TiLGlstHOVecsX2KHFkD5e/vRnIE4EGzpuIODb3mtswtkw==}
+  caniuse-lite@1.0.30001788:
+    resolution: {integrity: sha512-6q8HFp+lOQtcf7wBK+uEenxymVWkGKkjFpCvw5W25cmMwEDU45p1xQFBQv8JDlMMry7eNxyBaR+qxgmTUZkIRQ==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -7028,8 +7028,8 @@ packages:
     peerDependencies:
       webpack: ^5.1.0
 
-  core-js-compat@3.48.0:
-    resolution: {integrity: sha512-OM4cAF3D6VtH/WkLtWvyNC56EZVXsZdU3iqaMG2B4WvYrlqU831pc4UtG5yp0sE9z8Y02wVN7PjW5Zf9Gt0f1Q==}
+  core-js-compat@3.49.0:
+    resolution: {integrity: sha512-VQXt1jr9cBz03b331DFDCCP90b3fanciLkgiOoy8SBHy06gNf+vQ1A3WFLqG7I8TipYIKeYK9wxd0tUrvHcOZA==}
 
   core-js@3.48.0:
     resolution: {integrity: sha512-zpEHTy1fjTMZCKLHUZoVeylt9XrzaIN2rbPXEt0k+q7JE5CkCZdo6bNq55bn24a69CH7ErAVLKijxJja4fw+UQ==}
@@ -7438,9 +7438,6 @@ packages:
   dayjs@1.11.20:
     resolution: {integrity: sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==}
 
-  de-indent@1.0.2:
-    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
-
   debounce-fn@6.0.0:
     resolution: {integrity: sha512-rBMW+F2TXryBwB54Q0d8drNEI+TfoS9JpNTAoVpukbWEhjXQq4rySFYLaqXMFXwdv61Zb2OHtj5bviSoimqxRQ==}
     engines: {node: '>=18'}
@@ -7546,9 +7543,6 @@ packages:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
 
-  deprecation@2.3.1:
-    resolution: {integrity: sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==}
-
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -7588,8 +7582,8 @@ packages:
   diff-match-patch@1.0.5:
     resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
 
-  diff@8.0.3:
-    resolution: {integrity: sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==}
+  diff@8.0.4:
+    resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
     engines: {node: '>=0.3.1'}
 
   diffie-hellman@5.0.3:
@@ -7601,8 +7595,8 @@ packages:
   dir-compare@4.2.0:
     resolution: {integrity: sha512-2xMCmOoMrdQIPHdsTawECdNPwlVFB9zGcz3kuhmBO6U3oU+UQjsue0i8ayLKpgBcm+hcXPMVSGUN9d+pvJ6+VQ==}
 
-  dmg-builder@26.8.2:
-    resolution: {integrity: sha512-DaWI+p4DOqiFVZFMovdGYammBOyJAiHHFWUTQ0Z7gNc0twfdIN0LvyJ+vFsgZEDR1fjgbpCj690IVtbYIsZObQ==}
+  dmg-builder@26.9.0:
+    resolution: {integrity: sha512-5uSyg0yY+JRMMGwFjIweaukYkCGcZSZwvH5VPlBHiKkTEP1a1/uV+bs4y+VAxPMgzg67YB4CF1vD4U/2d3chfg==}
 
   dmg-license@1.0.11:
     resolution: {integrity: sha512-ZdzmqwKmECOWJpqefloC5OJy1+WZBBse5+MR88z9g9Zn4VY+WYUkAyojmhzJckH5YbbZGcYIuGAkY5/Ys5OM2Q==}
@@ -7614,16 +7608,16 @@ packages:
     resolution: {integrity: sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==}
     engines: {node: '>=6'}
 
-  docker-compose@1.3.1:
-    resolution: {integrity: sha512-rF0wH69G3CCcmkN9J1RVMQBaKe8o77LT/3XmqcLIltWWVxcWAzp2TnO7wS3n/umZHN3/EVrlT3exSBMal+Ou1w==}
+  docker-compose@1.4.2:
+    resolution: {integrity: sha512-rPHigTKGaEHpkUmfd69QgaOp+Os5vGJwG/Ry8lcr8W/382AmI+z/D7qoa9BybKIkqNppaIbs8RYeHSevdQjWww==}
     engines: {node: '>= 6.0.0'}
 
-  docker-modem@5.0.6:
-    resolution: {integrity: sha512-ens7BiayssQz/uAxGzH8zGXCtiV24rRWXdjNha5V4zSOcxmAZsfGVm/PPFbwQdqEkDnhG+SyR9E3zSHUbOKXBQ==}
+  docker-modem@5.0.7:
+    resolution: {integrity: sha512-XJgGhoR/CLpqshm4d3L7rzH6t8NgDFUIIpztYlLHIApeJjMZKYJMz2zxPsYxnejq5h3ELYSw/RBsi3t5h7gNTA==}
     engines: {node: '>= 8.0'}
 
-  dockerode@4.0.9:
-    resolution: {integrity: sha512-iND4mcOWhPaCNh54WmK/KoSb35AFqPAUWFMffTQcp52uQt36b5uNwEJTSXntJZBbeGad72Crbi/hvDIv6us/6Q==}
+  dockerode@4.0.10:
+    resolution: {integrity: sha512-8L/P9JynLBiG7/coiA4FlQXegHltRqS0a+KqI44P1zgQh8QLHTg7FKOwhkBgSJwZTeHsq30WRoVFLuwkfK0YFg==}
     engines: {node: '>= 8.0'}
 
   doctrine@2.1.0:
@@ -7679,8 +7673,8 @@ packages:
     resolution: {integrity: sha512-gYzvtM72ZtxQO0T048kd6HWSbbGCNOUwcnfQ01cqIJ4X2IYKFFHZ5mKvrQETcFXxsRObZulDaKmy//R7TPtsBg==}
     engines: {node: '>=20.19.0'}
 
-  dompurify@3.3.3:
-    resolution: {integrity: sha512-Oj6pzI2+RqBfFG+qOaOLbFXLQ90ARpcGG6UePL82bJLtdsa6CYJD7nmiU8MW9nQNOtCHV3lZ/Bzq1X0QYbBZCA==}
+  dompurify@3.4.0:
+    resolution: {integrity: sha512-nolgK9JcaUXMSmW+j1yaSvaEaoXYHwWyGJlkoCTghc97KgGDDSnpoU/PlEnw63Ah+TGKFOyY+X5LnxaWbCSfXg==}
 
   domutils@2.8.0:
     resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
@@ -7711,8 +7705,8 @@ packages:
     resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
     engines: {node: '>=12'}
 
-  dotenv@17.4.0:
-    resolution: {integrity: sha512-kCKF62fwtzwYm0IGBNjRUjtJgMfGapII+FslMHIjMR5KTnwEmBmWLDRSnc3XSNP8bNy34tekgQyDT0hr7pERRQ==}
+  dotenv@17.4.2:
+    resolution: {integrity: sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==}
     engines: {node: '>=12'}
 
   dunder-proto@1.0.1:
@@ -7733,19 +7727,24 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
-  electron-builder-squirrel-windows@26.8.2:
-    resolution: {integrity: sha512-kXhajX6DzdIQcTlctVTKoG1oO39JhWcTG0lH7ZEJ4FzPaKJy7KFNfNJUd5BoEmLjv5GlrRZpEOYnniD+LcwNJA==}
+  ejs@5.0.1:
+    resolution: {integrity: sha512-COqBPFMxuPTPspXl2DkVYaDS3HtrD1GpzOGkNTJ1IYkifq/r9h8SVEFrjA3D9/VJGOEoMQcrlhpntcSUrM8k6A==}
+    engines: {node: '>=0.12.18'}
+    hasBin: true
 
-  electron-builder@26.8.2:
-    resolution: {integrity: sha512-ieiiXPdgH3qrG6lcvy2mtnI5iEmAopmLuVRMSJ5j40weU0tgpNx0OAk9J5X5nnO0j9+KIkxHzwFZVUDk1U3aGw==}
+  electron-builder-squirrel-windows@26.9.0:
+    resolution: {integrity: sha512-Jzsxa3Kjv94ZRZDK7pc8bzu5iglwGsDOBMWTqLpWx2sCEvb3TLW9PMWqOjpDwizqkMBp8GjP6rceLzQYLFIVow==}
+
+  electron-builder@26.9.0:
+    resolution: {integrity: sha512-7BEeGz8Xlk7Qvitj70nGAQaq7WQIZ2amsDvsyKSZbxgtL2pM9fm/woZrtn0hoID6Fl7wkn456dK3OmtFNzgiOA==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
   electron-devtools-installer@4.0.0:
     resolution: {integrity: sha512-9Tntu/jtfSn0n6N/ZI6IdvRqXpDyLQiDuuIbsBI+dL+1Ef7C8J2JwByw58P3TJiNeuqyV3ZkphpNWuZK5iSY2w==}
 
-  electron-publish@26.8.1:
-    resolution: {integrity: sha512-q+jrSTIh/Cv4eGZa7oVR+grEJo/FoLMYBAnSL5GCtqwUpr1T+VgKB/dn1pnzxIxqD8S/jP1yilT9VrwCqINR4w==}
+  electron-publish@26.9.0:
+    resolution: {integrity: sha512-gsy+U7JfDuD1lPOrCXeECDQoUsWjFah3s1Fv3pqKnjdJuKYDDvGdvC74kLHVG6nl5G0uQ7YN0eftCQ4rUmhvVw==}
 
   electron-store@11.0.2:
     resolution: {integrity: sha512-4VkNRdN+BImL2KcCi41WvAYbh6zLX5AUTi4so68yPqiItjbgTjqpEnGAqasgnG+lB6GuAyUltKwVopp6Uv+gwQ==}
@@ -7762,8 +7761,8 @@ packages:
     resolution: {integrity: sha512-bO3y10YikuUwUuDUQRM4KfwNkKhnpVO7IPdbsrejwN9/AABJzzTQ4GeHwyzNSrVO+tEH3/Np255a3sVZpZDjvg==}
     engines: {node: '>=8.0.0'}
 
-  electron@41.1.0:
-    resolution: {integrity: sha512-0XRFyxRqetmqtkkBvV++wGbHYJ7bD++f6EgJW8y9kX4pPRagwlmKDtzqXZhKiu0DIQppm3sXxzHWK9GYP91OKQ==}
+  electron@41.2.2:
+    resolution: {integrity: sha512-3rzz/hVIpF726W9g7nleQzyF2IOEZbzZnUTUYGhMaEfsoab8fDyOYAWbdBdo4+DczS1Ifz11rdYo8IAAGcRx/g==}
     engines: {node: '>= 12.20.55'}
     hasBin: true
 
@@ -8000,14 +7999,14 @@ packages:
       '@typescript-eslint/parser':
         optional: true
 
-  eslint-plugin-jest@29.15.0:
-    resolution: {integrity: sha512-ZCGr7vTH2WSo2hrK5oM2RULFmMruQ7W3cX7YfwoTiPfzTGTFBMmrVIz45jZHd++cGKj/kWf02li/RhTGcANJSA==}
+  eslint-plugin-jest@29.15.2:
+    resolution: {integrity: sha512-kEN4r9RZl1xcsb4arGq89LrcVdOUFII/JSCwtTPJyv16mDwmPrcuEQwpxqZHeINvcsd7oK5O/rhdGlxFRaZwvQ==}
     engines: {node: ^20.12.0 || ^22.0.0 || >=24.0.0}
     peerDependencies:
       '@typescript-eslint/eslint-plugin': ^8.0.0
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       jest: '*'
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: '>=4.8.4 <7.0.0'
     peerDependenciesMeta:
       '@typescript-eslint/eslint-plugin':
         optional: true
@@ -8062,11 +8061,11 @@ packages:
     peerDependencies:
       eslint: '>=7'
 
-  eslint-plugin-react-hooks@7.0.1:
-    resolution: {integrity: sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==}
+  eslint-plugin-react-hooks@7.1.1:
+    resolution: {integrity: sha512-f2I7Gw6JbvCexzIInuSbZpfdQ44D7iqdWX01FKLvrPgqxoE7oMj8clOfto8U6vYiz4yd5oKu39rRSVOe1zRu0g==}
     engines: {node: '>=18'}
     peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0
 
   eslint-plugin-react@7.37.5:
     resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
@@ -8074,11 +8073,11 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
 
-  eslint-plugin-storybook@10.2.13:
-    resolution: {integrity: sha512-ftNfZVL5zXhGMPEy/7PTCEriVH0zCBI89uiYYgSSTtM1b4l++VP+/MzJ17U1R1/jgENsp9LJm+jwRJnViv79RQ==}
+  eslint-plugin-storybook@10.3.5:
+    resolution: {integrity: sha512-rEFkfU3ypF44GpB4tiJ9EFDItueoGvGi3+weLHZax2ON2MB7VIDsxdSUGvIU5tMURg+oWYlpzCyLm4TpDq2deA==}
     peerDependencies:
       eslint: '>=8'
-      storybook: ^10.2.13
+      storybook: ^10.3.5
 
   eslint-plugin-unicorn@56.0.1:
     resolution: {integrity: sha512-FwVV0Uwf8XPfVnKSGpMg7NtlZh0G0gBarCaFcMUOoqPxXryxdYxTRRv4kH6B9TFCVIrjRXG+emcxIk2ayZilog==}
@@ -8235,6 +8234,9 @@ packages:
     resolution: {integrity: sha512-CGnyrvbhPlWYMngksqrSSUT1BAVP49dZocrHuK0SvtR0D5TMs5wP0o3j7jexDJW01KSadjBp1M/71o/KR3nD1w==}
     engines: {node: '>=18'}
 
+  fast-content-type-parse@3.0.0:
+    resolution: {integrity: sha512-ZvLdcY8P+N8mGQJahJV5G4U88CSvT1rP8ApL6uETe88MBXrBHAkZlSEySdUlyztF7ccb+Znos3TFqaepHxdhBg==}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -8361,8 +8363,8 @@ packages:
   focus-trap@7.8.0:
     resolution: {integrity: sha512-/yNdlIkpWbM0ptxno3ONTuf+2g318kh2ez3KSeZN5dZ8YC6AAmgeWz+GasYYiBJPFaYcSAPeu4GfhUaChzIJXA==}
 
-  follow-redirects@1.15.11:
-    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+  follow-redirects@1.16.0:
+    resolution: {integrity: sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==}
     engines: {node: '>=4.0'}
     peerDependencies:
       debug: '*'
@@ -8418,8 +8420,8 @@ packages:
     resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
     engines: {node: '>=12'}
 
-  fs-extra@11.3.3:
-    resolution: {integrity: sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==}
+  fs-extra@11.3.4:
+    resolution: {integrity: sha512-CTXd6rk/M3/ULNQj8FBqBWHYBVYybQ3VPBw0xGKFe3tuH7ytT6ACnvzpIQ3UZtB8yvUKC2cXn1a+x+5EVQLovA==}
     engines: {node: '>=14.14'}
 
   fs-extra@7.0.1:
@@ -8496,8 +8498,8 @@ packages:
     resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
     engines: {node: '>=8.0.0'}
 
-  get-port@7.1.0:
-    resolution: {integrity: sha512-QB9NKEeDg3xxVwCCwJQ9+xycaz6pBB6iQ76wiWMl1927n0Kir6alPiP+yuiICLLU4jpMe08dXfpebuQppFA2zw==}
+  get-port@7.2.0:
+    resolution: {integrity: sha512-afP4W205ONCuMoPBqcR6PSXnzX35KTcJygfJfcp+QY+uwm3p20p1YczWXhlICIzGMCxYBQcySEcOgsJcrkyobg==}
     engines: {node: '>=16'}
 
   get-proto@1.0.1:
@@ -8519,6 +8521,9 @@ packages:
   get-tsconfig@4.13.7:
     resolution: {integrity: sha512-7tN6rFgBlMgpBML5j8typ92BKFi2sFQvIdpAqLA2beia5avZDrMs0FLZiM5etShWq5irVyGcGMEA1jcDaK7A/Q==}
 
+  get-tsconfig@4.14.0:
+    resolution: {integrity: sha512-yTb+8DXzDREzgvYmh6s9vHsSVCHeC0G3PI5bEXNBHtmshPnO+S5O7qgLEOn0I5QvMy6kpZN8K1NKGyilLb93wA==}
+
   github-markdown-css@5.9.0:
     resolution: {integrity: sha512-tmT5sY+zvg2302XLYEfH2mtkViIM1SWf2nvYoF5N1ZsO0V6B2qZTiw3GOzw4vpjLygK/KG35qRlPFweHqfzz5w==}
     engines: {node: '>=10'}
@@ -8660,8 +8665,8 @@ packages:
     resolution: {integrity: sha512-iZyKG96/JwPz1N55vj2Ie2vXbhu440zfUfJvSwEqEbeLluk7NnapfGqa7LH0mOsnDxTF85Mx8/dyR6HfqcbmbQ==}
     engines: {node: '>=20'}
 
-  hasown@2.0.2:
-    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+  hasown@2.0.3:
+    resolution: {integrity: sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==}
     engines: {node: '>= 0.4'}
 
   hast-util-to-html@9.0.5:
@@ -8713,8 +8718,8 @@ packages:
   hpack.js@2.1.6:
     resolution: {integrity: sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==}
 
-  html-dom-parser@5.1.8:
-    resolution: {integrity: sha512-MCIUng//mF2qTtGHXJWr6OLfHWmg3Pm8ezpfiltF83tizPWY17JxT4dRLE8lykJ5bChJELoY3onQKPbufJHxYA==}
+  html-dom-parser@7.0.1:
+    resolution: {integrity: sha512-loRBDTCY/05/jAC63J1X9ID+xjRucmpLkIcQO0IRbOubBo5ucnpUpyXXob9UMXOskMZlu7KPsDP/2KOMelzJNA==}
 
   html-encoding-sniffer@4.0.0:
     resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
@@ -8734,8 +8739,8 @@ packages:
     engines: {node: '>=12'}
     hasBin: true
 
-  html-react-parser@5.2.17:
-    resolution: {integrity: sha512-m+K/7Moq1jodAB4VL0RXSOmtwLUYoAsikZhwd+hGQe5Vtw2dbWfpFd60poxojMU0Tsh9w59mN1QLEcoHz0Dx9w==}
+  html-react-parser@6.0.1:
+    resolution: {integrity: sha512-tIie2HSIk2Ct1tdupjd/DhBjskxN/NL5J4ncbUnk2smBr5UIfpPpitUo0imGfBM0BlOL7ac8RcqEwne1jXTcsQ==}
     peerDependencies:
       '@types/react': ^19.2.10
       react: 0.14 || 15 || 16 || 17 || 18 || 19
@@ -8750,8 +8755,8 @@ packages:
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
-  html-webpack-plugin@5.6.6:
-    resolution: {integrity: sha512-bLjW01UTrvoWTJQL5LsMRo1SypHW80FTm12OJRSnr3v6YHNhfe+1r0MYUZJMACxnCHURVnBWRwAsWs2yPU9Ezw==}
+  html-webpack-plugin@5.6.7:
+    resolution: {integrity: sha512-md+vXtdCAe60s1k6AU3dUyMJnDxUyQAwfwPKoLisvgUF1IXjtlLsk2se54+qfL9Mdm26bbwvjJybpNx48NKRLw==}
     engines: {node: '>=10.13.0'}
     peerDependencies:
       '@rspack/core': 0.x || 1.x
@@ -8765,6 +8770,10 @@ packages:
   htmlparser2@10.1.0:
     resolution: {integrity: sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==}
 
+  htmlparser2@12.0.0:
+    resolution: {integrity: sha512-Tz7u1i95/g2x2jz81+x0FBVhBhY5aRTvD3tXXdFaljuNdzDLJ8UGNRrTcj2cgQvAg3iW/h77Fz15nLW0L0CrZw==}
+    engines: {node: '>=20.19.0'}
+
   htmlparser2@6.1.0:
     resolution: {integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==}
 
@@ -8882,6 +8891,10 @@ packages:
   import-in-the-middle@2.0.6:
     resolution: {integrity: sha512-3vZV3jX0XRFW3EJDTwzWoZa+RH1b8eTTx6YOCjglrLyPuepwoBti1k3L2dKwdCUrnVEfc5CuRuGstaC/uQJJaw==}
 
+  import-in-the-middle@3.0.1:
+    resolution: {integrity: sha512-pYkiyXVL2Mf3pozdlDGV6NAObxQx13Ae8knZk1UJRJ6uRW/ZRmTGHlQYtrsSl7ubuE5F8CD1z+s1n4RHNuTtuA==}
+    engines: {node: '>=18'}
+
   import-lazy@4.0.0:
     resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
     engines: {node: '>=8'}
@@ -9109,6 +9122,9 @@ packages:
   is-promise@4.0.0:
     resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
 
+  is-reference@3.0.3:
+    resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
+
   is-regex@1.2.1:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
@@ -9202,6 +9218,11 @@ packages:
     resolution: {integrity: sha512-u4sej9B1LPSxTGKB/HiuzvEQnXH0ECYkSVQU39koSwmFAxhlEAFl9RdTvLv4TOTQUgBS5O3O5fwUxk6byBZ+IQ==}
     engines: {node: '>=10'}
 
+  isomorphic-ws@5.0.0:
+    resolution: {integrity: sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==}
+    peerDependencies:
+      ws: '*'
+
   istanbul-lib-coverage@3.2.2:
     resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
     engines: {node: '>=8'}
@@ -9394,8 +9415,8 @@ packages:
   jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
 
-  joi@18.0.2:
-    resolution: {integrity: sha512-RuCOQMIt78LWnktPoeBL0GErkNaJPTBGcYuyaBvUOQSpcpcLfWrHPPihYdOGbV5pam9VTWbeoF7TsGiHugcjGA==}
+  joi@18.1.2:
+    resolution: {integrity: sha512-rF5MAmps5esSlhCA+N1b6IYHDw9j/btzGaqfgie522jS02Ju/HXBxamlXVlKEHAxoMKQL77HWI8jlqWsFuekZA==}
     engines: {node: '>= 20'}
 
   js-tokens@10.0.0:
@@ -9462,6 +9483,9 @@ packages:
   json-stringify-safe@5.0.1:
     resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
 
+  json-with-bigint@3.5.8:
+    resolution: {integrity: sha512-eq/4KP6K34kwa7TcFdtvnftvHCD9KvHOGGICWwMFc4dOOKF5t4iYqnfLK8otCRCRv06FXOzGGyqE8h8ElMvvdw==}
+
   json5@1.0.2:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
@@ -9477,8 +9501,8 @@ packages:
   jsonfile@4.0.0:
     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
 
-  jsonfile@6.2.0:
-    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+  jsonfile@6.2.1:
+    resolution: {integrity: sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==}
 
   jsonparse@1.3.1:
     resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
@@ -9487,8 +9511,8 @@ packages:
   jsqr@1.4.0:
     resolution: {integrity: sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==}
 
-  jsrsasign@11.1.1:
-    resolution: {integrity: sha512-6w95OOXH8DNeGxakqLndBEqqwQ6A70zGaky1oxfg8WVLWOnghTfJsc5Tknx+Z88MHSb1bGLcqQHImOF8Lk22XA==}
+  jsrsasign@11.1.3:
+    resolution: {integrity: sha512-nPnK5D/4lv0Dwr7TlzrKtAd8JlLZwFTqTUUB3NQCbtdobcRcohGFxjbPySDVh74iWUudcCsapYT6OxoyhJLhhA==}
 
   jsx-ast-utils@3.3.5:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
@@ -9521,8 +9545,8 @@ packages:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
 
-  knip@6.3.0:
-    resolution: {integrity: sha512-g6dVPoTw6iNm3cubC5IWxVkVsd0r5hXhTBTbAGIEQN53GdA2ZM/slMTPJ7n5l8pBebNQPHpxjmKxuR4xVQ2/hQ==}
+  knip@6.4.1:
+    resolution: {integrity: sha512-Ry+ywmDFSZvKp/jx7LxMgsZWRTs931alV84e60lh0Stf6kSRYqSIUTkviyyDFRcSO3yY1Kpbi83OirN+4lA2Xw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
@@ -9727,9 +9751,6 @@ packages:
   lodash.uniq@4.5.0:
     resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
 
-  lodash@4.17.23:
-    resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==}
-
   lodash@4.18.1:
     resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
 
@@ -9789,8 +9810,8 @@ packages:
   magicast@0.5.2:
     resolution: {integrity: sha512-E3ZJh4J3S9KfwdjZhe2afj6R9lGIN5Pher1pF39UGrXRqq/VDaGVIGN13BjHd2u8B61hArAGOnso7nBOouW3TQ==}
 
-  mailpit-api@1.7.0:
-    resolution: {integrity: sha512-O4GjmOSz40mcPepaSkNrhvdLjpkFlI1lBVOwiGqfiYpSIrBT1HvwUJRKHH+AEfl1LYzLTbhGduG+V9pI2T0Xhw==}
+  mailpit-api@1.9.0:
+    resolution: {integrity: sha512-KoZIR7vfE7boEBLZ7fOw6SpGxn2pF207eLEWCoYePKAayFe3zYxGUgxNwxzEAp0hwVYSoe0lJQdeprHLEuelhA==}
     engines: {node: '>=18.0.0'}
 
   make-dir@4.0.0:
@@ -9808,8 +9829,8 @@ packages:
   makeerror@1.0.12:
     resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==}
 
-  maplibre-gl@5.22.0:
-    resolution: {integrity: sha512-nc8YA+YSEioMZg5W0cb6Cf3wQ8aJge66dsttyBgpOArOnlmFJO1Kc5G32kYVPeUYhLpBja83T99uanmJvYAIyQ==}
+  maplibre-gl@5.23.0:
+    resolution: {integrity: sha512-aou8YBNFS8uVtDWFWt0W/6oorfl18wt+oIA8fnXk1kivjkbtXi9gGrQvflTpwrR3hG13aWdIdbYWeN0NFMV7ag==}
     engines: {node: '>=16.14.0', npm: '>=8.1.0'}
 
   mark.js@8.11.1:
@@ -9842,8 +9863,8 @@ packages:
   matrix-events-sdk@0.0.1:
     resolution: {integrity: sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6371e4b25206dcd459d19375f5d046993ce11b1b:
-    resolution: {tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6371e4b25206dcd459d19375f5d046993ce11b1b}
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa424c44b4991acacc7524066a54a352e140f7b6:
+    resolution: {tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa424c44b4991acacc7524066a54a352e140f7b6}
     version: 41.3.0
     engines: {node: '>=22.0.0'}
 
@@ -9894,9 +9915,9 @@ packages:
   memoize-one@6.0.0:
     resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
 
-  memoize@10.2.0:
-    resolution: {integrity: sha512-DeC6b7QBrZsRs3Y02A6A7lQyzFbsQbqgjI6UW0GigGWV+u1s25TycMr0XHZE4cJce7rY/vyw2ctMQqfDkIhUEA==}
-    engines: {node: '>=18'}
+  memoize@11.0.0:
+    resolution: {integrity: sha512-cjsfZaC9b1clqPeIVMbb5dLHSXgdgGWGxdAU3oTUUkHiwWTKTBNnSmcqWJncNjYtBi3S8Rp0c5GIiyGztR8TRA==}
+    engines: {node: '>=22'}
 
   meow@14.1.0:
     resolution: {integrity: sha512-EDYo6VlmtnumlcBCbh1gLJ//9jvM/ndXHfVXIFrZVr6fGcwTUyCTFNTLCKuY3ffbK8L/+3Mzqnd58RojiZqHVw==}
@@ -10009,6 +10030,10 @@ packages:
   minimalistic-crypto-utils@1.0.1:
     resolution: {integrity: sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==}
 
+  minimatch@10.2.3:
+    resolution: {integrity: sha512-Rwi3pnapEqirPSbWbrZaa6N3nmqq4Xer/2XooiOKyV3q12ML06f7MOuc5DVH8ONZIFhwIYQ3yzPH4nt7iWHaTg==}
+    engines: {node: 18 || 20 || >=22}
+
   minimatch@10.2.4:
     resolution: {integrity: sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==}
     engines: {node: 18 || 20 || >=22}
@@ -10124,9 +10149,6 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  muggle-string@0.4.1:
-    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
-
   multicast-dns@7.2.5:
     resolution: {integrity: sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==}
     hasBin: true
@@ -10134,8 +10156,8 @@ packages:
   murmurhash-js@1.0.0:
     resolution: {integrity: sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==}
 
-  nan@2.25.0:
-    resolution: {integrity: sha512-0M90Ag7Xn5KMLLZ7zliPWP3rT90P6PN+IzVFS0VqmnPktBk3700xUVv8Ikm9EUaUE5SDWdp/BIxdENzVznpm1g==}
+  nan@2.26.2:
+    resolution: {integrity: sha512-0tTvBTYkt3tdGw22nrAy50x7gpbGCCFH3AFcyS5WiUu7Eu4vWlri1woE6qHBSfy11vksDqkiwjOnlR7WV8G1Hw==}
 
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
@@ -10168,8 +10190,8 @@ packages:
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
-  node-abi@4.27.0:
-    resolution: {integrity: sha512-M6PypnnjGwr6Wv1O7twPpnJiie8MeLoBSh99zF1jnRRU2NLgxO/fUEQW1rfAhAKzPa/fvQ4PKitt1O+c8l243Q==}
+  node-abi@4.28.0:
+    resolution: {integrity: sha512-Qfp5XZL1cJDOabOT8H5gnqMTmM4NjvYzHp4I/Kt/Sl76OVkOBBHRFlPspGV0hYvMoqQsypFjT/Yp7Km0beXW9g==}
     engines: {node: '>=22.12.0'}
 
   node-addon-api@1.7.2:
@@ -10200,9 +10222,6 @@ packages:
   node-int64@0.4.0:
     resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
 
-  node-machine-id@1.1.12:
-    resolution: {integrity: sha512-QNABxbrPa3qEIfrE6GOJ7BYIuignnJw7iQ2YPbc3Nla1HzRJjXzZOiikfF8m7eAMfichLt3M4VgLOetqgDmgGQ==}
-
   node-releases@2.0.37:
     resolution: {integrity: sha512-1h5gKZCF+pO/o3Iqt5Jp7wc9rH3eJJ0+nh/CIoiRwjRxde/hAHyLPXYN4V3CqKAbiZPSeJFSWHmJsbkicta0Eg==}
 
@@ -10272,20 +10291,8 @@ packages:
   nwsapi@2.2.23:
     resolution: {integrity: sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==}
 
-  nx@22.5.3:
-    resolution: {integrity: sha512-IaEPqdgaFBIr0Bfmnt6WAcX3t660sOuDXQ71lpoS8GgpD8cqX1LIW2ZyzEAdOvCP1iD6HCZehpofcVvaaL1GNQ==}
-    hasBin: true
-    peerDependencies:
-      '@swc-node/register': ^1.11.1
-      '@swc/core': ^1.15.8
-    peerDependenciesMeta:
-      '@swc-node/register':
-        optional: true
-      '@swc/core':
-        optional: true
-
-  nx@22.5.4:
-    resolution: {integrity: sha512-L8wL7uCjnmpyvq4r2mN9s+oriUE4lY+mX9VgOpjj0ucRd5nzaEaBQppVs0zQGkbKC0BnHS8PGtnAglspd5Gh1Q==}
+  nx@22.6.5:
+    resolution: {integrity: sha512-VRKhDAt684dXNSz9MNjE7MekkCfQF41P2PSx5jEWQjDEP1Z4jFZbyeygWs5ZyOroG7/n0MoWAJTe6ftvIcBOAg==}
     hasBin: true
     peerDependencies:
       '@swc-node/register': ^1.11.1
@@ -10479,8 +10486,13 @@ packages:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
 
-  partysocket@1.1.11:
-    resolution: {integrity: sha512-P0EtOQiAwvLriqLgdThcSaREfz3bP77LkLSdmXq680BosPKvGSoGTh/d0g3S+UNmaqcw89Ad7JXHHKyRx3xU9Q==}
+  partysocket@1.1.18:
+    resolution: {integrity: sha512-SyuvH9VavWOSa14v6dYdp3yfSUDII4BQB1+TkGOFBkjfZKjnDBiba4fhdhwBlqGBkqw4ea3gTA1DYhSffX24Wg==}
+    peerDependencies:
+      react: '>=17'
+    peerDependenciesMeta:
+      react:
+        optional: true
 
   pascal-case@3.1.2:
     resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
@@ -10514,8 +10526,8 @@ packages:
     resolution: {integrity: sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==}
     engines: {node: 18 || 20 || >=22}
 
-  path-to-regexp@0.2.5:
-    resolution: {integrity: sha512-l6qtdDPIkmAmzEO6egquYDfqQGPMRNGjYtrU13HAXb3YSRrt7HSb1sJY0pKp6o2bAa86tSB6iwaW2JbthPKr7Q==}
+  path-to-regexp@0.1.13:
+    resolution: {integrity: sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==}
 
   path-to-regexp@8.4.2:
     resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
@@ -10666,8 +10678,8 @@ packages:
     peerDependencies:
       postcss: ^8.4.6
 
-  postcss-color-functional-notation@8.0.2:
-    resolution: {integrity: sha512-tbmkk6teYpJzFcGwPIhN1gkvxqGHvNx2PMb8Y3S5Ktyn7xOlvD98XzQ99MFY5mAyvXWclDG+BgoJKYJXFJOp5Q==}
+  postcss-color-functional-notation@8.0.3:
+    resolution: {integrity: sha512-MyaFK+3PusD7F2+qlMDP6+zfSgHWP17AtmvHQs44W3+Qbb39VptVDVRJ4Lf7gHSVffW5ekEy/XrsZ0S0t34hrA==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -10802,8 +10814,8 @@ packages:
     peerDependencies:
       postcss: ^8.4.21
 
-  postcss-lab-function@8.0.2:
-    resolution: {integrity: sha512-1ZIAh8ODhZdnAb09Aq2BTenePKS1G/kUR0FwvzkQDfFtSOV64Ycv27YvV11fDycEvhIcEmgYkLABXKRiWcXRuA==}
+  postcss-lab-function@8.0.3:
+    resolution: {integrity: sha512-rUa27RLVXjMn1aDkHEt5dRsK80+bAACPr8w5Ow0BkIlfH6gEk0Mh1I0REkYhtp4UhKFw1HLEk3AzvKBi6BGOqw==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -10991,8 +11003,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  postcss-preset-env@11.2.0:
-    resolution: {integrity: sha512-eNYpuj68cjGjvZMoSAbHilaCt3yIyzBL1cVuSGJfvJewsaBW/U6dI2bqCJl3iuZsL+yvBobcy4zJFA/3I68IHQ==}
+  postcss-preset-env@11.2.1:
+    resolution: {integrity: sha512-dqL7WR5wg9yP/+6pTHIsIeIpK6XVghJDE4/r4ZSdr5ExrbLiN5x78gly0Xs0MLGbHy2oT3WWNfbxowmnw9BurQ==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -11066,8 +11078,8 @@ packages:
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss@8.5.8:
-    resolution: {integrity: sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==}
+  postcss@8.5.10:
+    resolution: {integrity: sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==}
     engines: {node: ^10 || ^12 || >=14}
 
   postgres-array@2.0.0:
@@ -11086,8 +11098,8 @@ packages:
     resolution: {integrity: sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==}
     engines: {node: '>=0.10.0'}
 
-  posthog-js@1.364.7:
-    resolution: {integrity: sha512-mjYUjim0PSNUjxbGR8MGl7hnbbJMCU+Dy4gRexMRGMRlZT9tskGzsgS4Q6Cvx+63lpkQg5kJrC4bHCuILnQ4/A==}
+  posthog-js@1.369.3:
+    resolution: {integrity: sha512-t4vk8mgkSdhIYr8YDRdLG45uJYH58MC7bPL83lKTEeDgoejyXbJ1/G77GZB/aWVQDST055GkgjQtUtK5DiYGkg==}
 
   postject@1.0.0-alpha.6:
     resolution: {integrity: sha512-b9Eb8h2eVqNE8edvKdwqkrY6O7kAwmI8kcnBv1NScolYJbo59XUF0noFq+lxbC1yN20bmC0WBEbDC5H/7ASb0A==}
@@ -11109,8 +11121,8 @@ packages:
     engines: {node: '>=10.13.0'}
     hasBin: true
 
-  prettier@3.8.1:
-    resolution: {integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==}
+  prettier@3.8.3:
+    resolution: {integrity: sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -11164,8 +11176,8 @@ packages:
   property-information@7.1.0:
     resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
 
-  protobufjs@7.5.4:
-    resolution: {integrity: sha512-CvexbZtbov6jW2eXAvLukXjXUW1TzFaivC46BpWc/3BpcCysb5Vffu+B3XHMm8lVEuy2Mm4XGex8hBSg1yapPg==}
+  protobufjs@7.5.5:
+    resolution: {integrity: sha512-3wY1AxV+VBNW8Yypfd1yQY9pXnqTAN+KwQxL8iYm3/BjKYMNg4i0owhEe26PWDOMaIrzeeF98Lqd5NGz4omiIg==}
     engines: {node: '>=12.0.0'}
 
   protocol-buffers-schema@3.6.1:
@@ -11178,6 +11190,10 @@ packages:
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
+  proxy-from-env@2.1.0:
+    resolution: {integrity: sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==}
+    engines: {node: '>=10'}
+
   public-encrypt@4.0.3:
     resolution: {integrity: sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==}
 
@@ -11298,10 +11314,10 @@ packages:
     resolution: {integrity: sha512-aEZ9qP+/M+58x2qgfSFEWH1BxLyHe5+qkLNJOZQb5iGS017jpbRnoKhNRrXPeA6RfBrZO5wZrT9DMC1UqE1f1w==}
     engines: {node: ^20.9.0 || >=22}
 
-  react-dom@19.2.4:
-    resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==}
+  react-dom@19.2.5:
+    resolution: {integrity: sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==}
     peerDependencies:
-      react: ^19.2.4
+      react: ^19.2.5
 
   react-focus-lock@2.13.7:
     resolution: {integrity: sha512-20lpZHEQrXPb+pp1tzd4ULL6DyO5D2KnR0G69tTDdydrmNhU7pdFmbQUYVyHUgp+xN29IuFR0PVuhOmvaZL9Og==}
@@ -11318,8 +11334,8 @@ packages:
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
-  react-is@19.2.4:
-    resolution: {integrity: sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==}
+  react-is@19.2.5:
+    resolution: {integrity: sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ==}
 
   react-merge-refs@3.0.2:
     resolution: {integrity: sha512-MSZAfwFfdbEvwkKWP5EI5chuLYnNUxNS7vyS0i1Jp+wtd8J4Ga2ddzhaE68aMol2Z4vCnRM/oGOo1a3V75UPlw==}
@@ -11389,14 +11405,14 @@ packages:
       react: '>=16.6.0'
       react-dom: '>=16.6.0'
 
-  react-virtuoso@4.18.1:
-    resolution: {integrity: sha512-KF474cDwaSb9+SJ380xruBB4P+yGWcVkcu26HtMqYNMTYlYbrNy8vqMkE+GpAApPPufJqgOLMoWMFG/3pJMXUA==}
+  react-virtuoso@4.18.5:
+    resolution: {integrity: sha512-QDyNjyNEuurZG67SOmzYyxEkQYSyGmAMixOI6M15L/Q4CF39EgG+88y6DgZRo0q7rmy0HPx3Fj90I8/tPdnRCQ==}
     peerDependencies:
       react: '>=16 || >=17 || >= 18 || >= 19'
       react-dom: '>=16 || >=17 || >= 18 || >=19'
 
-  react@19.2.4:
-    resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
+  react@19.2.5:
+    resolution: {integrity: sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==}
     engines: {node: '>=0.10.0'}
 
   read-binary-file-arch@1.0.6:
@@ -11563,8 +11579,8 @@ packages:
     resolution: {integrity: sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==}
     engines: {node: '>=10'}
 
-  resolve@1.22.11:
-    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
+  resolve@1.22.12:
+    resolution: {integrity: sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==}
     engines: {node: '>= 0.4'}
     hasBin: true
 
@@ -11627,11 +11643,16 @@ packages:
   robust-predicates@3.0.3:
     resolution: {integrity: sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==}
 
-  rolldown@1.0.0-rc.12:
-    resolution: {integrity: sha512-yP4USLIMYrwpPHEFB5JGH1uxhcslv6/hL0OyvTuY+3qlOSJvZ7ntYnoWpehBxufkgN0cvXxppuTu5hHa/zPh+A==}
+  rolldown@1.0.0-rc.16:
+    resolution: {integrity: sha512-rzi5WqKzEZw3SooTt7cgm4eqIoujPIyGcJNGFL7iPEuajQw7vxMHUkXylu4/vhCkJGXsgRmxqMKXUpT6FEgl0g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
+  rollup-plugin-external-globals@0.13.0:
+    resolution: {integrity: sha512-wBS3hmoF0OtEnA0lWsmTC6Nhnkk2zjZbfhaX2gLo8VnfNGFdGhiYKwMpIPQPrYbAw+mAYUYmoHYktAl1eZHgVw==}
+    peerDependencies:
+      rollup: ^2.25.0 || ^3.3.0 || ^4.1.4
+
   rollup@4.60.1:
     resolution: {integrity: sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -11681,11 +11702,11 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sanitize-filename@1.6.3:
-    resolution: {integrity: sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg==}
+  sanitize-filename@1.6.4:
+    resolution: {integrity: sha512-9ZyI08PsvdQl2r/bBIGubpVdR3RR9sY6RDiWFPreA21C/EFlQhmgo20UZlNjZMMZNubusLhAQozkA0Od5J21Eg==}
 
-  sanitize-html@2.17.2:
-    resolution: {integrity: sha512-EnffJUl46VE9uvZ0XeWzObHLurClLlT12gsOk1cHyP2Ol1P0BnBnsXmShlBmWVJM+dKieQI68R0tsPY5m/B+Jg==}
+  sanitize-html@2.17.3:
+    resolution: {integrity: sha512-Kn4srCAo2+wZyvCNKCSyB2g8RQ8IkX/gQs2uqoSRNu5t9I2qvUyAVvRDiFUVAiX3N3PNuwStY0eNr+ooBHVWEg==}
 
   sax@1.6.0:
     resolution: {integrity: sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==}
@@ -11734,11 +11755,6 @@ packages:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  semver@7.5.4:
-    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   semver@7.7.4:
     resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
     engines: {node: '>=10'}
@@ -12002,23 +12018,23 @@ packages:
   std-env@3.10.0:
     resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
 
-  std-env@4.0.0:
-    resolution: {integrity: sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ==}
+  std-env@4.1.0:
+    resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
 
   stop-iteration-iterator@1.1.0:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
 
-  storybook-addon-vis@3.1.2:
-    resolution: {integrity: sha512-eq+HQzjktd7L2onLPhYzC1j5k3j93ZbweQSN6PRvkrsUWSeUTcRNYEIq80zQlH6vcI88+hp/SoAB4FrteEYFRw==}
+  storybook-addon-vis@4.2.1:
+    resolution: {integrity: sha512-ayHdkg0/NyQ0RqznkD6vpYpjRBMZCWTmRaocTCWMS4mzaTFeCyA6c62U5HO1T9UYoW4ApTsUbDk0dPYHJDhrnA==}
     peerDependencies:
       '@storybook/addon-vitest': ^10.1.10
       '@vitest/browser': ^4
       storybook: ^10.1.10
       vitest: ^4
 
-  storybook@10.2.19:
-    resolution: {integrity: sha512-UUm5eGSm6BLhkcFP0WbxkmAHJZfVN2ViLpIZOqiIPS++q32VYn+CLFC0lrTYTDqYvaG7i4BK4uowXYujzE4NdQ==}
+  storybook@10.3.5:
+    resolution: {integrity: sha512-uBSZu/GZa9aEIW3QMGvdQPMZWhGxSe4dyRWU8B3/Vd47Gy/XLC7tsBxRr13txmmPOEDHZR94uLuq0H50fvuqBw==}
     hasBin: true
     peerDependencies:
       prettier: ^2 || ^3
@@ -12032,8 +12048,8 @@ packages:
   stream-http@3.2.0:
     resolution: {integrity: sha512-Oq1bLqisTyK3TSCXpPbT4sdeYNdmyZJv1LxpEm2vu1ZhK89kSE5YXwZc3cWk0MagGaKriBh9mCFbVGtO+vY29A==}
 
-  streamx@2.23.0:
-    resolution: {integrity: sha512-kn+e44esVfn2Fa/O0CPFcex27fjIL6MkVae0Mm6q+E6f0hWv578YCERbv+4m02cjxvDsPKLnmxral/rR6lBMAg==}
+  streamx@2.25.0:
+    resolution: {integrity: sha512-0nQuG6jf1w+wddNEEXCF4nTg3LtufWINB5eFEN+5TNZW7KWJp6x87+JFL43vaAUPyCfH1wID+mNVyW6OHtFamg==}
 
   string-argv@0.3.2:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
@@ -12169,8 +12185,8 @@ packages:
     peerDependencies:
       stylelint: '>=16'
 
-  stylelint@17.6.0:
-    resolution: {integrity: sha512-tokrsMIVAR9vAQ/q3UVEr7S0dGXCi7zkCezPRnS2kqPUulvUh5Vgfwngrk4EoAoW7wnrThqTdnTFN5Ra7CaxIg==}
+  stylelint@17.8.0:
+    resolution: {integrity: sha512-oHkld9T60LDSaUQ4CSVc+tlt9eUoDlxhaGWShsUCKyIL14boZfmK5bSphZqx64aiC5tCqX+BsQMTMoSz8D1zIg==}
     engines: {node: '>=20.19.0'}
     hasBin: true
 
@@ -12259,8 +12275,8 @@ packages:
   tar-fs@2.1.4:
     resolution: {integrity: sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==}
 
-  tar-fs@3.1.1:
-    resolution: {integrity: sha512-LZA0oaPOc2fVo82Txf3gw+AkEd38szODlptMYejQUhndHMLQ9M059uXR+AfS7DNo0NpINvSqDsvyaCrBVkptWg==}
+  tar-fs@3.1.2:
+    resolution: {integrity: sha512-QGxxTxxyleAdyM3kpFs14ymbYmNFrfY+pHj7Z8FgtbZ7w2//VAgLMac7sT6nRpIHjppXO2AwwEOg0bPFVRcmXw==}
 
   tar-js@0.3.0:
     resolution: {integrity: sha512-9uqP2hJUZNKRkwPDe5nXxXdzo6w+BFBPq9x/tyi5/U/DneuSesO/HMb0y5TeWpfcv49YDJTs7SrrZeeu8ZHWDA==}
@@ -12320,8 +12336,8 @@ packages:
     resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
     engines: {node: '>=8'}
 
-  testcontainers@11.12.0:
-    resolution: {integrity: sha512-VWtH+UQejVYYvb53ohEZRbx2naxyDvwO9lQ6A0VgmVE2Oh8r9EF09I+BfmrXpd9N9ntpzhao9di2yNwibSz5KA==}
+  testcontainers@11.14.0:
+    resolution: {integrity: sha512-r9pniwv/iwzyHaI7gwAvAm4Y+IvjJg3vBWdjrUCaDMc2AXIr4jKbq7jJO18Mw2ybs73pZy1Aj7p/4RVBGMRWjg==}
 
   text-decoder@1.2.7:
     resolution: {integrity: sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ==}
@@ -12359,12 +12375,12 @@ packages:
     resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
     engines: {node: '>=18'}
 
-  tinyexec@1.0.4:
-    resolution: {integrity: sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw==}
+  tinyexec@1.1.1:
+    resolution: {integrity: sha512-VKS/ZaQhhkKFMANmAOhhXVoIfBXblQxGX1myCQ2faQrfmobMftXeJPcZGp0gS07ocvGJWDLZGyOZDadDBqYIJg==}
     engines: {node: '>=18'}
 
-  tinyglobby@0.2.15:
-    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+  tinyglobby@0.2.16:
+    resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
     engines: {node: '>=12.0.0'}
 
   tinyqueue@3.0.0:
@@ -12537,8 +12553,10 @@ packages:
     resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
     engines: {node: '>= 0.6'}
 
-  type-plus@8.0.0-beta.7:
-    resolution: {integrity: sha512-LTV9UqBJ20I48Ba2L8N25EOowtrs40MLzsqQFfvAXnPAN9z0ny4CjduFfNIfW7euZ6wr6ImShEtrhR1virHiNw==}
+  type-plus@8.0.0-beta.8:
+    resolution: {integrity: sha512-egrpXQq2tV0abCf99+n4SCD/stT76qEwPBI1q7BqiVUe5pHWc+bm4vsOiNR84SmZTv4SoEl9UOZUdkEbS3POdw==}
+    peerDependencies:
+      typescript: '>= 5.6.0'
 
   typed-array-buffer@1.0.3:
     resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
@@ -12556,34 +12574,34 @@ packages:
     resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
     engines: {node: '>= 0.4'}
 
-  typedoc-plugin-markdown@4.10.0:
-    resolution: {integrity: sha512-psrg8Rtnv4HPWCsoxId+MzEN8TVK5jeKCnTbnGAbTBqcDapR9hM41bJT/9eAyKn9C2MDG9Qjh3MkltAYuLDoXg==}
+  typedoc-plugin-markdown@4.11.0:
+    resolution: {integrity: sha512-2iunh2ALyfyh204OF7h2u0kuQ84xB3jFZtFyUr01nThJkLvR8oGGSSDlyt2gyO4kXhvUxDcVbO0y43+qX+wFbw==}
     engines: {node: '>= 18'}
     peerDependencies:
       typedoc: 0.28.x
 
-  typedoc-plugin-missing-exports@4.1.2:
-    resolution: {integrity: sha512-WNoeWX9+8X3E3riuYPduilUTFefl1K+Z+5bmYqNeH5qcWjtnTRMbRzGdEQ4XXn1WEO4WCIlU0vf46Ca2y/mspg==}
+  typedoc-plugin-missing-exports@4.1.3:
+    resolution: {integrity: sha512-tgrlnwzXbqMP2/3BaZk0atddPsD7UnpCoeQ0cUCtk624gODT1bLYOLBEJLXQyVmbnP8HZCMhHpRiR+rxSdZqhg==}
     peerDependencies:
       typedoc: ^0.28.1
 
-  typedoc@0.28.17:
-    resolution: {integrity: sha512-ZkJ2G7mZrbxrKxinTQMjFqsCoYY6a5Luwv2GKbTnBCEgV2ihYm5CflA9JnJAwH0pZWavqfYxmDkFHPt4yx2oDQ==}
+  typedoc@0.28.19:
+    resolution: {integrity: sha512-wKh+lhdmMFivMlc6vRRcMGXeGEHGU2g8a2CkPTJjJlwRf1iXbimWIPcFolCqe4E0d/FRtGszpIrsp3WLpDB8Pw==}
     engines: {node: '>= 18', pnpm: '>= 10'}
     hasBin: true
     peerDependencies:
-      typescript: 5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x || 5.5.x || 5.6.x || 5.7.x || 5.8.x || 5.9.x
-
-  typescript@5.8.2:
-    resolution: {integrity: sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==}
-    engines: {node: '>=14.17'}
-    hasBin: true
+      typescript: 5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x || 5.5.x || 5.6.x || 5.7.x || 5.8.x || 5.9.x || 6.0.x
 
   typescript@5.9.3:
     resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
+  typescript@6.0.3:
+    resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
   ua-parser-js@1.0.40:
     resolution: {integrity: sha512-z6PJ8Lml+v3ichVojCiB8toQJBuwR42ySM4ezjXIqXK3M0HczmKQ3LF4rhU55PfD99KEEXQG6yb7iOMyvYuHew==}
     hasBin: true
@@ -12617,12 +12635,12 @@ packages:
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
-  undici@5.29.0:
-    resolution: {integrity: sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==}
-    engines: {node: '>=14.0'}
+  undici@6.25.0:
+    resolution: {integrity: sha512-ZgpWDC5gmNiuY9CnLVXEH8rl50xhRCuLNA97fAUnKi8RRuV4E6KG31pDTsLVUKnohJE0I3XDrTeEydAXRw47xg==}
+    engines: {node: '>=18.17'}
 
-  undici@7.24.7:
-    resolution: {integrity: sha512-H/nlJ/h0ggGC+uRL3ovD+G0i4bqhvsDOpbDv7At5eFLlj2b41L8QliGbnl2H7SnDiYhENphh1tQFJZf+MyfLsQ==}
+  undici@7.25.0:
+    resolution: {integrity: sha512-xXnp4kTyor2Zq+J1FfPI6Eq3ew5h6Vl0F/8d9XU5zZQf1tX9s2Su1/3PiMmUANFULpmksxkClamIZcaUqryHsQ==}
     engines: {node: '>=20.18.1'}
 
   unhomoglyph@1.0.6:
@@ -12671,8 +12689,8 @@ packages:
   unist-util-visit@5.1.0:
     resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
 
-  universal-user-agent@6.0.1:
-    resolution: {integrity: sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ==}
+  universal-user-agent@7.0.3:
+    resolution: {integrity: sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==}
 
   universalify@0.1.2:
     resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
@@ -12690,6 +12708,36 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
+  unplugin-dts@1.0.0-beta.6:
+    resolution: {integrity: sha512-+xbFv5aVFtLZFNBAKI4+kXmd2h+T42/AaP8Bsp0YP/je/uOTN94Ame2Xt3e9isZS+Z7/hrLCLbsVJh+saqFMfQ==}
+    peerDependencies:
+      '@microsoft/api-extractor': '>=7'
+      '@rspack/core': ^1
+      '@vue/language-core': ~3.0.1
+      esbuild: 0.27.4
+      rolldown: '*'
+      rollup: '>=3'
+      typescript: '>=4'
+      vite: '>=3'
+      webpack: ^4 || ^5
+    peerDependenciesMeta:
+      '@microsoft/api-extractor':
+        optional: true
+      '@rspack/core':
+        optional: true
+      '@vue/language-core':
+        optional: true
+      esbuild:
+        optional: true
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+
   unplugin@2.3.11:
     resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
     engines: {node: '>=18.12.0'}
@@ -12775,12 +12823,12 @@ packages:
     resolution: {integrity: sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==}
     hasBin: true
 
-  uuid@8.3.2:
-    resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
+  uuid@14.0.0:
+    resolution: {integrity: sha512-Qo+uWgilfSmAhXCMav1uYFynlQO7fMFiMVZsQqZRMIXp0O7rR7qjkj+cPvBHLgBqi960QCoo/PH2/6ZtVqKvrg==}
     hasBin: true
 
-  uuid@9.0.1:
-    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+  uuid@8.3.2:
+    resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
 
   v8-to-istanbul@9.3.0:
@@ -12814,15 +12862,6 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
-  vite-plugin-dts@4.5.4:
-    resolution: {integrity: sha512-d4sOM8M/8z7vRXHHq/ebbblfaxENjogAAekcfcDCCwAyvGqnPrc7f4NZbvItS+g4WTgerW0xDwSz5qz11JT3vg==}
-    peerDependencies:
-      typescript: '*'
-      vite: '*'
-    peerDependenciesMeta:
-      vite:
-        optional: true
-
   vite-plugin-node-polyfills@0.26.0:
     resolution: {integrity: sha512-BAe5YzJf368XGev02hDvioidx4uVH8dqEJlG73bjQSxM26/AQnGcKFomq9n3vGq5yqpSHKN4h1XQNxx9l98mBg==}
     peerDependencies:
@@ -12859,14 +12898,14 @@ packages:
       terser:
         optional: true
 
-  vite@8.0.5:
-    resolution: {integrity: sha512-nmu43Qvq9UopTRfMx2jOYW5l16pb3iDC1JH6yMuPkpVbzK0k+L7dfsEDH4jRgYFmsg0sTAqkojoZgzLMlwHsCQ==}
+  vite@8.0.9:
+    resolution: {integrity: sha512-t7g7GVRpMXjNpa67HaVWI/8BWtdVIQPCL2WoozXXA7LBGEFK4AkkKkHx2hAQf5x1GZSlcmEDPkVLSGahxnEEZw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
       '@types/node': 18.19.130
       '@vitejs/devtools': ^0.1.0
-      esbuild: ^0.27.0 || ^0.28.0
+      esbuild: 0.27.4
       jiti: '>=1.21.0'
       less: ^4.0.0
       sass: ^1.70.0
@@ -12875,7 +12914,7 @@ packages:
       sugarss: ^5.0.0
       terser: ^5.16.0
       tsx: ^4.8.1
-      yaml: 2.8.3
+      yaml: ^2.4.2
     peerDependenciesMeta:
       '@types/node':
         optional: true
@@ -12920,8 +12959,8 @@ packages:
       postcss:
         optional: true
 
-  vitest-plugin-vis@4.1.0:
-    resolution: {integrity: sha512-wEYILWeax3hMUNMLMJzZ0dwtasy/YKAZz5/pyqK+0tyETjNBhtdrWiRLZc6OktOMZJk2YPlpjSOB/qqldAlvMQ==}
+  vitest-plugin-vis@5.1.0:
+    resolution: {integrity: sha512-PItAJLSQOG050axiFx4oo75El08EQosvbBjsl6K5EXqwU7keW++f6cdN+CVHOPY8H/nCWl96WIWLVqY2M1vcqA==}
     peerDependencies:
       '@vitest/browser': ^4
       '@vitest/browser-playwright': ^4
@@ -12939,18 +12978,20 @@ packages:
     peerDependencies:
       vitest: '>=3'
 
-  vitest@4.1.2:
-    resolution: {integrity: sha512-xjR1dMTVHlFLh98JE3i/f/WePqJsah4A0FK9cc8Ehp9Udk0AZk6ccpIZhh1qJ/yxVWRZ+Q54ocnD8TXmkhspGg==}
+  vitest@4.1.5:
+    resolution: {integrity: sha512-9Xx1v3/ih3m9hN+SbfkUyy0JAs72ap3r7joc87XL6jwF0jGg6mFBvQ1SrwaX+h8BlkX6Hz9shdd1uo6AF+ZGpg==}
     engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@opentelemetry/api': ^1.9.0
       '@types/node': 18.19.130
-      '@vitest/browser-playwright': 4.1.2
-      '@vitest/browser-preview': 4.1.2
-      '@vitest/browser-webdriverio': 4.1.2
-      '@vitest/ui': 4.1.2
+      '@vitest/browser-playwright': 4.1.5
+      '@vitest/browser-preview': 4.1.5
+      '@vitest/browser-webdriverio': 4.1.5
+      '@vitest/coverage-istanbul': 4.1.5
+      '@vitest/coverage-v8': 4.1.5
+      '@vitest/ui': 4.1.5
       happy-dom: '*'
       jsdom: '*'
       vite: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -12967,6 +13008,10 @@ packages:
         optional: true
       '@vitest/browser-webdriverio':
         optional: true
+      '@vitest/coverage-istanbul':
+        optional: true
+      '@vitest/coverage-v8':
+        optional: true
       '@vitest/ui':
         optional: true
       happy-dom:
@@ -13009,8 +13054,8 @@ packages:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
 
-  wait-on@9.0.4:
-    resolution: {integrity: sha512-k8qrgfwrPVJXTeFY8tl6BxVHiclK11u72DVKhpybHfUL/K6KM4bdyK9EhIVYGytB5MJe/3lq4Tf0hrjM+pvJZQ==}
+  wait-on@9.0.5:
+    resolution: {integrity: sha512-qgnbHDfDTRIp73ANEJNRW/7kn8CrDUcvZz18xotJQku/P4saTGkbIzvnMZebPmVvVNUiRq1qWAPyqCH+W4H8KA==}
     engines: {node: '>=20.0.0'}
     hasBin: true
 
@@ -13113,8 +13158,8 @@ packages:
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
-  webpack@5.105.4:
-    resolution: {integrity: sha512-jTywjboN9aHxFlToqb0K0Zs9SbBoW4zRUlGzI2tYNxVYcEi/IPpn+Xi4ye5jTLvX2YeLuic/IvxNot+Q1jMoOw==}
+  webpack@5.106.2:
+    resolution: {integrity: sha512-wGN3qcrBQIFmQ/c0AiOAQBvrZ5lmY8vbbMv4Mxfgzqd/B6+9pXtLo73WuS1dSGXM5QYY3hZnIbvx+K1xxe6FyA==}
     engines: {node: '>=10.13.0'}
     hasBin: true
     peerDependencies:
@@ -13361,20 +13406,20 @@ snapshots:
 
   '@action-validator/core@0.6.0': {}
 
-  '@actions/github@6.0.1':
+  '@actions/github@8.0.1':
     dependencies:
-      '@actions/http-client': 2.2.3
-      '@octokit/core': 5.2.2
-      '@octokit/plugin-paginate-rest': 9.2.2(@octokit/core@5.2.2)
-      '@octokit/plugin-rest-endpoint-methods': 10.4.1(@octokit/core@5.2.2)
-      '@octokit/request': 8.4.1
-      '@octokit/request-error': 5.1.1
-      undici: 5.29.0
+      '@actions/http-client': 3.0.2
+      '@octokit/core': 7.0.6
+      '@octokit/plugin-paginate-rest': 14.0.0(@octokit/core@7.0.6)
+      '@octokit/plugin-rest-endpoint-methods': 17.0.0(@octokit/core@7.0.6)
+      '@octokit/request': 10.0.8
+      '@octokit/request-error': 7.1.0
+      undici: 6.25.0
 
-  '@actions/http-client@2.2.3':
+  '@actions/http-client@3.0.2':
     dependencies:
       tunnel: 0.0.6
-      undici: 5.29.0
+      undici: 6.25.0
 
   '@actions/io@1.1.3': {}
 
@@ -13495,7 +13540,7 @@ snapshots:
   '@antfu/install-pkg@1.1.0':
     dependencies:
       package-manager-detector: 1.6.0
-      tinyexec: 1.0.4
+      tinyexec: 1.1.1
 
   '@asamuzakjp/css-color@3.2.0':
     dependencies:
@@ -13505,9 +13550,9 @@ snapshots:
       '@csstools/css-tokenizer': 3.0.4
       lru-cache: 10.4.3
 
-  '@axe-core/playwright@4.11.1(playwright-core@1.59.1)':
+  '@axe-core/playwright@4.11.2(playwright-core@1.59.1)':
     dependencies:
-      axe-core: 4.11.1
+      axe-core: 4.11.3
       playwright-core: 1.59.1
 
   '@babel/code-frame@7.29.0':
@@ -13592,14 +13637,14 @@ snapshots:
       regexpu-core: 6.4.0
       semver: 6.3.1
 
-  '@babel/helper-define-polyfill-provider@0.6.6(@babel/core@7.29.0)':
+  '@babel/helper-define-polyfill-provider@0.6.8(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-compilation-targets': 7.28.6
       '@babel/helper-plugin-utils': 7.28.6
       debug: 4.4.3
       lodash.debounce: 4.0.8
-      resolve: 1.22.11
+      resolve: 1.22.12
     transitivePeerDependencies:
       - supports-color
 
@@ -14170,9 +14215,9 @@ snapshots:
       '@babel/core': 7.29.0
       '@babel/helper-module-imports': 7.28.6
       '@babel/helper-plugin-utils': 7.28.6
-      babel-plugin-polyfill-corejs2: 0.4.15(@babel/core@7.29.0)
+      babel-plugin-polyfill-corejs2: 0.4.17(@babel/core@7.29.0)
       babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.29.0)
-      babel-plugin-polyfill-regenerator: 0.6.6(@babel/core@7.29.0)
+      babel-plugin-polyfill-regenerator: 0.6.8(@babel/core@7.29.0)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
@@ -14239,7 +14284,7 @@ snapshots:
       '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.0)
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/preset-env@7.29.0(@babel/core@7.29.0)':
+  '@babel/preset-env@7.29.2(@babel/core@7.29.0)':
     dependencies:
       '@babel/compat-data': 7.29.0
       '@babel/core': 7.29.0
@@ -14307,10 +14352,10 @@ snapshots:
       '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.29.0)
       '@babel/plugin-transform-unicode-sets-regex': 7.28.6(@babel/core@7.29.0)
       '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.29.0)
-      babel-plugin-polyfill-corejs2: 0.4.15(@babel/core@7.29.0)
-      babel-plugin-polyfill-corejs3: 0.14.0(@babel/core@7.29.0)
-      babel-plugin-polyfill-regenerator: 0.6.6(@babel/core@7.29.0)
-      core-js-compat: 3.48.0
+      babel-plugin-polyfill-corejs2: 0.4.17(@babel/core@7.29.0)
+      babel-plugin-polyfill-corejs3: 0.14.2(@babel/core@7.29.0)
+      babel-plugin-polyfill-regenerator: 0.6.8(@babel/core@7.29.0)
+      core-js-compat: 3.49.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
@@ -14345,7 +14390,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/runtime@7.28.6': {}
+  '@babel/runtime@7.29.2': {}
 
   '@babel/template@7.28.6':
     dependencies:
@@ -14395,7 +14440,7 @@ snapshots:
       hashery: 1.5.1
       keyv: 5.6.0
 
-  '@casualbot/jest-sonar-reporter@2.5.0':
+  '@casualbot/jest-sonar-reporter@2.6.0':
     dependencies:
       mkdirp: 1.0.4
       uuid: 8.3.2
@@ -14430,7 +14475,7 @@ snapshots:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
 
-  '@csstools/css-calc@3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+  '@csstools/css-calc@3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
@@ -14442,10 +14487,10 @@ snapshots:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
 
-  '@csstools/css-color-parser@4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+  '@csstools/css-color-parser@4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/color-helpers': 6.0.2
-      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
 
@@ -14457,7 +14502,7 @@ snapshots:
     dependencies:
       '@csstools/css-tokenizer': 4.0.0
 
-  '@csstools/css-syntax-patches-for-csstree@1.1.2(css-tree@3.2.1)':
+  '@csstools/css-syntax-patches-for-csstree@1.1.3(css-tree@3.2.1)':
     optionalDependencies:
       css-tree: 3.2.1
 
@@ -14470,283 +14515,283 @@ snapshots:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
 
-  '@csstools/postcss-alpha-function@2.0.3(postcss@8.5.8)':
+  '@csstools/postcss-alpha-function@2.0.4(postcss@8.5.10)':
     dependencies:
-      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.8)
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.10)
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
 
-  '@csstools/postcss-cascade-layers@6.0.0(postcss@8.5.8)':
+  '@csstools/postcss-cascade-layers@6.0.0(postcss@8.5.10)':
     dependencies:
       '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.1)
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
-  '@csstools/postcss-color-function-display-p3-linear@2.0.2(postcss@8.5.8)':
+  '@csstools/postcss-color-function-display-p3-linear@2.0.3(postcss@8.5.10)':
     dependencies:
-      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.8)
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.10)
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
 
-  '@csstools/postcss-color-function@5.0.2(postcss@8.5.8)':
+  '@csstools/postcss-color-function@5.0.3(postcss@8.5.10)':
     dependencies:
-      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.8)
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.10)
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
 
-  '@csstools/postcss-color-mix-function@4.0.2(postcss@8.5.8)':
+  '@csstools/postcss-color-mix-function@4.0.3(postcss@8.5.10)':
     dependencies:
-      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.8)
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.10)
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
 
-  '@csstools/postcss-color-mix-variadic-function-arguments@2.0.2(postcss@8.5.8)':
+  '@csstools/postcss-color-mix-variadic-function-arguments@2.0.3(postcss@8.5.10)':
     dependencies:
-      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.8)
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.10)
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
 
-  '@csstools/postcss-content-alt-text@3.0.0(postcss@8.5.8)':
+  '@csstools/postcss-content-alt-text@3.0.0(postcss@8.5.10)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.8)
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.10)
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
 
-  '@csstools/postcss-contrast-color-function@3.0.2(postcss@8.5.8)':
+  '@csstools/postcss-contrast-color-function@3.0.3(postcss@8.5.10)':
     dependencies:
-      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.8)
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.10)
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
 
-  '@csstools/postcss-exponential-functions@3.0.1(postcss@8.5.8)':
+  '@csstools/postcss-exponential-functions@3.0.2(postcss@8.5.10)':
     dependencies:
-      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  '@csstools/postcss-font-format-keywords@5.0.0(postcss@8.5.8)':
+  '@csstools/postcss-font-format-keywords@5.0.0(postcss@8.5.10)':
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-font-width-property@1.0.0(postcss@8.5.8)':
+  '@csstools/postcss-font-width-property@1.0.0(postcss@8.5.10)':
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
 
-  '@csstools/postcss-gamut-mapping@3.0.2(postcss@8.5.8)':
+  '@csstools/postcss-gamut-mapping@3.0.3(postcss@8.5.10)':
     dependencies:
-      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  '@csstools/postcss-gradients-interpolation-method@6.0.2(postcss@8.5.8)':
+  '@csstools/postcss-gradients-interpolation-method@6.0.3(postcss@8.5.10)':
     dependencies:
-      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.8)
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.10)
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
 
-  '@csstools/postcss-hwb-function@5.0.2(postcss@8.5.8)':
+  '@csstools/postcss-hwb-function@5.0.3(postcss@8.5.10)':
     dependencies:
-      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.8)
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.10)
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
 
-  '@csstools/postcss-ic-unit@5.0.0(postcss@8.5.8)':
+  '@csstools/postcss-ic-unit@5.0.0(postcss@8.5.10)':
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.8)
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.10)
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-initial@3.0.0(postcss@8.5.8)':
+  '@csstools/postcss-initial@3.0.0(postcss@8.5.10)':
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  '@csstools/postcss-is-pseudo-class@6.0.0(postcss@8.5.8)':
+  '@csstools/postcss-is-pseudo-class@6.0.0(postcss@8.5.10)':
     dependencies:
       '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.1)
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
-  '@csstools/postcss-light-dark-function@3.0.0(postcss@8.5.8)':
+  '@csstools/postcss-light-dark-function@3.0.0(postcss@8.5.10)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.8)
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.10)
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
 
-  '@csstools/postcss-logical-float-and-clear@4.0.0(postcss@8.5.8)':
+  '@csstools/postcss-logical-float-and-clear@4.0.0(postcss@8.5.10)':
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  '@csstools/postcss-logical-overflow@3.0.0(postcss@8.5.8)':
+  '@csstools/postcss-logical-overflow@3.0.0(postcss@8.5.10)':
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  '@csstools/postcss-logical-overscroll-behavior@3.0.0(postcss@8.5.8)':
+  '@csstools/postcss-logical-overscroll-behavior@3.0.0(postcss@8.5.10)':
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  '@csstools/postcss-logical-resize@4.0.0(postcss@8.5.8)':
+  '@csstools/postcss-logical-resize@4.0.0(postcss@8.5.10)':
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-logical-viewport-units@4.0.0(postcss@8.5.8)':
+  '@csstools/postcss-logical-viewport-units@4.0.0(postcss@8.5.10)':
     dependencies:
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
 
-  '@csstools/postcss-media-minmax@3.0.1(postcss@8.5.8)':
+  '@csstools/postcss-media-minmax@3.0.2(postcss@8.5.10)':
     dependencies:
-      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
       '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  '@csstools/postcss-media-queries-aspect-ratio-number-values@4.0.0(postcss@8.5.8)':
+  '@csstools/postcss-media-queries-aspect-ratio-number-values@4.0.0(postcss@8.5.10)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
       '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  '@csstools/postcss-mixins@1.0.0(postcss@8.5.8)':
+  '@csstools/postcss-mixins@1.0.0(postcss@8.5.10)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  '@csstools/postcss-nested-calc@5.0.0(postcss@8.5.8)':
+  '@csstools/postcss-nested-calc@5.0.0(postcss@8.5.10)':
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-normalize-display-values@5.0.1(postcss@8.5.8)':
+  '@csstools/postcss-normalize-display-values@5.0.1(postcss@8.5.10)':
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-oklab-function@5.0.2(postcss@8.5.8)':
+  '@csstools/postcss-oklab-function@5.0.3(postcss@8.5.10)':
     dependencies:
-      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.8)
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.10)
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
 
-  '@csstools/postcss-position-area-property@2.0.0(postcss@8.5.8)':
+  '@csstools/postcss-position-area-property@2.0.0(postcss@8.5.10)':
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  '@csstools/postcss-progressive-custom-properties@5.0.0(postcss@8.5.8)':
+  '@csstools/postcss-progressive-custom-properties@5.0.0(postcss@8.5.10)':
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-property-rule-prelude-list@2.0.0(postcss@8.5.8)':
+  '@csstools/postcss-property-rule-prelude-list@2.0.0(postcss@8.5.10)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  '@csstools/postcss-random-function@3.0.1(postcss@8.5.8)':
+  '@csstools/postcss-random-function@3.0.2(postcss@8.5.10)':
     dependencies:
-      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  '@csstools/postcss-relative-color-syntax@4.0.2(postcss@8.5.8)':
+  '@csstools/postcss-relative-color-syntax@4.0.3(postcss@8.5.10)':
     dependencies:
-      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.8)
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.10)
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
 
-  '@csstools/postcss-scope-pseudo-class@5.0.0(postcss@8.5.8)':
+  '@csstools/postcss-scope-pseudo-class@5.0.0(postcss@8.5.10)':
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
-  '@csstools/postcss-sign-functions@2.0.1(postcss@8.5.8)':
+  '@csstools/postcss-sign-functions@2.0.2(postcss@8.5.10)':
     dependencies:
-      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  '@csstools/postcss-stepped-value-functions@5.0.1(postcss@8.5.8)':
+  '@csstools/postcss-stepped-value-functions@5.0.2(postcss@8.5.10)':
     dependencies:
-      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  '@csstools/postcss-syntax-descriptor-syntax-production@2.0.0(postcss@8.5.8)':
+  '@csstools/postcss-syntax-descriptor-syntax-production@2.0.0(postcss@8.5.10)':
     dependencies:
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  '@csstools/postcss-system-ui-font-family@2.0.0(postcss@8.5.8)':
+  '@csstools/postcss-system-ui-font-family@2.0.0(postcss@8.5.10)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  '@csstools/postcss-text-decoration-shorthand@5.0.3(postcss@8.5.8)':
+  '@csstools/postcss-text-decoration-shorthand@5.0.3(postcss@8.5.10)':
     dependencies:
       '@csstools/color-helpers': 6.0.2
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-trigonometric-functions@5.0.1(postcss@8.5.8)':
+  '@csstools/postcss-trigonometric-functions@5.0.2(postcss@8.5.10)':
     dependencies:
-      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  '@csstools/postcss-unset-value@5.0.0(postcss@8.5.8)':
+  '@csstools/postcss-unset-value@5.0.0(postcss@8.5.10)':
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
   '@csstools/selector-resolve-nested@4.0.0(postcss-selector-parser@7.1.1)':
     dependencies:
@@ -14756,9 +14801,9 @@ snapshots:
     dependencies:
       postcss-selector-parser: 7.1.1
 
-  '@csstools/utilities@3.0.0(postcss@8.5.8)':
+  '@csstools/utilities@3.0.0(postcss@8.5.10)':
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
   '@develar/schema-utils@2.6.5':
     dependencies:
@@ -14771,9 +14816,9 @@ snapshots:
 
   '@docsearch/css@3.8.2': {}
 
-  '@docsearch/js@3.8.2(@algolia/client-search@5.50.0)(@types/react@19.2.10)(react@19.2.4)(search-insights@2.17.3)':
+  '@docsearch/js@3.8.2(@algolia/client-search@5.50.0)(@types/react@19.2.14)(search-insights@2.17.3)':
     dependencies:
-      '@docsearch/react': 3.8.2(@algolia/client-search@5.50.0)(@types/react@19.2.10)(react@19.2.4)(search-insights@2.17.3)
+      '@docsearch/react': 3.8.2(@algolia/client-search@5.50.0)(@types/react@19.2.14)(search-insights@2.17.3)
       preact: 10.28.3
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -14782,15 +14827,14 @@ snapshots:
       - react-dom
       - search-insights
 
-  '@docsearch/react@3.8.2(@algolia/client-search@5.50.0)(@types/react@19.2.10)(react@19.2.4)(search-insights@2.17.3)':
+  '@docsearch/react@3.8.2(@algolia/client-search@5.50.0)(@types/react@19.2.14)(search-insights@2.17.3)':
     dependencies:
       '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.50.0)(algoliasearch@5.50.0)(search-insights@2.17.3)
       '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.50.0)(algoliasearch@5.50.0)
       '@docsearch/css': 3.8.2
       algoliasearch: 5.50.0
     optionalDependencies:
-      '@types/react': 19.2.10
-      react: 19.2.4
+      '@types/react': 19.2.14
       search-insights: 2.17.3
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -14801,12 +14845,11 @@ snapshots:
       glob: 7.2.3
       minimatch: 3.1.5
 
-  '@electron/asar@4.1.2':
+  '@electron/asar@4.2.0':
     dependencies:
       commander: 13.1.0
       glob: 13.0.6
       minimatch: 10.2.5
-      plist: 3.1.0(patch_hash=7a3c35087f0ab2a8efbac9e2899990f07d61e2b3e41d8d962ef0bdb0786e1af7)
 
   '@electron/fuses@1.8.0':
     dependencies:
@@ -14814,6 +14857,8 @@ snapshots:
       fs-extra: 9.1.0
       minimist: 1.2.8
 
+  '@electron/fuses@2.1.1': {}
+
   '@electron/get@2.0.3':
     dependencies:
       debug: 4.4.3
@@ -14868,7 +14913,7 @@ snapshots:
       detect-libc: 2.1.2
       got: 11.8.6
       graceful-fs: 4.2.11
-      node-abi: 4.27.0
+      node-abi: 4.28.0
       node-api-version: 0.2.1
       node-gyp: 11.5.0
       ora: 5.3.0
@@ -14885,7 +14930,7 @@ snapshots:
       '@malept/cross-spawn-promise': 2.0.0
       debug: 4.4.3
       dir-compare: 4.2.0
-      fs-extra: 11.3.3
+      fs-extra: 11.3.4
       minimatch: 9.0.9
       plist: 3.1.0(patch_hash=7a3c35087f0ab2a8efbac9e2899990f07d61e2b3e41d8d962ef0bdb0786e1af7)
     transitivePeerDependencies:
@@ -14895,56 +14940,36 @@ snapshots:
     dependencies:
       cross-dirname: 0.1.0
       debug: 4.4.3
-      fs-extra: 11.3.3
+      fs-extra: 11.3.4
       minimist: 1.2.8
       postject: 1.0.0-alpha.6
     transitivePeerDependencies:
       - supports-color
     optional: true
 
-  '@element-hq/element-call-embedded@0.18.0': {}
+  '@element-hq/element-call-embedded@0.19.1': {}
 
-  '@element-hq/element-web-module-api@1.12.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4)':
+  '@emnapi/core@1.10.0':
     dependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
-      react: 19.2.4
-    optionalDependencies:
-      '@matrix-org/react-sdk-module-api': 2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4)
-      matrix-web-i18n: 3.6.0
-
-  '@element-hq/element-web-playwright-common@2.4.0(@element-hq/element-web-module-api@1.12.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4))(@playwright/test@1.59.1)(playwright-core@1.59.1)':
-    dependencies:
-      '@axe-core/playwright': 4.11.1(playwright-core@1.59.1)
-      '@element-hq/element-web-module-api': 1.12.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4)
-      '@playwright/test': 1.59.1
-      '@testcontainers/postgresql': 11.11.0
-      glob: 13.0.6
-      lodash-es: 4.18.1
-      mailpit-api: 1.7.0
-      playwright-core: 1.59.1
-      strip-ansi: 7.2.0
-      testcontainers: 11.12.0
-      yaml: 2.8.3
-    transitivePeerDependencies:
-      - bare-abort-controller
-      - bare-buffer
-      - bufferutil
-      - debug
-      - react-native-b4a
-      - supports-color
-      - utf-8-validate
-
-  '@emnapi/core@1.8.1':
-    dependencies:
-      '@emnapi/wasi-threads': 1.1.0
+      '@emnapi/wasi-threads': 1.2.1
       tslib: 2.8.1
 
-  '@emnapi/runtime@1.8.1':
+  '@emnapi/core@1.9.2':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.10.0':
     dependencies:
       tslib: 2.8.1
 
-  '@emnapi/wasi-threads@1.1.0':
+  '@emnapi/runtime@1.9.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.2.1':
     dependencies:
       tslib: 2.8.1
 
@@ -15049,14 +15074,12 @@ snapshots:
 
   '@eslint/js@8.57.1': {}
 
-  '@fastify/busboy@2.1.1': {}
-
-  '@fastify/otel@0.16.0(@opentelemetry/api@1.9.0)':
+  '@fastify/otel@0.18.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.212.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
       minimatch: 10.2.5
     transitivePeerDependencies:
       - supports-color
@@ -15067,18 +15090,18 @@ snapshots:
       fetch-mock: 12.6.0
       jest: 30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0)
 
-  '@fetch-mock/vitest@0.2.18(vitest@4.1.2)':
+  '@fetch-mock/vitest@0.2.18(vitest@4.1.5)':
     dependencies:
       fetch-mock: 12.6.0
-      vitest: 4.1.2(@opentelemetry/api@1.9.0)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.2)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
 
   '@figspec/components@2.1.0': {}
 
-  '@figspec/react@2.0.1(@types/react@19.2.10)(react@19.2.4)':
+  '@figspec/react@2.0.1(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
       '@figspec/components': 2.1.0
-      '@lit-labs/react': 2.1.3(@types/react@19.2.10)
-      react: 19.2.4
+      '@lit-labs/react': 2.1.3(@types/react@19.2.14)
+      react: 19.2.5
     transitivePeerDependencies:
       - '@types/react'
 
@@ -15091,18 +15114,18 @@ snapshots:
       '@floating-ui/core': 1.7.4
       '@floating-ui/utils': 0.2.10
 
-  '@floating-ui/react-dom@2.1.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@floating-ui/react-dom@2.1.7(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@floating-ui/dom': 1.7.5
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
 
-  '@floating-ui/react@0.27.17(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@floating-ui/react@0.27.17(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@floating-ui/react-dom': 2.1.7(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@floating-ui/utils': 0.2.10
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
       tabbable: 6.4.0
 
   '@floating-ui/utils@0.2.10': {}
@@ -15113,24 +15136,15 @@ snapshots:
 
   '@fontsource/inter@5.2.8': {}
 
-  '@formatjs/bigdecimal@0.2.0': {}
+  '@formatjs/fast-memoize@3.1.2': {}
 
-  '@formatjs/ecma402-abstract@3.2.0':
+  '@formatjs/intl-localematcher@0.8.3':
     dependencies:
-      '@formatjs/bigdecimal': 0.2.0
-      '@formatjs/fast-memoize': 3.1.1
-      '@formatjs/intl-localematcher': 0.8.2
+      '@formatjs/fast-memoize': 3.1.2
 
-  '@formatjs/fast-memoize@3.1.1': {}
-
-  '@formatjs/intl-localematcher@0.8.2':
+  '@formatjs/intl-segmenter@12.2.2':
     dependencies:
-      '@formatjs/fast-memoize': 3.1.1
-
-  '@formatjs/intl-segmenter@12.2.1':
-    dependencies:
-      '@formatjs/ecma402-abstract': 3.2.0
-      '@formatjs/intl-localematcher': 0.8.2
+      '@formatjs/intl-localematcher': 0.8.3
 
   '@gar/promise-retry@1.0.3': {}
 
@@ -15151,14 +15165,14 @@ snapshots:
     dependencies:
       lodash.camelcase: 4.3.0
       long: 5.3.2
-      protobufjs: 7.5.4
+      protobufjs: 7.5.5
       yargs: 17.7.2
 
   '@grpc/proto-loader@0.8.0':
     dependencies:
       lodash.camelcase: 4.3.0
       long: 5.3.2
-      protobufjs: 7.5.4
+      protobufjs: 7.5.5
       yargs: 17.7.2
 
   '@hapi/address@5.1.1':
@@ -15171,7 +15185,7 @@ snapshots:
 
   '@hapi/pinpoint@2.0.1': {}
 
-  '@hapi/tlds@1.1.5': {}
+  '@hapi/tlds@1.1.6': {}
 
   '@hapi/topo@6.0.2':
     dependencies:
@@ -15222,7 +15236,7 @@ snapshots:
       js-yaml: 3.14.2
       resolve-from: 5.0.0
 
-  '@istanbuljs/schema@0.1.3': {}
+  '@istanbuljs/schema@0.1.6': {}
 
   '@jest/console@30.3.0':
     dependencies:
@@ -15412,13 +15426,13 @@ snapshots:
       '@types/yargs': 17.0.35
       chalk: 4.1.2
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.4(typescript@5.9.3)(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0(typescript@6.0.3)(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))':
     dependencies:
       glob: 13.0.6
-      react-docgen-typescript: 2.4.0(typescript@5.9.3)
-      vite: 8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      react-docgen-typescript: 2.4.0(typescript@6.0.3)
+      vite: 8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 6.0.3
 
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
@@ -15589,15 +15603,15 @@ snapshots:
 
   '@leichtgewicht/ip-codec@2.0.5': {}
 
-  '@lit-labs/react@2.1.3(@types/react@19.2.10)':
+  '@lit-labs/react@2.1.3(@types/react@19.2.14)':
     dependencies:
-      '@lit/react': 1.0.8(@types/react@19.2.10)
+      '@lit/react': 1.0.8(@types/react@19.2.14)
     transitivePeerDependencies:
       - '@types/react'
 
-  '@lit/react@1.0.8(@types/react@19.2.10)':
+  '@lit/react@1.0.8(@types/react@19.2.14)':
     dependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
   '@malept/cross-spawn-promise@2.0.0':
     dependencies:
@@ -15616,7 +15630,7 @@ snapshots:
 
   '@mapbox/point-geometry@1.1.0': {}
 
-  '@mapbox/tiny-sdf@2.0.7': {}
+  '@mapbox/tiny-sdf@2.1.0': {}
 
   '@mapbox/unitbezier@0.0.1': {}
 
@@ -15630,7 +15644,7 @@ snapshots:
 
   '@maplibre/geojson-vt@5.0.4': {}
 
-  '@maplibre/geojson-vt@6.0.4':
+  '@maplibre/geojson-vt@6.1.0':
     dependencies:
       kdbush: 4.0.2
 
@@ -15665,20 +15679,20 @@ snapshots:
       emojibase: 17.0.0
       emojibase-data: 17.0.0(emojibase@17.0.0)
 
-  '@matrix-org/matrix-sdk-crypto-wasm@18.0.0': {}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.1.0': {}
 
-  '@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4)':
+  '@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.5)':
     dependencies:
-      '@babel/runtime': 7.28.6
-      react: 19.2.4
+      '@babel/runtime': 7.29.2
+      react: 19.2.5
 
   '@matrix-org/spec@1.16.0': {}
 
-  '@mdx-js/react@3.1.1(@types/react@19.2.10)(react@19.2.4)':
+  '@mdx-js/react@3.1.1(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
       '@types/mdx': 2.0.13(patch_hash=c209882c533714d2dcbf4cf397002125ea83677ef152eff403386611cd0f0d3a)
-      '@types/react': 19.2.10
-      react: 19.2.4
+      '@types/react': 19.2.14
+      react: 19.2.5
 
   '@mermaid-js/mermaid-mindmap@9.3.0':
     dependencies:
@@ -15695,59 +15709,65 @@ snapshots:
     dependencies:
       langium: 4.2.2
 
-  '@microsoft/api-extractor-model@7.32.2(@types/node@18.19.130)':
+  '@microsoft/api-extractor-model@7.33.8(@types/node@18.19.130)':
     dependencies:
       '@microsoft/tsdoc': 0.16.0
-      '@microsoft/tsdoc-config': 0.18.0
-      '@rushstack/node-core-library': 5.19.1(@types/node@18.19.130)
+      '@microsoft/tsdoc-config': 0.18.1
+      '@rushstack/node-core-library': 5.23.1(@types/node@18.19.130)
     transitivePeerDependencies:
       - '@types/node'
 
-  '@microsoft/api-extractor@7.56.0(@types/node@18.19.130)':
+  '@microsoft/api-extractor@7.58.5(@types/node@18.19.130)':
     dependencies:
-      '@microsoft/api-extractor-model': 7.32.2(@types/node@18.19.130)
+      '@microsoft/api-extractor-model': 7.33.8(@types/node@18.19.130)
       '@microsoft/tsdoc': 0.16.0
-      '@microsoft/tsdoc-config': 0.18.0
-      '@rushstack/node-core-library': 5.19.1(@types/node@18.19.130)
-      '@rushstack/rig-package': 0.6.0
-      '@rushstack/terminal': 0.21.0(@types/node@18.19.130)
-      '@rushstack/ts-command-line': 5.1.7(@types/node@18.19.130)
-      diff: 8.0.3
-      lodash: 4.17.23
-      minimatch: 10.2.5
-      resolve: 1.22.11
-      semver: 7.5.4
+      '@microsoft/tsdoc-config': 0.18.1
+      '@rushstack/node-core-library': 5.23.1(@types/node@18.19.130)
+      '@rushstack/rig-package': 0.7.3
+      '@rushstack/terminal': 0.23.0(@types/node@18.19.130)
+      '@rushstack/ts-command-line': 5.3.8(@types/node@18.19.130)
+      diff: 8.0.4
+      minimatch: 10.2.3
+      resolve: 1.22.12
+      semver: 7.7.4
       source-map: 0.6.1
-      typescript: 5.8.2
+      typescript: 5.9.3
     transitivePeerDependencies:
       - '@types/node'
 
-  '@microsoft/tsdoc-config@0.18.0':
+  '@microsoft/tsdoc-config@0.18.1':
     dependencies:
       '@microsoft/tsdoc': 0.16.0
       ajv: 8.18.0
       jju: 1.4.0
-      resolve: 1.22.11
+      resolve: 1.22.12
 
   '@microsoft/tsdoc@0.16.0': {}
 
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
-      '@emnapi/core': 1.8.1
-      '@emnapi/runtime': 1.8.1
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
       '@tybys/wasm-util': 0.10.1
     optional: true
 
   '@napi-rs/wasm-runtime@0.2.4':
     dependencies:
-      '@emnapi/core': 1.8.1
-      '@emnapi/runtime': 1.8.1
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
       '@tybys/wasm-util': 0.9.0
 
-  '@napi-rs/wasm-runtime@1.1.2(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)':
+  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
-      '@emnapi/core': 1.8.1
-      '@emnapi/runtime': 1.8.1
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
+  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
+    dependencies:
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
       '@tybys/wasm-util': 0.10.1
     optional: true
 
@@ -15841,10 +15861,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@nx-tools/ci-context@7.2.1(@nx/devkit@22.5.3(nx@22.5.4))(tslib@2.8.1)':
+  '@nx-tools/ci-context@7.2.1(@nx/devkit@22.6.5(nx@22.6.5))(tslib@2.8.1)':
     dependencies:
-      '@actions/github': 6.0.1
-      '@nx-tools/core': 7.2.1(@nx/devkit@22.5.3(nx@22.5.4))(tslib@2.8.1)
+      '@actions/github': 8.0.1
+      '@nx-tools/core': 7.2.1(@nx/devkit@22.6.5(nx@22.6.5))(tslib@2.8.1)
       '@octokit/openapi-types': 22.2.0
       properties-file: 3.6.4
       std-env: 3.10.0
@@ -15852,11 +15872,11 @@ snapshots:
     transitivePeerDependencies:
       - '@nx/devkit'
 
-  '@nx-tools/container-metadata@7.2.1(@nx/devkit@22.5.3(nx@22.5.4))(tslib@2.8.1)':
+  '@nx-tools/container-metadata@7.2.1(@nx/devkit@22.6.5(nx@22.6.5))(tslib@2.8.1)':
     dependencies:
-      '@nx-tools/ci-context': 7.2.1(@nx/devkit@22.5.3(nx@22.5.4))(tslib@2.8.1)
-      '@nx-tools/core': 7.2.1(@nx/devkit@22.5.3(nx@22.5.4))(tslib@2.8.1)
-      '@nx/devkit': 22.5.3(nx@22.5.4)
+      '@nx-tools/ci-context': 7.2.1(@nx/devkit@22.6.5(nx@22.6.5))(tslib@2.8.1)
+      '@nx-tools/core': 7.2.1(@nx/devkit@22.6.5(nx@22.6.5))(tslib@2.8.1)
+      '@nx/devkit': 22.6.5(nx@22.6.5)
       '@renovatebot/pep440': 4.2.1
       csv-parse: 5.6.0
       handlebars: 4.7.9
@@ -15864,95 +15884,52 @@ snapshots:
       semver: 7.7.4
       tslib: 2.8.1
 
-  '@nx-tools/core@7.2.1(@nx/devkit@22.5.3(nx@22.5.4))(tslib@2.8.1)':
+  '@nx-tools/core@7.2.1(@nx/devkit@22.6.5(nx@22.6.5))(tslib@2.8.1)':
     dependencies:
       '@actions/io': 1.1.3
-      '@nx/devkit': 22.5.3(nx@22.5.4)
+      '@nx/devkit': 22.6.5(nx@22.6.5)
       csv-parse: 5.6.0
       std-env: 3.10.0
       tinyexec: 1.0.2
       tinyrainbow: 3.0.3
       tslib: 2.8.1
 
-  '@nx-tools/nx-container@7.2.1(@nx/devkit@22.5.3(nx@22.5.4))(@nx/js@22.5.3(@babel/traverse@7.29.0)(nx@22.5.4))(dotenv@17.4.0)(nx@22.5.4)(tslib@2.8.1)':
+  '@nx-tools/nx-container@7.2.1(@nx/devkit@22.6.5(nx@22.6.5))(@nx/js@22.6.5(@babel/traverse@7.29.0)(nx@22.6.5))(dotenv@17.4.2)(nx@22.6.5)(tslib@2.8.1)':
     dependencies:
-      '@nx-tools/container-metadata': 7.2.1(@nx/devkit@22.5.3(nx@22.5.4))(tslib@2.8.1)
-      '@nx-tools/core': 7.2.1(@nx/devkit@22.5.3(nx@22.5.4))(tslib@2.8.1)
-      '@nx/devkit': 22.5.3(nx@22.5.4)
-      '@nx/js': 22.5.3(@babel/traverse@7.29.0)(nx@22.5.4)
+      '@nx-tools/container-metadata': 7.2.1(@nx/devkit@22.6.5(nx@22.6.5))(tslib@2.8.1)
+      '@nx-tools/core': 7.2.1(@nx/devkit@22.6.5(nx@22.6.5))(tslib@2.8.1)
+      '@nx/devkit': 22.6.5(nx@22.6.5)
+      '@nx/js': 22.6.5(@babel/traverse@7.29.0)(nx@22.6.5)
       csv-parse: 5.6.0
-      dotenv: 17.4.0
+      dotenv: 17.4.2
       handlebars: 4.7.9
-      nx: 22.5.4
+      nx: 22.6.5
       semver: 7.7.4
       tmp: 0.2.5
       tslib: 2.8.1
 
-  '@nx/devkit@22.5.3(nx@22.5.3)':
+  '@nx/devkit@22.6.5(nx@22.6.5)':
     dependencies:
       '@zkochan/js-yaml': 0.0.7
-      ejs: 3.1.10
+      ejs: 5.0.1
       enquirer: 2.3.6
-      minimatch: 10.2.5
-      nx: 22.5.3
+      minimatch: 10.2.4
+      nx: 22.6.5
       semver: 7.7.4
       tslib: 2.8.1
       yargs-parser: 21.1.1
 
-  '@nx/devkit@22.5.3(nx@22.5.4)':
-    dependencies:
-      '@zkochan/js-yaml': 0.0.7
-      ejs: 3.1.10
-      enquirer: 2.3.6
-      minimatch: 10.2.5
-      nx: 22.5.4
-      semver: 7.7.4
-      tslib: 2.8.1
-      yargs-parser: 21.1.1
-
-  '@nx/jest@22.5.3(@babel/traverse@7.29.0)(@types/node@18.19.130)(babel-plugin-macros@3.1.0)(nx@22.5.4)(typescript@5.9.3)':
-    dependencies:
-      '@jest/reporters': 30.3.0
-      '@jest/test-result': 30.3.0
-      '@nx/devkit': 22.5.3(nx@22.5.4)
-      '@nx/js': 22.5.3(@babel/traverse@7.29.0)(nx@22.5.4)
-      '@phenomnomnominal/tsquery': 6.1.4(typescript@5.9.3)
-      identity-obj-proxy: 3.0.0
-      jest-config: 30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0)
-      jest-resolve: 30.3.0
-      jest-util: 30.3.0
-      minimatch: 10.2.5
-      picocolors: 1.1.1
-      resolve.exports: 2.0.3
-      semver: 7.7.4
-      tslib: 2.8.1
-      yargs-parser: 21.1.1
-    transitivePeerDependencies:
-      - '@babel/traverse'
-      - '@swc-node/register'
-      - '@swc/core'
-      - '@types/node'
-      - babel-plugin-macros
-      - debug
-      - esbuild-register
-      - node-notifier
-      - nx
-      - supports-color
-      - ts-node
-      - typescript
-      - verdaccio
-
-  '@nx/js@22.5.3(@babel/traverse@7.29.0)(nx@22.5.4)':
+  '@nx/js@22.6.5(@babel/traverse@7.29.0)(nx@22.6.5)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/plugin-proposal-decorators': 7.29.0(@babel/core@7.29.0)
       '@babel/plugin-transform-class-properties': 7.28.6(@babel/core@7.29.0)
       '@babel/plugin-transform-runtime': 7.29.0(@babel/core@7.29.0)
-      '@babel/preset-env': 7.29.0(@babel/core@7.29.0)
+      '@babel/preset-env': 7.29.2(@babel/core@7.29.0)
       '@babel/preset-typescript': 7.28.5(@babel/core@7.29.0)
-      '@babel/runtime': 7.28.6
-      '@nx/devkit': 22.5.3(nx@22.5.4)
-      '@nx/workspace': 22.5.3
+      '@babel/runtime': 7.29.2
+      '@nx/devkit': 22.6.5(nx@22.6.5)
+      '@nx/workspace': 22.6.5
       '@zkochan/js-yaml': 0.0.7
       babel-plugin-const-enum: 1.2.0(@babel/core@7.29.0)
       babel-plugin-macros: 3.1.0
@@ -15968,7 +15945,7 @@ snapshots:
       picomatch: 4.0.4
       semver: 7.7.4
       source-map-support: 0.5.19
-      tinyglobby: 0.2.15
+      tinyglobby: 0.2.16
       tslib: 2.8.1
     transitivePeerDependencies:
       - '@babel/traverse'
@@ -15978,73 +15955,43 @@ snapshots:
       - nx
       - supports-color
 
-  '@nx/nx-darwin-arm64@22.5.3':
+  '@nx/nx-darwin-arm64@22.6.5':
     optional: true
 
-  '@nx/nx-darwin-arm64@22.5.4':
+  '@nx/nx-darwin-x64@22.6.5':
     optional: true
 
-  '@nx/nx-darwin-x64@22.5.3':
+  '@nx/nx-freebsd-x64@22.6.5':
     optional: true
 
-  '@nx/nx-darwin-x64@22.5.4':
+  '@nx/nx-linux-arm-gnueabihf@22.6.5':
     optional: true
 
-  '@nx/nx-freebsd-x64@22.5.3':
+  '@nx/nx-linux-arm64-gnu@22.6.5':
     optional: true
 
-  '@nx/nx-freebsd-x64@22.5.4':
+  '@nx/nx-linux-arm64-musl@22.6.5':
     optional: true
 
-  '@nx/nx-linux-arm-gnueabihf@22.5.3':
+  '@nx/nx-linux-x64-gnu@22.6.5':
     optional: true
 
-  '@nx/nx-linux-arm-gnueabihf@22.5.4':
+  '@nx/nx-linux-x64-musl@22.6.5':
     optional: true
 
-  '@nx/nx-linux-arm64-gnu@22.5.3':
+  '@nx/nx-win32-arm64-msvc@22.6.5':
     optional: true
 
-  '@nx/nx-linux-arm64-gnu@22.5.4':
+  '@nx/nx-win32-x64-msvc@22.6.5':
     optional: true
 
-  '@nx/nx-linux-arm64-musl@22.5.3':
-    optional: true
-
-  '@nx/nx-linux-arm64-musl@22.5.4':
-    optional: true
-
-  '@nx/nx-linux-x64-gnu@22.5.3':
-    optional: true
-
-  '@nx/nx-linux-x64-gnu@22.5.4':
-    optional: true
-
-  '@nx/nx-linux-x64-musl@22.5.3':
-    optional: true
-
-  '@nx/nx-linux-x64-musl@22.5.4':
-    optional: true
-
-  '@nx/nx-win32-arm64-msvc@22.5.3':
-    optional: true
-
-  '@nx/nx-win32-arm64-msvc@22.5.4':
-    optional: true
-
-  '@nx/nx-win32-x64-msvc@22.5.3':
-    optional: true
-
-  '@nx/nx-win32-x64-msvc@22.5.4':
-    optional: true
-
-  '@nx/workspace@22.5.3':
+  '@nx/workspace@22.6.5':
     dependencies:
-      '@nx/devkit': 22.5.3(nx@22.5.3)
+      '@nx/devkit': 22.6.5(nx@22.6.5)
       '@zkochan/js-yaml': 0.0.7
       chalk: 4.1.2
       enquirer: 2.3.6
-      nx: 22.5.3
+      nx: 22.6.5
       picomatch: 4.0.4
       semver: 7.7.4
       tslib: 2.8.1
@@ -16054,390 +16001,388 @@ snapshots:
       - '@swc/core'
       - debug
 
-  '@octokit/auth-token@4.0.0': {}
+  '@octokit/auth-token@6.0.0': {}
 
-  '@octokit/core@5.2.2':
+  '@octokit/core@7.0.6':
     dependencies:
-      '@octokit/auth-token': 4.0.0
-      '@octokit/graphql': 7.1.1
-      '@octokit/request': 8.4.1
-      '@octokit/request-error': 5.1.1
-      '@octokit/types': 13.10.0
-      before-after-hook: 2.2.3
-      universal-user-agent: 6.0.1
+      '@octokit/auth-token': 6.0.0
+      '@octokit/graphql': 9.0.3
+      '@octokit/request': 10.0.8
+      '@octokit/request-error': 7.1.0
+      '@octokit/types': 16.0.0
+      before-after-hook: 4.0.0
+      universal-user-agent: 7.0.3
 
-  '@octokit/endpoint@9.0.6':
+  '@octokit/endpoint@11.0.3':
     dependencies:
-      '@octokit/types': 13.10.0
-      universal-user-agent: 6.0.1
+      '@octokit/types': 16.0.0
+      universal-user-agent: 7.0.3
 
-  '@octokit/graphql@7.1.1':
+  '@octokit/graphql@9.0.3':
     dependencies:
-      '@octokit/request': 8.4.1
-      '@octokit/types': 13.10.0
-      universal-user-agent: 6.0.1
-
-  '@octokit/openapi-types@20.0.0': {}
+      '@octokit/request': 10.0.8
+      '@octokit/types': 16.0.0
+      universal-user-agent: 7.0.3
 
   '@octokit/openapi-types@22.2.0': {}
 
-  '@octokit/openapi-types@24.2.0': {}
+  '@octokit/openapi-types@27.0.0': {}
 
-  '@octokit/plugin-paginate-rest@9.2.2(@octokit/core@5.2.2)':
+  '@octokit/plugin-paginate-rest@14.0.0(@octokit/core@7.0.6)':
     dependencies:
-      '@octokit/core': 5.2.2
-      '@octokit/types': 12.6.0
+      '@octokit/core': 7.0.6
+      '@octokit/types': 16.0.0
 
-  '@octokit/plugin-rest-endpoint-methods@10.4.1(@octokit/core@5.2.2)':
+  '@octokit/plugin-rest-endpoint-methods@17.0.0(@octokit/core@7.0.6)':
     dependencies:
-      '@octokit/core': 5.2.2
-      '@octokit/types': 12.6.0
+      '@octokit/core': 7.0.6
+      '@octokit/types': 16.0.0
 
-  '@octokit/request-error@5.1.1':
+  '@octokit/request-error@7.1.0':
     dependencies:
-      '@octokit/types': 13.10.0
-      deprecation: 2.3.1
-      once: 1.4.0
+      '@octokit/types': 16.0.0
 
-  '@octokit/request@8.4.1':
+  '@octokit/request@10.0.8':
     dependencies:
-      '@octokit/endpoint': 9.0.6
-      '@octokit/request-error': 5.1.1
-      '@octokit/types': 13.10.0
-      universal-user-agent: 6.0.1
+      '@octokit/endpoint': 11.0.3
+      '@octokit/request-error': 7.1.0
+      '@octokit/types': 16.0.0
+      fast-content-type-parse: 3.0.0
+      json-with-bigint: 3.5.8
+      universal-user-agent: 7.0.3
 
-  '@octokit/types@12.6.0':
+  '@octokit/types@16.0.0':
     dependencies:
-      '@octokit/openapi-types': 20.0.0
-
-  '@octokit/types@13.10.0':
-    dependencies:
-      '@octokit/openapi-types': 24.2.0
+      '@octokit/openapi-types': 27.0.0
 
   '@opentelemetry/api-logs@0.207.0':
     dependencies:
-      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api': 1.9.1
 
   '@opentelemetry/api-logs@0.208.0':
     dependencies:
-      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api': 1.9.1
 
-  '@opentelemetry/api-logs@0.211.0':
+  '@opentelemetry/api-logs@0.212.0':
     dependencies:
-      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api': 1.9.1
 
-  '@opentelemetry/api@1.9.0': {}
-
-  '@opentelemetry/context-async-hooks@2.6.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/api-logs@0.214.0':
     dependencies:
-      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api': 1.9.1
 
-  '@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/semantic-conventions': 1.39.0
+  '@opentelemetry/api@1.9.1': {}
 
-  '@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/context-async-hooks@2.7.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
 
-  '@opentelemetry/core@2.6.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/semantic-conventions': 1.40.0
 
-  '@opentelemetry/exporter-logs-otlp-http@0.208.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/core@2.6.1(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/semantic-conventions': 1.40.0
+
+  '@opentelemetry/core@2.7.0(@opentelemetry/api@1.9.1)':
+    dependencies:
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/semantic-conventions': 1.40.0
+
+  '@opentelemetry/exporter-logs-otlp-http@0.208.0(@opentelemetry/api@1.9.1)':
+    dependencies:
+      '@opentelemetry/api': 1.9.1
       '@opentelemetry/api-logs': 0.208.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/otlp-exporter-base': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/otlp-transformer': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-logs': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/otlp-exporter-base': 0.208.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/otlp-transformer': 0.208.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-logs': 0.208.0(@opentelemetry/api@1.9.1)
 
-  '@opentelemetry/instrumentation-amqplib@0.58.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-amqplib@0.61.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-connect@0.54.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-connect@0.57.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
       '@types/connect': 3.4.38
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-dataloader@0.28.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-dataloader@0.31.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-express@0.59.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-express@0.62.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-fs@0.30.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-fs@0.33.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-generic-pool@0.54.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-generic-pool@0.57.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-graphql@0.58.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-graphql@0.62.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-hapi@0.57.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-hapi@0.60.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-http@0.211.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-http@0.214.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.5.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
       forwarded-parse: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-ioredis@0.59.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-ioredis@0.62.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/redis-common': 0.38.2
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/redis-common': 0.38.3
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-kafkajs@0.20.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-kafkajs@0.23.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-knex@0.55.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-knex@0.58.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-koa@0.59.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-koa@0.62.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-lru-memoizer@0.55.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-lru-memoizer@0.58.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-mongodb@0.64.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-mongodb@0.67.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-mongoose@0.57.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-mongoose@0.60.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-mysql2@0.57.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-mysql2@0.60.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
-      '@opentelemetry/sql-common': 0.41.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      '@opentelemetry/sql-common': 0.41.2(@opentelemetry/api@1.9.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-mysql@0.57.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-mysql@0.60.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
       '@types/mysql': 2.15.27
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-pg@0.63.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-pg@0.66.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
-      '@opentelemetry/sql-common': 0.41.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      '@opentelemetry/sql-common': 0.41.2(@opentelemetry/api@1.9.1)
       '@types/pg': 8.15.6
       '@types/pg-pool': 2.0.7
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-redis@0.59.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-redis@0.62.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/redis-common': 0.38.2
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/redis-common': 0.38.3
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-tedious@0.30.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-tedious@0.33.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
       '@types/tedious': 4.0.14
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-undici@0.21.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-undici@0.24.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation@0.207.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation@0.207.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api': 1.9.1
       '@opentelemetry/api-logs': 0.207.0
       import-in-the-middle: 2.0.6
       require-in-the-middle: 8.0.1
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation@0.208.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation@0.212.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/api-logs': 0.208.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/api-logs': 0.212.0
       import-in-the-middle: 2.0.6
       require-in-the-middle: 8.0.1
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation@0.214.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/api-logs': 0.211.0
-      import-in-the-middle: 2.0.6
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/api-logs': 0.214.0
+      import-in-the-middle: 3.0.1
       require-in-the-middle: 8.0.1
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/otlp-exporter-base@0.208.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/otlp-exporter-base@0.208.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/otlp-transformer': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/otlp-transformer': 0.208.0(@opentelemetry/api@1.9.1)
 
-  '@opentelemetry/otlp-transformer@0.208.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/otlp-transformer@0.208.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api': 1.9.1
       '@opentelemetry/api-logs': 0.208.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-logs': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-metrics': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.2.0(@opentelemetry/api@1.9.0)
-      protobufjs: 7.5.4
+      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-logs': 0.208.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-metrics': 2.2.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-trace-base': 2.2.0(@opentelemetry/api@1.9.1)
+      protobufjs: 7.5.5
 
-  '@opentelemetry/redis-common@0.38.2': {}
+  '@opentelemetry/redis-common@0.38.3': {}
 
-  '@opentelemetry/resources@2.2.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/resources@2.2.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
 
-  '@opentelemetry/resources@2.6.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/resources@2.7.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
 
-  '@opentelemetry/sdk-logs@0.208.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/sdk-logs@0.208.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api': 1.9.1
       '@opentelemetry/api-logs': 0.208.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.1)
 
-  '@opentelemetry/sdk-metrics@2.2.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/sdk-metrics@2.2.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.1)
 
-  '@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
 
-  '@opentelemetry/sdk-trace-base@2.6.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/sdk-trace-base@2.7.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
 
-  '@opentelemetry/semantic-conventions@1.39.0': {}
+  '@opentelemetry/semantic-conventions@1.40.0': {}
 
-  '@opentelemetry/sql-common@0.41.2(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/sql-common@0.41.2(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.7.0(@opentelemetry/api@1.9.1)
 
   '@oxc-parser/binding-android-arm-eabi@0.121.0':
     optional: true
@@ -16487,9 +16432,9 @@ snapshots:
   '@oxc-parser/binding-openharmony-arm64@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-wasm32-wasi@0.121.0(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)':
+  '@oxc-parser/binding-wasm32-wasi@0.121.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.1.2(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     transitivePeerDependencies:
       - '@emnapi/core'
       - '@emnapi/runtime'
@@ -16506,7 +16451,7 @@ snapshots:
 
   '@oxc-project/types@0.121.0': {}
 
-  '@oxc-project/types@0.122.0': {}
+  '@oxc-project/types@0.126.0': {}
 
   '@oxc-resolver/binding-android-arm-eabi@11.19.1':
     optional: true
@@ -16556,9 +16501,9 @@ snapshots:
   '@oxc-resolver/binding-openharmony-arm64@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-wasm32-wasi@11.19.1(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)':
+  '@oxc-resolver/binding-wasm32-wasi@11.19.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.1.2(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     transitivePeerDependencies:
       - '@emnapi/core'
       - '@emnapi/runtime'
@@ -16675,12 +16620,6 @@ snapshots:
       tslib: 2.8.1
       tsyringe: 4.10.0
 
-  '@phenomnomnominal/tsquery@6.1.4(typescript@5.9.3)':
-    dependencies:
-      '@types/esquery': 1.5.4
-      esquery: 1.7.0
-      typescript: 5.9.3
-
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -16692,19 +16631,19 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
-  '@posthog/core@1.24.6': {}
+  '@posthog/core@1.25.2': {}
 
-  '@posthog/types@1.364.7': {}
+  '@posthog/types@1.369.3': {}
 
-  '@principalstudio/html-webpack-inject-preload@1.2.7(html-webpack-plugin@5.6.6(webpack@5.105.4))(webpack@5.105.4)':
+  '@principalstudio/html-webpack-inject-preload@1.2.7(html-webpack-plugin@5.6.7(webpack@5.106.2))(webpack@5.106.2)':
     dependencies:
-      html-webpack-plugin: 5.6.6(webpack@5.105.4)
-      webpack: 5.105.4(webpack-cli@7.0.2)
+      html-webpack-plugin: 5.6.7(webpack@5.106.2)
+      webpack: 5.106.2(webpack-cli@7.0.2)
 
-  '@prisma/instrumentation@7.2.0(@opentelemetry/api@1.9.0)':
+  '@prisma/instrumentation@7.6.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.207.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.207.0(@opentelemetry/api@1.9.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -16733,397 +16672,396 @@ snapshots:
 
   '@radix-ui/primitive@1.1.3': {}
 
-  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.10)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.10)(react@19.2.4)':
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
-      react: 19.2.4
+      react: 19.2.5
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-context-menu@2.2.16(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-context-menu@2.2.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.10)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-context@1.1.2(@types/react@19.2.10)(react@19.2.4)':
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
-      react: 19.2.4
+      react: 19.2.5
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-context@1.1.3(@types/react@19.2.10)(react@19.2.4)':
+  '@radix-ui/react-context@1.1.3(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
-      react: 19.2.4
+      react: 19.2.5
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.10)(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.5)
       aria-hidden: 1.2.6
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      react-remove-scroll: 2.7.2(@types/react@19.2.10)(react@19.2.4)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-direction@1.1.1(@types/react@19.2.10)(react@19.2.4)':
+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
-      react: 19.2.4
+      react: 19.2.5
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.10)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.10)(react@19.2.4)':
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
-      react: 19.2.4
+      react: 19.2.5
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-form@0.1.8(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-form@0.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-id@1.1.1(@types/react@19.2.10)(react@19.2.4)':
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      react: 19.2.4
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      react: 19.2.5
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-label@2.1.7(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-label@2.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.10)(react@19.2.4)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.5)
       aria-hidden: 1.2.6
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      react-remove-scroll: 2.7.2(@types/react@19.2.10)(react@19.2.4)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.10)(react@19.2.4)
+      '@floating-ui/react-dom': 2.1.7(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.5)
       '@radix-ui/rect': 1.1.1
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.10)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.10)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.14)(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-progress@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-progress@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
-      '@radix-ui/react-context': 1.1.3(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@radix-ui/react-context': 1.1.3(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.10)(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-separator@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@radix-ui/react-separator@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-slot@1.2.3(@types/react@19.2.10)(react@19.2.4)':
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      react: 19.2.4
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      react: 19.2.5
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-slot@1.2.4(@types/react@19.2.10)(react@19.2.4)':
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.10)(react@19.2.4)
-      react: 19.2.4
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.5)
+      react: 19.2.5
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.10)(react@19.2.4)':
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
-      react: 19.2.4
+      react: 19.2.5
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.10)(react@19.2.4)':
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.10)(react@19.2.4)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      react: 19.2.4
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.5)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      react: 19.2.5
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.10)(react@19.2.4)':
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      react: 19.2.4
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      react: 19.2.5
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.10)(react@19.2.4)':
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      react: 19.2.4
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      react: 19.2.5
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.10)(react@19.2.4)':
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
-      react: 19.2.4
+      react: 19.2.5
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.10)(react@19.2.4)':
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
       '@radix-ui/rect': 1.1.1
-      react: 19.2.4
+      react: 19.2.5
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.10)(react@19.2.4)':
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.10)(react@19.2.4)
-      react: 19.2.4
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.5)
+      react: 19.2.5
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
   '@radix-ui/rect@1.1.1': {}
 
   '@renovatebot/pep440@4.2.1': {}
 
-  '@rolldown/binding-android-arm64@1.0.0-rc.12':
+  '@rolldown/binding-android-arm64@1.0.0-rc.16':
     optional: true
 
-  '@rolldown/binding-darwin-arm64@1.0.0-rc.12':
+  '@rolldown/binding-darwin-arm64@1.0.0-rc.16':
     optional: true
 
-  '@rolldown/binding-darwin-x64@1.0.0-rc.12':
+  '@rolldown/binding-darwin-x64@1.0.0-rc.16':
     optional: true
 
-  '@rolldown/binding-freebsd-x64@1.0.0-rc.12':
+  '@rolldown/binding-freebsd-x64@1.0.0-rc.16':
     optional: true
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.12':
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.16':
     optional: true
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.12':
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.16':
     optional: true
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.12':
+  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.16':
     optional: true
 
-  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.12':
+  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.16':
     optional: true
 
-  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.12':
+  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.16':
     optional: true
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.12':
+  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.16':
     optional: true
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-rc.12':
+  '@rolldown/binding-linux-x64-musl@1.0.0-rc.16':
     optional: true
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-rc.12':
+  '@rolldown/binding-openharmony-arm64@1.0.0-rc.16':
     optional: true
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-rc.12(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)':
+  '@rolldown/binding-wasm32-wasi@1.0.0-rc.16':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.1.2(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
     optional: true
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.12':
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.16':
     optional: true
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.12':
+  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.16':
     optional: true
 
-  '@rolldown/pluginutils@1.0.0-rc.12': {}
+  '@rolldown/pluginutils@1.0.0-rc.16': {}
 
   '@rollup/plugin-inject@5.0.5(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))':
     dependencies:
@@ -17218,90 +17156,82 @@ snapshots:
 
   '@rtsao/scc@1.1.0': {}
 
-  '@rushstack/node-core-library@5.19.1(@types/node@18.19.130)':
+  '@rushstack/node-core-library@5.23.1(@types/node@18.19.130)':
     dependencies:
       ajv: 8.18.0
       ajv-draft-04: 1.0.0(ajv@8.18.0)
       ajv-formats: 3.0.1(ajv@8.18.0)
-      fs-extra: 11.3.3
+      fs-extra: 11.3.4
       import-lazy: 4.0.0
       jju: 1.4.0
-      resolve: 1.22.11
-      semver: 7.5.4
+      resolve: 1.22.12
+      semver: 7.7.4
     optionalDependencies:
       '@types/node': 18.19.130
 
-  '@rushstack/problem-matcher@0.1.1(@types/node@18.19.130)':
+  '@rushstack/problem-matcher@0.2.1(@types/node@18.19.130)':
     optionalDependencies:
       '@types/node': 18.19.130
 
-  '@rushstack/rig-package@0.6.0':
+  '@rushstack/rig-package@0.7.3':
     dependencies:
-      resolve: 1.22.11
-      strip-json-comments: 3.1.1
+      jju: 1.4.0
+      resolve: 1.22.12
 
-  '@rushstack/terminal@0.21.0(@types/node@18.19.130)':
+  '@rushstack/terminal@0.23.0(@types/node@18.19.130)':
     dependencies:
-      '@rushstack/node-core-library': 5.19.1(@types/node@18.19.130)
-      '@rushstack/problem-matcher': 0.1.1(@types/node@18.19.130)
+      '@rushstack/node-core-library': 5.23.1(@types/node@18.19.130)
+      '@rushstack/problem-matcher': 0.2.1(@types/node@18.19.130)
       supports-color: 8.1.1
     optionalDependencies:
       '@types/node': 18.19.130
 
-  '@rushstack/ts-command-line@5.1.7(@types/node@18.19.130)':
+  '@rushstack/ts-command-line@5.3.8(@types/node@18.19.130)':
     dependencies:
-      '@rushstack/terminal': 0.21.0(@types/node@18.19.130)
+      '@rushstack/terminal': 0.23.0(@types/node@18.19.130)
       '@types/argparse': 1.0.38
       argparse: 1.0.10
       string-argv: 0.3.2
     transitivePeerDependencies:
       - '@types/node'
 
-  '@sentry-internal/browser-utils@10.42.0':
-    dependencies:
-      '@sentry/core': 10.42.0
-
   '@sentry-internal/browser-utils@10.47.0':
     dependencies:
       '@sentry/core': 10.47.0
 
-  '@sentry-internal/feedback@10.42.0':
+  '@sentry-internal/browser-utils@10.49.0':
     dependencies:
-      '@sentry/core': 10.42.0
+      '@sentry/core': 10.49.0
 
   '@sentry-internal/feedback@10.47.0':
     dependencies:
       '@sentry/core': 10.47.0
 
-  '@sentry-internal/replay-canvas@10.42.0':
+  '@sentry-internal/feedback@10.49.0':
     dependencies:
-      '@sentry-internal/replay': 10.42.0
-      '@sentry/core': 10.42.0
+      '@sentry/core': 10.49.0
 
   '@sentry-internal/replay-canvas@10.47.0':
     dependencies:
       '@sentry-internal/replay': 10.47.0
       '@sentry/core': 10.47.0
 
-  '@sentry-internal/replay@10.42.0':
+  '@sentry-internal/replay-canvas@10.49.0':
     dependencies:
-      '@sentry-internal/browser-utils': 10.42.0
-      '@sentry/core': 10.42.0
+      '@sentry-internal/replay': 10.49.0
+      '@sentry/core': 10.49.0
 
   '@sentry-internal/replay@10.47.0':
     dependencies:
       '@sentry-internal/browser-utils': 10.47.0
       '@sentry/core': 10.47.0
 
-  '@sentry/babel-plugin-component-annotate@5.1.1': {}
-
-  '@sentry/browser@10.42.0':
+  '@sentry-internal/replay@10.49.0':
     dependencies:
-      '@sentry-internal/browser-utils': 10.42.0
-      '@sentry-internal/feedback': 10.42.0
-      '@sentry-internal/replay': 10.42.0
-      '@sentry-internal/replay-canvas': 10.42.0
-      '@sentry/core': 10.42.0
+      '@sentry-internal/browser-utils': 10.49.0
+      '@sentry/core': 10.49.0
+
+  '@sentry/babel-plugin-component-annotate@5.2.0': {}
 
   '@sentry/browser@10.47.0':
     dependencies:
@@ -17311,10 +17241,18 @@ snapshots:
       '@sentry-internal/replay-canvas': 10.47.0
       '@sentry/core': 10.47.0
 
-  '@sentry/bundler-plugin-core@5.1.1(encoding@0.1.13)':
+  '@sentry/browser@10.49.0':
+    dependencies:
+      '@sentry-internal/browser-utils': 10.49.0
+      '@sentry-internal/feedback': 10.49.0
+      '@sentry-internal/replay': 10.49.0
+      '@sentry-internal/replay-canvas': 10.49.0
+      '@sentry/core': 10.49.0
+
+  '@sentry/bundler-plugin-core@5.2.0(encoding@0.1.13)':
     dependencies:
       '@babel/core': 7.29.0
-      '@sentry/babel-plugin-component-annotate': 5.1.1
+      '@sentry/babel-plugin-component-annotate': 5.2.0
       '@sentry/cli': 2.58.5(encoding@0.1.13)
       dotenv: 16.6.1
       find-up: 5.0.0
@@ -17368,86 +17306,87 @@ snapshots:
       - encoding
       - supports-color
 
-  '@sentry/core@10.42.0': {}
-
   '@sentry/core@10.47.0': {}
 
-  '@sentry/electron@7.10.0':
+  '@sentry/core@10.49.0': {}
+
+  '@sentry/electron@7.11.0':
     dependencies:
-      '@sentry/browser': 10.42.0
-      '@sentry/core': 10.42.0
-      '@sentry/node': 10.42.0
+      '@sentry/browser': 10.47.0
+      '@sentry/core': 10.47.0
+      '@sentry/node': 10.47.0
     transitivePeerDependencies:
+      - '@opentelemetry/exporter-trace-otlp-http'
       - supports-color
 
-  '@sentry/node-core@10.42.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)':
+  '@sentry/node-core@10.47.0(@opentelemetry/api@1.9.1)(@opentelemetry/context-async-hooks@2.7.0(@opentelemetry/api@1.9.1))(@opentelemetry/core@2.7.0(@opentelemetry/api@1.9.1))(@opentelemetry/instrumentation@0.214.0(@opentelemetry/api@1.9.1))(@opentelemetry/resources@2.7.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.7.0(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.40.0)':
     dependencies:
-      '@sentry/core': 10.42.0
-      '@sentry/opentelemetry': 10.42.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)
-      import-in-the-middle: 2.0.6
+      '@sentry/core': 10.47.0
+      '@sentry/opentelemetry': 10.47.0(@opentelemetry/api@1.9.1)(@opentelemetry/context-async-hooks@2.7.0(@opentelemetry/api@1.9.1))(@opentelemetry/core@2.7.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.7.0(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.40.0)
+      import-in-the-middle: 3.0.1
     optionalDependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/context-async-hooks': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/context-async-hooks': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/core': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-trace-base': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
 
-  '@sentry/node@10.42.0':
+  '@sentry/node@10.47.0':
     dependencies:
-      '@fastify/otel': 0.16.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/context-async-hooks': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-amqplib': 0.58.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-connect': 0.54.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-dataloader': 0.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-express': 0.59.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-fs': 0.30.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-generic-pool': 0.54.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-graphql': 0.58.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-hapi': 0.57.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-http': 0.211.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-ioredis': 0.59.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-kafkajs': 0.20.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-knex': 0.55.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-koa': 0.59.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-lru-memoizer': 0.55.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mongodb': 0.64.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mongoose': 0.57.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mysql': 0.57.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mysql2': 0.57.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-pg': 0.63.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-redis': 0.59.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-tedious': 0.30.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-undici': 0.21.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
-      '@prisma/instrumentation': 7.2.0(@opentelemetry/api@1.9.0)
-      '@sentry/core': 10.42.0
-      '@sentry/node-core': 10.42.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)
-      '@sentry/opentelemetry': 10.42.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)
-      import-in-the-middle: 2.0.6
+      '@fastify/otel': 0.18.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/context-async-hooks': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/core': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-amqplib': 0.61.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-connect': 0.57.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-dataloader': 0.31.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-express': 0.62.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-fs': 0.33.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-generic-pool': 0.57.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-graphql': 0.62.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-hapi': 0.60.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-http': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-ioredis': 0.62.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-kafkajs': 0.23.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-knex': 0.58.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-koa': 0.62.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-lru-memoizer': 0.58.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-mongodb': 0.67.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-mongoose': 0.60.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-mysql': 0.60.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-mysql2': 0.60.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-pg': 0.66.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-redis': 0.62.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-tedious': 0.33.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-undici': 0.24.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-trace-base': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      '@prisma/instrumentation': 7.6.0(@opentelemetry/api@1.9.1)
+      '@sentry/core': 10.47.0
+      '@sentry/node-core': 10.47.0(@opentelemetry/api@1.9.1)(@opentelemetry/context-async-hooks@2.7.0(@opentelemetry/api@1.9.1))(@opentelemetry/core@2.7.0(@opentelemetry/api@1.9.1))(@opentelemetry/instrumentation@0.214.0(@opentelemetry/api@1.9.1))(@opentelemetry/resources@2.7.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.7.0(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.40.0)
+      '@sentry/opentelemetry': 10.47.0(@opentelemetry/api@1.9.1)(@opentelemetry/context-async-hooks@2.7.0(@opentelemetry/api@1.9.1))(@opentelemetry/core@2.7.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.7.0(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.40.0)
+      import-in-the-middle: 3.0.1
     transitivePeerDependencies:
+      - '@opentelemetry/exporter-trace-otlp-http'
       - supports-color
 
-  '@sentry/opentelemetry@10.42.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.6.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)':
+  '@sentry/opentelemetry@10.47.0(@opentelemetry/api@1.9.1)(@opentelemetry/context-async-hooks@2.7.0(@opentelemetry/api@1.9.1))(@opentelemetry/core@2.7.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.7.0(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.40.0)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/context-async-hooks': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.39.0
-      '@sentry/core': 10.42.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/context-async-hooks': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/core': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-trace-base': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      '@sentry/core': 10.47.0
 
-  '@sentry/webpack-plugin@5.1.1(encoding@0.1.13)(webpack@5.105.4)':
+  '@sentry/webpack-plugin@5.2.0(encoding@0.1.13)(webpack@5.106.2)':
     dependencies:
-      '@sentry/bundler-plugin-core': 5.1.1(encoding@0.1.13)
-      uuid: 9.0.1
-      webpack: 5.105.4(webpack-cli@7.0.2)
+      '@sentry/bundler-plugin-core': 5.2.0(encoding@0.1.13)
+      webpack: 5.106.2(webpack-cli@7.0.2)
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -17558,32 +17497,32 @@ snapshots:
 
   '@standard-schema/spec@1.1.0': {}
 
-  '@storybook/addon-a11y@10.2.19(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))':
+  '@storybook/addon-a11y@10.3.5(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))':
     dependencies:
       '@storybook/global': 5.0.0
-      axe-core: 4.11.1
-      storybook: 10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      axe-core: 4.11.3
+      storybook: 10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
 
-  '@storybook/addon-designs@11.1.2(@storybook/addon-docs@10.2.19(@types/react@19.2.10)(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(esbuild@0.27.4)))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))':
+  '@storybook/addon-designs@11.1.3(@storybook/addon-docs@10.3.5(@types/react@19.2.14)(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.106.2(esbuild@0.27.4)))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))':
     dependencies:
-      '@figspec/react': 2.0.1(@types/react@19.2.10)(react@19.2.4)
-      storybook: 10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@figspec/react': 2.0.1(@types/react@19.2.14)(react@19.2.5)
+      storybook: 10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
     optionalDependencies:
-      '@storybook/addon-docs': 10.2.19(@types/react@19.2.10)(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(esbuild@0.27.4))
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@storybook/addon-docs': 10.3.5(@types/react@19.2.14)(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.106.2(esbuild@0.27.4))
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-docs@10.2.19(@types/react@19.2.10)(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(esbuild@0.27.4))':
+  '@storybook/addon-docs@10.3.5(@types/react@19.2.14)(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.106.2(esbuild@0.27.4))':
     dependencies:
-      '@mdx-js/react': 3.1.1(@types/react@19.2.10)(react@19.2.4)
-      '@storybook/csf-plugin': 10.2.19(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(esbuild@0.27.4))
-      '@storybook/icons': 2.0.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@storybook/react-dom-shim': 10.2.19(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      storybook: 10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@mdx-js/react': 3.1.1(@types/react@19.2.14)(react@19.2.5)
+      '@storybook/csf-plugin': 10.3.5(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.106.2(esbuild@0.27.4))
+      '@storybook/icons': 2.0.1(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@storybook/react-dom-shim': 10.3.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+      storybook: 10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
@@ -17592,69 +17531,69 @@ snapshots:
       - vite
       - webpack
 
-  '@storybook/addon-vitest@10.2.19(@vitest/browser-playwright@4.1.2)(@vitest/browser@4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2))(@vitest/runner@4.1.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vitest@4.1.2)':
+  '@storybook/addon-vitest@10.3.5(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(@vitest/runner@4.1.5)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vitest@4.1.5)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/icons': 2.0.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      storybook: 10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@storybook/icons': 2.0.1(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      storybook: 10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
     optionalDependencies:
-      '@vitest/browser': 4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2)
-      '@vitest/browser-playwright': 4.1.2(playwright@1.59.1)(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2)
-      '@vitest/runner': 4.1.2
-      vitest: 4.1.2(@opentelemetry/api@1.9.0)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.2)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      '@vitest/browser': 4.1.5(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.5)
+      '@vitest/browser-playwright': 4.1.5(playwright@1.59.1)(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.5)
+      '@vitest/runner': 4.1.5
+      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
     transitivePeerDependencies:
       - react
       - react-dom
 
-  '@storybook/builder-vite@10.2.19(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(esbuild@0.27.4))':
+  '@storybook/builder-vite@10.3.5(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.106.2(esbuild@0.27.4))':
     dependencies:
-      '@storybook/csf-plugin': 10.2.19(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(esbuild@0.27.4))
-      storybook: 10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@storybook/csf-plugin': 10.3.5(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.106.2(esbuild@0.27.4))
+      storybook: 10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       ts-dedent: 2.2.0
-      vite: 8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vite: 8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
     transitivePeerDependencies:
       - esbuild
       - rollup
       - webpack
 
-  '@storybook/csf-plugin@10.2.19(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(esbuild@0.27.4))':
+  '@storybook/csf-plugin@10.3.5(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.106.2(esbuild@0.27.4))':
     dependencies:
-      storybook: 10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      storybook: 10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       unplugin: 2.3.11
     optionalDependencies:
       esbuild: 0.27.4
       rollup: 4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8)
-      vite: 8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
-      webpack: 5.105.4(esbuild@0.27.4)
+      vite: 8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      webpack: 5.106.2(esbuild@0.27.4)
 
   '@storybook/global@5.0.0': {}
 
-  '@storybook/icons@2.0.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@storybook/icons@2.0.1(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
 
-  '@storybook/react-dom-shim@10.2.19(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))':
+  '@storybook/react-dom-shim@10.3.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))':
     dependencies:
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      storybook: 10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+      storybook: 10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
 
-  '@storybook/react-vite@10.2.19(esbuild@0.27.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(esbuild@0.27.4))':
+  '@storybook/react-vite@10.3.5(esbuild@0.27.4)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.3)(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.106.2(esbuild@0.27.4))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.4(typescript@5.9.3)(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(typescript@6.0.3)(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
       '@rollup/pluginutils': 5.3.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))
-      '@storybook/builder-vite': 10.2.19(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(esbuild@0.27.4))
-      '@storybook/react': 10.2.19(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+      '@storybook/builder-vite': 10.3.5(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.106.2(esbuild@0.27.4))
+      '@storybook/react': 10.3.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.3)
       empathic: 2.0.0
       magic-string: 0.30.21
-      react: 19.2.4
+      react: 19.2.5
       react-docgen: 8.0.3
-      react-dom: 19.2.4(react@19.2.4)
-      resolve: 1.22.11
-      storybook: 10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react-dom: 19.2.5(react@19.2.5)
+      resolve: 1.22.12
+      storybook: 10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       tsconfig-paths: 4.2.0
-      vite: 8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vite: 8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -17662,23 +17601,24 @@ snapshots:
       - typescript
       - webpack
 
-  '@storybook/react@10.2.19(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)':
+  '@storybook/react@10.3.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.3)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 10.2.19(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
-      react: 19.2.4
+      '@storybook/react-dom-shim': 10.3.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
+      react: 19.2.5
       react-docgen: 8.0.3
-      react-dom: 19.2.4(react@19.2.4)
-      storybook: 10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react-docgen-typescript: 2.4.0(typescript@6.0.3)
+      react-dom: 19.2.5(react@19.2.5)
+      storybook: 10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
-  '@stylistic/eslint-plugin@5.9.0(eslint@8.57.1)':
+  '@stylistic/eslint-plugin@5.10.0(eslint@8.57.1)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
-      '@typescript-eslint/types': 8.58.0
+      '@typescript-eslint/types': 8.59.0
       eslint: 8.57.1
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
@@ -17729,12 +17669,12 @@ snapshots:
       '@svgr/babel-plugin-transform-react-native-svg': 8.1.0(@babel/core@7.29.0)
       '@svgr/babel-plugin-transform-svg-component': 8.0.0(@babel/core@7.29.0)
 
-  '@svgr/core@8.1.0(typescript@5.9.3)':
+  '@svgr/core@8.1.0(typescript@6.0.3)':
     dependencies:
       '@babel/core': 7.29.0
       '@svgr/babel-preset': 8.1.0(@babel/core@7.29.0)
       camelcase: 6.3.0
-      cosmiconfig: 8.3.6(typescript@5.9.3)
+      cosmiconfig: 8.3.6(typescript@6.0.3)
       snake-case: 3.0.4
     transitivePeerDependencies:
       - supports-color
@@ -17745,35 +17685,35 @@ snapshots:
       '@babel/types': 7.29.0
       entities: 4.5.0
 
-  '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0(typescript@5.9.3))':
+  '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0(typescript@6.0.3))':
     dependencies:
       '@babel/core': 7.29.0
       '@svgr/babel-preset': 8.1.0(@babel/core@7.29.0)
-      '@svgr/core': 8.1.0(typescript@5.9.3)
+      '@svgr/core': 8.1.0(typescript@6.0.3)
       '@svgr/hast-util-to-babel-ast': 8.0.0
       svg-parser: 2.0.4
     transitivePeerDependencies:
       - supports-color
 
-  '@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0(typescript@5.9.3))(typescript@5.9.3)':
+  '@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0(typescript@6.0.3))(typescript@6.0.3)':
     dependencies:
-      '@svgr/core': 8.1.0(typescript@5.9.3)
-      cosmiconfig: 8.3.6(typescript@5.9.3)
+      '@svgr/core': 8.1.0(typescript@6.0.3)
+      cosmiconfig: 8.3.6(typescript@6.0.3)
       deepmerge: 4.3.1
       svgo: 3.3.3
     transitivePeerDependencies:
       - typescript
 
-  '@svgr/webpack@8.1.0(typescript@5.9.3)':
+  '@svgr/webpack@8.1.0(typescript@6.0.3)':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/plugin-transform-react-constant-elements': 7.27.1(@babel/core@7.29.0)
-      '@babel/preset-env': 7.29.0(@babel/core@7.29.0)
+      '@babel/preset-env': 7.29.2(@babel/core@7.29.0)
       '@babel/preset-react': 7.28.5(@babel/core@7.29.0)
       '@babel/preset-typescript': 7.28.5(@babel/core@7.29.0)
-      '@svgr/core': 8.1.0(typescript@5.9.3)
-      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.9.3))
-      '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0(typescript@5.9.3))(typescript@5.9.3)
+      '@svgr/core': 8.1.0(typescript@6.0.3)
+      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@6.0.3))
+      '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0(typescript@6.0.3))(typescript@6.0.3)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -17782,9 +17722,9 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
-  '@testcontainers/postgresql@11.11.0':
+  '@testcontainers/postgresql@11.14.0':
     dependencies:
-      testcontainers: 11.12.0
+      testcontainers: 11.14.0
     transitivePeerDependencies:
       - bare-abort-controller
       - bare-buffer
@@ -17794,7 +17734,7 @@ snapshots:
   '@testing-library/dom@10.4.1':
     dependencies:
       '@babel/code-frame': 7.29.0
-      '@babel/runtime': 7.28.6
+      '@babel/runtime': 7.29.2
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
       dom-accessibility-api: 0.5.16
@@ -17811,15 +17751,15 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
 
-  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
-      '@babel/runtime': 7.28.6
+      '@babel/runtime': 7.29.2
       '@testing-library/dom': 10.4.1
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
-      '@types/react-dom': 19.2.3(@types/react@19.2.10)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
   '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
     dependencies:
@@ -18056,10 +17996,6 @@ snapshots:
       '@types/estree': 1.0.8
       '@types/json-schema': 7.0.15
 
-  '@types/esquery@1.5.4':
-    dependencies:
-      '@types/estree': 1.0.8
-
   '@types/estree@1.0.8': {}
 
   '@types/events@3.0.3': {}
@@ -18105,9 +18041,9 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
-  '@types/hoist-non-react-statics@3.3.7(@types/react@19.2.10)':
+  '@types/hoist-non-react-statics@3.3.7(@types/react@19.2.14)':
     dependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
       hoist-non-react-statics: 3.3.2
 
   '@types/html-minifier-terser@6.1.0': {}
@@ -18155,6 +18091,10 @@ snapshots:
 
   '@types/linkify-it@5.0.0': {}
 
+  '@types/lodash-es@4.17.12':
+    dependencies:
+      '@types/lodash': 4.17.24
+
   '@types/lodash@4.17.24': {}
 
   '@types/markdown-it@14.1.2':
@@ -18240,7 +18180,7 @@ snapshots:
 
   '@types/postcss-import@14.0.3':
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
   '@types/qrcode@1.5.6':
     dependencies:
@@ -18252,24 +18192,24 @@ snapshots:
 
   '@types/react-beautiful-dnd@13.1.8':
     dependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  '@types/react-dom@19.2.3(@types/react@19.2.10)':
+  '@types/react-dom@19.2.3(@types/react@19.2.14)':
     dependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
   '@types/react-redux@7.1.34':
     dependencies:
-      '@types/hoist-non-react-statics': 3.3.7(@types/react@19.2.10)
-      '@types/react': 19.2.10
+      '@types/hoist-non-react-statics': 3.3.7(@types/react@19.2.14)
+      '@types/react': 19.2.14
       hoist-non-react-statics: 3.3.2
       redux: 4.2.1
 
-  '@types/react-transition-group@4.4.12(@types/react@19.2.10)':
+  '@types/react-transition-group@4.4.12(@types/react@19.2.14)':
     dependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  '@types/react@19.2.10':
+  '@types/react@19.2.14':
     dependencies:
       csstype: 3.2.3
 
@@ -18377,135 +18317,146 @@ snapshots:
       '@types/node': 18.19.130
     optional: true
 
-  '@typescript-eslint/eslint-plugin@8.57.2(@typescript-eslint/parser@8.58.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.58.2(@typescript-eslint/parser@8.58.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.58.0(eslint@8.57.1)(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.57.2
-      '@typescript-eslint/type-utils': 8.57.2(eslint@8.57.1)(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.57.2(eslint@8.57.1)(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.57.2
+      '@typescript-eslint/parser': 8.58.2(eslint@8.57.1)(typescript@6.0.3)
+      '@typescript-eslint/scope-manager': 8.58.2
+      '@typescript-eslint/type-utils': 8.58.2(eslint@8.57.1)(typescript@6.0.3)
+      '@typescript-eslint/utils': 8.58.2(eslint@8.57.1)(typescript@6.0.3)
+      '@typescript-eslint/visitor-keys': 8.58.2
       eslint: 8.57.1
       ignore: 7.0.5
       natural-compare: 1.4.0
-      ts-api-utils: 2.5.0(typescript@5.9.3)
-      typescript: 5.9.3
+      ts-api-utils: 2.5.0(typescript@6.0.3)
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.58.0(eslint@8.57.1)(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.58.2(eslint@8.57.1)(typescript@6.0.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.58.0
-      '@typescript-eslint/types': 8.58.0
-      '@typescript-eslint/typescript-estree': 8.58.0(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.58.0
+      '@typescript-eslint/scope-manager': 8.58.2
+      '@typescript-eslint/types': 8.58.2
+      '@typescript-eslint/typescript-estree': 8.58.2(typescript@6.0.3)
+      '@typescript-eslint/visitor-keys': 8.58.2
       debug: 4.4.3
       eslint: 8.57.1
-      typescript: 5.9.3
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.57.2(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.58.2(typescript@6.0.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.58.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.58.0
+      '@typescript-eslint/tsconfig-utils': 8.59.0(typescript@6.0.3)
+      '@typescript-eslint/types': 8.59.0
       debug: 4.4.3
-      typescript: 5.9.3
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.58.0(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.59.0(typescript@6.0.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.58.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.58.0
+      '@typescript-eslint/tsconfig-utils': 8.59.0(typescript@6.0.3)
+      '@typescript-eslint/types': 8.59.0
       debug: 4.4.3
-      typescript: 5.9.3
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.57.2':
+  '@typescript-eslint/scope-manager@8.58.2':
     dependencies:
-      '@typescript-eslint/types': 8.57.2
-      '@typescript-eslint/visitor-keys': 8.57.2
+      '@typescript-eslint/types': 8.58.2
+      '@typescript-eslint/visitor-keys': 8.58.2
 
-  '@typescript-eslint/scope-manager@8.58.0':
+  '@typescript-eslint/scope-manager@8.59.0':
     dependencies:
-      '@typescript-eslint/types': 8.58.0
-      '@typescript-eslint/visitor-keys': 8.58.0
+      '@typescript-eslint/types': 8.59.0
+      '@typescript-eslint/visitor-keys': 8.59.0
 
-  '@typescript-eslint/tsconfig-utils@8.57.2(typescript@5.9.3)':
+  '@typescript-eslint/tsconfig-utils@8.58.2(typescript@6.0.3)':
     dependencies:
-      typescript: 5.9.3
+      typescript: 6.0.3
 
-  '@typescript-eslint/tsconfig-utils@8.58.0(typescript@5.9.3)':
+  '@typescript-eslint/tsconfig-utils@8.59.0(typescript@6.0.3)':
     dependencies:
-      typescript: 5.9.3
+      typescript: 6.0.3
 
-  '@typescript-eslint/type-utils@8.57.2(eslint@8.57.1)(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.58.2(eslint@8.57.1)(typescript@6.0.3)':
     dependencies:
-      '@typescript-eslint/types': 8.57.2
-      '@typescript-eslint/typescript-estree': 8.57.2(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.57.2(eslint@8.57.1)(typescript@5.9.3)
+      '@typescript-eslint/types': 8.58.2
+      '@typescript-eslint/typescript-estree': 8.58.2(typescript@6.0.3)
+      '@typescript-eslint/utils': 8.58.2(eslint@8.57.1)(typescript@6.0.3)
       debug: 4.4.3
       eslint: 8.57.1
-      ts-api-utils: 2.5.0(typescript@5.9.3)
-      typescript: 5.9.3
+      ts-api-utils: 2.5.0(typescript@6.0.3)
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.57.2': {}
+  '@typescript-eslint/types@8.58.2': {}
 
-  '@typescript-eslint/types@8.58.0': {}
+  '@typescript-eslint/types@8.59.0': {}
 
-  '@typescript-eslint/typescript-estree@8.57.2(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.58.2(typescript@6.0.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.57.2(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.57.2(typescript@5.9.3)
-      '@typescript-eslint/types': 8.57.2
-      '@typescript-eslint/visitor-keys': 8.57.2
+      '@typescript-eslint/project-service': 8.58.2(typescript@6.0.3)
+      '@typescript-eslint/tsconfig-utils': 8.58.2(typescript@6.0.3)
+      '@typescript-eslint/types': 8.58.2
+      '@typescript-eslint/visitor-keys': 8.58.2
       debug: 4.4.3
       minimatch: 10.2.5
       semver: 7.7.4
-      tinyglobby: 0.2.15
-      ts-api-utils: 2.5.0(typescript@5.9.3)
-      typescript: 5.9.3
+      tinyglobby: 0.2.16
+      ts-api-utils: 2.5.0(typescript@6.0.3)
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@8.58.0(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.59.0(typescript@6.0.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.58.0(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.58.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.58.0
-      '@typescript-eslint/visitor-keys': 8.58.0
+      '@typescript-eslint/project-service': 8.59.0(typescript@6.0.3)
+      '@typescript-eslint/tsconfig-utils': 8.59.0(typescript@6.0.3)
+      '@typescript-eslint/types': 8.59.0
+      '@typescript-eslint/visitor-keys': 8.59.0
       debug: 4.4.3
       minimatch: 10.2.5
       semver: 7.7.4
-      tinyglobby: 0.2.15
-      ts-api-utils: 2.5.0(typescript@5.9.3)
-      typescript: 5.9.3
+      tinyglobby: 0.2.16
+      ts-api-utils: 2.5.0(typescript@6.0.3)
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.57.2(eslint@8.57.1)(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.58.2(eslint@8.57.1)(typescript@6.0.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
-      '@typescript-eslint/scope-manager': 8.57.2
-      '@typescript-eslint/types': 8.57.2
-      '@typescript-eslint/typescript-estree': 8.57.2(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.58.2
+      '@typescript-eslint/types': 8.58.2
+      '@typescript-eslint/typescript-estree': 8.58.2(typescript@6.0.3)
       eslint: 8.57.1
-      typescript: 5.9.3
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.57.2':
+  '@typescript-eslint/utils@8.59.0(eslint@8.57.1)(typescript@6.0.3)':
     dependencies:
-      '@typescript-eslint/types': 8.57.2
+      '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
+      '@typescript-eslint/scope-manager': 8.59.0
+      '@typescript-eslint/types': 8.59.0
+      '@typescript-eslint/typescript-estree': 8.59.0(typescript@6.0.3)
+      eslint: 8.57.1
+      typescript: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.58.2':
+    dependencies:
+      '@typescript-eslint/types': 8.58.2
       eslint-visitor-keys: 5.0.1
 
-  '@typescript-eslint/visitor-keys@8.58.0':
+  '@typescript-eslint/visitor-keys@8.59.0':
     dependencies:
-      '@typescript-eslint/types': 8.58.0
+      '@typescript-eslint/types': 8.59.0
       eslint-visitor-keys: 5.0.1
 
   '@ungap/structured-clone@1.3.0': {}
@@ -18574,64 +18525,64 @@ snapshots:
       d3-selection: 3.0.0
       d3-transition: 3.0.1(d3-selection@3.0.0)
 
-  '@vector-im/compound-design-tokens@8.0.0(@types/react@19.2.10)(react@19.2.4)':
+  '@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.14)(react@19.2.5)':
     optionalDependencies:
-      '@types/react': 19.2.10
-      react: 19.2.4
+      '@types/react': 19.2.14
+      react: 19.2.5
 
-  '@vector-im/compound-web@8.4.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@8.0.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@vector-im/compound-web@9.2.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.14)(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
-      '@floating-ui/react': 0.27.17(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@floating-ui/react': 0.27.17(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@fontsource/inconsolata': 5.2.8
       '@fontsource/inter': 5.2.8
-      '@radix-ui/react-context-menu': 2.2.16(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-form': 0.1.8(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-progress': 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-separator': 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.10)(react@19.2.4)
-      '@vector-im/compound-design-tokens': 8.0.0(@types/react@19.2.10)(react@19.2.4)
+      '@radix-ui/react-context-menu': 2.2.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-form': 0.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-progress': 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-separator': 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.14)(react@19.2.5)
+      '@vector-im/compound-design-tokens': 10.1.0(@types/react@19.2.14)(react@19.2.5)
       classnames: 2.5.1
-      react: 19.2.4
-      vaul: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.5
+      vaul: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
     transitivePeerDependencies:
       - '@types/react-dom'
       - react-dom
 
-  '@vector-im/matrix-wysiwyg@2.40.0(patch_hash=7bdf6150f2905bc2f055a6bcaa7b9d78fa7ffde82e800bcc454ac7b0096bd65e)(react@19.2.4)':
+  '@vector-im/matrix-wysiwyg@2.40.0(patch_hash=7bdf6150f2905bc2f055a6bcaa7b9d78fa7ffde82e800bcc454ac7b0096bd65e)(react@19.2.5)':
     dependencies:
-      react: 19.2.4
+      react: 19.2.5
 
-  '@vitejs/plugin-vue@5.2.4(vite@5.4.21(@types/node@18.19.130)(lightningcss@1.32.0)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1))(vue@3.5.31(typescript@5.9.3))':
+  '@vitejs/plugin-vue@5.2.4(vite@5.4.21(@types/node@18.19.130)(lightningcss@1.32.0)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1))(vue@3.5.31(typescript@6.0.3))':
     dependencies:
-      vite: 5.4.21(@types/node@18.19.130)(lightningcss@1.32.0)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)
-      vue: 3.5.31(typescript@5.9.3)
+      vite: 5.4.21(@types/node@18.19.130)(lightningcss@1.32.0)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)
+      vue: 3.5.31(typescript@6.0.3)
 
-  '@vitest/browser-playwright@4.1.2(playwright@1.59.1)(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2)':
+  '@vitest/browser-playwright@4.1.5(playwright@1.59.1)(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.5)':
     dependencies:
-      '@vitest/browser': 4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2)
-      '@vitest/mocker': 4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      '@vitest/browser': 4.1.5(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.5)
+      '@vitest/mocker': 4.1.5(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
       playwright: 1.59.1
       tinyrainbow: 3.1.0
-      vitest: 4.1.2(@opentelemetry/api@1.9.0)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.2)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
     transitivePeerDependencies:
       - bufferutil
       - msw
       - utf-8-validate
       - vite
 
-  '@vitest/browser@4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2)':
+  '@vitest/browser@4.1.5(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.5)':
     dependencies:
       '@blazediff/core': 1.9.1
-      '@vitest/mocker': 4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
-      '@vitest/utils': 4.1.2
+      '@vitest/mocker': 4.1.5(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      '@vitest/utils': 4.1.5
       magic-string: 0.30.21
       pngjs: 7.0.0
       sirv: 3.0.2
       tinyrainbow: 3.1.0
-      vitest: 4.1.2(@opentelemetry/api@1.9.0)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.2)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
       ws: 8.20.0
     transitivePeerDependencies:
       - bufferutil
@@ -18639,21 +18590,21 @@ snapshots:
       - utf-8-validate
       - vite
 
-  '@vitest/coverage-v8@4.1.2(@vitest/browser@4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2))(vitest@4.1.2)':
+  '@vitest/coverage-v8@4.1.5(@vitest/browser@4.1.5)(vitest@4.1.5)':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
-      '@vitest/utils': 4.1.2
+      '@vitest/utils': 4.1.5
       ast-v8-to-istanbul: 1.0.0
       istanbul-lib-coverage: 3.2.2
       istanbul-lib-report: 3.0.1
       istanbul-reports: 3.2.0
       magicast: 0.5.2
       obug: 2.1.1
-      std-env: 4.0.0
+      std-env: 4.1.0
       tinyrainbow: 3.1.0
-      vitest: 4.1.2(@opentelemetry/api@1.9.0)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.2)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
     optionalDependencies:
-      '@vitest/browser': 4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2)
+      '@vitest/browser': 4.1.5(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.5)
 
   '@vitest/expect@3.2.4':
     dependencies:
@@ -18663,40 +18614,40 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
-  '@vitest/expect@4.1.2':
+  '@vitest/expect@4.1.5':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@types/chai': 5.2.3
-      '@vitest/spy': 4.1.2
-      '@vitest/utils': 4.1.2
+      '@vitest/spy': 4.1.5
+      '@vitest/utils': 4.1.5
       chai: 6.2.2
       tinyrainbow: 3.1.0
 
-  '@vitest/mocker@4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))':
+  '@vitest/mocker@4.1.5(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))':
     dependencies:
-      '@vitest/spy': 4.1.2
+      '@vitest/spy': 4.1.5
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vite: 8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
       tinyrainbow: 2.0.0
 
-  '@vitest/pretty-format@4.1.2':
+  '@vitest/pretty-format@4.1.5':
     dependencies:
       tinyrainbow: 3.1.0
 
-  '@vitest/runner@4.1.2':
+  '@vitest/runner@4.1.5':
     dependencies:
-      '@vitest/utils': 4.1.2
+      '@vitest/utils': 4.1.5
       pathe: 2.0.3
 
-  '@vitest/snapshot@4.1.2':
+  '@vitest/snapshot@4.1.5':
     dependencies:
-      '@vitest/pretty-format': 4.1.2
-      '@vitest/utils': 4.1.2
+      '@vitest/pretty-format': 4.1.5
+      '@vitest/utils': 4.1.5
       magic-string: 0.30.21
       pathe: 2.0.3
 
@@ -18704,7 +18655,7 @@ snapshots:
     dependencies:
       tinyspy: 4.0.4
 
-  '@vitest/spy@4.1.2': {}
+  '@vitest/spy@4.1.5': {}
 
   '@vitest/utils@3.2.4':
     dependencies:
@@ -18712,9 +18663,9 @@ snapshots:
       loupe: 3.2.1
       tinyrainbow: 2.0.0
 
-  '@vitest/utils@4.1.2':
+  '@vitest/utils@4.1.5':
     dependencies:
-      '@vitest/pretty-format': 4.1.2
+      '@vitest/pretty-format': 4.1.5
       convert-source-map: 2.0.0
       tinyrainbow: 3.1.0
 
@@ -18752,7 +18703,7 @@ snapshots:
       '@vue/shared': 3.5.31
       estree-walker: 2.0.2
       magic-string: 0.30.21
-      postcss: 8.5.8
+      postcss: 8.5.10
       source-map-js: 1.2.1
 
   '@vue/compiler-ssr@3.5.31':
@@ -18760,11 +18711,6 @@ snapshots:
       '@vue/compiler-dom': 3.5.31
       '@vue/shared': 3.5.31
 
-  '@vue/compiler-vue2@2.7.16':
-    dependencies:
-      de-indent: 1.0.2
-      he: 1.2.0
-
   '@vue/devtools-api@7.7.9':
     dependencies:
       '@vue/devtools-kit': 7.7.9
@@ -18783,19 +18729,6 @@ snapshots:
     dependencies:
       rfdc: 1.4.1
 
-  '@vue/language-core@2.2.0(typescript@5.9.3)':
-    dependencies:
-      '@volar/language-core': 2.4.28
-      '@vue/compiler-dom': 3.5.31
-      '@vue/compiler-vue2': 2.7.16
-      '@vue/shared': 3.5.31
-      alien-signals: 0.4.14
-      minimatch: 9.0.9
-      muggle-string: 0.4.1
-      path-browserify: 1.0.1
-    optionalDependencies:
-      typescript: 5.9.3
-
   '@vue/reactivity@3.5.31':
     dependencies:
       '@vue/shared': 3.5.31
@@ -18812,30 +18745,30 @@ snapshots:
       '@vue/shared': 3.5.31
       csstype: 3.2.3
 
-  '@vue/server-renderer@3.5.31(vue@3.5.31(typescript@5.9.3))':
+  '@vue/server-renderer@3.5.31(vue@3.5.31(typescript@6.0.3))':
     dependencies:
       '@vue/compiler-ssr': 3.5.31
       '@vue/shared': 3.5.31
-      vue: 3.5.31(typescript@5.9.3)
+      vue: 3.5.31(typescript@6.0.3)
 
   '@vue/shared@3.5.31': {}
 
-  '@vueuse/core@12.8.2(typescript@5.9.3)':
+  '@vueuse/core@12.8.2(typescript@6.0.3)':
     dependencies:
       '@types/web-bluetooth': 0.0.21
       '@vueuse/metadata': 12.8.2
-      '@vueuse/shared': 12.8.2(typescript@5.9.3)
-      vue: 3.5.31(typescript@5.9.3)
+      '@vueuse/shared': 12.8.2(typescript@6.0.3)
+      vue: 3.5.31(typescript@6.0.3)
     transitivePeerDependencies:
       - typescript
 
-  '@vueuse/integrations@12.8.2(axios@1.13.5)(focus-trap@7.8.0)(jwt-decode@4.0.0)(qrcode@1.5.4)(typescript@5.9.3)':
+  '@vueuse/integrations@12.8.2(axios@1.15.0)(focus-trap@7.8.0)(jwt-decode@4.0.0)(qrcode@1.5.4)(typescript@6.0.3)':
     dependencies:
-      '@vueuse/core': 12.8.2(typescript@5.9.3)
-      '@vueuse/shared': 12.8.2(typescript@5.9.3)
-      vue: 3.5.31(typescript@5.9.3)
+      '@vueuse/core': 12.8.2(typescript@6.0.3)
+      '@vueuse/shared': 12.8.2(typescript@6.0.3)
+      vue: 3.5.31(typescript@6.0.3)
     optionalDependencies:
-      axios: 1.13.5
+      axios: 1.15.0
       focus-trap: 7.8.0
       jwt-decode: 4.0.0
       qrcode: 1.5.4
@@ -18844,9 +18777,9 @@ snapshots:
 
   '@vueuse/metadata@12.8.2': {}
 
-  '@vueuse/shared@12.8.2(typescript@5.9.3)':
+  '@vueuse/shared@12.8.2(typescript@6.0.3)':
     dependencies:
-      vue: 3.5.31(typescript@5.9.3)
+      vue: 3.5.31(typescript@6.0.3)
     transitivePeerDependencies:
       - typescript
 
@@ -18926,7 +18859,9 @@ snapshots:
       '@webassemblyjs/ast': 1.14.1
       '@xtuc/long': 4.2.2
 
-  '@xmldom/xmldom@0.9.9': {}
+  '@webcontainer/env@1.1.1': {}
+
+  '@xmldom/xmldom@0.8.12': {}
 
   '@xtuc/ieee754@1.2.0': {}
 
@@ -19049,8 +18984,6 @@ snapshots:
       '@algolia/requester-fetch': 5.50.0
       '@algolia/requester-node-http': 5.50.0
 
-  alien-signals@0.4.14: {}
-
   another-json@0.2.0: {}
 
   ansi-colors@4.1.3: {}
@@ -19084,7 +19017,7 @@ snapshots:
 
   app-builder-bin@5.0.0-alpha.12: {}
 
-  app-builder-lib@26.8.2(patch_hash=2dfb3fcdfe573cca6c248cecf63ddea5c8fa0276859695fba6c9664d0ff285d6)(dmg-builder@26.8.2)(electron-builder-squirrel-windows@26.8.2):
+  app-builder-lib@26.9.0(patch_hash=2dfb3fcdfe573cca6c248cecf63ddea5c8fa0276859695fba6c9664d0ff285d6)(dmg-builder@26.9.0)(electron-builder-squirrel-windows@26.9.0):
     dependencies:
       '@develar/schema-utils': 2.6.5
       '@electron/asar': 3.4.1
@@ -19097,17 +19030,17 @@ snapshots:
       '@malept/flatpak-bundler': 0.4.0
       '@types/fs-extra': 9.0.13
       async-exit-hook: 2.0.1
-      builder-util: 26.8.1
-      builder-util-runtime: 9.5.1
+      builder-util: 26.9.0
+      builder-util-runtime: 9.6.0
       chromium-pickle-js: 0.2.0
       ci-info: 4.3.1
       debug: 4.4.3
-      dmg-builder: 26.8.2(electron-builder-squirrel-windows@26.8.2)
+      dmg-builder: 26.9.0(electron-builder-squirrel-windows@26.9.0)
       dotenv: 16.6.1
       dotenv-expand: 11.0.7
       ejs: 3.1.10
-      electron-builder-squirrel-windows: 26.8.2(dmg-builder@26.8.2)
-      electron-publish: 26.8.1
+      electron-builder-squirrel-windows: 26.9.0(dmg-builder@26.9.0)
+      electron-publish: 26.9.0
       fs-extra: 10.1.0
       hosted-git-info: 4.1.0
       isbinaryfile: 5.0.7
@@ -19306,13 +19239,13 @@ snapshots:
       untildify: 3.0.3
       winreg: 1.2.4
 
-  autoprefixer@10.4.24(postcss@8.5.8):
+  autoprefixer@10.4.24(postcss@8.5.10):
     dependencies:
       browserslist: 4.28.2
-      caniuse-lite: 1.0.30001781
+      caniuse-lite: 1.0.30001788
       fraction.js: 5.3.4
       picocolors: 1.1.1
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
   available-typed-arrays@1.0.7:
@@ -19321,13 +19254,21 @@ snapshots:
 
   await-lock@3.0.0(patch_hash=b767a571946a4f8710ac54b1a7bec8a7c1570f9b85d75922392fae20d0578964): {}
 
-  axe-core@4.11.1: {}
+  axe-core@4.11.3: {}
 
-  axios@1.13.5:
+  axios@1.15.0:
     dependencies:
-      follow-redirects: 1.15.11
+      follow-redirects: 1.16.0
       form-data: 4.0.5
-      proxy-from-env: 1.1.0
+      proxy-from-env: 2.1.0
+    transitivePeerDependencies:
+      - debug
+
+  axios@1.15.2:
+    dependencies:
+      follow-redirects: 1.16.0
+      form-data: 4.0.5
+      proxy-from-env: 2.1.0
     transitivePeerDependencies:
       - debug
 
@@ -19348,11 +19289,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-loader@10.0.0(@babel/core@7.29.0)(webpack@5.105.4):
+  babel-loader@10.1.1(@babel/core@7.29.0)(webpack@5.106.2):
     dependencies:
       '@babel/core': 7.29.0
       find-up: 5.0.0
-      webpack: 5.105.4(webpack-cli@7.0.2)
+    optionalDependencies:
+      webpack: 5.106.2(webpack-cli@7.0.2)
 
   babel-plugin-const-enum@1.2.0(@babel/core@7.29.0):
     dependencies:
@@ -19367,7 +19309,7 @@ snapshots:
     dependencies:
       '@babel/helper-plugin-utils': 7.28.6
       '@istanbuljs/load-nyc-config': 1.1.0
-      '@istanbuljs/schema': 0.1.3
+      '@istanbuljs/schema': 0.1.6
       istanbul-lib-instrument: 6.0.3
       test-exclude: 6.0.0
     transitivePeerDependencies:
@@ -19383,15 +19325,15 @@ snapshots:
 
   babel-plugin-macros@3.1.0:
     dependencies:
-      '@babel/runtime': 7.28.6
+      '@babel/runtime': 7.29.2
       cosmiconfig: 7.1.0
-      resolve: 1.22.11
+      resolve: 1.22.12
 
-  babel-plugin-polyfill-corejs2@0.4.15(@babel/core@7.29.0):
+  babel-plugin-polyfill-corejs2@0.4.17(@babel/core@7.29.0):
     dependencies:
       '@babel/compat-data': 7.29.0
       '@babel/core': 7.29.0
-      '@babel/helper-define-polyfill-provider': 0.6.6(@babel/core@7.29.0)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.0)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
@@ -19399,23 +19341,23 @@ snapshots:
   babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.29.0):
     dependencies:
       '@babel/core': 7.29.0
-      '@babel/helper-define-polyfill-provider': 0.6.6(@babel/core@7.29.0)
-      core-js-compat: 3.48.0
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.0)
+      core-js-compat: 3.49.0
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-corejs3@0.14.0(@babel/core@7.29.0):
+  babel-plugin-polyfill-corejs3@0.14.2(@babel/core@7.29.0):
     dependencies:
       '@babel/core': 7.29.0
-      '@babel/helper-define-polyfill-provider': 0.6.6(@babel/core@7.29.0)
-      core-js-compat: 3.48.0
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.0)
+      core-js-compat: 3.49.0
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-regenerator@0.6.6(@babel/core@7.29.0):
+  babel-plugin-polyfill-regenerator@0.6.8(@babel/core@7.29.0):
     dependencies:
       '@babel/core': 7.29.0
-      '@babel/helper-define-polyfill-provider': 0.6.6(@babel/core@7.29.0)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -19457,34 +19399,33 @@ snapshots:
 
   bare-events@2.8.2: {}
 
-  bare-fs@4.5.5:
+  bare-fs@4.7.0:
     dependencies:
       bare-events: 2.8.2
       bare-path: 3.0.0
-      bare-stream: 2.8.0(bare-events@2.8.2)
-      bare-url: 2.3.2
+      bare-stream: 2.13.0(bare-events@2.8.2)
+      bare-url: 2.4.0
       fast-fifo: 1.3.2
     transitivePeerDependencies:
       - bare-abort-controller
       - react-native-b4a
 
-  bare-os@3.7.1: {}
+  bare-os@3.8.7: {}
 
   bare-path@3.0.0:
     dependencies:
-      bare-os: 3.7.1
+      bare-os: 3.8.7
 
-  bare-stream@2.8.0(bare-events@2.8.2):
+  bare-stream@2.13.0(bare-events@2.8.2):
     dependencies:
-      streamx: 2.23.0
+      streamx: 2.25.0
       teex: 1.0.1
     optionalDependencies:
       bare-events: 2.8.2
     transitivePeerDependencies:
-      - bare-abort-controller
       - react-native-b4a
 
-  bare-url@2.3.2:
+  bare-url@2.4.0:
     dependencies:
       bare-path: 3.0.0
 
@@ -19502,7 +19443,7 @@ snapshots:
     dependencies:
       tweetnacl: 0.14.5
 
-  before-after-hook@2.2.3: {}
+  before-after-hook@4.0.0: {}
 
   big.js@5.2.2: {}
 
@@ -19581,7 +19522,7 @@ snapshots:
       balanced-match: 1.0.2
       concat-map: 0.0.1
 
-  brace-expansion@2.0.3:
+  brace-expansion@2.1.0:
     dependencies:
       balanced-match: 1.0.2
 
@@ -19597,7 +19538,7 @@ snapshots:
 
   browser-resolve@2.0.0:
     dependencies:
-      resolve: 1.22.11
+      resolve: 1.22.12
 
   browserify-aes@1.2.0:
     dependencies:
@@ -19646,7 +19587,7 @@ snapshots:
   browserslist@4.28.2:
     dependencies:
       baseline-browser-mapping: 2.10.16
-      caniuse-lite: 1.0.30001781
+      caniuse-lite: 1.0.30001788
       electron-to-chromium: 1.5.332
       node-releases: 2.0.37
       update-browserslist-db: 1.2.3(browserslist@4.28.2)
@@ -19680,19 +19621,19 @@ snapshots:
   buildcheck@0.0.7:
     optional: true
 
-  builder-util-runtime@9.5.1:
+  builder-util-runtime@9.6.0:
     dependencies:
       debug: 4.4.3
       sax: 1.6.0
     transitivePeerDependencies:
       - supports-color
 
-  builder-util@26.8.1:
+  builder-util@26.9.0:
     dependencies:
       7zip-bin: 5.2.0
       '@types/debug': 4.1.13
       app-builder-bin: 5.0.0-alpha.12
-      builder-util-runtime: 9.5.1
+      builder-util-runtime: 9.6.0
       chalk: 4.1.2
       cross-spawn: 7.0.6
       debug: 4.4.3
@@ -19700,7 +19641,7 @@ snapshots:
       http-proxy-agent: 7.0.2
       https-proxy-agent: 7.0.6
       js-yaml: 4.1.1
-      sanitize-filename: 1.6.3
+      sanitize-filename: 1.6.4
       source-map-support: 0.5.21
       stat-mode: 1.0.0
       temp-file: 3.4.0
@@ -19803,11 +19744,11 @@ snapshots:
   caniuse-api@3.0.0:
     dependencies:
       browserslist: 4.28.2
-      caniuse-lite: 1.0.30001781
+      caniuse-lite: 1.0.30001788
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
-  caniuse-lite@1.0.30001781: {}
+  caniuse-lite@1.0.30001788: {}
 
   ccount@2.0.1: {}
 
@@ -20066,16 +20007,16 @@ snapshots:
     dependencies:
       is-what: 5.5.0
 
-  copy-webpack-plugin@14.0.0(webpack@5.105.4):
+  copy-webpack-plugin@14.0.0(webpack@5.106.2):
     dependencies:
       glob-parent: 6.0.2
       normalize-path: 3.0.0
       schema-utils: 4.3.3
       serialize-javascript: 7.0.5
-      tinyglobby: 0.2.15
-      webpack: 5.105.4(webpack-cli@7.0.2)
+      tinyglobby: 0.2.16
+      webpack: 5.106.2(webpack-cli@7.0.2)
 
-  core-js-compat@3.48.0:
+  core-js-compat@3.49.0:
     dependencies:
       browserslist: 4.28.2
 
@@ -20102,23 +20043,23 @@ snapshots:
       path-type: 4.0.0
       yaml: 1.10.3
 
-  cosmiconfig@8.3.6(typescript@5.9.3):
+  cosmiconfig@8.3.6(typescript@6.0.3):
     dependencies:
       import-fresh: 3.3.1
       js-yaml: 4.1.1
       parse-json: 5.2.0
       path-type: 4.0.0
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 6.0.3
 
-  cosmiconfig@9.0.1(typescript@5.9.3):
+  cosmiconfig@9.0.1(typescript@6.0.3):
     dependencies:
       env-paths: 2.2.1
       import-fresh: 3.3.1
       js-yaml: 4.1.1
       parse-json: 5.2.0
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 6.0.3
 
   counterpart@0.18.6:
     dependencies:
@@ -20131,7 +20072,7 @@ snapshots:
   cpu-features@0.0.10:
     dependencies:
       buildcheck: 0.0.7
-      nan: 2.25.0
+      nan: 2.26.2
     optional: true
 
   crc-32@0.3.0: {}
@@ -20198,56 +20139,56 @@ snapshots:
       randombytes: 2.1.0
       randomfill: 1.0.4
 
-  css-blank-pseudo@8.0.1(postcss@8.5.8):
+  css-blank-pseudo@8.0.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
   css-box-model@1.2.1:
     dependencies:
       tiny-invariant: 1.3.3
 
-  css-declaration-sorter@7.3.1(postcss@8.5.8):
+  css-declaration-sorter@7.3.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
   css-functions-list@3.3.3: {}
 
-  css-has-pseudo@8.0.0(postcss@8.5.8):
+  css-has-pseudo@8.0.0(postcss@8.5.10):
     dependencies:
       '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.1)
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
       postcss-value-parser: 4.2.0
 
-  css-loader@7.1.4(webpack@5.105.4):
+  css-loader@7.1.4(webpack@5.106.2):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.8)
-      postcss: 8.5.8
-      postcss-modules-extract-imports: 3.1.0(postcss@8.5.8)
-      postcss-modules-local-by-default: 4.2.0(postcss@8.5.8)
-      postcss-modules-scope: 3.2.1(postcss@8.5.8)
-      postcss-modules-values: 4.0.0(postcss@8.5.8)
+      icss-utils: 5.1.0(postcss@8.5.10)
+      postcss: 8.5.10
+      postcss-modules-extract-imports: 3.1.0(postcss@8.5.10)
+      postcss-modules-local-by-default: 4.2.0(postcss@8.5.10)
+      postcss-modules-scope: 3.2.1(postcss@8.5.10)
+      postcss-modules-values: 4.0.0(postcss@8.5.10)
       postcss-value-parser: 4.2.0
       semver: 7.7.4
     optionalDependencies:
-      webpack: 5.105.4(webpack-cli@7.0.2)
+      webpack: 5.106.2(webpack-cli@7.0.2)
 
-  css-minimizer-webpack-plugin@8.0.0(lightningcss@1.32.0)(webpack@5.105.4):
+  css-minimizer-webpack-plugin@8.0.0(lightningcss@1.32.0)(webpack@5.106.2):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
-      cssnano: 7.1.2(postcss@8.5.8)
+      cssnano: 7.1.2(postcss@8.5.10)
       jest-worker: 30.3.0
-      postcss: 8.5.8
+      postcss: 8.5.10
       schema-utils: 4.3.3
       serialize-javascript: 7.0.5
-      webpack: 5.105.4(webpack-cli@7.0.2)
+      webpack: 5.106.2(webpack-cli@7.0.2)
     optionalDependencies:
       lightningcss: 1.32.0
 
-  css-prefers-color-scheme@11.0.0(postcss@8.5.8):
+  css-prefers-color-scheme@11.0.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
   css-select@4.3.0:
     dependencies:
@@ -20290,49 +20231,49 @@ snapshots:
 
   cssfontparser@1.2.1: {}
 
-  cssnano-preset-default@7.0.10(postcss@8.5.8):
+  cssnano-preset-default@7.0.10(postcss@8.5.10):
     dependencies:
       browserslist: 4.28.2
-      css-declaration-sorter: 7.3.1(postcss@8.5.8)
-      cssnano-utils: 5.0.1(postcss@8.5.8)
-      postcss: 8.5.8
-      postcss-calc: 10.1.1(postcss@8.5.8)
-      postcss-colormin: 7.0.5(postcss@8.5.8)
-      postcss-convert-values: 7.0.8(postcss@8.5.8)
-      postcss-discard-comments: 7.0.5(postcss@8.5.8)
-      postcss-discard-duplicates: 7.0.2(postcss@8.5.8)
-      postcss-discard-empty: 7.0.1(postcss@8.5.8)
-      postcss-discard-overridden: 7.0.1(postcss@8.5.8)
-      postcss-merge-longhand: 7.0.5(postcss@8.5.8)
-      postcss-merge-rules: 7.0.7(postcss@8.5.8)
-      postcss-minify-font-values: 7.0.1(postcss@8.5.8)
-      postcss-minify-gradients: 7.0.1(postcss@8.5.8)
-      postcss-minify-params: 7.0.5(postcss@8.5.8)
-      postcss-minify-selectors: 7.0.5(postcss@8.5.8)
-      postcss-normalize-charset: 7.0.1(postcss@8.5.8)
-      postcss-normalize-display-values: 7.0.1(postcss@8.5.8)
-      postcss-normalize-positions: 7.0.1(postcss@8.5.8)
-      postcss-normalize-repeat-style: 7.0.1(postcss@8.5.8)
-      postcss-normalize-string: 7.0.1(postcss@8.5.8)
-      postcss-normalize-timing-functions: 7.0.1(postcss@8.5.8)
-      postcss-normalize-unicode: 7.0.5(postcss@8.5.8)
-      postcss-normalize-url: 7.0.1(postcss@8.5.8)
-      postcss-normalize-whitespace: 7.0.1(postcss@8.5.8)
-      postcss-ordered-values: 7.0.2(postcss@8.5.8)
-      postcss-reduce-initial: 7.0.5(postcss@8.5.8)
-      postcss-reduce-transforms: 7.0.1(postcss@8.5.8)
-      postcss-svgo: 7.1.0(postcss@8.5.8)
-      postcss-unique-selectors: 7.0.4(postcss@8.5.8)
+      css-declaration-sorter: 7.3.1(postcss@8.5.10)
+      cssnano-utils: 5.0.1(postcss@8.5.10)
+      postcss: 8.5.10
+      postcss-calc: 10.1.1(postcss@8.5.10)
+      postcss-colormin: 7.0.5(postcss@8.5.10)
+      postcss-convert-values: 7.0.8(postcss@8.5.10)
+      postcss-discard-comments: 7.0.5(postcss@8.5.10)
+      postcss-discard-duplicates: 7.0.2(postcss@8.5.10)
+      postcss-discard-empty: 7.0.1(postcss@8.5.10)
+      postcss-discard-overridden: 7.0.1(postcss@8.5.10)
+      postcss-merge-longhand: 7.0.5(postcss@8.5.10)
+      postcss-merge-rules: 7.0.7(postcss@8.5.10)
+      postcss-minify-font-values: 7.0.1(postcss@8.5.10)
+      postcss-minify-gradients: 7.0.1(postcss@8.5.10)
+      postcss-minify-params: 7.0.5(postcss@8.5.10)
+      postcss-minify-selectors: 7.0.5(postcss@8.5.10)
+      postcss-normalize-charset: 7.0.1(postcss@8.5.10)
+      postcss-normalize-display-values: 7.0.1(postcss@8.5.10)
+      postcss-normalize-positions: 7.0.1(postcss@8.5.10)
+      postcss-normalize-repeat-style: 7.0.1(postcss@8.5.10)
+      postcss-normalize-string: 7.0.1(postcss@8.5.10)
+      postcss-normalize-timing-functions: 7.0.1(postcss@8.5.10)
+      postcss-normalize-unicode: 7.0.5(postcss@8.5.10)
+      postcss-normalize-url: 7.0.1(postcss@8.5.10)
+      postcss-normalize-whitespace: 7.0.1(postcss@8.5.10)
+      postcss-ordered-values: 7.0.2(postcss@8.5.10)
+      postcss-reduce-initial: 7.0.5(postcss@8.5.10)
+      postcss-reduce-transforms: 7.0.1(postcss@8.5.10)
+      postcss-svgo: 7.1.0(postcss@8.5.10)
+      postcss-unique-selectors: 7.0.4(postcss@8.5.10)
 
-  cssnano-utils@5.0.1(postcss@8.5.8):
+  cssnano-utils@5.0.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  cssnano@7.1.2(postcss@8.5.8):
+  cssnano@7.1.2(postcss@8.5.10):
     dependencies:
-      cssnano-preset-default: 7.0.10(postcss@8.5.8)
+      cssnano-preset-default: 7.0.10(postcss@8.5.10)
       lilconfig: 3.1.3
-      postcss: 8.5.8
+      postcss: 8.5.10
 
   csso@5.0.5:
     dependencies:
@@ -20562,8 +20503,6 @@ snapshots:
 
   dayjs@1.11.20: {}
 
-  de-indent@1.0.2: {}
-
   debounce-fn@6.0.0:
     dependencies:
       mimic-function: 5.0.1
@@ -20637,8 +20576,6 @@ snapshots:
 
   depd@2.0.0: {}
 
-  deprecation@2.3.1: {}
-
   dequal@2.0.3: {}
 
   des.js@1.1.0:
@@ -20671,7 +20608,7 @@ snapshots:
 
   diff-match-patch@1.0.5: {}
 
-  diff@8.0.3: {}
+  diff@8.0.4: {}
 
   diffie-hellman@5.0.3:
     dependencies:
@@ -20686,10 +20623,10 @@ snapshots:
       minimatch: 3.1.5
       p-limit: 3.1.0
 
-  dmg-builder@26.8.2(electron-builder-squirrel-windows@26.8.2):
+  dmg-builder@26.9.0(electron-builder-squirrel-windows@26.9.0):
     dependencies:
-      app-builder-lib: 26.8.2(patch_hash=2dfb3fcdfe573cca6c248cecf63ddea5c8fa0276859695fba6c9664d0ff285d6)(dmg-builder@26.8.2)(electron-builder-squirrel-windows@26.8.2)
-      builder-util: 26.8.1
+      app-builder-lib: 26.9.0(patch_hash=2dfb3fcdfe573cca6c248cecf63ddea5c8fa0276859695fba6c9664d0ff285d6)(dmg-builder@26.9.0)(electron-builder-squirrel-windows@26.9.0)
+      builder-util: 26.9.0
       fs-extra: 10.1.0
       iconv-lite: 0.6.3
       js-yaml: 4.1.1
@@ -20715,11 +20652,11 @@ snapshots:
     dependencies:
       '@leichtgewicht/ip-codec': 2.0.5
 
-  docker-compose@1.3.1:
+  docker-compose@1.4.2:
     dependencies:
       yaml: 2.8.3
 
-  docker-modem@5.0.6:
+  docker-modem@5.0.7:
     dependencies:
       debug: 4.4.3
       readable-stream: 3.6.2
@@ -20728,13 +20665,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  dockerode@4.0.9:
+  dockerode@4.0.10:
     dependencies:
       '@balena/dockerignore': 1.0.2
       '@grpc/grpc-js': 1.14.3
       '@grpc/proto-loader': 0.7.15
-      docker-modem: 5.0.6
-      protobufjs: 7.5.4
+      docker-modem: 5.0.7
+      protobufjs: 7.5.5
       tar-fs: 2.1.4
       uuid: 10.0.0
     transitivePeerDependencies:
@@ -20758,7 +20695,7 @@ snapshots:
 
   dom-helpers@5.2.1:
     dependencies:
-      '@babel/runtime': 7.28.6
+      '@babel/runtime': 7.29.2
       csstype: 3.2.3
 
   dom-serializer@1.4.1:
@@ -20797,7 +20734,7 @@ snapshots:
     dependencies:
       domelementtype: 3.0.0
 
-  dompurify@3.3.3:
+  dompurify@3.4.0:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
 
@@ -20836,7 +20773,7 @@ snapshots:
 
   dotenv@16.6.1: {}
 
-  dotenv@17.4.0: {}
+  dotenv@17.4.2: {}
 
   dunder-proto@1.0.1:
     dependencies:
@@ -20854,23 +20791,25 @@ snapshots:
     dependencies:
       jake: 10.9.4
 
-  electron-builder-squirrel-windows@26.8.2(dmg-builder@26.8.2):
+  ejs@5.0.1: {}
+
+  electron-builder-squirrel-windows@26.9.0(dmg-builder@26.9.0):
     dependencies:
-      app-builder-lib: 26.8.2(patch_hash=2dfb3fcdfe573cca6c248cecf63ddea5c8fa0276859695fba6c9664d0ff285d6)(dmg-builder@26.8.2)(electron-builder-squirrel-windows@26.8.2)
-      builder-util: 26.8.1
+      app-builder-lib: 26.9.0(patch_hash=2dfb3fcdfe573cca6c248cecf63ddea5c8fa0276859695fba6c9664d0ff285d6)(dmg-builder@26.9.0)(electron-builder-squirrel-windows@26.9.0)
+      builder-util: 26.9.0
       electron-winstaller: 5.4.0
     transitivePeerDependencies:
       - dmg-builder
       - supports-color
 
-  electron-builder@26.8.2(electron-builder-squirrel-windows@26.8.2):
+  electron-builder@26.9.0(electron-builder-squirrel-windows@26.9.0):
     dependencies:
-      app-builder-lib: 26.8.2(patch_hash=2dfb3fcdfe573cca6c248cecf63ddea5c8fa0276859695fba6c9664d0ff285d6)(dmg-builder@26.8.2)(electron-builder-squirrel-windows@26.8.2)
-      builder-util: 26.8.1
-      builder-util-runtime: 9.5.1
+      app-builder-lib: 26.9.0(patch_hash=2dfb3fcdfe573cca6c248cecf63ddea5c8fa0276859695fba6c9664d0ff285d6)(dmg-builder@26.9.0)(electron-builder-squirrel-windows@26.9.0)
+      builder-util: 26.9.0
+      builder-util-runtime: 9.6.0
       chalk: 4.1.2
       ci-info: 4.4.0
-      dmg-builder: 26.8.2(electron-builder-squirrel-windows@26.8.2)
+      dmg-builder: 26.9.0(electron-builder-squirrel-windows@26.9.0)
       fs-extra: 10.1.0
       lazy-val: 1.0.5
       simple-update-notifier: 2.0.0
@@ -20883,11 +20822,11 @@ snapshots:
     dependencies:
       unzip-crx-3: 0.2.0
 
-  electron-publish@26.8.1:
+  electron-publish@26.9.0:
     dependencies:
       '@types/fs-extra': 9.0.13
-      builder-util: 26.8.1
-      builder-util-runtime: 9.5.1
+      builder-util: 26.9.0
+      builder-util-runtime: 9.6.0
       chalk: 4.1.2
       form-data: 4.0.5
       fs-extra: 10.1.0
@@ -20920,7 +20859,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  electron@41.1.0:
+  electron@41.2.2:
     dependencies:
       '@electron/get': 2.0.3
       '@types/node': 18.19.130
@@ -21030,7 +20969,7 @@ snapshots:
       has-property-descriptors: 1.0.2
       has-proto: 1.2.0
       has-symbols: 1.1.0
-      hasown: 2.0.2
+      hasown: 2.0.3
       internal-slot: 1.1.0
       is-array-buffer: 3.0.5
       is-callable: 1.2.7
@@ -21097,11 +21036,11 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
       has-tostringtag: 1.0.2
-      hasown: 2.0.2
+      hasown: 2.0.3
 
   es-shim-unscopables@1.1.0:
     dependencies:
-      hasown: 2.0.2
+      hasown: 2.0.3
 
   es-to-primitive@1.3.0:
     dependencies:
@@ -21170,15 +21109,15 @@ snapshots:
     dependencies:
       debug: 3.2.7
       is-core-module: 2.16.1
-      resolve: 1.22.11
+      resolve: 1.22.12
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.58.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@8.57.1):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.58.2(eslint@8.57.1)(typescript@6.0.3))(eslint-import-resolver-node@0.3.9)(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 8.58.0(eslint@8.57.1)(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.58.2(eslint@8.57.1)(typescript@6.0.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
     transitivePeerDependencies:
@@ -21195,7 +21134,7 @@ snapshots:
       eslint: 8.57.1
       eslint-compat-utils: 0.5.1(eslint@8.57.1)
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.58.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.58.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -21206,8 +21145,8 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.58.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@8.57.1)
-      hasown: 2.0.2
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.58.2(eslint@8.57.1)(typescript@6.0.3))(eslint-import-resolver-node@0.3.9)(eslint@8.57.1)
+      hasown: 2.0.3
       is-core-module: 2.16.1
       is-glob: 4.0.3
       minimatch: 3.1.5
@@ -21218,20 +21157,20 @@ snapshots:
       string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.58.0(eslint@8.57.1)(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.58.2(eslint@8.57.1)(typescript@6.0.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jest@29.15.0(@typescript-eslint/eslint-plugin@8.57.2(@typescript-eslint/parser@8.58.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(jest@30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0))(typescript@5.9.3):
+  eslint-plugin-jest@29.15.2(@typescript-eslint/eslint-plugin@8.58.2(@typescript-eslint/parser@8.58.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(jest@30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0))(typescript@6.0.3):
     dependencies:
-      '@typescript-eslint/utils': 8.57.2(eslint@8.57.1)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.59.0(eslint@8.57.1)(typescript@6.0.3)
       eslint: 8.57.1
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.57.2(@typescript-eslint/parser@8.58.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.58.2(@typescript-eslint/parser@8.58.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3)
       jest: 30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0)
-      typescript: 5.9.3
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
@@ -21241,12 +21180,12 @@ snapshots:
       array-includes: 3.1.9
       array.prototype.flatmap: 1.3.3
       ast-types-flow: 0.0.8
-      axe-core: 4.11.1
+      axe-core: 4.11.3
       axobject-query: 4.1.0
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
       eslint: 8.57.1
-      hasown: 2.0.2
+      hasown: 2.0.3
       jsx-ast-utils: 3.3.5
       language-tags: 1.0.9
       minimatch: 3.1.5
@@ -21254,39 +21193,39 @@ snapshots:
       safe-regex-test: 1.1.0
       string.prototype.includes: 2.0.1
 
-  eslint-plugin-matrix-org@3.0.0(d28b6cfeddcbcf776e114e7554fcab7e):
+  eslint-plugin-matrix-org@3.0.0(756bde0db757d9adac5fccdfadf6b9bb):
     dependencies:
       '@babel/core': 7.29.0
       '@babel/eslint-parser': 7.28.6(@babel/core@7.29.0)(eslint@8.57.1)
       '@babel/eslint-plugin': 7.27.1(@babel/eslint-parser@7.28.6(@babel/core@7.29.0)(eslint@8.57.1))(eslint@8.57.1)
-      '@stylistic/eslint-plugin': 5.9.0(eslint@8.57.1)
-      '@typescript-eslint/eslint-plugin': 8.57.2(@typescript-eslint/parser@8.58.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.58.0(eslint@8.57.1)(typescript@5.9.3)
+      '@stylistic/eslint-plugin': 5.10.0(eslint@8.57.1)
+      '@typescript-eslint/eslint-plugin': 8.58.2(@typescript-eslint/parser@8.58.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3)
+      '@typescript-eslint/parser': 8.58.2(eslint@8.57.1)(typescript@6.0.3)
       eslint: 8.57.1
       eslint-config-google: 0.14.0(eslint@8.57.1)
       eslint-config-prettier: 10.1.8(eslint@8.57.1)
       eslint-plugin-deprecate: 0.9.0(eslint@8.57.1)
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.58.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)
-      eslint-plugin-jest: 29.15.0(@typescript-eslint/eslint-plugin@8.57.2(@typescript-eslint/parser@8.58.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(jest@30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0))(typescript@5.9.3)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.58.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)
+      eslint-plugin-jest: 29.15.2(@typescript-eslint/eslint-plugin@8.58.2(@typescript-eslint/parser@8.58.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(jest@30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0))(typescript@6.0.3)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.5(eslint@8.57.1)
-      eslint-plugin-react-hooks: 7.0.1(eslint@8.57.1)
+      eslint-plugin-react-hooks: 7.1.1(eslint@8.57.1)
       eslint-plugin-unicorn: 56.0.1(eslint@8.57.1)
-      prettier: 3.8.1
-      typescript: 5.9.3
+      prettier: 3.8.3
+      typescript: 6.0.3
 
-  eslint-plugin-n@17.24.0(eslint@8.57.1)(typescript@5.9.3):
+  eslint-plugin-n@17.24.0(eslint@8.57.1)(typescript@6.0.3):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
       enhanced-resolve: 5.20.1
       eslint: 8.57.1
       eslint-plugin-es-x: 7.8.0(eslint@8.57.1)
-      get-tsconfig: 4.13.7
+      get-tsconfig: 4.14.0
       globals: 15.15.0
       globrex: 0.1.2
       ignore: 5.3.2
       semver: 7.7.4
-      ts-declaration-location: 1.0.7(typescript@5.9.3)
+      ts-declaration-location: 1.0.7(typescript@6.0.3)
     transitivePeerDependencies:
       - typescript
 
@@ -21314,7 +21253,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-react-hooks@7.0.1(eslint@8.57.1):
+  eslint-plugin-react-hooks@7.1.1(eslint@8.57.1):
     dependencies:
       '@babel/core': 7.29.0
       '@babel/parser': 7.29.2
@@ -21335,7 +21274,7 @@ snapshots:
       es-iterator-helpers: 1.2.2
       eslint: 8.57.1
       estraverse: 5.3.0
-      hasown: 2.0.2
+      hasown: 2.0.3
       jsx-ast-utils: 3.3.5
       minimatch: 3.1.5
       object.entries: 1.1.9
@@ -21347,11 +21286,11 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-storybook@10.2.13(eslint@8.57.1)(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
+  eslint-plugin-storybook@10.3.5(eslint@8.57.1)(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.3):
     dependencies:
-      '@typescript-eslint/utils': 8.57.2(eslint@8.57.1)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.59.0(eslint@8.57.1)(typescript@6.0.3)
       eslint: 8.57.1
-      storybook: 10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      storybook: 10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -21362,7 +21301,7 @@ snapshots:
       '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
       ci-info: 4.4.0
       clean-regexp: 1.0.0
-      core-js-compat: 3.48.0
+      core-js-compat: 3.49.0
       eslint: 8.57.1
       esquery: 1.7.0
       globals: 15.15.0
@@ -21548,7 +21487,7 @@ snapshots:
       methods: 1.1.2
       on-finished: 2.4.1
       parseurl: 1.3.3
-      path-to-regexp: 0.2.5
+      path-to-regexp: 0.1.13
       proxy-addr: 2.0.7
       qs: 6.15.0
       range-parser: 1.2.1
@@ -21615,6 +21554,8 @@ snapshots:
 
   fake-indexeddb@6.2.5: {}
 
+  fast-content-type-parse@3.0.0: {}
+
   fast-deep-equal@3.1.3: {}
 
   fast-fifo@1.3.2: {}
@@ -21682,11 +21623,11 @@ snapshots:
     dependencies:
       flat-cache: 3.2.0
 
-  file-loader@6.2.0(webpack@5.105.4):
+  file-loader@6.2.0(webpack@5.106.2):
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 3.3.0
-      webpack: 5.105.4(webpack-cli@7.0.2)
+      webpack: 5.106.2(webpack-cli@7.0.2)
 
   file-saver@2.0.5: {}
 
@@ -21759,7 +21700,7 @@ snapshots:
     dependencies:
       tabbable: 6.4.0
 
-  follow-redirects@1.15.11: {}
+  follow-redirects@1.16.0: {}
 
   for-each@0.3.5:
     dependencies:
@@ -21777,7 +21718,7 @@ snapshots:
       asynckit: 0.4.0
       combined-stream: 1.0.8
       es-set-tostringtag: 2.1.0
-      hasown: 2.0.2
+      hasown: 2.0.3
       mime-types: 2.1.35
 
   formatly@0.3.0:
@@ -21803,13 +21744,13 @@ snapshots:
   fs-extra@10.1.0:
     dependencies:
       graceful-fs: 4.2.11
-      jsonfile: 6.2.0
+      jsonfile: 6.2.1
       universalify: 2.0.1
 
-  fs-extra@11.3.3:
+  fs-extra@11.3.4:
     dependencies:
       graceful-fs: 4.2.11
-      jsonfile: 6.2.0
+      jsonfile: 6.2.1
       universalify: 2.0.1
 
   fs-extra@7.0.1:
@@ -21828,7 +21769,7 @@ snapshots:
     dependencies:
       at-least-node: 1.0.0
       graceful-fs: 4.2.11
-      jsonfile: 6.2.0
+      jsonfile: 6.2.1
       universalify: 2.0.1
 
   fs-minipass@3.0.3:
@@ -21855,7 +21796,7 @@ snapshots:
       call-bound: 1.0.4
       define-properties: 1.2.1
       functions-have-names: 1.2.3
-      hasown: 2.0.2
+      hasown: 2.0.3
       is-callable: 1.2.7
 
   functions-have-names@1.2.3: {}
@@ -21878,14 +21819,14 @@ snapshots:
       get-proto: 1.0.1
       gopd: 1.2.0
       has-symbols: 1.1.0
-      hasown: 2.0.2
+      hasown: 2.0.3
       math-intrinsics: 1.1.0
 
   get-nonce@1.0.1: {}
 
   get-package-type@0.1.0: {}
 
-  get-port@7.1.0: {}
+  get-port@7.2.0: {}
 
   get-proto@1.0.1:
     dependencies:
@@ -21908,6 +21849,10 @@ snapshots:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
+  get-tsconfig@4.14.0:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
   github-markdown-css@5.9.0: {}
 
   gl-matrix@3.4.4: {}
@@ -22070,7 +22015,7 @@ snapshots:
     dependencies:
       hookified: 1.15.1
 
-  hasown@2.0.2:
+  hasown@2.0.3:
     dependencies:
       function-bind: 1.1.2
 
@@ -22135,10 +22080,10 @@ snapshots:
       readable-stream: 2.3.8
       wbuf: 1.7.3
 
-  html-dom-parser@5.1.8:
+  html-dom-parser@7.0.1:
     dependencies:
-      domhandler: 5.0.3
-      htmlparser2: 10.1.0
+      domhandler: 6.0.1
+      htmlparser2: 12.0.0
 
   html-encoding-sniffer@4.0.0:
     dependencies:
@@ -22160,21 +22105,21 @@ snapshots:
       relateurl: 0.2.7
       terser: 5.46.1
 
-  html-react-parser@5.2.17(@types/react@19.2.10)(react@19.2.4):
+  html-react-parser@6.0.1(@types/react@19.2.14)(react@19.2.5):
     dependencies:
-      domhandler: 5.0.3
-      html-dom-parser: 5.1.8
-      react: 19.2.4
+      domhandler: 6.0.1
+      html-dom-parser: 7.0.1
+      react: 19.2.5
       react-property: 2.0.2
       style-to-js: 1.1.21
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
   html-tags@5.1.0: {}
 
   html-void-elements@3.0.0: {}
 
-  html-webpack-plugin@5.6.6(webpack@5.105.4):
+  html-webpack-plugin@5.6.7(webpack@5.106.2):
     dependencies:
       '@types/html-minifier-terser': 6.1.0
       html-minifier-terser: 6.1.0
@@ -22182,7 +22127,7 @@ snapshots:
       pretty-error: 4.0.0
       tapable: 2.3.2
     optionalDependencies:
-      webpack: 5.105.4(webpack-cli@7.0.2)
+      webpack: 5.106.2(webpack-cli@7.0.2)
 
   htmlparser2@10.1.0:
     dependencies:
@@ -22191,6 +22136,13 @@ snapshots:
       domutils: 3.2.2
       entities: 7.0.1
 
+  htmlparser2@12.0.0:
+    dependencies:
+      domelementtype: 3.0.0
+      domhandler: 6.0.1
+      domutils: 4.0.2
+      entities: 8.0.0
+
   htmlparser2@6.1.0:
     dependencies:
       domelementtype: 2.3.0
@@ -22242,7 +22194,7 @@ snapshots:
   http-proxy@1.18.1:
     dependencies:
       eventemitter3: 4.0.7
-      follow-redirects: 1.15.11
+      follow-redirects: 1.16.0
       requires-port: 1.0.0
     transitivePeerDependencies:
       - debug
@@ -22292,9 +22244,9 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
-  icss-utils@5.1.0(postcss@8.5.8):
+  icss-utils@5.1.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
   identity-obj-proxy@3.0.0:
     dependencies:
@@ -22324,6 +22276,13 @@ snapshots:
       cjs-module-lexer: 2.2.0
       module-details-from-path: 1.0.4
 
+  import-in-the-middle@3.0.1:
+    dependencies:
+      acorn: 8.16.0
+      acorn-import-attributes: 1.9.5(acorn@8.16.0)
+      cjs-module-lexer: 2.2.0
+      module-details-from-path: 1.0.4
+
   import-lazy@4.0.0: {}
 
   import-local@3.2.0:
@@ -22355,7 +22314,7 @@ snapshots:
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
-      hasown: 2.0.2
+      hasown: 2.0.3
       side-channel: 1.1.0
 
   internmap@1.0.1: {}
@@ -22420,7 +22379,7 @@ snapshots:
 
   is-core-module@2.16.1:
     dependencies:
-      hasown: 2.0.2
+      hasown: 2.0.3
 
   is-data-view@1.0.2:
     dependencies:
@@ -22508,12 +22467,16 @@ snapshots:
 
   is-promise@4.0.0: {}
 
+  is-reference@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
   is-regex@1.2.1:
     dependencies:
       call-bound: 1.0.4
       gopd: 1.2.0
       has-tostringtag: 1.0.2
-      hasown: 2.0.2
+      hasown: 2.0.3
 
   is-regexp@3.1.0: {}
 
@@ -22581,13 +22544,17 @@ snapshots:
 
   isomorphic-timers-promises@1.0.1: {}
 
+  isomorphic-ws@5.0.0(ws@8.20.0):
+    dependencies:
+      ws: 8.20.0
+
   istanbul-lib-coverage@3.2.2: {}
 
   istanbul-lib-instrument@6.0.3:
     dependencies:
       '@babel/core': 7.29.0
       '@babel/parser': 7.29.2
-      '@istanbuljs/schema': 0.1.3
+      '@istanbuljs/schema': 0.1.6
       istanbul-lib-coverage: 3.2.2
       semver: 7.7.4
     transitivePeerDependencies:
@@ -22974,13 +22941,13 @@ snapshots:
 
   jju@1.4.0: {}
 
-  joi@18.0.2:
+  joi@18.1.2:
     dependencies:
       '@hapi/address': 5.1.1
       '@hapi/formula': 3.0.2
       '@hapi/hoek': 11.0.7
       '@hapi/pinpoint': 2.0.1
-      '@hapi/tlds': 1.1.5
+      '@hapi/tlds': 1.1.6
       '@hapi/topo': 6.0.2
       '@standard-schema/spec': 1.1.0
 
@@ -23049,6 +23016,8 @@ snapshots:
   json-stringify-safe@5.0.1:
     optional: true
 
+  json-with-bigint@3.5.8: {}
+
   json5@1.0.2:
     dependencies:
       minimist: 1.2.8
@@ -23061,7 +23030,7 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
-  jsonfile@6.2.0:
+  jsonfile@6.2.1:
     dependencies:
       universalify: 2.0.1
     optionalDependencies:
@@ -23071,7 +23040,7 @@ snapshots:
 
   jsqr@1.4.0: {}
 
-  jsrsasign@11.1.1: {}
+  jsrsasign@11.1.3: {}
 
   jsx-ast-utils@3.3.5:
     dependencies:
@@ -23107,7 +23076,7 @@ snapshots:
 
   kind-of@6.0.3: {}
 
-  knip@6.3.0(patch_hash=9ee905cce2466e391db69dfcea905b0fe2502afd935d1dc6a6ac94ffe2855c28)(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1):
+  knip@6.4.1(patch_hash=9ee905cce2466e391db69dfcea905b0fe2502afd935d1dc6a6ac94ffe2855c28)(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0):
     dependencies:
       '@nodelib/fs.walk': 1.2.8
       fast-glob: 3.3.3
@@ -23115,8 +23084,8 @@ snapshots:
       get-tsconfig: 4.13.7
       jiti: 2.6.1
       minimist: 1.2.8
-      oxc-parser: 0.121.0(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)
-      oxc-resolver: 11.19.1(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)
+      oxc-parser: 0.121.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      oxc-resolver: 11.19.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
       picocolors: 1.1.1
       picomatch: 4.0.4
       smol-toml: 1.6.1
@@ -23236,10 +23205,10 @@ snapshots:
     dependencies:
       uc.micro: 2.1.0
 
-  linkify-react@4.3.2(linkifyjs@4.3.2)(react@19.2.4):
+  linkify-react@4.3.2(linkifyjs@4.3.2)(react@19.2.5):
     dependencies:
       linkifyjs: 4.3.2
-      react: 19.2.4
+      react: 19.2.5
 
   linkify-string@4.3.2(linkifyjs@4.3.2):
     dependencies:
@@ -23253,7 +23222,7 @@ snapshots:
       listr2: 9.0.5
       picomatch: 4.0.4
       string-argv: 0.3.2
-      tinyexec: 1.0.4
+      tinyexec: 1.1.1
       yaml: 2.8.3
 
   listr2@9.0.5:
@@ -23301,8 +23270,6 @@ snapshots:
 
   lodash.uniq@4.5.0: {}
 
-  lodash@4.17.23: {}
-
   lodash@4.18.1: {}
 
   log-symbols@4.1.0:
@@ -23360,14 +23327,16 @@ snapshots:
       '@babel/types': 7.29.0
       source-map-js: 1.2.1
 
-  mailpit-api@1.7.0:
+  mailpit-api@1.9.0(react@19.2.5):
     dependencies:
-      axios: 1.13.5
-      partysocket: 1.1.11
+      axios: 1.15.2
+      isomorphic-ws: 5.0.0(ws@8.20.0)
+      partysocket: 1.1.18(react@19.2.5)
       ws: 8.20.0
     transitivePeerDependencies:
       - bufferutil
       - debug
+      - react
       - utf-8-validate
 
   make-dir@4.0.0:
@@ -23411,15 +23380,15 @@ snapshots:
     dependencies:
       tmpl: 1.0.5
 
-  maplibre-gl@5.22.0:
+  maplibre-gl@5.23.0:
     dependencies:
       '@mapbox/jsonlint-lines-primitives': 2.0.2
       '@mapbox/point-geometry': 1.1.0
-      '@mapbox/tiny-sdf': 2.0.7
+      '@mapbox/tiny-sdf': 2.1.0
       '@mapbox/unitbezier': 0.0.1
       '@mapbox/vector-tile': 2.0.4
       '@mapbox/whoots-js': 3.1.0
-      '@maplibre/geojson-vt': 6.0.4
+      '@maplibre/geojson-vt': 6.1.0
       '@maplibre/maplibre-gl-style-spec': 24.8.1
       '@maplibre/mlt': 1.1.8
       '@maplibre/vt-pbf': 4.3.0
@@ -23459,10 +23428,10 @@ snapshots:
 
   matrix-events-sdk@0.0.1: {}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6371e4b25206dcd459d19375f5d046993ce11b1b:
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa424c44b4991acacc7524066a54a352e140f7b6:
     dependencies:
-      '@babel/runtime': 7.28.6
-      '@matrix-org/matrix-sdk-crypto-wasm': 18.0.0
+      '@babel/runtime': 7.29.2
+      '@matrix-org/matrix-sdk-crypto-wasm': 18.1.0
       another-json: 0.2.0
       bs58: 6.0.0
       content-type: 1.0.5
@@ -23544,7 +23513,7 @@ snapshots:
 
   memoize-one@6.0.0: {}
 
-  memoize@10.2.0:
+  memoize@11.0.0:
     dependencies:
       mimic-function: 5.0.1
 
@@ -23572,7 +23541,7 @@ snapshots:
       d3-sankey: 0.12.3
       dagre-d3-es: 7.0.14
       dayjs: 1.11.20
-      dompurify: 3.3.3
+      dompurify: 3.4.0
       katex: 0.16.45
       khroma: 2.1.0
       lodash-es: 4.18.1
@@ -23639,16 +23608,20 @@ snapshots:
 
   min-indent@1.0.1: {}
 
-  mini-css-extract-plugin@2.10.2(webpack@5.105.4):
+  mini-css-extract-plugin@2.10.2(webpack@5.106.2):
     dependencies:
       schema-utils: 4.3.3
       tapable: 2.3.2
-      webpack: 5.105.4(webpack-cli@7.0.2)
+      webpack: 5.106.2(webpack-cli@7.0.2)
 
   minimalistic-assert@1.0.1: {}
 
   minimalistic-crypto-utils@1.0.1: {}
 
+  minimatch@10.2.3:
+    dependencies:
+      brace-expansion: 5.0.5
+
   minimatch@10.2.4:
     dependencies:
       brace-expansion: 5.0.5
@@ -23663,11 +23636,11 @@ snapshots:
 
   minimatch@5.1.9:
     dependencies:
-      brace-expansion: 2.0.3
+      brace-expansion: 2.1.0
 
   minimatch@9.0.9:
     dependencies:
-      brace-expansion: 2.0.3
+      brace-expansion: 2.1.0
 
   minimist@1.2.8: {}
 
@@ -23766,8 +23739,6 @@ snapshots:
 
   ms@2.1.3: {}
 
-  muggle-string@0.4.1: {}
-
   multicast-dns@7.2.5:
     dependencies:
       dns-packet: 5.6.1
@@ -23775,7 +23746,7 @@ snapshots:
 
   murmurhash-js@1.0.0: {}
 
-  nan@2.25.0:
+  nan@2.26.2:
     optional: true
 
   nanoid@3.3.11: {}
@@ -23797,7 +23768,7 @@ snapshots:
       lower-case: 2.0.2
       tslib: 2.8.1
 
-  node-abi@4.27.0:
+  node-abi@4.28.0:
     dependencies:
       semver: 7.7.4
 
@@ -23824,7 +23795,7 @@ snapshots:
       proc-log: 5.0.0
       semver: 7.7.4
       tar: 7.5.13
-      tinyglobby: 0.2.15
+      tinyglobby: 0.2.16
       which: 5.0.0
     transitivePeerDependencies:
       - supports-color
@@ -23839,15 +23810,13 @@ snapshots:
       proc-log: 6.1.0
       semver: 7.7.4
       tar: 7.5.13
-      tinyglobby: 0.2.15
+      tinyglobby: 0.2.16
       which: 6.0.1
     transitivePeerDependencies:
       - supports-color
 
   node-int64@0.4.0: {}
 
-  node-machine-id@1.1.12: {}
-
   node-releases@2.0.37: {}
 
   node-stdlib-browser@1.3.1:
@@ -23894,7 +23863,7 @@ snapshots:
   normalize-package-data@2.5.0:
     dependencies:
       hosted-git-info: 2.8.9
-      resolve: 1.22.11
+      resolve: 1.22.12
       semver: 5.7.2
       validate-npm-package-license: 3.0.4
 
@@ -23954,71 +23923,19 @@ snapshots:
 
   nwsapi@2.2.23: {}
 
-  nx@22.5.3:
+  nx@22.6.5:
     dependencies:
       '@napi-rs/wasm-runtime': 0.2.4
       '@yarnpkg/lockfile': 1.1.0
       '@yarnpkg/parsers': 3.0.2
       '@zkochan/js-yaml': 0.0.7
-      axios: 1.13.5
+      axios: 1.15.0
       cli-cursor: 3.1.0
       cli-spinners: 2.6.1
       cliui: 8.0.1
       dotenv: 16.4.7
       dotenv-expand: 11.0.7
-      ejs: 3.1.10
-      enquirer: 2.3.6
-      figures: 3.2.0
-      flat: 5.0.2
-      front-matter: 4.0.2
-      ignore: 7.0.5
-      jest-diff: 30.3.0
-      jsonc-parser: 3.2.0
-      lines-and-columns: 2.0.3
-      minimatch: 10.2.5
-      node-machine-id: 1.1.12
-      npm-run-path: 4.0.1
-      open: 8.4.2
-      ora: 5.3.0
-      picocolors: 1.1.1
-      resolve.exports: 2.0.3
-      semver: 7.7.4
-      string-width: 4.2.3
-      tar-stream: 2.2.0
-      tmp: 0.2.5
-      tree-kill: 1.2.2
-      tsconfig-paths: 4.2.0
-      tslib: 2.8.1
-      yaml: 2.8.3
-      yargs: 17.7.2
-      yargs-parser: 21.1.1
-    optionalDependencies:
-      '@nx/nx-darwin-arm64': 22.5.3
-      '@nx/nx-darwin-x64': 22.5.3
-      '@nx/nx-freebsd-x64': 22.5.3
-      '@nx/nx-linux-arm-gnueabihf': 22.5.3
-      '@nx/nx-linux-arm64-gnu': 22.5.3
-      '@nx/nx-linux-arm64-musl': 22.5.3
-      '@nx/nx-linux-x64-gnu': 22.5.3
-      '@nx/nx-linux-x64-musl': 22.5.3
-      '@nx/nx-win32-arm64-msvc': 22.5.3
-      '@nx/nx-win32-x64-msvc': 22.5.3
-    transitivePeerDependencies:
-      - debug
-
-  nx@22.5.4:
-    dependencies:
-      '@napi-rs/wasm-runtime': 0.2.4
-      '@yarnpkg/lockfile': 1.1.0
-      '@yarnpkg/parsers': 3.0.2
-      '@zkochan/js-yaml': 0.0.7
-      axios: 1.13.5
-      cli-cursor: 3.1.0
-      cli-spinners: 2.6.1
-      cliui: 8.0.1
-      dotenv: 16.4.7
-      dotenv-expand: 11.0.7
-      ejs: 3.1.10
+      ejs: 5.0.1
       enquirer: 2.3.6
       figures: 3.2.0
       flat: 5.0.2
@@ -24028,13 +23945,13 @@ snapshots:
       jsonc-parser: 3.2.0
       lines-and-columns: 2.0.3
       minimatch: 10.2.4
-      node-machine-id: 1.1.12
       npm-run-path: 4.0.1
       open: 8.4.2
       ora: 5.3.0
       picocolors: 1.1.1
       resolve.exports: 2.0.3
       semver: 7.7.4
+      smol-toml: 1.6.1
       string-width: 4.2.3
       tar-stream: 2.2.0
       tmp: 0.2.5
@@ -24045,16 +23962,16 @@ snapshots:
       yargs: 17.7.2
       yargs-parser: 21.1.1
     optionalDependencies:
-      '@nx/nx-darwin-arm64': 22.5.4
-      '@nx/nx-darwin-x64': 22.5.4
-      '@nx/nx-freebsd-x64': 22.5.4
-      '@nx/nx-linux-arm-gnueabihf': 22.5.4
-      '@nx/nx-linux-arm64-gnu': 22.5.4
-      '@nx/nx-linux-arm64-musl': 22.5.4
-      '@nx/nx-linux-x64-gnu': 22.5.4
-      '@nx/nx-linux-x64-musl': 22.5.4
-      '@nx/nx-win32-arm64-msvc': 22.5.4
-      '@nx/nx-win32-x64-msvc': 22.5.4
+      '@nx/nx-darwin-arm64': 22.6.5
+      '@nx/nx-darwin-x64': 22.6.5
+      '@nx/nx-freebsd-x64': 22.6.5
+      '@nx/nx-linux-arm-gnueabihf': 22.6.5
+      '@nx/nx-linux-arm64-gnu': 22.6.5
+      '@nx/nx-linux-arm64-musl': 22.6.5
+      '@nx/nx-linux-x64-gnu': 22.6.5
+      '@nx/nx-linux-x64-musl': 22.6.5
+      '@nx/nx-win32-arm64-msvc': 22.6.5
+      '@nx/nx-win32-x64-msvc': 22.6.5
     transitivePeerDependencies:
       - debug
 
@@ -24182,7 +24099,7 @@ snapshots:
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
-  oxc-parser@0.121.0(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1):
+  oxc-parser@0.121.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0):
     dependencies:
       '@oxc-project/types': 0.121.0
     optionalDependencies:
@@ -24202,7 +24119,7 @@ snapshots:
       '@oxc-parser/binding-linux-x64-gnu': 0.121.0
       '@oxc-parser/binding-linux-x64-musl': 0.121.0
       '@oxc-parser/binding-openharmony-arm64': 0.121.0
-      '@oxc-parser/binding-wasm32-wasi': 0.121.0(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)
+      '@oxc-parser/binding-wasm32-wasi': 0.121.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
       '@oxc-parser/binding-win32-arm64-msvc': 0.121.0
       '@oxc-parser/binding-win32-ia32-msvc': 0.121.0
       '@oxc-parser/binding-win32-x64-msvc': 0.121.0
@@ -24210,7 +24127,7 @@ snapshots:
       - '@emnapi/core'
       - '@emnapi/runtime'
 
-  oxc-resolver@11.19.1(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1):
+  oxc-resolver@11.19.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0):
     optionalDependencies:
       '@oxc-resolver/binding-android-arm-eabi': 11.19.1
       '@oxc-resolver/binding-android-arm64': 11.19.1
@@ -24228,7 +24145,7 @@ snapshots:
       '@oxc-resolver/binding-linux-x64-gnu': 11.19.1
       '@oxc-resolver/binding-linux-x64-musl': 11.19.1
       '@oxc-resolver/binding-openharmony-arm64': 11.19.1
-      '@oxc-resolver/binding-wasm32-wasi': 11.19.1(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)
+      '@oxc-resolver/binding-wasm32-wasi': 11.19.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
       '@oxc-resolver/binding-win32-arm64-msvc': 11.19.1
       '@oxc-resolver/binding-win32-ia32-msvc': 11.19.1
       '@oxc-resolver/binding-win32-x64-msvc': 11.19.1
@@ -24330,9 +24247,11 @@ snapshots:
 
   parseurl@1.3.3: {}
 
-  partysocket@1.1.11:
+  partysocket@1.1.18(react@19.2.5):
     dependencies:
       event-target-polyfill: 0.0.4
+    optionalDependencies:
+      react: 19.2.5
 
   pascal-case@3.1.2:
     dependencies:
@@ -24361,7 +24280,7 @@ snapshots:
       lru-cache: 11.2.6
       minipass: 7.1.3
 
-  path-to-regexp@0.2.5: {}
+  path-to-regexp@0.1.13: {}
 
   path-to-regexp@8.4.2: {}
 
@@ -24455,7 +24374,7 @@ snapshots:
 
   plist@3.1.0(patch_hash=7a3c35087f0ab2a8efbac9e2899990f07d61e2b3e41d8d962ef0bdb0786e1af7):
     dependencies:
-      '@xmldom/xmldom': 0.9.9
+      '@xmldom/xmldom': 0.8.12
       base64-js: 1.5.1
       xmlbuilder: 15.1.1
 
@@ -24486,443 +24405,443 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
-  postcss-attribute-case-insensitive@8.0.0(postcss@8.5.8):
+  postcss-attribute-case-insensitive@8.0.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
-  postcss-calc@10.1.1(postcss@8.5.8):
+  postcss-calc@10.1.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
       postcss-value-parser: 4.2.0
 
-  postcss-clamp@4.1.0(postcss@8.5.8):
+  postcss-clamp@4.1.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-color-functional-notation@8.0.2(postcss@8.5.8):
+  postcss-color-functional-notation@8.0.3(postcss@8.5.10):
     dependencies:
-      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.8)
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.10)
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
 
-  postcss-color-hex-alpha@11.0.0(postcss@8.5.8):
+  postcss-color-hex-alpha@11.0.0(postcss@8.5.10):
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-color-rebeccapurple@11.0.0(postcss@8.5.8):
+  postcss-color-rebeccapurple@11.0.0(postcss@8.5.10):
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-colormin@7.0.5(postcss@8.5.8):
+  postcss-colormin@7.0.5(postcss@8.5.10):
     dependencies:
       browserslist: 4.28.2
       caniuse-api: 3.0.0
       colord: 2.9.3
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-convert-values@7.0.8(postcss@8.5.8):
+  postcss-convert-values@7.0.8(postcss@8.5.10):
     dependencies:
       browserslist: 4.28.2
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-custom-media@12.0.1(postcss@8.5.8):
+  postcss-custom-media@12.0.1(postcss@8.5.10):
     dependencies:
       '@csstools/cascade-layer-name-parser': 3.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
       '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  postcss-custom-properties@15.0.1(postcss@8.5.8):
+  postcss-custom-properties@15.0.1(postcss@8.5.10):
     dependencies:
       '@csstools/cascade-layer-name-parser': 3.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-custom-selectors@9.0.1(postcss@8.5.8):
+  postcss-custom-selectors@9.0.1(postcss@8.5.10):
     dependencies:
       '@csstools/cascade-layer-name-parser': 3.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
-  postcss-dir-pseudo-class@10.0.0(postcss@8.5.8):
+  postcss-dir-pseudo-class@10.0.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
-  postcss-discard-comments@7.0.5(postcss@8.5.8):
+  postcss-discard-comments@7.0.5(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
-  postcss-discard-duplicates@7.0.2(postcss@8.5.8):
+  postcss-discard-duplicates@7.0.2(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  postcss-discard-empty@7.0.1(postcss@8.5.8):
+  postcss-discard-empty@7.0.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  postcss-discard-overridden@7.0.1(postcss@8.5.8):
+  postcss-discard-overridden@7.0.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  postcss-double-position-gradients@7.0.0(postcss@8.5.8):
+  postcss-double-position-gradients@7.0.0(postcss@8.5.10):
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.8)
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.10)
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-easings@4.0.0(postcss@8.5.8):
+  postcss-easings@4.0.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-focus-visible@11.0.0(postcss@8.5.8):
+  postcss-focus-visible@11.0.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
-  postcss-focus-within@10.0.0(postcss@8.5.8):
+  postcss-focus-within@10.0.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
-  postcss-font-variant@5.0.0(postcss@8.5.8):
+  postcss-font-variant@5.0.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  postcss-gap-properties@7.0.0(postcss@8.5.8):
+  postcss-gap-properties@7.0.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  postcss-hexrgba@2.1.0(postcss@8.5.8):
+  postcss-hexrgba@2.1.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-image-set-function@8.0.0(postcss@8.5.8):
+  postcss-image-set-function@8.0.0(postcss@8.5.10):
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-import@16.1.1(postcss@8.5.8):
+  postcss-import@16.1.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
-      resolve: 1.22.11
+      resolve: 1.22.12
 
-  postcss-js@4.1.0(postcss@8.5.8):
+  postcss-js@4.1.0(postcss@8.5.10):
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  postcss-lab-function@8.0.2(postcss@8.5.8):
+  postcss-lab-function@8.0.3(postcss@8.5.10):
     dependencies:
-      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.8)
-      '@csstools/utilities': 3.0.0(postcss@8.5.8)
-      postcss: 8.5.8
+      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.10)
+      '@csstools/utilities': 3.0.0(postcss@8.5.10)
+      postcss: 8.5.10
 
-  postcss-loader@8.2.1(postcss@8.5.8)(typescript@5.9.3)(webpack@5.105.4):
+  postcss-loader@8.2.1(postcss@8.5.10)(typescript@6.0.3)(webpack@5.106.2):
     dependencies:
-      cosmiconfig: 9.0.1(typescript@5.9.3)
+      cosmiconfig: 9.0.1(typescript@6.0.3)
       jiti: 2.6.1
-      postcss: 8.5.8
+      postcss: 8.5.10
       semver: 7.7.4
     optionalDependencies:
-      webpack: 5.105.4(webpack-cli@7.0.2)
+      webpack: 5.106.2(webpack-cli@7.0.2)
     transitivePeerDependencies:
       - typescript
 
-  postcss-logical@9.0.0(postcss@8.5.8):
+  postcss-logical@9.0.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
   postcss-media-query-parser@0.2.3: {}
 
-  postcss-merge-longhand@7.0.5(postcss@8.5.8):
+  postcss-merge-longhand@7.0.5(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
-      stylehacks: 7.0.7(postcss@8.5.8)
+      stylehacks: 7.0.7(postcss@8.5.10)
 
-  postcss-merge-rules@7.0.7(postcss@8.5.8):
+  postcss-merge-rules@7.0.7(postcss@8.5.10):
     dependencies:
       browserslist: 4.28.2
       caniuse-api: 3.0.0
-      cssnano-utils: 5.0.1(postcss@8.5.8)
-      postcss: 8.5.8
+      cssnano-utils: 5.0.1(postcss@8.5.10)
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
-  postcss-minify-font-values@7.0.1(postcss@8.5.8):
+  postcss-minify-font-values@7.0.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-minify-gradients@7.0.1(postcss@8.5.8):
+  postcss-minify-gradients@7.0.1(postcss@8.5.10):
     dependencies:
       colord: 2.9.3
-      cssnano-utils: 5.0.1(postcss@8.5.8)
-      postcss: 8.5.8
+      cssnano-utils: 5.0.1(postcss@8.5.10)
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-minify-params@7.0.5(postcss@8.5.8):
+  postcss-minify-params@7.0.5(postcss@8.5.10):
     dependencies:
       browserslist: 4.28.2
-      cssnano-utils: 5.0.1(postcss@8.5.8)
-      postcss: 8.5.8
+      cssnano-utils: 5.0.1(postcss@8.5.10)
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-minify-selectors@7.0.5(postcss@8.5.8):
+  postcss-minify-selectors@7.0.5(postcss@8.5.10):
     dependencies:
       cssesc: 3.0.0
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
-  postcss-mixins@12.1.2(patch_hash=30fc882486b610a1c252340c87a99f1030c50e698a3c57c837eff7232e29d6d0)(postcss@8.5.8):
+  postcss-mixins@12.1.2(patch_hash=30fc882486b610a1c252340c87a99f1030c50e698a3c57c837eff7232e29d6d0)(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
-      postcss-js: 4.1.0(postcss@8.5.8)
-      postcss-simple-vars: 7.0.1(postcss@8.5.8)
-      sugarss: 5.0.1(postcss@8.5.8)
-      tinyglobby: 0.2.15
+      postcss: 8.5.10
+      postcss-js: 4.1.0(postcss@8.5.10)
+      postcss-simple-vars: 7.0.1(postcss@8.5.10)
+      sugarss: 5.0.1(postcss@8.5.10)
+      tinyglobby: 0.2.16
 
-  postcss-modules-extract-imports@3.1.0(postcss@8.5.8):
+  postcss-modules-extract-imports@3.1.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  postcss-modules-local-by-default@4.2.0(postcss@8.5.8):
+  postcss-modules-local-by-default@4.2.0(postcss@8.5.10):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.8)
-      postcss: 8.5.8
+      icss-utils: 5.1.0(postcss@8.5.10)
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
       postcss-value-parser: 4.2.0
 
-  postcss-modules-scope@3.2.1(postcss@8.5.8):
+  postcss-modules-scope@3.2.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
-  postcss-modules-values@4.0.0(postcss@8.5.8):
+  postcss-modules-values@4.0.0(postcss@8.5.10):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.8)
-      postcss: 8.5.8
+      icss-utils: 5.1.0(postcss@8.5.10)
+      postcss: 8.5.10
 
-  postcss-nested@7.0.2(postcss@8.5.8):
+  postcss-nested@7.0.2(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
-  postcss-nesting@14.0.0(postcss@8.5.8):
+  postcss-nesting@14.0.0(postcss@8.5.10):
     dependencies:
       '@csstools/selector-resolve-nested': 4.0.0(postcss-selector-parser@7.1.1)
       '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.1)
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
-  postcss-normalize-charset@7.0.1(postcss@8.5.8):
+  postcss-normalize-charset@7.0.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  postcss-normalize-display-values@7.0.1(postcss@8.5.8):
+  postcss-normalize-display-values@7.0.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-positions@7.0.1(postcss@8.5.8):
+  postcss-normalize-positions@7.0.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-repeat-style@7.0.1(postcss@8.5.8):
+  postcss-normalize-repeat-style@7.0.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-string@7.0.1(postcss@8.5.8):
+  postcss-normalize-string@7.0.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-timing-functions@7.0.1(postcss@8.5.8):
+  postcss-normalize-timing-functions@7.0.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-unicode@7.0.5(postcss@8.5.8):
+  postcss-normalize-unicode@7.0.5(postcss@8.5.10):
     dependencies:
       browserslist: 4.28.2
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-url@7.0.1(postcss@8.5.8):
+  postcss-normalize-url@7.0.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-whitespace@7.0.1(postcss@8.5.8):
+  postcss-normalize-whitespace@7.0.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-opacity-percentage@3.0.0(postcss@8.5.8):
+  postcss-opacity-percentage@3.0.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  postcss-ordered-values@7.0.2(postcss@8.5.8):
+  postcss-ordered-values@7.0.2(postcss@8.5.10):
     dependencies:
-      cssnano-utils: 5.0.1(postcss@8.5.8)
-      postcss: 8.5.8
+      cssnano-utils: 5.0.1(postcss@8.5.10)
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-overflow-shorthand@7.0.0(postcss@8.5.8):
+  postcss-overflow-shorthand@7.0.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-page-break@3.0.4(postcss@8.5.8):
+  postcss-page-break@3.0.4(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  postcss-place@11.0.0(postcss@8.5.8):
+  postcss-place@11.0.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-preset-env@11.2.0(postcss@8.5.8):
+  postcss-preset-env@11.2.1(postcss@8.5.10):
     dependencies:
-      '@csstools/postcss-alpha-function': 2.0.3(postcss@8.5.8)
-      '@csstools/postcss-cascade-layers': 6.0.0(postcss@8.5.8)
-      '@csstools/postcss-color-function': 5.0.2(postcss@8.5.8)
-      '@csstools/postcss-color-function-display-p3-linear': 2.0.2(postcss@8.5.8)
-      '@csstools/postcss-color-mix-function': 4.0.2(postcss@8.5.8)
-      '@csstools/postcss-color-mix-variadic-function-arguments': 2.0.2(postcss@8.5.8)
-      '@csstools/postcss-content-alt-text': 3.0.0(postcss@8.5.8)
-      '@csstools/postcss-contrast-color-function': 3.0.2(postcss@8.5.8)
-      '@csstools/postcss-exponential-functions': 3.0.1(postcss@8.5.8)
-      '@csstools/postcss-font-format-keywords': 5.0.0(postcss@8.5.8)
-      '@csstools/postcss-font-width-property': 1.0.0(postcss@8.5.8)
-      '@csstools/postcss-gamut-mapping': 3.0.2(postcss@8.5.8)
-      '@csstools/postcss-gradients-interpolation-method': 6.0.2(postcss@8.5.8)
-      '@csstools/postcss-hwb-function': 5.0.2(postcss@8.5.8)
-      '@csstools/postcss-ic-unit': 5.0.0(postcss@8.5.8)
-      '@csstools/postcss-initial': 3.0.0(postcss@8.5.8)
-      '@csstools/postcss-is-pseudo-class': 6.0.0(postcss@8.5.8)
-      '@csstools/postcss-light-dark-function': 3.0.0(postcss@8.5.8)
-      '@csstools/postcss-logical-float-and-clear': 4.0.0(postcss@8.5.8)
-      '@csstools/postcss-logical-overflow': 3.0.0(postcss@8.5.8)
-      '@csstools/postcss-logical-overscroll-behavior': 3.0.0(postcss@8.5.8)
-      '@csstools/postcss-logical-resize': 4.0.0(postcss@8.5.8)
-      '@csstools/postcss-logical-viewport-units': 4.0.0(postcss@8.5.8)
-      '@csstools/postcss-media-minmax': 3.0.1(postcss@8.5.8)
-      '@csstools/postcss-media-queries-aspect-ratio-number-values': 4.0.0(postcss@8.5.8)
-      '@csstools/postcss-mixins': 1.0.0(postcss@8.5.8)
-      '@csstools/postcss-nested-calc': 5.0.0(postcss@8.5.8)
-      '@csstools/postcss-normalize-display-values': 5.0.1(postcss@8.5.8)
-      '@csstools/postcss-oklab-function': 5.0.2(postcss@8.5.8)
-      '@csstools/postcss-position-area-property': 2.0.0(postcss@8.5.8)
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.8)
-      '@csstools/postcss-property-rule-prelude-list': 2.0.0(postcss@8.5.8)
-      '@csstools/postcss-random-function': 3.0.1(postcss@8.5.8)
-      '@csstools/postcss-relative-color-syntax': 4.0.2(postcss@8.5.8)
-      '@csstools/postcss-scope-pseudo-class': 5.0.0(postcss@8.5.8)
-      '@csstools/postcss-sign-functions': 2.0.1(postcss@8.5.8)
-      '@csstools/postcss-stepped-value-functions': 5.0.1(postcss@8.5.8)
-      '@csstools/postcss-syntax-descriptor-syntax-production': 2.0.0(postcss@8.5.8)
-      '@csstools/postcss-system-ui-font-family': 2.0.0(postcss@8.5.8)
-      '@csstools/postcss-text-decoration-shorthand': 5.0.3(postcss@8.5.8)
-      '@csstools/postcss-trigonometric-functions': 5.0.1(postcss@8.5.8)
-      '@csstools/postcss-unset-value': 5.0.0(postcss@8.5.8)
-      autoprefixer: 10.4.24(postcss@8.5.8)
+      '@csstools/postcss-alpha-function': 2.0.4(postcss@8.5.10)
+      '@csstools/postcss-cascade-layers': 6.0.0(postcss@8.5.10)
+      '@csstools/postcss-color-function': 5.0.3(postcss@8.5.10)
+      '@csstools/postcss-color-function-display-p3-linear': 2.0.3(postcss@8.5.10)
+      '@csstools/postcss-color-mix-function': 4.0.3(postcss@8.5.10)
+      '@csstools/postcss-color-mix-variadic-function-arguments': 2.0.3(postcss@8.5.10)
+      '@csstools/postcss-content-alt-text': 3.0.0(postcss@8.5.10)
+      '@csstools/postcss-contrast-color-function': 3.0.3(postcss@8.5.10)
+      '@csstools/postcss-exponential-functions': 3.0.2(postcss@8.5.10)
+      '@csstools/postcss-font-format-keywords': 5.0.0(postcss@8.5.10)
+      '@csstools/postcss-font-width-property': 1.0.0(postcss@8.5.10)
+      '@csstools/postcss-gamut-mapping': 3.0.3(postcss@8.5.10)
+      '@csstools/postcss-gradients-interpolation-method': 6.0.3(postcss@8.5.10)
+      '@csstools/postcss-hwb-function': 5.0.3(postcss@8.5.10)
+      '@csstools/postcss-ic-unit': 5.0.0(postcss@8.5.10)
+      '@csstools/postcss-initial': 3.0.0(postcss@8.5.10)
+      '@csstools/postcss-is-pseudo-class': 6.0.0(postcss@8.5.10)
+      '@csstools/postcss-light-dark-function': 3.0.0(postcss@8.5.10)
+      '@csstools/postcss-logical-float-and-clear': 4.0.0(postcss@8.5.10)
+      '@csstools/postcss-logical-overflow': 3.0.0(postcss@8.5.10)
+      '@csstools/postcss-logical-overscroll-behavior': 3.0.0(postcss@8.5.10)
+      '@csstools/postcss-logical-resize': 4.0.0(postcss@8.5.10)
+      '@csstools/postcss-logical-viewport-units': 4.0.0(postcss@8.5.10)
+      '@csstools/postcss-media-minmax': 3.0.2(postcss@8.5.10)
+      '@csstools/postcss-media-queries-aspect-ratio-number-values': 4.0.0(postcss@8.5.10)
+      '@csstools/postcss-mixins': 1.0.0(postcss@8.5.10)
+      '@csstools/postcss-nested-calc': 5.0.0(postcss@8.5.10)
+      '@csstools/postcss-normalize-display-values': 5.0.1(postcss@8.5.10)
+      '@csstools/postcss-oklab-function': 5.0.3(postcss@8.5.10)
+      '@csstools/postcss-position-area-property': 2.0.0(postcss@8.5.10)
+      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.10)
+      '@csstools/postcss-property-rule-prelude-list': 2.0.0(postcss@8.5.10)
+      '@csstools/postcss-random-function': 3.0.2(postcss@8.5.10)
+      '@csstools/postcss-relative-color-syntax': 4.0.3(postcss@8.5.10)
+      '@csstools/postcss-scope-pseudo-class': 5.0.0(postcss@8.5.10)
+      '@csstools/postcss-sign-functions': 2.0.2(postcss@8.5.10)
+      '@csstools/postcss-stepped-value-functions': 5.0.2(postcss@8.5.10)
+      '@csstools/postcss-syntax-descriptor-syntax-production': 2.0.0(postcss@8.5.10)
+      '@csstools/postcss-system-ui-font-family': 2.0.0(postcss@8.5.10)
+      '@csstools/postcss-text-decoration-shorthand': 5.0.3(postcss@8.5.10)
+      '@csstools/postcss-trigonometric-functions': 5.0.2(postcss@8.5.10)
+      '@csstools/postcss-unset-value': 5.0.0(postcss@8.5.10)
+      autoprefixer: 10.4.24(postcss@8.5.10)
       browserslist: 4.28.2
-      css-blank-pseudo: 8.0.1(postcss@8.5.8)
-      css-has-pseudo: 8.0.0(postcss@8.5.8)
-      css-prefers-color-scheme: 11.0.0(postcss@8.5.8)
+      css-blank-pseudo: 8.0.1(postcss@8.5.10)
+      css-has-pseudo: 8.0.0(postcss@8.5.10)
+      css-prefers-color-scheme: 11.0.0(postcss@8.5.10)
       cssdb: 8.8.0
-      postcss: 8.5.8
-      postcss-attribute-case-insensitive: 8.0.0(postcss@8.5.8)
-      postcss-clamp: 4.1.0(postcss@8.5.8)
-      postcss-color-functional-notation: 8.0.2(postcss@8.5.8)
-      postcss-color-hex-alpha: 11.0.0(postcss@8.5.8)
-      postcss-color-rebeccapurple: 11.0.0(postcss@8.5.8)
-      postcss-custom-media: 12.0.1(postcss@8.5.8)
-      postcss-custom-properties: 15.0.1(postcss@8.5.8)
-      postcss-custom-selectors: 9.0.1(postcss@8.5.8)
-      postcss-dir-pseudo-class: 10.0.0(postcss@8.5.8)
-      postcss-double-position-gradients: 7.0.0(postcss@8.5.8)
-      postcss-focus-visible: 11.0.0(postcss@8.5.8)
-      postcss-focus-within: 10.0.0(postcss@8.5.8)
-      postcss-font-variant: 5.0.0(postcss@8.5.8)
-      postcss-gap-properties: 7.0.0(postcss@8.5.8)
-      postcss-image-set-function: 8.0.0(postcss@8.5.8)
-      postcss-lab-function: 8.0.2(postcss@8.5.8)
-      postcss-logical: 9.0.0(postcss@8.5.8)
-      postcss-nesting: 14.0.0(postcss@8.5.8)
-      postcss-opacity-percentage: 3.0.0(postcss@8.5.8)
-      postcss-overflow-shorthand: 7.0.0(postcss@8.5.8)
-      postcss-page-break: 3.0.4(postcss@8.5.8)
-      postcss-place: 11.0.0(postcss@8.5.8)
-      postcss-pseudo-class-any-link: 11.0.0(postcss@8.5.8)
-      postcss-replace-overflow-wrap: 4.0.0(postcss@8.5.8)
-      postcss-selector-not: 9.0.0(postcss@8.5.8)
+      postcss: 8.5.10
+      postcss-attribute-case-insensitive: 8.0.0(postcss@8.5.10)
+      postcss-clamp: 4.1.0(postcss@8.5.10)
+      postcss-color-functional-notation: 8.0.3(postcss@8.5.10)
+      postcss-color-hex-alpha: 11.0.0(postcss@8.5.10)
+      postcss-color-rebeccapurple: 11.0.0(postcss@8.5.10)
+      postcss-custom-media: 12.0.1(postcss@8.5.10)
+      postcss-custom-properties: 15.0.1(postcss@8.5.10)
+      postcss-custom-selectors: 9.0.1(postcss@8.5.10)
+      postcss-dir-pseudo-class: 10.0.0(postcss@8.5.10)
+      postcss-double-position-gradients: 7.0.0(postcss@8.5.10)
+      postcss-focus-visible: 11.0.0(postcss@8.5.10)
+      postcss-focus-within: 10.0.0(postcss@8.5.10)
+      postcss-font-variant: 5.0.0(postcss@8.5.10)
+      postcss-gap-properties: 7.0.0(postcss@8.5.10)
+      postcss-image-set-function: 8.0.0(postcss@8.5.10)
+      postcss-lab-function: 8.0.3(postcss@8.5.10)
+      postcss-logical: 9.0.0(postcss@8.5.10)
+      postcss-nesting: 14.0.0(postcss@8.5.10)
+      postcss-opacity-percentage: 3.0.0(postcss@8.5.10)
+      postcss-overflow-shorthand: 7.0.0(postcss@8.5.10)
+      postcss-page-break: 3.0.4(postcss@8.5.10)
+      postcss-place: 11.0.0(postcss@8.5.10)
+      postcss-pseudo-class-any-link: 11.0.0(postcss@8.5.10)
+      postcss-replace-overflow-wrap: 4.0.0(postcss@8.5.10)
+      postcss-selector-not: 9.0.0(postcss@8.5.10)
 
-  postcss-pseudo-class-any-link@11.0.0(postcss@8.5.8):
+  postcss-pseudo-class-any-link@11.0.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
-  postcss-reduce-initial@7.0.5(postcss@8.5.8):
+  postcss-reduce-initial@7.0.5(postcss@8.5.10):
     dependencies:
       browserslist: 4.28.2
       caniuse-api: 3.0.0
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  postcss-reduce-transforms@7.0.1(postcss@8.5.8):
+  postcss-reduce-transforms@7.0.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
 
-  postcss-replace-overflow-wrap@4.0.0(postcss@8.5.8):
+  postcss-replace-overflow-wrap@4.0.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
   postcss-resolve-nested-selector@0.1.6: {}
 
-  postcss-safe-parser@7.0.1(postcss@8.5.8):
+  postcss-safe-parser@7.0.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  postcss-scss@4.0.9(postcss@8.5.8):
+  postcss-scss@4.0.9(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  postcss-selector-not@9.0.0(postcss@8.5.8):
+  postcss-selector-not@9.0.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
   postcss-selector-parser@7.1.1:
@@ -24930,24 +24849,24 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-simple-vars@7.0.1(postcss@8.5.8):
+  postcss-simple-vars@7.0.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
-  postcss-svgo@7.1.0(postcss@8.5.8):
+  postcss-svgo@7.1.0(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-value-parser: 4.2.0
       svgo: 4.0.1
 
-  postcss-unique-selectors@7.0.4(postcss@8.5.8):
+  postcss-unique-selectors@7.0.4(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
   postcss-value-parser@4.2.0: {}
 
-  postcss@8.5.8:
+  postcss@8.5.10:
     dependencies:
       nanoid: 3.3.11
       picocolors: 1.1.1
@@ -24963,17 +24882,17 @@ snapshots:
     dependencies:
       xtend: 4.0.2
 
-  posthog-js@1.364.7:
+  posthog-js@1.369.3:
     dependencies:
-      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api': 1.9.1
       '@opentelemetry/api-logs': 0.208.0
-      '@opentelemetry/exporter-logs-otlp-http': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.6.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-logs': 0.208.0(@opentelemetry/api@1.9.0)
-      '@posthog/core': 1.24.6
-      '@posthog/types': 1.364.7
+      '@opentelemetry/exporter-logs-otlp-http': 0.208.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.7.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-logs': 0.208.0(@opentelemetry/api@1.9.1)
+      '@posthog/core': 1.25.2
+      '@posthog/types': 1.369.3
       core-js: 3.48.0
-      dompurify: 3.3.3
+      dompurify: 3.4.0
       fflate: 0.4.8
       preact: 10.28.3
       query-selector-shadow-dom: 1.0.1
@@ -24992,7 +24911,7 @@ snapshots:
 
   prettier@2.8.8: {}
 
-  prettier@3.8.1: {}
+  prettier@3.8.3: {}
 
   pretty-error@4.0.0:
     dependencies:
@@ -25009,7 +24928,7 @@ snapshots:
     dependencies:
       '@jest/schemas': 30.0.5
       ansi-styles: 5.2.0
-      react-is: 19.2.4
+      react-is: 19.2.5
 
   proc-log@5.0.0: {}
 
@@ -25049,7 +24968,7 @@ snapshots:
 
   property-information@7.1.0: {}
 
-  protobufjs@7.5.4:
+  protobufjs@7.5.5:
     dependencies:
       '@protobufjs/aspromise': 1.1.2
       '@protobufjs/base64': 1.1.2
@@ -25073,6 +24992,8 @@ snapshots:
 
   proxy-from-env@1.1.0: {}
 
+  proxy-from-env@2.1.0: {}
+
   public-encrypt@4.0.3:
     dependencies:
       bn.js: 4.12.3
@@ -25154,44 +25075,44 @@ snapshots:
       iconv-lite: 0.7.2
       unpipe: 1.0.0
 
-  raw-loader@4.0.2(webpack@5.105.4):
+  raw-loader@4.0.2(webpack@5.106.2):
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 3.3.0
-      webpack: 5.105.4(webpack-cli@7.0.2)
+      webpack: 5.106.2(webpack-cli@7.0.2)
 
-  re-resizable@6.11.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  re-resizable@6.11.2(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
     dependencies:
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
 
-  react-beautiful-dnd@13.1.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  react-beautiful-dnd@13.1.1(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
     dependencies:
-      '@babel/runtime': 7.28.6
+      '@babel/runtime': 7.29.2
       css-box-model: 1.2.1
       memoize-one: 5.2.1
       raf-schd: 4.0.3
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      react-redux: 7.2.9(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+      react-redux: 7.2.9(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       redux: 4.2.1
-      use-memo-one: 1.1.3(react@19.2.4)
+      use-memo-one: 1.1.3(react@19.2.5)
     transitivePeerDependencies:
       - react-native
 
-  react-blurhash@0.3.0(patch_hash=58bc7f075478017ce27bcc252e8509876390db106246bd5b0a7446642cc4b505)(blurhash@2.0.5)(react@19.2.4):
+  react-blurhash@0.3.0(patch_hash=58bc7f075478017ce27bcc252e8509876390db106246bd5b0a7446642cc4b505)(blurhash@2.0.5)(react@19.2.5):
     dependencies:
       blurhash: 2.0.5
-      react: 19.2.4
+      react: 19.2.5
 
-  react-clientside-effect@1.2.8(react@19.2.4):
+  react-clientside-effect@1.2.8(react@19.2.5):
     dependencies:
-      '@babel/runtime': 7.28.6
-      react: 19.2.4
+      '@babel/runtime': 7.29.2
+      react: 19.2.5
 
-  react-docgen-typescript@2.4.0(typescript@5.9.3):
+  react-docgen-typescript@2.4.0(typescript@6.0.3):
     dependencies:
-      typescript: 5.9.3
+      typescript: 6.0.3
 
   react-docgen@8.0.3:
     dependencies:
@@ -25203,101 +25124,101 @@ snapshots:
       '@types/doctrine': 0.0.9
       '@types/resolve': 1.20.6
       doctrine: 3.0.0
-      resolve: 1.22.11
+      resolve: 1.22.12
       strip-indent: 4.1.1
     transitivePeerDependencies:
       - supports-color
 
-  react-dom@19.2.4(react@19.2.4):
+  react-dom@19.2.5(react@19.2.5):
     dependencies:
-      react: 19.2.4
+      react: 19.2.5
       scheduler: 0.27.0
 
-  react-focus-lock@2.13.7(@types/react@19.2.10)(react@19.2.4):
+  react-focus-lock@2.13.7(@types/react@19.2.14)(react@19.2.5):
     dependencies:
-      '@babel/runtime': 7.28.6
+      '@babel/runtime': 7.29.2
       focus-lock: 1.3.6
       prop-types: 15.8.1
-      react: 19.2.4
-      react-clientside-effect: 1.2.8(react@19.2.4)
-      use-callback-ref: 1.3.3(@types/react@19.2.10)(react@19.2.4)
-      use-sidecar: 1.1.3(@types/react@19.2.10)(react@19.2.4)
+      react: 19.2.5
+      react-clientside-effect: 1.2.8(react@19.2.5)
+      use-callback-ref: 1.3.3(@types/react@19.2.14)(react@19.2.5)
+      use-sidecar: 1.1.3(@types/react@19.2.14)(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
   react-is@16.13.1: {}
 
   react-is@17.0.2: {}
 
-  react-is@19.2.4: {}
+  react-is@19.2.5: {}
 
-  react-merge-refs@3.0.2(react@19.2.4):
+  react-merge-refs@3.0.2(react@19.2.5):
     optionalDependencies:
-      react: 19.2.4
+      react: 19.2.5
 
   react-property@2.0.2: {}
 
-  react-redux@7.2.9(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  react-redux@7.2.9(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
     dependencies:
-      '@babel/runtime': 7.28.6
+      '@babel/runtime': 7.29.2
       '@types/react-redux': 7.1.34
       hoist-non-react-statics: 3.3.2
       loose-envify: 1.4.0
       prop-types: 15.8.1
-      react: 19.2.4
+      react: 19.2.5
       react-is: 17.0.2
     optionalDependencies:
-      react-dom: 19.2.4(react@19.2.4)
+      react-dom: 19.2.5(react@19.2.5)
 
-  react-remove-scroll-bar@2.3.8(@types/react@19.2.10)(react@19.2.4):
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.14)(react@19.2.5):
     dependencies:
-      react: 19.2.4
-      react-style-singleton: 2.2.3(@types/react@19.2.10)(react@19.2.4)
+      react: 19.2.5
+      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.5)
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  react-remove-scroll@2.7.2(@types/react@19.2.10)(react@19.2.4):
+  react-remove-scroll@2.7.2(@types/react@19.2.14)(react@19.2.5):
     dependencies:
-      react: 19.2.4
-      react-remove-scroll-bar: 2.3.8(@types/react@19.2.10)(react@19.2.4)
-      react-style-singleton: 2.2.3(@types/react@19.2.10)(react@19.2.4)
+      react: 19.2.5
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.14)(react@19.2.5)
+      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.5)
       tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@19.2.10)(react@19.2.4)
-      use-sidecar: 1.1.3(@types/react@19.2.10)(react@19.2.4)
+      use-callback-ref: 1.3.3(@types/react@19.2.14)(react@19.2.5)
+      use-sidecar: 1.1.3(@types/react@19.2.14)(react@19.2.5)
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  react-resizable-panels@4.7.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  react-resizable-panels@4.7.2(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
     dependencies:
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
 
   react-string-replace@2.0.1: {}
 
-  react-style-singleton@2.2.3(@types/react@19.2.10)(react@19.2.4):
+  react-style-singleton@2.2.3(@types/react@19.2.14)(react@19.2.5):
     dependencies:
       get-nonce: 1.0.1
-      react: 19.2.4
+      react: 19.2.5
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  react-transition-group@4.4.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  react-transition-group@4.4.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
     dependencies:
-      '@babel/runtime': 7.28.6
+      '@babel/runtime': 7.29.2
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
 
-  react-virtuoso@4.18.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  react-virtuoso@4.18.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
     dependencies:
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
 
-  react@19.2.4: {}
+  react@19.2.5: {}
 
   read-binary-file-arch@1.0.6:
     dependencies:
@@ -25366,7 +25287,7 @@ snapshots:
 
   rechoir@0.8.0:
     dependencies:
-      resolve: 1.22.11
+      resolve: 1.22.12
 
   redent@3.0.0:
     dependencies:
@@ -25375,7 +25296,7 @@ snapshots:
 
   redux@4.2.1:
     dependencies:
-      '@babel/runtime': 7.28.6
+      '@babel/runtime': 7.29.2
 
   reflect-metadata@0.1.14: {}
 
@@ -25489,8 +25410,9 @@ snapshots:
 
   resolve.exports@2.0.3: {}
 
-  resolve@1.22.11:
+  resolve@1.22.12:
     dependencies:
+      es-errors: 1.3.0
       is-core-module: 2.16.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
@@ -25555,29 +25477,34 @@ snapshots:
 
   robust-predicates@3.0.3: {}
 
-  rolldown@1.0.0-rc.12(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1):
+  rolldown@1.0.0-rc.16:
     dependencies:
-      '@oxc-project/types': 0.122.0
-      '@rolldown/pluginutils': 1.0.0-rc.12
+      '@oxc-project/types': 0.126.0
+      '@rolldown/pluginutils': 1.0.0-rc.16
     optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.0.0-rc.12
-      '@rolldown/binding-darwin-arm64': 1.0.0-rc.12
-      '@rolldown/binding-darwin-x64': 1.0.0-rc.12
-      '@rolldown/binding-freebsd-x64': 1.0.0-rc.12
-      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-rc.12
-      '@rolldown/binding-linux-arm64-gnu': 1.0.0-rc.12
-      '@rolldown/binding-linux-arm64-musl': 1.0.0-rc.12
-      '@rolldown/binding-linux-ppc64-gnu': 1.0.0-rc.12
-      '@rolldown/binding-linux-s390x-gnu': 1.0.0-rc.12
-      '@rolldown/binding-linux-x64-gnu': 1.0.0-rc.12
-      '@rolldown/binding-linux-x64-musl': 1.0.0-rc.12
-      '@rolldown/binding-openharmony-arm64': 1.0.0-rc.12
-      '@rolldown/binding-wasm32-wasi': 1.0.0-rc.12(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)
-      '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.12
-      '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.12
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
+      '@rolldown/binding-android-arm64': 1.0.0-rc.16
+      '@rolldown/binding-darwin-arm64': 1.0.0-rc.16
+      '@rolldown/binding-darwin-x64': 1.0.0-rc.16
+      '@rolldown/binding-freebsd-x64': 1.0.0-rc.16
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-rc.16
+      '@rolldown/binding-linux-arm64-gnu': 1.0.0-rc.16
+      '@rolldown/binding-linux-arm64-musl': 1.0.0-rc.16
+      '@rolldown/binding-linux-ppc64-gnu': 1.0.0-rc.16
+      '@rolldown/binding-linux-s390x-gnu': 1.0.0-rc.16
+      '@rolldown/binding-linux-x64-gnu': 1.0.0-rc.16
+      '@rolldown/binding-linux-x64-musl': 1.0.0-rc.16
+      '@rolldown/binding-openharmony-arm64': 1.0.0-rc.16
+      '@rolldown/binding-wasm32-wasi': 1.0.0-rc.16
+      '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.16
+      '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.16
+
+  rollup-plugin-external-globals@0.13.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8)):
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))
+      estree-walker: 3.0.3
+      is-reference: 3.0.3
+      magic-string: 0.30.21
+      rollup: 4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8)
 
   rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8):
     dependencies:
@@ -25666,18 +25593,18 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  sanitize-filename@1.6.3:
+  sanitize-filename@1.6.4:
     dependencies:
       truncate-utf8-bytes: 1.0.2
 
-  sanitize-html@2.17.2:
+  sanitize-html@2.17.3:
     dependencies:
       deepmerge: 4.3.1
       escape-string-regexp: 4.0.0
       htmlparser2: 10.1.0
       is-plain-object: 5.0.0
       parse-srcset: 1.0.2
-      postcss: 8.5.8
+      postcss: 8.5.10
 
   sax@1.6.0: {}
 
@@ -25720,10 +25647,6 @@ snapshots:
 
   semver@6.3.1: {}
 
-  semver@7.5.4:
-    dependencies:
-      lru-cache: 6.0.0
-
   semver@7.7.4: {}
 
   send@0.19.2:
@@ -25966,11 +25889,11 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
-  source-map-loader@5.0.0(webpack@5.105.4):
+  source-map-loader@5.0.0(webpack@5.106.2):
     dependencies:
       iconv-lite: 0.6.3
       source-map-js: 1.2.1
-      webpack: 5.105.4(webpack-cli@7.0.2)
+      webpack: 5.106.2(webpack-cli@7.0.2)
 
   source-map-support@0.5.13:
     dependencies:
@@ -26050,7 +25973,7 @@ snapshots:
       bcrypt-pbkdf: 1.0.2
     optionalDependencies:
       cpu-features: 0.0.10
-      nan: 2.25.0
+      nan: 2.26.2
 
   ssim.js@3.5.0: {}
 
@@ -26076,49 +25999,51 @@ snapshots:
 
   std-env@3.10.0: {}
 
-  std-env@4.0.0: {}
+  std-env@4.1.0: {}
 
   stop-iteration-iterator@1.1.0:
     dependencies:
       es-errors: 1.3.0
       internal-slot: 1.1.0
 
-  storybook-addon-vis@3.1.2(@storybook/addon-vitest@10.2.19(@vitest/browser-playwright@4.1.2)(@vitest/browser@4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2))(@vitest/runner@4.1.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vitest@4.1.2))(@vitest/browser-playwright@4.1.2)(@vitest/browser@4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2))(babel-plugin-macros@3.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vitest@4.1.2):
+  storybook-addon-vis@4.2.1(@storybook/addon-vitest@10.3.5(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(@vitest/runner@4.1.5)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vitest@4.1.5))(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(babel-plugin-macros@3.1.0)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@6.0.3)(vitest@4.1.5):
     dependencies:
-      '@storybook/addon-vitest': 10.2.19(@vitest/browser-playwright@4.1.2)(@vitest/browser@4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2))(@vitest/runner@4.1.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vitest@4.1.2)
-      '@storybook/icons': 2.0.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@vitest/browser': 4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2)
+      '@storybook/addon-vitest': 10.3.5(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(@vitest/runner@4.1.5)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(vitest@4.1.5)
+      '@storybook/icons': 2.0.1(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@vitest/browser': 4.1.5(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.5)
       glob: 13.0.6
       is-ci: 4.1.0
-      memoize: 10.2.0
+      memoize: 11.0.0
       pathe: 2.0.3
-      storybook: 10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      type-plus: 8.0.0-beta.7
-      vitest: 4.1.2(@opentelemetry/api@1.9.0)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.2)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
-      vitest-plugin-vis: 4.1.0(@vitest/browser-playwright@4.1.2)(@vitest/browser@4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2))(babel-plugin-macros@3.1.0)(vitest@4.1.2)
+      storybook: 10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      type-plus: 8.0.0-beta.8(typescript@6.0.3)
+      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      vitest-plugin-vis: 5.1.0(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(babel-plugin-macros@3.1.0)(typescript@6.0.3)(vitest@4.1.5)
     transitivePeerDependencies:
       - '@vitest/browser-playwright'
       - '@vitest/browser-webdriverio'
       - babel-plugin-macros
       - react
       - react-dom
+      - typescript
 
-  storybook@10.2.19(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  storybook@10.3.5(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/icons': 2.0.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@storybook/icons': 2.0.1(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@testing-library/jest-dom': 6.9.1
       '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1)
       '@vitest/expect': 3.2.4
       '@vitest/spy': 3.2.4
+      '@webcontainer/env': 1.1.1
       esbuild: 0.27.4
       open: 10.2.0
       recast: 0.23.11
       semver: 7.7.4
-      use-sync-external-store: 1.6.0(react@19.2.4)
+      use-sync-external-store: 1.6.0(react@19.2.5)
       ws: 8.20.0
     optionalDependencies:
-      prettier: 3.8.1
+      prettier: 3.8.3
     transitivePeerDependencies:
       - '@testing-library/dom'
       - bufferutil
@@ -26138,7 +26063,7 @@ snapshots:
       readable-stream: 3.6.2
       xtend: 4.0.2
 
-  streamx@2.23.0:
+  streamx@2.25.0:
     dependencies:
       events-universal: 1.0.1
       fast-fifo: 1.3.2
@@ -26278,22 +26203,22 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.7
 
-  stylehacks@7.0.7(postcss@8.5.8):
+  stylehacks@7.0.7(postcss@8.5.10):
     dependencies:
       browserslist: 4.28.2
-      postcss: 8.5.8
+      postcss: 8.5.10
       postcss-selector-parser: 7.1.1
 
-  stylelint-config-recommended@18.0.0(stylelint@17.6.0(typescript@5.9.3)):
+  stylelint-config-recommended@18.0.0(stylelint@17.8.0(typescript@6.0.3)):
     dependencies:
-      stylelint: 17.6.0(typescript@5.9.3)
+      stylelint: 17.8.0(typescript@6.0.3)
 
-  stylelint-config-standard@40.0.0(stylelint@17.6.0(typescript@5.9.3)):
+  stylelint-config-standard@40.0.0(stylelint@17.8.0(typescript@6.0.3)):
     dependencies:
-      stylelint: 17.6.0(typescript@5.9.3)
-      stylelint-config-recommended: 18.0.0(stylelint@17.6.0(typescript@5.9.3))
+      stylelint: 17.8.0(typescript@6.0.3)
+      stylelint-config-recommended: 18.0.0(stylelint@17.8.0(typescript@6.0.3))
 
-  stylelint-scss@7.0.0(stylelint@17.6.0(typescript@5.9.3)):
+  stylelint-scss@7.0.0(stylelint@17.8.0(typescript@6.0.3)):
     dependencies:
       css-tree: 3.2.1
       is-plain-object: 5.0.0
@@ -26303,25 +26228,25 @@ snapshots:
       postcss-resolve-nested-selector: 0.1.6
       postcss-selector-parser: 7.1.1
       postcss-value-parser: 4.2.0
-      stylelint: 17.6.0(typescript@5.9.3)
+      stylelint: 17.8.0(typescript@6.0.3)
 
-  stylelint-value-no-unknown-custom-properties@6.1.1(stylelint@17.6.0(typescript@5.9.3)):
+  stylelint-value-no-unknown-custom-properties@6.1.1(stylelint@17.8.0(typescript@6.0.3)):
     dependencies:
       postcss-value-parser: 4.2.0
-      resolve: 1.22.11
-      stylelint: 17.6.0(typescript@5.9.3)
+      resolve: 1.22.12
+      stylelint: 17.8.0(typescript@6.0.3)
 
-  stylelint@17.6.0(typescript@5.9.3):
+  stylelint@17.8.0(typescript@6.0.3):
     dependencies:
-      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-syntax-patches-for-csstree': 1.1.2(css-tree@3.2.1)
+      '@csstools/css-syntax-patches-for-csstree': 1.1.3(css-tree@3.2.1)
       '@csstools/css-tokenizer': 4.0.0
       '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/selector-resolve-nested': 4.0.0(postcss-selector-parser@7.1.1)
       '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.1)
       colord: 2.9.3
-      cosmiconfig: 9.0.1(typescript@5.9.3)
+      cosmiconfig: 9.0.1(typescript@6.0.3)
       css-functions-list: 3.3.3
       css-tree: 3.2.1
       debug: 4.4.3
@@ -26340,8 +26265,8 @@ snapshots:
       micromatch: 4.0.8
       normalize-path: 3.0.0
       picocolors: 1.1.1
-      postcss: 8.5.8
-      postcss-safe-parser: 7.0.1(postcss@8.5.8)
+      postcss: 8.5.10
+      postcss-safe-parser: 7.0.1(postcss@8.5.10)
       postcss-selector-parser: 7.1.1
       postcss-value-parser: 4.2.0
       string-width: 8.2.0
@@ -26355,9 +26280,9 @@ snapshots:
 
   stylis@4.3.6: {}
 
-  sugarss@5.0.1(postcss@8.5.8):
+  sugarss@5.0.1(postcss@8.5.10):
     dependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
 
   sumchecker@3.0.1:
     dependencies:
@@ -26447,12 +26372,12 @@ snapshots:
       pump: 3.0.4
       tar-stream: 2.2.0
 
-  tar-fs@3.1.1:
+  tar-fs@3.1.2:
     dependencies:
       pump: 3.0.4
       tar-stream: 3.1.8
     optionalDependencies:
-      bare-fs: 4.5.5
+      bare-fs: 4.7.0
       bare-path: 3.0.0
     transitivePeerDependencies:
       - bare-abort-controller
@@ -26472,9 +26397,9 @@ snapshots:
   tar-stream@3.1.8:
     dependencies:
       b4a: 1.8.0
-      bare-fs: 4.5.5
+      bare-fs: 4.7.0
       fast-fifo: 1.3.2
-      streamx: 2.23.0
+      streamx: 2.25.0
     transitivePeerDependencies:
       - bare-abort-controller
       - bare-buffer
@@ -26490,7 +26415,7 @@ snapshots:
 
   teex@1.0.1:
     dependencies:
-      streamx: 2.23.0
+      streamx: 2.25.0
     transitivePeerDependencies:
       - bare-abort-controller
       - react-native-b4a
@@ -26511,24 +26436,24 @@ snapshots:
 
   temporal-spec@0.3.1: {}
 
-  terser-webpack-plugin@5.4.0(esbuild@0.27.4)(webpack@5.105.4(esbuild@0.27.4)):
+  terser-webpack-plugin@5.4.0(esbuild@0.27.4)(webpack@5.106.2(esbuild@0.27.4)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       jest-worker: 27.5.1
       schema-utils: 4.3.3
       terser: 5.46.1
-      webpack: 5.105.4(esbuild@0.27.4)
+      webpack: 5.106.2(esbuild@0.27.4)
     optionalDependencies:
       esbuild: 0.27.4
     optional: true
 
-  terser-webpack-plugin@5.4.0(webpack@5.105.4):
+  terser-webpack-plugin@5.4.0(webpack@5.106.2):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       jest-worker: 27.5.1
       schema-utils: 4.3.3
       terser: 5.46.1
-      webpack: 5.105.4(webpack-cli@7.0.2)
+      webpack: 5.106.2(webpack-cli@7.0.2)
 
   terser@5.46.1:
     dependencies:
@@ -26545,11 +26470,11 @@ snapshots:
 
   test-exclude@6.0.0:
     dependencies:
-      '@istanbuljs/schema': 0.1.3
+      '@istanbuljs/schema': 0.1.6
       glob: 7.2.3
       minimatch: 3.1.5
 
-  testcontainers@11.12.0:
+  testcontainers@11.14.0:
     dependencies:
       '@balena/dockerignore': 1.0.2
       '@types/dockerode': 4.0.1
@@ -26557,15 +26482,15 @@ snapshots:
       async-lock: 1.4.1
       byline: 5.0.0
       debug: 4.4.3
-      docker-compose: 1.3.1
-      dockerode: 4.0.9
-      get-port: 7.1.0
+      docker-compose: 1.4.2
+      dockerode: 4.0.10
+      get-port: 7.2.0
       proper-lockfile: 4.1.2
       properties-reader: 3.0.1
       ssh-remote-port-forward: 1.0.4
-      tar-fs: 3.1.1
+      tar-fs: 3.1.2
       tmp: 0.2.5
-      undici: 7.24.7
+      undici: 7.25.0
     transitivePeerDependencies:
       - bare-abort-controller
       - bare-buffer
@@ -26604,9 +26529,9 @@ snapshots:
 
   tinyexec@1.0.2: {}
 
-  tinyexec@1.0.4: {}
+  tinyexec@1.1.1: {}
 
-  tinyglobby@0.2.15:
+  tinyglobby@0.2.16:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.4)
       picomatch: 4.0.4
@@ -26671,14 +26596,14 @@ snapshots:
     dependencies:
       utf8-byte-length: 1.0.5
 
-  ts-api-utils@2.5.0(typescript@5.9.3):
+  ts-api-utils@2.5.0(typescript@6.0.3):
     dependencies:
-      typescript: 5.9.3
+      typescript: 6.0.3
 
-  ts-declaration-location@1.0.7(typescript@5.9.3):
+  ts-declaration-location@1.0.7(typescript@6.0.3):
     dependencies:
       picomatch: 4.0.4
-      typescript: 5.9.3
+      typescript: 6.0.3
 
   ts-dedent@2.2.0: {}
 
@@ -26702,7 +26627,7 @@ snapshots:
   tsx@4.21.0:
     dependencies:
       esbuild: 0.27.4
-      get-tsconfig: 4.13.7
+      get-tsconfig: 4.14.0
     optionalDependencies:
       fsevents: 2.3.3
     optional: true
@@ -26757,9 +26682,10 @@ snapshots:
       media-typer: 1.1.0
       mime-types: 3.0.2
 
-  type-plus@8.0.0-beta.7:
+  type-plus@8.0.0-beta.8(typescript@6.0.3):
     dependencies:
       tersify: 3.12.1
+      typescript: 6.0.3
       unpartial: 1.0.5
 
   typed-array-buffer@1.0.3:
@@ -26795,27 +26721,27 @@ snapshots:
       possible-typed-array-names: 1.1.0
       reflect.getprototypeof: 1.0.10
 
-  typedoc-plugin-markdown@4.10.0(typedoc@0.28.17(typescript@5.9.3)):
+  typedoc-plugin-markdown@4.11.0(typedoc@0.28.19(typescript@6.0.3)):
     dependencies:
-      typedoc: 0.28.17(typescript@5.9.3)
+      typedoc: 0.28.19(typescript@6.0.3)
 
-  typedoc-plugin-missing-exports@4.1.2(typedoc@0.28.17(typescript@5.9.3)):
+  typedoc-plugin-missing-exports@4.1.3(typedoc@0.28.19(typescript@6.0.3)):
     dependencies:
-      typedoc: 0.28.17(typescript@5.9.3)
+      typedoc: 0.28.19(typescript@6.0.3)
 
-  typedoc@0.28.17(typescript@5.9.3):
+  typedoc@0.28.19(typescript@6.0.3):
     dependencies:
       '@gerrit0/mini-shiki': 3.23.0
       lunr: 2.3.9
       markdown-it: 14.1.1
-      minimatch: 9.0.9
-      typescript: 5.9.3
+      minimatch: 10.2.5
+      typescript: 6.0.3
       yaml: 2.8.3
 
-  typescript@5.8.2: {}
-
   typescript@5.9.3: {}
 
+  typescript@6.0.3: {}
+
   ua-parser-js@1.0.40: {}
 
   uc.micro@2.1.0: {}
@@ -26840,11 +26766,9 @@ snapshots:
 
   undici-types@5.26.5: {}
 
-  undici@5.29.0:
-    dependencies:
-      '@fastify/busboy': 2.1.1
+  undici@6.25.0: {}
 
-  undici@7.24.7: {}
+  undici@7.25.0: {}
 
   unhomoglyph@1.0.6: {}
 
@@ -26892,7 +26816,7 @@ snapshots:
       unist-util-is: 6.0.1
       unist-util-visit-parents: 6.0.2
 
-  universal-user-agent@6.0.1: {}
+  universal-user-agent@7.0.3: {}
 
   universalify@0.1.2: {}
 
@@ -26902,6 +26826,26 @@ snapshots:
 
   unpipe@1.0.0: {}
 
+  unplugin-dts@1.0.0-beta.6(patch_hash=c71b9e0f229ad1d76152030e8eceff26ee0b23c18619c205aa55fee274f89073)(@microsoft/api-extractor@7.58.5(@types/node@18.19.130))(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(typescript@6.0.3)(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.106.2(esbuild@0.27.4)):
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))
+      '@volar/typescript': 2.4.28
+      compare-versions: 6.1.1
+      debug: 4.4.3
+      kolorist: 1.8.0
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      typescript: 6.0.3
+      unplugin: 2.3.11
+    optionalDependencies:
+      '@microsoft/api-extractor': 7.58.5(@types/node@18.19.130)
+      esbuild: 0.27.4
+      rollup: 4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8)
+      vite: 8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      webpack: 5.106.2(esbuild@0.27.4)
+    transitivePeerDependencies:
+      - supports-color
+
   unplugin@2.3.11:
     dependencies:
       '@jridgewell/remapping': 2.3.5
@@ -26956,28 +26900,28 @@ snapshots:
       punycode: 1.4.1
       qs: 6.15.0
 
-  use-callback-ref@1.3.3(@types/react@19.2.10)(react@19.2.4):
+  use-callback-ref@1.3.3(@types/react@19.2.14)(react@19.2.5):
     dependencies:
-      react: 19.2.4
+      react: 19.2.5
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  use-memo-one@1.1.3(react@19.2.4):
+  use-memo-one@1.1.3(react@19.2.5):
     dependencies:
-      react: 19.2.4
+      react: 19.2.5
 
-  use-sidecar@1.1.3(@types/react@19.2.10)(react@19.2.4):
+  use-sidecar@1.1.3(@types/react@19.2.14)(react@19.2.5):
     dependencies:
       detect-node-es: 1.1.0
-      react: 19.2.4
+      react: 19.2.5
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.10
+      '@types/react': 19.2.14
 
-  use-sync-external-store@1.6.0(react@19.2.4):
+  use-sync-external-store@1.6.0(react@19.2.5):
     dependencies:
-      react: 19.2.4
+      react: 19.2.5
 
   utf8-byte-length@1.0.5: {}
 
@@ -27001,9 +26945,9 @@ snapshots:
 
   uuid@13.0.0: {}
 
-  uuid@8.3.2: {}
+  uuid@14.0.0: {}
 
-  uuid@9.0.1: {}
+  uuid@8.3.2: {}
 
   v8-to-istanbul@9.3.0:
     dependencies:
@@ -27020,11 +26964,11 @@ snapshots:
 
   vary@1.1.2: {}
 
-  vaul@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  vaul@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
     dependencies:
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
     transitivePeerDependencies:
       - '@types/react'
       - '@types/react-dom'
@@ -27046,94 +26990,72 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vite-plugin-dts@4.5.4(@types/node@18.19.130)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(typescript@5.9.3)(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)):
-    dependencies:
-      '@microsoft/api-extractor': 7.56.0(@types/node@18.19.130)
-      '@rollup/pluginutils': 5.3.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))
-      '@volar/typescript': 2.4.28
-      '@vue/language-core': 2.2.0(typescript@5.9.3)
-      compare-versions: 6.1.1
-      debug: 4.4.3
-      kolorist: 1.8.0
-      local-pkg: 1.1.2
-      magic-string: 0.30.21
-      typescript: 5.9.3
-    optionalDependencies:
-      vite: 8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
-    transitivePeerDependencies:
-      - '@types/node'
-      - rollup
-      - supports-color
-
-  vite-plugin-node-polyfills@0.26.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)):
+  vite-plugin-node-polyfills@0.26.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)):
     dependencies:
       '@rollup/plugin-inject': 5.0.5(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))
       node-stdlib-browser: 1.3.1
-      vite: 8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vite: 8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
     transitivePeerDependencies:
       - rollup
 
-  vite@5.4.21(@types/node@18.19.130)(lightningcss@1.32.0)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1):
+  vite@5.4.21(@types/node@18.19.130)(lightningcss@1.32.0)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1):
     dependencies:
       esbuild: 0.27.4
-      postcss: 8.5.8
+      postcss: 8.5.10
       rollup: 4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8)
     optionalDependencies:
       '@types/node': 18.19.130
       fsevents: 2.3.3
       lightningcss: 1.32.0
-      sugarss: 5.0.1(postcss@8.5.8)
+      sugarss: 5.0.1(postcss@8.5.10)
       terser: 5.46.1
 
-  vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3):
+  vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3):
     dependencies:
       lightningcss: 1.32.0
       picomatch: 4.0.4
-      postcss: 8.5.8
-      rolldown: 1.0.0-rc.12(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)
-      tinyglobby: 0.2.15
+      postcss: 8.5.10
+      rolldown: 1.0.0-rc.16
+      tinyglobby: 0.2.16
     optionalDependencies:
       '@types/node': 18.19.130
       esbuild: 0.27.4
       fsevents: 2.3.3
       jiti: 2.6.1
-      sugarss: 5.0.1(postcss@8.5.8)
+      sugarss: 5.0.1(postcss@8.5.10)
       terser: 5.46.1
       tsx: 4.21.0
       yaml: 2.8.3
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
 
-  vitepress-plugin-mermaid@2.0.17(mermaid@11.14.0)(vitepress@1.6.4(@algolia/client-search@5.50.0)(@types/node@18.19.130)(@types/react@19.2.10)(axios@1.13.5)(jwt-decode@4.0.0)(lightningcss@1.32.0)(postcss@8.5.8)(qrcode@1.5.4)(react@19.2.4)(search-insights@2.17.3)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(typescript@5.9.3)):
+  vitepress-plugin-mermaid@2.0.17(mermaid@11.14.0)(vitepress@1.6.4(@algolia/client-search@5.50.0)(@types/node@18.19.130)(@types/react@19.2.14)(axios@1.15.0)(jwt-decode@4.0.0)(lightningcss@1.32.0)(postcss@8.5.10)(qrcode@1.5.4)(search-insights@2.17.3)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(typescript@6.0.3)):
     dependencies:
       mermaid: 11.14.0
-      vitepress: 1.6.4(@algolia/client-search@5.50.0)(@types/node@18.19.130)(@types/react@19.2.10)(axios@1.13.5)(jwt-decode@4.0.0)(lightningcss@1.32.0)(postcss@8.5.8)(qrcode@1.5.4)(react@19.2.4)(search-insights@2.17.3)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(typescript@5.9.3)
+      vitepress: 1.6.4(@algolia/client-search@5.50.0)(@types/node@18.19.130)(@types/react@19.2.14)(axios@1.15.0)(jwt-decode@4.0.0)(lightningcss@1.32.0)(postcss@8.5.10)(qrcode@1.5.4)(search-insights@2.17.3)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(typescript@6.0.3)
     optionalDependencies:
       '@mermaid-js/mermaid-mindmap': 9.3.0
 
-  vitepress@1.6.4(@algolia/client-search@5.50.0)(@types/node@18.19.130)(@types/react@19.2.10)(axios@1.13.5)(jwt-decode@4.0.0)(lightningcss@1.32.0)(postcss@8.5.8)(qrcode@1.5.4)(react@19.2.4)(search-insights@2.17.3)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(typescript@5.9.3):
+  vitepress@1.6.4(@algolia/client-search@5.50.0)(@types/node@18.19.130)(@types/react@19.2.14)(axios@1.15.0)(jwt-decode@4.0.0)(lightningcss@1.32.0)(postcss@8.5.10)(qrcode@1.5.4)(search-insights@2.17.3)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(typescript@6.0.3):
     dependencies:
       '@docsearch/css': 3.8.2
-      '@docsearch/js': 3.8.2(@algolia/client-search@5.50.0)(@types/react@19.2.10)(react@19.2.4)(search-insights@2.17.3)
+      '@docsearch/js': 3.8.2(@algolia/client-search@5.50.0)(@types/react@19.2.14)(search-insights@2.17.3)
       '@iconify-json/simple-icons': 1.2.75
       '@shikijs/core': 2.5.0
       '@shikijs/transformers': 2.5.0
       '@shikijs/types': 2.5.0
       '@types/markdown-it': 14.1.2
-      '@vitejs/plugin-vue': 5.2.4(vite@5.4.21(@types/node@18.19.130)(lightningcss@1.32.0)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1))(vue@3.5.31(typescript@5.9.3))
+      '@vitejs/plugin-vue': 5.2.4(vite@5.4.21(@types/node@18.19.130)(lightningcss@1.32.0)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1))(vue@3.5.31(typescript@6.0.3))
       '@vue/devtools-api': 7.7.9
       '@vue/shared': 3.5.31
-      '@vueuse/core': 12.8.2(typescript@5.9.3)
-      '@vueuse/integrations': 12.8.2(axios@1.13.5)(focus-trap@7.8.0)(jwt-decode@4.0.0)(qrcode@1.5.4)(typescript@5.9.3)
+      '@vueuse/core': 12.8.2(typescript@6.0.3)
+      '@vueuse/integrations': 12.8.2(axios@1.15.0)(focus-trap@7.8.0)(jwt-decode@4.0.0)(qrcode@1.5.4)(typescript@6.0.3)
       focus-trap: 7.8.0
       mark.js: 8.11.1
       minisearch: 7.2.0
       shiki: 2.5.0
-      vite: 5.4.21(@types/node@18.19.130)(lightningcss@1.32.0)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)
-      vue: 3.5.31(typescript@5.9.3)
+      vite: 5.4.21(@types/node@18.19.130)(lightningcss@1.32.0)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)
+      vue: 3.5.31(typescript@6.0.3)
     optionalDependencies:
-      postcss: 8.5.8
+      postcss: 8.5.10
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -27161,9 +27083,9 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest-plugin-vis@4.1.0(@vitest/browser-playwright@4.1.2)(@vitest/browser@4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2))(babel-plugin-macros@3.1.0)(vitest@4.1.2):
+  vitest-plugin-vis@5.1.0(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(babel-plugin-macros@3.1.0)(typescript@6.0.3)(vitest@4.1.5):
     dependencies:
-      '@vitest/browser': 4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2)
+      '@vitest/browser': 4.1.5(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.5)
       dedent: 1.7.2(babel-plugin-macros@3.1.0)
       glob: 13.0.6
       is-ci: 4.1.0
@@ -27173,43 +27095,45 @@ snapshots:
       pngjs: 7.0.0
       rimraf: 6.1.3
       ssim.js: 3.5.0
-      type-plus: 8.0.0-beta.7
-      vitest: 4.1.2(@opentelemetry/api@1.9.0)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.2)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      type-plus: 8.0.0-beta.8(typescript@6.0.3)
+      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
     optionalDependencies:
-      '@vitest/browser-playwright': 4.1.2(playwright@1.59.1)(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2)
+      '@vitest/browser-playwright': 4.1.5(playwright@1.59.1)(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.5)
     transitivePeerDependencies:
       - babel-plugin-macros
+      - typescript
 
-  vitest-sonar-reporter@3.0.0(vitest@4.1.2):
+  vitest-sonar-reporter@3.0.0(vitest@4.1.5):
     dependencies:
-      vitest: 4.1.2(@opentelemetry/api@1.9.0)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.2)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
 
-  vitest@4.1.2(@opentelemetry/api@1.9.0)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.2)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)):
+  vitest@4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)):
     dependencies:
-      '@vitest/expect': 4.1.2
-      '@vitest/mocker': 4.1.2(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
-      '@vitest/pretty-format': 4.1.2
-      '@vitest/runner': 4.1.2
-      '@vitest/snapshot': 4.1.2
-      '@vitest/spy': 4.1.2
-      '@vitest/utils': 4.1.2
+      '@vitest/expect': 4.1.5
+      '@vitest/mocker': 4.1.5(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      '@vitest/pretty-format': 4.1.5
+      '@vitest/runner': 4.1.5
+      '@vitest/snapshot': 4.1.5
+      '@vitest/spy': 4.1.5
+      '@vitest/utils': 4.1.5
       es-module-lexer: 2.0.0
       expect-type: 1.3.0
       magic-string: 0.30.21
       obug: 2.1.1
       pathe: 2.0.3
       picomatch: 4.0.4
-      std-env: 4.0.0
+      std-env: 4.1.0
       tinybench: 2.9.0
-      tinyexec: 1.0.4
-      tinyglobby: 0.2.15
+      tinyexec: 1.1.1
+      tinyglobby: 0.2.16
       tinyrainbow: 3.1.0
-      vite: 8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vite: 8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api': 1.9.1
       '@types/node': 18.19.130
-      '@vitest/browser-playwright': 4.1.2(playwright@1.59.1)(vite@8.0.5(@emnapi/core@1.8.1)(@emnapi/runtime@1.8.1)(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.8))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.2)
+      '@vitest/browser-playwright': 4.1.5(playwright@1.59.1)(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.5)
+      '@vitest/coverage-v8': 4.1.5(@vitest/browser@4.1.5)(vitest@4.1.5)
       jsdom: 26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f)
     transitivePeerDependencies:
       - msw
@@ -27233,24 +27157,24 @@ snapshots:
 
   vscode-uri@3.1.0: {}
 
-  vue@3.5.31(typescript@5.9.3):
+  vue@3.5.31(typescript@6.0.3):
     dependencies:
       '@vue/compiler-dom': 3.5.31
       '@vue/compiler-sfc': 3.5.31
       '@vue/runtime-dom': 3.5.31
-      '@vue/server-renderer': 3.5.31(vue@3.5.31(typescript@5.9.3))
+      '@vue/server-renderer': 3.5.31(vue@3.5.31(typescript@6.0.3))
       '@vue/shared': 3.5.31
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 6.0.3
 
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0
 
-  wait-on@9.0.4:
+  wait-on@9.0.5:
     dependencies:
-      axios: 1.13.5
-      joi: 18.0.2
+      axios: 1.15.2
+      joi: 18.1.2
       lodash: 4.18.1
       minimist: 1.2.8
       rxjs: 7.8.2
@@ -27312,7 +27236,7 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  webpack-cli@7.0.2(webpack-bundle-analyzer@5.3.0)(webpack-dev-server@5.2.3)(webpack@5.105.4):
+  webpack-cli@7.0.2(webpack-bundle-analyzer@5.3.0)(webpack-dev-server@5.2.3)(webpack@5.106.2):
     dependencies:
       '@discoveryjs/json-ext': 1.0.0
       commander: 14.0.3
@@ -27322,13 +27246,13 @@ snapshots:
       import-local: 3.2.0
       interpret: 3.1.1
       rechoir: 0.8.0
-      webpack: 5.105.4(webpack-cli@7.0.2)
+      webpack: 5.106.2(webpack-cli@7.0.2)
       webpack-merge: 6.0.1
     optionalDependencies:
       webpack-bundle-analyzer: 5.3.0
-      webpack-dev-server: 5.2.3(tslib@2.8.1)(webpack-cli@7.0.2)(webpack@5.105.4)
+      webpack-dev-server: 5.2.3(tslib@2.8.1)(webpack-cli@7.0.2)(webpack@5.106.2)
 
-  webpack-dev-middleware@7.4.5(tslib@2.8.1)(webpack@5.105.4):
+  webpack-dev-middleware@7.4.5(tslib@2.8.1)(webpack@5.106.2):
     dependencies:
       colorette: 2.0.20
       memfs: 4.56.10(tslib@2.8.1)
@@ -27337,11 +27261,11 @@ snapshots:
       range-parser: 1.2.1
       schema-utils: 4.3.3
     optionalDependencies:
-      webpack: 5.105.4(webpack-cli@7.0.2)
+      webpack: 5.106.2(webpack-cli@7.0.2)
     transitivePeerDependencies:
       - tslib
 
-  webpack-dev-server@5.2.3(tslib@2.8.1)(webpack-cli@7.0.2)(webpack@5.105.4):
+  webpack-dev-server@5.2.3(tslib@2.8.1)(webpack-cli@7.0.2)(webpack@5.106.2):
     dependencies:
       '@types/bonjour': 3.5.13
       '@types/connect-history-api-fallback': 1.5.4
@@ -27369,11 +27293,11 @@ snapshots:
       serve-index: 1.9.2
       sockjs: 0.3.24
       spdy: 4.0.2
-      webpack-dev-middleware: 7.4.5(tslib@2.8.1)(webpack@5.105.4)
+      webpack-dev-middleware: 7.4.5(tslib@2.8.1)(webpack@5.106.2)
       ws: 8.20.0
     optionalDependencies:
-      webpack: 5.105.4(webpack-cli@7.0.2)
-      webpack-cli: 7.0.2(webpack-bundle-analyzer@5.3.0)(webpack-dev-server@5.2.3)(webpack@5.105.4)
+      webpack: 5.106.2(webpack-cli@7.0.2)
+      webpack-cli: 7.0.2(webpack-bundle-analyzer@5.3.0)(webpack-dev-server@5.2.3)(webpack@5.106.2)
     transitivePeerDependencies:
       - bufferutil
       - debug
@@ -27387,23 +27311,23 @@ snapshots:
       flat: 5.0.2
       wildcard: 2.0.1
 
-  webpack-retry-chunk-load-plugin@3.1.1(webpack@5.105.4):
+  webpack-retry-chunk-load-plugin@3.1.1(webpack@5.106.2):
     dependencies:
       prettier: 2.8.8
-      webpack: 5.105.4(webpack-cli@7.0.2)
+      webpack: 5.106.2(webpack-cli@7.0.2)
 
   webpack-sources@3.3.4: {}
 
-  webpack-version-file-plugin@0.5.0(webpack@5.105.4):
+  webpack-version-file-plugin@0.5.0(webpack@5.106.2):
     dependencies:
       ejs: 3.1.10
       fs: 0.0.1-security
       underscore: 1.13.8
-      webpack: 5.105.4(webpack-cli@7.0.2)
+      webpack: 5.106.2(webpack-cli@7.0.2)
 
   webpack-virtual-modules@0.6.2: {}
 
-  webpack@5.105.4(esbuild@0.27.4):
+  webpack@5.106.2(esbuild@0.27.4):
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.8
@@ -27421,13 +27345,12 @@ snapshots:
       events: 3.3.0
       glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
-      json-parse-even-better-errors: 2.3.1
       loader-runner: 4.3.1
-      mime-types: 2.1.35
+      mime-db: 1.54.0
       neo-async: 2.6.2
       schema-utils: 4.3.3
       tapable: 2.3.2
-      terser-webpack-plugin: 5.4.0(esbuild@0.27.4)(webpack@5.105.4(esbuild@0.27.4))
+      terser-webpack-plugin: 5.4.0(esbuild@0.27.4)(webpack@5.106.2(esbuild@0.27.4))
       watchpack: 2.5.1
       webpack-sources: 3.3.4
     transitivePeerDependencies:
@@ -27436,7 +27359,7 @@ snapshots:
       - uglify-js
     optional: true
 
-  webpack@5.105.4(webpack-cli@7.0.2):
+  webpack@5.106.2(webpack-cli@7.0.2):
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.8
@@ -27454,17 +27377,16 @@ snapshots:
       events: 3.3.0
       glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
-      json-parse-even-better-errors: 2.3.1
       loader-runner: 4.3.1
-      mime-types: 2.1.35
+      mime-db: 1.54.0
       neo-async: 2.6.2
       schema-utils: 4.3.3
       tapable: 2.3.2
-      terser-webpack-plugin: 5.4.0(webpack@5.105.4)
+      terser-webpack-plugin: 5.4.0(webpack@5.106.2)
       watchpack: 2.5.1
       webpack-sources: 3.3.4
     optionalDependencies:
-      webpack-cli: 7.0.2(webpack-bundle-analyzer@5.3.0)(webpack-dev-server@5.2.3)(webpack@5.105.4)
+      webpack-cli: 7.0.2(webpack-bundle-analyzer@5.3.0)(webpack-dev-server@5.2.3)(webpack@5.106.2)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 7251cf86ce..ff43ad97ba 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -6,21 +6,18 @@ packages:
 cleanupUnusedCatalogs: true
 catalog:
     # typescript
-    typescript: 5.9.3
+    typescript: 6.0.3
     # react
     react: ^19.0.0
     react-dom: ^19.0.0
     "@types/react": ^19.2.10
     "@types/react-dom": ^19.2.3
     # playwright
-    "@element-hq/element-web-playwright-common": 2.4.0
     "@playwright/test": 1.59.1
     "playwright-core": 1.59.1
-    # Module API
-    "@element-hq/element-web-module-api": 1.12.0
     # Compound
-    "@vector-im/compound-design-tokens": 8.0.0
-    "@vector-im/compound-web": 8.4.0
+    "@vector-im/compound-design-tokens": 10.1.0
+    "@vector-im/compound-web": 9.2.0
     # i18n
     matrix-web-i18n: 3.6.0
     # fonts
@@ -30,4 +27,8 @@ packageExtensions:
         dependencies:
             # Fix missing type dependency
             "@types/picomatch": 4.0.2
+    "@joshwooding/vite-plugin-react-docgen-typescript":
+        peerDependencies:
+            # Silence warning
+            vite: "^8.0.0"
 ignorePatchFailures: false
diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh
index 1299815bbb..b326c0e6b4 100755
--- a/scripts/fetchdep.sh
+++ b/scripts/fetchdep.sh
@@ -27,7 +27,10 @@ clone() {
     then
         echo "Trying to use $org/$repo#$branch"
         # Disable auth prompts: https://serverfault.com/a/665959
-        GIT_TERMINAL_PROMPT=0 git clone https://github.com/$org/$repo.git $repo --branch "$branch" --depth 1 && exit 0
+        if GIT_TERMINAL_PROMPT=0 git clone "https://github.com/$org/$repo.git" "$repo" --branch "$branch" --depth 1; then
+            git -C "$repo" log -1
+            exit 0
+        fi
     fi
 }
 
@@ -39,7 +42,7 @@ getPRInfo() {
 
         apiEndpoint="https://api.github.com/repos/$PR_ORG/$PR_REPO/pulls/$number"
 
-        head=$(curl $apiEndpoint | jq -r '.head.label')
+        head=$(curl "$apiEndpoint" | jq -r '.head.label')
     fi
 }
 
@@ -47,16 +50,17 @@ getPRInfo() {
 # GH API for more info - "fork:branch". Some give us this directly.
 if [ -n "$PR_NUMBER" ]; then
     # GitHub
-    getPRInfo $PR_NUMBER
+    getPRInfo "$PR_NUMBER"
 elif [ -n "$REVIEW_ID" ]; then
     # Netlify
-    getPRInfo $REVIEW_ID
+    getPRInfo "$REVIEW_ID"
 fi
 
 # for forks, $head will be in the format "fork:branch", so we split it by ":"
 # into an array. On non-forks, this has the effect of splitting into a single
 # element array given ":" shouldn't appear in the head - it'll just be the
 # branch name. Based on the results, we clone.
+# shellcheck disable=SC2206
 BRANCH_ARRAY=(${head//:/ })
 TRY_ORG=$deforg
 TRY_BRANCH=${BRANCH_ARRAY[0]}
@@ -67,13 +71,13 @@ if [[ "$head" == *":"* ]]; then
     fi
     TRY_BRANCH=${BRANCH_ARRAY[1]}
 fi
-clone ${TRY_ORG} $defrepo ${TRY_BRANCH}
+clone "$TRY_ORG" "$defrepo" "$TRY_BRANCH"
 
 # For merge queue runs we need to extract the temporary branch name
 # the ref_name will look like `gh-readonly-queue/<branch>/pr-<number>-<sha>`
 if [[ "$GITHUB_EVENT_NAME" == "merge_group" ]]; then
     withoutPrefix=${GITHUB_REF_NAME#gh-readonly-queue/}
-    clone $deforg $defrepo ${withoutPrefix%%/pr-*}
+    clone "$deforg" "$defrepo" "${withoutPrefix%%/pr-*}"
 fi
 
 # Try the target branch of the push or PR, or the branch that was pushed to
@@ -83,10 +87,10 @@ if [[ "$GITHUB_EVENT_NAME" == "push" ]]; then
     base_or_branch=${GITHUB_REF}
 fi
 if [ -n "$base_or_branch" ]; then
-    clone $deforg $defrepo $base_or_branch
+    clone "$deforg" "$defrepo" "$base_or_branch"
 fi
 
 # Try HEAD which is the branch name in Netlify (not BRANCH which is pull/xxxx/head for PR builds)
-clone $deforg $defrepo $HEAD
+clone "$deforg" "$defrepo" "$HEAD"
 # Use the default branch as the last resort.
-clone $deforg $defrepo $defbranch
+clone "$deforg" "$defrepo" "$defbranch"
diff --git a/scripts/layered.sh b/scripts/layered.sh
index 6e5c91be29..912ef56a32 100755
--- a/scripts/layered.sh
+++ b/scripts/layered.sh
@@ -14,7 +14,7 @@ set -ex
 # for the primary repo (element-web in this case).
 
 # Install dependencies
-pnpm install --frozen-lockfile
+pnpm install --frozen-lockfile $@
 
 # Pass appropriate repo to fetchdep.sh
 export PR_ORG=element-hq
@@ -25,16 +25,16 @@ js_sdk_dep=$(jq -r '.dependencies["matrix-js-sdk"]' < $(pnpm -w root)/../apps/we
 # Set up the js-sdk first (unless package.json pins a specific version)
 if [ "$js_sdk_dep" = "github:matrix-org/matrix-js-sdk#develop" ]; then
     scripts/fetchdep.sh matrix-org matrix-js-sdk develop
-    pushd matrix-js-sdk
-    [ -n "$JS_SDK_GITHUB_BASE_REF" ] && git fetch --depth 1 origin $JS_SDK_GITHUB_BASE_REF && git checkout $JS_SDK_GITHUB_BASE_REF
-    pnpm link
-    pnpm install --frozen-lockfile
-    popd
 
-    # Link into into element-web
-    pnpm link matrix-js-sdk
+    if [ -n "$JS_SDK_GITHUB_BASE_REF" ]; then
+        git -C matrix-js-sdk fetch --depth 1 origin $JS_SDK_GITHUB_BASE_REF
+        git -C matrix-js-sdk checkout $JS_SDK_GITHUB_BASE_REF
+    fi
+    pnpm -C matrix-js-sdk install --frozen-lockfile --ignore-scripts
+
+    # Link into into element-web & the monorepo
+    pnpm -C apps/web link ./matrix-js-sdk
+    pnpm link ./matrix-js-sdk
 else
     echo "Skipping matrix-js-sdk fetch and link as package.json pins $js_sdk_dep"
 fi
-
-pnpm install --frozen-lockfile $@
diff --git a/sonar-project.properties b/sonar-project.properties
index e3040eaeae..d5e990eb83 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -7,9 +7,33 @@ sonar.organization=element-hq
 sonar.sources=.
 sonar.tests=apps/web/test,apps/web/playwright,apps/desktop/playwright,packages
 sonar.test.inclusions=apps/web/test/*,apps/web/playwright/*,apps/desktop/playwright/*,packages/*/src/**/*.test.*,packages/*/src/test/**/*
-sonar.exclusions=apps/web/__mocks__,docs,apps/web/element.io,apps/web/nginx,apps/web/src/vector/modernizr.cjs
+sonar.exclusions=\
+  apps/web/__mocks__,\
+  docs,\
+  apps/web/element.io,\
+  apps/web/nginx,\
+  apps/web/src/vector/modernizr.cjs,\
+  **/*.webm,\
+  **/*.ogg,\
+  **/*.mp3,\
+  **/*.woff2,\
+  **/*.ttf,\
+  **/*.webp,\
+  **/*.jpg,\
+  **/*.apng,\
+  **/*.ico,\
+  **/*.png,\
+  **/*.gif
+
+# Exclude translations and tests from the duplication check
+sonar.cpd.exclusions=\
+  **/src/i18n/strings/*.json,\
+  apps/**/test/**,\
+  apps/**/playwright/**,\
+  packages/**/test/**,\
+  packages/shared-components/src/**/*.stories.tsx,\
+  packages/playwright-common/**
 
-sonar.cpd.exclusions=**/src/i18n/strings/*.json
 sonar.javascript.lcov.reportPaths=apps/web/coverage/lcov.info,packages/shared-components/coverage/lcov.info
 sonar.coverage.exclusions=\
   apps/web/test/**/*,\
@@ -26,5 +50,6 @@ sonar.coverage.exclusions=\
   apps/web/src/vector/mobile_guide/**/*,\
   packages/shared-components/src/test/**/*,\
   packages/shared-components/src/**/*.stories.tsx,\
-  packages/playwright-common/**/*
+  packages/playwright-common/**/*,\
+  **/*.config.ts
 sonar.testExecutionReportPaths=apps/web/coverage/jest-sonar-report.xml