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

exports[`SearchInput advanced search 1`] = `
<DocumentFragment>
  <div
    class=""
  >
    <div
      class="pf-v6-c-input-group"
    >
      <div
        class="pf-v6-c-input-group__item pf-m-fill"
      >
        <div
          class="pf-v6-c-text-input-group"
        >
          <div
            class="pf-v6-c-text-input-group__main pf-m-icon"
          >
            <span
              class="pf-v6-c-text-input-group__text"
            >
              <span
                class="pf-v6-c-text-input-group__icon"
              >
                <svg
                  aria-hidden="true"
                  class="pf-v6-svg"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  viewBox="0 0 512 512"
                  width="1em"
                >
                  <path
                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
                  />
                </svg>
              </span>
              <input
                aria-label="Search input"
                class="pf-v6-c-text-input-group__text-input"
                type="text"
                value="username:player firstname:john"
              />
            </span>
          </div>
          <div
            class="pf-v6-c-text-input-group__utilities"
          >
            <button
              aria-disabled="false"
              aria-label="Reset"
              class="pf-v6-c-button pf-m-plain"
              type="button"
            >
              <span
                class="pf-v6-c-button__icon"
              >
                <svg
                  aria-hidden="true"
                  class="pf-v6-svg"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  viewBox="0 0 352 512"
                  width="1em"
                >
                  <path
                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="pf-v6-c-input-group__item pf-m-plain"
      >
        <button
          aria-disabled="false"
          aria-expanded="false"
          aria-label="Open advanced search"
          class="pf-v6-c-button pf-m-control"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <svg
              aria-hidden="true"
              class="pf-v6-svg"
              fill="currentColor"
              height="1em"
              role="img"
              viewBox="0 0 320 512"
              width="1em"
            >
              <path
                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
              />
            </svg>
          </span>
        </button>
      </div>
      <div
        class="pf-v6-c-input-group__item"
      >
        <button
          aria-disabled="false"
          aria-label="Search"
          class="pf-v6-c-button pf-m-control"
          type="submit"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <span
              class="pf-v6-c-icon"
            >
              <span
                class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
              >
                <svg
                  aria-hidden="true"
                  class="pf-v6-svg"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  viewBox="0 0 448 512"
                  width="1em"
                >
                  <path
                    d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
                  />
                </svg>
              </span>
            </span>
          </span>
        </button>
      </div>
    </div>
    <div
      class=""
      data-popper-escaped="true"
      data-popper-placement="bottom-start"
      data-popper-reference-hidden="true"
      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
    />
  </div>
</DocumentFragment>
`;

exports[`SearchInput advanced search with custom attributes 1`] = `
<DocumentFragment>
  <div
    class=""
    data-testid="test-id"
  >
    <div
      class="pf-v6-c-input-group"
    >
      <div
        class="pf-v6-c-input-group__item pf-m-fill"
      >
        <div
          class="pf-v6-c-text-input-group"
        >
          <div
            class="pf-v6-c-text-input-group__main pf-m-icon"
          >
            <span
              class="pf-v6-c-text-input-group__text"
            >
              <span
                class="pf-v6-c-text-input-group__icon"
              >
                <svg
                  aria-hidden="true"
                  class="pf-v6-svg"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  viewBox="0 0 512 512"
                  width="1em"
                >
                  <path
                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
                  />
                </svg>
              </span>
              <input
                aria-label="Search input"
                class="pf-v6-c-text-input-group__text-input"
                type="text"
                value="username:player firstname:john"
              />
            </span>
          </div>
          <div
            class="pf-v6-c-text-input-group__utilities"
          >
            <button
              aria-disabled="false"
              aria-label="Reset"
              class="pf-v6-c-button pf-m-plain"
              type="button"
            >
              <span
                class="pf-v6-c-button__icon"
              >
                <svg
                  aria-hidden="true"
                  class="pf-v6-svg"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  viewBox="0 0 352 512"
                  width="1em"
                >
                  <path
                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="pf-v6-c-input-group__item pf-m-plain"
      >
        <button
          aria-disabled="false"
          aria-expanded="true"
          aria-label="Open advanced search"
          class="pf-v6-c-button pf-m-control pf-m-expanded"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <svg
              aria-hidden="true"
              class="pf-v6-svg"
              fill="currentColor"
              height="1em"
              role="img"
              viewBox="0 0 320 512"
              width="1em"
            >
              <path
                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
              />
            </svg>
          </span>
        </button>
      </div>
      <div
        class="pf-v6-c-input-group__item"
      >
        <button
          aria-disabled="false"
          aria-label="Search"
          class="pf-v6-c-button pf-m-control"
          type="submit"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <span
              class="pf-v6-c-icon"
            >
              <span
                class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
              >
                <svg
                  aria-hidden="true"
                  class="pf-v6-svg"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  viewBox="0 0 448 512"
                  width="1em"
                >
                  <path
                    d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
                  />
                </svg>
              </span>
            </span>
          </span>
        </button>
      </div>
    </div>
    <div
      class=""
      data-popper-escaped="true"
      data-popper-placement="bottom-start"
      data-popper-reference-hidden="true"
      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); min-width: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11);"
    >
      <div
        class="pf-v6-c-panel pf-m-raised"
      >
        <div
          class="pf-v6-c-panel__main"
        >
          <div
            class="pf-v6-c-panel__main-body"
          >
            <form
              class="pf-v6-c-form"
              novalidate=""
            >
              <div
                class="pf-v6-c-form__group"
              >
                <div
                  class="pf-v6-c-form__group-label"
                >
                  <label
                    class="pf-v6-c-form__label"
                    for="username_0"
                  >
                    <span
                      class="pf-v6-c-form__label-text"
                    >
                      Username
                    </span>
                  </label>
                    
                </div>
                <div
                  class="pf-v6-c-form__group-control"
                >
                  <span
                    class="pf-v6-c-form-control"
                  >
                    <input
                      aria-invalid="false"
                      id="username_0"
                      type="text"
                      value="player"
                    />
                  </span>
                </div>
              </div>
              <div
                class="pf-v6-c-form__group"
              >
                <div
                  class="pf-v6-c-form__group-label"
                >
                  <label
                    class="pf-v6-c-form__label"
                    for="firstname_1"
                  >
                    <span
                      class="pf-v6-c-form__label-text"
                    >
                      First name
                    </span>
                  </label>
                    
                </div>
                <div
                  class="pf-v6-c-form__group-control"
                >
                  <span
                    class="pf-v6-c-form-control"
                  >
                    <input
                      aria-invalid="false"
                      id="firstname_1"
                      type="text"
                      value="john"
                    />
                  </span>
                </div>
              </div>
              <div
                class="pf-v6-c-form__group"
              >
                <div
                  class="pf-v6-c-form__group-label"
                >
                  <label
                    class="pf-v6-c-form__label"
                    for="generated-id"
                  >
                    <span
                      class="pf-v6-c-form__label-text"
                    >
                      Has words
                    </span>
                  </label>
                    
                </div>
                <div
                  class="pf-v6-c-form__group-control"
                >
                  <span
                    class="pf-v6-c-form-control"
                  >
                    <input
                      aria-invalid="false"
                      id="generated-id"
                      type="text"
                      value=""
                    />
                  </span>
                </div>
              </div>
              <div
                class="pf-v6-c-form__group"
              >
                <div
                  class="pf-v6-c-form__group-control"
                >
                  <button
                    aria-disabled="false"
                    class="pf-v6-c-button pf-m-link pf-m-inline"
                    type="button"
                  >
                    <span
                      class="pf-v6-c-button__text"
                    >
                      Link
                    </span>
                    <span
                      class="pf-v6-c-button__icon pf-m-end"
                    >
                      <svg
                        aria-hidden="true"
                        class="pf-v6-svg"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        viewBox="0 0 448 512"
                        width="1em"
                      >
                        <path
                          d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="pf-v6-c-form__group pf-m-action"
              >
                <div
                  class="pf-v6-c-form__group-control"
                >
                  <div
                    class="pf-v6-c-form__actions"
                  >
                    <button
                      aria-disabled="false"
                      class="pf-v6-c-button pf-m-primary"
                      type="submit"
                    >
                      <span
                        class="pf-v6-c-button__text"
                      >
                        Search
                      </span>
                    </button>
                    <button
                      aria-disabled="false"
                      class="pf-v6-c-button pf-m-link"
                      type="reset"
                    >
                      <span
                        class="pf-v6-c-button__text"
                      >
                        Reset
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`SearchInput renders search input in strict mode 1`] = `
<DocumentFragment>
  <div
    class=""
  >
    <div
      class="pf-v6-c-input-group"
    >
      <div
        class="pf-v6-c-input-group__item pf-m-fill"
      >
        <div
          class="pf-v6-c-text-input-group"
        >
          <div
            class="pf-v6-c-text-input-group__main pf-m-icon"
          >
            <span
              class="pf-v6-c-text-input-group__text"
            >
              <span
                class="pf-v6-c-text-input-group__icon"
              >
                <svg
                  aria-hidden="true"
                  class="pf-v6-svg"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  viewBox="0 0 512 512"
                  width="1em"
                >
                  <path
                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
                  />
                </svg>
              </span>
              <input
                aria-label="Search input"
                class="pf-v6-c-text-input-group__text-input"
                type="text"
                value="username:player firstname:john"
              />
            </span>
          </div>
          <div
            class="pf-v6-c-text-input-group__utilities"
          >
            <button
              aria-disabled="false"
              aria-label="Reset"
              class="pf-v6-c-button pf-m-plain"
              type="button"
            >
              <span
                class="pf-v6-c-button__icon"
              >
                <svg
                  aria-hidden="true"
                  class="pf-v6-svg"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  viewBox="0 0 352 512"
                  width="1em"
                >
                  <path
                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="pf-v6-c-input-group__item pf-m-plain"
      >
        <button
          aria-disabled="false"
          aria-expanded="false"
          aria-label="Open advanced search"
          class="pf-v6-c-button pf-m-control"
          type="button"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <svg
              aria-hidden="true"
              class="pf-v6-svg"
              fill="currentColor"
              height="1em"
              role="img"
              viewBox="0 0 320 512"
              width="1em"
            >
              <path
                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
              />
            </svg>
          </span>
        </button>
      </div>
      <div
        class="pf-v6-c-input-group__item"
      >
        <button
          aria-disabled="false"
          aria-label="Search"
          class="pf-v6-c-button pf-m-control"
          type="submit"
        >
          <span
            class="pf-v6-c-button__icon"
          >
            <span
              class="pf-v6-c-icon"
            >
              <span
                class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
              >
                <svg
                  aria-hidden="true"
                  class="pf-v6-svg"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  viewBox="0 0 448 512"
                  width="1em"
                >
                  <path
                    d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
                  />
                </svg>
              </span>
            </span>
          </span>
        </button>
      </div>
    </div>
    <div
      class=""
      data-popper-escaped="true"
      data-popper-placement="bottom-start"
      data-popper-reference-hidden="true"
      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
    />
  </div>
</DocumentFragment>
`;

exports[`SearchInput search input with hint 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-input-group"
  >
    <div
      class="pf-v6-c-input-group__item pf-m-fill"
    >
      <div
        class="pf-v6-c-text-input-group"
      >
        <div
          class="pf-v6-c-text-input-group__main pf-m-icon"
        >
          <span
            class="pf-v6-c-text-input-group__text"
          >
            <input
              aria-hidden="true"
              class="pf-v6-c-text-input-group__text-input pf-m-hint"
              disabled=""
              type="text"
              value="test hint"
            />
            <span
              class="pf-v6-c-text-input-group__icon"
            >
              <svg
                aria-hidden="true"
                class="pf-v6-svg"
                fill="currentColor"
                height="1em"
                role="img"
                viewBox="0 0 512 512"
                width="1em"
              >
                <path
                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
                />
              </svg>
            </span>
            <input
              aria-label="simple text input"
              class="pf-v6-c-text-input-group__text-input"
              type="text"
              value="test input"
            />
          </span>
        </div>
        <div
          class="pf-v6-c-text-input-group__utilities"
        >
          <div
            class="pf-v6-c-text-input-group__group"
          >
            <button
              aria-disabled="false"
              aria-label="Previous"
              class="pf-v6-c-button pf-m-plain"
              type="button"
            >
              <span
                class="pf-v6-c-button__icon"
              >
                <svg
                  aria-hidden="true"
                  class="pf-v6-svg"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  viewBox="0 0 320 512"
                  width="1em"
                >
                  <path
                    d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
                  />
                </svg>
              </span>
            </button>
            <button
              aria-disabled="false"
              aria-label="Next"
              class="pf-v6-c-button pf-m-plain"
              type="button"
            >
              <span
                class="pf-v6-c-button__icon"
              >
                <svg
                  aria-hidden="true"
                  class="pf-v6-svg"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  viewBox="0 0 320 512"
                  width="1em"
                >
                  <path
                    d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <button
            aria-disabled="false"
            aria-label="Reset"
            class="pf-v6-c-button pf-m-plain"
            type="button"
          >
            <span
              class="pf-v6-c-button__icon"
            >
              <svg
                aria-hidden="true"
                class="pf-v6-svg"
                fill="currentColor"
                height="1em"
                role="img"
                viewBox="0 0 352 512"
                width="1em"
              >
                <path
                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="pf-v6-c-input-group__item"
    >
      <button
        aria-disabled="false"
        aria-label="Search"
        class="pf-v6-c-button pf-m-control"
        type="submit"
      >
        <span
          class="pf-v6-c-button__icon"
        >
          <span
            class="pf-v6-c-icon"
          >
            <span
              class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
            >
              <svg
                aria-hidden="true"
                class="pf-v6-svg"
                fill="currentColor"
                height="1em"
                role="img"
                viewBox="0 0 448 512"
                width="1em"
              >
                <path
                  d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
                />
              </svg>
            </span>
          </span>
        </span>
      </button>
    </div>
  </div>
</DocumentFragment>
`;

exports[`SearchInput simple search input 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-input-group"
  >
    <div
      class="pf-v6-c-input-group__item pf-m-fill"
    >
      <div
        class="pf-v6-c-text-input-group"
      >
        <div
          class="pf-v6-c-text-input-group__main pf-m-icon"
        >
          <span
            class="pf-v6-c-text-input-group__text"
          >
            <span
              class="pf-v6-c-text-input-group__icon"
            >
              <svg
                aria-hidden="true"
                class="pf-v6-svg"
                fill="currentColor"
                height="1em"
                role="img"
                viewBox="0 0 512 512"
                width="1em"
              >
                <path
                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
                />
              </svg>
            </span>
            <input
              aria-label="simple text input"
              class="pf-v6-c-text-input-group__text-input"
              type="text"
              value="test input"
            />
          </span>
        </div>
        <div
          class="pf-v6-c-text-input-group__utilities"
        >
          <div
            class="pf-v6-c-text-input-group__group"
          >
            <button
              aria-disabled="false"
              aria-label="Previous"
              class="pf-v6-c-button pf-m-plain"
              type="button"
            >
              <span
                class="pf-v6-c-button__icon"
              >
                <svg
                  aria-hidden="true"
                  class="pf-v6-svg"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  viewBox="0 0 320 512"
                  width="1em"
                >
                  <path
                    d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
                  />
                </svg>
              </span>
            </button>
            <button
              aria-disabled="false"
              aria-label="Next"
              class="pf-v6-c-button pf-m-plain"
              type="button"
            >
              <span
                class="pf-v6-c-button__icon"
              >
                <svg
                  aria-hidden="true"
                  class="pf-v6-svg"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  viewBox="0 0 320 512"
                  width="1em"
                >
                  <path
                    d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <button
            aria-disabled="false"
            aria-label="Reset"
            class="pf-v6-c-button pf-m-plain"
            type="button"
          >
            <span
              class="pf-v6-c-button__icon"
            >
              <svg
                aria-hidden="true"
                class="pf-v6-svg"
                fill="currentColor"
                height="1em"
                role="img"
                viewBox="0 0 352 512"
                width="1em"
              >
                <path
                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="pf-v6-c-input-group__item"
    >
      <button
        aria-disabled="false"
        aria-label="Search"
        class="pf-v6-c-button pf-m-control"
        type="submit"
      >
        <span
          class="pf-v6-c-button__icon"
        >
          <span
            class="pf-v6-c-icon"
          >
            <span
              class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
            >
              <svg
                aria-hidden="true"
                class="pf-v6-svg"
                fill="currentColor"
                height="1em"
                role="img"
                viewBox="0 0 448 512"
                width="1em"
              >
                <path
                  d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
                />
              </svg>
            </span>
          </span>
        </span>
      </button>
    </div>
  </div>
</DocumentFragment>
`;