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

exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
<DocumentFragment>
  <div
    class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
    data-testid="themePanel"
  >
    <div
      class="mx_SettingsSubsectionHeading"
    >
      <h3
        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
      >
        Theme
      </h3>
    </div>
    <div
      class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
    >
      <form
        class="_root_19upo_16"
      >
        <div
          class="_inline-field_19upo_32"
        >
          <div
            class="_inline-field-control_19upo_44"
          >
            <div
              class="_container_udcm8_10"
            >
              <input
                class="_input_udcm8_24"
                id="radix-_r_28_"
                name="systemTheme"
                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_28_"
            >
              Match system theme
            </label>
          </div>
        </div>
      </form>
      <form
        class="_root_19upo_16 mx_ThemeChoicePanel_ThemeSelectors"
      >
        <div
          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
        >
          <div
            class="_inline-field-control_19upo_44"
          >
            <div
              class="_container_1ug7n_10"
            >
              <input
                checked=""
                class="_input_1ug7n_18"
                id="radix-_r_29_"
                name="themeSelector"
                title=""
                type="radio"
                value="light"
              />
              <div
                class="_ui_1ug7n_19"
              />
            </div>
          </div>
          <div
            class="_inline-field-body_19upo_38"
          >
            <label
              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
              for="radix-_r_29_"
            >
              Light
            </label>
          </div>
        </div>
        <div
          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
        >
          <div
            class="_inline-field-control_19upo_44"
          >
            <div
              class="_container_1ug7n_10"
            >
              <input
                class="_input_1ug7n_18"
                id="radix-_r_2a_"
                name="themeSelector"
                title=""
                type="radio"
                value="dark"
              />
              <div
                class="_ui_1ug7n_19"
              />
            </div>
          </div>
          <div
            class="_inline-field-body_19upo_38"
          >
            <label
              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
              for="radix-_r_2a_"
            >
              Dark
            </label>
          </div>
        </div>
        <div
          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
        >
          <div
            class="_inline-field-control_19upo_44"
          >
            <div
              class="_container_1ug7n_10"
            >
              <input
                class="_input_1ug7n_18"
                id="radix-_r_2b_"
                name="themeSelector"
                title=""
                type="radio"
                value="light-high-contrast"
              />
              <div
                class="_ui_1ug7n_19"
              />
            </div>
          </div>
          <div
            class="_inline-field-body_19upo_38"
          >
            <label
              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
              for="radix-_r_2b_"
            >
              High contrast
            </label>
          </div>
        </div>
        <div
          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
        >
          <div
            class="_inline-field-control_19upo_44"
          >
            <div
              class="_container_1ug7n_10"
            >
              <input
                class="_input_1ug7n_18"
                id="radix-_r_2c_"
                name="themeSelector"
                title=""
                type="radio"
                value="custom-Alice theme"
              />
              <div
                class="_ui_1ug7n_19"
              />
            </div>
          </div>
          <div
            class="_inline-field-body_19upo_38"
          >
            <label
              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
              for="radix-_r_2c_"
            >
              Alice theme
            </label>
          </div>
        </div>
      </form>
      <div
        class="mx_ThemeChoicePanel_CustomTheme"
      >
        <form
          class="_root_19upo_16 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
        >
          <div
            class="_field_19upo_26"
          >
            <label
              class="_label_19upo_59"
              for="radix-_r_2d_"
            >
              Add custom theme
            </label>
            <div
              class="_controls_17lij_8"
            >
              <input
                aria-describedby="radix-_r_2e_"
                class="_control_sqdq4_10"
                id="radix-_r_2d_"
                name="input"
                title=""
                value=""
              />
            </div>
            <span
              class="_message_19upo_85 _help-message_19upo_91"
              id="radix-_r_2e_"
            >
              Enter the URL of a custom theme you want to apply.
            </span>
          </div>
        </form>
        <ul
          class="mx_ThemeChoicePanel_CustomThemeList"
        >
          <li
            aria-label="Alice theme"
            class="mx_ThemeChoicePanel_CustomThemeList_theme"
          >
            <span
              class="mx_ThemeChoicePanel_CustomThemeList_name"
            >
              Alice theme
            </span>
            <button
              aria-label="Delete"
              aria-labelledby="_r_2f_"
              class="_icon-button_1215g_8 _destructive_1215g_95"
              data-kind="primary"
              role="button"
              style="--cpd-icon-button-size: 32px;"
              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="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>
              </div>
            </button>
          </li>
        </ul>
      </div>
    </div>
    <div
      class="_separator_cqpyv_8"
      data-kind="primary"
      data-orientation="horizontal"
      role="separator"
    />
  </div>
</DocumentFragment>
`;

exports[`<ThemeChoicePanel /> custom theme should render the custom theme section 1`] = `
<DocumentFragment>
  <div
    class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
    data-testid="themePanel"
  >
    <div
      class="mx_SettingsSubsectionHeading"
    >
      <h3
        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
      >
        Theme
      </h3>
    </div>
    <div
      class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
    >
      <form
        class="_root_19upo_16"
      >
        <div
          class="_inline-field_19upo_32"
        >
          <div
            class="_inline-field-control_19upo_44"
          >
            <div
              class="_container_udcm8_10"
            >
              <input
                class="_input_udcm8_24"
                id="radix-_r_10_"
                name="systemTheme"
                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_10_"
            >
              Match system theme
            </label>
          </div>
        </div>
      </form>
      <form
        class="_root_19upo_16 mx_ThemeChoicePanel_ThemeSelectors"
      >
        <div
          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
        >
          <div
            class="_inline-field-control_19upo_44"
          >
            <div
              class="_container_1ug7n_10"
            >
              <input
                checked=""
                class="_input_1ug7n_18"
                id="radix-_r_11_"
                name="themeSelector"
                title=""
                type="radio"
                value="light"
              />
              <div
                class="_ui_1ug7n_19"
              />
            </div>
          </div>
          <div
            class="_inline-field-body_19upo_38"
          >
            <label
              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
              for="radix-_r_11_"
            >
              Light
            </label>
          </div>
        </div>
        <div
          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
        >
          <div
            class="_inline-field-control_19upo_44"
          >
            <div
              class="_container_1ug7n_10"
            >
              <input
                class="_input_1ug7n_18"
                id="radix-_r_12_"
                name="themeSelector"
                title=""
                type="radio"
                value="dark"
              />
              <div
                class="_ui_1ug7n_19"
              />
            </div>
          </div>
          <div
            class="_inline-field-body_19upo_38"
          >
            <label
              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
              for="radix-_r_12_"
            >
              Dark
            </label>
          </div>
        </div>
        <div
          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
        >
          <div
            class="_inline-field-control_19upo_44"
          >
            <div
              class="_container_1ug7n_10"
            >
              <input
                class="_input_1ug7n_18"
                id="radix-_r_13_"
                name="themeSelector"
                title=""
                type="radio"
                value="light-high-contrast"
              />
              <div
                class="_ui_1ug7n_19"
              />
            </div>
          </div>
          <div
            class="_inline-field-body_19upo_38"
          >
            <label
              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
              for="radix-_r_13_"
            >
              High contrast
            </label>
          </div>
        </div>
        <div
          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
        >
          <div
            class="_inline-field-control_19upo_44"
          >
            <div
              class="_container_1ug7n_10"
            >
              <input
                class="_input_1ug7n_18"
                id="radix-_r_14_"
                name="themeSelector"
                title=""
                type="radio"
                value="custom-Alice theme"
              />
              <div
                class="_ui_1ug7n_19"
              />
            </div>
          </div>
          <div
            class="_inline-field-body_19upo_38"
          >
            <label
              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
              for="radix-_r_14_"
            >
              Alice theme
            </label>
          </div>
        </div>
      </form>
      <div
        class="mx_ThemeChoicePanel_CustomTheme"
      >
        <form
          class="_root_19upo_16 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
        >
          <div
            class="_field_19upo_26"
          >
            <label
              class="_label_19upo_59"
              for="radix-_r_15_"
            >
              Add custom theme
            </label>
            <div
              class="_controls_17lij_8"
            >
              <input
                aria-describedby="radix-_r_16_"
                class="_control_sqdq4_10"
                id="radix-_r_15_"
                name="input"
                title=""
                value=""
              />
            </div>
            <span
              class="_message_19upo_85 _help-message_19upo_91"
              id="radix-_r_16_"
            >
              Enter the URL of a custom theme you want to apply.
            </span>
          </div>
        </form>
        <ul
          class="mx_ThemeChoicePanel_CustomThemeList"
        >
          <li
            aria-label="Alice theme"
            class="mx_ThemeChoicePanel_CustomThemeList_theme"
          >
            <span
              class="mx_ThemeChoicePanel_CustomThemeList_name"
            >
              Alice theme
            </span>
            <button
              aria-label="Delete"
              aria-labelledby="_r_17_"
              class="_icon-button_1215g_8 _destructive_1215g_95"
              data-kind="primary"
              role="button"
              style="--cpd-icon-button-size: 32px;"
              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="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>
              </div>
            </button>
          </li>
        </ul>
      </div>
    </div>
    <div
      class="_separator_cqpyv_8"
      data-kind="primary"
      data-orientation="horizontal"
      role="separator"
    />
  </div>
</DocumentFragment>
`;

exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
<DocumentFragment>
  <div
    class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
    data-testid="themePanel"
  >
    <div
      class="mx_SettingsSubsectionHeading"
    >
      <h3
        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
      >
        Theme
      </h3>
    </div>
    <div
      class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
    >
      <form
        class="_root_19upo_16"
      >
        <div
          class="_inline-field_19upo_32"
        >
          <div
            class="_inline-field-control_19upo_44"
          >
            <div
              class="_container_udcm8_10"
            >
              <input
                class="_input_udcm8_24"
                id="radix-_r_0_"
                name="systemTheme"
                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_0_"
            >
              Match system theme
            </label>
          </div>
        </div>
      </form>
      <form
        class="_root_19upo_16 mx_ThemeChoicePanel_ThemeSelectors"
      >
        <div
          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
        >
          <div
            class="_inline-field-control_19upo_44"
          >
            <div
              class="_container_1ug7n_10"
            >
              <input
                checked=""
                class="_input_1ug7n_18"
                id="radix-_r_1_"
                name="themeSelector"
                title=""
                type="radio"
                value="light"
              />
              <div
                class="_ui_1ug7n_19"
              />
            </div>
          </div>
          <div
            class="_inline-field-body_19upo_38"
          >
            <label
              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
              for="radix-_r_1_"
            >
              Light
            </label>
          </div>
        </div>
        <div
          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
        >
          <div
            class="_inline-field-control_19upo_44"
          >
            <div
              class="_container_1ug7n_10"
            >
              <input
                class="_input_1ug7n_18"
                id="radix-_r_2_"
                name="themeSelector"
                title=""
                type="radio"
                value="dark"
              />
              <div
                class="_ui_1ug7n_19"
              />
            </div>
          </div>
          <div
            class="_inline-field-body_19upo_38"
          >
            <label
              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
              for="radix-_r_2_"
            >
              Dark
            </label>
          </div>
        </div>
        <div
          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
        >
          <div
            class="_inline-field-control_19upo_44"
          >
            <div
              class="_container_1ug7n_10"
            >
              <input
                class="_input_1ug7n_18"
                id="radix-_r_3_"
                name="themeSelector"
                title=""
                type="radio"
                value="light-high-contrast"
              />
              <div
                class="_ui_1ug7n_19"
              />
            </div>
          </div>
          <div
            class="_inline-field-body_19upo_38"
          >
            <label
              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
              for="radix-_r_3_"
            >
              High contrast
            </label>
          </div>
        </div>
      </form>
    </div>
    <div
      class="_separator_cqpyv_8"
      data-kind="primary"
      data-orientation="horizontal"
      role="separator"
    />
  </div>
</DocumentFragment>
`;
