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

exports[`Account home page > display name edit box > displays an error if the display name is invalid 1`] = `
<div
  aria-describedby="radix-_r_86_"
  aria-labelledby="radix-_r_85_"
  class="_body_820528"
  data-state="open"
  id="radix-_r_84_"
  role="dialog"
  style="pointer-events: auto;"
  tabindex="-1"
>
  <h2
    class="_title_820528"
    id="radix-_r_85_"
  >
    Edit profile
  </h2>
  <span
    aria-label="@alice:example.com"
    class="_avatar_1qbcf_8 self-center _avatar-imageless_1qbcf_52"
    data-color="6"
    data-type="round"
    role="img"
    style="--cpd-avatar-size: 88px;"
  >
    A
  </span>
  <form
    class="_root_19upo_16"
  >
    <div
      class="_dialogForm_0d9d49"
    >
      <div
        class="_field_19upo_26"
        data-invalid="true"
      >
        <label
          class="_label_19upo_59"
          data-invalid="true"
          for="radix-_r_9p_"
        >
          Display name
        </label>
        <div
          class="_container_1s836_8"
          id="_r_9q_"
        >
          <input
            aria-describedby="radix-_r_a0_"
            aria-invalid="true"
            autocomplete="name"
            class="_control_sqdq4_10 _control_1s836_13"
            data-invalid="true"
            id="radix-_r_9p_"
            name="displayname"
            title=""
            type="text"
            value="Alice"
          />
          <button
            aria-controls="_r_9q_"
            aria-labelledby="_r_9r_"
            class="_action_1s836_24"
            type="button"
          >
            <svg
              aria-hidden="true"
              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>
          </button>
        </div>
        <span
          class="_message_19upo_85 _help-message_19upo_91"
          id="radix-_r_a0_"
        >
          This is what others will see wherever you’re signed in.
        </span>
      </div>
      <div
        class="_field_19upo_26"
      >
        <label
          class="_label_19upo_59"
          for="radix-_r_a1_"
        >
          Username
        </label>
        <input
          class="_control_sqdq4_10"
          id="radix-_r_a1_"
          name="mxid"
          readonly=""
          title=""
          value="@alice:example.com"
        />
      </div>
    </div>
    <button
      aria-disabled="false"
      class="_button_vczzf_8"
      data-kind="primary"
      data-size="lg"
      role="button"
      tabindex="0"
      type="submit"
    >
      Save
    </button>
  </form>
  <button
    class="_button_vczzf_8"
    data-kind="tertiary"
    data-size="lg"
    role="button"
    tabindex="0"
    type="button"
  >
    Cancel
  </button>
  <button
    aria-labelledby="_r_a2_"
    class="_close_820528"
    type="button"
  >
    <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>
  </button>
</div>
`;

exports[`Account home page > display name edit box > lets edit the display name 1`] = `
<div
  aria-describedby="radix-_r_1n_"
  aria-labelledby="radix-_r_1m_"
  class="_body_820528"
  data-state="open"
  id="radix-_r_1l_"
  role="dialog"
  style="pointer-events: auto;"
  tabindex="-1"
>
  <h2
    class="_title_820528"
    id="radix-_r_1m_"
  >
    Edit profile
  </h2>
  <span
    aria-label="@alice:example.com"
    class="_avatar_1qbcf_8 self-center _avatar-imageless_1qbcf_52"
    data-color="6"
    data-type="round"
    role="img"
    style="--cpd-avatar-size: 88px;"
  >
    A
  </span>
  <form
    class="_root_19upo_16"
  >
    <div
      class="_dialogForm_0d9d49"
    >
      <div
        class="_field_19upo_26"
      >
        <label
          class="_label_19upo_59"
          for="radix-_r_3a_"
        >
          Display name
        </label>
        <div
          class="_container_1s836_8"
          id="_r_3b_"
        >
          <input
            aria-describedby="radix-_r_3h_"
            autocomplete="name"
            class="_control_sqdq4_10 _control_1s836_13"
            id="radix-_r_3a_"
            name="displayname"
            title=""
            type="text"
            value="Alice"
          />
          <button
            aria-controls="_r_3b_"
            aria-labelledby="_r_3c_"
            class="_action_1s836_24"
            type="button"
          >
            <svg
              aria-hidden="true"
              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>
          </button>
        </div>
        <span
          class="_message_19upo_85 _help-message_19upo_91"
          id="radix-_r_3h_"
        >
          This is what others will see wherever you’re signed in.
        </span>
      </div>
      <div
        class="_field_19upo_26"
      >
        <label
          class="_label_19upo_59"
          for="radix-_r_3i_"
        >
          Username
        </label>
        <input
          class="_control_sqdq4_10"
          id="radix-_r_3i_"
          name="mxid"
          readonly=""
          title=""
          value="@alice:example.com"
        />
      </div>
    </div>
    <button
      aria-disabled="false"
      class="_button_vczzf_8"
      data-kind="primary"
      data-size="lg"
      role="button"
      tabindex="0"
      type="submit"
    >
      Save
    </button>
  </form>
  <button
    class="_button_vczzf_8"
    data-kind="tertiary"
    data-size="lg"
    role="button"
    tabindex="0"
    type="button"
  >
    Cancel
  </button>
  <button
    aria-labelledby="_r_3j_"
    class="_close_820528"
    type="button"
  >
    <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>
  </button>
</div>
`;

exports[`Account home page > renders the page 1`] = `
<DocumentFragment>
  <div
    class="_layoutContainer_4402d3 _wide_4402d3"
  >
    <div
      class="flex flex-col gap-10"
    >
      <h1
        class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
      >
        Your account
      </h1>
      <div
        class="flex flex-col gap-4"
      >
        <div
          class="_user_0d9d49"
        >
          <span
            aria-label="@alice:example.com"
            class="_avatar_1qbcf_8 _avatar_0d9d49 _avatar-imageless_1qbcf_52"
            data-color="6"
            data-type="round"
            role="img"
            style="--cpd-avatar-size: var(--cpd-space-14x);"
          >
            A
          </span>
          <div
            class="_meta_0d9d49"
          >
            <p
              class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
            >
              Alice
            </p>
            <p
              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 _mxid_0d9d49"
            >
              @alice:example.com
            </p>
          </div>
          <button
            aria-controls="radix-_r_0_"
            aria-expanded="false"
            aria-haspopup="dialog"
            aria-labelledby="_r_3_"
            class="_icon-button_1pz9o_8 _editButton_0d9d49"
            data-kind="primary"
            data-state="closed"
            role="button"
            style="--cpd-icon-button-size: var(--cpd-space-6x);"
            tabindex="0"
            type="button"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <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>
          </button>
        </div>
        <nav
          class="_navBar_6d152a"
        >
          <ul
            class="_navBarItems_6d152a"
          >
            <li
              class="_navTab_a2fe1e"
            >
              <a
                aria-current="page"
                class="_navItem_a2fe1e"
                data-status="active"
                href="/"
              >
                Settings
              </a>
            </li>
            <li
              class="_navTab_a2fe1e"
            >
              <a
                class="_navItem_a2fe1e"
                href="/sessions"
              >
                Devices
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <div
      class="flex flex-col gap-6"
    >
      <section
        aria-labelledby="_r_8_"
        class="_root_a44bb3"
        data-state="open"
      >
        <header
          class="_heading_a44bb3"
        >
          <div
            class="_trigger_a44bb3"
          >
            <h4
              class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 _triggerTitle_a44bb3"
              id="_r_8_"
            >
              Contact info
            </h4>
            <button
              aria-controls="radix-_r_a_"
              aria-expanded="true"
              aria-labelledby="_r_b_"
              class="_icon-button_1pz9o_8 _triggerIcon_a44bb3"
              data-kind="primary"
              data-state="open"
              role="button"
              style="--cpd-icon-button-size: 32px;"
              tabindex="0"
              type="button"
            >
              <div
                class="_indicator-icon_zr2a0_17"
                style="--cpd-icon-button-size: 100%;"
              >
                <svg
                  fill="currentColor"
                  height="1em"
                  viewBox="0 0 24 24"
                  width="1em"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m12 10.775-3.9 3.9a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275.95.95 0 0 1-.275-.7q0-.425.275-.7l4.6-4.6q.15-.15.325-.212Q11.8 8.4 12 8.4t.375.063a.9.9 0 0 1 .325.212l4.6 4.6a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275z"
                  />
                </svg>
              </div>
            </button>
          </div>
        </header>
        <article
          class="_content_a44bb3"
          data-state="open"
          id="radix-_r_a_"
          style="transition-duration: 0s; animation-name: none;"
        >
          <form
            class="_root_19upo_16"
          >
            <div
              class="_field_19upo_26"
            >
              <label
                class="_label_19upo_59"
                for="radix-_r_j_"
              >
                Email
              </label>
              <div
                class="flex items-center gap-2"
              >
                <input
                  class="_control_sqdq4_10 _userEmailField_06c85d"
                  id="radix-_r_j_"
                  name="email"
                  readonly=""
                  title=""
                  type="email"
                  value="alice@example.com"
                />
              </div>
            </div>
          </form>
          <form
            class="_root_19upo_16"
          >
            <div
              class="_field_19upo_26"
            >
              <label
                class="_label_19upo_59"
                for="radix-_r_n_"
              >
                Add email
              </label>
              <div
                class="_controls_17lij_8"
              >
                <input
                  aria-describedby="radix-_r_o_"
                  class="_control_sqdq4_10"
                  id="radix-_r_n_"
                  name="input"
                  required=""
                  title=""
                  type="email"
                />
              </div>
              <span
                class="_message_19upo_85 _help-message_19upo_91"
                id="radix-_r_o_"
              >
                Add an alternative email you can use to access this account.
              </span>
            </div>
          </form>
        </article>
      </section>
      <div
        aria-orientation="horizontal"
        class="_separator_59a6a1 _section_59a6a1"
        role="separator"
      />
      <section
        aria-labelledby="_r_p_"
        class="_root_a44bb3"
        data-state="open"
      >
        <header
          class="_heading_a44bb3"
        >
          <div
            class="_trigger_a44bb3"
          >
            <h4
              class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 _triggerTitle_a44bb3"
              id="_r_p_"
            >
              Account password
            </h4>
            <button
              aria-controls="radix-_r_r_"
              aria-expanded="true"
              aria-labelledby="_r_s_"
              class="_icon-button_1pz9o_8 _triggerIcon_a44bb3"
              data-kind="primary"
              data-state="open"
              role="button"
              style="--cpd-icon-button-size: 32px;"
              tabindex="0"
              type="button"
            >
              <div
                class="_indicator-icon_zr2a0_17"
                style="--cpd-icon-button-size: 100%;"
              >
                <svg
                  fill="currentColor"
                  height="1em"
                  viewBox="0 0 24 24"
                  width="1em"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m12 10.775-3.9 3.9a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275.95.95 0 0 1-.275-.7q0-.425.275-.7l4.6-4.6q.15-.15.325-.212Q11.8 8.4 12 8.4t.375.063a.9.9 0 0 1 .325.212l4.6 4.6a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275z"
                  />
                </svg>
              </div>
            </button>
          </div>
        </header>
        <article
          class="_content_a44bb3"
          data-state="open"
          id="radix-_r_r_"
          style="transition-duration: 0s; animation-name: none;"
        >
          <form
            class="_root_19upo_16"
          >
            <div
              class="_field_19upo_26"
            >
              <label
                class="_label_19upo_59"
                for="radix-_r_11_"
              >
                Password
              </label>
              <input
                aria-describedby="radix-_r_12_"
                class="_control_sqdq4_10"
                id="radix-_r_11_"
                name="password_preview"
                readonly=""
                title=""
                type="password"
                value="this looks like a password"
              />
              <span
                class="_message_19upo_85 _help-message_19upo_91"
                id="radix-_r_12_"
              >
                <a
                  class="_link_2a6fa3"
                  href="/password/change"
                >
                  Change password
                </a>
              </span>
            </div>
          </form>
        </article>
      </section>
      <div
        aria-orientation="horizontal"
        class="_separator_59a6a1 _section_59a6a1"
        role="separator"
      />
      <section
        aria-labelledby="_r_13_"
        class="_root_a44bb3"
        data-state="closed"
      >
        <header
          class="_heading_a44bb3"
        >
          <div
            class="_trigger_a44bb3"
          >
            <h4
              class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 _triggerTitle_a44bb3"
              id="_r_13_"
            >
              End-to-end encryption
            </h4>
            <button
              aria-controls="radix-_r_15_"
              aria-expanded="false"
              aria-labelledby="_r_16_"
              class="_icon-button_1pz9o_8 _triggerIcon_a44bb3"
              data-kind="primary"
              data-state="closed"
              role="button"
              style="--cpd-icon-button-size: 32px;"
              tabindex="0"
              type="button"
            >
              <div
                class="_indicator-icon_zr2a0_17"
                style="--cpd-icon-button-size: 100%;"
              >
                <svg
                  fill="currentColor"
                  height="1em"
                  viewBox="0 0 24 24"
                  width="1em"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m12 10.775-3.9 3.9a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275.95.95 0 0 1-.275-.7q0-.425.275-.7l4.6-4.6q.15-.15.325-.212Q11.8 8.4 12 8.4t.375.063a.9.9 0 0 1 .325.212l4.6 4.6a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275z"
                  />
                </svg>
              </div>
            </button>
          </div>
        </header>
      </section>
      <div
        aria-orientation="horizontal"
        class="_separator_59a6a1 _section_59a6a1"
        role="separator"
      />
      <button
        aria-controls="radix-_r_1b_"
        aria-expanded="false"
        aria-haspopup="dialog"
        class="_button_vczzf_8 _has-icon_vczzf_57 _destructive_vczzf_107"
        data-kind="primary"
        data-size="lg"
        data-state="closed"
        role="button"
        tabindex="0"
        type="button"
      >
        <svg
          aria-hidden="true"
          fill="currentColor"
          height="20"
          viewBox="0 0 24 24"
          width="20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9 12.031q0-.424.288-.712A.97.97 0 0 1 10 11.03h7.15l-1.875-1.875a.96.96 0 0 1-.3-.7q0-.4.325-.725a.93.93 0 0 1 .712-.287.98.98 0 0 1 .688.287l3.6 3.6q.15.15.212.325.063.175.063.375 0 .201-.062.375a.9.9 0 0 1-.213.325l-3.6 3.6q-.3.3-.712.288a.98.98 0 0 1-.688-.288 1.02 1.02 0 0 1-.312-.712.93.93 0 0 1 .287-.713l1.875-1.875H10a.97.97 0 0 1-.712-.287A.97.97 0 0 1 9 12.03m-6-7q0-.824.588-1.412A1.93 1.93 0 0 1 5 3.03h6q.424 0 .713.288.287.287.287.712t-.287.713A.97.97 0 0 1 11 5.03H5v14h6q.424 0 .713.288.287.287.287.712t-.287.713a.97.97 0 0 1-.713.287H5q-.824 0-1.412-.587A1.93 1.93 0 0 1 3 19.03z"
          />
        </svg>
        Sign out of account
      </button>
      <div
        aria-orientation="horizontal"
        class="_separator_59a6a1"
        role="separator"
      />
      <button
        aria-controls="radix-_r_1e_"
        aria-expanded="false"
        aria-haspopup="dialog"
        class="_button_vczzf_8 self-center _has-icon_vczzf_57 _destructive_vczzf_107"
        data-kind="tertiary"
        data-size="sm"
        data-state="closed"
        role="button"
        tabindex="0"
        type="button"
      >
        <svg
          aria-hidden="true"
          fill="currentColor"
          height="20"
          viewBox="0 0 24 24"
          width="20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M7 21q-.824 0-1.412-.587A1.93 1.93 0 0 1 5 19V6a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 5q0-.424.287-.713A.97.97 0 0 1 5 4h4q0-.424.287-.712A.97.97 0 0 1 10 3h4q.424 0 .713.288Q15 3.575 15 4h4q.424 0 .712.287Q20 4.576 20 5t-.288.713A.97.97 0 0 1 19 6v13q0 .824-.587 1.413A1.93 1.93 0 0 1 17 21zM7 6v13h10V6zm2 10q0 .424.287.712Q9.576 17 10 17t.713-.288A.97.97 0 0 0 11 16V9a.97.97 0 0 0-.287-.713A.97.97 0 0 0 10 8a.97.97 0 0 0-.713.287A.97.97 0 0 0 9 9zm4 0q0 .424.287.712.288.288.713.288.424 0 .713-.288A.97.97 0 0 0 15 16V9a.97.97 0 0 0-.287-.713A.97.97 0 0 0 14 8a.97.97 0 0 0-.713.287A.97.97 0 0 0 13 9z"
          />
        </svg>
        Delete account
      </button>
      <div
        aria-orientation="horizontal"
        class="_separator_59a6a1"
        role="separator"
      />
    </div>
    <footer
      class="_legalFooter_acfd2c"
    >
      <nav>
        <a
          class="_link_1v5rz_8"
          data-kind="primary"
          data-size="medium"
          href="https://matrix.org/policy"
          rel="noreferrer noopener"
          title="Link to the service privacy policy"
        >
          Privacy Policy
        </a>
        <div
          aria-hidden="true"
          class="_separator_acfd2c"
        >
          •
        </div>
        <a
          class="_link_1v5rz_8"
          data-kind="primary"
          data-size="medium"
          href="https://matrix.org/tos"
          rel="noreferrer noopener"
          title="Link to the service terms and conditions"
        >
          Terms & Conditions
        </a>
      </nav>
      <p
        class="_imprint_acfd2c"
      >
        All Rights Reserved. The Super Chat name, logo and device are registered trade marks of BigCorp Ltd.
      </p>
    </footer>
  </div>
</DocumentFragment>
`;
