// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`<RoomListView /> > renders Default story 1`] = `
<div>
  <div
    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
  >
    <div>
      <div
        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
        data-testid="primary-filters"
        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
      >
        <div
          aria-label="Room list filters"
          class="Flex-module_flex RoomListPrimaryFilters-module_list"
          id="_r_0_"
          role="listbox"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
        >
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Unreads
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            People
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Rooms
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Favourites
          </button>
        </div>
      </div>
    </div>
    <div
      class="Flex-module_flex RoomListView-module_list"
      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
    >
      <div
        aria-label="Room list"
        class="VirtualizedRoomListView-module_roomList"
        data-testid="room-list"
        data-virtuoso-scroller="true"
        role="listbox"
        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
        tabindex="0"
      >
        <div
          data-viewport-type="element"
          style="height: 100%; position: absolute; top: 0px; width: 100%;"
        >
          <div
            data-testid="virtuoso-item-list"
            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
          >
            <div
              data-index="0"
              data-item-index="0"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room General"
                aria-posinset="1"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="General avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    GE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="General"
                      >
                        General
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in General"
                      >
                        Last message in General
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_3_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_a_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_8_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <div
                          class="_unread-counter_1147r_8"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="1"
              data-item-index="1"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Random"
                aria-posinset="2"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Random avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    RA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Random"
                      >
                        Random
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_h_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_f_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_o_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_m_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="2"
              data-item-index="2"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Engineering"
                aria-posinset="3"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Engineering avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    EN
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Engineering"
                      >
                        Engineering
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Engineering"
                      >
                        Last message in Engineering
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_v_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_t_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_16_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_14_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="3"
              data-item-index="3"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Design"
                aria-posinset="4"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Design avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    DE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Design"
                      >
                        Design
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_1d_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1b_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_1k_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1i_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="4"
              data-item-index="4"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Product"
                aria-posinset="5"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Product avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    PR
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Product"
                      >
                        Product
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Product"
                      >
                        Last message in Product
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_1r_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1p_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_22_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_20_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="5"
              data-item-index="5"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Marketing with 5 unread mentions."
                aria-posinset="6"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Marketing avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    MA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Marketing"
                      >
                        Marketing
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_29_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_27_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_2g_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_2e_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <span
                          class="_unread-counter_1147r_8"
                        >
                          5
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="6"
              data-item-index="6"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Sales"
                aria-posinset="7"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Sales avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    SA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Sales"
                      >
                        Sales
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Sales"
                      >
                        Last message in Sales
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_2n_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_2l_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_2u_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_2s_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="7"
              data-item-index="7"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Support"
                aria-posinset="8"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Support avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    SU
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Support"
                      >
                        Support
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_35_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_33_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_3c_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_3a_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="8"
              data-item-index="8"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Announcements"
                aria-posinset="9"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Announcements avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    AN
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Announcements"
                      >
                        Announcements
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Announcements"
                      >
                        Last message in Announcements
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_3j_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_3h_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_3q_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_3o_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="9"
              data-item-index="9"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Off-topic"
                aria-posinset="10"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Off-topic avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    OF
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Off-topic"
                      >
                        Off-topic
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_41_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_3v_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_48_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_46_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="10"
              data-item-index="10"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Team Alpha with 10 unread mentions."
                aria-posinset="11"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Team Alpha avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    TE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Team Alpha"
                      >
                        Team Alpha
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Team Alpha"
                      >
                        Last message in Team Alpha
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_4f_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_4d_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_4m_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_4k_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <span
                          class="_unread-counter_1147r_8"
                        >
                          10
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="11"
              data-item-index="11"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Team Beta"
                aria-posinset="12"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Team Beta avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    TE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Team Beta"
                      >
                        Team Beta
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_4t_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_4r_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_54_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_52_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="12"
              data-item-index="12"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Project X"
                aria-posinset="13"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Project X avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    PR
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Project X"
                      >
                        Project X
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Project X"
                      >
                        Last message in Project X
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_5b_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_59_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_5i_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_5g_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="13"
              data-item-index="13"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Project Y"
                aria-posinset="14"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Project Y avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    PR
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Project Y"
                      >
                        Project Y
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_5p_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_5n_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_60_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_5u_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="14"
              data-item-index="14"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Water Cooler"
                aria-posinset="15"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Water Cooler avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    WA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Water Cooler"
                      >
                        Water Cooler
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Water Cooler"
                      >
                        Last message in Water Cooler
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_67_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_65_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_6e_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_6c_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="15"
              data-item-index="15"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Feedback with 15 unread mentions."
                aria-posinset="16"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Feedback avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    FE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Feedback"
                      >
                        Feedback
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_6l_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_6j_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_6s_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_6q_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <span
                          class="_unread-counter_1147r_8"
                        >
                          15
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="16"
              data-item-index="16"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Ideas"
                aria-posinset="17"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Ideas avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    ID
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Ideas"
                      >
                        Ideas
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Ideas"
                      >
                        Last message in Ideas
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_73_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_71_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_7a_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_78_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="17"
              data-item-index="17"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Bugs"
                aria-posinset="18"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Bugs avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    BU
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Bugs"
                      >
                        Bugs
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_7h_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_7f_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_7o_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_7m_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="18"
              data-item-index="18"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Features"
                aria-posinset="19"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Features avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    FE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Features"
                      >
                        Features
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Features"
                      >
                        Last message in Features
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_7v_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_7t_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_86_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_84_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="19"
              data-item-index="19"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Releases"
                aria-posinset="20"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_lastItem"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Releases avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    RE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Releases"
                      >
                        Releases
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_8d_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_8b_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_8k_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_8i_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<RoomListView /> > renders Empty story 1`] = `
<div>
  <div
    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
  >
    <div>
      <div
        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
        data-testid="primary-filters"
        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
      >
        <div
          aria-label="Room list filters"
          class="Flex-module_flex RoomListPrimaryFilters-module_list"
          id="_r_a2_"
          role="listbox"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
        >
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Unreads
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            People
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Rooms
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Favourites
          </button>
        </div>
      </div>
    </div>
    <div
      class="Flex-module_flex RoomListView-module_list"
      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
    >
      <div
        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
        data-testid="empty-room-list"
        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
      >
        <span
          class="RoomListEmptyStateView-module_title"
        >
          No chats yet
        </span>
        <span
          class="RoomListEmptyStateView-module_description"
        >
          Get started by messaging someone or by creating a room
        </span>
        <div
          class="Flex-module_flex RoomListEmptyStateView-module_defaultPlaceholder"
          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
        >
          <button
            class="_button_13vu4_8 _has-icon_13vu4_60"
            data-kind="secondary"
            data-size="sm"
            role="button"
            tabindex="0"
          >
            <svg
              aria-hidden="true"
              fill="currentColor"
              height="20"
              viewBox="0 0 24 24"
              width="20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
              />
            </svg>
            Start chat
          </button>
          <button
            class="_button_13vu4_8 _has-icon_13vu4_60"
            data-kind="secondary"
            data-size="sm"
            role="button"
            tabindex="0"
          >
            <svg
              aria-hidden="true"
              fill="currentColor"
              height="20"
              viewBox="0 0 24 24"
              width="20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m8.566 17-.944 4.094q-.086.406-.372.656t-.687.25q-.543 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.801-3.5H3.158q-.572 0-.916-.484a1.27 1.27 0 0 1-.2-1.078 1.12 1.12 0 0 1 1.116-.938H6.85l1.145-5h-3.12q-.57 0-.915-.484a1.27 1.27 0 0 1-.2-1.078A1.12 1.12 0 0 1 4.875 7h3.691l.945-4.094q.085-.406.372-.656.286-.25.686-.25.544 0 .887.469.345.468.2 1.031l-.8 3.5h4.578l.944-4.094q.085-.406.372-.656.286-.25.687-.25.543 0 .887.469t.2 1.031L17.723 7h3.119q.573 0 .916.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937H17.15l-1.145 5h3.12q.57 0 .915.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937h-3.691l-.944 4.094q-.087.406-.373.656t-.686.25q-.544 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.8-3.5zm.573-2.5h4.578l1.144-5h-4.578z"
              />
            </svg>
            New room
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<RoomListView /> > renders EmptyFavouriteFilter story 1`] = `
<div>
  <div
    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
  >
    <div>
      <div
        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
        data-testid="primary-filters"
        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
      >
        <div
          aria-label="Room list filters"
          class="Flex-module_flex RoomListPrimaryFilters-module_list"
          id="_r_1q9_"
          role="listbox"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
        >
          <button
            aria-hidden="false"
            aria-selected="true"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Favourites
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            People
          </button>
        </div>
      </div>
    </div>
    <div
      class="Flex-module_flex RoomListView-module_list"
      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
    >
      <div
        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
        data-testid="empty-room-list"
        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
      >
        <span
          class="RoomListEmptyStateView-module_title"
        >
          You don't have favourite chats yet
        </span>
        <span
          class="RoomListEmptyStateView-module_description"
        >
          You can add a chat to your favourites in the chat settings
        </span>
      </div>
    </div>
  </div>
</div>
`;

exports[`<RoomListView /> > renders EmptyInvitesFilter story 1`] = `
<div>
  <div
    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
  >
    <div>
      <div
        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
        data-testid="primary-filters"
        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
      >
        <div
          aria-label="Room list filters"
          class="Flex-module_flex RoomListPrimaryFilters-module_list"
          id="_r_1qd_"
          role="listbox"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
        >
          <button
            aria-hidden="false"
            aria-selected="true"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Invites
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            People
          </button>
        </div>
      </div>
    </div>
    <div
      class="Flex-module_flex RoomListView-module_list"
      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
    >
      <div
        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
        data-testid="empty-room-list"
        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
      >
        <span
          class="RoomListEmptyStateView-module_title"
        >
          You don't have any unread invites
        </span>
        <button
          class="_button_13vu4_8"
          data-kind="tertiary"
          data-size="lg"
          role="button"
          tabindex="0"
        >
          See all activity
        </button>
      </div>
    </div>
  </div>
</div>
`;

exports[`<RoomListView /> > renders EmptyLowPriorityFilter story 1`] = `
<div>
  <div
    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
  >
    <div>
      <div
        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
        data-testid="primary-filters"
        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
      >
        <div
          aria-label="Room list filters"
          class="Flex-module_flex RoomListPrimaryFilters-module_list"
          id="_r_1qf_"
          role="listbox"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
        >
          <button
            aria-hidden="false"
            aria-selected="true"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Low priority
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            People
          </button>
        </div>
      </div>
    </div>
    <div
      class="Flex-module_flex RoomListView-module_list"
      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
    >
      <div
        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
        data-testid="empty-room-list"
        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
      >
        <span
          class="RoomListEmptyStateView-module_title"
        >
          You don't have any low priority rooms
        </span>
        <button
          class="_button_13vu4_8"
          data-kind="tertiary"
          data-size="lg"
          role="button"
          tabindex="0"
        >
          See all activity
        </button>
      </div>
    </div>
  </div>
</div>
`;

exports[`<RoomListView /> > renders EmptyMentionsFilter story 1`] = `
<div>
  <div
    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
  >
    <div>
      <div
        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
        data-testid="primary-filters"
        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
      >
        <div
          aria-label="Room list filters"
          class="Flex-module_flex RoomListPrimaryFilters-module_list"
          id="_r_1qe_"
          role="listbox"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
        >
          <button
            aria-hidden="false"
            aria-selected="true"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Mentions
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            People
          </button>
        </div>
      </div>
    </div>
    <div
      class="Flex-module_flex RoomListView-module_list"
      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
    >
      <div
        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
        data-testid="empty-room-list"
        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
      >
        <span
          class="RoomListEmptyStateView-module_title"
        >
          You don't have any unread mentions
        </span>
        <button
          class="_button_13vu4_8"
          data-kind="tertiary"
          data-size="lg"
          role="button"
          tabindex="0"
        >
          See all activity
        </button>
      </div>
    </div>
  </div>
</div>
`;

exports[`<RoomListView /> > renders EmptyPeopleFilter story 1`] = `
<div>
  <div
    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
  >
    <div>
      <div
        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
        data-testid="primary-filters"
        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
      >
        <div
          aria-label="Room list filters"
          class="Flex-module_flex RoomListPrimaryFilters-module_list"
          id="_r_1qa_"
          role="listbox"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
        >
          <button
            aria-hidden="false"
            aria-selected="true"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            People
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Rooms
          </button>
        </div>
      </div>
    </div>
    <div
      class="Flex-module_flex RoomListView-module_list"
      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
    >
      <div
        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
        data-testid="empty-room-list"
        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
      >
        <span
          class="RoomListEmptyStateView-module_title"
        >
          You don’t have direct chats with anyone yet
        </span>
        <span
          class="RoomListEmptyStateView-module_description"
        >
          You can deselect filters in order to see your other chats
        </span>
      </div>
    </div>
  </div>
</div>
`;

exports[`<RoomListView /> > renders EmptyRoomsFilter story 1`] = `
<div>
  <div
    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
  >
    <div>
      <div
        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
        data-testid="primary-filters"
        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
      >
        <div
          aria-label="Room list filters"
          class="Flex-module_flex RoomListPrimaryFilters-module_list"
          id="_r_1qb_"
          role="listbox"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
        >
          <button
            aria-hidden="false"
            aria-selected="true"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Rooms
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            People
          </button>
        </div>
      </div>
    </div>
    <div
      class="Flex-module_flex RoomListView-module_list"
      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
    >
      <div
        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
        data-testid="empty-room-list"
        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
      >
        <span
          class="RoomListEmptyStateView-module_title"
        >
          You’re not in any room yet
        </span>
        <span
          class="RoomListEmptyStateView-module_description"
        >
          You can deselect filters in order to see your other chats
        </span>
      </div>
    </div>
  </div>
</div>
`;

exports[`<RoomListView /> > renders EmptyUnreadFilter story 1`] = `
<div>
  <div
    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
  >
    <div>
      <div
        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
        data-testid="primary-filters"
        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
      >
        <div
          aria-label="Room list filters"
          class="Flex-module_flex RoomListPrimaryFilters-module_list"
          id="_r_1qc_"
          role="listbox"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
        >
          <button
            aria-hidden="false"
            aria-selected="true"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Unreads
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            People
          </button>
        </div>
      </div>
    </div>
    <div
      class="Flex-module_flex RoomListView-module_list"
      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
    >
      <div
        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
        data-testid="empty-room-list"
        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
      >
        <span
          class="RoomListEmptyStateView-module_title"
        >
          Congrats! You don’t have any unread messages
        </span>
        <button
          class="_button_13vu4_8"
          data-kind="tertiary"
          data-size="lg"
          role="button"
          tabindex="0"
        >
          Show all chats
        </button>
      </div>
    </div>
  </div>
</div>
`;

exports[`<RoomListView /> > renders EmptyWithoutCreatePermission story 1`] = `
<div>
  <div
    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
  >
    <div>
      <div
        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
        data-testid="primary-filters"
        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
      >
        <div
          aria-label="Room list filters"
          class="Flex-module_flex RoomListPrimaryFilters-module_list"
          id="_r_a3_"
          role="listbox"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
        >
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Unreads
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            People
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Rooms
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Favourites
          </button>
        </div>
      </div>
    </div>
    <div
      class="Flex-module_flex RoomListView-module_list"
      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
    >
      <div
        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
        data-testid="empty-room-list"
        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
      >
        <span
          class="RoomListEmptyStateView-module_title"
        >
          No chats yet
        </span>
        <span
          class="RoomListEmptyStateView-module_description"
        >
          Get started by messaging someone
        </span>
        <div
          class="Flex-module_flex RoomListEmptyStateView-module_defaultPlaceholder"
          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
        >
          <button
            class="_button_13vu4_8 _has-icon_13vu4_60"
            data-kind="secondary"
            data-size="sm"
            role="button"
            tabindex="0"
          >
            <svg
              aria-hidden="true"
              fill="currentColor"
              height="20"
              viewBox="0 0 24 24"
              width="20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
              />
            </svg>
            Start chat
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
<div>
  <div
    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
  >
    <div>
      <div
        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
        data-testid="primary-filters"
        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
      >
        <div
          aria-label="Room list filters"
          class="Flex-module_flex RoomListPrimaryFilters-module_list"
          id="_r_l6_"
          role="listbox"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
        >
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Unreads
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            People
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Rooms
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Favourites
          </button>
        </div>
      </div>
    </div>
    <div
      class="Flex-module_flex RoomListView-module_list"
      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
    >
      <div
        aria-label="Room list"
        class="VirtualizedRoomListView-module_roomList"
        data-testid="room-list"
        data-virtuoso-scroller="true"
        role="listbox"
        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
        tabindex="0"
      >
        <div
          data-viewport-type="element"
          style="height: 100%; position: absolute; top: 0px; width: 100%;"
        >
          <div
            data-testid="virtuoso-item-list"
            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 3276px; padding-top: 0px;"
          >
            <div
              data-index="0"
              data-item-index="0"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room General"
                aria-posinset="1"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="General avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    GE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="General"
                      >
                        General
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in General"
                      >
                        Last message in General
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_l9_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_l7_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_lg_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_le_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <div
                          class="_unread-counter_1147r_8"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="1"
              data-item-index="1"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Random"
                aria-posinset="2"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Random avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    RA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Random"
                      >
                        Random
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_ln_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_ll_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_lu_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_ls_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="2"
              data-item-index="2"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Engineering"
                aria-posinset="3"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Engineering avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    EN
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Engineering"
                      >
                        Engineering
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Engineering"
                      >
                        Last message in Engineering
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_m5_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_m3_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_mc_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_ma_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="3"
              data-item-index="3"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Design"
                aria-posinset="4"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Design avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    DE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Design"
                      >
                        Design
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_mj_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_mh_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_mq_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_mo_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="4"
              data-item-index="4"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Product"
                aria-posinset="5"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Product avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    PR
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Product"
                      >
                        Product
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Product"
                      >
                        Last message in Product
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_n1_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_mv_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_n8_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_n6_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="5"
              data-item-index="5"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Marketing with 5 unread mentions."
                aria-posinset="6"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Marketing avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    MA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Marketing"
                      >
                        Marketing
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_nf_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_nd_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_nm_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_nk_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <span
                          class="_unread-counter_1147r_8"
                        >
                          5
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="6"
              data-item-index="6"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Sales"
                aria-posinset="7"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Sales avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    SA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Sales"
                      >
                        Sales
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Sales"
                      >
                        Last message in Sales
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_nt_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_nr_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_o4_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_o2_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="7"
              data-item-index="7"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Support"
                aria-posinset="8"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Support avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    SU
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Support"
                      >
                        Support
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_ob_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_o9_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_oi_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_og_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="8"
              data-item-index="8"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Announcements"
                aria-posinset="9"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Announcements avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    AN
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Announcements"
                      >
                        Announcements
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Announcements"
                      >
                        Last message in Announcements
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_op_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_on_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_p0_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_ou_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="9"
              data-item-index="9"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Off-topic"
                aria-posinset="10"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Off-topic avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    OF
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Off-topic"
                      >
                        Off-topic
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_p7_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_p5_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_pe_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_pc_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="10"
              data-item-index="10"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Team Alpha with 10 unread mentions."
                aria-posinset="11"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Team Alpha avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    TE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Team Alpha"
                      >
                        Team Alpha
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Team Alpha"
                      >
                        Last message in Team Alpha
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_pl_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_pj_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_ps_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_pq_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <span
                          class="_unread-counter_1147r_8"
                        >
                          10
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="11"
              data-item-index="11"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Team Beta"
                aria-posinset="12"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Team Beta avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    TE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Team Beta"
                      >
                        Team Beta
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_q3_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_q1_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_qa_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_q8_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="12"
              data-item-index="12"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Project X"
                aria-posinset="13"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Project X avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    PR
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Project X"
                      >
                        Project X
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Project X"
                      >
                        Last message in Project X
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_qh_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_qf_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_qo_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_qm_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="13"
              data-item-index="13"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Project Y"
                aria-posinset="14"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Project Y avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    PR
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Project Y"
                      >
                        Project Y
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_qv_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_qt_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_r6_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_r4_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="14"
              data-item-index="14"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Water Cooler"
                aria-posinset="15"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Water Cooler avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    WA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Water Cooler"
                      >
                        Water Cooler
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Water Cooler"
                      >
                        Last message in Water Cooler
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_rd_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_rb_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_rk_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_ri_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="15"
              data-item-index="15"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Feedback with 15 unread mentions."
                aria-posinset="16"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Feedback avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    FE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Feedback"
                      >
                        Feedback
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_rr_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_rp_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_s2_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_s0_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <span
                          class="_unread-counter_1147r_8"
                        >
                          15
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="16"
              data-item-index="16"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Ideas"
                aria-posinset="17"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Ideas avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    ID
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Ideas"
                      >
                        Ideas
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Ideas"
                      >
                        Last message in Ideas
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_s9_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_s7_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_sg_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_se_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="17"
              data-item-index="17"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Bugs"
                aria-posinset="18"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Bugs avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    BU
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Bugs"
                      >
                        Bugs
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_sn_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_sl_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_su_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_ss_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="18"
              data-item-index="18"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Features"
                aria-posinset="19"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Features avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    FE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Features"
                      >
                        Features
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Features"
                      >
                        Last message in Features
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_t5_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_t3_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_tc_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_ta_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="19"
              data-item-index="19"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Releases"
                aria-posinset="20"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Releases avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    RE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Releases"
                      >
                        Releases
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_tj_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_th_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_tq_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_to_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="20"
              data-item-index="20"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room General with 20 unread mentions."
                aria-posinset="21"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="General avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    GE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="General"
                      >
                        General
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in General"
                      >
                        Last message in General
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_u1_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_tv_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_u8_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_u6_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <span
                          class="_unread-counter_1147r_8"
                        >
                          20
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="21"
              data-item-index="21"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Random"
                aria-posinset="22"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Random avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    RA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Random"
                      >
                        Random
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_uf_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_ud_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_um_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_uk_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="22"
              data-item-index="22"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Engineering"
                aria-posinset="23"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Engineering avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    EN
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Engineering"
                      >
                        Engineering
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Engineering"
                      >
                        Last message in Engineering
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_ut_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_ur_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_v4_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_v2_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="23"
              data-item-index="23"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Design"
                aria-posinset="24"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Design avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    DE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Design"
                      >
                        Design
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_vb_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_v9_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_vi_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_vg_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="24"
              data-item-index="24"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Product"
                aria-posinset="25"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Product avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    PR
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Product"
                      >
                        Product
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Product"
                      >
                        Last message in Product
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_vp_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_vn_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_100_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_vu_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="25"
              data-item-index="25"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Marketing with 25 unread mentions."
                aria-posinset="26"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Marketing avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    MA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Marketing"
                      >
                        Marketing
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_107_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_105_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_10e_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_10c_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <span
                          class="_unread-counter_1147r_8"
                        >
                          25
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="26"
              data-item-index="26"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Sales"
                aria-posinset="27"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Sales avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    SA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Sales"
                      >
                        Sales
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Sales"
                      >
                        Last message in Sales
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_10l_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_10j_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_10s_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_10q_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="27"
              data-item-index="27"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Support"
                aria-posinset="28"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Support avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    SU
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Support"
                      >
                        Support
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_113_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_111_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_11a_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_118_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="28"
              data-item-index="28"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Announcements"
                aria-posinset="29"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Announcements avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    AN
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Announcements"
                      >
                        Announcements
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Announcements"
                      >
                        Last message in Announcements
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_11h_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_11f_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_11o_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_11m_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="29"
              data-item-index="29"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Off-topic"
                aria-posinset="30"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Off-topic avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    OF
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Off-topic"
                      >
                        Off-topic
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_11v_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_11t_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_126_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_124_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="30"
              data-item-index="30"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Team Alpha with 30 unread mentions."
                aria-posinset="31"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Team Alpha avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    TE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Team Alpha"
                      >
                        Team Alpha
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Team Alpha"
                      >
                        Last message in Team Alpha
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_12d_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_12b_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_12k_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_12i_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <span
                          class="_unread-counter_1147r_8"
                        >
                          30
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="31"
              data-item-index="31"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Team Beta"
                aria-posinset="32"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Team Beta avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    TE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Team Beta"
                      >
                        Team Beta
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_12r_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_12p_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_132_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_130_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="32"
              data-item-index="32"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Project X"
                aria-posinset="33"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Project X avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    PR
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Project X"
                      >
                        Project X
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Project X"
                      >
                        Last message in Project X
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_139_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_137_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_13g_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_13e_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="33"
              data-item-index="33"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Project Y"
                aria-posinset="34"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Project Y avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    PR
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Project Y"
                      >
                        Project Y
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_13n_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_13l_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_13u_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_13s_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="34"
              data-item-index="34"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Water Cooler"
                aria-posinset="35"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Water Cooler avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    WA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Water Cooler"
                      >
                        Water Cooler
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Water Cooler"
                      >
                        Last message in Water Cooler
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_145_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_143_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_14c_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_14a_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="35"
              data-item-index="35"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Feedback with 35 unread mentions."
                aria-posinset="36"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Feedback avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    FE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Feedback"
                      >
                        Feedback
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_14j_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_14h_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_14q_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_14o_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <span
                          class="_unread-counter_1147r_8"
                        >
                          35
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="36"
              data-item-index="36"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Ideas"
                aria-posinset="37"
                aria-selected="false"
                aria-setsize="100"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Ideas avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    ID
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Ideas"
                      >
                        Ideas
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Ideas"
                      >
                        Last message in Ideas
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_151_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_14v_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_158_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_156_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
<div>
  <div
    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
  >
    <div>
      <div
        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
        data-testid="primary-filters"
        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
      >
        <div
          aria-label="Room list filters"
          class="Flex-module_flex RoomListPrimaryFilters-module_list"
          id="_r_18o_"
          role="listbox"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
        >
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Unreads
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            People
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Rooms
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Favourites
          </button>
        </div>
      </div>
    </div>
    <div
      class="Flex-module_flex RoomListView-module_list"
      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
    >
      <div
        aria-label="Room list"
        aria-rowcount="103"
        class="VirtualizedRoomListView-module_roomList"
        data-testid="room-list"
        data-virtuoso-scroller="true"
        role="treegrid"
        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
        tabindex="0"
      >
        <div
          data-viewport-type="element"
          style="height: 100%; position: absolute; top: 0px; width: 100%;"
        >
          <div
            data-testid="virtuoso-item-list"
            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 3432px; padding-top: 0px;"
          >
            <div
              data-index="0"
              data-item-index="0"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-expanded="true"
                aria-level="1"
                aria-posinset="1"
                aria-rowindex="1"
                aria-setsize="23"
                role="row"
              >
                <button
                  aria-expanded="true"
                  aria-label="Toggle Favourites section"
                  class="RoomListSectionHeaderView-module_header RoomListSectionHeaderView-module_firstHeader"
                  role="gridcell"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListSectionHeaderView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
                  >
                    <svg
                      fill="var(--cpd-color-icon-secondary)"
                      height="24px"
                      viewBox="0 0 24 24"
                      width="24px"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
                      />
                    </svg>
                    <span
                      class="RoomListSectionHeaderView-module_title"
                    >
                      Favourites
                    </span>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="1"
              data-item-index="1"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="1"
                aria-rowindex="1"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room General"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="General avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      GE
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="General"
                        >
                          General
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in General"
                        >
                          Last message in General
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_18r_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_18p_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_192_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_190_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      >
                        <div
                          class="Flex-module_flex"
                          data-testid="notification-decoration"
                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                        >
                          <svg
                            fill="var(--cpd-color-icon-accent-primary)"
                            height="20px"
                            viewBox="0 0 24 24"
                            width="20px"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                            />
                          </svg>
                          <div
                            class="_unread-counter_1147r_8"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="2"
              data-item-index="2"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="2"
                aria-rowindex="2"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Random"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Random avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      RA
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Random"
                        >
                          Random
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_199_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_197_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_19g_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_19e_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="3"
              data-item-index="3"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="3"
                aria-rowindex="3"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Engineering"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Engineering avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      EN
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Engineering"
                        >
                          Engineering
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in Engineering"
                        >
                          Last message in Engineering
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_19n_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_19l_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_19u_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_19s_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="4"
              data-item-index="4"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="4"
                aria-rowindex="4"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Design"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Design avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      DE
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Design"
                        >
                          Design
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1a5_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1a3_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1ac_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1aa_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="5"
              data-item-index="5"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="5"
                aria-rowindex="5"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Product"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Product avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      PR
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Product"
                        >
                          Product
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in Product"
                        >
                          Last message in Product
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1aj_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1ah_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1aq_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1ao_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="6"
              data-item-index="6"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="6"
                aria-rowindex="6"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Marketing with 5 unread mentions."
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Marketing avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      MA
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Marketing"
                        >
                          Marketing
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1b1_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1av_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1b8_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1b6_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      >
                        <div
                          class="Flex-module_flex"
                          data-testid="notification-decoration"
                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                        >
                          <svg
                            fill="var(--cpd-color-icon-accent-primary)"
                            height="20px"
                            viewBox="0 0 24 24"
                            width="20px"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                            />
                          </svg>
                          <span
                            class="_unread-counter_1147r_8"
                          >
                            5
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="7"
              data-item-index="7"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="7"
                aria-rowindex="7"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Sales"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Sales avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      SA
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Sales"
                        >
                          Sales
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in Sales"
                        >
                          Last message in Sales
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1bf_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1bd_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1bm_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1bk_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="8"
              data-item-index="8"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="8"
                aria-rowindex="8"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Support"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Support avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      SU
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Support"
                        >
                          Support
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1bt_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1br_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1c4_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1c2_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="9"
              data-item-index="9"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="9"
                aria-rowindex="9"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Announcements"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Announcements avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      AN
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Announcements"
                        >
                          Announcements
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in Announcements"
                        >
                          Last message in Announcements
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1cb_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1c9_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1ci_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1cg_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="10"
              data-item-index="10"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="10"
                aria-rowindex="10"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Off-topic"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Off-topic avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      OF
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Off-topic"
                        >
                          Off-topic
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1cp_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1cn_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1d0_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1cu_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="11"
              data-item-index="11"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="11"
                aria-rowindex="11"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Team Alpha with 10 unread mentions."
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Team Alpha avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      TE
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Team Alpha"
                        >
                          Team Alpha
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in Team Alpha"
                        >
                          Last message in Team Alpha
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1d7_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1d5_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1de_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1dc_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      >
                        <div
                          class="Flex-module_flex"
                          data-testid="notification-decoration"
                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                        >
                          <svg
                            fill="var(--cpd-color-icon-accent-primary)"
                            height="20px"
                            viewBox="0 0 24 24"
                            width="20px"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                            />
                          </svg>
                          <span
                            class="_unread-counter_1147r_8"
                          >
                            10
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="12"
              data-item-index="12"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="12"
                aria-rowindex="12"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Team Beta"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Team Beta avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      TE
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Team Beta"
                        >
                          Team Beta
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1dl_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1dj_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1ds_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1dq_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="13"
              data-item-index="13"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="13"
                aria-rowindex="13"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Project X"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Project X avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      PR
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Project X"
                        >
                          Project X
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in Project X"
                        >
                          Last message in Project X
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1e3_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1e1_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1ea_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1e8_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="14"
              data-item-index="14"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="14"
                aria-rowindex="14"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Project Y"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Project Y avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      PR
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Project Y"
                        >
                          Project Y
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1eh_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1ef_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1eo_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1em_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="15"
              data-item-index="15"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="15"
                aria-rowindex="15"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Water Cooler"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Water Cooler avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      WA
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Water Cooler"
                        >
                          Water Cooler
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in Water Cooler"
                        >
                          Last message in Water Cooler
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1ev_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1et_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1f6_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1f4_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="16"
              data-item-index="16"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="16"
                aria-rowindex="16"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Feedback with 15 unread mentions."
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Feedback avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      FE
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Feedback"
                        >
                          Feedback
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1fd_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1fb_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1fk_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1fi_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      >
                        <div
                          class="Flex-module_flex"
                          data-testid="notification-decoration"
                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                        >
                          <svg
                            fill="var(--cpd-color-icon-accent-primary)"
                            height="20px"
                            viewBox="0 0 24 24"
                            width="20px"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                            />
                          </svg>
                          <span
                            class="_unread-counter_1147r_8"
                          >
                            15
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="17"
              data-item-index="17"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="17"
                aria-rowindex="17"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Ideas"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Ideas avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      ID
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Ideas"
                        >
                          Ideas
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in Ideas"
                        >
                          Last message in Ideas
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1fr_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1fp_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1g2_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1g0_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="18"
              data-item-index="18"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="18"
                aria-rowindex="18"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Bugs"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Bugs avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      BU
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Bugs"
                        >
                          Bugs
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1g9_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1g7_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1gg_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1ge_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="19"
              data-item-index="19"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="19"
                aria-rowindex="19"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Features"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Features avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      FE
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Features"
                        >
                          Features
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in Features"
                        >
                          Last message in Features
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1gn_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1gl_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1gu_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1gs_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="20"
              data-item-index="20"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="20"
                aria-rowindex="20"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Releases"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Releases avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      RE
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Releases"
                        >
                          Releases
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1h5_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1h3_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1hc_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1ha_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="21"
              data-item-index="21"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="21"
                aria-rowindex="21"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room General with 20 unread mentions."
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="General avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      GE
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="General"
                        >
                          General
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in General"
                        >
                          Last message in General
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1hj_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1hh_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1hq_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1ho_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      >
                        <div
                          class="Flex-module_flex"
                          data-testid="notification-decoration"
                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                        >
                          <svg
                            fill="var(--cpd-color-icon-accent-primary)"
                            height="20px"
                            viewBox="0 0 24 24"
                            width="20px"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                            />
                          </svg>
                          <span
                            class="_unread-counter_1147r_8"
                          >
                            20
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="22"
              data-item-index="22"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="22"
                aria-rowindex="22"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Random"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Random avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      RA
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Random"
                        >
                          Random
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1i1_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1hv_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1i8_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1i6_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="23"
              data-item-index="23"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="23"
                aria-rowindex="23"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Engineering"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Engineering avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      EN
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Engineering"
                        >
                          Engineering
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in Engineering"
                        >
                          Last message in Engineering
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1if_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1id_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1im_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1ik_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="24"
              data-item-index="24"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-expanded="true"
                aria-level="1"
                aria-posinset="2"
                aria-rowindex="25"
                aria-setsize="29"
                role="row"
              >
                <button
                  aria-expanded="true"
                  aria-label="Toggle Chats section"
                  class="RoomListSectionHeaderView-module_header"
                  role="gridcell"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListSectionHeaderView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
                  >
                    <svg
                      fill="var(--cpd-color-icon-secondary)"
                      height="24px"
                      viewBox="0 0 24 24"
                      width="24px"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
                      />
                    </svg>
                    <span
                      class="RoomListSectionHeaderView-module_title"
                    >
                      Chats
                    </span>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="25"
              data-item-index="25"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="1"
                aria-rowindex="24"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Design"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Design avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      DE
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Design"
                        >
                          Design
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1it_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1ir_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1j4_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1j2_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="26"
              data-item-index="26"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="2"
                aria-rowindex="25"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Product"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Product avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      PR
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Product"
                        >
                          Product
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in Product"
                        >
                          Last message in Product
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1jb_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1j9_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1ji_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1jg_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="27"
              data-item-index="27"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="3"
                aria-rowindex="26"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Marketing with 25 unread mentions."
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Marketing avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      MA
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Marketing"
                        >
                          Marketing
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1jp_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1jn_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1k0_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1ju_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      >
                        <div
                          class="Flex-module_flex"
                          data-testid="notification-decoration"
                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                        >
                          <svg
                            fill="var(--cpd-color-icon-accent-primary)"
                            height="20px"
                            viewBox="0 0 24 24"
                            width="20px"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                            />
                          </svg>
                          <span
                            class="_unread-counter_1147r_8"
                          >
                            25
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="28"
              data-item-index="28"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="4"
                aria-rowindex="27"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Sales"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Sales avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      SA
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Sales"
                        >
                          Sales
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in Sales"
                        >
                          Last message in Sales
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1k7_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1k5_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1ke_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1kc_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="29"
              data-item-index="29"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="5"
                aria-rowindex="28"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Support"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Support avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      SU
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Support"
                        >
                          Support
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1kl_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1kj_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1ks_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1kq_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="30"
              data-item-index="30"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="6"
                aria-rowindex="29"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Announcements"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Announcements avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      AN
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Announcements"
                        >
                          Announcements
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in Announcements"
                        >
                          Last message in Announcements
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1l3_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1l1_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1la_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1l8_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="31"
              data-item-index="31"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="7"
                aria-rowindex="30"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Off-topic"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Off-topic avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      OF
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Off-topic"
                        >
                          Off-topic
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1lh_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1lf_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1lo_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1lm_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="32"
              data-item-index="32"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="8"
                aria-rowindex="31"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Team Alpha with 30 unread mentions."
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Team Alpha avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      TE
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Team Alpha"
                        >
                          Team Alpha
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in Team Alpha"
                        >
                          Last message in Team Alpha
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1lv_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1lt_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1m6_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1m4_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      >
                        <div
                          class="Flex-module_flex"
                          data-testid="notification-decoration"
                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                        >
                          <svg
                            fill="var(--cpd-color-icon-accent-primary)"
                            height="20px"
                            viewBox="0 0 24 24"
                            width="20px"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                            />
                          </svg>
                          <span
                            class="_unread-counter_1147r_8"
                          >
                            30
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="33"
              data-item-index="33"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="9"
                aria-rowindex="32"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Team Beta"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Team Beta avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      TE
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Team Beta"
                        >
                          Team Beta
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1md_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1mb_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1mk_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1mi_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="34"
              data-item-index="34"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="10"
                aria-rowindex="33"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Project X"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Project X avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      PR
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Project X"
                        >
                          Project X
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in Project X"
                        >
                          Last message in Project X
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1mr_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1mp_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1n2_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1n0_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="35"
              data-item-index="35"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="11"
                aria-rowindex="34"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Project Y"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Project Y avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      PR
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Project Y"
                        >
                          Project Y
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1n9_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1n7_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1ng_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1ne_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="36"
              data-item-index="36"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="12"
                aria-rowindex="35"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Water Cooler"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Water Cooler avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      WA
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Water Cooler"
                        >
                          Water Cooler
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in Water Cooler"
                        >
                          Last message in Water Cooler
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_1nn_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1nl_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_1nu_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_1ns_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<RoomListView /> > renders Loading story 1`] = `
<div>
  <div
    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
  >
    <div>
      <div
        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
        data-testid="primary-filters"
        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
      >
        <div
          aria-label="Room list filters"
          class="Flex-module_flex RoomListPrimaryFilters-module_list"
          id="_r_a1_"
          role="listbox"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
        >
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Unreads
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            People
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Rooms
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Favourites
          </button>
        </div>
      </div>
    </div>
    <div
      class="Flex-module_flex RoomListView-module_list"
      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
    >
      <div
        class="RoomListLoadingSkeleton-module_skeleton"
      />
    </div>
  </div>
</div>
`;

exports[`<RoomListView /> > renders SmallFlatList story 1`] = `
<div>
  <div
    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
  >
    <div>
      <div
        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
        data-testid="primary-filters"
        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
      >
        <div
          aria-label="Room list filters"
          class="Flex-module_flex RoomListPrimaryFilters-module_list"
          id="_r_k5_"
          role="listbox"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
        >
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Unreads
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            People
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Rooms
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Favourites
          </button>
        </div>
      </div>
    </div>
    <div
      class="Flex-module_flex RoomListView-module_list"
      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
    >
      <div
        aria-label="Room list"
        class="VirtualizedRoomListView-module_roomList"
        data-testid="room-list"
        data-virtuoso-scroller="true"
        role="listbox"
        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
        tabindex="0"
      >
        <div
          data-viewport-type="element"
          style="height: 100%; position: absolute; top: 0px; width: 100%;"
        >
          <div
            data-testid="virtuoso-item-list"
            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
          >
            <div
              data-index="0"
              data-item-index="0"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room General"
                aria-posinset="1"
                aria-selected="false"
                aria-setsize="2"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="General avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    GE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="General"
                      >
                        General
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in General"
                      >
                        Last message in General
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_k8_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_k6_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_kf_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_kd_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <div
                          class="_unread-counter_1147r_8"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="1"
              data-item-index="1"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Random"
                aria-posinset="2"
                aria-selected="false"
                aria-setsize="2"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_lastItem"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Random avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    RA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Random"
                      >
                        Random
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_km_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_kk_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_kt_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_kr_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
<div>
  <div
    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
  >
    <div>
      <div
        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
        data-testid="primary-filters"
        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
      >
        <div
          aria-label="Room list filters"
          class="Flex-module_flex RoomListPrimaryFilters-module_list"
          id="_r_17n_"
          role="listbox"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
        >
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Unreads
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            People
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Rooms
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Favourites
          </button>
        </div>
      </div>
    </div>
    <div
      class="Flex-module_flex RoomListView-module_list"
      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
    >
      <div
        aria-label="Room list"
        aria-rowcount="4"
        class="VirtualizedRoomListView-module_roomList"
        data-testid="room-list"
        data-virtuoso-scroller="true"
        role="treegrid"
        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
        tabindex="0"
      >
        <div
          data-viewport-type="element"
          style="height: 100%; position: absolute; top: 0px; width: 100%;"
        >
          <div
            data-testid="virtuoso-item-list"
            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
          >
            <div
              data-index="0"
              data-item-index="0"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-expanded="true"
                aria-level="1"
                aria-posinset="1"
                aria-rowindex="1"
                aria-setsize="2"
                role="row"
              >
                <button
                  aria-expanded="true"
                  aria-label="Toggle Favourites section"
                  class="RoomListSectionHeaderView-module_header RoomListSectionHeaderView-module_firstHeader"
                  role="gridcell"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListSectionHeaderView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
                  >
                    <svg
                      fill="var(--cpd-color-icon-secondary)"
                      height="24px"
                      viewBox="0 0 24 24"
                      width="24px"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
                      />
                    </svg>
                    <span
                      class="RoomListSectionHeaderView-module_title"
                    >
                      Favourites
                    </span>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="1"
              data-item-index="1"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="1"
                aria-rowindex="1"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room General"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="General avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      GE
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="General"
                        >
                          General
                        </div>
                        <div
                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                          title="Last message in General"
                        >
                          Last message in General
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_17q_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_17o_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_181_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_17v_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      >
                        <div
                          class="Flex-module_flex"
                          data-testid="notification-decoration"
                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                        >
                          <svg
                            fill="var(--cpd-color-icon-accent-primary)"
                            height="20px"
                            viewBox="0 0 24 24"
                            width="20px"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                            />
                          </svg>
                          <div
                            class="_unread-counter_1147r_8"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="2"
              data-item-index="2"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-level="2"
                aria-posinset="2"
                aria-rowindex="2"
                role="row"
              >
                <button
                  aria-haspopup="menu"
                  aria-label="Open room Random"
                  aria-selected="false"
                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                  data-state="closed"
                  role="gridcell"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListItemView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      aria-label="Random avatar"
                      role="img"
                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                    >
                      RA
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_content"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                    >
                      <div
                        class="RoomListItemView-module_ellipsis"
                      >
                        <div
                          class="RoomListItemView-module_roomName"
                          data-testid="room-name"
                          title="Random"
                        >
                          Random
                        </div>
                      </div>
                      <div
                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="More Options"
                          aria-labelledby="_r_188_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_186_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                              />
                            </svg>
                          </div>
                        </button>
                        <button
                          aria-disabled="false"
                          aria-expanded="false"
                          aria-haspopup="menu"
                          aria-label="Notification options"
                          aria-labelledby="_r_18f_"
                          class="_icon-button_1215g_8"
                          data-kind="primary"
                          data-state="closed"
                          id="radix-_r_18d_"
                          role="button"
                          style="--cpd-icon-button-size: 24px; padding: 2px;"
                          tabindex="0"
                          type="button"
                        >
                          <div
                            class="_indicator-icon_147l5_17"
                            style="--cpd-icon-button-size: 100%;"
                          >
                            <svg
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                      <div
                        aria-hidden="true"
                        class="RoomListItemView-module_notificationDecoration"
                      />
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div
              data-index="3"
              data-item-index="3"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <div
                aria-expanded="true"
                aria-level="1"
                aria-posinset="2"
                aria-rowindex="4"
                aria-setsize="0"
                role="row"
              >
                <button
                  aria-expanded="true"
                  aria-label="Toggle Chats section"
                  class="RoomListSectionHeaderView-module_header"
                  role="gridcell"
                  tabindex="-1"
                  type="button"
                >
                  <div
                    class="Flex-module_flex RoomListSectionHeaderView-module_container"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
                  >
                    <svg
                      fill="var(--cpd-color-icon-secondary)"
                      height="24px"
                      viewBox="0 0 24 24"
                      width="24px"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
                      />
                    </svg>
                    <span
                      class="RoomListSectionHeaderView-module_title"
                    >
                      Chats
                    </span>
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<RoomListView /> > renders Toast story 1`] = `
<div>
  <div
    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
  >
    <div>
      <div
        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
        data-testid="primary-filters"
        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
      >
        <div
          aria-label="Room list filters"
          class="Flex-module_flex RoomListPrimaryFilters-module_list"
          id="_r_1qg_"
          role="listbox"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
        >
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Unreads
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            People
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Rooms
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Favourites
          </button>
        </div>
      </div>
    </div>
    <div
      class="Flex-module_flex RoomListView-module_list"
      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
    >
      <div
        aria-label="Room list"
        class="VirtualizedRoomListView-module_roomList"
        data-testid="room-list"
        data-virtuoso-scroller="true"
        role="listbox"
        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
        tabindex="0"
      >
        <div
          data-viewport-type="element"
          style="height: 100%; position: absolute; top: 0px; width: 100%;"
        >
          <div
            data-testid="virtuoso-item-list"
            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
          >
            <div
              data-index="0"
              data-item-index="0"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room General"
                aria-posinset="1"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="General avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    GE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="General"
                      >
                        General
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in General"
                      >
                        Last message in General
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_1qo_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1qm_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_1qv_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1qt_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <div
                          class="_unread-counter_1147r_8"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="1"
              data-item-index="1"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Random"
                aria-posinset="2"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Random avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    RA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Random"
                      >
                        Random
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_1r6_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1r4_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_1rd_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1rb_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="2"
              data-item-index="2"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Engineering"
                aria-posinset="3"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Engineering avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    EN
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Engineering"
                      >
                        Engineering
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Engineering"
                      >
                        Last message in Engineering
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_1rk_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1ri_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_1rr_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1rp_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="3"
              data-item-index="3"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Design"
                aria-posinset="4"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Design avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    DE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Design"
                      >
                        Design
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_1s2_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1s0_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_1s9_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1s7_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="4"
              data-item-index="4"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Product"
                aria-posinset="5"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Product avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    PR
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Product"
                      >
                        Product
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Product"
                      >
                        Last message in Product
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_1sg_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1se_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_1sn_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1sl_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="5"
              data-item-index="5"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Marketing with 5 unread mentions."
                aria-posinset="6"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Marketing avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    MA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Marketing"
                      >
                        Marketing
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_1su_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1ss_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_1t5_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1t3_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <span
                          class="_unread-counter_1147r_8"
                        >
                          5
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="6"
              data-item-index="6"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Sales"
                aria-posinset="7"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Sales avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    SA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Sales"
                      >
                        Sales
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Sales"
                      >
                        Last message in Sales
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_1tc_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1ta_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_1tj_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1th_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="7"
              data-item-index="7"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Support"
                aria-posinset="8"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Support avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    SU
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Support"
                      >
                        Support
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_1tq_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1to_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_1u1_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1tv_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="8"
              data-item-index="8"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Announcements"
                aria-posinset="9"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Announcements avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    AN
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Announcements"
                      >
                        Announcements
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Announcements"
                      >
                        Last message in Announcements
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_1u8_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1u6_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_1uf_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1ud_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="9"
              data-item-index="9"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Off-topic"
                aria-posinset="10"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Off-topic avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    OF
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Off-topic"
                      >
                        Off-topic
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_1um_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1uk_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_1ut_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1ur_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="10"
              data-item-index="10"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Team Alpha with 10 unread mentions."
                aria-posinset="11"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Team Alpha avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    TE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Team Alpha"
                      >
                        Team Alpha
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Team Alpha"
                      >
                        Last message in Team Alpha
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_1v4_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1v2_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_1vb_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1v9_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <span
                          class="_unread-counter_1147r_8"
                        >
                          10
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="11"
              data-item-index="11"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Team Beta"
                aria-posinset="12"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Team Beta avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    TE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Team Beta"
                      >
                        Team Beta
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_1vi_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1vg_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_1vp_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1vn_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="12"
              data-item-index="12"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Project X"
                aria-posinset="13"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Project X avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    PR
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Project X"
                      >
                        Project X
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Project X"
                      >
                        Last message in Project X
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_200_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_1vu_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_207_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_205_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="13"
              data-item-index="13"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Project Y"
                aria-posinset="14"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Project Y avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    PR
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Project Y"
                      >
                        Project Y
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_20e_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_20c_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_20l_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_20j_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="14"
              data-item-index="14"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Water Cooler"
                aria-posinset="15"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Water Cooler avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    WA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Water Cooler"
                      >
                        Water Cooler
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Water Cooler"
                      >
                        Last message in Water Cooler
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_20s_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_20q_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_213_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_211_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="15"
              data-item-index="15"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Feedback with 15 unread mentions."
                aria-posinset="16"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Feedback avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    FE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Feedback"
                      >
                        Feedback
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_21a_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_218_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_21h_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_21f_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <span
                          class="_unread-counter_1147r_8"
                        >
                          15
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="16"
              data-item-index="16"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Ideas"
                aria-posinset="17"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Ideas avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    ID
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Ideas"
                      >
                        Ideas
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Ideas"
                      >
                        Last message in Ideas
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_21o_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_21m_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_21v_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_21t_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="17"
              data-item-index="17"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Bugs"
                aria-posinset="18"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Bugs avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    BU
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Bugs"
                      >
                        Bugs
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_226_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_224_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_22d_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_22b_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="18"
              data-item-index="18"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Features"
                aria-posinset="19"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Features avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    FE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Features"
                      >
                        Features
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Features"
                      >
                        Last message in Features
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_22k_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_22i_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_22r_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_22p_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="19"
              data-item-index="19"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Releases"
                aria-posinset="20"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_lastItem"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Releases avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    RE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Releases"
                      >
                        Releases
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_232_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_230_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_239_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_237_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _toast-container_1ysb3_8 RoomListToast-module_toast _has-close_1ysb3_30"
      >
        <div
          class="_content_1ysb3_34"
        >
          <svg
            aria-hidden="true"
            class="_icon_1ysb3_26"
            fill="currentColor"
            height="20"
            viewBox="0 0 24 24"
            width="20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
            />
          </svg>
          Section created
        </div>
        <button
          aria-labelledby="_r_1qh_"
          class="_icon-button_1215g_8 _close_1ysb3_41 _no-background_1215g_42"
          data-kind="secondary"
          role="button"
          style="--cpd-icon-button-size: 24px;"
          tabindex="0"
        >
          <div
            class="_indicator-icon_147l5_17"
            style="--cpd-icon-button-size: 100%;"
          >
            <svg
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
              />
            </svg>
          </div>
        </button>
      </div>
    </div>
  </div>
</div>
`;

exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
<div>
  <div
    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
  >
    <div>
      <div
        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
        data-testid="primary-filters"
        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
      >
        <div
          aria-label="Room list filters"
          class="Flex-module_flex RoomListPrimaryFilters-module_list"
          id="_r_a4_"
          role="listbox"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
        >
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Unreads
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            People
          </button>
          <button
            aria-hidden="false"
            aria-selected="false"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Rooms
          </button>
          <button
            aria-hidden="false"
            aria-selected="true"
            class="_chat-filter_5qdp0_8"
            role="option"
            tabindex="0"
          >
            Favourites
          </button>
        </div>
      </div>
    </div>
    <div
      class="Flex-module_flex RoomListView-module_list"
      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
    >
      <div
        aria-label="Room list"
        class="VirtualizedRoomListView-module_roomList"
        data-testid="room-list"
        data-virtuoso-scroller="true"
        role="listbox"
        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
        tabindex="0"
      >
        <div
          data-viewport-type="element"
          style="height: 100%; position: absolute; top: 0px; width: 100%;"
        >
          <div
            data-testid="virtuoso-item-list"
            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
          >
            <div
              data-index="0"
              data-item-index="0"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room General"
                aria-posinset="1"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="General avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    GE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="General"
                      >
                        General
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in General"
                      >
                        Last message in General
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_a7_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_a5_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_ae_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_ac_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <div
                          class="_unread-counter_1147r_8"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="1"
              data-item-index="1"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Random"
                aria-posinset="2"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Random avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    RA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Random"
                      >
                        Random
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_al_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_aj_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_as_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_aq_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="2"
              data-item-index="2"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Engineering"
                aria-posinset="3"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Engineering avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    EN
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Engineering"
                      >
                        Engineering
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Engineering"
                      >
                        Last message in Engineering
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_b3_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_b1_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_ba_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_b8_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="3"
              data-item-index="3"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Design"
                aria-posinset="4"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Design avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    DE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Design"
                      >
                        Design
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_bh_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_bf_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_bo_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_bm_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="4"
              data-item-index="4"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Product"
                aria-posinset="5"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Product avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    PR
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Product"
                      >
                        Product
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Product"
                      >
                        Last message in Product
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_bv_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_bt_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_c6_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_c4_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="5"
              data-item-index="5"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Marketing with 5 unread mentions."
                aria-posinset="6"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Marketing avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    MA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Marketing"
                      >
                        Marketing
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_cd_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_cb_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_ck_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_ci_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <span
                          class="_unread-counter_1147r_8"
                        >
                          5
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="6"
              data-item-index="6"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Sales"
                aria-posinset="7"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Sales avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    SA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Sales"
                      >
                        Sales
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Sales"
                      >
                        Last message in Sales
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_cr_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_cp_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_d2_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_d0_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="7"
              data-item-index="7"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Support"
                aria-posinset="8"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Support avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    SU
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Support"
                      >
                        Support
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_d9_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_d7_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_dg_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_de_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="8"
              data-item-index="8"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Announcements"
                aria-posinset="9"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Announcements avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    AN
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Announcements"
                      >
                        Announcements
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Announcements"
                      >
                        Last message in Announcements
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_dn_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_dl_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_du_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_ds_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="9"
              data-item-index="9"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Off-topic"
                aria-posinset="10"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Off-topic avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    OF
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Off-topic"
                      >
                        Off-topic
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_e5_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_e3_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_ec_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_ea_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="10"
              data-item-index="10"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Team Alpha with 10 unread mentions."
                aria-posinset="11"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Team Alpha avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    TE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Team Alpha"
                      >
                        Team Alpha
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Team Alpha"
                      >
                        Last message in Team Alpha
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_ej_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_eh_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_eq_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_eo_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <span
                          class="_unread-counter_1147r_8"
                        >
                          10
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="11"
              data-item-index="11"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Team Beta"
                aria-posinset="12"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Team Beta avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    TE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Team Beta"
                      >
                        Team Beta
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_f1_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_ev_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_f8_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_f6_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="12"
              data-item-index="12"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Project X"
                aria-posinset="13"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Project X avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    PR
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Project X"
                      >
                        Project X
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Project X"
                      >
                        Last message in Project X
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_ff_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_fd_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_fm_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_fk_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="13"
              data-item-index="13"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Project Y"
                aria-posinset="14"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Project Y avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    PR
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Project Y"
                      >
                        Project Y
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_ft_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_fr_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_g4_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_g2_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="14"
              data-item-index="14"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Water Cooler"
                aria-posinset="15"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Water Cooler avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    WA
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Water Cooler"
                      >
                        Water Cooler
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Water Cooler"
                      >
                        Last message in Water Cooler
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_gb_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_g9_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_gi_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_gg_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="15"
              data-item-index="15"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Feedback with 15 unread mentions."
                aria-posinset="16"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Feedback avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    FE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Feedback"
                      >
                        Feedback
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_gp_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_gn_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_h0_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_gu_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    >
                      <div
                        class="Flex-module_flex"
                        data-testid="notification-decoration"
                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                      >
                        <svg
                          fill="var(--cpd-color-icon-accent-primary)"
                          height="20px"
                          viewBox="0 0 24 24"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                          />
                        </svg>
                        <span
                          class="_unread-counter_1147r_8"
                        >
                          15
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="16"
              data-item-index="16"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Ideas"
                aria-posinset="17"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Ideas avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    ID
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Ideas"
                      >
                        Ideas
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Ideas"
                      >
                        Last message in Ideas
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_h7_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_h5_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_he_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_hc_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="17"
              data-item-index="17"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Bugs"
                aria-posinset="18"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Bugs avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    BU
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Bugs"
                      >
                        Bugs
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_hl_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_hj_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_hs_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_hq_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="18"
              data-item-index="18"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Features"
                aria-posinset="19"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Features avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    FE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Features"
                      >
                        Features
                      </div>
                      <div
                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                        title="Last message in Features"
                      >
                        Last message in Features
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_i3_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_i1_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_ia_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_i8_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
            <div
              data-index="19"
              data-item-index="19"
              data-known-size="52"
              style="overflow-anchor: none;"
            >
              <button
                aria-haspopup="menu"
                aria-label="Open room Releases"
                aria-posinset="20"
                aria-selected="false"
                aria-setsize="20"
                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_lastItem"
                data-state="closed"
                role="option"
                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                tabindex="-1"
                type="button"
              >
                <div
                  class="Flex-module_flex RoomListItemView-module_container"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                >
                  <div
                    aria-label="Releases avatar"
                    role="img"
                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                  >
                    RE
                  </div>
                  <div
                    class="Flex-module_flex RoomListItemView-module_content"
                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                  >
                    <div
                      class="RoomListItemView-module_ellipsis"
                    >
                      <div
                        class="RoomListItemView-module_roomName"
                        data-testid="room-name"
                        title="Releases"
                      >
                        Releases
                      </div>
                    </div>
                    <div
                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                    >
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="More Options"
                        aria-labelledby="_r_ih_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_if_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                            />
                          </svg>
                        </div>
                      </button>
                      <button
                        aria-disabled="false"
                        aria-expanded="false"
                        aria-haspopup="menu"
                        aria-label="Notification options"
                        aria-labelledby="_r_io_"
                        class="_icon-button_1215g_8"
                        data-kind="primary"
                        data-state="closed"
                        id="radix-_r_im_"
                        role="button"
                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                        tabindex="0"
                        type="button"
                      >
                        <div
                          class="_indicator-icon_147l5_17"
                          style="--cpd-icon-button-size: 100%;"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
                            />
                          </svg>
                        </div>
                      </button>
                    </div>
                    <div
                      aria-hidden="true"
                      class="RoomListItemView-module_notificationDecoration"
                    />
                  </div>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;
