SearchBarPluginFilters.test.tsx.snap

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

exports[`SearchBarPluginFilters should render 1`] = `
<DocumentFragment>
  <div
    class="relative z-20 flex items-center text-theme-primary-400"
    data-testid="SearchBarPluginFilters"
  >
    <div
      class="relative"
      data-testid="dropdown__toggle"
    >
      <div
        class="mr-8 cursor-pointer"
      >
        <div
          class="sc-AxirZ eEbZjj"
          height="20"
          width="20"
        >
          <svg>
            filters.svg
          </svg>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`SearchBarPluginFilters should render categories 1`] = `
<DocumentFragment>
  <div
    class="relative z-20 flex items-center text-theme-primary-400"
    data-testid="SearchBarPluginFilters"
  >
    <div
      class="relative"
    >
      <span>
        <div
          class="mr-8 cursor-pointer"
        >
          <div
            class="sc-AxirZ eEbZjj"
            height="20"
            width="20"
          >
            <svg>
              filters.svg
            </svg>
          </div>
        </div>
      </span>
      <div
        class="sc-AxiKw hjNPVU right-0 undefined"
      >
        <div
          data-testid="dropdown__content"
        >
          <ul
            data-testid="dropdown__options"
          />
        </div>
        <div>
          <div
            class="w-64 px-6 py-4"
          >
            <label
              class="flex items-center block px-2 pb-1 cursor-pointer space-x-3 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
            >
              <span>
                <input
                  class="sc-AxjAm fwkVBO rounded-lg"
                  color="success"
                  data-testid="SearchBarPluginFilters-claimed"
                  name="claim"
                  type="checkbox"
                />
              </span>
              <span
                class="mt-1 ml-1"
              >
                Claimed
              </span>
            </label>
            <div
              class="mt-3 mb-4 border-b border-dashed border-theme-neutral-200"
            />
            <div
              class="mb-1 font-semibold text-theme-neutral-dark"
            >
              Category
            </div>
            <fieldset>
              <label
                class="flex items-center block px-2 pb-1 mb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO"
                    color="success"
                    data-testid="SearchBarPluginFilters-category-game"
                    name="category"
                    type="checkbox"
                  />
                </span>
                <span
                  class="mt-1"
                >
                  Game
                </span>
              </label>
            </fieldset>
            <div
              class="my-4 border-b border-dashed border-theme-neutral-200"
            />
            <div
              class="font-semibold text-theme-neutral-dark"
            >
              Rating
            </div>
            <fieldset>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-5"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-4"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-3"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-2"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-1"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
            </fieldset>
            <div
              class="my-4 border-b border-dashed border-theme-neutral-200"
            />
            <div
              class="flex items-center pl-2 cursor-pointer text-theme-primary-500 hover:text-theme-primary-600 hover:underline"
              data-testid="SearchBarPluginFilters-reset"
            >
              <div
                class="sc-AxirZ iQaTP"
                height="1em"
                width="1em"
              >
                <svg>
                  reset.svg
                </svg>
              </div>
              <span
                class="pl-2"
              >
                Reset Filters
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`SearchBarPluginFilters should render ratings 1`] = `
<DocumentFragment>
  <div
    class="relative z-20 flex items-center text-theme-primary-400"
    data-testid="SearchBarPluginFilters"
  >
    <div
      class="relative"
    >
      <span>
        <div
          class="mr-8 cursor-pointer"
        >
          <div
            class="sc-AxirZ eEbZjj"
            height="20"
            width="20"
          >
            <svg>
              filters.svg
            </svg>
          </div>
        </div>
      </span>
      <div
        class="sc-AxiKw hjNPVU right-0 undefined"
      >
        <div
          data-testid="dropdown__content"
        >
          <ul
            data-testid="dropdown__options"
          />
        </div>
        <div>
          <div
            class="w-64 px-6 py-4"
          >
            <label
              class="flex items-center block px-2 pb-1 cursor-pointer space-x-3 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
            >
              <span>
                <input
                  class="sc-AxjAm fwkVBO rounded-lg"
                  color="success"
                  data-testid="SearchBarPluginFilters-claimed"
                  name="claim"
                  type="checkbox"
                />
              </span>
              <span
                class="mt-1 ml-1"
              >
                Claimed
              </span>
            </label>
            <div
              class="mt-3 mb-4 border-b border-dashed border-theme-neutral-200"
            />
            <div
              class="mb-1 font-semibold text-theme-neutral-dark"
            >
              Category
            </div>
            <fieldset>
              <label
                class="flex items-center block px-2 pb-1 mb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO"
                    color="success"
                    data-testid="SearchBarPluginFilters-category-game"
                    name="category"
                    type="checkbox"
                  />
                </span>
                <span
                  class="mt-1"
                >
                  Game
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 mb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO"
                    color="success"
                    data-testid="SearchBarPluginFilters-category-utility"
                    name="category"
                    type="checkbox"
                  />
                </span>
                <span
                  class="mt-1"
                >
                  Utility
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 mb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO"
                    color="success"
                    data-testid="SearchBarPluginFilters-category-themes"
                    name="category"
                    type="checkbox"
                  />
                </span>
                <span
                  class="mt-1"
                >
                  Themes
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 mb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO"
                    color="success"
                    data-testid="SearchBarPluginFilters-category-other"
                    name="category"
                    type="checkbox"
                  />
                </span>
                <span
                  class="mt-1"
                >
                  Other
                </span>
              </label>
            </fieldset>
            <div
              class="my-4 border-b border-dashed border-theme-neutral-200"
            />
            <div
              class="font-semibold text-theme-neutral-dark"
            >
              Rating
            </div>
            <fieldset>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-5"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-4"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-3"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-2"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-1"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
            </fieldset>
            <div
              class="my-4 border-b border-dashed border-theme-neutral-200"
            />
            <div
              class="flex items-center pl-2 cursor-pointer text-theme-primary-500 hover:text-theme-primary-600 hover:underline"
              data-testid="SearchBarPluginFilters-reset"
            >
              <div
                class="sc-AxirZ iQaTP"
                height="1em"
                width="1em"
              >
                <svg>
                  reset.svg
                </svg>
              </div>
              <span
                class="pl-2"
              >
                Reset Filters
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`SearchBarPluginFilters should render with null initialValues 1`] = `
<DocumentFragment>
  <div
    class="relative z-20 flex items-center text-theme-primary-400"
    data-testid="SearchBarPluginFilters"
  >
    <div
      class="relative"
    >
      <span>
        <div
          class="mr-8 cursor-pointer"
        >
          <div
            class="sc-AxirZ eEbZjj"
            height="20"
            width="20"
          >
            <svg>
              filters.svg
            </svg>
          </div>
        </div>
      </span>
      <div
        class="sc-AxiKw hjNPVU right-0 undefined"
      >
        <div
          data-testid="dropdown__content"
        >
          <ul
            data-testid="dropdown__options"
          />
        </div>
        <div>
          <div
            class="w-64 px-6 py-4"
          >
            <label
              class="flex items-center block px-2 pb-1 cursor-pointer space-x-3 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
            >
              <span>
                <input
                  checked=""
                  class="sc-AxjAm fwkVBO rounded-lg"
                  color="success"
                  data-testid="SearchBarPluginFilters-claimed"
                  name="claim"
                  type="checkbox"
                />
              </span>
              <span
                class="mt-1 ml-1"
              >
                Claimed
              </span>
            </label>
            <div
              class="mt-3 mb-4 border-b border-dashed border-theme-neutral-200"
            />
            <div
              class="mb-1 font-semibold text-theme-neutral-dark"
            >
              Category
            </div>
            <fieldset>
              <label
                class="flex items-center block px-2 pb-1 mb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO"
                    color="success"
                    data-testid="SearchBarPluginFilters-category-utility"
                    name="category"
                    type="checkbox"
                  />
                </span>
                <span
                  class="mt-1"
                >
                  Utility
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 mb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO"
                    color="success"
                    data-testid="SearchBarPluginFilters-category-game"
                    name="category"
                    type="checkbox"
                  />
                </span>
                <span
                  class="mt-1"
                >
                  Game
                </span>
              </label>
            </fieldset>
            <div
              class="my-4 border-b border-dashed border-theme-neutral-200"
            />
            <div
              class="font-semibold text-theme-neutral-dark"
            >
              Rating
            </div>
            <fieldset>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-4"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-3"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-2"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-1"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
            </fieldset>
            <div
              class="my-4 border-b border-dashed border-theme-neutral-200"
            />
            <div
              class="flex items-center pl-2 cursor-pointer text-theme-primary-500 hover:text-theme-primary-600 hover:underline"
              data-testid="SearchBarPluginFilters-reset"
            >
              <div
                class="sc-AxirZ iQaTP"
                height="1em"
                width="1em"
              >
                <svg>
                  reset.svg
                </svg>
              </div>
              <span
                class="pl-2"
              >
                Reset Filters
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`SearchBarPluginFilters should render with selected values 1`] = `
<DocumentFragment>
  <div
    class="relative z-20 flex items-center text-theme-primary-400"
    data-testid="SearchBarPluginFilters"
  >
    <div
      class="relative"
    >
      <span>
        <div
          class="mr-8 cursor-pointer"
        >
          <div
            class="sc-AxirZ eEbZjj"
            height="20"
            width="20"
          >
            <svg>
              filters.svg
            </svg>
          </div>
        </div>
      </span>
      <div
        class="sc-AxiKw hjNPVU right-0 undefined"
      >
        <div
          data-testid="dropdown__content"
        >
          <ul
            data-testid="dropdown__options"
          />
        </div>
        <div>
          <div
            class="w-64 px-6 py-4"
          >
            <label
              class="flex items-center block px-2 pb-1 cursor-pointer space-x-3 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
            >
              <span>
                <input
                  checked=""
                  class="sc-AxjAm fwkVBO rounded-lg"
                  color="success"
                  data-testid="SearchBarPluginFilters-claimed"
                  name="claim"
                  type="checkbox"
                />
              </span>
              <span
                class="mt-1 ml-1"
              >
                Claimed
              </span>
            </label>
            <div
              class="mt-3 mb-4 border-b border-dashed border-theme-neutral-200"
            />
            <div
              class="mb-1 font-semibold text-theme-neutral-dark"
            >
              Category
            </div>
            <fieldset>
              <label
                class="flex items-center block px-2 pb-1 mb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    checked=""
                    class="sc-AxjAm fwkVBO"
                    color="success"
                    data-testid="SearchBarPluginFilters-category-game"
                    name="category"
                    type="checkbox"
                  />
                </span>
                <span
                  class="mt-1"
                >
                  Game
                </span>
              </label>
            </fieldset>
            <div
              class="my-4 border-b border-dashed border-theme-neutral-200"
            />
            <div
              class="font-semibold text-theme-neutral-dark"
            >
              Rating
            </div>
            <fieldset>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-4"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-3"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-2"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
              <label
                class="flex items-center block px-2 pb-1 cursor-pointer space-x-2 text-theme-neutral-dark hover:bg-theme-neutral-contrast rounded-md"
              >
                <span>
                  <input
                    checked=""
                    class="sc-AxjAm fwkVBO mt-px rounded-lg"
                    color="success"
                    data-testid="SearchBarPluginFilters-rating-1"
                    name="test"
                    type="radio"
                  />
                </span>
                <span
                  class="flex items-center mt-1 space-x-1"
                >
                  <span
                    class="flex text-theme-neutral-400"
                  >
                    <span
                      class="text-theme-warning-300 mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                    <span
                      class=" mr-1"
                    >
                      <div
                        class="sc-AxirZ eEbZjj"
                        height="20"
                        width="20"
                      >
                        <svg>
                          star-outline.svg
                        </svg>
                      </div>
                    </span>
                  </span>
                  <span>
                    & up
                  </span>
                </span>
              </label>
            </fieldset>
            <div
              class="my-4 border-b border-dashed border-theme-neutral-200"
            />
            <div
              class="flex items-center pl-2 cursor-pointer text-theme-primary-500 hover:text-theme-primary-600 hover:underline"
              data-testid="SearchBarPluginFilters-reset"
            >
              <div
                class="sc-AxirZ iQaTP"
                height="1em"
                width="1em"
              >
                <svg>
                  reset.svg
                </svg>
              </div>
              <span
                class="pl-2"
              >
                Reset Filters
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;