diff --git a/package.json b/package.json
index eca015648f8..59e05b25548 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,7 @@
         "@sentry/browser": "^10.0.0",
         "@types/png-chunks-extract": "^1.0.2",
         "@vector-im/compound-design-tokens": "6.8.0",
-        "@vector-im/compound-web": "^8.3.5",
+        "@vector-im/compound-web": "^8.3.6",
         "@vector-im/matrix-wysiwyg": "2.40.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
diff --git a/packages/shared-components/package.json b/packages/shared-components/package.json
index 55345a50da5..ca915a5e931 100644
--- a/packages/shared-components/package.json
+++ b/packages/shared-components/package.json
@@ -83,7 +83,7 @@
         "@types/react-dom": "^19.2.3",
         "@typescript-eslint/eslint-plugin": "^8.53.1",
         "@typescript-eslint/parser": "^8.53.1",
-        "@vector-im/compound-web": "^8.3.5",
+        "@vector-im/compound-web": "^8.3.6",
         "@vitejs/plugin-react": "^5.1.2",
         "@vitest/browser-playwright": "^4.0.17",
         "@vitest/coverage-v8": "^4.0.17",
diff --git a/packages/shared-components/yarn.lock b/packages/shared-components/yarn.lock
index b15eda0c7ef..7b919379d07 100644
--- a/packages/shared-components/yarn.lock
+++ b/packages/shared-components/yarn.lock
@@ -1740,10 +1740,10 @@
   resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-6.8.0.tgz#3711df7b22a065c4d49dedbd8b83241c73a619f9"
   integrity sha512-RDJjnFg9yxkbSYqiAG5Nv4enD5h8Oq89su0izZIvuKRzBxLWkV2/+JoDM94zkjI4aDLYff3gwWMviqAxJKi+Lw==
 
-"@vector-im/compound-web@^8.3.5":
-  version "8.3.5"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-8.3.5.tgz#bb6d712868915899978128c2081b7b09389a1570"
-  integrity sha512-MbqnZMSwu3y8Z7b529Hf8t790adbcjQiq6X+PrX8emvRDsQsSa/S5Na1udStseCuLp3nAfqrgnospIgselbpvA==
+"@vector-im/compound-web@^8.3.6":
+  version "8.3.6"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-8.3.6.tgz#1f669e339d086faa14f4cd9f7a39e7d3d3e2a4d1"
+  integrity sha512-w7jjUJ8dXlLE2Ja/2J8Z433mtra3QF0cHDU5BGVLBBJnT/IwU4vazJRaU61dIOm3OnzDnsDreKcrMtWAUIhQkA==
   dependencies:
     "@floating-ui/react" "^0.27.0"
     "@radix-ui/react-context-menu" "^2.2.16"
diff --git a/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
index fac0319a1a6..0b7aa444592 100644
--- a/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
@@ -131,18 +131,18 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="_container_1md5v_10"
+                  class="_container_153f2_10"
                 >
                   <input
                     aria-labelledby="_r_8_"
-                    class="_input_1md5v_18"
+                    class="_input_153f2_18"
                     id="checkbox_MwbPDmfGtm"
                     role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
                   <div
-                    class="_ui_1md5v_19"
+                    class="_ui_153f2_19"
                   >
                     <svg
                       aria-hidden="true"
@@ -229,18 +229,18 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="_container_1md5v_10"
+                  class="_container_153f2_10"
                 >
                   <input
                     aria-labelledby="_r_c_"
-                    class="_input_1md5v_18"
+                    class="_input_153f2_18"
                     id="checkbox_GQvdMWe954"
                     role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
                   <div
-                    class="_ui_1md5v_19"
+                    class="_ui_153f2_19"
                   >
                     <svg
                       aria-hidden="true"
@@ -328,18 +328,18 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="_container_1md5v_10"
+                  class="_container_153f2_10"
                 >
                   <input
                     aria-labelledby="_r_g_"
-                    class="_input_1md5v_18"
+                    class="_input_153f2_18"
                     id="checkbox_DVIAu5CsiH"
                     role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
                   <div
-                    class="_ui_1md5v_19"
+                    class="_ui_153f2_19"
                   >
                     <svg
                       aria-hidden="true"
@@ -449,11 +449,11 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                   class="_inline-field-control_19upo_44"
                 >
                   <div
-                    class="_container_1md5v_10"
+                    class="_container_153f2_10"
                   >
                     <input
                       aria-labelledby="_r_k_"
-                      class="_input_1md5v_18"
+                      class="_input_153f2_18"
                       disabled=""
                       id="checkbox_RD7nyrA2oh"
                       role="presentation"
@@ -461,7 +461,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                       type="checkbox"
                     />
                     <div
-                      class="_ui_1md5v_19"
+                      class="_ui_153f2_19"
                     >
                       <svg
                         aria-hidden="true"
@@ -549,18 +549,18 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="_container_1md5v_10"
+                  class="_container_153f2_10"
                 >
                   <input
                     aria-labelledby="_r_t_"
-                    class="_input_1md5v_18"
+                    class="_input_153f2_18"
                     id="checkbox_jWVJIPauy1"
                     role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
                   <div
-                    class="_ui_1md5v_19"
+                    class="_ui_153f2_19"
                   >
                     <svg
                       aria-hidden="true"
@@ -720,18 +720,18 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
                 class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="_container_1md5v_10"
+                  class="_container_153f2_10"
                 >
                   <input
                     aria-labelledby="_r_3i_"
-                    class="_input_1md5v_18"
+                    class="_input_153f2_18"
                     id="checkbox_EetmBG4yVC"
                     role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
                   <div
-                    class="_ui_1md5v_19"
+                    class="_ui_153f2_19"
                   >
                     <svg
                       aria-hidden="true"
@@ -818,18 +818,18 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
                 class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="_container_1md5v_10"
+                  class="_container_153f2_10"
                 >
                   <input
                     aria-labelledby="_r_3m_"
-                    class="_input_1md5v_18"
+                    class="_input_153f2_18"
                     id="checkbox_eEefiPqpMR"
                     role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
                   <div
-                    class="_ui_1md5v_19"
+                    class="_ui_153f2_19"
                   >
                     <svg
                       aria-hidden="true"
@@ -917,18 +917,18 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
                 class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="_container_1md5v_10"
+                  class="_container_153f2_10"
                 >
                   <input
                     aria-labelledby="_r_3q_"
-                    class="_input_1md5v_18"
+                    class="_input_153f2_18"
                     id="checkbox_MwbPDmfGtm"
                     role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
                   <div
-                    class="_ui_1md5v_19"
+                    class="_ui_153f2_19"
                   >
                     <svg
                       aria-hidden="true"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
index 41c422d1f8f..3186e053304 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
@@ -173,15 +173,15 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
           class="_inline-field-control_19upo_44"
         >
           <div
-            class="_container_1md5v_10"
+            class="_container_153f2_10"
           >
             <input
-              class="_input_1md5v_18"
+              class="_input_153f2_18"
               id="include-attachments"
               type="checkbox"
             />
             <div
-              class="_ui_1md5v_19"
+              class="_ui_153f2_19"
             >
               <svg
                 aria-hidden="true"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
index 7cc92b1b5bf..9d71bdf13bb 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
@@ -85,16 +85,16 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
                 class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="_container_1md5v_10"
+                  class="_container_153f2_10"
                 >
                   <input
                     aria-describedby="_r_5_"
-                    class="_input_1md5v_18"
+                    class="_input_153f2_18"
                     id="checkbox_vY7Q4uEh9K"
                     type="checkbox"
                   />
                   <div
-                    class="_ui_1md5v_19"
+                    class="_ui_153f2_19"
                   >
                     <svg
                       aria-hidden="true"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap
index 06c3324bdbe..999b18ffc68 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap
@@ -316,15 +316,15 @@ exports[`ShareDialog should render a share dialog for a matrix event 1`] = `
       </div>
       <label>
         <div
-          class="_container_1md5v_10"
+          class="_container_153f2_10"
         >
           <input
             checked=""
-            class="_input_1md5v_18"
+            class="_input_153f2_18"
             type="checkbox"
           />
           <div
-            class="_ui_1md5v_19"
+            class="_ui_153f2_19"
           >
             <svg
               aria-hidden="true"
@@ -513,14 +513,14 @@ exports[`ShareDialog should render a share dialog for a room 1`] = `
       </div>
       <label>
         <div
-          class="_container_1md5v_10"
+          class="_container_153f2_10"
         >
           <input
-            class="_input_1md5v_18"
+            class="_input_153f2_18"
             type="checkbox"
           />
           <div
-            class="_ui_1md5v_19"
+            class="_ui_153f2_19"
           >
             <svg
               aria-hidden="true"
diff --git a/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap
index 6e759d18101..7a3bbe4ac18 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap
@@ -15,17 +15,17 @@ exports[`<LabelledCheckbox /> should render with byline of "this is a byline" 1`
           class="_inline-field-control_19upo_44"
         >
           <div
-            class="_container_1md5v_10"
+            class="_container_153f2_10"
           >
             <input
               aria-describedby="_r_4_"
               checked=""
-              class="_input_1md5v_18"
+              class="_input_153f2_18"
               id="checkbox_vY7Q4uEh9K"
               type="checkbox"
             />
             <div
-              class="_ui_1md5v_19"
+              class="_ui_153f2_19"
             >
               <svg
                 aria-hidden="true"
@@ -83,16 +83,16 @@ exports[`<LabelledCheckbox /> should render with byline of undefined 1`] = `
           class="_inline-field-control_19upo_44"
         >
           <div
-            class="_container_1md5v_10"
+            class="_container_153f2_10"
           >
             <input
               checked=""
-              class="_input_1md5v_18"
+              class="_input_153f2_18"
               id="checkbox_vY7Q4uEh9K"
               type="checkbox"
             />
             <div
-              class="_ui_1md5v_19"
+              class="_ui_153f2_19"
             >
               <svg
                 aria-hidden="true"
diff --git a/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
index c83b03319b4..4930ca17c7d 100644
--- a/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
@@ -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_1glhz_8"
+  class="_menu_1w1u7_8"
   data-align="start"
   data-orientation="vertical"
   data-radix-menu-content=""
@@ -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_1glhz_8"
+  class="_menu_1w1u7_8"
   data-align="start"
   data-orientation="vertical"
   data-radix-menu-content=""
diff --git a/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
index 339a3e7d4a5..c6c20fcad41 100644
--- a/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
@@ -33,11 +33,11 @@ exports[`<LayoutSwitcher /> should render 1`] = `
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
             >
               <div
-                class="_container_1qhtc_10"
+                class="_container_1ug7n_10"
               >
                 <input
                   checked=""
-                  class="_input_1qhtc_18"
+                  class="_input_1ug7n_18"
                   id="radix-_r_0_"
                   name="layout"
                   title=""
@@ -45,7 +45,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                   value="group"
                 />
                 <div
-                  class="_ui_1qhtc_19"
+                  class="_ui_1ug7n_19"
                 />
               </div>
               <span>
@@ -173,10 +173,10 @@ exports[`<LayoutSwitcher /> should render 1`] = `
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
             >
               <div
-                class="_container_1qhtc_10"
+                class="_container_1ug7n_10"
               >
                 <input
-                  class="_input_1qhtc_18"
+                  class="_input_1ug7n_18"
                   id="radix-_r_9_"
                   name="layout"
                   title=""
@@ -184,7 +184,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                   value="bubble"
                 />
                 <div
-                  class="_ui_1qhtc_19"
+                  class="_ui_1ug7n_19"
                 />
               </div>
               <span>
@@ -312,10 +312,10 @@ exports[`<LayoutSwitcher /> should render 1`] = `
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
             >
               <div
-                class="_container_1qhtc_10"
+                class="_container_1ug7n_10"
               >
                 <input
-                  class="_input_1qhtc_18"
+                  class="_input_1ug7n_18"
                   id="radix-_r_i_"
                   name="layout"
                   title=""
@@ -323,7 +323,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                   value="irc"
                 />
                 <div
-                  class="_ui_1qhtc_19"
+                  class="_ui_1ug7n_19"
                 />
               </div>
               <span>
diff --git a/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
index 431cd9da698..35d9121e323 100644
--- a/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
@@ -65,11 +65,11 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1qhtc_10"
+              class="_container_1ug7n_10"
             >
               <input
                 checked=""
-                class="_input_1qhtc_18"
+                class="_input_1ug7n_18"
                 id="radix-_r_29_"
                 name="themeSelector"
                 title=""
@@ -77,7 +77,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
                 value="light"
               />
               <div
-                class="_ui_1qhtc_19"
+                class="_ui_1ug7n_19"
               />
             </div>
           </div>
@@ -99,10 +99,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1qhtc_10"
+              class="_container_1ug7n_10"
             >
               <input
-                class="_input_1qhtc_18"
+                class="_input_1ug7n_18"
                 id="radix-_r_2a_"
                 name="themeSelector"
                 title=""
@@ -110,7 +110,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
                 value="dark"
               />
               <div
-                class="_ui_1qhtc_19"
+                class="_ui_1ug7n_19"
               />
             </div>
           </div>
@@ -132,10 +132,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1qhtc_10"
+              class="_container_1ug7n_10"
             >
               <input
-                class="_input_1qhtc_18"
+                class="_input_1ug7n_18"
                 id="radix-_r_2b_"
                 name="themeSelector"
                 title=""
@@ -143,7 +143,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
                 value="light-high-contrast"
               />
               <div
-                class="_ui_1qhtc_19"
+                class="_ui_1ug7n_19"
               />
             </div>
           </div>
@@ -165,10 +165,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1qhtc_10"
+              class="_container_1ug7n_10"
             >
               <input
-                class="_input_1qhtc_18"
+                class="_input_1ug7n_18"
                 id="radix-_r_2c_"
                 name="themeSelector"
                 title=""
@@ -176,7 +176,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
                 value="custom-Alice theme"
               />
               <div
-                class="_ui_1qhtc_19"
+                class="_ui_1ug7n_19"
               />
             </div>
           </div>
@@ -344,11 +344,11 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1qhtc_10"
+              class="_container_1ug7n_10"
             >
               <input
                 checked=""
-                class="_input_1qhtc_18"
+                class="_input_1ug7n_18"
                 id="radix-_r_11_"
                 name="themeSelector"
                 title=""
@@ -356,7 +356,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
                 value="light"
               />
               <div
-                class="_ui_1qhtc_19"
+                class="_ui_1ug7n_19"
               />
             </div>
           </div>
@@ -378,10 +378,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1qhtc_10"
+              class="_container_1ug7n_10"
             >
               <input
-                class="_input_1qhtc_18"
+                class="_input_1ug7n_18"
                 id="radix-_r_12_"
                 name="themeSelector"
                 title=""
@@ -389,7 +389,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
                 value="dark"
               />
               <div
-                class="_ui_1qhtc_19"
+                class="_ui_1ug7n_19"
               />
             </div>
           </div>
@@ -411,10 +411,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1qhtc_10"
+              class="_container_1ug7n_10"
             >
               <input
-                class="_input_1qhtc_18"
+                class="_input_1ug7n_18"
                 id="radix-_r_13_"
                 name="themeSelector"
                 title=""
@@ -422,7 +422,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
                 value="light-high-contrast"
               />
               <div
-                class="_ui_1qhtc_19"
+                class="_ui_1ug7n_19"
               />
             </div>
           </div>
@@ -444,10 +444,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1qhtc_10"
+              class="_container_1ug7n_10"
             >
               <input
-                class="_input_1qhtc_18"
+                class="_input_1ug7n_18"
                 id="radix-_r_14_"
                 name="themeSelector"
                 title=""
@@ -455,7 +455,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
                 value="custom-Alice theme"
               />
               <div
-                class="_ui_1qhtc_19"
+                class="_ui_1ug7n_19"
               />
             </div>
           </div>
@@ -623,11 +623,11 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1qhtc_10"
+              class="_container_1ug7n_10"
             >
               <input
                 checked=""
-                class="_input_1qhtc_18"
+                class="_input_1ug7n_18"
                 id="radix-_r_1_"
                 name="themeSelector"
                 title=""
@@ -635,7 +635,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
                 value="light"
               />
               <div
-                class="_ui_1qhtc_19"
+                class="_ui_1ug7n_19"
               />
             </div>
           </div>
@@ -657,10 +657,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1qhtc_10"
+              class="_container_1ug7n_10"
             >
               <input
-                class="_input_1qhtc_18"
+                class="_input_1ug7n_18"
                 id="radix-_r_2_"
                 name="themeSelector"
                 title=""
@@ -668,7 +668,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
                 value="dark"
               />
               <div
-                class="_ui_1qhtc_19"
+                class="_ui_1ug7n_19"
               />
             </div>
           </div>
@@ -690,10 +690,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1qhtc_10"
+              class="_container_1ug7n_10"
             >
               <input
-                class="_input_1qhtc_18"
+                class="_input_1ug7n_18"
                 id="radix-_r_3_"
                 name="themeSelector"
                 title=""
@@ -701,7 +701,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
                 value="light-high-contrast"
               />
               <div
-                class="_ui_1qhtc_19"
+                class="_ui_1ug7n_19"
               />
             </div>
           </div>
diff --git a/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap b/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
index 3a41085d0ac..69f2e8fcacf 100644
--- a/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
@@ -19,19 +19,19 @@ exports[`<FilteredDeviceListHeader /> renders correctly when all devices are sel
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1md5v_10"
+              class="_container_153f2_10"
             >
               <input
                 aria-label="Deselect all"
                 aria-labelledby="_r_9_"
                 checked=""
-                class="_input_1md5v_18"
+                class="_input_153f2_18"
                 data-testid="device-select-all-checkbox"
                 id="device-select-all-checkbox"
                 type="checkbox"
               />
               <div
-                class="_ui_1md5v_19"
+                class="_ui_153f2_19"
               >
                 <svg
                   aria-hidden="true"
@@ -85,18 +85,18 @@ exports[`<FilteredDeviceListHeader /> renders correctly when no devices are sele
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1md5v_10"
+              class="_container_153f2_10"
             >
               <input
                 aria-label="Select all"
                 aria-labelledby="_r_0_"
-                class="_input_1md5v_18"
+                class="_input_153f2_18"
                 data-testid="device-select-all-checkbox"
                 id="device-select-all-checkbox"
                 type="checkbox"
               />
               <div
-                class="_ui_1md5v_19"
+                class="_ui_153f2_19"
               >
                 <svg
                   aria-hidden="true"
diff --git a/test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap b/test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
index f64255f57fa..4441bd43fd3 100644
--- a/test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SelectableDeviceTile /> renders selected tile 1`] = `
 <input
   checked=""
-  class="_input_1md5v_18"
+  class="_input_153f2_18"
   data-testid="device-tile-checkbox-my-device"
   id="device-tile-checkbox-my-device"
   type="checkbox"
@@ -25,16 +25,16 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
           class="_inline-field-control_19upo_44"
         >
           <div
-            class="_container_1md5v_10"
+            class="_container_153f2_10"
           >
             <input
-              class="_input_1md5v_18"
+              class="_input_153f2_18"
               data-testid="device-tile-checkbox-my-device"
               id="device-tile-checkbox-my-device"
               type="checkbox"
             />
             <div
-              class="_ui_1md5v_19"
+              class="_ui_153f2_19"
             >
               <svg
                 aria-hidden="true"
diff --git a/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap b/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
index 2474759a7e3..45f343f8d29 100644
--- a/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
@@ -275,17 +275,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
                           checked=""
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           disabled=""
                           id="checkbox_4yVCeEefiP"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -332,17 +332,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
                           checked=""
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           disabled=""
                           id="checkbox_qpMRMwbPDm"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -389,17 +389,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
                           checked=""
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           disabled=""
                           id="checkbox_fGtmGQvdMW"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -463,17 +463,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
                           checked=""
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           disabled=""
                           id="checkbox_e954DVIAu5"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -520,16 +520,16 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           disabled=""
                           id="checkbox_CsiHRD7nyr"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -576,17 +576,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
                           checked=""
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           disabled=""
                           id="checkbox_A2ohjWVJIP"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -671,17 +671,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
                           checked=""
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           disabled=""
                           id="checkbox_auy1OmnTid"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -729,17 +729,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
                           checked=""
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           disabled=""
                           id="checkbox_X4ePDS0OpW"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -786,18 +786,18 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
                           aria-describedby="_r_2g_"
                           checked=""
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           disabled=""
                           id="checkbox_wAHG75JNTN"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -1296,16 +1296,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
                           checked=""
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           id="checkbox_OEPN1su1JY"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -1352,16 +1352,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
                           checked=""
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           id="checkbox_VtOyR5kbu3"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -1408,16 +1408,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
                           checked=""
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           id="checkbox_pEwuLn9Enn"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -1481,16 +1481,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
                           checked=""
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           id="checkbox_YuxfFEpOsz"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -1537,15 +1537,15 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           id="checkbox_tWhQkBerF1"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -1592,16 +1592,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
                           checked=""
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           id="checkbox_ejc4GFes1U"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -1686,16 +1686,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
                           checked=""
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           id="checkbox_FzOK2nvfGF"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -1743,16 +1743,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
                           checked=""
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           id="checkbox_MldL2r2vbs"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -1799,17 +1799,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1md5v_10"
+                        class="_container_153f2_10"
                       >
                         <input
                           aria-describedby="_r_11_"
                           checked=""
-                          class="_input_1md5v_18"
+                          class="_input_153f2_18"
                           id="checkbox_SwicmKUiOB"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1md5v_19"
+                          class="_ui_153f2_19"
                         >
                           <svg
                             aria-hidden="true"
@@ -2223,15 +2223,15 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                         class="_inline-field-control_19upo_44"
                       >
                         <div
-                          class="_container_1md5v_10"
+                          class="_container_153f2_10"
                         >
                           <input
-                            class="_input_1md5v_18"
+                            class="_input_153f2_18"
                             id="checkbox_dvqsxEaZtl"
                             type="checkbox"
                           />
                           <div
-                            class="_ui_1md5v_19"
+                            class="_ui_153f2_19"
                           >
                             <svg
                               aria-hidden="true"
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
index 6612d369c31..cb9c51ad207 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
@@ -41,10 +41,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1qhtc_10"
+                      class="_container_1ug7n_10"
                     >
                       <input
-                        class="_input_1qhtc_18"
+                        class="_input_1ug7n_18"
                         disabled=""
                         id="radix-_r_0_"
                         name="themeSelector"
@@ -53,7 +53,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                         value="light"
                       />
                       <div
-                        class="_ui_1qhtc_19"
+                        class="_ui_1ug7n_19"
                       />
                     </div>
                   </div>
@@ -75,10 +75,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1qhtc_10"
+                      class="_container_1ug7n_10"
                     >
                       <input
-                        class="_input_1qhtc_18"
+                        class="_input_1ug7n_18"
                         disabled=""
                         id="radix-_r_1_"
                         name="themeSelector"
@@ -87,7 +87,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                         value="dark"
                       />
                       <div
-                        class="_ui_1qhtc_19"
+                        class="_ui_1ug7n_19"
                       />
                     </div>
                   </div>
@@ -109,10 +109,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1qhtc_10"
+                      class="_container_1ug7n_10"
                     >
                       <input
-                        class="_input_1qhtc_18"
+                        class="_input_1ug7n_18"
                         disabled=""
                         id="radix-_r_2_"
                         name="themeSelector"
@@ -121,7 +121,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                         value="light-high-contrast"
                       />
                       <div
-                        class="_ui_1qhtc_19"
+                        class="_ui_1ug7n_19"
                       />
                     </div>
                   </div>
@@ -176,11 +176,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
                     >
                       <div
-                        class="_container_1qhtc_10"
+                        class="_container_1ug7n_10"
                       >
                         <input
                           checked=""
-                          class="_input_1qhtc_18"
+                          class="_input_1ug7n_18"
                           id="radix-_r_3_"
                           name="layout"
                           title=""
@@ -188,7 +188,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                           value="group"
                         />
                         <div
-                          class="_ui_1qhtc_19"
+                          class="_ui_1ug7n_19"
                         />
                       </div>
                       <span>
@@ -316,10 +316,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
                     >
                       <div
-                        class="_container_1qhtc_10"
+                        class="_container_1ug7n_10"
                       >
                         <input
-                          class="_input_1qhtc_18"
+                          class="_input_1ug7n_18"
                           id="radix-_r_c_"
                           name="layout"
                           title=""
@@ -327,7 +327,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                           value="bubble"
                         />
                         <div
-                          class="_ui_1qhtc_19"
+                          class="_ui_1ug7n_19"
                         />
                       </div>
                       <span>
@@ -455,10 +455,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
                     >
                       <div
-                        class="_container_1qhtc_10"
+                        class="_container_1ug7n_10"
                       >
                         <input
-                          class="_input_1qhtc_18"
+                          class="_input_1ug7n_18"
                           id="radix-_r_l_"
                           name="layout"
                           title=""
@@ -466,7 +466,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                           value="irc"
                         />
                         <div
-                          class="_ui_1qhtc_19"
+                          class="_ui_1ug7n_19"
                         />
                       </div>
                       <span>
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
index 3b2643c841f..8a80335d220 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
@@ -1468,15 +1468,15 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1qhtc_10"
+                        class="_container_1ug7n_10"
                       >
                         <input
-                          class="_input_1qhtc_18"
+                          class="_input_1ug7n_18"
                           id="mx_media_previews_off"
                           type="radio"
                         />
                         <div
-                          class="_ui_1qhtc_19"
+                          class="_ui_1ug7n_19"
                         />
                       </div>
                     </div>
@@ -1498,15 +1498,15 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1qhtc_10"
+                        class="_container_1ug7n_10"
                       >
                         <input
-                          class="_input_1qhtc_18"
+                          class="_input_1ug7n_18"
                           id="mx_media_previews_private"
                           type="radio"
                         />
                         <div
-                          class="_ui_1qhtc_19"
+                          class="_ui_1ug7n_19"
                         />
                       </div>
                     </div>
@@ -1528,16 +1528,16 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1qhtc_10"
+                        class="_container_1ug7n_10"
                       >
                         <input
                           checked=""
-                          class="_input_1qhtc_18"
+                          class="_input_1ug7n_18"
                           id="mx_media_previews_on"
                           type="radio"
                         />
                         <div
-                          class="_ui_1qhtc_19"
+                          class="_ui_1ug7n_19"
                         />
                       </div>
                     </div>
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index c1f36aa84ef..d40483c9ed5 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
@@ -454,18 +454,18 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
           class="_inline-field-control_19upo_44"
         >
           <div
-            class="_container_1md5v_10"
+            class="_container_153f2_10"
           >
             <input
               aria-label="Select all"
               aria-labelledby="_r_4q_"
-              class="_input_1md5v_18"
+              class="_input_153f2_18"
               data-testid="device-select-all-checkbox"
               id="device-select-all-checkbox"
               type="checkbox"
             />
             <div
-              class="_ui_1md5v_19"
+              class="_ui_153f2_19"
             >
               <svg
                 aria-hidden="true"
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
index 891213fe1b3..432fd93f64d 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
@@ -48,18 +48,18 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1md5v_10"
+                      class="_container_153f2_10"
                     >
                       <input
                         aria-describedby="_r_1_"
                         checked=""
-                        class="_input_1md5v_18"
+                        class="_input_153f2_18"
                         disabled=""
                         id="checkbox_vY7Q4uEh9K"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1md5v_19"
+                        class="_ui_153f2_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -116,17 +116,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1md5v_10"
+                      class="_container_153f2_10"
                     >
                       <input
                         aria-describedby="_r_5_"
-                        class="_input_1md5v_18"
+                        class="_input_153f2_18"
                         data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                         id="checkbox_38QgU2Pomx"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1md5v_19"
+                        class="_ui_153f2_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -171,16 +171,16 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1md5v_10"
+                      class="_container_153f2_10"
                     >
                       <input
                         aria-describedby="_r_9_"
-                        class="_input_1md5v_18"
+                        class="_input_153f2_18"
                         id="checkbox_wKpa6hpi3Y"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1md5v_19"
+                        class="_ui_153f2_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -225,16 +225,16 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1md5v_10"
+                      class="_container_153f2_10"
                     >
                       <input
                         aria-describedby="_r_d_"
-                        class="_input_1md5v_18"
+                        class="_input_153f2_18"
                         id="checkbox_EetmBG4yVC"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1md5v_19"
+                        class="_ui_153f2_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -338,18 +338,18 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1md5v_10"
+                      class="_container_153f2_10"
                     >
                       <input
                         aria-describedby="_r_h_"
                         checked=""
-                        class="_input_1md5v_18"
+                        class="_input_153f2_18"
                         disabled=""
                         id="checkbox_vY7Q4uEh9K"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1md5v_19"
+                        class="_ui_153f2_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -406,17 +406,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1md5v_10"
+                      class="_container_153f2_10"
                     >
                       <input
                         aria-describedby="_r_l_"
-                        class="_input_1md5v_18"
+                        class="_input_153f2_18"
                         data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                         id="checkbox_38QgU2Pomx"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1md5v_19"
+                        class="_ui_153f2_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -461,16 +461,16 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1md5v_10"
+                      class="_container_153f2_10"
                     >
                       <input
                         aria-describedby="_r_p_"
-                        class="_input_1md5v_18"
+                        class="_input_153f2_18"
                         id="checkbox_wKpa6hpi3Y"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1md5v_19"
+                        class="_ui_153f2_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -515,16 +515,16 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1md5v_10"
+                      class="_container_153f2_10"
                     >
                       <input
                         aria-describedby="_r_t_"
-                        class="_input_1md5v_18"
+                        class="_input_153f2_18"
                         id="checkbox_EetmBG4yVC"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1md5v_19"
+                        class="_ui_153f2_19"
                       >
                         <svg
                           aria-hidden="true"
diff --git a/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
index ad30c365396..da5e2522124 100644
--- a/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
 <div
   aria-labelledby="radix-_r_1m_"
   aria-orientation="vertical"
-  class="_menu_1glhz_8"
+  class="_menu_1w1u7_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_1glhz_74"
+    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1w1u7_63"
     id="_r_1u_"
   >
     Threads activity
@@ -129,7 +129,7 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
 <div
   aria-labelledby="radix-_r_2a_"
   aria-orientation="vertical"
-  class="_menu_1glhz_8"
+  class="_menu_1w1u7_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_1glhz_74"
+    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1w1u7_63"
     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_1glhz_8"
+  class="_menu_1w1u7_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_1glhz_74"
+    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1w1u7_63"
     id="_r_2r_"
   >
     Threads activity
diff --git a/yarn.lock b/yarn.lock
index bbe332ae687..6b82f27104d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4401,10 +4401,10 @@
   resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-6.5.0.tgz#2ceb3cd5a8680f579bd7c303c94c7e93fde2c507"
   integrity sha512-93PD61x8lkU4Hh1DUBV8EHaP1WOZtAJV+/EPbWQCN3wWU1tiruHi3ChhT5xfxeJaipPb6xzLdyt1EyRH0N7Vzg==
 
-"@vector-im/compound-web@^8.3.5":
-  version "8.3.5"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-8.3.5.tgz#bb6d712868915899978128c2081b7b09389a1570"
-  integrity sha512-MbqnZMSwu3y8Z7b529Hf8t790adbcjQiq6X+PrX8emvRDsQsSa/S5Na1udStseCuLp3nAfqrgnospIgselbpvA==
+"@vector-im/compound-web@^8.3.6":
+  version "8.3.6"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-8.3.6.tgz#1f669e339d086faa14f4cd9f7a39e7d3d3e2a4d1"
+  integrity sha512-w7jjUJ8dXlLE2Ja/2J8Z433mtra3QF0cHDU5BGVLBBJnT/IwU4vazJRaU61dIOm3OnzDnsDreKcrMtWAUIhQkA==
   dependencies:
     "@floating-ui/react" "^0.27.0"
     "@radix-ui/react-context-menu" "^2.2.16"