// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<MainModalContent /> matches snapshot 1`] = `
"
<span>
  <div class="modal-header py-2">
    <nav class="nav nav-pills nav-justified w-100">
      <span class="nav-item nav-link cursor-pointer mx-1 px-2 active">
        Configuration
      </span>
      <span class="nav-item nav-link cursor-pointer mx-1 px-2 components-tab-inactive">
        Help
      </span>
      <button
        type="button"
        class="btn-close my-auto"
      >
      </button>
    </nav>
  </div>
  <div class="modal-body">
    <div class="accordion">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button
            class="accordion-button "
            type="button"
          >
            Refresh interval
          </button>
        </h2>
        <div class="accordion-collapse show">
          <div class="accordion-body">
            <div class="p-3 text-center">
              <div
                class="input-range-track"
                style="transform: scale(1); cursor: pointer;"
              >
                <div
                  class="input-range-thumb"
                  style="position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);"
                  tabindex="0"
                  aria-valuemax="120"
                  aria-valuemin="10"
                  aria-valuenow="30"
                  draggable="false"
                  aria-label
                  role="slider"
                >
                  30s
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button
            class="accordion-button "
            type="button"
          >
            Filter bar configuration
          </button>
        </h2>
        <div class="accordion-collapse show">
          <div class="accordion-body">
            <div class="form-check form-check-inline px-0 mx-0">
              <span class="form-check form-switch">
                <input
                  id="configuration-autohide"
                  class="form-check-input"
                  type="checkbox"
                  checked
                >
                <label
                  class="form-check-label cursor-pointer me-3"
                  for="configuration-autohide"
                >
                  Hide filter bar and alert details when idle
                </label>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button
            class="accordion-button "
            type="button"
          >
            Theme
          </button>
        </h2>
        <div class="accordion-collapse show">
          <div class="accordion-body">
            <div class="mb-2">
              <div class=" css-b62m3t-container">
                <span
                  id="react-select-configuration-theme-live-region"
                  class="css-1f43avz-a11yText-A11yText"
                >
                </span>
                <span
                  aria-live="polite"
                  aria-atomic="false"
                  aria-relevant="additions text"
                  role="log"
                  class="css-1f43avz-a11yText-A11yText"
                >
                </span>
                <div class="react-select__control css-18hiu1u-control">
                  <div class="react-select__value-container react-select__value-container--has-value css-1tlotun">
                    <div class="react-select__single-value css-qav5hl-singleValue">
                      Automatic theme, follow browser preference
                    </div>
                    <div
                      class="react-select__input-container css-6hzavh"
                      data-value
                    >
                      <input
                        class="react-select__input"
                        style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                        autocapitalize="none"
                        autocomplete="off"
                        autocorrect="off"
                        id="react-select-configuration-theme-input"
                        spellcheck="false"
                        tabindex="0"
                        type="text"
                        aria-autocomplete="list"
                        aria-expanded="false"
                        aria-haspopup="true"
                        role="combobox"
                        aria-activedescendant
                        value
                      >
                    </div>
                  </div>
                  <div class="react-select__indicators css-mik995">
                    <span class="react-select__indicator-separator css-1u9des2-indicatorSeparator">
                    </span>
                    <div
                      class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
                      aria-hidden="true"
                    >
                      <svg
                        height="20"
                        width="20"
                        viewbox="0 0 20 20"
                        aria-hidden="true"
                        focusable="false"
                        class="css-tj5bde-Svg"
                      >
                        <path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z">
                        </path>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="mb-0">
              <div class="form-check form-check-inline mx-0 px-0">
                <span class="form-check form-switch">
                  <input
                    id="configuration-colortitlebar"
                    class="form-check-input"
                    type="checkbox"
                  >
                  <label
                    class="form-check-label cursor-pointer me-3"
                    for="configuration-colortitlebar"
                  >
                    Color group titlebar
                  </label>
                </span>
              </div>
            </div>
            <div class="mb-0">
              <div class="form-check form-check-inline mx-0 px-0">
                <span class="form-check form-switch">
                  <input
                    id="configuration-animations"
                    class="form-check-input"
                    type="checkbox"
                    checked
                  >
                  <label
                    class="form-check-label cursor-pointer me-3"
                    for="configuration-animations"
                  >
                    Enable animations
                  </label>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button
            class="accordion-button "
            type="button"
          >
            Minimal alert group width
          </button>
        </h2>
        <div class="accordion-collapse show">
          <div class="accordion-body">
            <div class="p-3 text-center">
              <div
                class="input-range-track"
                style="transform: scale(1); cursor: pointer;"
              >
                <div
                  class="input-range-thumb"
                  style="position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);"
                  tabindex="0"
                  aria-valuemax="800"
                  aria-valuemin="300"
                  aria-valuenow="420"
                  draggable="false"
                  aria-label
                  role="slider"
                >
                  420
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button
            class="accordion-button "
            type="button"
          >
            Default number of alerts to show per group
          </button>
        </h2>
        <div class="accordion-collapse show">
          <div class="accordion-body">
            <div class="p-3 text-center">
              <div
                class="input-range-track"
                style="transform: scale(1); cursor: pointer;"
              >
                <div
                  class="input-range-thumb"
                  style="position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);"
                  tabindex="0"
                  aria-valuemax="25"
                  aria-valuemin="1"
                  aria-valuenow="5"
                  draggable="false"
                  aria-label
                  role="slider"
                >
                  5
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button
            class="accordion-button "
            type="button"
          >
            Default alert group display
          </button>
        </h2>
        <div class="accordion-collapse show">
          <div class="accordion-body">
            <div class="mb-0">
              <div class=" css-b62m3t-container">
                <span
                  id="react-select-configuration-collapse-live-region"
                  class="css-1f43avz-a11yText-A11yText"
                >
                </span>
                <span
                  aria-live="polite"
                  aria-atomic="false"
                  aria-relevant="additions text"
                  role="log"
                  class="css-1f43avz-a11yText-A11yText"
                >
                </span>
                <div class="react-select__control css-18hiu1u-control">
                  <div class="react-select__value-container react-select__value-container--has-value css-1tlotun">
                    <div class="react-select__single-value css-qav5hl-singleValue">
                      Collapse on mobile
                    </div>
                    <div
                      class="react-select__input-container css-6hzavh"
                      data-value
                    >
                      <input
                        class="react-select__input"
                        style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                        autocapitalize="none"
                        autocomplete="off"
                        autocorrect="off"
                        id="react-select-configuration-collapse-input"
                        spellcheck="false"
                        tabindex="0"
                        type="text"
                        aria-autocomplete="list"
                        aria-expanded="false"
                        aria-haspopup="true"
                        role="combobox"
                        aria-activedescendant
                        value
                      >
                    </div>
                  </div>
                  <div class="react-select__indicators css-mik995">
                    <span class="react-select__indicator-separator css-1u9des2-indicatorSeparator">
                    </span>
                    <div
                      class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
                      aria-hidden="true"
                    >
                      <svg
                        height="20"
                        width="20"
                        viewbox="0 0 20 20"
                        aria-hidden="true"
                        focusable="false"
                        class="css-tj5bde-Svg"
                      >
                        <path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z">
                        </path>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button
            class="accordion-button "
            type="button"
          >
            Grid sort order
          </button>
        </h2>
        <div class="accordion-collapse show">
          <div class="accordion-body">
            <div class="mb-0">
              <div class="d-flex flex-fill flex-lg-row flex-column justify-content-between">
                <div class="flex-shrink-0 flex-grow-1 flex-basis-auto">
                  <div class=" css-b62m3t-container">
                    <span
                      id="react-select-configuration-sort-order-live-region"
                      class="css-1f43avz-a11yText-A11yText"
                    >
                    </span>
                    <span
                      aria-live="polite"
                      aria-atomic="false"
                      aria-relevant="additions text"
                      role="log"
                      class="css-1f43avz-a11yText-A11yText"
                    >
                    </span>
                    <div class="react-select__control css-18hiu1u-control">
                      <div class="react-select__value-container react-select__value-container--has-value css-1tlotun">
                        <div class="react-select__single-value css-qav5hl-singleValue">
                          Use defaults from karma config file
                        </div>
                        <div
                          class="react-select__input-container css-6hzavh"
                          data-value
                        >
                          <input
                            class="react-select__input"
                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            id="react-select-configuration-sort-order-input"
                            spellcheck="false"
                            tabindex="0"
                            type="text"
                            aria-autocomplete="list"
                            aria-expanded="false"
                            aria-haspopup="true"
                            role="combobox"
                            aria-activedescendant
                            value
                          >
                        </div>
                      </div>
                      <div class="react-select__indicators css-mik995">
                        <span class="react-select__indicator-separator css-1u9des2-indicatorSeparator">
                        </span>
                        <div
                          class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
                          aria-hidden="true"
                        >
                          <svg
                            height="20"
                            width="20"
                            viewbox="0 0 20 20"
                            aria-hidden="true"
                            focusable="false"
                            class="css-tj5bde-Svg"
                          >
                            <path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z">
                            </path>
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button
            class="accordion-button "
            type="button"
          >
            Multi-grid source label
          </button>
        </h2>
        <div class="accordion-collapse show">
          <div class="accordion-body">
            <div class="mb-0">
              <div class="d-flex flex-fill flex-lg-row flex-column justify-content-between">
                <div class="flex-shrink-0 flex-grow-1 flex-basis-auto mx-0 mx-lg-1 mt-1 mt-lg-0">
                  <div class=" css-b62m3t-container">
                    <span
                      id="react-select-configuration-grid-label-live-region"
                      class="css-1f43avz-a11yText-A11yText"
                    >
                    </span>
                    <span
                      aria-live="polite"
                      aria-atomic="false"
                      aria-relevant="additions text"
                      role="log"
                      class="css-1f43avz-a11yText-A11yText"
                    >
                    </span>
                    <div class="react-select__control css-18hiu1u-control">
                      <div class="react-select__value-container react-select__value-container--has-value css-1tlotun">
                        <div class="react-select__single-value css-qav5hl-singleValue">
                          Disable multi-grid
                        </div>
                        <div
                          class="react-select__input-container css-6hzavh"
                          data-value
                        >
                          <input
                            class="react-select__input"
                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            id="react-select-configuration-grid-label-input"
                            spellcheck="false"
                            tabindex="0"
                            type="text"
                            aria-autocomplete="list"
                            aria-expanded="false"
                            aria-haspopup="true"
                            role="combobox"
                            aria-activedescendant
                            value
                          >
                        </div>
                      </div>
                      <div class="react-select__indicators css-mik995">
                        <span class="react-select__indicator-separator css-1u9des2-indicatorSeparator">
                        </span>
                        <div
                          class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
                          aria-hidden="true"
                        >
                          <svg
                            height="20"
                            width="20"
                            viewbox="0 0 20 20"
                            aria-hidden="true"
                            focusable="false"
                            class="css-tj5bde-Svg"
                          >
                            <path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z">
                            </path>
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto my-1 my-lg-auto ms-0 ms-lg-2 me-0 px-0">
                  <span class="form-check form-switch">
                    <input
                      id="configuration-multigrid-sort-reverse"
                      class="form-check-input"
                      type="checkbox"
                    >
                    <label
                      class="form-check-label cursor-pointer"
                      for="configuration-multigrid-sort-reverse"
                    >
                      Reverse order
                    </label>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <span class="text-muted">
      Version: unknown
    </span>
  </div>
</span>
"
`;
