// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
<DocumentFragment>
  <div
    class="mx_SearchBox mx_textinput"
  >
    <input
      autocomplete="off"
      class="mx_textinput_icon mx_textinput_search mx_SpaceHierarchy_search mx_textinput_icon mx_textinput_search"
      data-testid="searchbox-input"
      placeholder="Search names and descriptions"
      type="text"
      value=""
    />
    <div
      class="mx_AccessibleButton mx_SearchBox_closeButton"
      role="button"
      tabindex="-1"
    >
      <svg
        fill="currentColor"
        height="1em"
        viewBox="0 0 24 24"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
        />
      </svg>
    </div>
  </div>
  <div
    class="mx_SpaceHierarchy_listHeader"
  >
    <h4
      class="mx_SpaceHierarchy_listHeader_header"
    >
      Rooms and spaces
    </h4>
    <div
      class="mx_SpaceHierarchy_listHeader_buttons"
    >
      <div
        aria-disabled="true"
        aria-label="Remove"
        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline mx_AccessibleButton_disabled"
        disabled=""
        role="button"
        tabindex="0"
      >
        Remove
      </div>
      <div
        aria-disabled="true"
        aria-label="Mark as not suggested"
        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline mx_AccessibleButton_disabled"
        disabled=""
        role="button"
        tabindex="0"
      >
        Mark as not suggested
      </div>
    </div>
  </div>
  <ul
    aria-label="Space"
    class="mx_SpaceHierarchy_list"
    role="tree"
  >
    <li
      aria-labelledby="react-use-id-1"
      class="mx_SpaceHierarchy_roomTileWrapper"
      role="treeitem"
    >
      <div
        class="mx_AccessibleButton mx_SpaceHierarchy_roomTile"
        role="button"
        tabindex="0"
      >
        <div
          class="mx_SpaceHierarchy_roomTile_item"
        >
          <div
            class="mx_SpaceHierarchy_roomTile_avatar"
          >
            <span
              class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
              data-color="5"
              data-testid="avatar-img"
              data-type="round"
              role="presentation"
              style="--cpd-avatar-size: 20px;"
            >
              U
            </span>
          </div>
          <div
            class="mx_SpaceHierarchy_roomTile_name"
          >
            <span
              id="react-use-id-1"
            >
              Unnamed Room
            </span>
          </div>
          <div
            class="mx_SpaceHierarchy_roomTile_info"
          >
            2 members
          </div>
        </div>
        <div
          class="mx_SpaceHierarchy_actions"
        >
          <div
            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
            role="button"
            tabindex="0"
          >
            Join
          </div>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="_inline-field_1o4d9_33"
            >
              <div
                class="_inline-field-control_1o4d9_45"
              >
                <div
                  class="_container_153f2_10"
                >
                  <input
                    aria-labelledby="react-use-id-1"
                    class="_input_153f2_18"
                    id="checkbox_MwbPDmfGtm"
                    role="presentation"
                    tabindex="-1"
                    type="checkbox"
                  />
                  <div
                    class="_ui_153f2_19"
                  >
                    <svg
                      aria-hidden="true"
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                      />
                    </svg>
                  </div>
                </div>
              </div>
              <div
                class="_inline-field-body_1o4d9_39"
              />
            </div>
          </form>
        </div>
      </div>
    </li>
    <li
      aria-labelledby="react-use-id-2"
      class="mx_SpaceHierarchy_roomTileWrapper"
      role="treeitem"
    >
      <div
        class="mx_AccessibleButton mx_SpaceHierarchy_roomTile"
        role="button"
        tabindex="-1"
      >
        <div
          class="mx_SpaceHierarchy_roomTile_item"
        >
          <div
            class="mx_SpaceHierarchy_roomTile_avatar"
          >
            <span
              class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
              data-color="6"
              data-testid="avatar-img"
              data-type="round"
              role="presentation"
              style="--cpd-avatar-size: 20px;"
            >
              U
            </span>
          </div>
          <div
            class="mx_SpaceHierarchy_roomTile_name"
          >
            <span
              id="react-use-id-2"
            >
              Unnamed Room
            </span>
          </div>
          <div
            class="mx_SpaceHierarchy_roomTile_info"
          >
            3 members
          </div>
        </div>
        <div
          class="mx_SpaceHierarchy_actions"
        >
          <div
            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
            role="button"
            tabindex="-1"
          >
            Join
          </div>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="_inline-field_1o4d9_33"
            >
              <div
                class="_inline-field-control_1o4d9_45"
              >
                <div
                  class="_container_153f2_10"
                >
                  <input
                    aria-labelledby="react-use-id-2"
                    class="_input_153f2_18"
                    id="checkbox_GQvdMWe954"
                    role="presentation"
                    tabindex="-1"
                    type="checkbox"
                  />
                  <div
                    class="_ui_153f2_19"
                  >
                    <svg
                      aria-hidden="true"
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                      />
                    </svg>
                  </div>
                </div>
              </div>
              <div
                class="_inline-field-body_1o4d9_39"
              />
            </div>
          </form>
        </div>
      </div>
    </li>
    <li
      aria-expanded="true"
      aria-labelledby="react-use-id-3"
      class="mx_SpaceHierarchy_roomTileWrapper"
      role="treeitem"
    >
      <div
        class="mx_AccessibleButton mx_SpaceHierarchy_roomTile mx_SpaceHierarchy_subspace"
        role="button"
        tabindex="-1"
      >
        <div
          class="mx_SpaceHierarchy_roomTile_item"
        >
          <div
            class="mx_SpaceHierarchy_roomTile_avatar"
          >
            <span
              class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
              data-color="2"
              data-testid="avatar-img"
              data-type="round"
              role="presentation"
              style="--cpd-avatar-size: 20px;"
            >
              N
            </span>
          </div>
          <div
            class="mx_SpaceHierarchy_roomTile_name"
          >
            <span
              id="react-use-id-3"
            >
              Nested space
            </span>
          </div>
          <div
            class="mx_SpaceHierarchy_roomTile_info"
          >
            1 member · 1 room
          </div>
        </div>
        <div
          class="mx_SpaceHierarchy_actions"
        >
          <div
            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
            role="button"
            tabindex="-1"
          >
            Join
          </div>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="_inline-field_1o4d9_33"
            >
              <div
                class="_inline-field-control_1o4d9_45"
              >
                <div
                  class="_container_153f2_10"
                >
                  <input
                    aria-labelledby="react-use-id-3"
                    class="_input_153f2_18"
                    id="checkbox_DVIAu5CsiH"
                    role="presentation"
                    tabindex="-1"
                    type="checkbox"
                  />
                  <div
                    class="_ui_153f2_19"
                  >
                    <svg
                      aria-hidden="true"
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                      />
                    </svg>
                  </div>
                </div>
              </div>
              <div
                class="_inline-field-body_1o4d9_39"
              />
            </div>
          </form>
        </div>
        <div
          class="mx_SpaceHierarchy_subspace_toggle mx_SpaceHierarchy_subspace_toggle_shown"
        >
          <svg
            fill="currentColor"
            height="1em"
            viewBox="0 0 24 24"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
            />
          </svg>
        </div>
      </div>
      <ul
        class="mx_SpaceHierarchy_subspace_children"
        role="group"
      >
        <li
          aria-labelledby="react-use-id-4"
          class="mx_SpaceHierarchy_roomTileWrapper"
          role="treeitem"
        >
          <div
            class="mx_AccessibleButton mx_SpaceHierarchy_roomTile"
            role="button"
            tabindex="-1"
          >
            <div
              class="mx_SpaceHierarchy_roomTile_item"
            >
              <div
                class="mx_SpaceHierarchy_roomTile_avatar"
              >
                <span
                  class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
                  data-color="2"
                  data-testid="avatar-img"
                  data-type="round"
                  role="presentation"
                  style="--cpd-avatar-size: 20px;"
                >
                  N
                </span>
              </div>
              <div
                class="mx_SpaceHierarchy_roomTile_name"
              >
                <span
                  id="react-use-id-4"
                >
                  Nested room
                </span>
              </div>
              <div
                class="mx_SpaceHierarchy_roomTile_info"
              >
                3 members
              </div>
            </div>
            <div
              class="mx_SpaceHierarchy_actions"
            >
              <div
                class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
                role="button"
                tabindex="-1"
              >
                Join
              </div>
              <span
                aria-labelledby="react-use-id-5"
                tabindex="0"
              >
                <form
                  class="_root_1o4d9_17"
                >
                  <div
                    class="_inline-field_1o4d9_33"
                  >
                    <div
                      class="_inline-field-control_1o4d9_45"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          aria-labelledby="react-use-id-4"
                          class="_input_153f2_18"
                          disabled=""
                          id="checkbox_RD7nyrA2oh"
                          role="presentation"
                          tabindex="-1"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_1o4d9_39"
                    />
                  </div>
                </form>
              </span>
            </div>
          </div>
        </li>
      </ul>
    </li>
    <li
      aria-labelledby="react-use-id-6"
      class="mx_SpaceHierarchy_roomTileWrapper"
      role="treeitem"
    >
      <div
        class="mx_AccessibleButton mx_SpaceHierarchy_roomTile"
        role="button"
        tabindex="-1"
      >
        <div
          class="mx_SpaceHierarchy_roomTile_item"
        >
          <div
            class="mx_SpaceHierarchy_roomTile_avatar"
          >
            <span
              class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
              data-color="6"
              data-testid="avatar-img"
              data-type="round"
              role="presentation"
              style="--cpd-avatar-size: 20px;"
            >
              K
            </span>
          </div>
          <div
            class="mx_SpaceHierarchy_roomTile_name"
          >
            <span
              id="react-use-id-6"
            >
              Knock room
            </span>
          </div>
          <div
            class="mx_SpaceHierarchy_roomTile_info"
          >
            3 members
          </div>
        </div>
        <div
          class="mx_SpaceHierarchy_actions"
        >
          <div
            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
            role="button"
            tabindex="-1"
          >
            View
          </div>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="_inline-field_1o4d9_33"
            >
              <div
                class="_inline-field-control_1o4d9_45"
              >
                <div
                  class="_container_153f2_10"
                >
                  <input
                    aria-labelledby="react-use-id-6"
                    class="_input_153f2_18"
                    id="checkbox_jWVJIPauy1"
                    role="presentation"
                    tabindex="-1"
                    type="checkbox"
                  />
                  <div
                    class="_ui_153f2_19"
                  >
                    <svg
                      aria-hidden="true"
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                      />
                    </svg>
                  </div>
                </div>
              </div>
              <div
                class="_inline-field-body_1o4d9_39"
              />
            </div>
          </form>
        </div>
      </div>
    </li>
  </ul>
</DocumentFragment>
`;

exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
<DocumentFragment>
  <div
    class="mx_SearchBox mx_textinput"
  >
    <input
      autocomplete="off"
      class="mx_textinput_icon mx_textinput_search mx_SpaceHierarchy_search mx_textinput_icon mx_textinput_search"
      data-testid="searchbox-input"
      placeholder="Search names and descriptions"
      type="text"
      value=""
    />
    <div
      class="mx_AccessibleButton mx_SearchBox_closeButton"
      role="button"
      tabindex="-1"
    >
      <svg
        fill="currentColor"
        height="1em"
        viewBox="0 0 24 24"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
        />
      </svg>
    </div>
  </div>
  <div
    class="mx_SpaceHierarchy_listHeader"
  >
    <h4
      class="mx_SpaceHierarchy_listHeader_header"
    >
      Rooms and spaces
    </h4>
    <div
      class="mx_SpaceHierarchy_listHeader_buttons"
    >
      <div
        aria-disabled="true"
        aria-label="Remove"
        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline mx_AccessibleButton_disabled"
        disabled=""
        role="button"
        tabindex="0"
      >
        Remove
      </div>
      <div
        aria-disabled="true"
        aria-label="Mark as not suggested"
        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline mx_AccessibleButton_disabled"
        disabled=""
        role="button"
        tabindex="0"
      >
        Mark as not suggested
      </div>
    </div>
  </div>
  <ul
    aria-label="Space"
    class="mx_SpaceHierarchy_list"
    role="tree"
  >
    <li
      aria-labelledby="react-use-id-1"
      class="mx_SpaceHierarchy_roomTileWrapper"
      role="treeitem"
    >
      <div
        class="mx_AccessibleButton mx_SpaceHierarchy_roomTile"
        role="button"
        tabindex="0"
      >
        <div
          class="mx_SpaceHierarchy_roomTile_item"
        >
          <div
            class="mx_SpaceHierarchy_roomTile_avatar"
          >
            <span
              class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
              data-color="5"
              data-testid="avatar-img"
              data-type="round"
              role="presentation"
              style="--cpd-avatar-size: 20px;"
            >
              U
            </span>
          </div>
          <div
            class="mx_SpaceHierarchy_roomTile_name"
          >
            <span
              id="react-use-id-1"
            >
              Unnamed Room
            </span>
          </div>
          <div
            class="mx_SpaceHierarchy_roomTile_info"
          >
            2 members
          </div>
        </div>
        <div
          class="mx_SpaceHierarchy_actions"
        >
          <div
            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
            role="button"
            tabindex="0"
          >
            Join
          </div>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="_inline-field_1o4d9_33"
            >
              <div
                class="_inline-field-control_1o4d9_45"
              >
                <div
                  class="_container_153f2_10"
                >
                  <input
                    aria-labelledby="react-use-id-1"
                    class="_input_153f2_18"
                    id="checkbox_EetmBG4yVC"
                    role="presentation"
                    tabindex="-1"
                    type="checkbox"
                  />
                  <div
                    class="_ui_153f2_19"
                  >
                    <svg
                      aria-hidden="true"
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                      />
                    </svg>
                  </div>
                </div>
              </div>
              <div
                class="_inline-field-body_1o4d9_39"
              />
            </div>
          </form>
        </div>
      </div>
    </li>
    <li
      aria-labelledby="react-use-id-2"
      class="mx_SpaceHierarchy_roomTileWrapper"
      role="treeitem"
    >
      <div
        class="mx_AccessibleButton mx_SpaceHierarchy_roomTile"
        role="button"
        tabindex="-1"
      >
        <div
          class="mx_SpaceHierarchy_roomTile_item"
        >
          <div
            class="mx_SpaceHierarchy_roomTile_avatar"
          >
            <span
              class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
              data-color="6"
              data-testid="avatar-img"
              data-type="round"
              role="presentation"
              style="--cpd-avatar-size: 20px;"
            >
              U
            </span>
          </div>
          <div
            class="mx_SpaceHierarchy_roomTile_name"
          >
            <span
              id="react-use-id-2"
            >
              Unnamed Room
            </span>
          </div>
          <div
            class="mx_SpaceHierarchy_roomTile_info"
          >
            3 members
          </div>
        </div>
        <div
          class="mx_SpaceHierarchy_actions"
        >
          <div
            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
            role="button"
            tabindex="-1"
          >
            Join
          </div>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="_inline-field_1o4d9_33"
            >
              <div
                class="_inline-field-control_1o4d9_45"
              >
                <div
                  class="_container_153f2_10"
                >
                  <input
                    aria-labelledby="react-use-id-2"
                    class="_input_153f2_18"
                    id="checkbox_eEefiPqpMR"
                    role="presentation"
                    tabindex="-1"
                    type="checkbox"
                  />
                  <div
                    class="_ui_153f2_19"
                  >
                    <svg
                      aria-hidden="true"
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                      />
                    </svg>
                  </div>
                </div>
              </div>
              <div
                class="_inline-field-body_1o4d9_39"
              />
            </div>
          </form>
        </div>
      </div>
    </li>
    <li
      aria-expanded="true"
      aria-labelledby="react-use-id-3"
      class="mx_SpaceHierarchy_roomTileWrapper"
      role="treeitem"
    >
      <div
        class="mx_AccessibleButton mx_SpaceHierarchy_roomTile mx_SpaceHierarchy_subspace"
        role="button"
        tabindex="-1"
      >
        <div
          class="mx_SpaceHierarchy_roomTile_item"
        >
          <div
            class="mx_SpaceHierarchy_roomTile_avatar"
          >
            <span
              class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
              data-color="2"
              data-testid="avatar-img"
              data-type="round"
              role="presentation"
              style="--cpd-avatar-size: 20px;"
            >
              N
            </span>
          </div>
          <div
            class="mx_SpaceHierarchy_roomTile_name"
          >
            <span
              id="react-use-id-3"
            >
              Nested space
            </span>
          </div>
          <div
            class="mx_SpaceHierarchy_roomTile_info"
          >
            1 member · 0 rooms
          </div>
        </div>
        <div
          class="mx_SpaceHierarchy_actions"
        >
          <div
            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
            role="button"
            tabindex="-1"
          >
            Join
          </div>
          <form
            class="_root_1o4d9_17"
          >
            <div
              class="_inline-field_1o4d9_33"
            >
              <div
                class="_inline-field-control_1o4d9_45"
              >
                <div
                  class="_container_153f2_10"
                >
                  <input
                    aria-labelledby="react-use-id-3"
                    class="_input_153f2_18"
                    id="checkbox_MwbPDmfGtm"
                    role="presentation"
                    tabindex="-1"
                    type="checkbox"
                  />
                  <div
                    class="_ui_153f2_19"
                  >
                    <svg
                      aria-hidden="true"
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                      />
                    </svg>
                  </div>
                </div>
              </div>
              <div
                class="_inline-field-body_1o4d9_39"
              />
            </div>
          </form>
        </div>
        <div
          class="mx_SpaceHierarchy_subspace_toggle mx_SpaceHierarchy_subspace_toggle_shown"
        >
          <svg
            fill="currentColor"
            height="1em"
            viewBox="0 0 24 24"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
            />
          </svg>
        </div>
      </div>
      <ul
        class="mx_SpaceHierarchy_subspace_children"
        role="group"
      />
    </li>
  </ul>
</DocumentFragment>
`;
