joyent-portal/packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap

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

exports[`renders <Firewall /> without throwing 1`] = `
Array [
  .c2 {
  margin-bottom: 0.375rem;
}

.c5 {
  margin-bottom: 1.125rem;
}

.c8 {
  margin-bottom: 1.875rem;
}

.c13 {
  margin-left: 0.75rem;
}

.c18 {
  margin-top: 3rem;
}

.c23 {
  margin-bottom: 0.75rem;
}

.c21 {
  padding: 8rem;
}

.c7 {
  color: rgb(73,73,73);
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c12 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c1 {
  margin-right: auto;
  margin-left: auto;
}

.c3 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.c4 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 62.5rem;
  padding-bottom: 1.125rem;
}

.c25 {
  color: rgb(73,73,73);
  font-weight: normal;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c17 {
  background-color: rgb(216,216,216);
}

.c10 {
  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-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c22 {
  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-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -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;
}

.c20 {
  box-sizing: content-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  border-width: 0.0625rem;
  border-style: solid;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  color: rgb(73,73,73);
  background-color: rgb(255,255,255);
  border-color: rgb(216,216,216);
}

.c9 {
  display: inline-block;
  padding: 0;
  border: none;
  overflow: hidden;
  height: auto;
  -webkit-padding-before: 0;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  -webkit-padding-after: 0;
}

.c11 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c14 {
  position: relative;
  vertical-align: text-bottom;
  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;
}

.c15 {
  display: none;
}

.c15:checked + label {
  background: #3B46CC;
  border: 0.0625rem solid rgb(59,70,204);
}

.c15:checked + label:after {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c15:checked + label:active {
  box-shadow: none;
}

.c16 {
  outline: 0;
  display: block;
  width: 2.875rem;
  height: 1.5rem;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  background: rgb(250,250,250);
  border-radius: 1.4375rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 0.0625rem solid rgb(216,216,216);
}

.c16::selection {
  background: none;
}

.c16:active {
  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
}

.c16:hover {
  border: 0.0625rem solid rgb(59,70,204);
}

.c16:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c16:after,
.c16:before {
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
}

.c16:after {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  border-radius: 50%;
  background: rgb(255,255,255);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
}

.c16:active {
  box-shadow: inset 0 0 0 2em rgb(216,216,216);
}

.c16:before {
  display: none;
}

.c6 {
  margin: 0;
}

.c24 {
  color: rgb(151,151,151);
  text-align: center;
}

.c19 {
  width: calc(100% - 0.125rem);
}

@media only screen and (min-width:48em) {
  .c1 {
    width: 46rem;
  }
}

@media only screen and (min-width:64em) {
  .c1 {
    width: 56rem;
  }
}

@media only screen and (min-width:75em) {
  .c1 {
    width: 59rem;
  }
}

@media only screen and (min-width:0em) {
  .c4 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c4 {
    -webkit-flex-basis: 66.66666666666667%;
    -ms-flex-preferred-size: 66.66666666666667%;
    flex-basis: 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
}

@media only screen and (max-width:47.9375rem) {
  .c0 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

<div
    className="c0 c1"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <div
                    className="c5"
                >
                    <p
                        className="c6 c7"
                    >
                        Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                         
                        <a
                            href="https://docs.joyent.com/private-cloud/install/cns"
                            rel="noopener noreferrer"
                            target="_blank"
                        >
                            Read the docs
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div
        className="c8"
    >
        <form
            onChange={[Function]}
        >
            <div
                className="c9"
                name="enabled"
                role="group"
                style={undefined}
                type="checkbox"
            >
                <div
                    className="c10"
                >
                    <label
                        className="c11 c12"
                        htmlFor="k"
                    >
                        Enable Firewall
                    </label>
                    <div
                        className="c13"
                    >
                        <div
                            className="c14"
                        >
                            <input
                                checked={undefined}
                                className="c15"
                                disabled={false}
                                id="k"
                                onBlur={undefined}
                                type="checkbox"
                            />
                            <label
                                className="c16"
                                disabled={false}
                                htmlFor="k"
                                id="k"
                                onBlur={undefined}
                            />
                            <label
                                className="c11 c12"
                                disabled={false}
                                htmlFor="k"
                                id="k"
                                onBlur={undefined}
                            >
                                 
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div
        className="c17 c3"
        height="0.0625rem"
    />
    <div
        className="c18"
    >
        <div
            className="c19 c20"
            disabled={false}
            name="card"
        >
            <div
                className="c21"
            >
                <div
                    className="c22"
                >
                    <div
                        className="c23"
                    >
                        <svg
                            height={60}
                            viewBox="0 0 79 60"
                            width={79}
                            xmlns="http://www.w3.org/2000/svg"
                            xmlnsXlink="http://www.w3.org/1999/xlink"
                        >
                            <title>
                                Guilty_Salamander
                            </title>
                            <desc>
                                Created using Figma
                            </desc>
                            <use
                                fill="#FAA427"
                                transform="translate(23.8 22)"
                                xlinkHref="#a"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(27.3 25.5)"
                                xlinkHref="#b"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(4.8 32.1)"
                                xlinkHref="#c"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(12.2 31.8)"
                                xlinkHref="#d"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(54.4 31.9)"
                                xlinkHref="#e"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(54.4 32)"
                                xlinkHref="#f"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(15.8 26.8)"
                                xlinkHref="#g"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(5)"
                                xlinkHref="#h"
                            />
                            <use
                                fill="#FAFBFC"
                                transform="rotate(-15.13 41.037 5.45)"
                                xlinkHref="#i"
                            />
                            <use
                                fill="#412B13"
                                transform="rotate(-15.13 67.273 -24.78)"
                                xlinkHref="#j"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(2.2 8)"
                                xlinkHref="#k"
                            />
                            <use
                                fill="#FAFBFC"
                                transform="rotate(-74.87 40.46 -20.511)"
                                xlinkHref="#l"
                            />
                            <use
                                fill="#412B13"
                                transform="rotate(-74.87 41.364 -22.098)"
                                xlinkHref="#m"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(52.1 8)"
                                xlinkHref="#n"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(31.5 34.3)"
                                xlinkHref="#o"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(14.3)"
                                xlinkHref="#p"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(30.9 18.9)"
                                xlinkHref="#q"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(37.6 18.9)"
                                xlinkHref="#r"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(27.4 53.9)"
                                xlinkHref="#s"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(39.1 53.9)"
                                xlinkHref="#t"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(27.4 53.9)"
                                xlinkHref="#u"
                            />
                            <use
                                fill="#342013"
                                transform="translate(28.6 26.2)"
                                xlinkHref="#v"
                            />
                            <use
                                fill="#FFF"
                                transform="translate(32.6 28.7)"
                                xlinkHref="#w"
                            />
                            <defs>
                                <path
                                    d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
                                    id="a"
                                />
                                <path
                                    d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
                                    id="b"
                                />
                                <path
                                    d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
                                    id="c"
                                />
                                <path
                                    d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
                                    id="d"
                                />
                                <path
                                    d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
                                    id="e"
                                />
                                <path
                                    d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
                                    id="f"
                                />
                                <path
                                    d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
                                    id="g"
                                />
                                <path
                                    d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
                                    id="h"
                                />
                                <path
                                    d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
                                    id="i"
                                />
                                <path
                                    d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
                                    id="j"
                                />
                                <path
                                    d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
                                    id="k"
                                />
                                <path
                                    d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
                                    id="l"
                                />
                                <path
                                    d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
                                    id="m"
                                />
                                <path
                                    d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
                                    id="n"
                                />
                                <path
                                    d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
                                    id="o"
                                />
                                <path
                                    d="M0 0l22.258 18.498L44.516 0H0z"
                                    id="p"
                                />
                                <path
                                    d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
                                    id="q"
                                />
                                <path
                                    d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
                                    id="r"
                                />
                                <path
                                    d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
                                    id="s"
                                />
                                <path
                                    d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
                                    id="t"
                                />
                                <path
                                    d="M31.328 0H0v1.474h31.328V0z"
                                    id="u"
                                />
                                <path
                                    d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
                                    id="v"
                                />
                                <path
                                    d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
                                    id="w"
                                />
                            </defs>
                        </svg>
                    </div>
                    <h3
                        className="c24 c25"
                    >
                        Sorry, but we weren’t able to find any firewall rules.
                    </h3>
                </div>
            </div>
        </div>
    </div>
</div>,
  .c2 {
  margin-bottom: 0.375rem;
}

.c5 {
  margin-bottom: 1.125rem;
}

.c8 {
  margin-bottom: 1.875rem;
}

.c13 {
  margin-left: 0.75rem;
}

.c20 {
  margin-top: 3rem;
}

.c25 {
  margin-bottom: 0.75rem;
}

.c18 {
  margin-top: 1.875rem;
}

.c19 {
  margin-right: 0.75rem;
}

.c23 {
  padding: 8rem;
}

.c7 {
  color: rgb(73,73,73);
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c12 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c1 {
  margin-right: auto;
  margin-left: auto;
}

.c3 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.c4 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 62.5rem;
  padding-bottom: 1.125rem;
}

.c27 {
  color: rgb(73,73,73);
  font-weight: normal;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c17 {
  background-color: rgb(216,216,216);
}

.c10 {
  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-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c24 {
  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-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -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;
}

.c22 {
  box-sizing: content-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  border-width: 0.0625rem;
  border-style: solid;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  color: rgb(73,73,73);
  background-color: rgb(255,255,255);
  border-color: rgb(216,216,216);
}

.c9 {
  display: inline-block;
  padding: 0;
  border: none;
  overflow: hidden;
  height: auto;
  -webkit-padding-before: 0;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  -webkit-padding-after: 0;
}

.c11 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c14 {
  position: relative;
  vertical-align: text-bottom;
  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;
}

.c15 {
  display: none;
}

.c15:checked + label {
  background: #3B46CC;
  border: 0.0625rem solid rgb(59,70,204);
}

.c15:checked + label:after {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c15:checked + label:active {
  box-shadow: none;
}

.c16 {
  outline: 0;
  display: block;
  width: 2.875rem;
  height: 1.5rem;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  background: rgb(250,250,250);
  border-radius: 1.4375rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 0.0625rem solid rgb(216,216,216);
}

.c16::selection {
  background: none;
}

.c16:active {
  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
}

.c16:hover {
  border: 0.0625rem solid rgb(59,70,204);
}

.c16:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c16:after,
.c16:before {
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
}

.c16:after {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  border-radius: 50%;
  background: rgb(255,255,255);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
}

.c16:active {
  box-shadow: inset 0 0 0 2em rgb(216,216,216);
}

.c16:before {
  display: none;
}

.c6 {
  margin: 0;
}

.c26 {
  color: rgb(151,151,151);
  text-align: center;
}

.c21 {
  width: calc(100% - 0.125rem);
}

@media only screen and (min-width:48em) {
  .c1 {
    width: 46rem;
  }
}

@media only screen and (min-width:64em) {
  .c1 {
    width: 56rem;
  }
}

@media only screen and (min-width:75em) {
  .c1 {
    width: 59rem;
  }
}

@media only screen and (min-width:0em) {
  .c4 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c4 {
    -webkit-flex-basis: 66.66666666666667%;
    -ms-flex-preferred-size: 66.66666666666667%;
    flex-basis: 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
}

@media only screen and (max-width:47.9375rem) {
  .c0 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

<div
    className="c0 c1"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <div
                    className="c5"
                >
                    <p
                        className="c6 c7"
                    >
                        Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                         
                        <a
                            href="https://docs.joyent.com/private-cloud/install/cns"
                            rel="noopener noreferrer"
                            target="_blank"
                        >
                            Read the docs
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div
        className="c8"
    >
        <form
            onChange={[Function]}
        >
            <div
                className="c9"
                name="enabled"
                role="group"
                style={undefined}
                type="checkbox"
            >
                <div
                    className="c10"
                >
                    <label
                        className="c11 c12"
                        htmlFor="l"
                    >
                        Enable Firewall
                    </label>
                    <div
                        className="c13"
                    >
                        <div
                            className="c14"
                        >
                            <input
                                checked={undefined}
                                className="c15"
                                disabled={false}
                                id="l"
                                onBlur={undefined}
                                type="checkbox"
                            />
                            <label
                                className="c16"
                                disabled={false}
                                htmlFor="l"
                                id="l"
                                onBlur={undefined}
                            />
                            <label
                                className="c11 c12"
                                disabled={false}
                                htmlFor="l"
                                id="l"
                                onBlur={undefined}
                            >
                                 
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div
        className="c17 c3"
        height="0.0625rem"
    />
    <div
        className="c18"
    >
        <form>
            <div
                className="c9"
                name="inactive"
                role="group"
                style={undefined}
                type="checkbox"
            >
                <div
                    className="c10"
                >
                    <div
                        className="c19"
                    >
                        <div
                            className="c14"
                        >
                            <input
                                checked={undefined}
                                className="c15"
                                id="m"
                                onBlur={undefined}
                                type="checkbox"
                            />
                            <label
                                className="c16"
                                htmlFor="m"
                                id="m"
                                onBlur={undefined}
                            />
                            <label
                                className="c11 c12"
                                htmlFor="m"
                                id="m"
                                onBlur={undefined}
                            >
                                 
                            </label>
                        </div>
                    </div>
                    <label
                        className="c11 c12"
                        htmlFor="m"
                    >
                        Show inactive rules
                    </label>
                </div>
            </div>
        </form>
    </div>
    <div
        className="c20"
    >
        <div
            className="c21 c22"
            disabled={false}
            name="card"
        >
            <div
                className="c23"
            >
                <div
                    className="c24"
                >
                    <div
                        className="c25"
                    >
                        <svg
                            height={60}
                            viewBox="0 0 79 60"
                            width={79}
                            xmlns="http://www.w3.org/2000/svg"
                            xmlnsXlink="http://www.w3.org/1999/xlink"
                        >
                            <title>
                                Guilty_Salamander
                            </title>
                            <desc>
                                Created using Figma
                            </desc>
                            <use
                                fill="#FAA427"
                                transform="translate(23.8 22)"
                                xlinkHref="#a"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(27.3 25.5)"
                                xlinkHref="#b"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(4.8 32.1)"
                                xlinkHref="#c"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(12.2 31.8)"
                                xlinkHref="#d"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(54.4 31.9)"
                                xlinkHref="#e"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(54.4 32)"
                                xlinkHref="#f"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(15.8 26.8)"
                                xlinkHref="#g"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(5)"
                                xlinkHref="#h"
                            />
                            <use
                                fill="#FAFBFC"
                                transform="rotate(-15.13 41.037 5.45)"
                                xlinkHref="#i"
                            />
                            <use
                                fill="#412B13"
                                transform="rotate(-15.13 67.273 -24.78)"
                                xlinkHref="#j"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(2.2 8)"
                                xlinkHref="#k"
                            />
                            <use
                                fill="#FAFBFC"
                                transform="rotate(-74.87 40.46 -20.511)"
                                xlinkHref="#l"
                            />
                            <use
                                fill="#412B13"
                                transform="rotate(-74.87 41.364 -22.098)"
                                xlinkHref="#m"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(52.1 8)"
                                xlinkHref="#n"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(31.5 34.3)"
                                xlinkHref="#o"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(14.3)"
                                xlinkHref="#p"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(30.9 18.9)"
                                xlinkHref="#q"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(37.6 18.9)"
                                xlinkHref="#r"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(27.4 53.9)"
                                xlinkHref="#s"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(39.1 53.9)"
                                xlinkHref="#t"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(27.4 53.9)"
                                xlinkHref="#u"
                            />
                            <use
                                fill="#342013"
                                transform="translate(28.6 26.2)"
                                xlinkHref="#v"
                            />
                            <use
                                fill="#FFF"
                                transform="translate(32.6 28.7)"
                                xlinkHref="#w"
                            />
                            <defs>
                                <path
                                    d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
                                    id="a"
                                />
                                <path
                                    d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
                                    id="b"
                                />
                                <path
                                    d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
                                    id="c"
                                />
                                <path
                                    d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
                                    id="d"
                                />
                                <path
                                    d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
                                    id="e"
                                />
                                <path
                                    d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
                                    id="f"
                                />
                                <path
                                    d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
                                    id="g"
                                />
                                <path
                                    d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
                                    id="h"
                                />
                                <path
                                    d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
                                    id="i"
                                />
                                <path
                                    d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
                                    id="j"
                                />
                                <path
                                    d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
                                    id="k"
                                />
                                <path
                                    d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
                                    id="l"
                                />
                                <path
                                    d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
                                    id="m"
                                />
                                <path
                                    d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
                                    id="n"
                                />
                                <path
                                    d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
                                    id="o"
                                />
                                <path
                                    d="M0 0l22.258 18.498L44.516 0H0z"
                                    id="p"
                                />
                                <path
                                    d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
                                    id="q"
                                />
                                <path
                                    d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
                                    id="r"
                                />
                                <path
                                    d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
                                    id="s"
                                />
                                <path
                                    d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
                                    id="t"
                                />
                                <path
                                    d="M31.328 0H0v1.474h31.328V0z"
                                    id="u"
                                />
                                <path
                                    d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
                                    id="v"
                                />
                                <path
                                    d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
                                    id="w"
                                />
                            </defs>
                        </svg>
                    </div>
                    <h3
                        className="c26 c27"
                    >
                        Sorry, but we weren’t able to find any firewall rules.
                    </h3>
                </div>
            </div>
        </div>
    </div>
</div>,
]
`;

exports[`renders <Firewall inactive /> without throwing 1`] = `
Array [
  .c2 {
  margin-bottom: 0.375rem;
}

.c5 {
  margin-bottom: 1.125rem;
}

.c8 {
  margin-bottom: 1.875rem;
}

.c13 {
  margin-left: 0.75rem;
}

.c18 {
  margin-top: 3rem;
}

.c23 {
  margin-bottom: 0.75rem;
}

.c21 {
  padding: 8rem;
}

.c7 {
  color: rgb(73,73,73);
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c12 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c1 {
  margin-right: auto;
  margin-left: auto;
}

.c3 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.c4 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 62.5rem;
  padding-bottom: 1.125rem;
}

.c25 {
  color: rgb(73,73,73);
  font-weight: normal;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c17 {
  background-color: rgb(216,216,216);
}

.c10 {
  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-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c22 {
  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-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -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;
}

.c20 {
  box-sizing: content-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  border-width: 0.0625rem;
  border-style: solid;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  color: rgb(73,73,73);
  background-color: rgb(255,255,255);
  border-color: rgb(216,216,216);
}

.c9 {
  display: inline-block;
  padding: 0;
  border: none;
  overflow: hidden;
  height: auto;
  -webkit-padding-before: 0;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  -webkit-padding-after: 0;
}

.c11 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c14 {
  position: relative;
  vertical-align: text-bottom;
  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;
}

.c15 {
  display: none;
}

.c15:checked + label {
  background: #3B46CC;
  border: 0.0625rem solid rgb(59,70,204);
}

.c15:checked + label:after {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c15:checked + label:active {
  box-shadow: none;
}

.c16 {
  outline: 0;
  display: block;
  width: 2.875rem;
  height: 1.5rem;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  background: rgb(250,250,250);
  border-radius: 1.4375rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 0.0625rem solid rgb(216,216,216);
}

.c16::selection {
  background: none;
}

.c16:active {
  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
}

.c16:hover {
  border: 0.0625rem solid rgb(59,70,204);
}

.c16:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c16:after,
.c16:before {
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
}

.c16:after {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  border-radius: 50%;
  background: rgb(255,255,255);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
}

.c16:active {
  box-shadow: inset 0 0 0 2em rgb(216,216,216);
}

.c16:before {
  display: none;
}

.c6 {
  margin: 0;
}

.c24 {
  color: rgb(151,151,151);
  text-align: center;
}

.c19 {
  width: calc(100% - 0.125rem);
}

@media only screen and (min-width:48em) {
  .c1 {
    width: 46rem;
  }
}

@media only screen and (min-width:64em) {
  .c1 {
    width: 56rem;
  }
}

@media only screen and (min-width:75em) {
  .c1 {
    width: 59rem;
  }
}

@media only screen and (min-width:0em) {
  .c4 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c4 {
    -webkit-flex-basis: 66.66666666666667%;
    -ms-flex-preferred-size: 66.66666666666667%;
    flex-basis: 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
}

@media only screen and (max-width:47.9375rem) {
  .c0 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

<div
    className="c0 c1"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <div
                    className="c5"
                >
                    <p
                        className="c6 c7"
                    >
                        Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                         
                        <a
                            href="https://docs.joyent.com/private-cloud/install/cns"
                            rel="noopener noreferrer"
                            target="_blank"
                        >
                            Read the docs
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div
        className="c8"
    >
        <form
            onChange={[Function]}
        >
            <div
                className="c9"
                name="enabled"
                role="group"
                style={undefined}
                type="checkbox"
            >
                <div
                    className="c10"
                >
                    <label
                        className="c11 c12"
                        htmlFor="n"
                    >
                        Enable Firewall
                    </label>
                    <div
                        className="c13"
                    >
                        <div
                            className="c14"
                        >
                            <input
                                checked={undefined}
                                className="c15"
                                disabled={false}
                                id="n"
                                onBlur={undefined}
                                type="checkbox"
                            />
                            <label
                                className="c16"
                                disabled={false}
                                htmlFor="n"
                                id="n"
                                onBlur={undefined}
                            />
                            <label
                                className="c11 c12"
                                disabled={false}
                                htmlFor="n"
                                id="n"
                                onBlur={undefined}
                            >
                                 
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div
        className="c17 c3"
        height="0.0625rem"
    />
    <div
        className="c18"
    >
        <div
            className="c19 c20"
            disabled={false}
            name="card"
        >
            <div
                className="c21"
            >
                <div
                    className="c22"
                >
                    <div
                        className="c23"
                    >
                        <svg
                            height={60}
                            viewBox="0 0 79 60"
                            width={79}
                            xmlns="http://www.w3.org/2000/svg"
                            xmlnsXlink="http://www.w3.org/1999/xlink"
                        >
                            <title>
                                Guilty_Salamander
                            </title>
                            <desc>
                                Created using Figma
                            </desc>
                            <use
                                fill="#FAA427"
                                transform="translate(23.8 22)"
                                xlinkHref="#a"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(27.3 25.5)"
                                xlinkHref="#b"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(4.8 32.1)"
                                xlinkHref="#c"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(12.2 31.8)"
                                xlinkHref="#d"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(54.4 31.9)"
                                xlinkHref="#e"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(54.4 32)"
                                xlinkHref="#f"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(15.8 26.8)"
                                xlinkHref="#g"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(5)"
                                xlinkHref="#h"
                            />
                            <use
                                fill="#FAFBFC"
                                transform="rotate(-15.13 41.037 5.45)"
                                xlinkHref="#i"
                            />
                            <use
                                fill="#412B13"
                                transform="rotate(-15.13 67.273 -24.78)"
                                xlinkHref="#j"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(2.2 8)"
                                xlinkHref="#k"
                            />
                            <use
                                fill="#FAFBFC"
                                transform="rotate(-74.87 40.46 -20.511)"
                                xlinkHref="#l"
                            />
                            <use
                                fill="#412B13"
                                transform="rotate(-74.87 41.364 -22.098)"
                                xlinkHref="#m"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(52.1 8)"
                                xlinkHref="#n"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(31.5 34.3)"
                                xlinkHref="#o"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(14.3)"
                                xlinkHref="#p"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(30.9 18.9)"
                                xlinkHref="#q"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(37.6 18.9)"
                                xlinkHref="#r"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(27.4 53.9)"
                                xlinkHref="#s"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(39.1 53.9)"
                                xlinkHref="#t"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(27.4 53.9)"
                                xlinkHref="#u"
                            />
                            <use
                                fill="#342013"
                                transform="translate(28.6 26.2)"
                                xlinkHref="#v"
                            />
                            <use
                                fill="#FFF"
                                transform="translate(32.6 28.7)"
                                xlinkHref="#w"
                            />
                            <defs>
                                <path
                                    d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
                                    id="a"
                                />
                                <path
                                    d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
                                    id="b"
                                />
                                <path
                                    d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
                                    id="c"
                                />
                                <path
                                    d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
                                    id="d"
                                />
                                <path
                                    d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
                                    id="e"
                                />
                                <path
                                    d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
                                    id="f"
                                />
                                <path
                                    d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
                                    id="g"
                                />
                                <path
                                    d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
                                    id="h"
                                />
                                <path
                                    d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
                                    id="i"
                                />
                                <path
                                    d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
                                    id="j"
                                />
                                <path
                                    d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
                                    id="k"
                                />
                                <path
                                    d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
                                    id="l"
                                />
                                <path
                                    d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
                                    id="m"
                                />
                                <path
                                    d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
                                    id="n"
                                />
                                <path
                                    d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
                                    id="o"
                                />
                                <path
                                    d="M0 0l22.258 18.498L44.516 0H0z"
                                    id="p"
                                />
                                <path
                                    d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
                                    id="q"
                                />
                                <path
                                    d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
                                    id="r"
                                />
                                <path
                                    d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
                                    id="s"
                                />
                                <path
                                    d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
                                    id="t"
                                />
                                <path
                                    d="M31.328 0H0v1.474h31.328V0z"
                                    id="u"
                                />
                                <path
                                    d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
                                    id="v"
                                />
                                <path
                                    d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
                                    id="w"
                                />
                            </defs>
                        </svg>
                    </div>
                    <h3
                        className="c24 c25"
                    >
                        Sorry, but we weren’t able to find any firewall rules.
                    </h3>
                </div>
            </div>
        </div>
    </div>
</div>,
  .c2 {
  margin-bottom: 0.375rem;
}

.c5 {
  margin-bottom: 1.125rem;
}

.c8 {
  margin-bottom: 1.875rem;
}

.c13 {
  margin-left: 0.75rem;
}

.c20 {
  margin-top: 3rem;
}

.c25 {
  margin-bottom: 0.75rem;
}

.c18 {
  margin-top: 1.875rem;
}

.c19 {
  margin-right: 0.75rem;
}

.c23 {
  padding: 8rem;
}

.c7 {
  color: rgb(73,73,73);
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c12 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c1 {
  margin-right: auto;
  margin-left: auto;
}

.c3 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.c4 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 62.5rem;
  padding-bottom: 1.125rem;
}

.c27 {
  color: rgb(73,73,73);
  font-weight: normal;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c17 {
  background-color: rgb(216,216,216);
}

.c10 {
  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-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c24 {
  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-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -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;
}

.c22 {
  box-sizing: content-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  border-width: 0.0625rem;
  border-style: solid;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  color: rgb(73,73,73);
  background-color: rgb(255,255,255);
  border-color: rgb(216,216,216);
}

.c9 {
  display: inline-block;
  padding: 0;
  border: none;
  overflow: hidden;
  height: auto;
  -webkit-padding-before: 0;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  -webkit-padding-after: 0;
}

.c11 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c14 {
  position: relative;
  vertical-align: text-bottom;
  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;
}

.c15 {
  display: none;
}

.c15:checked + label {
  background: #3B46CC;
  border: 0.0625rem solid rgb(59,70,204);
}

.c15:checked + label:after {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c15:checked + label:active {
  box-shadow: none;
}

.c16 {
  outline: 0;
  display: block;
  width: 2.875rem;
  height: 1.5rem;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  background: rgb(250,250,250);
  border-radius: 1.4375rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 0.0625rem solid rgb(216,216,216);
}

.c16::selection {
  background: none;
}

.c16:active {
  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
}

.c16:hover {
  border: 0.0625rem solid rgb(59,70,204);
}

.c16:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c16:after,
.c16:before {
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
}

.c16:after {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  border-radius: 50%;
  background: rgb(255,255,255);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
}

.c16:active {
  box-shadow: inset 0 0 0 2em rgb(216,216,216);
}

.c16:before {
  display: none;
}

.c6 {
  margin: 0;
}

.c26 {
  color: rgb(151,151,151);
  text-align: center;
}

.c21 {
  width: calc(100% - 0.125rem);
}

@media only screen and (min-width:48em) {
  .c1 {
    width: 46rem;
  }
}

@media only screen and (min-width:64em) {
  .c1 {
    width: 56rem;
  }
}

@media only screen and (min-width:75em) {
  .c1 {
    width: 59rem;
  }
}

@media only screen and (min-width:0em) {
  .c4 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c4 {
    -webkit-flex-basis: 66.66666666666667%;
    -ms-flex-preferred-size: 66.66666666666667%;
    flex-basis: 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
}

@media only screen and (max-width:47.9375rem) {
  .c0 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

<div
    className="c0 c1"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <div
                    className="c5"
                >
                    <p
                        className="c6 c7"
                    >
                        Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                         
                        <a
                            href="https://docs.joyent.com/private-cloud/install/cns"
                            rel="noopener noreferrer"
                            target="_blank"
                        >
                            Read the docs
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div
        className="c8"
    >
        <form
            onChange={[Function]}
        >
            <div
                className="c9"
                name="enabled"
                role="group"
                style={undefined}
                type="checkbox"
            >
                <div
                    className="c10"
                >
                    <label
                        className="c11 c12"
                        htmlFor="o"
                    >
                        Enable Firewall
                    </label>
                    <div
                        className="c13"
                    >
                        <div
                            className="c14"
                        >
                            <input
                                checked={undefined}
                                className="c15"
                                disabled={false}
                                id="o"
                                onBlur={undefined}
                                type="checkbox"
                            />
                            <label
                                className="c16"
                                disabled={false}
                                htmlFor="o"
                                id="o"
                                onBlur={undefined}
                            />
                            <label
                                className="c11 c12"
                                disabled={false}
                                htmlFor="o"
                                id="o"
                                onBlur={undefined}
                            >
                                 
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div
        className="c17 c3"
        height="0.0625rem"
    />
    <div
        className="c18"
    >
        <form>
            <div
                className="c9"
                name="inactive"
                role="group"
                style={undefined}
                type="checkbox"
            >
                <div
                    className="c10"
                >
                    <div
                        className="c19"
                    >
                        <div
                            className="c14"
                        >
                            <input
                                checked={undefined}
                                className="c15"
                                id="p"
                                onBlur={undefined}
                                type="checkbox"
                            />
                            <label
                                className="c16"
                                htmlFor="p"
                                id="p"
                                onBlur={undefined}
                            />
                            <label
                                className="c11 c12"
                                htmlFor="p"
                                id="p"
                                onBlur={undefined}
                            >
                                 
                            </label>
                        </div>
                    </div>
                    <label
                        className="c11 c12"
                        htmlFor="p"
                    >
                        Show inactive rules
                    </label>
                </div>
            </div>
        </form>
    </div>
    <div
        className="c20"
    >
        <div
            className="c21 c22"
            disabled={false}
            name="card"
        >
            <div
                className="c23"
            >
                <div
                    className="c24"
                >
                    <div
                        className="c25"
                    >
                        <svg
                            height={60}
                            viewBox="0 0 79 60"
                            width={79}
                            xmlns="http://www.w3.org/2000/svg"
                            xmlnsXlink="http://www.w3.org/1999/xlink"
                        >
                            <title>
                                Guilty_Salamander
                            </title>
                            <desc>
                                Created using Figma
                            </desc>
                            <use
                                fill="#FAA427"
                                transform="translate(23.8 22)"
                                xlinkHref="#a"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(27.3 25.5)"
                                xlinkHref="#b"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(4.8 32.1)"
                                xlinkHref="#c"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(12.2 31.8)"
                                xlinkHref="#d"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(54.4 31.9)"
                                xlinkHref="#e"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(54.4 32)"
                                xlinkHref="#f"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(15.8 26.8)"
                                xlinkHref="#g"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(5)"
                                xlinkHref="#h"
                            />
                            <use
                                fill="#FAFBFC"
                                transform="rotate(-15.13 41.037 5.45)"
                                xlinkHref="#i"
                            />
                            <use
                                fill="#412B13"
                                transform="rotate(-15.13 67.273 -24.78)"
                                xlinkHref="#j"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(2.2 8)"
                                xlinkHref="#k"
                            />
                            <use
                                fill="#FAFBFC"
                                transform="rotate(-74.87 40.46 -20.511)"
                                xlinkHref="#l"
                            />
                            <use
                                fill="#412B13"
                                transform="rotate(-74.87 41.364 -22.098)"
                                xlinkHref="#m"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(52.1 8)"
                                xlinkHref="#n"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(31.5 34.3)"
                                xlinkHref="#o"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(14.3)"
                                xlinkHref="#p"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(30.9 18.9)"
                                xlinkHref="#q"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(37.6 18.9)"
                                xlinkHref="#r"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(27.4 53.9)"
                                xlinkHref="#s"
                            />
                            <use
                                fill="#FAA427"
                                transform="translate(39.1 53.9)"
                                xlinkHref="#t"
                            />
                            <use
                                fill="#F3722C"
                                transform="translate(27.4 53.9)"
                                xlinkHref="#u"
                            />
                            <use
                                fill="#342013"
                                transform="translate(28.6 26.2)"
                                xlinkHref="#v"
                            />
                            <use
                                fill="#FFF"
                                transform="translate(32.6 28.7)"
                                xlinkHref="#w"
                            />
                            <defs>
                                <path
                                    d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
                                    id="a"
                                />
                                <path
                                    d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
                                    id="b"
                                />
                                <path
                                    d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
                                    id="c"
                                />
                                <path
                                    d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
                                    id="d"
                                />
                                <path
                                    d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
                                    id="e"
                                />
                                <path
                                    d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
                                    id="f"
                                />
                                <path
                                    d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
                                    id="g"
                                />
                                <path
                                    d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
                                    id="h"
                                />
                                <path
                                    d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
                                    id="i"
                                />
                                <path
                                    d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
                                    id="j"
                                />
                                <path
                                    d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
                                    id="k"
                                />
                                <path
                                    d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
                                    id="l"
                                />
                                <path
                                    d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
                                    id="m"
                                />
                                <path
                                    d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
                                    id="n"
                                />
                                <path
                                    d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
                                    id="o"
                                />
                                <path
                                    d="M0 0l22.258 18.498L44.516 0H0z"
                                    id="p"
                                />
                                <path
                                    d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
                                    id="q"
                                />
                                <path
                                    d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
                                    id="r"
                                />
                                <path
                                    d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
                                    id="s"
                                />
                                <path
                                    d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
                                    id="t"
                                />
                                <path
                                    d="M31.328 0H0v1.474h31.328V0z"
                                    id="u"
                                />
                                <path
                                    d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
                                    id="v"
                                />
                                <path
                                    d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
                                    id="w"
                                />
                            </defs>
                        </svg>
                    </div>
                    <h3
                        className="c26 c27"
                    >
                        Sorry, but we weren’t able to find any firewall rules.
                    </h3>
                </div>
            </div>
        </div>
    </div>
</div>,
]
`;

exports[`renders <Firewall loading /> without throwing 1`] = `
Array [
  .c2 {
  margin-bottom: 0.375rem;
}

.c5 {
  margin-bottom: 1.125rem;
}

.c9 {
  fill: rgb(59,70,204);
  stroke: rgb(59,70,204);
  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
  animation: iCqDak 1.5s ease-out 0s infinite;
}

.c10 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.c11 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.c7 {
  color: rgb(73,73,73);
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c8 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 1.25rem;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

.c12 {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  text-align: center;
}

.c1 {
  margin-right: auto;
  margin-left: auto;
}

.c3 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.c4 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 62.5rem;
  padding-bottom: 1.125rem;
}

.c6 {
  margin: 0;
}

@media only screen and (min-width:48em) {
  .c1 {
    width: 46rem;
  }
}

@media only screen and (min-width:64em) {
  .c1 {
    width: 56rem;
  }
}

@media only screen and (min-width:75em) {
  .c1 {
    width: 59rem;
  }
}

@media only screen and (min-width:0em) {
  .c4 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c4 {
    -webkit-flex-basis: 66.66666666666667%;
    -ms-flex-preferred-size: 66.66666666666667%;
    flex-basis: 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
}

@media only screen and (max-width:47.9375rem) {
  .c0 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

<div
    className="c0 c1"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <div
                    className="c5"
                >
                    <p
                        className="c6 c7"
                    >
                        Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                         
                        <a
                            href="https://docs.joyent.com/private-cloud/install/cns"
                            rel="noopener noreferrer"
                            target="_blank"
                        >
                            Read the docs
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div
        className="c8"
    >
        <svg
            height="10"
            width="28"
        >
            <rect
                className="c9"
                height="6"
                width="6"
                x="2"
                y="2"
            />
            <rect
                className="c10 c9"
                height="6"
                width="6"
                x="11"
                y="2"
            />
            <rect
                className="c11 c9"
                height="6"
                width="6"
                x="20"
                y="2"
            />
        </svg>
        <p
            className="c12 c7"
        >
            Loading...
        </p>
    </div>
</div>,
  .c2 {
  margin-bottom: 0.375rem;
}

.c5 {
  margin-bottom: 1.125rem;
}

.c9 {
  fill: rgb(59,70,204);
  stroke: rgb(59,70,204);
  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
  animation: iCqDak 1.5s ease-out 0s infinite;
}

.c10 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.c11 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.c7 {
  color: rgb(73,73,73);
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c8 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 1.25rem;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

.c12 {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  text-align: center;
}

.c1 {
  margin-right: auto;
  margin-left: auto;
}

.c3 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.c4 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 62.5rem;
  padding-bottom: 1.125rem;
}

.c6 {
  margin: 0;
}

@media only screen and (min-width:48em) {
  .c1 {
    width: 46rem;
  }
}

@media only screen and (min-width:64em) {
  .c1 {
    width: 56rem;
  }
}

@media only screen and (min-width:75em) {
  .c1 {
    width: 59rem;
  }
}

@media only screen and (min-width:0em) {
  .c4 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c4 {
    -webkit-flex-basis: 66.66666666666667%;
    -ms-flex-preferred-size: 66.66666666666667%;
    flex-basis: 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
}

@media only screen and (max-width:47.9375rem) {
  .c0 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

<div
    className="c0 c1"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <div
                    className="c5"
                >
                    <p
                        className="c6 c7"
                    >
                        Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                         
                        <a
                            href="https://docs.joyent.com/private-cloud/install/cns"
                            rel="noopener noreferrer"
                            target="_blank"
                        >
                            Read the docs
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div
        className="c8"
    >
        <svg
            height="10"
            width="28"
        >
            <rect
                className="c9"
                height="6"
                width="6"
                x="2"
                y="2"
            />
            <rect
                className="c10 c9"
                height="6"
                width="6"
                x="11"
                y="2"
            />
            <rect
                className="c11 c9"
                height="6"
                width="6"
                x="20"
                y="2"
            />
        </svg>
        <p
            className="c12 c7"
        >
            Loading...
        </p>
    </div>
</div>,
]
`;

exports[`renders <Firewall loadingError /> without throwing 1`] = `
.c2 {
  margin-bottom: 0.375rem;
}

.c5 {
  margin-bottom: 1.125rem;
}

.c8 {
  margin-bottom: 1.875rem;
}

.c18 {
  margin-left: 0.75rem;
}

.c23 {
  margin-top: 3rem;
}

.c28 {
  margin-bottom: 0.75rem;
}

.c26 {
  padding: 8rem;
}

.c7 {
  color: rgb(73,73,73);
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c17 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c1 {
  margin-right: auto;
  margin-left: auto;
}

.c3 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.c4 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 62.5rem;
  padding-bottom: 1.125rem;
}

.c30 {
  color: rgb(73,73,73);
  font-weight: normal;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c12 {
  color: rgb(73,73,73);
  font-weight: 600;
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c22 {
  background-color: rgb(216,216,216);
}

.c15 {
  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-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c27 {
  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-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -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;
}

.c9 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  background-color: rgb(255,255,255);
  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
  border: 0.0625rem solid rgb(216,216,216);
  border-radius: 0.1875rem;
  width: 100%;
}

.c10 {
  border-radius: 0.1875rem 0 0 0.1875rem;
  min-width: 0.75rem;
  min-height: 100%;
  background-color: rgb(0,152,88);
  background-color: rgb(210,67,58);
}

.c11 {
  padding: 1.125rem 1.125rem;
}

.c13 {
  line-height: 0.875rem;
  font-size: 0.8125rem;
}

.c25 {
  box-sizing: content-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  border-width: 0.0625rem;
  border-style: solid;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  color: rgb(73,73,73);
  background-color: rgb(255,255,255);
  border-color: rgb(216,216,216);
}

.c14 {
  display: inline-block;
  padding: 0;
  border: none;
  overflow: hidden;
  height: auto;
  -webkit-padding-before: 0;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  -webkit-padding-after: 0;
}

.c16 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c19 {
  position: relative;
  vertical-align: text-bottom;
  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;
}

.c20 {
  display: none;
}

.c20:checked + label {
  background: #3B46CC;
  border: 0.0625rem solid rgb(59,70,204);
}

.c20:checked + label:after {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c20:checked + label:active {
  box-shadow: none;
}

.c21 {
  outline: 0;
  display: block;
  width: 2.875rem;
  height: 1.5rem;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  background: rgb(250,250,250);
  border-radius: 1.4375rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 0.0625rem solid rgb(216,216,216);
}

.c21::selection {
  background: none;
}

.c21:active {
  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
}

.c21:hover {
  border: 0.0625rem solid rgb(59,70,204);
}

.c21:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c21:after,
.c21:before {
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
}

.c21:after {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  border-radius: 50%;
  background: rgb(255,255,255);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
}

.c21:active {
  box-shadow: inset 0 0 0 2em rgb(216,216,216);
}

.c21:before {
  display: none;
}

.c6 {
  margin: 0;
}

.c29 {
  color: rgb(151,151,151);
  text-align: center;
}

.c24 {
  width: calc(100% - 0.125rem);
}

@media only screen and (min-width:48em) {
  .c1 {
    width: 46rem;
  }
}

@media only screen and (min-width:64em) {
  .c1 {
    width: 56rem;
  }
}

@media only screen and (min-width:75em) {
  .c1 {
    width: 59rem;
  }
}

@media only screen and (min-width:0em) {
  .c4 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c4 {
    -webkit-flex-basis: 66.66666666666667%;
    -ms-flex-preferred-size: 66.66666666666667%;
    flex-basis: 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
}

@media only screen and (max-width:47.9375rem) {
  .c0 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

<div
  className="c0 c1"
>
  <div
    className="c2"
  >
    <div
      className="c3"
    >
      <div
        className="c4"
      >
        <div
          className="c5"
        >
          <p
            className="c6 c7"
          >
            Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
             
            <a
              href="https://docs.joyent.com/private-cloud/install/cns"
              rel="noopener noreferrer"
              target="_blank"
            >
              Read the docs
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div
    className="c8"
  >
    <div
      className="c9"
    >
      <div
        className="c10"
      />
      <div
        className="c11"
      >
        <h4
          className="c12"
        >
          Ooops!
        </h4>
        <p
          className="c13 c7"
        >
          An error occurred while loading your firewall rules
        </p>
      </div>
    </div>
  </div>
  <div
    className="c8"
  >
    <form
      onChange={[Function]}
    >
      <div
        className="c14"
        name="enabled"
        role="group"
        style={undefined}
        type="checkbox"
      >
        <div
          className="c15"
        >
          <label
            className="c16 c17"
            htmlFor="q"
          >
            Enable Firewall
          </label>
          <div
            className="c18"
          >
            <div
              className="c19"
            >
              <input
                checked={undefined}
                className="c20"
                disabled={false}
                id="q"
                onBlur={undefined}
                type="checkbox"
              />
              <label
                className="c21"
                disabled={false}
                htmlFor="q"
                id="q"
                onBlur={undefined}
              />
              <label
                className="c16 c17"
                disabled={false}
                htmlFor="q"
                id="q"
                onBlur={undefined}
              >
                 
              </label>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div
    className="c22 c3"
    height="0.0625rem"
  />
  <div
    className="c23"
  >
    <div
      className="c24 c25"
      disabled={false}
      name="card"
    >
      <div
        className="c26"
      >
        <div
          className="c27"
        >
          <div
            className="c28"
          >
            <svg
              height={60}
              viewBox="0 0 79 60"
              width={79}
              xmlns="http://www.w3.org/2000/svg"
              xmlnsXlink="http://www.w3.org/1999/xlink"
            >
              <title>
                Guilty_Salamander
              </title>
              <desc>
                Created using Figma
              </desc>
              <use
                fill="#FAA427"
                transform="translate(23.8 22)"
                xlinkHref="#a"
              />
              <use
                fill="#F3722C"
                transform="translate(27.3 25.5)"
                xlinkHref="#b"
              />
              <use
                fill="#FAA427"
                transform="translate(4.8 32.1)"
                xlinkHref="#c"
              />
              <use
                fill="#F3722C"
                transform="translate(12.2 31.8)"
                xlinkHref="#d"
              />
              <use
                fill="#FAA427"
                transform="translate(54.4 31.9)"
                xlinkHref="#e"
              />
              <use
                fill="#F3722C"
                transform="translate(54.4 32)"
                xlinkHref="#f"
              />
              <use
                fill="#FAA427"
                transform="translate(15.8 26.8)"
                xlinkHref="#g"
              />
              <use
                fill="#FAA427"
                transform="translate(5)"
                xlinkHref="#h"
              />
              <use
                fill="#FAFBFC"
                transform="rotate(-15.13 41.037 5.45)"
                xlinkHref="#i"
              />
              <use
                fill="#412B13"
                transform="rotate(-15.13 67.273 -24.78)"
                xlinkHref="#j"
              />
              <use
                fill="#F3722C"
                transform="translate(2.2 8)"
                xlinkHref="#k"
              />
              <use
                fill="#FAFBFC"
                transform="rotate(-74.87 40.46 -20.511)"
                xlinkHref="#l"
              />
              <use
                fill="#412B13"
                transform="rotate(-74.87 41.364 -22.098)"
                xlinkHref="#m"
              />
              <use
                fill="#F3722C"
                transform="translate(52.1 8)"
                xlinkHref="#n"
              />
              <use
                fill="#F3722C"
                transform="translate(31.5 34.3)"
                xlinkHref="#o"
              />
              <use
                fill="#F3722C"
                transform="translate(14.3)"
                xlinkHref="#p"
              />
              <use
                fill="#F3722C"
                transform="translate(30.9 18.9)"
                xlinkHref="#q"
              />
              <use
                fill="#F3722C"
                transform="translate(37.6 18.9)"
                xlinkHref="#r"
              />
              <use
                fill="#FAA427"
                transform="translate(27.4 53.9)"
                xlinkHref="#s"
              />
              <use
                fill="#FAA427"
                transform="translate(39.1 53.9)"
                xlinkHref="#t"
              />
              <use
                fill="#F3722C"
                transform="translate(27.4 53.9)"
                xlinkHref="#u"
              />
              <use
                fill="#342013"
                transform="translate(28.6 26.2)"
                xlinkHref="#v"
              />
              <use
                fill="#FFF"
                transform="translate(32.6 28.7)"
                xlinkHref="#w"
              />
              <defs>
                <path
                  d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
                  id="a"
                />
                <path
                  d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
                  id="b"
                />
                <path
                  d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
                  id="c"
                />
                <path
                  d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
                  id="d"
                />
                <path
                  d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
                  id="e"
                />
                <path
                  d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
                  id="f"
                />
                <path
                  d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
                  id="g"
                />
                <path
                  d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
                  id="h"
                />
                <path
                  d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
                  id="i"
                />
                <path
                  d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
                  id="j"
                />
                <path
                  d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
                  id="k"
                />
                <path
                  d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
                  id="l"
                />
                <path
                  d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
                  id="m"
                />
                <path
                  d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
                  id="n"
                />
                <path
                  d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
                  id="o"
                />
                <path
                  d="M0 0l22.258 18.498L44.516 0H0z"
                  id="p"
                />
                <path
                  d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
                  id="q"
                />
                <path
                  d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
                  id="r"
                />
                <path
                  d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
                  id="s"
                />
                <path
                  d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
                  id="t"
                />
                <path
                  d="M31.328 0H0v1.474h31.328V0z"
                  id="u"
                />
                <path
                  d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
                  id="v"
                />
                <path
                  d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
                  id="w"
                />
              </defs>
            </svg>
          </div>
          <h3
            className="c29 c30"
          >
            Sorry, but we weren’t able to find any firewall rules.
          </h3>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders <Firewall mutationError /> without throwing 1`] = `
.c2 {
  margin-bottom: 0.375rem;
}

.c5 {
  margin-bottom: 1.125rem;
}

.c8 {
  margin-bottom: 1.875rem;
}

.c18 {
  margin-left: 0.75rem;
}

.c23 {
  margin-top: 3rem;
}

.c28 {
  margin-bottom: 0.75rem;
}

.c26 {
  padding: 8rem;
}

.c7 {
  color: rgb(73,73,73);
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c17 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c1 {
  margin-right: auto;
  margin-left: auto;
}

.c3 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.c4 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 62.5rem;
  padding-bottom: 1.125rem;
}

.c30 {
  color: rgb(73,73,73);
  font-weight: normal;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c12 {
  color: rgb(73,73,73);
  font-weight: 600;
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c22 {
  background-color: rgb(216,216,216);
}

.c15 {
  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-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c27 {
  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-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -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;
}

.c9 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  background-color: rgb(255,255,255);
  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
  border: 0.0625rem solid rgb(216,216,216);
  border-radius: 0.1875rem;
  width: 100%;
}

.c10 {
  border-radius: 0.1875rem 0 0 0.1875rem;
  min-width: 0.75rem;
  min-height: 100%;
  background-color: rgb(0,152,88);
  background-color: rgb(210,67,58);
}

.c11 {
  padding: 1.125rem 1.125rem;
}

.c13 {
  line-height: 0.875rem;
  font-size: 0.8125rem;
}

.c25 {
  box-sizing: content-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  border-width: 0.0625rem;
  border-style: solid;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  color: rgb(73,73,73);
  background-color: rgb(255,255,255);
  border-color: rgb(216,216,216);
}

.c14 {
  display: inline-block;
  padding: 0;
  border: none;
  overflow: hidden;
  height: auto;
  -webkit-padding-before: 0;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  -webkit-padding-after: 0;
}

.c16 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c19 {
  position: relative;
  vertical-align: text-bottom;
  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;
}

.c20 {
  display: none;
}

.c20:checked + label {
  background: #3B46CC;
  border: 0.0625rem solid rgb(59,70,204);
}

.c20:checked + label:after {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c20:checked + label:active {
  box-shadow: none;
}

.c21 {
  outline: 0;
  display: block;
  width: 2.875rem;
  height: 1.5rem;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  background: rgb(250,250,250);
  border-radius: 1.4375rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 0.0625rem solid rgb(216,216,216);
}

.c21::selection {
  background: none;
}

.c21:active {
  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
}

.c21:hover {
  border: 0.0625rem solid rgb(59,70,204);
}

.c21:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c21:after,
.c21:before {
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
}

.c21:after {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  border-radius: 50%;
  background: rgb(255,255,255);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
}

.c21:active {
  box-shadow: inset 0 0 0 2em rgb(216,216,216);
}

.c21:before {
  display: none;
}

.c6 {
  margin: 0;
}

.c29 {
  color: rgb(151,151,151);
  text-align: center;
}

.c24 {
  width: calc(100% - 0.125rem);
}

@media only screen and (min-width:48em) {
  .c1 {
    width: 46rem;
  }
}

@media only screen and (min-width:64em) {
  .c1 {
    width: 56rem;
  }
}

@media only screen and (min-width:75em) {
  .c1 {
    width: 59rem;
  }
}

@media only screen and (min-width:0em) {
  .c4 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c4 {
    -webkit-flex-basis: 66.66666666666667%;
    -ms-flex-preferred-size: 66.66666666666667%;
    flex-basis: 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
}

@media only screen and (max-width:47.9375rem) {
  .c0 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

<div
  className="c0 c1"
>
  <div
    className="c2"
  >
    <div
      className="c3"
    >
      <div
        className="c4"
      >
        <div
          className="c5"
        >
          <p
            className="c6 c7"
          >
            Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
             
            <a
              href="https://docs.joyent.com/private-cloud/install/cns"
              rel="noopener noreferrer"
              target="_blank"
            >
              Read the docs
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div
    className="c8"
  >
    <div
      className="c9"
    >
      <div
        className="c10"
      />
      <div
        className="c11"
      >
        <h4
          className="c12"
        >
          Ooops!
        </h4>
        <p
          className="c13 c7"
        >
          error
        </p>
      </div>
    </div>
  </div>
  <div
    className="c8"
  >
    <form
      onChange={[Function]}
    >
      <div
        className="c14"
        name="enabled"
        role="group"
        style={undefined}
        type="checkbox"
      >
        <div
          className="c15"
        >
          <label
            className="c16 c17"
            htmlFor="r"
          >
            Enable Firewall
          </label>
          <div
            className="c18"
          >
            <div
              className="c19"
            >
              <input
                checked={undefined}
                className="c20"
                disabled={false}
                id="r"
                onBlur={undefined}
                type="checkbox"
              />
              <label
                className="c21"
                disabled={false}
                htmlFor="r"
                id="r"
                onBlur={undefined}
              />
              <label
                className="c16 c17"
                disabled={false}
                htmlFor="r"
                id="r"
                onBlur={undefined}
              >
                 
              </label>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div
    className="c22 c3"
    height="0.0625rem"
  />
  <div
    className="c23"
  >
    <div
      className="c24 c25"
      disabled={false}
      name="card"
    >
      <div
        className="c26"
      >
        <div
          className="c27"
        >
          <div
            className="c28"
          >
            <svg
              height={60}
              viewBox="0 0 79 60"
              width={79}
              xmlns="http://www.w3.org/2000/svg"
              xmlnsXlink="http://www.w3.org/1999/xlink"
            >
              <title>
                Guilty_Salamander
              </title>
              <desc>
                Created using Figma
              </desc>
              <use
                fill="#FAA427"
                transform="translate(23.8 22)"
                xlinkHref="#a"
              />
              <use
                fill="#F3722C"
                transform="translate(27.3 25.5)"
                xlinkHref="#b"
              />
              <use
                fill="#FAA427"
                transform="translate(4.8 32.1)"
                xlinkHref="#c"
              />
              <use
                fill="#F3722C"
                transform="translate(12.2 31.8)"
                xlinkHref="#d"
              />
              <use
                fill="#FAA427"
                transform="translate(54.4 31.9)"
                xlinkHref="#e"
              />
              <use
                fill="#F3722C"
                transform="translate(54.4 32)"
                xlinkHref="#f"
              />
              <use
                fill="#FAA427"
                transform="translate(15.8 26.8)"
                xlinkHref="#g"
              />
              <use
                fill="#FAA427"
                transform="translate(5)"
                xlinkHref="#h"
              />
              <use
                fill="#FAFBFC"
                transform="rotate(-15.13 41.037 5.45)"
                xlinkHref="#i"
              />
              <use
                fill="#412B13"
                transform="rotate(-15.13 67.273 -24.78)"
                xlinkHref="#j"
              />
              <use
                fill="#F3722C"
                transform="translate(2.2 8)"
                xlinkHref="#k"
              />
              <use
                fill="#FAFBFC"
                transform="rotate(-74.87 40.46 -20.511)"
                xlinkHref="#l"
              />
              <use
                fill="#412B13"
                transform="rotate(-74.87 41.364 -22.098)"
                xlinkHref="#m"
              />
              <use
                fill="#F3722C"
                transform="translate(52.1 8)"
                xlinkHref="#n"
              />
              <use
                fill="#F3722C"
                transform="translate(31.5 34.3)"
                xlinkHref="#o"
              />
              <use
                fill="#F3722C"
                transform="translate(14.3)"
                xlinkHref="#p"
              />
              <use
                fill="#F3722C"
                transform="translate(30.9 18.9)"
                xlinkHref="#q"
              />
              <use
                fill="#F3722C"
                transform="translate(37.6 18.9)"
                xlinkHref="#r"
              />
              <use
                fill="#FAA427"
                transform="translate(27.4 53.9)"
                xlinkHref="#s"
              />
              <use
                fill="#FAA427"
                transform="translate(39.1 53.9)"
                xlinkHref="#t"
              />
              <use
                fill="#F3722C"
                transform="translate(27.4 53.9)"
                xlinkHref="#u"
              />
              <use
                fill="#342013"
                transform="translate(28.6 26.2)"
                xlinkHref="#v"
              />
              <use
                fill="#FFF"
                transform="translate(32.6 28.7)"
                xlinkHref="#w"
              />
              <defs>
                <path
                  d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
                  id="a"
                />
                <path
                  d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
                  id="b"
                />
                <path
                  d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
                  id="c"
                />
                <path
                  d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
                  id="d"
                />
                <path
                  d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
                  id="e"
                />
                <path
                  d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
                  id="f"
                />
                <path
                  d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
                  id="g"
                />
                <path
                  d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
                  id="h"
                />
                <path
                  d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
                  id="i"
                />
                <path
                  d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
                  id="j"
                />
                <path
                  d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
                  id="k"
                />
                <path
                  d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
                  id="l"
                />
                <path
                  d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
                  id="m"
                />
                <path
                  d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
                  id="n"
                />
                <path
                  d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
                  id="o"
                />
                <path
                  d="M0 0l22.258 18.498L44.516 0H0z"
                  id="p"
                />
                <path
                  d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
                  id="q"
                />
                <path
                  d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
                  id="r"
                />
                <path
                  d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
                  id="s"
                />
                <path
                  d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
                  id="t"
                />
                <path
                  d="M31.328 0H0v1.474h31.328V0z"
                  id="u"
                />
                <path
                  d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
                  id="v"
                />
                <path
                  d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
                  id="w"
                />
              </defs>
            </svg>
          </div>
          <h3
            className="c29 c30"
          >
            Sorry, but we weren’t able to find any firewall rules.
          </h3>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders <Firewall tagRules /> without throwing 1`] = `
Array [
  .c2 {
  margin-bottom: 0.375rem;
}

.c5 {
  margin-bottom: 1.125rem;
}

.c8 {
  margin-bottom: 1.875rem;
}

.c13 {
  margin-left: 0.75rem;
}

.c7 {
  color: rgb(73,73,73);
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c12 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c1 {
  margin-right: auto;
  margin-left: auto;
}

.c3 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.c4 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 62.5rem;
  padding-bottom: 1.125rem;
}

.c17 {
  background-color: rgb(216,216,216);
}

.c10 {
  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-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c9 {
  display: inline-block;
  padding: 0;
  border: none;
  overflow: hidden;
  height: auto;
  -webkit-padding-before: 0;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  -webkit-padding-after: 0;
}

.c11 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c14 {
  position: relative;
  vertical-align: text-bottom;
  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;
}

.c15 {
  display: none;
}

.c15:checked + label {
  background: #3B46CC;
  border: 0.0625rem solid rgb(59,70,204);
}

.c15:checked + label:after {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c15:checked + label:active {
  box-shadow: none;
}

.c16 {
  outline: 0;
  display: block;
  width: 2.875rem;
  height: 1.5rem;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  background: rgb(250,250,250);
  border-radius: 1.4375rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 0.0625rem solid rgb(216,216,216);
}

.c16::selection {
  background: none;
}

.c16:active {
  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
}

.c16:hover {
  border: 0.0625rem solid rgb(59,70,204);
}

.c16:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c16:after,
.c16:before {
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
}

.c16:after {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  border-radius: 50%;
  background: rgb(255,255,255);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
}

.c16:active {
  box-shadow: inset 0 0 0 2em rgb(216,216,216);
}

.c16:before {
  display: none;
}

.c6 {
  margin: 0;
}

@media only screen and (min-width:48em) {
  .c1 {
    width: 46rem;
  }
}

@media only screen and (min-width:64em) {
  .c1 {
    width: 56rem;
  }
}

@media only screen and (min-width:75em) {
  .c1 {
    width: 59rem;
  }
}

@media only screen and (min-width:0em) {
  .c4 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c4 {
    -webkit-flex-basis: 66.66666666666667%;
    -ms-flex-preferred-size: 66.66666666666667%;
    flex-basis: 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
}

@media only screen and (max-width:47.9375rem) {
  .c0 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

<div
    className="c0 c1"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <div
                    className="c5"
                >
                    <p
                        className="c6 c7"
                    >
                        Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                         
                        <a
                            href="https://docs.joyent.com/private-cloud/install/cns"
                            rel="noopener noreferrer"
                            target="_blank"
                        >
                            Read the docs
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div
        className="c8"
    >
        <form
            onChange={[Function]}
        >
            <div
                className="c9"
                name="enabled"
                role="group"
                style={undefined}
                type="checkbox"
            >
                <div
                    className="c10"
                >
                    <label
                        className="c11 c12"
                        htmlFor="s"
                    >
                        Enable Firewall
                    </label>
                    <div
                        className="c13"
                    >
                        <div
                            className="c14"
                        >
                            <input
                                checked={undefined}
                                className="c15"
                                disabled={false}
                                id="s"
                                onBlur={undefined}
                                type="checkbox"
                            />
                            <label
                                className="c16"
                                disabled={false}
                                htmlFor="s"
                                id="s"
                                onBlur={undefined}
                            />
                            <label
                                className="c11 c12"
                                disabled={false}
                                htmlFor="s"
                                id="s"
                                onBlur={undefined}
                            >
                                 
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div
        className="c17 c3"
        height="0.0625rem"
    />
</div>,
  .c2 {
  margin-bottom: 0.375rem;
}

.c5 {
  margin-bottom: 1.125rem;
}

.c8 {
  margin-bottom: 1.875rem;
}

.c13 {
  margin-left: 0.75rem;
}

.c7 {
  color: rgb(73,73,73);
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c12 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c1 {
  margin-right: auto;
  margin-left: auto;
}

.c3 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.c4 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 62.5rem;
  padding-bottom: 1.125rem;
}

.c17 {
  background-color: rgb(216,216,216);
}

.c10 {
  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-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c9 {
  display: inline-block;
  padding: 0;
  border: none;
  overflow: hidden;
  height: auto;
  -webkit-padding-before: 0;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  -webkit-padding-after: 0;
}

.c11 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c14 {
  position: relative;
  vertical-align: text-bottom;
  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;
}

.c15 {
  display: none;
}

.c15:checked + label {
  background: #3B46CC;
  border: 0.0625rem solid rgb(59,70,204);
}

.c15:checked + label:after {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c15:checked + label:active {
  box-shadow: none;
}

.c16 {
  outline: 0;
  display: block;
  width: 2.875rem;
  height: 1.5rem;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  background: rgb(250,250,250);
  border-radius: 1.4375rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 0.0625rem solid rgb(216,216,216);
}

.c16::selection {
  background: none;
}

.c16:active {
  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
}

.c16:hover {
  border: 0.0625rem solid rgb(59,70,204);
}

.c16:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c16:after,
.c16:before {
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
}

.c16:after {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  border-radius: 50%;
  background: rgb(255,255,255);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
}

.c16:active {
  box-shadow: inset 0 0 0 2em rgb(216,216,216);
}

.c16:before {
  display: none;
}

.c6 {
  margin: 0;
}

@media only screen and (min-width:48em) {
  .c1 {
    width: 46rem;
  }
}

@media only screen and (min-width:64em) {
  .c1 {
    width: 56rem;
  }
}

@media only screen and (min-width:75em) {
  .c1 {
    width: 59rem;
  }
}

@media only screen and (min-width:0em) {
  .c4 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c4 {
    -webkit-flex-basis: 66.66666666666667%;
    -ms-flex-preferred-size: 66.66666666666667%;
    flex-basis: 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
}

@media only screen and (max-width:47.9375rem) {
  .c0 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

<div
    className="c0 c1"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <div
                    className="c5"
                >
                    <p
                        className="c6 c7"
                    >
                        Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                         
                        <a
                            href="https://docs.joyent.com/private-cloud/install/cns"
                            rel="noopener noreferrer"
                            target="_blank"
                        >
                            Read the docs
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div
        className="c8"
    >
        <form
            onChange={[Function]}
        >
            <div
                className="c9"
                name="enabled"
                role="group"
                style={undefined}
                type="checkbox"
            >
                <div
                    className="c10"
                >
                    <label
                        className="c11 c12"
                        htmlFor="t"
                    >
                        Enable Firewall
                    </label>
                    <div
                        className="c13"
                    >
                        <div
                            className="c14"
                        >
                            <input
                                checked={undefined}
                                className="c15"
                                disabled={false}
                                id="t"
                                onBlur={undefined}
                                type="checkbox"
                            />
                            <label
                                className="c16"
                                disabled={false}
                                htmlFor="t"
                                id="t"
                                onBlur={undefined}
                            />
                            <label
                                className="c11 c12"
                                disabled={false}
                                htmlFor="t"
                                id="t"
                                onBlur={undefined}
                            >
                                 
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div
        className="c17 c3"
        height="0.0625rem"
    />
</div>,
  .c2 {
  margin-bottom: 0.375rem;
}

.c5 {
  margin-bottom: 1.125rem;
}

.c8 {
  margin-bottom: 1.875rem;
}

.c13 {
  margin-left: 0.75rem;
}

.c23 {
  margin-bottom: 0.75rem;
}

.c18 {
  margin-top: 1.875rem;
}

.c19 {
  margin-right: 0.75rem;
}

.c20 {
  margin-top: undefined;
}

.c22 {
  margin-top: 1.125rem;
}

.c28 {
  margin-right: 0.1875rem;
}

.c31 {
  margin-top: 0.1875rem;
  margin-bottom: 0.1875rem;
}

.c32 {
  margin-left: 0.1875rem;
}

.c34 {
  margin-right: 0rem;
  margin-bottom: 0rem;
}

.c25 {
  padding-top: undefined;
  padding-right: 1.125rem;
  padding-bottom: undefined;
  padding-left: 1.125rem;
}

.c7 {
  color: rgb(73,73,73);
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c12 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c1 {
  margin-right: auto;
  margin-left: auto;
}

.c3 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.c4 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c26 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c37 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 62.5rem;
  padding-bottom: 1.125rem;
}

.c21 {
  color: rgb(73,73,73);
  font-weight: normal;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c30 {
  color: rgb(73,73,73);
  font-weight: 700;
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c17 {
  background-color: rgb(216,216,216);
}

.c10 {
  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-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c27 {
  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-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-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  -webkit-flex-basis: 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}

.c29 {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex-basis: auto;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  display: block;
}

.c24 {
  box-sizing: content-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  border-width: 0.0625rem;
  border-style: solid;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  color: rgb(73,73,73);
  background-color: rgb(255,255,255);
  border-color: rgb(216,216,216);
  border-color: rgb(216,216,216);
  background-color: rgb(250,250,250);
  color: rgb(73,73,73);
  cursor: default;
}

.c9 {
  display: inline-block;
  padding: 0;
  border: none;
  overflow: hidden;
  height: auto;
  -webkit-padding-before: 0;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  -webkit-padding-after: 0;
}

.c11 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c14 {
  position: relative;
  vertical-align: text-bottom;
  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;
}

.c15 {
  display: none;
}

.c15:checked + label {
  background: #3B46CC;
  border: 0.0625rem solid rgb(59,70,204);
}

.c15:checked + label:after {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c15:checked + label:active {
  box-shadow: none;
}

.c16 {
  outline: 0;
  display: block;
  width: 2.875rem;
  height: 1.5rem;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  background: rgb(250,250,250);
  border-radius: 1.4375rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 0.0625rem solid rgb(216,216,216);
}

.c16::selection {
  background: none;
}

.c16:active {
  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
}

.c16:hover {
  border: 0.0625rem solid rgb(59,70,204);
}

.c16:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c16:after,
.c16:before {
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
}

.c16:after {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  border-radius: 50%;
  background: rgb(255,255,255);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
}

.c16:active {
  box-shadow: inset 0 0 0 2em rgb(216,216,216);
}

.c16:before {
  display: none;
}

.c35 {
  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;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.c36 {
  border: 0.0625rem solid rgb(216,216,216);
  box-sizing: border-box;
  border-radius: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.125rem;
  padding: 0.3125rem 0.75rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c33 {
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.c6 {
  margin: 0;
}

@media only screen and (min-width:48em) {
  .c1 {
    width: 46rem;
  }
}

@media only screen and (min-width:64em) {
  .c1 {
    width: 56rem;
  }
}

@media only screen and (min-width:75em) {
  .c1 {
    width: 59rem;
  }
}

@media only screen and (min-width:0em) {
  .c4 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c4 {
    -webkit-flex-basis: 66.66666666666667%;
    -ms-flex-preferred-size: 66.66666666666667%;
    flex-basis: 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
}

@media only screen and (min-width:0em) {
  .c26 {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
}

@media only screen and (min-width:0em) {
  .c37 {
    -webkit-flex-basis: 16.666666666666668%;
    -ms-flex-preferred-size: 16.666666666666668%;
    flex-basis: 16.666666666666668%;
    max-width: 16.666666666666668%;
  }
}

@media only screen and (max-width:47.9375rem) {
  .c0 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

<div
    className="c0 c1"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <div
                    className="c5"
                >
                    <p
                        className="c6 c7"
                    >
                        Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                         
                        <a
                            href="https://docs.joyent.com/private-cloud/install/cns"
                            rel="noopener noreferrer"
                            target="_blank"
                        >
                            Read the docs
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div
        className="c8"
    >
        <form
            onChange={[Function]}
        >
            <div
                className="c9"
                name="enabled"
                role="group"
                style={undefined}
                type="checkbox"
            >
                <div
                    className="c10"
                >
                    <label
                        className="c11 c12"
                        htmlFor="u"
                    >
                        Enable Firewall
                    </label>
                    <div
                        className="c13"
                    >
                        <div
                            className="c14"
                        >
                            <input
                                checked={undefined}
                                className="c15"
                                disabled={false}
                                id="u"
                                onBlur={undefined}
                                type="checkbox"
                            />
                            <label
                                className="c16"
                                disabled={false}
                                htmlFor="u"
                                id="u"
                                onBlur={undefined}
                            />
                            <label
                                className="c11 c12"
                                disabled={false}
                                htmlFor="u"
                                id="u"
                                onBlur={undefined}
                            >
                                 
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div
        className="c17 c3"
        height="0.0625rem"
    />
    <div
        className="c18"
    >
        <form>
            <div
                className="c9"
                name="inactive"
                role="group"
                style={undefined}
                type="checkbox"
            >
                <div
                    className="c10"
                >
                    <div
                        className="c19"
                    >
                        <div
                            className="c14"
                        >
                            <input
                                checked={undefined}
                                className="c15"
                                id="v"
                                onBlur={undefined}
                                type="checkbox"
                            />
                            <label
                                className="c16"
                                htmlFor="v"
                                id="v"
                                onBlur={undefined}
                            />
                            <label
                                className="c11 c12"
                                htmlFor="v"
                                id="v"
                                onBlur={undefined}
                            >
                                 
                            </label>
                        </div>
                    </div>
                    <label
                        className="c11 c12"
                        htmlFor="v"
                    >
                        Show inactive rules
                    </label>
                </div>
            </div>
        </form>
    </div>
    <div
        className="c20"
    >
        <h3
            className="c21"
        >
            Firewall rules from instance tags
        </h3>
        <div
            className="c22"
        >
            <div
                className="c23"
            >
                <div
                    className="c24"
                    disabled={true}
                    name="card"
                >
                    <div
                        className="c25"
                    >
                        <div
                            className="c3"
                        >
                            <div
                                className="c26"
                            >
                                <div
                                    className="c27"
                                >
                                    <div
                                        className="c28"
                                    >
                                        <div
                                            className="c29"
                                        >
                                            <strong
                                                className="c30"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                From: 
                                            </strong>
                                        </div>
                                    </div>
                                    <div
                                        className="c10"
                                    >
                                        <div
                                            className="c31"
                                        >
                                            <p
                                                className="c7"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                Any
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                className="c26"
                            >
                                <div
                                    className="c27"
                                >
                                    <div
                                        className="c28"
                                    >
                                        <div
                                            className="c29"
                                        >
                                            <strong
                                                className="c30"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                To: 
                                            </strong>
                                        </div>
                                    </div>
                                    <div
                                        className="c10"
                                    >
                                        <div
                                            className="c32"
                                        >
                                            <ul
                                                className="c33"
                                            >
                                                <div
                                                    className="c34"
                                                >
                                                    <div
                                                        className="c35"
                                                    >
                                                        <li
                                                            className="c36"
                                                            onClick={undefined}
                                                        >
                                                            wat: 
                                                        </li>
                                                    </div>
                                                </div>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                className="c37"
                            >
                                <div
                                    className="c27"
                                >
                                    <div
                                        className="c28"
                                    >
                                        <div
                                            className="c29"
                                        >
                                            <strong
                                                className="c30"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                Protocol: 
                                            </strong>
                                        </div>
                                    </div>
                                    <div
                                        className="c10"
                                    >
                                        <div
                                            className="c31"
                                        >
                                            <p
                                                className="c7"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                tcp
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                className="c37"
                            >
                                <div
                                    className="c27"
                                >
                                    <div
                                        className="c28"
                                    >
                                        <div
                                            className="c29"
                                        >
                                            <strong
                                                className="c30"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                Ports: 
                                            </strong>
                                        </div>
                                    </div>
                                    <div
                                        className="c10"
                                    >
                                        <div
                                            className="c31"
                                        >
                                            <p
                                                className="c7"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                all
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                className="c37"
                            >
                                <div
                                    className="c27"
                                >
                                    <div
                                        className="c28"
                                    >
                                        <div
                                            className="c29"
                                        >
                                            <strong
                                                className="c30"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                Action: 
                                            </strong>
                                        </div>
                                    </div>
                                    <div
                                        className="c10"
                                    >
                                        <div
                                            className="c31"
                                        >
                                            <p
                                                className="c7"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                Allow
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>,
]
`;

exports[`renders <Firewall tagRules /> without throwing 2`] = `
Array [
  .c2 {
  margin-bottom: 0.375rem;
}

.c5 {
  margin-bottom: 1.125rem;
}

.c8 {
  margin-bottom: 1.875rem;
}

.c13 {
  margin-left: 0.75rem;
}

.c7 {
  color: rgb(73,73,73);
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c12 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c1 {
  margin-right: auto;
  margin-left: auto;
}

.c3 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.c4 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 62.5rem;
  padding-bottom: 1.125rem;
}

.c17 {
  background-color: rgb(216,216,216);
}

.c10 {
  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-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c9 {
  display: inline-block;
  padding: 0;
  border: none;
  overflow: hidden;
  height: auto;
  -webkit-padding-before: 0;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  -webkit-padding-after: 0;
}

.c11 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c14 {
  position: relative;
  vertical-align: text-bottom;
  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;
}

.c15 {
  display: none;
}

.c15:checked + label {
  background: #3B46CC;
  border: 0.0625rem solid rgb(59,70,204);
}

.c15:checked + label:after {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c15:checked + label:active {
  box-shadow: none;
}

.c16 {
  outline: 0;
  display: block;
  width: 2.875rem;
  height: 1.5rem;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  background: rgb(250,250,250);
  border-radius: 1.4375rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 0.0625rem solid rgb(216,216,216);
}

.c16::selection {
  background: none;
}

.c16:active {
  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
}

.c16:hover {
  border: 0.0625rem solid rgb(59,70,204);
}

.c16:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c16:after,
.c16:before {
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
}

.c16:after {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  border-radius: 50%;
  background: rgb(255,255,255);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
}

.c16:active {
  box-shadow: inset 0 0 0 2em rgb(216,216,216);
}

.c16:before {
  display: none;
}

.c6 {
  margin: 0;
}

@media only screen and (min-width:48em) {
  .c1 {
    width: 46rem;
  }
}

@media only screen and (min-width:64em) {
  .c1 {
    width: 56rem;
  }
}

@media only screen and (min-width:75em) {
  .c1 {
    width: 59rem;
  }
}

@media only screen and (min-width:0em) {
  .c4 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c4 {
    -webkit-flex-basis: 66.66666666666667%;
    -ms-flex-preferred-size: 66.66666666666667%;
    flex-basis: 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
}

@media only screen and (max-width:47.9375rem) {
  .c0 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

<div
    className="c0 c1"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <div
                    className="c5"
                >
                    <p
                        className="c6 c7"
                    >
                        Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                         
                        <a
                            href="https://docs.joyent.com/private-cloud/install/cns"
                            rel="noopener noreferrer"
                            target="_blank"
                        >
                            Read the docs
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div
        className="c8"
    >
        <form
            onChange={[Function]}
        >
            <div
                className="c9"
                name="enabled"
                role="group"
                style={undefined}
                type="checkbox"
            >
                <div
                    className="c10"
                >
                    <label
                        className="c11 c12"
                        htmlFor="w"
                    >
                        Enable Firewall
                    </label>
                    <div
                        className="c13"
                    >
                        <div
                            className="c14"
                        >
                            <input
                                checked={undefined}
                                className="c15"
                                disabled={false}
                                id="w"
                                onBlur={undefined}
                                type="checkbox"
                            />
                            <label
                                className="c16"
                                disabled={false}
                                htmlFor="w"
                                id="w"
                                onBlur={undefined}
                            />
                            <label
                                className="c11 c12"
                                disabled={false}
                                htmlFor="w"
                                id="w"
                                onBlur={undefined}
                            >
                                 
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div
        className="c17 c3"
        height="0.0625rem"
    />
</div>,
  .c2 {
  margin-bottom: 0.375rem;
}

.c5 {
  margin-bottom: 1.125rem;
}

.c8 {
  margin-bottom: 1.875rem;
}

.c13 {
  margin-left: 0.75rem;
}

.c7 {
  color: rgb(73,73,73);
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c12 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c1 {
  margin-right: auto;
  margin-left: auto;
}

.c3 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.c4 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 62.5rem;
  padding-bottom: 1.125rem;
}

.c17 {
  background-color: rgb(216,216,216);
}

.c10 {
  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-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c9 {
  display: inline-block;
  padding: 0;
  border: none;
  overflow: hidden;
  height: auto;
  -webkit-padding-before: 0;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  -webkit-padding-after: 0;
}

.c11 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c14 {
  position: relative;
  vertical-align: text-bottom;
  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;
}

.c15 {
  display: none;
}

.c15:checked + label {
  background: #3B46CC;
  border: 0.0625rem solid rgb(59,70,204);
}

.c15:checked + label:after {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c15:checked + label:active {
  box-shadow: none;
}

.c16 {
  outline: 0;
  display: block;
  width: 2.875rem;
  height: 1.5rem;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  background: rgb(250,250,250);
  border-radius: 1.4375rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 0.0625rem solid rgb(216,216,216);
}

.c16::selection {
  background: none;
}

.c16:active {
  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
}

.c16:hover {
  border: 0.0625rem solid rgb(59,70,204);
}

.c16:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c16:after,
.c16:before {
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
}

.c16:after {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  border-radius: 50%;
  background: rgb(255,255,255);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
}

.c16:active {
  box-shadow: inset 0 0 0 2em rgb(216,216,216);
}

.c16:before {
  display: none;
}

.c6 {
  margin: 0;
}

@media only screen and (min-width:48em) {
  .c1 {
    width: 46rem;
  }
}

@media only screen and (min-width:64em) {
  .c1 {
    width: 56rem;
  }
}

@media only screen and (min-width:75em) {
  .c1 {
    width: 59rem;
  }
}

@media only screen and (min-width:0em) {
  .c4 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c4 {
    -webkit-flex-basis: 66.66666666666667%;
    -ms-flex-preferred-size: 66.66666666666667%;
    flex-basis: 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
}

@media only screen and (max-width:47.9375rem) {
  .c0 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

<div
    className="c0 c1"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <div
                    className="c5"
                >
                    <p
                        className="c6 c7"
                    >
                        Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                         
                        <a
                            href="https://docs.joyent.com/private-cloud/install/cns"
                            rel="noopener noreferrer"
                            target="_blank"
                        >
                            Read the docs
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div
        className="c8"
    >
        <form
            onChange={[Function]}
        >
            <div
                className="c9"
                name="enabled"
                role="group"
                style={undefined}
                type="checkbox"
            >
                <div
                    className="c10"
                >
                    <label
                        className="c11 c12"
                        htmlFor="x"
                    >
                        Enable Firewall
                    </label>
                    <div
                        className="c13"
                    >
                        <div
                            className="c14"
                        >
                            <input
                                checked={undefined}
                                className="c15"
                                disabled={false}
                                id="x"
                                onBlur={undefined}
                                type="checkbox"
                            />
                            <label
                                className="c16"
                                disabled={false}
                                htmlFor="x"
                                id="x"
                                onBlur={undefined}
                            />
                            <label
                                className="c11 c12"
                                disabled={false}
                                htmlFor="x"
                                id="x"
                                onBlur={undefined}
                            >
                                 
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div
        className="c17 c3"
        height="0.0625rem"
    />
</div>,
  .c2 {
  margin-bottom: 0.375rem;
}

.c5 {
  margin-bottom: 1.125rem;
}

.c8 {
  margin-bottom: 1.875rem;
}

.c13 {
  margin-left: 0.75rem;
}

.c20 {
  margin-top: 3rem;
}

.c23 {
  margin-bottom: 0.75rem;
}

.c18 {
  margin-top: 1.875rem;
}

.c19 {
  margin-right: 0.75rem;
}

.c22 {
  margin-top: 1.125rem;
}

.c28 {
  margin-right: 0.1875rem;
}

.c31 {
  margin-top: 0.1875rem;
  margin-bottom: 0.1875rem;
}

.c32 {
  margin-left: 0.1875rem;
}

.c34 {
  margin-right: 0rem;
  margin-bottom: 0rem;
}

.c25 {
  padding-top: undefined;
  padding-right: 1.125rem;
  padding-bottom: undefined;
  padding-left: 1.125rem;
}

.c7 {
  color: rgb(73,73,73);
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c12 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
  font-stretch: normal;
  display: block;
  color: rgb(70,70,70);
  text-align: left;
}

.c1 {
  margin-right: auto;
  margin-left: auto;
}

.c3 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.c4 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c26 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c37 {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  display: block;
}

.c0 {
  box-sizing: border-box;
  width: 100%;
  max-width: 62.5rem;
  padding-bottom: 1.125rem;
}

.c21 {
  color: rgb(73,73,73);
  font-weight: normal;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c30 {
  color: rgb(73,73,73);
  font-weight: 700;
  line-height: 1.5rem;
  font-size: 0.9375rem;
}

.c17 {
  background-color: rgb(216,216,216);
}

.c10 {
  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-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c27 {
  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-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-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  -webkit-flex-basis: 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}

.c29 {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex-basis: auto;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  display: block;
}

.c24 {
  box-sizing: content-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  border-width: 0.0625rem;
  border-style: solid;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  color: rgb(73,73,73);
  background-color: rgb(255,255,255);
  border-color: rgb(216,216,216);
  border-color: rgb(216,216,216);
  background-color: rgb(250,250,250);
  color: rgb(73,73,73);
  cursor: default;
}

.c9 {
  display: inline-block;
  padding: 0;
  border: none;
  overflow: hidden;
  height: auto;
  -webkit-padding-before: 0;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  -webkit-padding-after: 0;
}

.c11 {
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
}

.c14 {
  position: relative;
  vertical-align: text-bottom;
  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;
}

.c15 {
  display: none;
}

.c15:checked + label {
  background: #3B46CC;
  border: 0.0625rem solid rgb(59,70,204);
}

.c15:checked + label:after {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c15:checked + label:active {
  box-shadow: none;
}

.c16 {
  outline: 0;
  display: block;
  width: 2.875rem;
  height: 1.5rem;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  background: rgb(250,250,250);
  border-radius: 1.4375rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 0.0625rem solid rgb(216,216,216);
}

.c16::selection {
  background: none;
}

.c16:active {
  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
}

.c16:hover {
  border: 0.0625rem solid rgb(59,70,204);
}

.c16:hover:after {
  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
}

.c16:after,
.c16:before {
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
}

.c16:after {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  border-radius: 50%;
  background: rgb(255,255,255);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
}

.c16:active {
  box-shadow: inset 0 0 0 2em rgb(216,216,216);
}

.c16:before {
  display: none;
}

.c35 {
  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;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.c36 {
  border: 0.0625rem solid rgb(216,216,216);
  box-sizing: border-box;
  border-radius: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.125rem;
  padding: 0.3125rem 0.75rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c33 {
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.c6 {
  margin: 0;
}

@media only screen and (min-width:48em) {
  .c1 {
    width: 46rem;
  }
}

@media only screen and (min-width:64em) {
  .c1 {
    width: 56rem;
  }
}

@media only screen and (min-width:75em) {
  .c1 {
    width: 59rem;
  }
}

@media only screen and (min-width:0em) {
  .c4 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:48em) {
  .c4 {
    -webkit-flex-basis: 66.66666666666667%;
    -ms-flex-preferred-size: 66.66666666666667%;
    flex-basis: 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
}

@media only screen and (min-width:0em) {
  .c26 {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
}

@media only screen and (min-width:0em) {
  .c37 {
    -webkit-flex-basis: 16.666666666666668%;
    -ms-flex-preferred-size: 16.666666666666668%;
    flex-basis: 16.666666666666668%;
    max-width: 16.666666666666668%;
  }
}

@media only screen and (max-width:47.9375rem) {
  .c0 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

<div
    className="c0 c1"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <div
                    className="c5"
                >
                    <p
                        className="c6 c7"
                    >
                        Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                         
                        <a
                            href="https://docs.joyent.com/private-cloud/install/cns"
                            rel="noopener noreferrer"
                            target="_blank"
                        >
                            Read the docs
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div
        className="c8"
    >
        <form
            onChange={[Function]}
        >
            <div
                className="c9"
                name="enabled"
                role="group"
                style={undefined}
                type="checkbox"
            >
                <div
                    className="c10"
                >
                    <label
                        className="c11 c12"
                        htmlFor="y"
                    >
                        Enable Firewall
                    </label>
                    <div
                        className="c13"
                    >
                        <div
                            className="c14"
                        >
                            <input
                                checked={undefined}
                                className="c15"
                                disabled={false}
                                id="y"
                                onBlur={undefined}
                                type="checkbox"
                            />
                            <label
                                className="c16"
                                disabled={false}
                                htmlFor="y"
                                id="y"
                                onBlur={undefined}
                            />
                            <label
                                className="c11 c12"
                                disabled={false}
                                htmlFor="y"
                                id="y"
                                onBlur={undefined}
                            >
                                 
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div
        className="c17 c3"
        height="0.0625rem"
    />
    <div
        className="c18"
    >
        <form>
            <div
                className="c9"
                name="inactive"
                role="group"
                style={undefined}
                type="checkbox"
            >
                <div
                    className="c10"
                >
                    <div
                        className="c19"
                    >
                        <div
                            className="c14"
                        >
                            <input
                                checked={undefined}
                                className="c15"
                                id="z"
                                onBlur={undefined}
                                type="checkbox"
                            />
                            <label
                                className="c16"
                                htmlFor="z"
                                id="z"
                                onBlur={undefined}
                            />
                            <label
                                className="c11 c12"
                                htmlFor="z"
                                id="z"
                                onBlur={undefined}
                            >
                                 
                            </label>
                        </div>
                    </div>
                    <label
                        className="c11 c12"
                        htmlFor="z"
                    >
                        Show inactive rules
                    </label>
                </div>
            </div>
        </form>
    </div>
    <div
        className="c20"
    >
        <h3
            className="c21"
        >
            Default firewall rules
        </h3>
        <div
            className="c22"
        >
            <div
                className="c23"
            >
                <div
                    className="c24"
                    disabled={true}
                    name="card"
                >
                    <div
                        className="c25"
                    >
                        <div
                            className="c3"
                        >
                            <div
                                className="c26"
                            >
                                <div
                                    className="c27"
                                >
                                    <div
                                        className="c28"
                                    >
                                        <div
                                            className="c29"
                                        >
                                            <strong
                                                className="c30"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                From: 
                                            </strong>
                                        </div>
                                    </div>
                                    <div
                                        className="c10"
                                    >
                                        <div
                                            className="c31"
                                        >
                                            <p
                                                className="c7"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                Any
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                className="c26"
                            >
                                <div
                                    className="c27"
                                >
                                    <div
                                        className="c28"
                                    >
                                        <div
                                            className="c29"
                                        >
                                            <strong
                                                className="c30"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                To: 
                                            </strong>
                                        </div>
                                    </div>
                                    <div
                                        className="c10"
                                    >
                                        <div
                                            className="c32"
                                        >
                                            <ul
                                                className="c33"
                                            >
                                                <div
                                                    className="c34"
                                                >
                                                    <div
                                                        className="c35"
                                                    >
                                                        <li
                                                            className="c36"
                                                            onClick={undefined}
                                                        >
                                                            wat: 
                                                        </li>
                                                    </div>
                                                </div>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                className="c37"
                            >
                                <div
                                    className="c27"
                                >
                                    <div
                                        className="c28"
                                    >
                                        <div
                                            className="c29"
                                        >
                                            <strong
                                                className="c30"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                Protocol: 
                                            </strong>
                                        </div>
                                    </div>
                                    <div
                                        className="c10"
                                    >
                                        <div
                                            className="c31"
                                        >
                                            <p
                                                className="c7"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                tcp
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                className="c37"
                            >
                                <div
                                    className="c27"
                                >
                                    <div
                                        className="c28"
                                    >
                                        <div
                                            className="c29"
                                        >
                                            <strong
                                                className="c30"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                Ports: 
                                            </strong>
                                        </div>
                                    </div>
                                    <div
                                        className="c10"
                                    >
                                        <div
                                            className="c31"
                                        >
                                            <p
                                                className="c7"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                all
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                className="c37"
                            >
                                <div
                                    className="c27"
                                >
                                    <div
                                        className="c28"
                                    >
                                        <div
                                            className="c29"
                                        >
                                            <strong
                                                className="c30"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                Action: 
                                            </strong>
                                        </div>
                                    </div>
                                    <div
                                        className="c10"
                                    >
                                        <div
                                            className="c31"
                                        >
                                            <p
                                                className="c7"
                                                style={
                                                    Object {
                                                        "color": "#D8D8D8",
                                                      }
                                                }
                                            >
                                                Allow
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>,
]
`;