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

exports[`<Configuration /> matches snapshot 1`] = `
"
<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>
"
`;
