Move Flex & Box component into shared component folder (#30357)

* refactor: move Flex component in shared components

* refactor: update imports

* refactor: remove Flex pcss file

* fix: Flex component css override

* test: update snapshots

* fix: html export

* chore: add css module support to jest

* chore: keep old copyright

* refactor: change `mx_Flex` in `ErrorView` to `mx_ErrorView_flexContainer`

* test: update snapshots

* refactor: move Box component in shared components

* refactor: update import and css override

* test: update snapshots

jest.config.ts

@@ -22,6 +22,8 @@ const config: Config = {
     setupFiles: ["jest-canvas-mock", "web-streams-polyfill/polyfill"],
     setupFilesAfterEnv: ["<rootDir>/test/setupTests.ts"],
     moduleNameMapper: {
+        // Support CSS module
+        "\\.(module.css)$": "identity-obj-proxy",
         "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
         "\\.(gif|png|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
         "\\.svg$": "<rootDir>/__mocks__/svg.js",

package.json

@@ -264,6 +264,7 @@
         "file-loader": "^6.0.0",
         "html-webpack-plugin": "^5.5.3",
         "husky": "^9.0.0",
+        "identity-obj-proxy": "^3.0.0",
         "jest": "^29.6.2",
         "jest-canvas-mock": "^2.5.2",
         "jest-environment-jsdom": "^29.7.0",

res/css/_components.pcss

@@ -53,8 +53,6 @@
 @import "./components/views/settings/shared/_SettingsSubsectionHeading.pcss";
 @import "./components/views/spaces/_QuickThemeSwitcher.pcss";
 @import "./components/views/typography/_Caption.pcss";
-@import "./components/views/utils/_Box.pcss";
-@import "./components/views/utils/_Flex.pcss";
 @import "./compound/_Icon.pcss";
 @import "./compound/_SuccessDialog.pcss";
 @import "./structures/_AutoHideScrollbar.pcss";

res/css/structures/ErrorView.pcss

@@ -50,7 +50,7 @@ Please see LICENSE files in the repository root for full details.
         color: var(--cpd-color-text-secondary);
     }
 
-    .mx_Flex {
+    .mx_ErrorView_flexContainer {
         margin: 0 auto;
         max-width: max-content;
         flex-wrap: wrap;

res/css/views/right_panel/_RoomSummaryCard.pcss

@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
         padding: 0 12px;
         color: var(--cpd-color-text-secondary);
 
-        .mx_Box {
+        .mx_RoomSummaryCard_topic_box {
             width: 100%;
         }
 

res/css/views/right_panel/_UserInfo.pcss

@@ -108,11 +108,6 @@ Please see LICENSE files in the repository root for full details.
             margin: 0;
             font-size: $font-20px;
             line-height: $font-25px;
-
-            /* E2E icon wrapper */
-            .mx_Flex > span {
-                display: inline-block;
-            }
         }
 
         .mx_UserInfo_profile_name {

src/async-components/structures/ErrorView.tsx

@@ -10,7 +10,7 @@ import { Text, Heading, Button, Separator } from "@vector-im/compound-web";
 import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
 
 import SdkConfig from "../../SdkConfig";
-import { Flex } from "../../components/utils/Flex";
+import { Flex } from "../../shared-components/utils/Flex";
 import { _t } from "../../languageHandler";
 import { Icon as AppleIcon } from "../../../res/themes/element/img/compound/apple.svg";
 import { Icon as MicrosoftIcon } from "../../../res/themes/element/img/compound/microsoft.svg";
@@ -58,7 +58,7 @@ const MobileAppLinks: React.FC<{
     googlePlayUrl?: string;
     fdroidUrl?: string;
 }> = ({ appleAppStoreUrl, googlePlayUrl, fdroidUrl }) => (
-    <Flex gap="var(--cpd-space-6x)">
+    <Flex gap="var(--cpd-space-6x)" className="mx_ErrorView_flexContainer">
         {appleAppStoreUrl && (
             <a href={appleAppStoreUrl} target="_blank" rel="noreferrer noopener">
                 <img height="64" src="themes/element/img/download/apple.svg" alt="Apple App Store" />
@@ -84,7 +84,7 @@ const DesktopAppLinks: React.FC<{
     linuxUrl?: string;
 }> = ({ macOsUrl, win64Url, win64ArmUrl, linuxUrl }) => {
     return (
-        <Flex gap="var(--cpd-space-4x)">
+        <Flex gap="var(--cpd-space-4x)" className="mx_ErrorView_flexContainer">
             {macOsUrl && (
                 <Button as="a" href={macOsUrl} kind="secondary" Icon={AppleIcon}>
                     {_t("incompatible_browser|macos")}
@@ -193,7 +193,7 @@ export const UnsupportedBrowserView: React.FC<{
                 )}
             </Text>
 
-            <Flex gap="var(--cpd-space-4x)" className="mx_ErrorView_buttons">
+            <Flex gap="var(--cpd-space-4x)" className="mx_ErrorView_flexContainer mx_ErrorView_buttons">
                 <Button Icon={PopOutIcon} kind="secondary" size="sm">
                     {_t("incompatible_browser|learn_more")}
                 </Button>

src/components/views/dialogs/security/AccessSecretStorageDialog.tsx

@@ -14,7 +14,7 @@ import React, { type ChangeEvent, type FormEvent } from "react";
 import { type SecretStorage } from "matrix-js-sdk/src/matrix";
 
 import Field from "../../elements/Field";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import { _t } from "../../../../languageHandler";
 import { EncryptionCard } from "../../settings/encryption/EncryptionCard";
 import { EncryptionCardButtons } from "../../settings/encryption/EncryptionCardButtons";

src/components/views/right_panel/EmptyState.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ComponentType } from "react";
 import { Text } from "@vector-im/compound-web";
 
-import { Flex } from "../../utils/Flex";
+import { Flex } from "../../../shared-components/utils/Flex";
 
 interface Props {
     Icon: ComponentType<React.SVGAttributes<SVGElement>>;

src/components/views/right_panel/RoomSummaryCardView.tsx

@@ -46,9 +46,9 @@ import RoomAvatar from "../avatars/RoomAvatar.tsx";
 import { E2EStatus } from "../../../utils/ShieldUtils.ts";
 import { type RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks.ts";
 import RoomName from "../elements/RoomName.tsx";
-import { Flex } from "../../utils/Flex.tsx";
+import { Flex } from "../../../shared-components/utils/Flex";
 import { Linkify, topicToHtml } from "../../../HtmlUtils.tsx";
-import { Box } from "../../utils/Box.tsx";
+import { Box } from "../../../shared-components/utils/Box";
 import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement.tsx";
 import { useRoomSummaryCardViewModel } from "../../viewmodels/right_panel/RoomSummaryCardViewModel.tsx";
 import { useRoomTopicViewModel } from "../../viewmodels/right_panel/RoomSummaryCardTopicViewModel.tsx";
@@ -80,7 +80,7 @@ const RoomTopic: React.FC<Pick<IProps, "room">> = ({ room }): JSX.Element | null
                 gap="var(--cpd-space-2x)"
                 className="mx_RoomSummaryCard_topic"
             >
-                <Box flex="1">
+                <Box flex="1" className="mx_RoomSummaryCard_topic_box">
                     <Link kind="primary" onClick={vm.onEditClick}>
                         <Text size="sm" weight="regular">
                             {_t("right_panel|add_topic")}
@@ -103,7 +103,7 @@ const RoomTopic: React.FC<Pick<IProps, "room">> = ({ room }): JSX.Element | null
                 mx_RoomSummaryCard_topic_collapsed: !vm.expanded,
             })}
         >
-            <Box flex="1" className="mx_RoomSummaryCard_topic_container">
+            <Box flex="1" className="mx_RoomSummaryCard_topic_container mx_RoomSummaryCard_topic_box">
                 <Text size="sm" weight="regular" onClick={vm.onTopicLinkClick}>
                     {content}
                 </Text>

src/components/views/right_panel/user_info/UserInfoHeaderVerificationView.tsx

@@ -12,7 +12,7 @@ import { VerifiedIcon } from "@vector-im/compound-design-tokens/assets/web/icons
 
 import { useUserInfoVerificationViewModel } from "../../../viewmodels/right_panel/user_info/UserInfoHeaderVerificationViewModel";
 import { type IDevice } from "../UserInfo";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import { _t } from "../../../../languageHandler";
 
 export const UserInfoHeaderVerificationView: React.FC<{

src/components/views/right_panel/user_info/UserInfoHeaderView.tsx

@@ -12,7 +12,7 @@ import { Heading, Tooltip, Text } from "@vector-im/compound-web";
 import { useUserfoHeaderViewModel } from "../../../viewmodels/right_panel/user_info/UserInfoHeaderViewModel";
 import MemberAvatar from "../../avatars/MemberAvatar";
 import { Container, type Member, type IDevice } from "../UserInfo";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import PresenceLabel from "../../rooms/PresenceLabel";
 import CopyableText from "../../elements/CopyableText";
 import { UserInfoHeaderVerificationView } from "./UserInfoHeaderVerificationView";

src/components/views/rooms/MemberList/MemberListHeaderView.tsx

@@ -10,7 +10,7 @@ import React from "react";
 import InviteIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
 import { UserAddIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import { type MemberListViewState } from "../../../viewmodels/memberlist/MemberListViewModel";
 import { _t } from "../../../../languageHandler";
 

src/components/views/rooms/MemberList/MemberListView.tsx

@@ -10,7 +10,7 @@ import React, { type JSX } from "react";
 import { List, type ListRowProps } from "react-virtualized/dist/commonjs/List";
 import { AutoSizer } from "react-virtualized";
 
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import {
     type MemberWithSeparator,
     SEPARATOR,

src/components/views/rooms/MemberList/tiles/common/InvitedIconView.tsx

@@ -9,7 +9,7 @@ import React, { type JSX } from "react";
 import EmailIcon from "@vector-im/compound-design-tokens/assets/web/icons/email-solid";
 import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add-solid";
 
-import { Flex } from "../../../../../utils/Flex";
+import { Flex } from "../../../../../../shared-components/utils/Flex";
 
 interface Props {
     isThreePid: boolean;

src/components/views/rooms/NotificationDecoration.tsx

@@ -13,7 +13,7 @@ import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/vi
 import EmailIcon from "@vector-im/compound-design-tokens/assets/web/icons/email-solid";
 import { UnreadCounter, Unread } from "@vector-im/compound-web";
 
-import { Flex } from "../../utils/Flex";
+import { Flex } from "../../../shared-components/utils/Flex";
 import { type RoomNotificationState } from "../../../stores/notifications/RoomNotificationState";
 import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
 import { NotificationStateEvents } from "../../../stores/notifications/NotificationState";

src/components/views/rooms/RoomHeader/RoomHeader.tsx

@@ -25,8 +25,8 @@ import { RightPanelPhases } from "../../../../stores/right-panel/RightPanelStore
 import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext.tsx";
 import { useRoomMemberCount, useRoomMembers } from "../../../../hooks/useRoomMembers.ts";
 import { _t } from "../../../../languageHandler.tsx";
-import { Flex } from "../../../utils/Flex.tsx";
+import { Flex } from "../../../../shared-components/utils/Flex";
-import { Box } from "../../../utils/Box.tsx";
+import { Box } from "../../../../shared-components/utils/Box";
 import { getPlatformCallTypeProps, useRoomCall } from "../../../../hooks/room/useRoomCall.tsx";
 import { useRoomThreadNotifications } from "../../../../hooks/room/useRoomThreadNotifications.ts";
 import { useGlobalNotificationState } from "../../../../hooks/useGlobalNotificationState.ts";

src/components/views/rooms/RoomListPanel/EmptyRoomList.tsx

@@ -11,7 +11,7 @@ import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user
 import RoomIcon from "@vector-im/compound-design-tokens/assets/web/icons/room";
 
 import type { RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import { _t } from "../../../../languageHandler";
 import { FilterKey } from "../../../../stores/room-list-v3/skip-list/filters";
 import { type PrimaryFilter } from "../../../viewmodels/roomlist/useFilteredRooms";

src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx

@@ -16,7 +16,7 @@ import SettingsIcon from "@vector-im/compound-design-tokens/assets/web/icons/set
 import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call";
 
 import { _t } from "../../../../languageHandler";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import {
     type RoomListHeaderViewState,
     useRoomListHeaderViewModel,

src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx

@@ -21,7 +21,7 @@ import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check"
 import { type Room } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../../languageHandler";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import {
     type RoomListItemMenuViewState,
     useRoomListItemMenuViewModel,

src/components/views/rooms/RoomListPanel/RoomListItemView.tsx

@@ -10,7 +10,7 @@ import { type Room } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
 
 import { useRoomListItemViewModel } from "../../../viewmodels/roomlist/RoomListItemViewModel";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import { RoomListItemMenuView } from "./RoomListItemMenuView";
 import { NotificationDecoration } from "../NotificationDecoration";
 import { RoomAvatarView } from "../../avatars/RoomAvatarView";

src/components/views/rooms/RoomListPanel/RoomListPanel.tsx

@@ -12,7 +12,7 @@ import { UIComponent } from "../../../../settings/UIFeature";
 import { RoomListSearch } from "./RoomListSearch";
 import { RoomListHeaderView } from "./RoomListHeaderView";
 import { RoomListView } from "./RoomListView";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import { _t } from "../../../../languageHandler";
 
 type RoomListPanelProps = {

src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx

@@ -10,7 +10,7 @@ import { ChatFilter, IconButton } from "@vector-im/compound-web";
 import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
 
 import type { RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import { _t } from "../../../../languageHandler";
 
 interface RoomListPrimaryFiltersProps {

src/components/views/rooms/RoomListPanel/RoomListSearch.tsx

@@ -20,7 +20,7 @@ import { MetaSpace } from "../../../../stores/spaces";
 import { Action } from "../../../../dispatcher/actions";
 import PosthogTrackers from "../../../../PosthogTrackers";
 import defaultDispatcher from "../../../../dispatcher/dispatcher";
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 import { useTypedEventEmitterState } from "../../../../hooks/useEventEmitter";
 import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../../../LegacyCallHandler";
 

src/components/views/rooms/ThirdPartyMemberInfo.tsx

@@ -19,7 +19,7 @@ import { isValid3pidInvite } from "../../../RoomInvite";
 import { Action } from "../../../dispatcher/actions";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import BaseCard from "../right_panel/BaseCard";
-import { Flex } from "../../utils/Flex";
+import { Flex } from "../../../shared-components/utils/Flex";
 
 interface IProps {
     event: MatrixEvent;

src/components/views/settings/UserProfileSettings.tsx

@@ -26,7 +26,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import LogoutDialog, { shouldShowLogoutDialog } from "../dialogs/LogoutDialog";
 import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import { Flex } from "../../utils/Flex";
+import { Flex } from "../../../shared-components/utils/Flex";
 
 const SpinnerToast: React.FC<{ children?: ReactNode }> = ({ children }) => (
     <>

src/components/views/settings/encryption/EncryptionCardEmphasisedContent.tsx

@@ -7,7 +7,7 @@
 
 import React, { type JSX, type PropsWithChildren } from "react";
 
-import { Flex } from "../../../utils/Flex";
+import { Flex } from "../../../../shared-components/utils/Flex";
 
 /**
  * A component for emphasised text within an {@link EncryptionCard}

src/shared-components/utils/Box/Box.module.css

@@ -6,14 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-.mx_Box--flex {
+.box-flex {
     flex: var(--mx-box-flex, unset);
 }
 
-.mx_Box--shrink {
+.box-shrink {
     flex-shrink: var(--mx-box-shrink, unset);
 }
 
-.mx_Box--grow {
+.box-grow {
     flex-grow: var(--mx-box-grow, unset);
 }

src/shared-components/utils/Box/Box.tsx

@@ -9,7 +9,9 @@ Please see LICENSE files in the repository root for full details.
 import classNames from "classnames";
 import React, { type JSX, useMemo } from "react";
 
-type FlexProps = {
+import styles from "./Box.module.css";
+
+type BoxProps = {
     /**
      * The type of the HTML element
      * @default div
@@ -51,7 +53,7 @@ export function Box({
     className,
     children,
     ...props
-}: React.PropsWithChildren<FlexProps>): JSX.Element {
+}: React.PropsWithChildren<BoxProps>): JSX.Element {
     const style = useMemo(() => {
         const style: Record<string, any> = {};
         if (flex) style["--mx-box-flex"] = flex;
@@ -64,10 +66,10 @@ export function Box({
         as,
         {
             ...props,
-            className: classNames("mx_Box", className, {
+            className: classNames(className, {
-                "mx_Box--flex": !!flex,
+                [styles["box-flex"]]: !!flex,
-                "mx_Box--shrink": !!shrink,
+                [styles["box-shrink"]]: !!shrink,
-                "mx_Box--grow": !!grow,
+                [styles["box-grow"]]: !!grow,
             }),
             style,
         },

src/shared-components/utils/Box/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export { Box } from "./Box";

src/shared-components/utils/Flex/Flex.module.css

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-.mx_Flex {
+.flex {
     display: var(--mx-flex-display, unset);
     flex-direction: var(--mx-flex-direction, unset);
     align-items: var(--mx-flex-align, unset);

src/shared-components/utils/Flex/Flex.tsx

@@ -9,6 +9,8 @@ Please see LICENSE files in the repository root for full details.
 import classNames from "classnames";
 import React, { type JSX, type ComponentProps, type JSXElementConstructor, useMemo } from "react";
 
+import styles from "./Flex.module.css";
+
 type FlexProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = {
     /**
      * The type of the HTML element
@@ -82,5 +84,5 @@ export function Flex<T extends keyof JSX.IntrinsicElements | JSXElementConstruct
         [align, direction, display, gap, justify, wrap],
     );
 
-    return React.createElement(as, { ...props, className: classNames("mx_Flex", className), style }, children);
+    return React.createElement(as, { ...props, className: classNames(styles.flex, className), style }, children);
 }

src/shared-components/utils/Flex/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export { Flex } from "./Flex";

src/utils/exportUtils/HtmlExport.tsx

@@ -161,7 +161,7 @@ export default class HTMLExporter extends Exporter {
                     <div class="mx_MatrixChat_wrapper" aria-hidden="false">
                         <div class="mx_MatrixChat">
                         <main class="mx_RoomView">
-                            <div class="mx_Flex mx_RoomHeader light-panel">
+                            <div class="mx_RoomHeader light-panel">
                                 ${roomAvatar}
                                 <div class="mx_RoomHeader_infoWrapper">
                                     <div

src/utils/exportUtils/exportCustomCSS.css

@@ -131,11 +131,11 @@ a.mx_reply_anchor:hover {
 }
 
 .mx_RoomHeader {
-    --mx-flex-display: flex;
+    display: flex;
-    --mx-flex-direction: row;
+    flex-direction: row;
-    --mx-flex-align: center;
+    align-items: center;
-    --mx-flex-justify: start;
+    justify-content: start;
-    --mx-flex-gap: var(--cpd-space-3x);
+    gap: var(--cpd-space-3x);
 }
 
 .mx_ReplyChain_Export {

test/unit-tests/async-components/structures/__snapshots__/ErrorView-test.tsx.snap

@@ -98,7 +98,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         </span>
       </p>
       <div
-        class="mx_Flex mx_ErrorView_buttons"
+        class="flex mx_ErrorView_flexContainer mx_ErrorView_buttons"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
       >
         <button
@@ -139,7 +139,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
       Use Element Desktop instead
     </h2>
     <div
-      class="mx_Flex"
+      class="flex mx_ErrorView_flexContainer"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
     >
       <a
@@ -209,7 +209,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
       Or use our mobile app
     </h2>
     <div
-      class="mx_Flex"
+      class="flex mx_ErrorView_flexContainer"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-6x); --mx-flex-wrap: nowrap;"
     >
       <a

test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap

@@ -52,7 +52,7 @@ exports[`FilePanel renders empty state 1`] = `
         class="mx_RoomView_empty"
       >
         <div
-          class="mx_Flex mx_EmptyState"
+          class="flex mx_EmptyState"
           style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
         >
           <svg

test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -6,7 +6,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
     class="mx_RoomView mx_RoomView--local"
   >
     <header
-      class="mx_Flex mx_RoomHeader light-panel"
+      class="flex mx_RoomHeader light-panel"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <button
@@ -28,7 +28,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
         tabindex="0"
       >
         <div
-          class="mx_Box mx_RoomHeader_info mx_Box--flex"
+          class="mx_RoomHeader_info box-flex"
           style="--mx-box-flex: 1;"
         >
           <div
@@ -225,7 +225,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
     class="mx_RoomView mx_RoomView--local"
   >
     <header
-      class="mx_Flex mx_RoomHeader light-panel"
+      class="flex mx_RoomHeader light-panel"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <button
@@ -247,7 +247,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
         tabindex="0"
       >
         <div
-          class="mx_Box mx_RoomHeader_info mx_Box--flex"
+          class="mx_RoomHeader_info box-flex"
           style="--mx-box-flex: 1;"
         >
           <div
@@ -530,7 +530,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
     class="mx_RoomView mx_RoomView--local"
   >
     <header
-      class="mx_Flex mx_RoomHeader light-panel"
+      class="flex mx_RoomHeader light-panel"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <button
@@ -552,7 +552,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
         tabindex="0"
       >
         <div
-          class="mx_Box mx_RoomHeader_info mx_Box--flex"
+          class="mx_RoomHeader_info box-flex"
           style="--mx-box-flex: 1;"
         >
           <div
@@ -912,7 +912,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
     class="mx_RoomView mx_RoomView--local"
   >
     <header
-      class="mx_Flex mx_RoomHeader light-panel"
+      class="flex mx_RoomHeader light-panel"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <button
@@ -934,7 +934,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
         tabindex="0"
       >
         <div
-          class="mx_Box mx_RoomHeader_info mx_Box--flex"
+          class="mx_RoomHeader_info box-flex"
           style="--mx-box-flex: 1;"
         >
           <div
@@ -1375,7 +1375,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
         data-layout="group"
       >
         <header
-          class="mx_Flex mx_RoomHeader light-panel"
+          class="flex mx_RoomHeader light-panel"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         >
           <button
@@ -1397,7 +1397,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             tabindex="0"
           >
             <div
-              class="mx_Box mx_RoomHeader_info mx_Box--flex"
+              class="mx_RoomHeader_info box-flex"
               style="--mx-box-flex: 1;"
             >
               <div
@@ -1587,7 +1587,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
         data-layout="group"
       >
         <header
-          class="mx_Flex mx_RoomHeader light-panel"
+          class="flex mx_RoomHeader light-panel"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         >
           <button
@@ -1609,7 +1609,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             tabindex="0"
           >
             <div
-              class="mx_Box mx_RoomHeader_info mx_Box--flex"
+              class="mx_RoomHeader_info box-flex"
               style="--mx-box-flex: 1;"
             >
               <div
@@ -1976,7 +1976,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
         data-layout="group"
       >
         <header
-          class="mx_Flex mx_RoomHeader light-panel"
+          class="flex mx_RoomHeader light-panel"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         >
           <button
@@ -1998,7 +1998,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
             tabindex="0"
           >
             <div
-              class="mx_Box mx_RoomHeader_info mx_Box--flex"
+              class="mx_RoomHeader_info box-flex"
               style="--mx-box-flex: 1;"
             >
               <div

test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap

@@ -71,7 +71,7 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
         Add extensions
       </button>
       <div
-        class="mx_Flex mx_EmptyState"
+        class="flex mx_EmptyState"
         style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
       >
         <svg

test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap

@@ -50,7 +50,7 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
       tabindex="-1"
     >
       <div
-        class="mx_Flex mx_EmptyState"
+        class="flex mx_EmptyState"
         style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
       >
         <svg

test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap

@@ -71,7 +71,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           title=""
         />
         <section
-          class="mx_Flex mx_RoomSummaryCard_badges"
+          class="flex mx_RoomSummaryCard_badges"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <span
@@ -110,11 +110,11 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </span>
         </section>
         <section
-          class="mx_Flex mx_RoomSummaryCard_topic"
+          class="flex mx_RoomSummaryCard_topic"
           style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <div
-            class="mx_Box mx_RoomSummaryCard_topic_container mx_Box--flex"
+            class="mx_RoomSummaryCard_topic_container mx_RoomSummaryCard_topic_box box-flex"
             style="--mx-box-flex: 1;"
           >
             <p
@@ -152,7 +152,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             </button>
           </div>
           <div
-            class="mx_Box mx_RoomSummaryCard_topic_edit mx_Box--flex"
+            class="mx_RoomSummaryCard_topic_edit box-flex"
             style="--mx-box-flex: 1;"
           >
             <a
@@ -831,7 +831,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           title=""
         />
         <section
-          class="mx_Flex mx_RoomSummaryCard_badges"
+          class="flex mx_RoomSummaryCard_badges"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <span
@@ -870,11 +870,11 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </span>
         </section>
         <section
-          class="mx_Flex mx_RoomSummaryCard_topic"
+          class="flex mx_RoomSummaryCard_topic"
           style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <div
-            class="mx_Box mx_Box--flex"
+            class="mx_RoomSummaryCard_topic_box box-flex"
             style="--mx-box-flex: 1;"
           >
             <a
@@ -1553,7 +1553,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           title=""
         />
         <section
-          class="mx_Flex mx_RoomSummaryCard_badges"
+          class="flex mx_RoomSummaryCard_badges"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <span
@@ -1592,11 +1592,11 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </span>
         </section>
         <section
-          class="mx_Flex mx_RoomSummaryCard_topic"
+          class="flex mx_RoomSummaryCard_topic"
           style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <div
-            class="mx_Box mx_RoomSummaryCard_topic_container mx_Box--flex"
+            class="mx_RoomSummaryCard_topic_container mx_RoomSummaryCard_topic_box box-flex"
             style="--mx-box-flex: 1;"
           >
             <p
@@ -1634,7 +1634,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             </button>
           </div>
           <div
-            class="mx_Box mx_RoomSummaryCard_topic_edit mx_Box--flex"
+            class="mx_RoomSummaryCard_topic_edit box-flex"
             style="--mx-box-flex: 1;"
           >
             <a

test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap

@@ -77,7 +77,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         class="mx_UserInfo_container mx_UserInfo_header"
       >
         <div
-          class="mx_Flex mx_UserInfo_profile"
+          class="flex mx_UserInfo_profile"
           style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
         >
           <h1
@@ -85,7 +85,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             dir="auto"
           >
             <div
-              class="mx_Flex mx_UserInfo_profile_name"
+              class="flex mx_UserInfo_profile_name"
               style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
             >
               @user:example.com
@@ -113,7 +113,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
           </p>
         </div>
         <div
-          class="mx_Flex mx_UserInfo_verification"
+          class="flex mx_UserInfo_verification"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
         >
           <p
@@ -364,7 +364,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         class="mx_UserInfo_container mx_UserInfo_header"
       >
         <div
-          class="mx_Flex mx_UserInfo_profile"
+          class="flex mx_UserInfo_profile"
           style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
         >
           <h1
@@ -372,7 +372,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             dir="auto"
           >
             <div
-              class="mx_Flex mx_UserInfo_profile_name"
+              class="flex mx_UserInfo_profile_name"
               style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
             >
               @user:example.com
@@ -400,7 +400,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
           </p>
         </div>
         <div
-          class="mx_Flex mx_UserInfo_verification"
+          class="flex mx_UserInfo_verification"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
         >
           <p

test/unit-tests/components/views/right_panel/__snapshots__/UserInfoHeaderVerificationView-test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<UserInfoHeaderVerificationView /> renders verification unavailable message 1`] = `
 <div>
   <div
-    class="mx_Flex mx_UserInfo_verification"
+    class="flex mx_UserInfo_verification"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <p
@@ -20,7 +20,7 @@ exports[`<UserInfoHeaderVerificationView /> renders verification unavailable mes
 exports[`<UserInfoHeaderVerificationView /> renders verified badge when user is verified 1`] = `
 <div>
   <div
-    class="mx_Flex mx_UserInfo_verification"
+    class="flex mx_UserInfo_verification"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <span
@@ -52,7 +52,7 @@ exports[`<UserInfoHeaderVerificationView /> renders verified badge when user is
 exports[`<UserInfoHeaderVerificationView /> renders verify button 1`] = `
 <div>
   <div
-    class="mx_Flex mx_UserInfo_verification"
+    class="flex mx_UserInfo_verification"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <div

test/unit-tests/components/views/right_panel/__snapshots__/UserInfoHeaderView-test.tsx.snap

@@ -31,7 +31,7 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
     class="mx_UserInfo_container mx_UserInfo_header"
   >
     <div
-      class="mx_Flex mx_UserInfo_profile"
+      class="flex mx_UserInfo_profile"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <h1
@@ -39,7 +39,7 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
         dir="auto"
       >
         <div
-          class="mx_Flex mx_UserInfo_profile_name"
+          class="flex mx_UserInfo_profile_name"
           style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
         >
           @user:example.com
@@ -62,7 +62,7 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
       </p>
     </div>
     <div
-      class="mx_Flex mx_UserInfo_verification"
+      class="flex mx_UserInfo_verification"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <svg

test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
 <DocumentFragment>
   <header
-    class="mx_Flex mx_RoomHeader light-panel"
+    class="flex mx_RoomHeader light-panel"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
   >
     <button
@@ -25,7 +25,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
       tabindex="0"
     >
       <div
-        class="mx_Box mx_RoomHeader_info mx_Box--flex"
+        class="mx_RoomHeader_info box-flex"
         style="--mx-box-flex: 1;"
       >
         <div

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/EmptyRoomList-test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<EmptyRoomList /> should display empty state for filter favourite 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
+    class="flex mx_EmptyRoomList_GenericPlaceholder"
     data-testid="empty-room-list"
     style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
@@ -24,7 +24,7 @@ exports[`<EmptyRoomList /> should display empty state for filter favourite 1`] =
 exports[`<EmptyRoomList /> should display empty state for filter people 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
+    class="flex mx_EmptyRoomList_GenericPlaceholder"
     data-testid="empty-room-list"
     style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
@@ -45,7 +45,7 @@ exports[`<EmptyRoomList /> should display empty state for filter people 1`] = `
 exports[`<EmptyRoomList /> should display empty state for filter rooms 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
+    class="flex mx_EmptyRoomList_GenericPlaceholder"
     data-testid="empty-room-list"
     style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
@@ -66,7 +66,7 @@ exports[`<EmptyRoomList /> should display empty state for filter rooms 1`] = `
 exports[`<EmptyRoomList /> should display the empty state for the invite filter 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
+    class="flex mx_EmptyRoomList_GenericPlaceholder"
     data-testid="empty-room-list"
     style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
@@ -91,7 +91,7 @@ exports[`<EmptyRoomList /> should display the empty state for the invite filter
 exports[`<EmptyRoomList /> should display the empty state for the low priority filter 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
+    class="flex mx_EmptyRoomList_GenericPlaceholder"
     data-testid="empty-room-list"
     style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
@@ -116,7 +116,7 @@ exports[`<EmptyRoomList /> should display the empty state for the low priority f
 exports[`<EmptyRoomList /> should display the empty state for the mention filter 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
+    class="flex mx_EmptyRoomList_GenericPlaceholder"
     data-testid="empty-room-list"
     style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
@@ -141,7 +141,7 @@ exports[`<EmptyRoomList /> should display the empty state for the mention filter
 exports[`<EmptyRoomList /> should display the empty state for the unread filter 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
+    class="flex mx_EmptyRoomList_GenericPlaceholder"
     data-testid="empty-room-list"
     style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
@@ -166,7 +166,7 @@ exports[`<EmptyRoomList /> should display the empty state for the unread filter
 exports[`<EmptyRoomList /> should not render the new room button if the user doesn't have the rights to create a room 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
+    class="flex mx_EmptyRoomList_GenericPlaceholder"
     data-testid="empty-room-list"
     style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
@@ -181,7 +181,7 @@ exports[`<EmptyRoomList /> should not render the new room button if the user doe
       Get started by messaging someone
     </span>
     <div
-      class="mx_Flex mx_EmptyRoomList_DefaultPlaceholder"
+      class="flex mx_EmptyRoomList_DefaultPlaceholder"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
     >
       <button
@@ -213,7 +213,7 @@ exports[`<EmptyRoomList /> should not render the new room button if the user doe
 exports[`<EmptyRoomList /> should render the default placeholder when there is no filter 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
+    class="flex mx_EmptyRoomList_GenericPlaceholder"
     data-testid="empty-room-list"
     style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
@@ -228,7 +228,7 @@ exports[`<EmptyRoomList /> should render the default placeholder when there is n
       Get started by messaging someone or by creating a room
     </span>
     <div
-      class="mx_Flex mx_EmptyRoomList_DefaultPlaceholder"
+      class="flex mx_EmptyRoomList_DefaultPlaceholder"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
     >
       <button

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap

@@ -34,7 +34,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             type="button"
           >
             <div
-              class="mx_Flex mx_RoomListItemView_container"
+              class="flex mx_RoomListItemView_container"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
             >
               <span
@@ -57,7 +57,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 />
               </span>
               <div
-                class="mx_Flex mx_RoomListItemView_content"
+                class="flex mx_RoomListItemView_content"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -85,7 +85,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             type="button"
           >
             <div
-              class="mx_Flex mx_RoomListItemView_container"
+              class="flex mx_RoomListItemView_container"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
             >
               <span
@@ -108,7 +108,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 />
               </span>
               <div
-                class="mx_Flex mx_RoomListItemView_content"
+                class="flex mx_RoomListItemView_content"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -136,7 +136,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             type="button"
           >
             <div
-              class="mx_Flex mx_RoomListItemView_container"
+              class="flex mx_RoomListItemView_container"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
             >
               <span
@@ -159,7 +159,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 />
               </span>
               <div
-                class="mx_Flex mx_RoomListItemView_content"
+                class="flex mx_RoomListItemView_content"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -187,7 +187,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             type="button"
           >
             <div
-              class="mx_Flex mx_RoomListItemView_container"
+              class="flex mx_RoomListItemView_container"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
             >
               <span
@@ -210,7 +210,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 />
               </span>
               <div
-                class="mx_Flex mx_RoomListItemView_content"
+                class="flex mx_RoomListItemView_content"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -238,7 +238,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             type="button"
           >
             <div
-              class="mx_Flex mx_RoomListItemView_container"
+              class="flex mx_RoomListItemView_container"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
             >
               <span
@@ -261,7 +261,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 />
               </span>
               <div
-                class="mx_Flex mx_RoomListItemView_content"
+                class="flex mx_RoomListItemView_content"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -289,7 +289,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             type="button"
           >
             <div
-              class="mx_Flex mx_RoomListItemView_container"
+              class="flex mx_RoomListItemView_container"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
             >
               <span
@@ -312,7 +312,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 />
               </span>
               <div
-                class="mx_Flex mx_RoomListItemView_content"
+                class="flex mx_RoomListItemView_content"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -340,7 +340,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             type="button"
           >
             <div
-              class="mx_Flex mx_RoomListItemView_container"
+              class="flex mx_RoomListItemView_container"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
             >
               <span
@@ -363,7 +363,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 />
               </span>
               <div
-                class="mx_Flex mx_RoomListItemView_content"
+                class="flex mx_RoomListItemView_content"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -391,7 +391,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             type="button"
           >
             <div
-              class="mx_Flex mx_RoomListItemView_container"
+              class="flex mx_RoomListItemView_container"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
             >
               <span
@@ -414,7 +414,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 />
               </span>
               <div
-                class="mx_Flex mx_RoomListItemView_content"
+                class="flex mx_RoomListItemView_content"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -442,7 +442,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             type="button"
           >
             <div
-              class="mx_Flex mx_RoomListItemView_container"
+              class="flex mx_RoomListItemView_container"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
             >
               <span
@@ -465,7 +465,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 />
               </span>
               <div
-                class="mx_Flex mx_RoomListItemView_content"
+                class="flex mx_RoomListItemView_content"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -493,7 +493,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             type="button"
           >
             <div
-              class="mx_Flex mx_RoomListItemView_container"
+              class="flex mx_RoomListItemView_container"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
             >
               <span
@@ -516,7 +516,7 @@ exports[`<RoomList /> should render a room list 1`] = `
                 />
               </span>
               <div
-                class="mx_Flex mx_RoomListItemView_content"
+                class="flex mx_RoomListItemView_content"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
               >
                 <div

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap

@@ -4,12 +4,12 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
 <DocumentFragment>
   <header
     aria-label="Room options"
-    class="mx_Flex mx_RoomListHeaderView"
+    class="flex mx_RoomListHeaderView"
     data-testid="room-list-header"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <div
-      class="mx_Flex mx_RoomListHeaderView_title"
+      class="flex mx_RoomListHeaderView_title"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <h1
@@ -51,7 +51,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
       </button>
     </div>
     <div
-      class="mx_Flex"
+      class="flex"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
       <button
@@ -133,12 +133,12 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
 <DocumentFragment>
   <header
     aria-label="Room options"
-    class="mx_Flex mx_RoomListHeaderView"
+    class="flex mx_RoomListHeaderView"
     data-testid="room-list-header"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <div
-      class="mx_Flex mx_RoomListHeaderView_title"
+      class="flex mx_RoomListHeaderView_title"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <h1
@@ -180,7 +180,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
       </button>
     </div>
     <div
-      class="mx_Flex"
+      class="flex"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
       <button
@@ -256,12 +256,12 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
 <DocumentFragment>
   <header
     aria-label="Room options"
-    class="mx_Flex mx_RoomListHeaderView"
+    class="flex mx_RoomListHeaderView"
     data-testid="room-list-header"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <div
-      class="mx_Flex mx_RoomListHeaderView_title"
+      class="flex mx_RoomListHeaderView_title"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <h1
@@ -303,7 +303,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
       </button>
     </div>
     <div
-      class="mx_Flex"
+      class="flex"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
       <button
@@ -385,12 +385,12 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
 <DocumentFragment>
   <header
     aria-label="Room options"
-    class="mx_Flex mx_RoomListHeaderView"
+    class="flex mx_RoomListHeaderView"
     data-testid="room-list-header"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <div
-      class="mx_Flex mx_RoomListHeaderView_title"
+      class="flex mx_RoomListHeaderView_title"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <h1
@@ -432,7 +432,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
       </button>
     </div>
     <div
-      class="mx_Flex"
+      class="flex"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
       <button
@@ -514,12 +514,12 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
 <DocumentFragment>
   <header
     aria-label="Room options"
-    class="mx_Flex mx_RoomListHeaderView"
+    class="flex mx_RoomListHeaderView"
     data-testid="room-list-header"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <div
-      class="mx_Flex mx_RoomListHeaderView_title"
+      class="flex mx_RoomListHeaderView_title"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <h1
@@ -529,7 +529,7 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
       </h1>
     </div>
     <div
-      class="mx_Flex"
+      class="flex"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
       <button

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex mx_RoomListItemMenuView"
+    class="flex mx_RoomListItemMenuView"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
   >
     <button
@@ -80,7 +80,7 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
 exports[`<RoomListItemMenuView /> should render the notification options menu 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex mx_RoomListItemMenuView"
+    class="flex mx_RoomListItemMenuView"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
   >
     <button

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap

@@ -10,7 +10,7 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
     type="button"
   >
     <div
-      class="mx_Flex mx_RoomListItemView_container"
+      class="flex mx_RoomListItemView_container"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <span
@@ -33,7 +33,7 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
         />
       </span>
       <div
-        class="mx_Flex mx_RoomListItemView_content"
+        class="flex mx_RoomListItemView_content"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
       >
         <div
@@ -62,7 +62,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
     type="button"
   >
     <div
-      class="mx_Flex mx_RoomListItemView_container"
+      class="flex mx_RoomListItemView_container"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <span
@@ -85,7 +85,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
         />
       </span>
       <div
-        class="mx_Flex mx_RoomListItemView_content"
+        class="flex mx_RoomListItemView_content"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
       >
         <div
@@ -100,7 +100,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
         </div>
         <div
           aria-hidden="true"
-          class="mx_Flex"
+          class="flex"
           data-testid="notification-decoration"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
         >
@@ -126,7 +126,7 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
     type="button"
   >
     <div
-      class="mx_Flex mx_RoomListItemView_container"
+      class="flex mx_RoomListItemView_container"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <span
@@ -149,7 +149,7 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
         />
       </span>
       <div
-        class="mx_Flex mx_RoomListItemView_content"
+        class="flex mx_RoomListItemView_content"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
       >
         <div
@@ -178,7 +178,7 @@ exports[`<RoomListItemView /> should render a room item with a message preview 1
     type="button"
   >
     <div
-      class="mx_Flex mx_RoomListItemView_container"
+      class="flex mx_RoomListItemView_container"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <span
@@ -201,7 +201,7 @@ exports[`<RoomListItemView /> should render a room item with a message preview 1
         />
       </span>
       <div
-        class="mx_Flex mx_RoomListItemView_content"
+        class="flex mx_RoomListItemView_content"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
       >
         <div

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap

@@ -3,13 +3,13 @@
 exports[`<RoomListPrimaryFilters /> should renders all filters correctly 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex mx_RoomListPrimaryFilters"
+    class="flex mx_RoomListPrimaryFilters"
     data-testid="primary-filters"
     style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
   >
     <ul
       aria-label="Room list filters"
-      class="mx_Flex"
+      class="flex"
       id="«r0»"
       role="listbox"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListSearch-test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<RoomListSearch /> should display search and explore buttons 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex mx_RoomListSearch"
+    class="flex mx_RoomListSearch"
     role="search"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
@@ -27,7 +27,7 @@ exports[`<RoomListSearch /> should display search and explore buttons 1`] = `
         />
       </svg>
       <span
-        class="mx_Flex"
+        class="flex"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <span
@@ -68,7 +68,7 @@ exports[`<RoomListSearch /> should display search and explore buttons 1`] = `
 exports[`<RoomListSearch /> should display the dial button when the PTSN protocol is not supported 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex mx_RoomListSearch"
+    class="flex mx_RoomListSearch"
     role="search"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
@@ -92,7 +92,7 @@ exports[`<RoomListSearch /> should display the dial button when the PTSN protoco
         />
       </svg>
       <span
-        class="mx_Flex"
+        class="flex"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <span
@@ -154,7 +154,7 @@ exports[`<RoomListSearch /> should display the dial button when the PTSN protoco
 exports[`<RoomListSearch /> should hide the explore button when UIComponent.ExploreRooms is disabled 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex mx_RoomListSearch"
+    class="flex mx_RoomListSearch"
     role="search"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
@@ -178,7 +178,7 @@ exports[`<RoomListSearch /> should hide the explore button when UIComponent.Expl
         />
       </svg>
       <span
-        class="mx_Flex"
+        class="flex"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <span
@@ -198,7 +198,7 @@ exports[`<RoomListSearch /> should hide the explore button when UIComponent.Expl
 exports[`<RoomListSearch /> should hide the explore button when the active space is not MetaSpace.Home 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex mx_RoomListSearch"
+    class="flex mx_RoomListSearch"
     role="search"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
@@ -222,7 +222,7 @@ exports[`<RoomListSearch /> should hide the explore button when the active space
         />
       </svg>
       <span
-        class="mx_Flex"
+        class="flex"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <span

test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<NotificationDecoration /> should render the activity decoration 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex"
+    class="flex"
     data-testid="notification-decoration"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
   >
@@ -19,7 +19,7 @@ exports[`<NotificationDecoration /> should render the activity decoration 1`] =
 exports[`<NotificationDecoration /> should render the invitation decoration 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex"
+    class="flex"
     data-testid="notification-decoration"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
   >
@@ -41,7 +41,7 @@ exports[`<NotificationDecoration /> should render the invitation decoration 1`]
 exports[`<NotificationDecoration /> should render the mention decoration 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex"
+    class="flex"
     data-testid="notification-decoration"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
   >
@@ -68,7 +68,7 @@ exports[`<NotificationDecoration /> should render the mention decoration 1`] = `
 exports[`<NotificationDecoration /> should render the muted decoration 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex"
+    class="flex"
     data-testid="notification-decoration"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
   >
@@ -93,7 +93,7 @@ exports[`<NotificationDecoration /> should render the muted decoration 1`] = `
 exports[`<NotificationDecoration /> should render the notification decoration 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex"
+    class="flex"
     data-testid="notification-decoration"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
   >
@@ -109,7 +109,7 @@ exports[`<NotificationDecoration /> should render the notification decoration 1`
 exports[`<NotificationDecoration /> should render the notification decoration without count 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex"
+    class="flex"
     data-testid="notification-decoration"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
   >
@@ -123,7 +123,7 @@ exports[`<NotificationDecoration /> should render the notification decoration wi
 exports[`<NotificationDecoration /> should render the unset message decoration 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex"
+    class="flex"
     data-testid="notification-decoration"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
   >
@@ -145,7 +145,7 @@ exports[`<NotificationDecoration /> should render the unset message decoration 1
 exports[`<NotificationDecoration /> should render the video decoration 1`] = `
 <DocumentFragment>
   <div
-    class="mx_Flex"
+    class="flex"
     data-testid="notification-decoration"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
   >

test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap

@@ -50,11 +50,11 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
       tabindex="-1"
     >
       <div
-        class="mx_Flex mx_ThirdPartyMemberInfo"
+        class="flex mx_ThirdPartyMemberInfo"
         style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
       >
         <section
-          class="mx_Flex"
+          class="flex"
           style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <span
@@ -125,11 +125,11 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
       tabindex="-1"
     >
       <div
-        class="mx_Flex mx_ThirdPartyMemberInfo"
+        class="flex mx_ThirdPartyMemberInfo"
         style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
       >
         <section
-          class="mx_Flex"
+          class="flex"
           style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <span

test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap

@@ -231,7 +231,7 @@ exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly
           Invited
         </div>
         <div
-          class="mx_Flex mx_InvitedIconView"
+          class="flex mx_InvitedIconView"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
         >
           <svg

test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap

@@ -84,7 +84,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
       </h2>
     </div>
     <div
-      class="mx_Flex mx_EncryptionCard_emphasisedContent"
+      class="flex mx_EncryptionCard_emphasisedContent"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       Deleting key storage will remove your cryptographic identity and message keys from the server and turn off the following security features:

test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap

@@ -84,7 +84,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
       </h2>
     </div>
     <div
-      class="mx_Flex mx_EncryptionCard_emphasisedContent"
+      class="flex mx_EncryptionCard_emphasisedContent"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <ul
@@ -267,7 +267,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
       </h2>
     </div>
     <div
-      class="mx_Flex mx_EncryptionCard_emphasisedContent"
+      class="flex mx_EncryptionCard_emphasisedContent"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <ul
@@ -450,7 +450,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       </h2>
     </div>
     <div
-      class="mx_Flex mx_EncryptionCard_emphasisedContent"
+      class="flex mx_EncryptionCard_emphasisedContent"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <ul
@@ -636,7 +636,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       </h2>
     </div>
     <div
-      class="mx_Flex mx_EncryptionCard_emphasisedContent"
+      class="flex mx_EncryptionCard_emphasisedContent"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <ul
@@ -740,7 +740,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
          Reset in progress...
       </button>
       <div
-        class="mx_Flex mx_EncryptionCard_emphasisedContent"
+        class="flex mx_EncryptionCard_emphasisedContent"
         style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <span

test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap

@@ -255,7 +255,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
           </h2>
         </div>
         <div
-          class="mx_Flex mx_EncryptionCard_emphasisedContent"
+          class="flex mx_EncryptionCard_emphasisedContent"
           style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         >
           <ul

test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap

@@ -17,7 +17,7 @@ exports[`HTMLExport should export 1`] = `
                     <div class="mx_MatrixChat_wrapper" aria-hidden="false">
                         <div class="mx_MatrixChat">
                         <main class="mx_RoomView">
-                            <div class="mx_Flex mx_RoomHeader light-panel">
+                            <div class="mx_RoomHeader light-panel">
                                 <span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size:32px">!</span>
                                 <div class="mx_RoomHeader_infoWrapper">
                                     <div

test/unit-tests/vector/__snapshots__/init-test.ts.snap

@@ -102,7 +102,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
         </span>
       </p>
       <div
-        class="mx_Flex mx_ErrorView_buttons"
+        class="flex mx_ErrorView_flexContainer mx_ErrorView_buttons"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
       >
         <button
@@ -152,7 +152,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
       Use Element Desktop instead
     </h2>
     <div
-      class="mx_Flex"
+      class="flex mx_ErrorView_flexContainer"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
     >
       <a
@@ -222,7 +222,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
       Or use our mobile app
     </h2>
     <div
-      class="mx_Flex"
+      class="flex mx_ErrorView_flexContainer"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-6x); --mx-flex-wrap: nowrap;"
     >
       <a

yarn.lock

@@ -8813,6 +8813,11 @@ handle-thing@^2.0.0:
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
   integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
 
+harmony-reflect@^1.4.6:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.2.tgz#31ecbd32e648a34d030d86adb67d4d47547fe710"
+  integrity sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==
+
 has-bigints@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.1.0.tgz#28607e965ac967e03cd2a2c70a2636a1edad49fe"
@@ -9179,6 +9184,13 @@ icss-utils@^5.0.0, icss-utils@^5.1.0:
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
   integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
 
+identity-obj-proxy@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"
+  integrity sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==
+  dependencies:
+    harmony-reflect "^1.4.6"
+
 ieee754@^1.1.12, ieee754@^1.1.13, ieee754@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"