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

exports[`Search index creates snapshot 1`] = `
<DocumentFragment>
  <nav
    class="navbar navbar-expand-sm navbar"
  >
    <div
      class="container d-flex justify-content-between flex-nowrap"
    >
      <div
        class="d-flex align-items-center text-truncate"
      />
      <div
        class="ml-3"
      >
        <div
          class="form-inline flex-nowrap align-items-center"
        >
          <label
            class="mr-2 mb-0"
          >
            Show:
          </label>
          <select
            aria-label="pagination-limit"
            class="custom-select custom-select-sm select"
            disabled=""
          >
            <option
              value="15"
            >
              15
            </option>
            <option
              value="25"
            >
              25
            </option>
            <option
              value="50"
            >
              50
            </option>
            ;
          </select>
        </div>
      </div>
    </div>
  </nav>
  <div
    class="d-flex position-relative pt-3 pb-3 flex-grow-1"
  >
    <div
      class="position-absolute p-5 wrapper undefined"
    >
      <div
        class="d-flex flex-row align-items-center justify-content-center w-100 h-100"
      >
        <div
          class="spinner-border text-primary spinner undefined"
          role="status"
        >
          <span
            class="sr-only"
          >
            Loading...
          </span>
        </div>
      </div>
    </div>
    <main
      class="container d-flex flex-row justify-content-between"
      role="main"
    >
      <div
        class="flex-grow-1 mt-3 list emptyList"
      />
    </main>
  </div>
</DocumentFragment>
`;

exports[`Search index creates snapshot 2`] = `
<DocumentFragment>
  <nav
    class="navbar navbar-expand-sm navbar"
  >
    <div
      class="container d-flex justify-content-between flex-nowrap"
    >
      <div
        class="d-flex align-items-center text-truncate"
      >
        <div
          class="d-inline-block d-md-none mr-2"
          role="complementary"
        >
          <button
            class="font-weight-bold text-uppercase position-relative btn btn-sm rounded-circle position-relative btnMobileFilters"
            data-testid="openSidebarBtn"
            type="button"
          >
            <div
              class="d-flex align-items-center justify-content-center"
            >
              <svg
                fill="currentColor"
                height="1em"
                stroke="currentColor"
                stroke-width="0"
                viewBox="0 0 512 512"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
                />
              </svg>
            </div>
          </button>
          <div
            class="sidebar left"
            data-testid="sidebarContent"
          >
            <div
              class="d-flex flex-column h-100"
            >
              <div
                class="border-bottom p-4 pb-3"
              >
                <div
                  class="d-flex align-items-center justify-content-between"
                >
                  <div>
                    <div
                      class="h6 text-uppercase mb-0"
                    >
                      Filters
                    </div>
                  </div>
                  <div>
                    <button
                      class="close"
                      data-testid="closeSidebarBtn"
                      type="button"
                    >
                      <span
                        aria-hidden="true"
                      >
                        ×
                      </span>
                    </button>
                  </div>
                </div>
              </div>
              <div
                class="flex-grow-1 d-flex contentWrapper px-4"
              >
                <div
                  class="overflow-auto mh-100 w-100 py-3"
                >
                  <div
                    class="filters"
                  >
                    <div
                      class="mt-3 mt-sm-4 pt-1"
                      role="menuitem"
                    >
                      <div
                        class="mt-2 mb-1"
                        data-testid="smallTitle"
                      >
                        <small
                          class="card-title text-muted text-uppercase"
                        >
                          <span
                            class="text-secondary font-weight-bold"
                          >
                            Category
                          </span>
                        </small>
                      </div>
                      <div
                        class="mt-3"
                      >
                        <div
                          class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                        >
                          <input
                            class="custom-control-input input"
                            data-testid="checkbox"
                            id="tsQuery-database"
                            name="tsQuery"
                            type="checkbox"
                            value="database"
                          />
                          <label
                            class="custom-control-label w-100 label"
                            data-testid="checkboxLabel"
                            for="tsQuery-database"
                          >
                            <div
                              class="d-flex align-items-baseline mw-100"
                            >
                              <span
                                class="d-inline-block text-truncate"
                              >
                                Database
                              </span>
                            </div>
                          </label>
                        </div>
                        <div
                          class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                        >
                          <input
                            class="custom-control-input input"
                            data-testid="checkbox"
                            id="tsQuery-integration-and-delivery"
                            name="tsQuery"
                            type="checkbox"
                            value="integration-and-delivery"
                          />
                          <label
                            class="custom-control-label w-100 label"
                            data-testid="checkboxLabel"
                            for="tsQuery-integration-and-delivery"
                          >
                            <div
                              class="d-flex align-items-baseline mw-100"
                            >
                              <span
                                class="d-inline-block text-truncate"
                              >
                                Integration and Delivery
                              </span>
                            </div>
                          </label>
                        </div>
                        <div
                          class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                        >
                          <input
                            class="custom-control-input input"
                            data-testid="checkbox"
                            id="tsQuery-logging-and-tracing"
                            name="tsQuery"
                            type="checkbox"
                            value="logging-and-tracing"
                          />
                          <label
                            class="custom-control-label w-100 label"
                            data-testid="checkboxLabel"
                            for="tsQuery-logging-and-tracing"
                          >
                            <div
                              class="d-flex align-items-baseline mw-100"
                            >
                              <span
                                class="d-inline-block text-truncate"
                              >
                                Logging and Tracing
                              </span>
                            </div>
                          </label>
                        </div>
                        <div
                          class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                        >
                          <input
                            class="custom-control-input input"
                            data-testid="checkbox"
                            id="tsQuery-machine-learning"
                            name="tsQuery"
                            type="checkbox"
                            value="machine-learning"
                          />
                          <label
                            class="custom-control-label w-100 label"
                            data-testid="checkboxLabel"
                            for="tsQuery-machine-learning"
                          >
                            <div
                              class="d-flex align-items-baseline mw-100"
                            >
                              <span
                                class="d-inline-block text-truncate"
                              >
                                Machine learning
                              </span>
                            </div>
                          </label>
                        </div>
                        <div
                          class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                        >
                          <input
                            class="custom-control-input input"
                            data-testid="checkbox"
                            id="tsQuery-monitoring"
                            name="tsQuery"
                            type="checkbox"
                            value="monitoring"
                          />
                          <label
                            class="custom-control-label w-100 label"
                            data-testid="checkboxLabel"
                            for="tsQuery-monitoring"
                          >
                            <div
                              class="d-flex align-items-baseline mw-100"
                            >
                              <span
                                class="d-inline-block text-truncate"
                              >
                                Monitoring
                              </span>
                            </div>
                          </label>
                        </div>
                        <div
                          class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                        >
                          <input
                            class="custom-control-input input"
                            data-testid="checkbox"
                            id="tsQuery-networking"
                            name="tsQuery"
                            type="checkbox"
                            value="networking"
                          />
                          <label
                            class="custom-control-label w-100 label"
                            data-testid="checkboxLabel"
                            for="tsQuery-networking"
                          >
                            <div
                              class="d-flex align-items-baseline mw-100"
                            >
                              <span
                                class="d-inline-block text-truncate"
                              >
                                Networking
                              </span>
                            </div>
                          </label>
                        </div>
                        <div
                          class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                        >
                          <input
                            class="custom-control-input input"
                            data-testid="checkbox"
                            id="tsQuery-security"
                            name="tsQuery"
                            type="checkbox"
                            value="security"
                          />
                          <label
                            class="custom-control-label w-100 label"
                            data-testid="checkboxLabel"
                            for="tsQuery-security"
                          >
                            <div
                              class="d-flex align-items-baseline mw-100"
                            >
                              <span
                                class="d-inline-block text-truncate"
                              >
                                Security
                              </span>
                            </div>
                          </label>
                        </div>
                        <div
                          class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                        >
                          <input
                            class="custom-control-input input"
                            data-testid="checkbox"
                            id="tsQuery-storage"
                            name="tsQuery"
                            type="checkbox"
                            value="storage"
                          />
                          <label
                            class="custom-control-label w-100 label"
                            data-testid="checkboxLabel"
                            for="tsQuery-storage"
                          >
                            <div
                              class="d-flex align-items-baseline mw-100"
                            >
                              <span
                                class="d-inline-block text-truncate"
                              >
                                Storage
                              </span>
                            </div>
                          </label>
                        </div>
                        <div
                          class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                        >
                          <input
                            class="custom-control-input input"
                            data-testid="checkbox"
                            id="tsQuery-streaming-messaging"
                            name="tsQuery"
                            type="checkbox"
                            value="streaming-messaging"
                          />
                          <label
                            class="custom-control-label w-100 label"
                            data-testid="checkboxLabel"
                            for="tsQuery-streaming-messaging"
                          >
                            <div
                              class="d-flex align-items-baseline mw-100"
                            >
                              <span
                                class="d-inline-block text-truncate"
                              >
                                Streaming and Messaging
                              </span>
                            </div>
                          </label>
                        </div>
                        <div
                          class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                        >
                          <input
                            class="custom-control-input input"
                            data-testid="checkbox"
                            id="tsQuery-web-applications"
                            name="tsQuery"
                            type="checkbox"
                            value="web-applications"
                          />
                          <label
                            class="custom-control-label w-100 label"
                            data-testid="checkboxLabel"
                            for="tsQuery-web-applications"
                          >
                            <div
                              class="d-flex align-items-baseline mw-100"
                            >
                              <span
                                class="d-inline-block text-truncate"
                              >
                                Web applications
                              </span>
                            </div>
                          </label>
                        </div>
                      </div>
                    </div>
                    <div
                      class="facet mt-3 mt-sm-4 pt-1"
                      role="menuitem"
                    >
                      <div
                        class="mt-2 mb-1"
                        data-testid="smallTitle"
                      >
                        <small
                          class="card-title text-muted text-uppercase"
                        >
                          <span
                            class="text-secondary font-weight-bold"
                          >
                            Kind
                          </span>
                        </small>
                      </div>
                      <div
                        class="mt-3"
                      >
                        <div
                          class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                        >
                          <input
                            class="custom-control-input input"
                            data-testid="checkbox"
                            id="kind-0"
                            name="kind"
                            type="checkbox"
                            value="0"
                          />
                          <label
                            class="custom-control-label w-100 label"
                            data-testid="checkboxLabel"
                            for="kind-0"
                          >
                            <div
                              class="d-flex align-items-baseline mw-100"
                            >
                              <span
                                class="d-inline-block text-truncate"
                              >
                                Chart
                              </span>
                              <small
                                class="pl-1"
                              >
                                (7)
                              </small>
                            </div>
                          </label>
                        </div>
                      </div>
                    </div>
                    <div
                      class="facet mt-3 mt-sm-4 pt-1"
                      role="menuitem"
                    >
                      <div
                        class="mt-2 mb-1"
                        data-testid="smallTitle"
                      >
                        <small
                          class="card-title text-muted text-uppercase"
                        >
                          <span
                            class="text-secondary font-weight-bold"
                          >
                            Repository
                          </span>
                        </small>
                      </div>
                      <div
                        class="mt-3"
                      >
                        <div
                          class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                        >
                          <input
                            class="custom-control-input input"
                            data-testid="checkbox"
                            id="repo-stable"
                            name="repo"
                            type="checkbox"
                            value="stable"
                          />
                          <label
                            class="custom-control-label w-100 label"
                            data-testid="checkboxLabel"
                            for="repo-stable"
                          >
                            <div
                              class="d-flex align-items-baseline mw-100"
                            >
                              <span
                                class="d-inline-block text-truncate"
                              >
                                Stable
                              </span>
                              <small
                                class="pl-1"
                              >
                                (4)
                              </small>
                            </div>
                          </label>
                        </div>
                        <div
                          class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                        >
                          <input
                            class="custom-control-input input"
                            data-testid="checkbox"
                            id="repo-incubator"
                            name="repo"
                            type="checkbox"
                            value="incubator"
                          />
                          <label
                            class="custom-control-label w-100 label"
                            data-testid="checkboxLabel"
                            for="repo-incubator"
                          >
                            <div
                              class="d-flex align-items-baseline mw-100"
                            >
                              <span
                                class="d-inline-block text-truncate"
                              >
                                Incubator
                              </span>
                              <small
                                class="pl-1"
                              >
                                (2)
                              </small>
                            </div>
                          </label>
                        </div>
                      </div>
                    </div>
                    <div
                      class="mt-3 mt-sm-4 pt-1 facet"
                      role="menuitem"
                    >
                      <div
                        class="mt-2 mb-1"
                        data-testid="smallTitle"
                      >
                        <small
                          class="card-title text-muted text-uppercase"
                        >
                          <span
                            class="text-secondary font-weight-bold"
                          >
                            Others
                          </span>
                        </small>
                      </div>
                      <div
                        class="mt-3"
                      >
                        <div
                          class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                        >
                          <input
                            class="custom-control-input input"
                            data-testid="checkbox"
                            id="operators-operators"
                            name="operators"
                            type="checkbox"
                            value="operators"
                          />
                          <label
                            class="custom-control-label w-100 label"
                            data-testid="checkboxLabel"
                            for="operators-operators"
                          >
                            <div
                              class="d-flex align-items-baseline mw-100"
                            >
                              <span
                                class="d-inline-block text-truncate"
                              >
                                Only operators
                              </span>
                            </div>
                          </label>
                        </div>
                        <div
                          class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                        >
                          <input
                            class="custom-control-input input"
                            data-testid="checkbox"
                            id="deprecated-deprecated"
                            name="deprecated"
                            type="checkbox"
                            value="deprecated"
                          />
                          <label
                            class="custom-control-label w-100 label"
                            data-testid="checkboxLabel"
                            for="deprecated-deprecated"
                          >
                            <div
                              class="d-flex align-items-baseline mw-100"
                            >
                              <span
                                class="d-inline-block text-truncate"
                              >
                                Include deprecated
                              </span>
                            </div>
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="mt-auto p-4"
              >
                <div
                  class="d-flex align-items-center justify-content-between"
                >
                  <div
                    class="d-flex align-items-center"
                  >
                    <svg
                      class="text-secondary resetBtnDecorator"
                      fill="currentColor"
                      height="1em"
                      stroke="currentColor"
                      stroke-width="0"
                      viewBox="0 0 512 512"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M256 90c44.3 0 86 17.3 117.4 48.6C404.7 170 422 211.7 422 256s-17.3 86-48.6 117.4C342 404.7 300.3 422 256 422s-86-17.3-117.4-48.6C107.3 342 90 300.3 90 256s17.3-86 48.6-117.4C170 107.3 211.7 90 256 90m0-42C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z"
                      />
                      <path
                        d="M360 330.9L330.9 360 256 285.1 181.1 360 152 330.9l74.9-74.9-74.9-74.9 29.1-29.1 74.9 74.9 74.9-74.9 29.1 29.1-74.9 74.9z"
                      />
                    </svg>
                    <button
                      class="btn btn-link btn-sm p-0 pl-1 text-secondary"
                    >
                      Reset
                    </button>
                  </div>
                  <button
                    class="ml-auto btn btn-sm btn-secondary"
                    data-testid="closeSidebarFooterBtn"
                    type="button"
                  >
                    See 7 results
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="text-truncate"
          data-testid="resultsText"
        >
          <span
            class="pr-1"
          >
            1 - 7 of 
          </span>
          7
          <span
            class="pl-1"
          >
             results 
          </span>
          <span
            class="d-none d-sm-inline pl-1"
          >
            for "
            <span
              class="font-weight-bold"
            >
              test
            </span>
            "
          </span>
        </div>
      </div>
      <div
        class="ml-3"
      >
        <div
          class="form-inline flex-nowrap align-items-center"
        >
          <label
            class="mr-2 mb-0"
          >
            Show:
          </label>
          <select
            aria-label="pagination-limit"
            class="custom-select custom-select-sm select"
          >
            <option
              value="15"
            >
              15
            </option>
            <option
              value="25"
            >
              25
            </option>
            <option
              value="50"
            >
              50
            </option>
            ;
          </select>
        </div>
      </div>
    </div>
  </nav>
  <div
    class="d-flex position-relative pt-3 pb-3 flex-grow-1"
  >
    <main
      class="container d-flex flex-row justify-content-between"
      role="main"
    >
      <nav
        class="d-none d-md-block sidebar"
      >
        <div
          class="mr-5"
        >
          <div
            class="filters pt-2 mt-3 mb-5"
          >
            <div
              class="d-flex flex-row align-items-center justify-content-between pb-2 mb-4 border-bottom"
            >
              <div
                class="h6 text-uppercase mb-0 title"
              >
                Filters
              </div>
            </div>
            <div
              class="mt-3 mt-sm-4 pt-1"
              role="menuitem"
            >
              <div
                class="mt-2 mb-1"
                data-testid="smallTitle"
              >
                <small
                  class="card-title text-muted text-uppercase"
                >
                  <span
                    class="text-secondary font-weight-bold"
                  >
                    Category
                  </span>
                </small>
              </div>
              <div
                class="mt-3"
              >
                <div
                  class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                >
                  <input
                    class="custom-control-input input"
                    data-testid="checkbox"
                    id="tsQuery-database"
                    name="tsQuery"
                    type="checkbox"
                    value="database"
                  />
                  <label
                    class="custom-control-label w-100 label"
                    data-testid="checkboxLabel"
                    for="tsQuery-database"
                  >
                    <div
                      class="d-flex align-items-baseline mw-100"
                    >
                      <span
                        class="d-inline-block text-truncate"
                      >
                        Database
                      </span>
                    </div>
                  </label>
                </div>
                <div
                  class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                >
                  <input
                    class="custom-control-input input"
                    data-testid="checkbox"
                    id="tsQuery-integration-and-delivery"
                    name="tsQuery"
                    type="checkbox"
                    value="integration-and-delivery"
                  />
                  <label
                    class="custom-control-label w-100 label"
                    data-testid="checkboxLabel"
                    for="tsQuery-integration-and-delivery"
                  >
                    <div
                      class="d-flex align-items-baseline mw-100"
                    >
                      <span
                        class="d-inline-block text-truncate"
                      >
                        Integration and Delivery
                      </span>
                    </div>
                  </label>
                </div>
                <div
                  class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                >
                  <input
                    class="custom-control-input input"
                    data-testid="checkbox"
                    id="tsQuery-logging-and-tracing"
                    name="tsQuery"
                    type="checkbox"
                    value="logging-and-tracing"
                  />
                  <label
                    class="custom-control-label w-100 label"
                    data-testid="checkboxLabel"
                    for="tsQuery-logging-and-tracing"
                  >
                    <div
                      class="d-flex align-items-baseline mw-100"
                    >
                      <span
                        class="d-inline-block text-truncate"
                      >
                        Logging and Tracing
                      </span>
                    </div>
                  </label>
                </div>
                <div
                  class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                >
                  <input
                    class="custom-control-input input"
                    data-testid="checkbox"
                    id="tsQuery-machine-learning"
                    name="tsQuery"
                    type="checkbox"
                    value="machine-learning"
                  />
                  <label
                    class="custom-control-label w-100 label"
                    data-testid="checkboxLabel"
                    for="tsQuery-machine-learning"
                  >
                    <div
                      class="d-flex align-items-baseline mw-100"
                    >
                      <span
                        class="d-inline-block text-truncate"
                      >
                        Machine learning
                      </span>
                    </div>
                  </label>
                </div>
                <div
                  class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                >
                  <input
                    class="custom-control-input input"
                    data-testid="checkbox"
                    id="tsQuery-monitoring"
                    name="tsQuery"
                    type="checkbox"
                    value="monitoring"
                  />
                  <label
                    class="custom-control-label w-100 label"
                    data-testid="checkboxLabel"
                    for="tsQuery-monitoring"
                  >
                    <div
                      class="d-flex align-items-baseline mw-100"
                    >
                      <span
                        class="d-inline-block text-truncate"
                      >
                        Monitoring
                      </span>
                    </div>
                  </label>
                </div>
                <div
                  class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                >
                  <input
                    class="custom-control-input input"
                    data-testid="checkbox"
                    id="tsQuery-networking"
                    name="tsQuery"
                    type="checkbox"
                    value="networking"
                  />
                  <label
                    class="custom-control-label w-100 label"
                    data-testid="checkboxLabel"
                    for="tsQuery-networking"
                  >
                    <div
                      class="d-flex align-items-baseline mw-100"
                    >
                      <span
                        class="d-inline-block text-truncate"
                      >
                        Networking
                      </span>
                    </div>
                  </label>
                </div>
                <div
                  class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                >
                  <input
                    class="custom-control-input input"
                    data-testid="checkbox"
                    id="tsQuery-security"
                    name="tsQuery"
                    type="checkbox"
                    value="security"
                  />
                  <label
                    class="custom-control-label w-100 label"
                    data-testid="checkboxLabel"
                    for="tsQuery-security"
                  >
                    <div
                      class="d-flex align-items-baseline mw-100"
                    >
                      <span
                        class="d-inline-block text-truncate"
                      >
                        Security
                      </span>
                    </div>
                  </label>
                </div>
                <div
                  class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                >
                  <input
                    class="custom-control-input input"
                    data-testid="checkbox"
                    id="tsQuery-storage"
                    name="tsQuery"
                    type="checkbox"
                    value="storage"
                  />
                  <label
                    class="custom-control-label w-100 label"
                    data-testid="checkboxLabel"
                    for="tsQuery-storage"
                  >
                    <div
                      class="d-flex align-items-baseline mw-100"
                    >
                      <span
                        class="d-inline-block text-truncate"
                      >
                        Storage
                      </span>
                    </div>
                  </label>
                </div>
                <div
                  class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                >
                  <input
                    class="custom-control-input input"
                    data-testid="checkbox"
                    id="tsQuery-streaming-messaging"
                    name="tsQuery"
                    type="checkbox"
                    value="streaming-messaging"
                  />
                  <label
                    class="custom-control-label w-100 label"
                    data-testid="checkboxLabel"
                    for="tsQuery-streaming-messaging"
                  >
                    <div
                      class="d-flex align-items-baseline mw-100"
                    >
                      <span
                        class="d-inline-block text-truncate"
                      >
                        Streaming and Messaging
                      </span>
                    </div>
                  </label>
                </div>
                <div
                  class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                >
                  <input
                    class="custom-control-input input"
                    data-testid="checkbox"
                    id="tsQuery-web-applications"
                    name="tsQuery"
                    type="checkbox"
                    value="web-applications"
                  />
                  <label
                    class="custom-control-label w-100 label"
                    data-testid="checkboxLabel"
                    for="tsQuery-web-applications"
                  >
                    <div
                      class="d-flex align-items-baseline mw-100"
                    >
                      <span
                        class="d-inline-block text-truncate"
                      >
                        Web applications
                      </span>
                    </div>
                  </label>
                </div>
              </div>
            </div>
            <div
              class="facet mt-3 mt-sm-4 pt-1"
              role="menuitem"
            >
              <div
                class="mt-2 mb-1"
                data-testid="smallTitle"
              >
                <small
                  class="card-title text-muted text-uppercase"
                >
                  <span
                    class="text-secondary font-weight-bold"
                  >
                    Kind
                  </span>
                </small>
              </div>
              <div
                class="mt-3"
              >
                <div
                  class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                >
                  <input
                    class="custom-control-input input"
                    data-testid="checkbox"
                    id="kind-0"
                    name="kind"
                    type="checkbox"
                    value="0"
                  />
                  <label
                    class="custom-control-label w-100 label"
                    data-testid="checkboxLabel"
                    for="kind-0"
                  >
                    <div
                      class="d-flex align-items-baseline mw-100"
                    >
                      <span
                        class="d-inline-block text-truncate"
                      >
                        Chart
                      </span>
                      <small
                        class="pl-1"
                      >
                        (7)
                      </small>
                    </div>
                  </label>
                </div>
              </div>
            </div>
            <div
              class="facet mt-3 mt-sm-4 pt-1"
              role="menuitem"
            >
              <div
                class="mt-2 mb-1"
                data-testid="smallTitle"
              >
                <small
                  class="card-title text-muted text-uppercase"
                >
                  <span
                    class="text-secondary font-weight-bold"
                  >
                    Repository
                  </span>
                </small>
              </div>
              <div
                class="mt-3"
              >
                <div
                  class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                >
                  <input
                    class="custom-control-input input"
                    data-testid="checkbox"
                    id="repo-stable"
                    name="repo"
                    type="checkbox"
                    value="stable"
                  />
                  <label
                    class="custom-control-label w-100 label"
                    data-testid="checkboxLabel"
                    for="repo-stable"
                  >
                    <div
                      class="d-flex align-items-baseline mw-100"
                    >
                      <span
                        class="d-inline-block text-truncate"
                      >
                        Stable
                      </span>
                      <small
                        class="pl-1"
                      >
                        (4)
                      </small>
                    </div>
                  </label>
                </div>
                <div
                  class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                >
                  <input
                    class="custom-control-input input"
                    data-testid="checkbox"
                    id="repo-incubator"
                    name="repo"
                    type="checkbox"
                    value="incubator"
                  />
                  <label
                    class="custom-control-label w-100 label"
                    data-testid="checkboxLabel"
                    for="repo-incubator"
                  >
                    <div
                      class="d-flex align-items-baseline mw-100"
                    >
                      <span
                        class="d-inline-block text-truncate"
                      >
                        Incubator
                      </span>
                      <small
                        class="pl-1"
                      >
                        (2)
                      </small>
                    </div>
                  </label>
                </div>
              </div>
            </div>
            <div
              class="mt-3 mt-sm-4 pt-1 facet"
              role="menuitem"
            >
              <div
                class="mt-2 mb-1"
                data-testid="smallTitle"
              >
                <small
                  class="card-title text-muted text-uppercase"
                >
                  <span
                    class="text-secondary font-weight-bold"
                  >
                    Others
                  </span>
                </small>
              </div>
              <div
                class="mt-3"
              >
                <div
                  class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                >
                  <input
                    class="custom-control-input input"
                    data-testid="checkbox"
                    id="operators-operators"
                    name="operators"
                    type="checkbox"
                    value="operators"
                  />
                  <label
                    class="custom-control-label w-100 label"
                    data-testid="checkboxLabel"
                    for="operators-operators"
                  >
                    <div
                      class="d-flex align-items-baseline mw-100"
                    >
                      <span
                        class="d-inline-block text-truncate"
                      >
                        Only operators
                      </span>
                    </div>
                  </label>
                </div>
                <div
                  class="custom-control custom-checkbox mr-sm-2 mb-2 checkbox"
                >
                  <input
                    class="custom-control-input input"
                    data-testid="checkbox"
                    id="deprecated-deprecated"
                    name="deprecated"
                    type="checkbox"
                    value="deprecated"
                  />
                  <label
                    class="custom-control-label w-100 label"
                    data-testid="checkboxLabel"
                    for="deprecated-deprecated"
                  >
                    <div
                      class="d-flex align-items-baseline mw-100"
                    >
                      <span
                        class="d-inline-block text-truncate"
                      >
                        Include deprecated
                      </span>
                    </div>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
      <div
        class="flex-grow-1 mt-3 list"
      >
        <div
          class="row no-gutters mb-2"
        >
          <div
            class="col-12 py-sm-3 py-2"
            role="listitem"
          >
            <div
              class="card h-100 card"
            >
              <a
                class="text-decoration-none link"
                data-testid="link"
                href="/packages/helm/stable/undefined"
              >
                <div
                  class="card-body d-flex flex-column body"
                >
                  <div
                    class="d-flex align-items-start justify-content-between flex-grow-1 mw-100"
                  >
                    <div
                      class="d-flex align-items-strecht flex-grow-1 h-100 truncateWrapper"
                    >
                      <div
                        class="d-flex align-items-center justify-content-center overflow-hidden rounded-circle p-1 imageWrapper"
                      >
                        <img
                          alt="Logo centrifugo"
                          class="image"
                          src="/image/cc7ac35f-abd3-4594-a375-aebfccbfe11e"
                          srcset="/image/cc7ac35f-abd3-4594-a375-aebfccbfe11e@1x 1x, /image/cc7ac35f-abd3-4594-a375-aebfccbfe11e@2x 2x, /image/cc7ac35f-abd3-4594-a375-aebfccbfe11e@3x 3x, /image/cc7ac35f-abd3-4594-a375-aebfccbfe11e@4x 4x"
                        />
                      </div>
                      <div
                        class="d-flex flex-column justify-content-between ml-3 my-1 my-md-0 flex-grow-1 truncateWrapper titleWrapper"
                      >
                        <div
                          class="text-truncate card-title mb-0"
                        >
                          <div
                            class="d-flex flex-row align-items-center"
                          >
                            <div
                              class="text-truncate title"
                            >
                              centrifugo
                            </div>
                            <div
                              class="d-none d-lg-inline-block ml-3"
                            />
                          </div>
                        </div>
                        <div
                          class="card-subtitle text-truncate align-items-baseline subtitle"
                        >
                          <div
                            class="d-inline-block d-md-none text-truncate w-100"
                          >
                            <div
                              class="position-absolute"
                            >
                              <div
                                class="dropdown-menu dropdown-menu-left dropdown"
                                data-testid="repoInfoDropdown"
                              >
                                <div
                                  class="content"
                                >
                                  <div
                                    class="d-flex flex-column"
                                  >
                                    <div
                                      class="d-flex flex-row align-items-center"
                                    >
                                      <small
                                        class="text-muted text-uppercase mr-1"
                                      >
                                        Repo: 
                                      </small>
                                      <img
                                        alt="Icon"
                                        class="mr-1 repoIconMini"
                                        src="/static/media/helm-chart.svg"
                                      />
                                      <div
                                        class="text-reset labelContent"
                                      >
                                        stable
                                      </div>
                                    </div>
                                    <div
                                      class="mt-2 d-flex flex-row align-items-baseline"
                                    >
                                      <small
                                        class="text-muted text-uppercase mr-1"
                                      >
                                        Url: 
                                      </small>
                                      <div
                                        class="text-reset urlContent labelContent"
                                      >
                                        url
                                        <div
                                          class="position-relative d-inline-block"
                                        >
                                          <button
                                            class="btn btn-sm miniBtn"
                                            data-testid="ctcBtn"
                                            type="button"
                                          >
                                            <div
                                              class="d-flex flex-row align-items-center"
                                            >
                                              <svg
                                                fill="none"
                                                height="1em"
                                                stroke="currentColor"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                                viewBox="0 0 24 24"
                                                width="1em"
                                                xmlns="http://www.w3.org/2000/svg"
                                              >
                                                <rect
                                                  height="13"
                                                  rx="2"
                                                  ry="2"
                                                  width="13"
                                                  x="9"
                                                  y="9"
                                                />
                                                <path
                                                  d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
                                                />
                                              </svg>
                                            </div>
                                          </button>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              class="d-flex flex-row aling-items-start text-truncate"
                            >
                              <div
                                class="d-flex flex-row align-items-start mr-1 text-muted text-uppercase"
                              >
                                <small
                                  class="mr-1"
                                >
                                  Repo:
                                </small>
                              </div>
                              <button
                                class="p-0 border-0 text-dark text-truncate link"
                                data-testid="repoLink"
                              >
                                <div
                                  class="text-truncate"
                                >
                                  stable
                                </div>
                              </button>
                            </div>
                          </div>
                          <div
                            class="d-none d-md-flex flex-row align-items-start w-100 wrapper"
                          >
                            <div
                              class="d-flex flex-row align-items-baseline text-truncate mx50"
                            >
                              <span
                                class="text-muted text-uppercase mr-1"
                              >
                                User: 
                              </span>
                              <button
                                class="p-0 border-0 text-truncate text-dark mw-100 link"
                                data-testid="userLink"
                              >
                                <div
                                  class="text-truncate"
                                >
                                  user
                                </div>
                              </button>
                            </div>
                            <div
                              class="ml-3 d-flex flex-row align-items-baseline mx50"
                            >
                              <div
                                class="position-absolute"
                              >
                                <div
                                  class="dropdown-menu dropdown-menu-left dropdown"
                                  data-testid="repoInfoDropdown"
                                >
                                  <div
                                    class="content"
                                  >
                                    <div
                                      class="d-flex flex-column"
                                    >
                                      <div
                                        class="d-flex flex-row align-items-center"
                                      >
                                        <small
                                          class="text-muted text-uppercase mr-1"
                                        >
                                          Repo: 
                                        </small>
                                        <img
                                          alt="Icon"
                                          class="mr-1 repoIconMini"
                                          src="/static/media/helm-chart.svg"
                                        />
                                        <div
                                          class="text-reset labelContent"
                                        >
                                          stable
                                        </div>
                                      </div>
                                      <div
                                        class="mt-2 d-flex flex-row align-items-baseline"
                                      >
                                        <small
                                          class="text-muted text-uppercase mr-1"
                                        >
                                          Url: 
                                        </small>
                                        <div
                                          class="text-reset urlContent labelContent"
                                        >
                                          url
                                          <div
                                            class="position-relative d-inline-block"
                                          >
                                            <button
                                              class="btn btn-sm miniBtn"
                                              data-testid="ctcBtn"
                                              type="button"
                                            >
                                              <div
                                                class="d-flex flex-row align-items-center"
                                              >
                                                <svg
                                                  fill="none"
                                                  height="1em"
                                                  stroke="currentColor"
                                                  stroke-linecap="round"
                                                  stroke-linejoin="round"
                                                  stroke-width="2"
                                                  viewBox="0 0 24 24"
                                                  width="1em"
                                                  xmlns="http://www.w3.org/2000/svg"
                                                >
                                                  <rect
                                                    height="13"
                                                    rx="2"
                                                    ry="2"
                                                    width="13"
                                                    x="9"
                                                    y="9"
                                                  />
                                                  <path
                                                    d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
                                                  />
                                                </svg>
                                              </div>
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div
                                class="d-flex flex-row aling-items-start text-truncate"
                              >
                                <div
                                  class="d-flex flex-row align-items-start mr-1 text-muted text-uppercase"
                                >
                                  <small
                                    class="mr-1"
                                  >
                                    Repo:
                                  </small>
                                </div>
                                <button
                                  class="p-0 border-0 text-dark text-truncate link"
                                  data-testid="repoLink"
                                >
                                  <div
                                    class="text-truncate"
                                  >
                                    stable
                                  </div>
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="d-none d-md-block card-subtitle text-truncate align-items-center subtitle"
                        >
                          <div
                            class="text-truncate mb-1"
                          >
                            <span
                              class="text-muted text-uppercase mr-1"
                            >
                              Version: 
                            </span>
                            -
                            <span
                              class="text-muted text-uppercase mr-1 ml-3"
                            >
                              App Version: 
                            </span>
                            2.1.0
                          </div>
                        </div>
                      </div>
                      <div
                        class="d-none d-lg-flex flex-column align-items-end mb-auto ml-3"
                      >
                        <div
                          class="mb-2"
                        >
                          <small
                            class="text-muted text-nowrap date"
                          >
                            Updated Invalid date
                          </small>
                        </div>
                        <div
                          class="align-self-start d-flex align-items-center text-uppercase ml-auto kind"
                        >
                          <img
                            alt="Icon"
                            class="icon"
                            src="/static/media/helm-chart.svg"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="mt-3 overflow-hidden description lineClamp"
                  >
                    Centrifugo is a real-time messaging server.
                  </div>
                  <div
                    class="d-flex d-lg-none flex-row justify-content-between align-items-center mt-3 mt-lg-0"
                  >
                    <small
                      class="text-muted text-nowrap date"
                    >
                      Updated Invalid date
                    </small>
                    <div
                      class="align-self-start d-flex align-items-center text-uppercase ml-auto kind"
                    >
                      <img
                        alt="Icon"
                        class="icon"
                        src="/static/media/helm-chart.svg"
                      />
                    </div>
                  </div>
                  <div
                    class="d-inline d-lg-none mt-2 mt-sm-0"
                  />
                </div>
              </a>
            </div>
          </div>
          <div
            class="col-12 py-sm-3 py-2"
            role="listitem"
          >
            <div
              class="card h-100 card"
            >
              <a
                class="text-decoration-none link"
                data-testid="link"
                href="/packages/helm/incubator/undefined"
              >
                <div
                  class="card-body d-flex flex-column body"
                >
                  <div
                    class="d-flex align-items-start justify-content-between flex-grow-1 mw-100"
                  >
                    <div
                      class="d-flex align-items-strecht flex-grow-1 h-100 truncateWrapper"
                    >
                      <div
                        class="d-flex align-items-center justify-content-center overflow-hidden rounded-circle p-1 imageWrapper"
                      >
                        <img
                          alt="Logo kafka"
                          class="image"
                          src="/static/media/package_placeholder.svg"
                        />
                      </div>
                      <div
                        class="d-flex flex-column justify-content-between ml-3 my-1 my-md-0 flex-grow-1 truncateWrapper titleWrapper"
                      >
                        <div
                          class="text-truncate card-title mb-0"
                        >
                          <div
                            class="d-flex flex-row align-items-center"
                          >
                            <div
                              class="text-truncate title"
                            >
                              kafka
                            </div>
                            <div
                              class="d-none d-lg-inline-block ml-3"
                            />
                          </div>
                        </div>
                        <div
                          class="card-subtitle text-truncate align-items-baseline subtitle"
                        >
                          <div
                            class="d-inline-block d-md-none text-truncate w-100"
                          >
                            <div
                              class="position-absolute"
                            >
                              <div
                                class="dropdown-menu dropdown-menu-left dropdown"
                                data-testid="repoInfoDropdown"
                              >
                                <div
                                  class="content"
                                >
                                  <div
                                    class="d-flex flex-column"
                                  >
                                    <div
                                      class="d-flex flex-row align-items-center"
                                    >
                                      <small
                                        class="text-muted text-uppercase mr-1"
                                      >
                                        Repo: 
                                      </small>
                                      <img
                                        alt="Icon"
                                        class="mr-1 repoIconMini"
                                        src="/static/media/helm-chart.svg"
                                      />
                                      <div
                                        class="text-reset labelContent"
                                      >
                                        incubator
                                      </div>
                                    </div>
                                    <div
                                      class="mt-2 d-flex flex-row align-items-baseline"
                                    >
                                      <small
                                        class="text-muted text-uppercase mr-1"
                                      >
                                        Url: 
                                      </small>
                                      <div
                                        class="text-reset urlContent labelContent"
                                      >
                                        url
                                        <div
                                          class="position-relative d-inline-block"
                                        >
                                          <button
                                            class="btn btn-sm miniBtn"
                                            data-testid="ctcBtn"
                                            type="button"
                                          >
                                            <div
                                              class="d-flex flex-row align-items-center"
                                            >
                                              <svg
                                                fill="none"
                                                height="1em"
                                                stroke="currentColor"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                                viewBox="0 0 24 24"
                                                width="1em"
                                                xmlns="http://www.w3.org/2000/svg"
                                              >
                                                <rect
                                                  height="13"
                                                  rx="2"
                                                  ry="2"
                                                  width="13"
                                                  x="9"
                                                  y="9"
                                                />
                                                <path
                                                  d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
                                                />
                                              </svg>
                                            </div>
                                          </button>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              class="d-flex flex-row aling-items-start text-truncate"
                            >
                              <div
                                class="d-flex flex-row align-items-start mr-1 text-muted text-uppercase"
                              >
                                <small
                                  class="mr-1"
                                >
                                  Repo:
                                </small>
                              </div>
                              <button
                                class="p-0 border-0 text-dark text-truncate link"
                                data-testid="repoLink"
                              >
                                <div
                                  class="text-truncate"
                                >
                                  incubator
                                </div>
                              </button>
                            </div>
                          </div>
                          <div
                            class="d-none d-md-flex flex-row align-items-start w-100 wrapper"
                          >
                            <div
                              class="d-flex flex-row align-items-baseline text-truncate mx50"
                            >
                              <span
                                class="text-muted text-uppercase mr-1"
                              >
                                User: 
                              </span>
                              <button
                                class="p-0 border-0 text-truncate text-dark mw-100 link"
                                data-testid="userLink"
                              >
                                <div
                                  class="text-truncate"
                                >
                                  user
                                </div>
                              </button>
                            </div>
                            <div
                              class="ml-3 d-flex flex-row align-items-baseline mx50"
                            >
                              <div
                                class="position-absolute"
                              >
                                <div
                                  class="dropdown-menu dropdown-menu-left dropdown"
                                  data-testid="repoInfoDropdown"
                                >
                                  <div
                                    class="content"
                                  >
                                    <div
                                      class="d-flex flex-column"
                                    >
                                      <div
                                        class="d-flex flex-row align-items-center"
                                      >
                                        <small
                                          class="text-muted text-uppercase mr-1"
                                        >
                                          Repo: 
                                        </small>
                                        <img
                                          alt="Icon"
                                          class="mr-1 repoIconMini"
                                          src="/static/media/helm-chart.svg"
                                        />
                                        <div
                                          class="text-reset labelContent"
                                        >
                                          incubator
                                        </div>
                                      </div>
                                      <div
                                        class="mt-2 d-flex flex-row align-items-baseline"
                                      >
                                        <small
                                          class="text-muted text-uppercase mr-1"
                                        >
                                          Url: 
                                        </small>
                                        <div
                                          class="text-reset urlContent labelContent"
                                        >
                                          url
                                          <div
                                            class="position-relative d-inline-block"
                                          >
                                            <button
                                              class="btn btn-sm miniBtn"
                                              data-testid="ctcBtn"
                                              type="button"
                                            >
                                              <div
                                                class="d-flex flex-row align-items-center"
                                              >
                                                <svg
                                                  fill="none"
                                                  height="1em"
                                                  stroke="currentColor"
                                                  stroke-linecap="round"
                                                  stroke-linejoin="round"
                                                  stroke-width="2"
                                                  viewBox="0 0 24 24"
                                                  width="1em"
                                                  xmlns="http://www.w3.org/2000/svg"
                                                >
                                                  <rect
                                                    height="13"
                                                    rx="2"
                                                    ry="2"
                                                    width="13"
                                                    x="9"
                                                    y="9"
                                                  />
                                                  <path
                                                    d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
                                                  />
                                                </svg>
                                              </div>
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div
                                class="d-flex flex-row aling-items-start text-truncate"
                              >
                                <div
                                  class="d-flex flex-row align-items-start mr-1 text-muted text-uppercase"
                                >
                                  <small
                                    class="mr-1"
                                  >
                                    Repo:
                                  </small>
                                </div>
                                <button
                                  class="p-0 border-0 text-dark text-truncate link"
                                  data-testid="repoLink"
                                >
                                  <div
                                    class="text-truncate"
                                  >
                                    incubator
                                  </div>
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="d-none d-md-block card-subtitle text-truncate align-items-center subtitle"
                        >
                          <div
                            class="text-truncate mb-1"
                          >
                            <span
                              class="text-muted text-uppercase mr-1"
                            >
                              Version: 
                            </span>
                            -
                            <span
                              class="text-muted text-uppercase mr-1 ml-3"
                            >
                              App Version: 
                            </span>
                            5.0.1
                          </div>
                        </div>
                      </div>
                      <div
                        class="d-none d-lg-flex flex-column align-items-end mb-auto ml-3"
                      >
                        <div
                          class="mb-2"
                        >
                          <small
                            class="text-muted text-nowrap date"
                          >
                            Updated Invalid date
                          </small>
                        </div>
                        <div
                          class="align-self-start d-flex align-items-center text-uppercase ml-auto kind"
                        >
                          <img
                            alt="Icon"
                            class="icon"
                            src="/static/media/helm-chart.svg"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="mt-3 overflow-hidden description lineClamp"
                  >
                    Apache Kafka is publish-subscribe messaging rethought as a distributed commit log.
                  </div>
                  <div
                    class="d-flex d-lg-none flex-row justify-content-between align-items-center mt-3 mt-lg-0"
                  >
                    <small
                      class="text-muted text-nowrap date"
                    >
                      Updated Invalid date
                    </small>
                    <div
                      class="align-self-start d-flex align-items-center text-uppercase ml-auto kind"
                    >
                      <img
                        alt="Icon"
                        class="icon"
                        src="/static/media/helm-chart.svg"
                      />
                    </div>
                  </div>
                  <div
                    class="d-inline d-lg-none mt-2 mt-sm-0"
                  />
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</DocumentFragment>
`;
