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

exports[`<LayoutSwitcher /> should render 1`] = `
<DocumentFragment>
  <div
    class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
    data-testid="layoutPanel"
  >
    <div
      class="mx_SettingsSubsectionHeading"
    >
      <h3
        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
      >
        Message layout
      </h3>
    </div>
    <div
      class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
    >
      <form
        class="_root_19upo_16 mx_LayoutSwitcher_LayoutSelector"
      >
        <div
          class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
        >
          <label
            aria-label="Modern"
            class="_label_19upo_59"
            for="radix-_r_0_"
          >
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
            >
              <div
                class="_container_1qhtc_10"
              >
                <input
                  checked=""
                  class="_input_1qhtc_18"
                  id="radix-_r_0_"
                  name="layout"
                  title=""
                  type="radio"
                  value="group"
                />
                <div
                  class="_ui_1qhtc_19"
                />
              </div>
              <span>
                Modern
              </span>
            </div>
            <hr
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
            />
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview"
              role="presentation"
            >
              <div
                aria-atomic="true"
                aria-live="off"
                class="mx_EventTile"
                data-event-id="$9999999999999999999999999999999999999999999"
                data-has-reply="false"
                data-layout="group"
                data-scroll-tokens="$9999999999999999999999999999999999999999999"
                data-self="true"
                tabindex="-1"
              >
                <div
                  class="mx_DisambiguatedProfile"
                >
                  <span
                    class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
                    dir="auto"
                  >
                    Alice
                  </span>
                </div>
                <div
                  class="mx_EventTile_avatar"
                >
                  <span
                    class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
                    data-color="2"
                    data-testid="avatar-img"
                    data-type="round"
                    role="presentation"
                    style="--cpd-avatar-size: 30px;"
                    title="@userId:matrix.org"
                  >
                    A
                  </span>
                </div>
                <div
                  class="mx_EventTile_line"
                  id="1"
                >
                  <div
                    class="mx_MTextBody mx_EventTile_content"
                  >
                    <div
                      class="mx_EventTile_body translate"
                      dir="auto"
                    >
                      Hey you. You're the best!
                    </div>
                  </div>
                  <div
                    aria-label="Message Actions"
                    aria-live="off"
                    class="mx_MessageActionBar"
                    role="toolbar"
                  >
                    <div
                      aria-label="Edit"
                      class="mx_AccessibleButton mx_MessageActionBar_iconButton"
                      role="button"
                      tabindex="0"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M15.706 2.637a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L9.605 20.052a1 1 0 0 1-.465.263L3.483 21.73a1 1 0 0 1-1.212-1.213l1.414-5.657a1 1 0 0 1 .263-.465zm1.224 7.262L14.102 7.07l-8.544 8.544-.943 3.771 3.771-.943z"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      aria-expanded="false"
                      aria-haspopup="true"
                      aria-label="Options"
                      class="mx_AccessibleButton mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton"
                      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 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>
                  </div>
                </div>
              </div>
            </div>
          </label>
        </div>
        <div
          class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
        >
          <label
            aria-label="Message bubbles"
            class="_label_19upo_59"
            for="radix-_r_9_"
          >
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
            >
              <div
                class="_container_1qhtc_10"
              >
                <input
                  class="_input_1qhtc_18"
                  id="radix-_r_9_"
                  name="layout"
                  title=""
                  type="radio"
                  value="bubble"
                />
                <div
                  class="_ui_1qhtc_19"
                />
              </div>
              <span>
                Message bubbles
              </span>
            </div>
            <hr
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
            />
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview"
              role="presentation"
            >
              <div
                aria-atomic="true"
                aria-live="off"
                class="mx_EventTile"
                data-event-id="$9999999999999999999999999999999999999999999"
                data-has-reply="false"
                data-layout="bubble"
                data-scroll-tokens="$9999999999999999999999999999999999999999999"
                data-self="true"
                tabindex="-1"
              >
                <div
                  class="mx_DisambiguatedProfile"
                >
                  <span
                    class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
                    dir="auto"
                  >
                    Alice
                  </span>
                </div>
                <div
                  class="mx_EventTile_avatar"
                >
                  <span
                    class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
                    data-color="2"
                    data-testid="avatar-img"
                    data-type="round"
                    role="presentation"
                    style="--cpd-avatar-size: 30px;"
                    title="@userId:matrix.org"
                  >
                    A
                  </span>
                </div>
                <div
                  class="mx_EventTile_line"
                  id="2"
                >
                  <div
                    class="mx_MTextBody mx_EventTile_content"
                  >
                    <div
                      class="mx_EventTile_body translate"
                      dir="auto"
                    >
                      Hey you. You're the best!
                    </div>
                  </div>
                  <div
                    aria-label="Message Actions"
                    aria-live="off"
                    class="mx_MessageActionBar"
                    role="toolbar"
                  >
                    <div
                      aria-label="Edit"
                      class="mx_AccessibleButton mx_MessageActionBar_iconButton"
                      role="button"
                      tabindex="0"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M15.706 2.637a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L9.605 20.052a1 1 0 0 1-.465.263L3.483 21.73a1 1 0 0 1-1.212-1.213l1.414-5.657a1 1 0 0 1 .263-.465zm1.224 7.262L14.102 7.07l-8.544 8.544-.943 3.771 3.771-.943z"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      aria-expanded="false"
                      aria-haspopup="true"
                      aria-label="Options"
                      class="mx_AccessibleButton mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton"
                      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 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>
                  </div>
                </div>
              </div>
            </div>
          </label>
        </div>
        <div
          class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
        >
          <label
            aria-label="IRC (experimental)"
            class="_label_19upo_59"
            for="radix-_r_i_"
          >
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
            >
              <div
                class="_container_1qhtc_10"
              >
                <input
                  class="_input_1qhtc_18"
                  id="radix-_r_i_"
                  name="layout"
                  title=""
                  type="radio"
                  value="irc"
                />
                <div
                  class="_ui_1qhtc_19"
                />
              </div>
              <span>
                IRC (experimental)
              </span>
            </div>
            <hr
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
            />
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview mx_IRCLayout"
              role="presentation"
            >
              <div
                aria-atomic="true"
                aria-live="off"
                class="mx_EventTile"
                data-event-id="$9999999999999999999999999999999999999999999"
                data-has-reply="false"
                data-layout="irc"
                data-scroll-tokens="$9999999999999999999999999999999999999999999"
                data-self="true"
                tabindex="-1"
              >
                <span
                  class="mx_MessageTimestamp"
                />
                <div
                  class="mx_DisambiguatedProfile"
                >
                  <span
                    class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
                    dir="auto"
                  >
                    Alice
                  </span>
                </div>
                <div
                  class="mx_EventTile_avatar"
                >
                  <span
                    class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
                    data-color="2"
                    data-testid="avatar-img"
                    data-type="round"
                    role="presentation"
                    style="--cpd-avatar-size: 14px;"
                    title="@userId:matrix.org"
                  >
                    A
                  </span>
                </div>
                <div
                  class="mx_EventTile_line"
                  id="3"
                >
                  <div
                    class="mx_MTextBody mx_EventTile_content"
                  >
                    <div
                      class="mx_EventTile_body translate"
                      dir="auto"
                    >
                      Hey you. You're the best!
                    </div>
                  </div>
                  <div
                    aria-label="Message Actions"
                    aria-live="off"
                    class="mx_MessageActionBar"
                    role="toolbar"
                  >
                    <div
                      aria-label="Edit"
                      class="mx_AccessibleButton mx_MessageActionBar_iconButton"
                      role="button"
                      tabindex="0"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M15.706 2.637a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L9.605 20.052a1 1 0 0 1-.465.263L3.483 21.73a1 1 0 0 1-1.212-1.213l1.414-5.657a1 1 0 0 1 .263-.465zm1.224 7.262L14.102 7.07l-8.544 8.544-.943 3.771 3.771-.943z"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      aria-expanded="false"
                      aria-haspopup="true"
                      aria-label="Options"
                      class="mx_AccessibleButton mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton"
                      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 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>
                  </div>
                </div>
              </div>
            </div>
          </label>
        </div>
      </form>
      <form
        class="_root_19upo_16"
      >
        <div
          class="_inline-field_19upo_32"
        >
          <div
            class="_inline-field-control_19upo_44"
          >
            <div
              class="_container_udcm8_10"
            >
              <input
                aria-describedby="radix-_r_s_"
                class="_input_udcm8_24"
                id="radix-_r_r_"
                name="compactLayout"
                role="switch"
                title=""
                type="checkbox"
              />
              <div
                class="_ui_udcm8_34"
              />
            </div>
          </div>
          <div
            class="_inline-field-body_19upo_38"
          >
            <label
              class="_label_19upo_59"
              for="radix-_r_r_"
            >
              Show compact text and messages
            </label>
            <span
              class="_message_19upo_85 _help-message_19upo_91"
              id="radix-_r_s_"
            >
              Modern layout must be selected to use this feature.
            </span>
          </div>
        </div>
      </form>
    </div>
    <div
      class="_separator_cqpyv_8"
      data-kind="primary"
      data-orientation="horizontal"
      role="separator"
    />
  </div>
</DocumentFragment>
`;