Upgrade Compound Web to v7.12.0

2026-03-04 05:37:22 +00:00 · 2025-05-28 18:04:29 -04:00
parent f78b8dd153
commit 07a4244c05
9 changed files with 57 additions and 57 deletions
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
    "@typescript-eslint/parser": "^8.0.0",
    "@use-gesture/react": "^10.2.11",
    "@vector-im/compound-design-tokens": "^4.0.0",
-    "@vector-im/compound-web": "^7.2.0",
+    "@vector-im/compound-web": "^7.12.0",
    "@vitejs/plugin-basic-ssl": "^1.0.1",
    "@vitejs/plugin-react": "^4.0.1",
    "@vitest/coverage-v8": "^3.0.0",
--- a/src/FullScreenView.tsx
+++ b/src/FullScreenView.tsx
@@ -10,7 +10,7 @@ import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 import * as Sentry from "@sentry/react";
 import { logger } from "matrix-js-sdk/src/logger";
-import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
 import styles from "./FullScreenView.module.css";
@@ -67,7 +67,7 @@ export const ErrorPage = ({ error, widget }: ErrorPageProps): ReactElement => {
      ) : (
        <ErrorView
          widget={widget}
-          Icon={ErrorIcon}
+          Icon={ErrorSolidIcon}
          title={t("error.generic")}
          rageshake
          fatal
--- a/src/snapshots/Modal.test.tsx.snap
+++ b/src/snapshots/Modal.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`the content is rendered when the modal is open 1`] = `
 <div
  aria-labelledby="radix-:r4:"
-  class="overlay animate modal dialog _glass_1x9g9_17"
+  class="overlay animate modal dialog _glass_sepwu_8"
  data-state="open"
  id="radix-:r3:"
  role="dialog"
@@ -17,7 +17,7 @@ exports[`the content is rendered when the modal is open 1`] = `
      class="header"
    >
      <h2
-        class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+        class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
        id="radix-:r4:"
      >
        My modal
--- a/src/snapshots/Toast.test.tsx.snap
+++ b/src/snapshots/Toast.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Toast > renders 1`] = `
  type="button"
 >
  <h3
-    class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45"
+    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36"
    id="radix-:r4:"
  >
    Hello world!
--- a/src/button/snapshots/ReactionToggleButton.test.tsx.snap
+++ b/src/button/snapshots/ReactionToggleButton.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`Can close reaction dialog 1`] = `
    aria-expanded="true"
    aria-haspopup="true"
    aria-labelledby=":rb5:"
-    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
    data-kind="primary"
    data-size="lg"
    role="button"
@@ -26,7 +26,7 @@ exports[`Can close reaction dialog 1`] = `
    >
      <path
        clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m3.536-6.464a1 1 0 0 0-1.415-1.415A3 3 0 0 1 12 15a3 3 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
        fill-rule="evenodd"
      />
    </svg>
@@ -44,7 +44,7 @@ exports[`Can fully expand emoji picker 1`] = `
    aria-expanded="true"
    aria-haspopup="true"
    aria-labelledby=":r7m:"
-    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
    data-kind="primary"
    data-size="lg"
    role="button"
@@ -60,7 +60,7 @@ exports[`Can fully expand emoji picker 1`] = `
    >
      <path
        clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m3.536-6.464a1 1 0 0 0-1.415-1.415A3 3 0 0 1 12 15a3 3 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
        fill-rule="evenodd"
      />
    </svg>
@@ -75,7 +75,7 @@ exports[`Can lower hand 1`] = `
    aria-expanded="false"
    aria-haspopup="true"
    aria-labelledby=":r36:"
-    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
    data-kind="secondary"
    data-size="lg"
    role="button"
@@ -91,7 +91,7 @@ exports[`Can lower hand 1`] = `
    >
      <path
        clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m3.536-6.464a1 1 0 0 0-1.415-1.415A3 3 0 0 1 12 15a3 3 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
        fill-rule="evenodd"
      />
    </svg>
@@ -109,7 +109,7 @@ exports[`Can open menu 1`] = `
    aria-expanded="true"
    aria-haspopup="true"
    aria-labelledby=":r0:"
-    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
    data-kind="primary"
    data-size="lg"
    role="button"
@@ -125,7 +125,7 @@ exports[`Can open menu 1`] = `
    >
      <path
        clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m3.536-6.464a1 1 0 0 0-1.415-1.415A3 3 0 0 1 12 15a3 3 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
        fill-rule="evenodd"
      />
    </svg>
@@ -140,7 +140,7 @@ exports[`Can raise hand 1`] = `
    aria-expanded="false"
    aria-haspopup="true"
    aria-labelledby=":r1j:"
-    class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
+    class="_button_vczzf_8 raisedButton _has-icon_vczzf_57 _icon-only_vczzf_50"
    data-kind="primary"
    data-size="lg"
    role="button"
@@ -155,7 +155,7 @@ exports[`Can raise hand 1`] = `
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.944 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 2 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0V3Z"
+        d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.943 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 1.999 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0z"
      />
    </svg>
  </button>
--- a/src/room/GroupCallErrorBoundary.tsx
+++ b/src/room/GroupCallErrorBoundary.tsx
@@ -16,7 +16,7 @@ import {
 } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import {
-  ErrorIcon,
+  ErrorSolidIcon,
  HostIcon,
  OfflineIcon,
  WebBrowserIcon,
@@ -63,7 +63,7 @@ const ErrorPage: FC<ErrorPageProps> = ({
      icon = WebBrowserIcon;
      break;
    default:
-      icon = ErrorIcon;
+      icon = ErrorSolidIcon;
  }

  const actions: { label: string; onClick: () => void }[] = [];
--- a/src/room/snapshots/GroupCallErrorBoundary.test.tsx.snap
+++ b/src/room/snapshots/GroupCallErrorBoundary.test.tsx.snap
@@ -108,7 +108,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
          class="error"
        >
          <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
            data-size="large"
          >
            <svg
@@ -119,12 +119,12 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
-                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.484 5.484 0 0 0-.184 1.069A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 0 0 20.5 20.5l-.979-.979.004-.002L7.145 7.14l-.002.004L3.5 3.5Zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.474 5.474 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.497 4.497 0 0 1 22 15.5Z"
+                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.5 5.5 0 0 0-.184 1.07A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 1 0 20.5 20.5l-.979-.979.004-.001L7.145 7.14l-.002.003zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.47 5.47 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 22 15.5"
              />
            </svg>
          </div>
          <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
          >
            Connection lost
          </h1>
@@ -135,7 +135,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
            Reconnect
          </button>
          <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
            data-kind="tertiary"
            data-size="lg"
            role="button"
@@ -258,7 +258,7 @@ exports[`should have a close button in widget mode 1`] = `
          class="error"
        >
          <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
            data-size="large"
          >
            <svg
@@ -269,17 +269,17 @@ exports[`should have a close button in widget mode 1`] = `
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
-                d="M16.712 6.713A.968.968 0 0 1 16 7a.968.968 0 0 1-.713-.287A.967.967 0 0 1 15 6c0-.283.096-.52.287-.713A.968.968 0 0 1 16 5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713Z"
+                d="M16.713 6.713A.97.97 0 0 1 16 7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 15 6q0-.424.287-.713A.97.97 0 0 1 16 5q.424 0 .712.287Q17 5.576 17 6t-.288.713"
              />
              <path
                clip-rule="evenodd"
-                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H6Zm12 2H6v4h12V4ZM6 12v-2h12v2H6Zm0 2v2h12v-2H6Zm0 6v-2h12v2H6Z"
+                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm12 2H6v4h12zM6 12v-2h12v2zm0 2v2h12v-2zm0 6v-2h12v2z"
                fill-rule="evenodd"
              />
            </svg>
          </div>
          <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
          >
            Call is not supported
          </h1>
@@ -287,7 +287,7 @@ exports[`should have a close button in widget mode 1`] = `
            The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_FOCUS).
          </p>
          <button
-            class="_button_i91xf_17"
+            class="_button_vczzf_8"
            data-kind="primary"
            data-size="lg"
            role="button"
@@ -410,7 +410,7 @@ exports[`should render the error page with link back to home 1`] = `
          class="error"
        >
          <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
            data-size="large"
          >
            <svg
@@ -421,17 +421,17 @@ exports[`should render the error page with link back to home 1`] = `
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
-                d="M16.712 6.713A.968.968 0 0 1 16 7a.968.968 0 0 1-.713-.287A.967.967 0 0 1 15 6c0-.283.096-.52.287-.713A.968.968 0 0 1 16 5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713Z"
+                d="M16.713 6.713A.97.97 0 0 1 16 7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 15 6q0-.424.287-.713A.97.97 0 0 1 16 5q.424 0 .712.287Q17 5.576 17 6t-.288.713"
              />
              <path
                clip-rule="evenodd"
-                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H6Zm12 2H6v4h12V4ZM6 12v-2h12v2H6Zm0 2v2h12v-2H6Zm0 6v-2h12v2H6Z"
+                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm12 2H6v4h12zM6 12v-2h12v2zm0 2v2h12v-2zm0 6v-2h12v2z"
                fill-rule="evenodd"
              />
            </svg>
          </div>
          <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
          >
            Call is not supported
          </h1>
@@ -439,7 +439,7 @@ exports[`should render the error page with link back to home 1`] = `
            The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_FOCUS).
          </p>
          <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
            data-kind="tertiary"
            data-size="lg"
            role="button"
@@ -562,7 +562,7 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
          class="error"
        >
          <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
            data-size="large"
          >
            <svg
@@ -573,17 +573,17 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
-                d="M16.712 6.713A.968.968 0 0 1 16 7a.968.968 0 0 1-.713-.287A.967.967 0 0 1 15 6c0-.283.096-.52.287-.713A.968.968 0 0 1 16 5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713Z"
+                d="M16.713 6.713A.97.97 0 0 1 16 7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 15 6q0-.424.287-.713A.97.97 0 0 1 16 5q.424 0 .712.287Q17 5.576 17 6t-.288.713"
              />
              <path
                clip-rule="evenodd"
-                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H6Zm12 2H6v4h12V4ZM6 12v-2h12v2H6Zm0 2v2h12v-2H6Zm0 6v-2h12v2H6Z"
+                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm12 2H6v4h12zM6 12v-2h12v2zm0 2v2h12v-2zm0 6v-2h12v2z"
                fill-rule="evenodd"
              />
            </svg>
          </div>
          <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
          >
            Call is not supported
          </h1>
@@ -591,7 +591,7 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
            The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_FOCUS).
          </p>
          <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
            data-kind="tertiary"
            data-size="lg"
            role="button"
@@ -714,7 +714,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
          class="error"
        >
          <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
            data-size="large"
          >
            <svg
@@ -725,12 +725,12 @@ exports[`should report correct error for 'Connection lost' 1`] = `
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
-                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.484 5.484 0 0 0-.184 1.069A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 0 0 20.5 20.5l-.979-.979.004-.002L7.145 7.14l-.002.004L3.5 3.5Zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.474 5.474 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.497 4.497 0 0 1 22 15.5Z"
+                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.5 5.5 0 0 0-.184 1.07A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 1 0 20.5 20.5l-.979-.979.004-.001L7.145 7.14l-.002.003zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.47 5.47 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 22 15.5"
              />
            </svg>
          </div>
          <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
          >
            Connection lost
          </h1>
@@ -741,7 +741,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
            Reconnect
          </button>
          <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
            data-kind="tertiary"
            data-size="lg"
            role="button"
@@ -864,7 +864,7 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
          class="error"
        >
          <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
            data-size="large"
          >
            <svg
@@ -875,12 +875,12 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
-                d="M4 20c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18V6c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 4 4h16c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v12c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 20H4Zm0-2h16V8H4v10Z"
+                d="M4 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 2 18V6q0-.824.587-1.412A1.93 1.93 0 0 1 4 4h16q.824 0 1.413.588Q22 5.175 22 6v12q0 .824-.587 1.413A1.93 1.93 0 0 1 20 20zm0-2h16V8H4z"
              />
            </svg>
          </div>
          <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
          >
            Incompatible browser
          </h1>
@@ -888,7 +888,7 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
            Your web browser does not support encrypted calls. Supported browsers include Chrome, Safari, and Firefox 117+.
          </p>
          <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
            data-kind="tertiary"
            data-size="lg"
            role="button"
@@ -1011,7 +1011,7 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
          class="error"
        >
          <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
            data-size="large"
          >
            <svg
@@ -1022,12 +1022,12 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
-                d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+                d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 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 22"
              />
            </svg>
          </div>
          <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
          >
            Insufficient capacity
          </h1>
@@ -1035,7 +1035,7 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
            The server has reached its maximum capacity and you cannot join the call at this time. Try again later, or contact your server admin if the problem persists.
          </p>
          <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
            data-kind="tertiary"
            data-size="lg"
            role="button"
--- a/src/tile/MediaView.tsx
+++ b/src/tile/MediaView.tsx
@@ -13,7 +13,7 @@ import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { VideoTrack } from "@livekit/components-react";
 import { Text, Tooltip } from "@vector-im/compound-web";
-import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import styles from "./MediaView.module.css";
 import { Avatar } from "../Avatar";
@@ -168,7 +168,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
                placement="bottom"
                isTriggerInteractive={false}
              >
-                <ErrorIcon
+                <ErrorSolidIcon
                  width={20}
                  height={20}
                  className={styles.errorIcon}
--- a/yarn.lock
+++ b/yarn.lock
@@ -5032,9 +5032,9 @@ __metadata:
  languageName: node
  linkType: hard

-"@vector-im/compound-web@npm:^7.2.0":
-  version: 7.6.2
-  resolution: "@vector-im/compound-web@npm:7.6.2"
+"@vector-im/compound-web@npm:^7.12.0":
+  version: 7.12.0
+  resolution: "@vector-im/compound-web@npm:7.12.0"
  dependencies:
    "@floating-ui/react": "npm:^0.27.0"
    "@radix-ui/react-context-menu": "npm:^2.2.1"
@@ -5049,12 +5049,12 @@ __metadata:
    "@fontsource/inconsolata": ^5
    "@fontsource/inter": ^5
    "@types/react": "*"
-    "@vector-im/compound-design-tokens": ">=1.6.1 <4.0.0"
+    "@vector-im/compound-design-tokens": ">=1.6.1 <5.0.0"
    react: ^18 || ^19.0.0
  peerDependenciesMeta:
    "@types/react":
      optional: true
-  checksum: 10c0/573eef3011bed9c9acf9885d0e85941e7e2b9b1857103b14484911bb722a7ee02e0d168f1a554e97cb87886c02c6fb87f1bfeb9eac945e86d06e22e4360562d8
+  checksum: 10c0/e5546a5b8ca1a5e718f31acf9a515af4b76877d5526f2b7f5d8fb1fa9382a9a375fc0dd7fc6d3f6e9fc2e2bb0109ca99fc2a63552fc5c33bfa86e33f96204931
  languageName: node
  linkType: hard

@@ -6896,7 +6896,7 @@ __metadata:
    "@typescript-eslint/parser": "npm:^8.0.0"
    "@use-gesture/react": "npm:^10.2.11"
    "@vector-im/compound-design-tokens": "npm:^4.0.0"
-    "@vector-im/compound-web": "npm:^7.2.0"
+    "@vector-im/compound-web": "npm:^7.12.0"
    "@vitejs/plugin-basic-ssl": "npm:^1.0.1"
    "@vitejs/plugin-react": "npm:^4.0.1"
    "@vitest/coverage-v8": "npm:^3.0.0"