// 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"
    >
      <h2
        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
      >
        Message layout
      </h2>
    </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-react-use-id-1"
          >
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
            >
              <div
                class="_container_1ug7n_10"
              >
                <input
                  checked=""
                  class="_input_1ug7n_18"
                  id="radix-react-use-id-1"
                  name="layout"
                  title=""
                  type="radio"
                  value="group"
                />
                <div
                  class="_ui_1ug7n_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 _disambiguatedProfile_4jooo_8"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName"
                    dir="auto"
                  >
                    Alice
                  </span>
                </div>
                <div
                  class="mx_EventTile_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: 30px;"
                    title="@userId:matrix.org"
                  >
                    A
                  </span>
                </div>
                <div
                  class="mx_EventTile_line"
                  id="1"
                >
                  <div
                    class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
                  >
                    <div
                      class="mx_EventTile_body translate"
                      dir="auto"
                    >
                      Hey you. You're the best!
                    </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-react-use-id-2"
          >
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
            >
              <div
                class="_container_1ug7n_10"
              >
                <input
                  class="_input_1ug7n_18"
                  id="radix-react-use-id-2"
                  name="layout"
                  title=""
                  type="radio"
                  value="bubble"
                />
                <div
                  class="_ui_1ug7n_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 _disambiguatedProfile_4jooo_8"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName"
                    dir="auto"
                  >
                    Alice
                  </span>
                </div>
                <div
                  class="mx_EventTile_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: 30px;"
                    title="@userId:matrix.org"
                  >
                    A
                  </span>
                </div>
                <div
                  class="mx_EventTile_line"
                  id="2"
                >
                  <div
                    class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
                  >
                    <div
                      class="mx_EventTile_body translate"
                      dir="auto"
                    >
                      Hey you. You're the best!
                    </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-react-use-id-3"
          >
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
            >
              <div
                class="_container_1ug7n_10"
              >
                <input
                  class="_input_1ug7n_18"
                  id="radix-react-use-id-3"
                  name="layout"
                  title=""
                  type="radio"
                  value="irc"
                />
                <div
                  class="_ui_1ug7n_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 _disambiguatedProfile_4jooo_8"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName"
                    dir="auto"
                  >
                    Alice
                  </span>
                </div>
                <div
                  class="mx_EventTile_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: 14px;"
                    title="@userId:matrix.org"
                  >
                    A
                  </span>
                </div>
                <div
                  class="mx_EventTile_line"
                  id="3"
                >
                  <div
                    class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
                  >
                    <div
                      class="mx_EventTile_body translate"
                      dir="auto"
                    >
                      Hey you. You're the best!
                    </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-react-use-id-4"
                class="_input_udcm8_24"
                id="radix-react-use-id-5"
                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-react-use-id-5"
            >
              Show compact text and messages
            </label>
            <span
              class="_message_19upo_85 _help-message_19upo_91"
              id="radix-react-use-id-4"
            >
              Modern layout must be selected to use this feature.
            </span>
          </div>
        </div>
      </form>
    </div>
    <div
      class="_separator_13qwf_8"
      data-kind="primary"
      data-orientation="horizontal"
      role="separator"
    />
  </div>
</DocumentFragment>
`;
