// 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\\"
                  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\\"
                  class=\\"css-1f43avz-a11yText-A11yText\\"
                >
                </span>
                <div class=\\"react-select__control css-n90zkc-control\\">
                  <div class=\\"react-select__value-container react-select__value-container--has-value css-1kabp7a-ValueContainer\\">
                    <div class=\\"react-select__single-value css-bgy71k-singleValue\\">
                      Automatic theme, follow browser preference
                    </div>
                    <div
                      class=\\"react-select__input-container css-dmcbcz-Input\\"
                      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\\"
                        value
                      >
                    </div>
                  </div>
                  <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
                    <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
                    </span>
                    <div
                      class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-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\\"
                  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\\"
                  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\\"
                  class=\\"css-1f43avz-a11yText-A11yText\\"
                >
                </span>
                <div class=\\"react-select__control css-n90zkc-control\\">
                  <div class=\\"react-select__value-container react-select__value-container--has-value css-1kabp7a-ValueContainer\\">
                    <div class=\\"react-select__single-value css-bgy71k-singleValue\\">
                      Collapse on mobile
                    </div>
                    <div
                      class=\\"react-select__input-container css-dmcbcz-Input\\"
                      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\\"
                        value
                      >
                    </div>
                  </div>
                  <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
                    <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
                    </span>
                    <div
                      class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-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\\"
                      class=\\"css-1f43avz-a11yText-A11yText\\"
                    >
                    </span>
                    <div class=\\"react-select__control css-n90zkc-control\\">
                      <div class=\\"react-select__value-container react-select__value-container--has-value css-1kabp7a-ValueContainer\\">
                        <div class=\\"react-select__single-value css-bgy71k-singleValue\\">
                          Use defaults from karma config file
                        </div>
                        <div
                          class=\\"react-select__input-container css-dmcbcz-Input\\"
                          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\\"
                            value
                          >
                        </div>
                      </div>
                      <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
                        <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
                        </span>
                        <div
                          class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-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\\"
                      class=\\"css-1f43avz-a11yText-A11yText\\"
                    >
                    </span>
                    <div class=\\"react-select__control css-n90zkc-control\\">
                      <div class=\\"react-select__value-container react-select__value-container--has-value css-1kabp7a-ValueContainer\\">
                        <div class=\\"react-select__single-value css-bgy71k-singleValue\\">
                          Disable multi-grid
                        </div>
                        <div
                          class=\\"react-select__input-container css-dmcbcz-Input\\"
                          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\\"
                            value
                          >
                        </div>
                      </div>
                      <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
                        <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
                        </span>
                        <div
                          class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-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>
"
`;
