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

exports[`renders <Filters /> without throwing 1`] = `
.c5 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  min-width: 7.5rem;
  box-sizing: border-box;
  display: inline-block;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
  padding: 0.9375rem 1.125rem;
  position: relative;
  font-weight: 400;
  font-size: 0.9375rem;
  text-align: center;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  -webkit-letter-spacing: normal;
  -moz-letter-spacing: normal;
  -ms-letter-spacing: normal;
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border-radius: 0.25rem;
  border: solid 0.0625rem;
  font-weight: 600;
  padding: 0.5625rem 1.125rem;
  font-weight: 600;
}

.c5::-moz-focus-inner,
.c5[type='button']::-moz-focus-inner,
.c5[type='reset']::-moz-focus-inner,
.c5[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.c5:-moz-focusring,
.c5[type='button']:-moz-focusring,
.c5[type='reset']:-moz-focusring,
.c5[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
}

.c5:focus {
  outline: 0;
  text-decoration: none;
}

.c5:hover {
  border: solid 0.0625rem;
}

.c5:active,
.c5:active:hover,
.c5:active:focus {
  background-image: none;
  outline: 0;
}

.c5[disabled] {
  cursor: not-allowed;
  pointer-events: none;
}

.c5 + button {
  margin-left: 1.25rem;
}

.c6 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  min-width: 7.5rem;
  box-sizing: border-box;
  display: inline-block;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
  padding: 0.9375rem 1.125rem;
  position: relative;
  font-weight: 400;
  font-size: 0.9375rem;
  text-align: center;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  -webkit-letter-spacing: normal;
  -moz-letter-spacing: normal;
  -ms-letter-spacing: normal;
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border-radius: 0.25rem;
  border: solid 0.0625rem;
  padding: 0.5625rem 1.125rem;
  font-weight: 600;
}

.c6::-moz-focus-inner,
.c6[type='button']::-moz-focus-inner,
.c6[type='reset']::-moz-focus-inner,
.c6[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.c6:-moz-focusring,
.c6[type='button']:-moz-focusring,
.c6[type='reset']:-moz-focusring,
.c6[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
}

.c6:focus {
  outline: 0;
  text-decoration: none;
}

.c6:hover {
  border: solid 0.0625rem;
}

.c6:active,
.c6:active:hover,
.c6:active:focus {
  background-image: none;
  outline: 0;
}

.c6[disabled] {
  cursor: not-allowed;
  pointer-events: none;
}

.c6 + button {
  margin-left: 1.25rem;
}

.c2 {
  font-weight: 400;
  font-size: 0.9375rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
}

.c13 {
  font-size: 0.8125rem;
  position: absolute;
  top: 0.875rem;
  right: auto;
  color: #464646;
}

.c15 {
  font-size: 0.8125rem;
  position: absolute;
  top: 0.875rem;
  right: 1px;
  color: #464646;
}

.c14 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #FFFFFF;
  border: 2px solid #bdbdbd;
  border-radius: 50%;
  cursor: pointer;
  display: block;
  height: 0.875rem;
  width: 0.875rem;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  outline: none;
  position: absolute;
  top: 0;
  margin-top: 0.125rem;
}

.c14::active {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}

.c14::focus {
  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
}

.c11 {
  background: #D8D8D8;
  cursor: pointer;
  display: block;
  height: 0.25rem;
  position: relative;
}

.c12 {
  background: #364ACD;
  height: 100%;
  position: absolute;
}

.c10 {
  position: relative;
  min-height: 0.625rem;
}

.c9 {
  font-weight: 400;
  font-size: 0.9375rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  margin-right: 0.75rem;
  font-weight: bold;
}

.c8 {
  margin-bottom: 0.625rem;
  margin-top: 0.75rem;
}

.c23 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
  display: none;
}

.c23[type='checkbox'],
.c23[type='radio'] {
  box-sizing: border-box;
  padding: 0;
}

.c23[type='number']::-webkit-inner-spin-button,
.c23[type='number']::-webkit-outer-spin-button {
  height: auto;
}

.c23[type='search'] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  outline-offset: -0.125rem;
}

.c23[type='search']::-webkit-search-cancel-button,
.c23[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.c23::-webkit-file-upload-button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  font: inherit;
}

.c23:checked + label::after {
  opacity: 1;
}

.c23:selected + label::after {
  opacity: 1;
}

.c23:disabled + label {
  background-color: rgb(249,249,249);
}

.c23:disabled + label::after {
  opacity: 0.3;
}

.c24 {
  color: rgb(100,100,100);
  position: absolute;
  width: 1.125rem;
  height: 1.125rem;
  top: 0;
  box-sizing: border-box;
  cursor: pointer;
  background-color: rgb(255,255,255);
  box-shadow: none;
  border: 1px solid;
  cursor: pointer;
  border-radius: 4px;
  width: 1.125rem;
  height: 1.125rem;
}

.c24::after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 0.375rem;
  height: 0.125rem;
  background: transparent;
  top: 0.3125rem;
  left: 0.25rem;
  border: 0.125rem solid;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.c22 {
  display: inline-block;
  vertical-align: text-bottom;
  margin-right: 0.5rem;
  width: 1.125rem;
  height: 1.125rem;
  position: relative;
  cursor: pointer;
}

.c21 {
  list-style-type: none;
  font-weight: 400;
}

.c19 {
  margin: 0;
  padding: 0;
}

.c20 {
  padding: 0.35em 0.75em 0.625em;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  width: 100%;
  height: auto;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-before: 0;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  -webkit-padding-after: 0;
}

.c17 {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
  font-weight: 600;
}

.c16 {
  margin-top: 0.75rem;
  min-width: 12.5rem;
}

.c16 label {
  font-size: 0.8125rem;
}

.c18 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 0.375rem;
}

.c7 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.c7 > div {
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
}

.c7 > div:not(:last-child) {
  margin-right: 2.25rem;
}

.c4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1.125rem;
}

.c0 {
  width: 100%;
}

.c1 {
  line-height: 24px;
  font-size: 21px;
  margin-bottom: 1.125rem;
}

.c3 {
  margin-bottom: 0.5rem;
}

<section
  className="c0"
>
  <label
    className="c1 c2"
  >
    Choose package
  </label>
  <label
    className="c3 c2"
  >
    Filter by package type
  </label>
  <section
    className="c4"
  >
    <div>
      <button
        className="c5"
        onClick={[Function]}
        selected={false}
      >
        Compute Optimized
      </button>
      <button
        className="c5"
        onClick={[Function]}
        selected={false}
      >
        General Purpose
      </button>
      <button
        className="c5"
        onClick={[Function]}
        selected={false}
      >
        Memory Optimized
      </button>
      <button
        className="c5"
        onClick={[Function]}
        selected={false}
      >
        Storage Optimized
      </button>
    </div>
    <button
      className="c6"
      disabled={false}
      onClick={[Function]}
    >
      Reset Filters
    </button>
  </section>
  <label
    className="c2"
  >
    Filter by package feature
  </label>
  <section
    className="c7"
  >
    <div>
      <label
        className="c8 c9"
        htmlFor=""
      >
        GB RAM
      </label>
      <div
        aria-disabled={false}
        className="c10"
        onKeyDown={[Function]}
        onKeyUp={[Function]}
        onMouseDown={[Function]}
        onTouchStart={[Function]}
      >
        <div
          className="c11"
          onMouseDown={[Function]}
          onTouchStart={[Function]}
        >
          <div
            className="c12"
            style={
              Object {
                "left": "0%",
                "width": "100%",
              }
            }
          />
          <span>
            <span
              className="c13"
              type="min"
            >
              0.256
            </span>
            <div
              aria-controls={undefined}
              aria-labelledby={undefined}
              aria-valuemax={50.688}
              aria-valuemin={0.256}
              aria-valuenow={0.256}
              className="c14"
              draggable="false"
              onKeyDown={[Function]}
              onMouseDown={[Function]}
              onTouchStart={[Function]}
              role="slider"
              style={
                Object {
                  "left": "0%",
                  "position": "absolute",
                }
              }
              tabIndex="0"
              type="min"
            />
          </span>
          <span>
            <span
              className="c15"
              type="max"
            >
              50.688
            </span>
            <div
              aria-controls={undefined}
              aria-labelledby={undefined}
              aria-valuemax={50.688}
              aria-valuemin={0.256}
              aria-valuenow={50.688}
              className="c14"
              draggable="false"
              onKeyDown={[Function]}
              onMouseDown={[Function]}
              onTouchStart={[Function]}
              role="slider"
              style={
                Object {
                  "left": "94%",
                  "position": "absolute",
                }
              }
              tabIndex="0"
              type="max"
            />
          </span>
        </div>
      </div>
    </div>
    <div>
      <label
        className="c8 c9"
        htmlFor=""
      >
        vCPUs
      </label>
      <div
        aria-disabled={false}
        className="c10"
        onKeyDown={[Function]}
        onKeyUp={[Function]}
        onMouseDown={[Function]}
        onTouchStart={[Function]}
      >
        <div
          className="c11"
          onMouseDown={[Function]}
          onTouchStart={[Function]}
        >
          <div
            className="c12"
            style={
              Object {
                "left": "0%",
                "width": "100%",
              }
            }
          />
          <span>
            <span
              className="c13"
              type="min"
            >
              0.25
            </span>
            <div
              aria-controls={undefined}
              aria-labelledby={undefined}
              aria-valuemax={3.25}
              aria-valuemin={0.25}
              aria-valuenow={0.25}
              className="c14"
              draggable="false"
              onKeyDown={[Function]}
              onMouseDown={[Function]}
              onTouchStart={[Function]}
              role="slider"
              style={
                Object {
                  "left": "0%",
                  "position": "absolute",
                }
              }
              tabIndex="0"
              type="min"
            />
          </span>
          <span>
            <span
              className="c15"
              type="max"
            >
              3.25
            </span>
            <div
              aria-controls={undefined}
              aria-labelledby={undefined}
              aria-valuemax={3.25}
              aria-valuemin={0.25}
              aria-valuenow={3.25}
              className="c14"
              draggable="false"
              onKeyDown={[Function]}
              onMouseDown={[Function]}
              onTouchStart={[Function]}
              role="slider"
              style={
                Object {
                  "left": "94%",
                  "position": "absolute",
                }
              }
              tabIndex="0"
              type="max"
            />
          </span>
        </div>
      </div>
    </div>
    <div>
      <label
        className="c8 c9"
        htmlFor=""
      >
        TB Disk
      </label>
      <div
        aria-disabled={false}
        className="c10"
        onKeyDown={[Function]}
        onKeyUp={[Function]}
        onMouseDown={[Function]}
        onTouchStart={[Function]}
      >
        <div
          className="c11"
          onMouseDown={[Function]}
          onTouchStart={[Function]}
        >
          <div
            className="c12"
            style={
              Object {
                "left": "0%",
                "width": "100%",
              }
            }
          />
          <span>
            <span
              className="c13"
              type="min"
            >
              0.01
            </span>
            <div
              aria-controls={undefined}
              aria-labelledby={undefined}
              aria-valuemax={107.26}
              aria-valuemin={0.01}
              aria-valuenow={0.01}
              className="c14"
              draggable="false"
              onKeyDown={[Function]}
              onMouseDown={[Function]}
              onTouchStart={[Function]}
              role="slider"
              style={
                Object {
                  "left": "0%",
                  "position": "absolute",
                }
              }
              tabIndex="0"
              type="min"
            />
          </span>
          <span>
            <span
              className="c15"
              type="max"
            >
              107.26
            </span>
            <div
              aria-controls={undefined}
              aria-labelledby={undefined}
              aria-valuemax={107.26}
              aria-valuemin={0.01}
              aria-valuenow={107.26}
              className="c14"
              draggable="false"
              onKeyDown={[Function]}
              onMouseDown={[Function]}
              onTouchStart={[Function]}
              role="slider"
              style={
                Object {
                  "left": "94%",
                  "position": "absolute",
                }
              }
              tabIndex="0"
              type="max"
            />
          </span>
        </div>
      </div>
    </div>
    <div>
      <label
        className="c8 c9"
        htmlFor=""
      >
        $/hr
      </label>
      <div
        aria-disabled={false}
        className="c10"
        onKeyDown={[Function]}
        onKeyUp={[Function]}
        onMouseDown={[Function]}
        onTouchStart={[Function]}
      >
        <div
          className="c11"
          onMouseDown={[Function]}
          onTouchStart={[Function]}
        >
          <div
            className="c12"
            style={
              Object {
                "left": "0%",
                "width": "100%",
              }
            }
          />
          <span>
            <span
              className="c13"
              type="min"
            >
              0.016
            </span>
            <div
              aria-controls={undefined}
              aria-labelledby={undefined}
              aria-valuemax={0.525}
              aria-valuemin={0.016}
              aria-valuenow={0.016}
              className="c14"
              draggable="false"
              onKeyDown={[Function]}
              onMouseDown={[Function]}
              onTouchStart={[Function]}
              role="slider"
              style={
                Object {
                  "left": "0%",
                  "position": "absolute",
                }
              }
              tabIndex="0"
              type="min"
            />
          </span>
          <span>
            <span
              className="c15"
              type="max"
            >
              0.525
            </span>
            <div
              aria-controls={undefined}
              aria-labelledby={undefined}
              aria-valuemax={0.525}
              aria-valuemin={0.016}
              aria-valuenow={0.525}
              className="c14"
              draggable="false"
              onKeyDown={[Function]}
              onMouseDown={[Function]}
              onTouchStart={[Function]}
              role="slider"
              style={
                Object {
                  "left": "94%",
                  "position": "absolute",
                }
              }
              tabIndex="0"
              type="max"
            />
          </span>
        </div>
      </div>
    </div>
    <form
      onChange={[Function]}
    >
      <section
        className="c16"
      >
        <legend
          className="c17"
        >
          Disk
        </legend>
        <ul
          className="c18 c19"
        >
          <fieldset
            className="c20"
            style={undefined}
          >
            <div>
              <li
                checked={false}
                className="c21"
                name="magnetic"
                onBlur={[Function]}
                onChange={[Function]}
                onDragStart={[Function]}
                onDrop={[Function]}
                onFocus={[Function]}
                value=""
              >
                <div
                  className="c22"
                  type="checkbox"
                >
                  <input
                    checked={false}
                    className="c23"
                    id="ctHMev"
                    name="magnetic"
                    onBlur={[Function]}
                    onChange={[Function]}
                    onDragStart={[Function]}
                    onDrop={[Function]}
                    onFocus={[Function]}
                    type="checkbox"
                    value=""
                  />
                  <label
                    className="c24"
                    htmlFor="ctHMev"
                  />
                </div>
                Magnetic
              </li>
            </div>
          </fieldset>
          <fieldset
            className="c20"
            style={undefined}
          >
            <div>
              <li
                checked={false}
                className="c21"
                name="ssd"
                onBlur={[Function]}
                onChange={[Function]}
                onDragStart={[Function]}
                onDrop={[Function]}
                onFocus={[Function]}
                value=""
              >
                <div
                  className="c22"
                  type="checkbox"
                >
                  <input
                    checked={false}
                    className="c23"
                    id="buhnul"
                    name="ssd"
                    onBlur={[Function]}
                    onChange={[Function]}
                    onDragStart={[Function]}
                    onDrop={[Function]}
                    onFocus={[Function]}
                    type="checkbox"
                    value=""
                  />
                  <label
                    className="c24"
                    htmlFor="buhnul"
                  />
                </div>
                SSD
              </li>
            </div>
          </fieldset>
        </ul>
      </section>
    </form>
  </section>
</section>
`;