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

exports[`renders <Header /> without throwing 1`] = `
Array [
  .c0 {
  font-weight: 600;
}

<span
    className="c0"
>
    Must
    :
</span>,
  " be on a ",
  "same",
  " node as the instance(s) identified by the instance ",
  "name",
  " ",
  "equalling",
  " “",
  "test",
  "”",
]
`;

exports[`renders <Header tag/> without throwing 1`] = `
Array [
  .c0 {
  font-weight: 600;
}

<span
    className="c0"
>
    Must
    :
</span>,
  " be on a ",
  "same",
  " node as the instance(s) identified by the instance ",
  "tag",
  " ",
  "key “",
  "two",
  "\\" and the instance tag value",
  " ",
  "equalling",
  " \\"",
  "one",
  "”",
]
`;

exports[`renders <Rule/> without throwing 1`] = `
.c0 {
  margin-bottom: 3rem;
}

.c12 {
  margin-right: 0.375rem;
}

.c1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c5 {
  width: 4.5rem;
  position: relative;
  padding: 0.75rem;
  padding-right: 1.5625rem;
  width: auto;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 1rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  color: rgb(216,216,216);
  margin: 0 0.375rem;
}

.c5::-ms-expand {
  display: none;
}

.c7 {
  width: 6.25rem;
  position: relative;
  padding: 0.75rem;
  padding-right: 1.5625rem;
  width: auto;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 1rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  color: rgb(216,216,216);
  margin: 0 0.375rem;
}

.c7::-ms-expand {
  display: none;
}

.c10 {
  width: 8.4375rem;
  position: relative;
  padding: 0.75rem;
  padding-right: 1.5625rem;
  width: auto;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 1rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  color: rgb(216,216,216);
  margin: 0 0.375rem;
}

.c10::-ms-expand {
  display: none;
}

.c13 {
  width: 8.125rem;
  position: relative;
  padding: 0.75rem;
  padding-right: 1.5625rem;
  width: auto;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 1rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  color: rgb(216,216,216);
  margin: 0 0.375rem;
}

.c13::-ms-expand {
  display: none;
}

.c2 {
  color: rgba(73,73,73,1);
  font-weight: normal;
  line-height: 1.5rem;
  font-size: 0.9375rem;
  margin: 0;
  display: inline-block;
}

.c3 {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  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;
}

.c15 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 0.75rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  max-width: 22.1875rem;
  text-overflow: ellipsis;
}

.c15:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c15::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c15::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c15:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c15:invalid {
  box-shadow: none;
}

.c15:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c15:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c15:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c15:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c4 {
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
  max-width: 100%;
  min-width: 18.75rem;
  margin: 0 0.375rem;
  width: auto;
  max-width: auto;
  min-width: 0;
}

.c4:after {
  content: '';
  width: 0.625rem;
  height: 0.625rem;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpbGw9IiM0OTQ5NDkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==) center center no-repeat;
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0.75rem;
  pointer-events: none;
}

.c4:after {
  right: 0.375rem;
}

.c9 {
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
  max-width: 100%;
  min-width: 18.75rem;
  margin: 0 0.375rem;
  width: auto;
  max-width: auto;
  min-width: 0;
  margin-left: 0;
}

.c9:after {
  content: '';
  width: 0.625rem;
  height: 0.625rem;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpbGw9IiM0OTQ5NDkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==) center center no-repeat;
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0.75rem;
  pointer-events: none;
}

.c9:after {
  right: 0.375rem;
}

.c6 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 0.75rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  max-width: 22.1875rem;
  width: 4.5rem;
  max-width: 4.5rem;
  text-overflow: ellipsis;
}

.c6:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c6::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c6::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c6:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c6:invalid {
  box-shadow: none;
}

.c6:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c6:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c6:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c6:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c8 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 0.75rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  max-width: 22.1875rem;
  width: 6.25rem;
  max-width: 6.25rem;
  text-overflow: ellipsis;
}

.c8:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c8::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c8::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c8:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c8:invalid {
  box-shadow: none;
}

.c8:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c8:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c8:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c8:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c11 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 0.75rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  max-width: 22.1875rem;
  width: 8.4375rem;
  max-width: 8.4375rem;
  text-overflow: ellipsis;
}

.c11:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c11::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c11::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c11:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c11:invalid {
  box-shadow: none;
}

.c11:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c11:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c11:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c11:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c14 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 0.75rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  max-width: 22.1875rem;
  width: 8.125rem;
  max-width: 8.125rem;
  text-overflow: ellipsis;
}

.c14:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c14::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c14::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c14:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c14:invalid {
  box-shadow: none;
}

.c14:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c14:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c14:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c14:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

<div
  className="c0"
>
  <div
    className="c1"
    wrap={true}
  >
    <h4
      className="c2"
      style={
        Object {
          "fontSize": "1.125rem",
          "lineHeight": "3rem",
        }
      }
    >
      The instance
    </h4>
    <div
      className="baseline-jVaZNU kXgQxt c3"
      name="conditional"
      role="group"
      style={undefined}
    >
      <div
        className="c4"
        disabled={false}
        style={
          Object {
            "fontSize": "1.125rem",
            "lineHeight": "3rem",
          }
        }
        width="4.5rem"
      >
        <select
          className="c5 c6"
          disabled={false}
          id="k"
          onBlur={undefined}
          style={
            Object {
              "fontSize": "1.125rem",
              "lineHeight": "3rem",
            }
          }
          width="4.5rem"
        >
          <option
            value="should"
          >
            should
          </option>
          <option
            value="must"
          >
            must
          </option>
        </select>
      </div>
    </div>
    <h4
      className="c2"
      style={
        Object {
          "fontSize": "1.125rem",
          "lineHeight": "3rem",
        }
      }
    >
      be on
    </h4>
    <div
      className="baseline-jVaZNU kXgQxt c3"
      name="placement"
      role="group"
      style={undefined}
    >
      <div
        className="c4"
        disabled={false}
        style={
          Object {
            "fontSize": "1.125rem",
            "lineHeight": "3rem",
          }
        }
        width="6.25rem"
      >
        <select
          className="c7 c8"
          disabled={false}
          id="l"
          onBlur={undefined}
          style={
            Object {
              "fontSize": "1.125rem",
              "lineHeight": "3rem",
            }
          }
          width="6.25rem"
        >
          <option
            value="same"
          >
            the same
          </option>
          <option
            value="different"
          >
            a different
          </option>
        </select>
      </div>
    </div>
    <h4
      className="c2"
      style={
        Object {
          "fontSize": "1.125rem",
          "lineHeight": "3rem",
        }
      }
    >
      node as the instance(s) identified by the
    </h4>
    <div
      className="baseline-jVaZNU kXgQxt c3"
      name="type"
      role="group"
      style={undefined}
    >
      <div
        className="c9"
        disabled={false}
        style={
          Object {
            "fontSize": "1.125rem",
            "lineHeight": "3rem",
          }
        }
        width="8.4375rem"
      >
        <select
          className="c10 c11"
          disabled={false}
          id="m"
          onBlur={undefined}
          style={
            Object {
              "fontSize": "1.125rem",
              "lineHeight": "3rem",
            }
          }
          width="8.4375rem"
        >
          <option
            value="name"
          >
            instance name
          </option>
          <option
            value="tag"
          >
            tag
          </option>
        </select>
      </div>
    </div>
    <div
      className="baseline-jVaZNU kXgQxt c3"
      name="pattern"
      role="group"
      style={undefined}
    >
      <div
        className="c12"
      >
        <div
          className="c4"
          disabled={false}
          style={
            Object {
              "fontSize": "1.125rem",
              "lineHeight": "3rem",
            }
          }
          width="8.125rem"
        >
          <select
            className="c13 c14"
            disabled={false}
            id="n"
            onBlur={undefined}
            style={
              Object {
                "fontSize": "1.125rem",
                "lineHeight": "3rem",
              }
            }
            width="8.125rem"
          >
            <option
              value="equalling"
            >
              equalling
            </option>
            <option
              value="not-equalling"
            >
              not equalling
            </option>
            <option
              value="containing"
            >
              containing
            </option>
            <option
              value="starting"
            >
              starting with
            </option>
            <option
              value="ending"
            >
              ending with
            </option>
          </select>
        </div>
      </div>
    </div>
    <div
      className="baseline-jVaZNU kXgQxt c3"
      name="value"
      role="group"
      style={undefined}
    >
      <input
        className="c15"
        disabled={false}
        id="o"
        onBlur={null}
        placeholder="Example instance name: nginx"
        required={true}
        style={
          Object {
            "fontSize": "1.125rem",
            "lineHeight": "3rem",
          }
        }
      />
    </div>
  </div>
</div>
`;

exports[`renders <Rule/> without throwing 2`] = `
.c0 {
  margin-bottom: 3rem;
}

.c12 {
  margin-right: 0.375rem;
}

.c1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c5 {
  width: 4.5rem;
  position: relative;
  padding: 0.75rem;
  padding-right: 1.5625rem;
  width: auto;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 1rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  color: rgb(216,216,216);
  margin: 0 0.375rem;
}

.c5::-ms-expand {
  display: none;
}

.c7 {
  width: 6.25rem;
  position: relative;
  padding: 0.75rem;
  padding-right: 1.5625rem;
  width: auto;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 1rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  color: rgb(216,216,216);
  margin: 0 0.375rem;
}

.c7::-ms-expand {
  display: none;
}

.c10 {
  width: 8.4375rem;
  position: relative;
  padding: 0.75rem;
  padding-right: 1.5625rem;
  width: auto;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 1rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  color: rgb(216,216,216);
  margin: 0 0.375rem;
}

.c10::-ms-expand {
  display: none;
}

.c13 {
  width: 8.125rem;
  position: relative;
  padding: 0.75rem;
  padding-right: 1.5625rem;
  width: auto;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 1rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  color: rgb(216,216,216);
  margin: 0 0.375rem;
}

.c13::-ms-expand {
  display: none;
}

.c2 {
  color: rgba(73,73,73,1);
  font-weight: normal;
  line-height: 1.5rem;
  font-size: 0.9375rem;
  margin: 0;
  display: inline-block;
}

.c3 {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  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;
}

.c15 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 0.75rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  max-width: 22.1875rem;
  text-overflow: ellipsis;
}

.c15:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c15::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c15::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c15:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c15:invalid {
  box-shadow: none;
}

.c15:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c15:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c15:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c15:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c4 {
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
  max-width: 100%;
  min-width: 18.75rem;
  margin: 0 0.375rem;
  width: auto;
  max-width: auto;
  min-width: 0;
}

.c4:after {
  content: '';
  width: 0.625rem;
  height: 0.625rem;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpbGw9IiM0OTQ5NDkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==) center center no-repeat;
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0.75rem;
  pointer-events: none;
}

.c4:after {
  right: 0.375rem;
}

.c9 {
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
  max-width: 100%;
  min-width: 18.75rem;
  margin: 0 0.375rem;
  width: auto;
  max-width: auto;
  min-width: 0;
  margin-left: 0;
}

.c9:after {
  content: '';
  width: 0.625rem;
  height: 0.625rem;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpbGw9IiM0OTQ5NDkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==) center center no-repeat;
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0.75rem;
  pointer-events: none;
}

.c9:after {
  right: 0.375rem;
}

.c6 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 0.75rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  max-width: 22.1875rem;
  width: 4.5rem;
  max-width: 4.5rem;
  text-overflow: ellipsis;
}

.c6:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c6::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c6::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c6:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c6:invalid {
  box-shadow: none;
}

.c6:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c6:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c6:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c6:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c8 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 0.75rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  max-width: 22.1875rem;
  width: 6.25rem;
  max-width: 6.25rem;
  text-overflow: ellipsis;
}

.c8:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c8::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c8::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c8:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c8:invalid {
  box-shadow: none;
}

.c8:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c8:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c8:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c8:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c11 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 0.75rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  max-width: 22.1875rem;
  width: 8.4375rem;
  max-width: 8.4375rem;
  text-overflow: ellipsis;
}

.c11:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c11::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c11::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c11:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c11:invalid {
  box-shadow: none;
}

.c11:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c11:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c11:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c11:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c14 {
  box-sizing: border-box;
  width: 18.75rem;
  height: 3rem;
  min-height: 3rem;
  padding: 0.8125rem 0.75rem;
  border-radius: 0.25rem;
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
  font-size: 0.9375rem;
  line-height: normal !important;
  font-style: normal;
  font-stretch: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  border: none;
  border-bottom: 0.0625rem solid rgba(73,73,73,1);
  border-radius: 0;
  background: transparent;
  padding: 0;
  padding-right: 0.75rem;
  display: inline;
  height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 0;
  max-width: 22.1875rem;
  width: 8.125rem;
  max-width: 8.125rem;
  text-overflow: ellipsis;
}

.c14:focus {
  border-color: rgb(59,70,204);
  outline: 0;
}

.c14::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c14::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c14:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c14:invalid {
  box-shadow: none;
}

.c14:disabled {
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
}

.c14:disabled::-webkit-input-placeholder {
  color: rgba(73,73,73,0.5);
}

.c14:disabled::-moz-placeholder {
  color: rgba(73,73,73,0.5);
}

.c14:disabled:-ms-input-placeholder {
  color: rgba(73,73,73,0.5);
}

<div
  className="c0"
>
  <div
    className="c1"
    wrap={true}
  >
    <h4
      className="c2"
      style={
        Object {
          "fontSize": "1.125rem",
          "lineHeight": "3rem",
        }
      }
    >
      The instance
    </h4>
    <div
      className="baseline-jVaZNU kXgQxt c3"
      name="conditional"
      role="group"
      style={undefined}
    >
      <div
        className="c4"
        disabled={false}
        style={
          Object {
            "fontSize": "1.125rem",
            "lineHeight": "3rem",
          }
        }
        width="4.5rem"
      >
        <select
          className="c5 c6"
          disabled={false}
          id="p"
          onBlur={undefined}
          style={
            Object {
              "fontSize": "1.125rem",
              "lineHeight": "3rem",
            }
          }
          width="4.5rem"
        >
          <option
            value="should"
          >
            should
          </option>
          <option
            value="must"
          >
            must
          </option>
        </select>
      </div>
    </div>
    <h4
      className="c2"
      style={
        Object {
          "fontSize": "1.125rem",
          "lineHeight": "3rem",
        }
      }
    >
      be on
    </h4>
    <div
      className="baseline-jVaZNU kXgQxt c3"
      name="placement"
      role="group"
      style={undefined}
    >
      <div
        className="c4"
        disabled={false}
        style={
          Object {
            "fontSize": "1.125rem",
            "lineHeight": "3rem",
          }
        }
        width="6.25rem"
      >
        <select
          className="c7 c8"
          disabled={false}
          id="q"
          onBlur={undefined}
          style={
            Object {
              "fontSize": "1.125rem",
              "lineHeight": "3rem",
            }
          }
          width="6.25rem"
        >
          <option
            value="same"
          >
            the same
          </option>
          <option
            value="different"
          >
            a different
          </option>
        </select>
      </div>
    </div>
    <h4
      className="c2"
      style={
        Object {
          "fontSize": "1.125rem",
          "lineHeight": "3rem",
        }
      }
    >
      node as the instance(s) identified by the
    </h4>
    <div
      className="baseline-jVaZNU kXgQxt c3"
      name="type"
      role="group"
      style={undefined}
    >
      <div
        className="c9"
        disabled={false}
        style={
          Object {
            "fontSize": "1.125rem",
            "lineHeight": "3rem",
          }
        }
        width="8.4375rem"
      >
        <select
          className="c10 c11"
          disabled={false}
          id="r"
          onBlur={undefined}
          style={
            Object {
              "fontSize": "1.125rem",
              "lineHeight": "3rem",
            }
          }
          width="8.4375rem"
        >
          <option
            value="name"
          >
            instance name
          </option>
          <option
            value="tag"
          >
            tag
          </option>
        </select>
      </div>
    </div>
    <div
      className="baseline-jVaZNU kXgQxt c3"
      name="pattern"
      role="group"
      style={undefined}
    >
      <div
        className="c12"
      >
        <div
          className="c4"
          disabled={false}
          style={
            Object {
              "fontSize": "1.125rem",
              "lineHeight": "3rem",
            }
          }
          width="8.125rem"
        >
          <select
            className="c13 c14"
            disabled={false}
            id="s"
            onBlur={undefined}
            style={
              Object {
                "fontSize": "1.125rem",
                "lineHeight": "3rem",
              }
            }
            width="8.125rem"
          >
            <option
              value="equalling"
            >
              equalling
            </option>
            <option
              value="not-equalling"
            >
              not equalling
            </option>
            <option
              value="containing"
            >
              containing
            </option>
            <option
              value="starting"
            >
              starting with
            </option>
            <option
              value="ending"
            >
              ending with
            </option>
          </select>
        </div>
      </div>
    </div>
    <div
      className="baseline-jVaZNU kXgQxt c3"
      name="value"
      role="group"
      style={undefined}
    >
      <input
        className="c15"
        disabled={false}
        id="t"
        onBlur={null}
        placeholder="Example instance name: nginx"
        required={true}
        style={
          Object {
            "fontSize": "1.125rem",
            "lineHeight": "3rem",
          }
        }
      />
    </div>
  </div>
</div>
`;