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

exports[`renders <Actions /> without throwing 1`] = `
Array [
  .c8 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
}

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

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

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

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

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

.c11 {
  display: inline-block;
  margin-left: 0.375rem;
}

.c7 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  display: none;
}

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

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

.c7:checked + label {
  border-color: rgb(59,70,204);
}

.c7:selected + label {
  border-color: rgb(59,70,204);
}

.c7:disabled + label {
  background-color: rgb(249,249,249);
  cursor: not-allowed;
}

.c9 {
  color: rgb(100,100,100);
  position: absolute;
  width: 1.125rem;
  height: 1.125rem;
  box-sizing: border-box;
  top: 0;
  cursor: pointer;
  background-color: rgb(255,255,255);
  box-shadow: none;
  border: 0.0625rem solid rgb(216,216,216);
  cursor: pointer;
  border-radius: 0.25rem;
  width: 1.125rem;
  height: 1.125rem;
}

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

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

.c5 {
  list-style-type: none;
  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;
  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-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  height: 1.5rem;
}

.c5 label {
  font-weight: 400;
}

.c5 label::after {
  width: 0.475rem;
  height: 0.205rem;
  top: 0.4125rem;
  left: 0.35rem;
}

.c5 div[type='checkbox'],
.c5 div[type='checkbox'] input,
.c5 div[type='checkbox'] label {
  height: 1.5rem;
  width: 1.5rem;
}

.c4 {
  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;
}

.c0 {
  overflow: hidden;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}

.c1 {
  width: 100%;
  background: rgb(250,250,250);
}

.c1 th:first-child {
  border-top-left-radius: 0.25rem;
}

.c1 th:last-child {
  border-top-right-radius: 0.25rem;
}

.c15 {
  width: 100%;
}

.c3 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 2rem;
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c3:not(:first-child) {
  border-left-width: 0;
}

.c3:not(:last-child) {
  border-right-width: 0;
}

.c10 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
  color: rgb(73,73,73);
  font-weight: 600;
}

.c10:not(:first-child) {
  border-left-width: 0;
}

.c10:not(:last-child) {
  border-right-width: 0;
}

.c12 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 9.375rem;
  display: table-cell;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c12:not(:first-child) {
  border-left-width: 0;
}

.c12:not(:last-child) {
  border-right-width: 0;
}

.c13 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 0rem;
  display: none;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c13:not(:first-child) {
  border-left-width: 0;
}

.c13:not(:last-child) {
  border-right-width: 0;
}

.c14 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 3.75rem;
  display: table-cell;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c14:not(:first-child) {
  border-left-width: 0;
}

.c14:not(:last-child) {
  border-right-width: 0;
}

.c2 {
  display: table-row;
  color: rgb(73,73,73);
  background-color: rgb(255,255,255);
  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
  box-sizing: border-box;
  color: rgb(73,73,73);
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.c2:last-child {
  box-shadow: none;
}

.c2:last-child td {
  border-bottom-width: 0.0625rem;
}

@media only screen and (min-width:37.4375rem) {
  .c13 {
    width: 10rem;
    display: table-cell;
  }
}

<table
    className="c0"
>
    <thead
        className="c1"
        disabled={undefined}
        name="thdead"
        selected={undefined}
    >
        <tr
            className="c2"
            disabled={undefined}
            name="tr"
            selected={undefined}
        >
            <th
                className="c3"
                disabled={undefined}
                name="th"
                selected={undefined}
            >
                <div
                    className="c4"
                    role="group"
                    style={undefined}
                >
                    <li
                        className="c5"
                    >
                        <div
                            checked={false}
                            className="c6"
                            disabled={false}
                            id="t"
                            onBlur={undefined}
                            onChange={[Function]}
                            type="checkbox"
                        >
                            <input
                                checked={false}
                                className="c7 c8"
                                disabled={false}
                                id="u"
                                onBlur={undefined}
                                onChange={[Function]}
                                type="checkbox"
                            />
                            <label
                                className="c9"
                                htmlFor="u"
                            />
                        </div>
                    </li>
                </div>
            </th>
            <th
                className="c10"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Name 
                </span>
                <div
                    className="c11"
                >
                    <svg
                        height="6"
                        style={
                            Object {
                                "transform": "rotate(180deg)",
                              }
                        }
                        viewBox="0 0 9.6 6"
                        width="9.6"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
                            fill="rgb(73, 73, 73)"
                        />
                    </svg>
                </div>
            </th>
            <th
                className="c12"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Status 
                </span>
            </th>
            <th
                className="c13"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Created 
                </span>
            </th>
            <th
                className="c14"
                disabled={undefined}
                name="th"
                selected={undefined}
            />
        </tr>
    </thead>
    <tbody
        className="c15"
        disabled={undefined}
        name="tbody"
        selected={undefined}
    />
</table>,
  .c6 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: 400;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c4 {
  margin-bottom: 0.75rem;
}

.c2 {
  padding: 8rem;
}

.c1 {
  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);
}

.c3 {
  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;
}

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

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

<div
    className="c0 c1"
    disabled={false}
    name="card"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <svg
                    height="109"
                    style={
                        Object {
                            "transform": "rotate(0deg)",
                          }
                    }
                    viewBox="0 0 119.34 109.47"
                    width="119"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlnsXlink="http://www.w3.org/1999/xlink"
                >
                    <defs>
                        <style
                            dangerouslySetInnerHTML={
                                Object {
                                    "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
                                  }
                            }
                        />
                        <radialGradient
                            cx="208.79"
                            cy="99.06"
                            gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient"
                            r="57.13"
                        >
                            <stop
                                offset="0.05"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.1"
                                stopColor="#415f72"
                            />
                            <stop
                                offset="0.13"
                                stopColor="#3a5769"
                            />
                            <stop
                                offset="0.16"
                                stopColor="#2e4959"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1d3543"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.26"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.32"
                                stopColor="#274150"
                            />
                            <stop
                                offset="0.39"
                                stopColor="#365364"
                            />
                            <stop
                                offset="0.43"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.49"
                                stopColor="#3f5d6f"
                            />
                            <stop
                                offset="0.56"
                                stopColor="#324e5f"
                            />
                            <stop
                                offset="0.65"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.66"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.9"
                                stopColor="#2c4656"
                            />
                            <stop
                                offset="0.95"
                                stopColor="#436275"
                            />
                        </radialGradient>
                        <radialGradient
                            cx="59.15"
                            cy="56.86"
                            gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-2"
                            r="46.01"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.1"
                                stopColor="#426073"
                            />
                            <stop
                                offset="0.13"
                                stopColor="#3c5a6c"
                            />
                            <stop
                                offset="0.16"
                                stopColor="#344f61"
                            />
                            <stop
                                offset="0.18"
                                stopColor="#274050"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.26"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.32"
                                stopColor="#274150"
                            />
                            <stop
                                offset="0.39"
                                stopColor="#365364"
                            />
                            <stop
                                offset="0.43"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.49"
                                stopColor="#3f5d6f"
                            />
                            <stop
                                offset="0.56"
                                stopColor="#324e5f"
                            />
                            <stop
                                offset="0.65"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.66"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.92"
                                stopColor="#2c4656"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                            />
                        </radialGradient>
                        <radialGradient
                            cx="-521.06"
                            cy="366.16"
                            gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-3"
                            r="32.44"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.02"
                                stopColor="#436275"
                                stopOpacity="0.97"
                            />
                            <stop
                                offset="0.34"
                                stopColor="#436275"
                                stopOpacity="0.55"
                            />
                            <stop
                                offset="0.62"
                                stopColor="#436275"
                                stopOpacity="0.25"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#436275"
                                stopOpacity="0.07"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                                stopOpacity={0}
                            />
                        </radialGradient>
                        <radialGradient
                            cx="-136.43"
                            cy="140.9"
                            gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-4"
                            r="54.82"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.58"
                                stopColor="#436275"
                                stopOpacity="0.4"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                                stopOpacity={0}
                            />
                        </radialGradient>
                    </defs>
                    <title>
                        Empty-state-illustration
                    </title>
                    <g
                        data-name="Layer 2"
                        id="Layer_2"
                    >
                        <g
                            data-name="Layer 1"
                            id="Layer_1-2"
                        >
                            <g
                                className="cls-1"
                            >
                                <path
                                    className="cls-2"
                                    d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
                                />
                            </g>
                            <g
                                className="cls-1"
                            >
                                <path
                                    className="cls-3"
                                    d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
                                />
                            </g>
                            <circle
                                className="cls-4"
                                cx="23.53"
                                cy="73.77"
                                r="11.93"
                            />
                            <circle
                                className="cls-5"
                                cx="23.53"
                                cy="73.77"
                                r="11.93"
                            />
                            <circle
                                className="cls-6"
                                cx="61.95"
                                cy="55.24"
                                r="34.25"
                            />
                            <circle
                                className="cls-7"
                                cx="61.95"
                                cy="55.24"
                                r="34.25"
                            />
                        </g>
                    </g>
                </svg>
            </div>
            <h3
                className="c5 c6"
            >
                You have no Snapshots
            </h3>
        </div>
    </div>
</div>,
]
`;

exports[`renders <Item /> without throwing 1`] = `
.c6 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
}

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

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

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

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

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

.c8 {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0rem;
  margin-left: 0rem;
}

.c11 {
  cursor: pointer;
  height: 100%;
  width: 100%;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -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;
}

.c5 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  display: none;
}

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

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

.c5:checked + label {
  border-color: rgb(59,70,204);
}

.c5:selected + label {
  border-color: rgb(59,70,204);
}

.c5:disabled + label {
  background-color: rgb(249,249,249);
  cursor: not-allowed;
}

.c7 {
  color: rgb(100,100,100);
  position: absolute;
  width: 1.125rem;
  height: 1.125rem;
  box-sizing: border-box;
  top: 0;
  cursor: pointer;
  background-color: rgb(255,255,255);
  box-shadow: none;
  border: 0.0625rem solid rgb(216,216,216);
  cursor: pointer;
  border-radius: 0.25rem;
  width: 1.125rem;
  height: 1.125rem;
}

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

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

.c3 {
  list-style-type: none;
  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;
  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-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  height: 1.5rem;
}

.c3 label {
  font-weight: 400;
}

.c3 label::after {
  width: 0.475rem;
  height: 0.205rem;
  top: 0.4125rem;
  left: 0.35rem;
}

.c3 div[type='checkbox'],
.c3 div[type='checkbox'] input,
.c3 div[type='checkbox'] label {
  height: 1.5rem;
  width: 1.5rem;
}

.c2 {
  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;
}

.c1 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  vertical-align: middle;
  text-align: left;
  border-bottom-width: 0;
}

.c1:not(:first-child) {
  border-left-width: 0;
}

.c1:not(:last-child) {
  border-right-width: 0;
}

.c9 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 0rem;
  display: none;
  vertical-align: middle;
  text-align: left;
  border-bottom-width: 0;
}

.c9:not(:first-child) {
  border-left-width: 0;
}

.c9:not(:last-child) {
  border-right-width: 0;
}

.c10 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  border-bottom-width: 0;
  border-left-width: 0.0625rem !important;
}

.c10:not(:first-child) {
  border-left-width: 0;
}

.c10:not(:last-child) {
  border-right-width: 0;
}

.c0 {
  display: table-row;
  color: rgb(73,73,73);
  background-color: rgb(255,255,255);
  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
  box-sizing: border-box;
}

.c0:last-child {
  box-shadow: none;
}

.c0:last-child td {
  border-bottom-width: 0.0625rem;
}

@media only screen and (min-width:37.4375rem) {
  .c9 {
    width: 10rem;
    display: table-cell;
  }
}

<tr
  className="c0"
  disabled={undefined}
  name="tr"
  selected={undefined}
>
  <td
    className="c1"
    disabled={undefined}
    name="td"
    selected={undefined}
  >
    <div
      className="c2"
      name={undefined}
      role="group"
      style={undefined}
    >
      <li
        className="c3"
      >
        <div
          checked={false}
          className="c4"
          disabled={false}
          id="l"
          onBlur={undefined}
          type="checkbox"
        >
          <input
            checked={false}
            className="c5 c6"
            disabled={false}
            id="m"
            onBlur={undefined}
            type="checkbox"
          />
          <label
            className="c7"
            htmlFor="m"
          />
        </div>
      </li>
    </div>
  </td>
  <td
    className="c1"
    disabled={undefined}
    name="td"
    selected={undefined}
  />
  <td
    className="c1"
    disabled={undefined}
    name="td"
    selected={undefined}
  >
    <span
      className="c8"
      color={undefined}
      size="0.75rem"
    />
     
    
  </td>
  <td
    className="c9"
    disabled={undefined}
    name="td"
    selected={undefined}
  >
    almost NaN years
  </td>
  <td
    className="c10"
    disabled={undefined}
    name="td"
    selected={undefined}
  >
    <div
      box={true}
      className="c11"
      onClick={[Function]}
      onMouseEnter={undefined}
      onMouseLeave={undefined}
      style={
        Object {
          "display": "inline-block",
        }
      }
      tag="div"
    >
      <svg
        height="16"
        style={
          Object {
            "transform": "rotate(0deg)",
          }
        }
        viewBox="0 0 4 16"
        width="4"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
          fill="rgb(73, 73, 73)"
        />
      </svg>
    </div>
  </td>
</tr>
`;

exports[`renders <Item {...item} /> without throwing 1`] = `
.c6 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
}

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

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

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

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

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

.c8 {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0rem;
  margin-left: 0rem;
}

.c11 {
  cursor: pointer;
  height: 100%;
  width: 100%;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -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;
}

.c5 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  display: none;
}

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

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

.c5:checked + label {
  border-color: rgb(59,70,204);
}

.c5:selected + label {
  border-color: rgb(59,70,204);
}

.c5:disabled + label {
  background-color: rgb(249,249,249);
  cursor: not-allowed;
}

.c7 {
  color: rgb(100,100,100);
  position: absolute;
  width: 1.125rem;
  height: 1.125rem;
  box-sizing: border-box;
  top: 0;
  cursor: pointer;
  background-color: rgb(255,255,255);
  box-shadow: none;
  border: 0.0625rem solid rgb(216,216,216);
  cursor: pointer;
  border-radius: 0.25rem;
  width: 1.125rem;
  height: 1.125rem;
}

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

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

.c3 {
  list-style-type: none;
  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;
  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-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  height: 1.5rem;
}

.c3 label {
  font-weight: 400;
}

.c3 label::after {
  width: 0.475rem;
  height: 0.205rem;
  top: 0.4125rem;
  left: 0.35rem;
}

.c3 div[type='checkbox'],
.c3 div[type='checkbox'] input,
.c3 div[type='checkbox'] label {
  height: 1.5rem;
  width: 1.5rem;
}

.c2 {
  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;
}

.c1 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  vertical-align: middle;
  text-align: left;
  border-bottom-width: 0;
}

.c1:not(:first-child) {
  border-left-width: 0;
}

.c1:not(:last-child) {
  border-right-width: 0;
}

.c9 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 0rem;
  display: none;
  vertical-align: middle;
  text-align: left;
  border-bottom-width: 0;
}

.c9:not(:first-child) {
  border-left-width: 0;
}

.c9:not(:last-child) {
  border-right-width: 0;
}

.c10 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  border-bottom-width: 0;
  border-left-width: 0.0625rem !important;
}

.c10:not(:first-child) {
  border-left-width: 0;
}

.c10:not(:last-child) {
  border-right-width: 0;
}

.c0 {
  display: table-row;
  color: rgb(73,73,73);
  background-color: rgb(255,255,255);
  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
  box-sizing: border-box;
}

.c0:last-child {
  box-shadow: none;
}

.c0:last-child td {
  border-bottom-width: 0.0625rem;
}

@media only screen and (min-width:37.4375rem) {
  .c9 {
    width: 10rem;
    display: table-cell;
  }
}

<tr
  className="c0"
  disabled={undefined}
  name="tr"
  selected={undefined}
>
  <td
    className="c1"
    disabled={undefined}
    name="td"
    selected={undefined}
  >
    <div
      className="c2"
      name="name"
      role="group"
      style={undefined}
    >
      <li
        className="c3"
      >
        <div
          checked={false}
          className="c4"
          disabled={false}
          id="n"
          onBlur={undefined}
          type="checkbox"
        >
          <input
            checked={false}
            className="c5 c6"
            disabled={false}
            id="o"
            onBlur={undefined}
            type="checkbox"
          />
          <label
            className="c7"
            htmlFor="o"
          />
        </div>
      </li>
    </div>
  </td>
  <td
    className="c1"
    disabled={undefined}
    name="td"
    selected={undefined}
  >
    name
  </td>
  <td
    className="c1"
    disabled={undefined}
    name="td"
    selected={undefined}
  >
    <span
      className="c8"
      color={undefined}
      size="0.75rem"
    />
     
    Started
  </td>
  <td
    className="c9"
    disabled={undefined}
    name="td"
    selected={undefined}
  >
    6 months
  </td>
  <td
    className="c10"
    disabled={undefined}
    name="td"
    selected={undefined}
  >
    <div
      box={true}
      className="c11"
      onClick={[Function]}
      onMouseEnter={undefined}
      onMouseLeave={undefined}
      style={
        Object {
          "display": "inline-block",
        }
      }
      tag="div"
    >
      <svg
        height="16"
        style={
          Object {
            "transform": "rotate(0deg)",
          }
        }
        viewBox="0 0 4 16"
        width="4"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
          fill="rgb(73, 73, 73)"
        />
      </svg>
    </div>
  </td>
</tr>
`;

exports[`renders <Item mutating /> without throwing 1`] = `
.c5 {
  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;
}

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

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

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

.c4 {
  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;
}

.c8 {
  -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;
}

.c0 {
  overflow: hidden;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}

.c1 {
  width: 100%;
}

.c3 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  border-bottom-width: 0;
}

.c3:not(:first-child) {
  border-left-width: 0;
}

.c3:not(:last-child) {
  border-right-width: 0;
}

.c2 {
  display: table-row;
  color: rgb(73,73,73);
  background-color: rgb(255,255,255);
  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
  box-sizing: border-box;
}

.c2:last-child {
  box-shadow: none;
}

.c2:last-child td {
  border-bottom-width: 0.0625rem;
}

<table
  className="c0"
>
  <tbody
    className="c1"
    disabled={undefined}
    name="tbody"
    selected={undefined}
  >
    <tr
      className="c2"
      disabled={undefined}
      name="tr"
      selected={undefined}
    >
      <td
        className="c3"
        colSpan="5"
        disabled={undefined}
        name="td"
        selected={undefined}
      >
        <div
          className="c4"
        >
          <svg
            height="10"
            width="28"
          >
            <rect
              className="c5"
              height="6"
              width="6"
              x="2"
              y="2"
            />
            <rect
              className="c6 c5"
              height="6"
              width="6"
              x="11"
              y="2"
            />
            <rect
              className="c7 c5"
              height="6"
              width="6"
              x="20"
              y="2"
            />
          </svg>
          <p
            className="c8 c9"
          >
            Starting...
          </p>
        </div>
      </td>
    </tr>
    <tr
      className="c2"
      disabled={undefined}
      name="tr"
      selected={undefined}
    >
      <td
        className="c3"
        colSpan="5"
        disabled={undefined}
        name="td"
        selected={undefined}
      >
        <div
          className="c4"
        >
          <svg
            height="10"
            width="28"
          >
            <rect
              className="c5"
              height="6"
              width="6"
              x="2"
              y="2"
            />
            <rect
              className="c6 c5"
              height="6"
              width="6"
              x="11"
              y="2"
            />
            <rect
              className="c7 c5"
              height="6"
              width="6"
              x="20"
              y="2"
            />
          </svg>
          <p
            className="c8 c9"
          >
            Removing...
          </p>
        </div>
      </td>
    </tr>
  </tbody>
</table>
`;

exports[`renders <SnapshotList /> without throwing 1`] = `
Array [
  .c8 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
}

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

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

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

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

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

.c11 {
  display: inline-block;
  margin-left: 0.375rem;
}

.c7 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  display: none;
}

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

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

.c7:checked + label {
  border-color: rgb(59,70,204);
}

.c7:selected + label {
  border-color: rgb(59,70,204);
}

.c7:disabled + label {
  background-color: rgb(249,249,249);
  cursor: not-allowed;
}

.c9 {
  color: rgb(100,100,100);
  position: absolute;
  width: 1.125rem;
  height: 1.125rem;
  box-sizing: border-box;
  top: 0;
  cursor: pointer;
  background-color: rgb(255,255,255);
  box-shadow: none;
  border: 0.0625rem solid rgb(216,216,216);
  cursor: pointer;
  border-radius: 0.25rem;
  width: 1.125rem;
  height: 1.125rem;
}

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

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

.c5 {
  list-style-type: none;
  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;
  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-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  height: 1.5rem;
}

.c5 label {
  font-weight: 400;
}

.c5 label::after {
  width: 0.475rem;
  height: 0.205rem;
  top: 0.4125rem;
  left: 0.35rem;
}

.c5 div[type='checkbox'],
.c5 div[type='checkbox'] input,
.c5 div[type='checkbox'] label {
  height: 1.5rem;
  width: 1.5rem;
}

.c4 {
  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;
}

.c0 {
  overflow: hidden;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}

.c1 {
  width: 100%;
  background: rgb(250,250,250);
}

.c1 th:first-child {
  border-top-left-radius: 0.25rem;
}

.c1 th:last-child {
  border-top-right-radius: 0.25rem;
}

.c15 {
  width: 100%;
}

.c3 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 2rem;
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c3:not(:first-child) {
  border-left-width: 0;
}

.c3:not(:last-child) {
  border-right-width: 0;
}

.c10 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
  color: rgb(73,73,73);
  font-weight: 600;
}

.c10:not(:first-child) {
  border-left-width: 0;
}

.c10:not(:last-child) {
  border-right-width: 0;
}

.c12 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 9.375rem;
  display: table-cell;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c12:not(:first-child) {
  border-left-width: 0;
}

.c12:not(:last-child) {
  border-right-width: 0;
}

.c13 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 0rem;
  display: none;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c13:not(:first-child) {
  border-left-width: 0;
}

.c13:not(:last-child) {
  border-right-width: 0;
}

.c14 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 3.75rem;
  display: table-cell;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c14:not(:first-child) {
  border-left-width: 0;
}

.c14:not(:last-child) {
  border-right-width: 0;
}

.c2 {
  display: table-row;
  color: rgb(73,73,73);
  background-color: rgb(255,255,255);
  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
  box-sizing: border-box;
  color: rgb(73,73,73);
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.c2:last-child {
  box-shadow: none;
}

.c2:last-child td {
  border-bottom-width: 0.0625rem;
}

@media only screen and (min-width:37.4375rem) {
  .c13 {
    width: 10rem;
    display: table-cell;
  }
}

<table
    className="c0"
>
    <thead
        className="c1"
        disabled={undefined}
        name="thdead"
        selected={undefined}
    >
        <tr
            className="c2"
            disabled={undefined}
            name="tr"
            selected={undefined}
        >
            <th
                className="c3"
                disabled={undefined}
                name="th"
                selected={undefined}
            >
                <div
                    className="c4"
                    role="group"
                    style={undefined}
                >
                    <li
                        className="c5"
                    >
                        <div
                            checked={false}
                            className="c6"
                            disabled={false}
                            id="q"
                            onBlur={undefined}
                            onChange={[Function]}
                            type="checkbox"
                        >
                            <input
                                checked={false}
                                className="c7 c8"
                                disabled={false}
                                id="r"
                                onBlur={undefined}
                                onChange={[Function]}
                                type="checkbox"
                            />
                            <label
                                className="c9"
                                htmlFor="r"
                            />
                        </div>
                    </li>
                </div>
            </th>
            <th
                className="c10"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Name 
                </span>
                <div
                    className="c11"
                >
                    <svg
                        height="6"
                        style={
                            Object {
                                "transform": "rotate(180deg)",
                              }
                        }
                        viewBox="0 0 9.6 6"
                        width="9.6"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
                            fill="rgb(73, 73, 73)"
                        />
                    </svg>
                </div>
            </th>
            <th
                className="c12"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Status 
                </span>
            </th>
            <th
                className="c13"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Created 
                </span>
            </th>
            <th
                className="c14"
                disabled={undefined}
                name="th"
                selected={undefined}
            />
        </tr>
    </thead>
    <tbody
        className="c15"
        disabled={undefined}
        name="tbody"
        selected={undefined}
    />
</table>,
  .c6 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: 400;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c4 {
  margin-bottom: 0.75rem;
}

.c2 {
  padding: 8rem;
}

.c1 {
  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);
}

.c3 {
  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;
}

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

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

<div
    className="c0 c1"
    disabled={false}
    name="card"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <svg
                    height="109"
                    style={
                        Object {
                            "transform": "rotate(0deg)",
                          }
                    }
                    viewBox="0 0 119.34 109.47"
                    width="119"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlnsXlink="http://www.w3.org/1999/xlink"
                >
                    <defs>
                        <style
                            dangerouslySetInnerHTML={
                                Object {
                                    "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
                                  }
                            }
                        />
                        <radialGradient
                            cx="208.79"
                            cy="99.06"
                            gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient"
                            r="57.13"
                        >
                            <stop
                                offset="0.05"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.1"
                                stopColor="#415f72"
                            />
                            <stop
                                offset="0.13"
                                stopColor="#3a5769"
                            />
                            <stop
                                offset="0.16"
                                stopColor="#2e4959"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1d3543"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.26"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.32"
                                stopColor="#274150"
                            />
                            <stop
                                offset="0.39"
                                stopColor="#365364"
                            />
                            <stop
                                offset="0.43"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.49"
                                stopColor="#3f5d6f"
                            />
                            <stop
                                offset="0.56"
                                stopColor="#324e5f"
                            />
                            <stop
                                offset="0.65"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.66"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.9"
                                stopColor="#2c4656"
                            />
                            <stop
                                offset="0.95"
                                stopColor="#436275"
                            />
                        </radialGradient>
                        <radialGradient
                            cx="59.15"
                            cy="56.86"
                            gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-2"
                            r="46.01"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.1"
                                stopColor="#426073"
                            />
                            <stop
                                offset="0.13"
                                stopColor="#3c5a6c"
                            />
                            <stop
                                offset="0.16"
                                stopColor="#344f61"
                            />
                            <stop
                                offset="0.18"
                                stopColor="#274050"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.26"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.32"
                                stopColor="#274150"
                            />
                            <stop
                                offset="0.39"
                                stopColor="#365364"
                            />
                            <stop
                                offset="0.43"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.49"
                                stopColor="#3f5d6f"
                            />
                            <stop
                                offset="0.56"
                                stopColor="#324e5f"
                            />
                            <stop
                                offset="0.65"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.66"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.92"
                                stopColor="#2c4656"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                            />
                        </radialGradient>
                        <radialGradient
                            cx="-521.06"
                            cy="366.16"
                            gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-3"
                            r="32.44"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.02"
                                stopColor="#436275"
                                stopOpacity="0.97"
                            />
                            <stop
                                offset="0.34"
                                stopColor="#436275"
                                stopOpacity="0.55"
                            />
                            <stop
                                offset="0.62"
                                stopColor="#436275"
                                stopOpacity="0.25"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#436275"
                                stopOpacity="0.07"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                                stopOpacity={0}
                            />
                        </radialGradient>
                        <radialGradient
                            cx="-136.43"
                            cy="140.9"
                            gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-4"
                            r="54.82"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.58"
                                stopColor="#436275"
                                stopOpacity="0.4"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                                stopOpacity={0}
                            />
                        </radialGradient>
                    </defs>
                    <title>
                        Empty-state-illustration
                    </title>
                    <g
                        data-name="Layer 2"
                        id="Layer_2"
                    >
                        <g
                            data-name="Layer 1"
                            id="Layer_1-2"
                        >
                            <g
                                className="cls-1"
                            >
                                <path
                                    className="cls-2"
                                    d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
                                />
                            </g>
                            <g
                                className="cls-1"
                            >
                                <path
                                    className="cls-3"
                                    d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
                                />
                            </g>
                            <circle
                                className="cls-4"
                                cx="23.53"
                                cy="73.77"
                                r="11.93"
                            />
                            <circle
                                className="cls-5"
                                cx="23.53"
                                cy="73.77"
                                r="11.93"
                            />
                            <circle
                                className="cls-6"
                                cx="61.95"
                                cy="55.24"
                                r="34.25"
                            />
                            <circle
                                className="cls-7"
                                cx="61.95"
                                cy="55.24"
                                r="34.25"
                            />
                        </g>
                    </g>
                </svg>
            </div>
            <h3
                className="c5 c6"
            >
                You have no Snapshots
            </h3>
        </div>
    </div>
</div>,
]
`;

exports[`renders <SnapshotList allSelected /> without throwing 1`] = `
Array [
  .c8 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
}

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

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

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

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

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

.c11 {
  display: inline-block;
  margin-left: 0.375rem;
}

.c7 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  display: none;
}

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

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

.c7:checked + label {
  border-color: rgb(59,70,204);
}

.c7:selected + label {
  border-color: rgb(59,70,204);
}

.c7:disabled + label {
  background-color: rgb(249,249,249);
  cursor: not-allowed;
}

.c9 {
  color: rgb(100,100,100);
  position: absolute;
  width: 1.125rem;
  height: 1.125rem;
  box-sizing: border-box;
  top: 0;
  cursor: pointer;
  background-color: rgb(255,255,255);
  box-shadow: none;
  border: 0.0625rem solid rgb(216,216,216);
  cursor: pointer;
  border-radius: 0.25rem;
  width: 1.125rem;
  height: 1.125rem;
}

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

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

.c5 {
  list-style-type: none;
  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;
  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-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  height: 1.5rem;
}

.c5 label {
  font-weight: 400;
}

.c5 label::after {
  width: 0.475rem;
  height: 0.205rem;
  top: 0.4125rem;
  left: 0.35rem;
}

.c5 div[type='checkbox'],
.c5 div[type='checkbox'] input,
.c5 div[type='checkbox'] label {
  height: 1.5rem;
  width: 1.5rem;
}

.c4 {
  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;
}

.c0 {
  overflow: hidden;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}

.c1 {
  width: 100%;
  background: rgb(250,250,250);
}

.c1 th:first-child {
  border-top-left-radius: 0.25rem;
}

.c1 th:last-child {
  border-top-right-radius: 0.25rem;
}

.c15 {
  width: 100%;
}

.c3 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 2rem;
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c3:not(:first-child) {
  border-left-width: 0;
}

.c3:not(:last-child) {
  border-right-width: 0;
}

.c10 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
  color: rgb(73,73,73);
  font-weight: 600;
}

.c10:not(:first-child) {
  border-left-width: 0;
}

.c10:not(:last-child) {
  border-right-width: 0;
}

.c12 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 9.375rem;
  display: table-cell;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c12:not(:first-child) {
  border-left-width: 0;
}

.c12:not(:last-child) {
  border-right-width: 0;
}

.c13 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 0rem;
  display: none;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c13:not(:first-child) {
  border-left-width: 0;
}

.c13:not(:last-child) {
  border-right-width: 0;
}

.c14 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 3.75rem;
  display: table-cell;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c14:not(:first-child) {
  border-left-width: 0;
}

.c14:not(:last-child) {
  border-right-width: 0;
}

.c2 {
  display: table-row;
  color: rgb(73,73,73);
  background-color: rgb(255,255,255);
  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
  box-sizing: border-box;
  color: rgb(73,73,73);
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.c2:last-child {
  box-shadow: none;
}

.c2:last-child td {
  border-bottom-width: 0.0625rem;
}

@media only screen and (min-width:37.4375rem) {
  .c13 {
    width: 10rem;
    display: table-cell;
  }
}

<table
    className="c0"
>
    <thead
        className="c1"
        disabled={undefined}
        name="thdead"
        selected={undefined}
    >
        <tr
            className="c2"
            disabled={undefined}
            name="tr"
            selected={undefined}
        >
            <th
                className="c3"
                disabled={undefined}
                name="th"
                selected={undefined}
            >
                <div
                    className="c4"
                    role="group"
                    style={undefined}
                >
                    <li
                        className="c5"
                    >
                        <div
                            checked={true}
                            className="c6"
                            disabled={false}
                            id="F"
                            onBlur={undefined}
                            onChange={[Function]}
                            type="checkbox"
                        >
                            <input
                                checked={true}
                                className="c7 c8"
                                disabled={false}
                                id="G"
                                onBlur={undefined}
                                onChange={[Function]}
                                type="checkbox"
                            />
                            <label
                                className="c9"
                                htmlFor="G"
                            />
                        </div>
                    </li>
                </div>
            </th>
            <th
                className="c10"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Name 
                </span>
                <div
                    className="c11"
                >
                    <svg
                        height="6"
                        style={
                            Object {
                                "transform": "rotate(180deg)",
                              }
                        }
                        viewBox="0 0 9.6 6"
                        width="9.6"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
                            fill="rgb(73, 73, 73)"
                        />
                    </svg>
                </div>
            </th>
            <th
                className="c12"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Status 
                </span>
            </th>
            <th
                className="c13"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Created 
                </span>
            </th>
            <th
                className="c14"
                disabled={undefined}
                name="th"
                selected={undefined}
            />
        </tr>
    </thead>
    <tbody
        className="c15"
        disabled={undefined}
        name="tbody"
        selected={undefined}
    />
</table>,
  .c6 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: 400;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c4 {
  margin-bottom: 0.75rem;
}

.c2 {
  padding: 8rem;
}

.c1 {
  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);
}

.c3 {
  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;
}

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

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

<div
    className="c0 c1"
    disabled={false}
    name="card"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <svg
                    height="109"
                    style={
                        Object {
                            "transform": "rotate(0deg)",
                          }
                    }
                    viewBox="0 0 119.34 109.47"
                    width="119"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlnsXlink="http://www.w3.org/1999/xlink"
                >
                    <defs>
                        <style
                            dangerouslySetInnerHTML={
                                Object {
                                    "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
                                  }
                            }
                        />
                        <radialGradient
                            cx="208.79"
                            cy="99.06"
                            gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient"
                            r="57.13"
                        >
                            <stop
                                offset="0.05"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.1"
                                stopColor="#415f72"
                            />
                            <stop
                                offset="0.13"
                                stopColor="#3a5769"
                            />
                            <stop
                                offset="0.16"
                                stopColor="#2e4959"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1d3543"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.26"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.32"
                                stopColor="#274150"
                            />
                            <stop
                                offset="0.39"
                                stopColor="#365364"
                            />
                            <stop
                                offset="0.43"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.49"
                                stopColor="#3f5d6f"
                            />
                            <stop
                                offset="0.56"
                                stopColor="#324e5f"
                            />
                            <stop
                                offset="0.65"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.66"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.9"
                                stopColor="#2c4656"
                            />
                            <stop
                                offset="0.95"
                                stopColor="#436275"
                            />
                        </radialGradient>
                        <radialGradient
                            cx="59.15"
                            cy="56.86"
                            gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-2"
                            r="46.01"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.1"
                                stopColor="#426073"
                            />
                            <stop
                                offset="0.13"
                                stopColor="#3c5a6c"
                            />
                            <stop
                                offset="0.16"
                                stopColor="#344f61"
                            />
                            <stop
                                offset="0.18"
                                stopColor="#274050"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.26"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.32"
                                stopColor="#274150"
                            />
                            <stop
                                offset="0.39"
                                stopColor="#365364"
                            />
                            <stop
                                offset="0.43"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.49"
                                stopColor="#3f5d6f"
                            />
                            <stop
                                offset="0.56"
                                stopColor="#324e5f"
                            />
                            <stop
                                offset="0.65"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.66"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.92"
                                stopColor="#2c4656"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                            />
                        </radialGradient>
                        <radialGradient
                            cx="-521.06"
                            cy="366.16"
                            gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-3"
                            r="32.44"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.02"
                                stopColor="#436275"
                                stopOpacity="0.97"
                            />
                            <stop
                                offset="0.34"
                                stopColor="#436275"
                                stopOpacity="0.55"
                            />
                            <stop
                                offset="0.62"
                                stopColor="#436275"
                                stopOpacity="0.25"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#436275"
                                stopOpacity="0.07"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                                stopOpacity={0}
                            />
                        </radialGradient>
                        <radialGradient
                            cx="-136.43"
                            cy="140.9"
                            gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-4"
                            r="54.82"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.58"
                                stopColor="#436275"
                                stopOpacity="0.4"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                                stopOpacity={0}
                            />
                        </radialGradient>
                    </defs>
                    <title>
                        Empty-state-illustration
                    </title>
                    <g
                        data-name="Layer 2"
                        id="Layer_2"
                    >
                        <g
                            data-name="Layer 1"
                            id="Layer_1-2"
                        >
                            <g
                                className="cls-1"
                            >
                                <path
                                    className="cls-2"
                                    d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
                                />
                            </g>
                            <g
                                className="cls-1"
                            >
                                <path
                                    className="cls-3"
                                    d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
                                />
                            </g>
                            <circle
                                className="cls-4"
                                cx="23.53"
                                cy="73.77"
                                r="11.93"
                            />
                            <circle
                                className="cls-5"
                                cx="23.53"
                                cy="73.77"
                                r="11.93"
                            />
                            <circle
                                className="cls-6"
                                cx="61.95"
                                cy="55.24"
                                r="34.25"
                            />
                            <circle
                                className="cls-7"
                                cx="61.95"
                                cy="55.24"
                                r="34.25"
                            />
                        </g>
                    </g>
                </svg>
            </div>
            <h3
                className="c5 c6"
            >
                You have no Snapshots
            </h3>
        </div>
    </div>
</div>,
]
`;

exports[`renders <SnapshotList sortBy /> without throwing 1`] = `
Array [
  .c8 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
}

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

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

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

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

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

.c12 {
  display: inline-block;
  margin-left: 0.375rem;
}

.c7 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  display: none;
}

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

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

.c7:checked + label {
  border-color: rgb(59,70,204);
}

.c7:selected + label {
  border-color: rgb(59,70,204);
}

.c7:disabled + label {
  background-color: rgb(249,249,249);
  cursor: not-allowed;
}

.c9 {
  color: rgb(100,100,100);
  position: absolute;
  width: 1.125rem;
  height: 1.125rem;
  box-sizing: border-box;
  top: 0;
  cursor: pointer;
  background-color: rgb(255,255,255);
  box-shadow: none;
  border: 0.0625rem solid rgb(216,216,216);
  cursor: pointer;
  border-radius: 0.25rem;
  width: 1.125rem;
  height: 1.125rem;
}

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

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

.c5 {
  list-style-type: none;
  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;
  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-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  height: 1.5rem;
}

.c5 label {
  font-weight: 400;
}

.c5 label::after {
  width: 0.475rem;
  height: 0.205rem;
  top: 0.4125rem;
  left: 0.35rem;
}

.c5 div[type='checkbox'],
.c5 div[type='checkbox'] input,
.c5 div[type='checkbox'] label {
  height: 1.5rem;
  width: 1.5rem;
}

.c4 {
  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;
}

.c0 {
  overflow: hidden;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}

.c1 {
  width: 100%;
  background: rgb(250,250,250);
}

.c1 th:first-child {
  border-top-left-radius: 0.25rem;
}

.c1 th:last-child {
  border-top-right-radius: 0.25rem;
}

.c15 {
  width: 100%;
}

.c3 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 2rem;
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c3:not(:first-child) {
  border-left-width: 0;
}

.c3:not(:last-child) {
  border-right-width: 0;
}

.c13 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 0rem;
  display: none;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c13:not(:first-child) {
  border-left-width: 0;
}

.c13:not(:last-child) {
  border-right-width: 0;
}

.c14 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 3.75rem;
  display: table-cell;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c14:not(:first-child) {
  border-left-width: 0;
}

.c14:not(:last-child) {
  border-right-width: 0;
}

.c10 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c10:not(:first-child) {
  border-left-width: 0;
}

.c10:not(:last-child) {
  border-right-width: 0;
}

.c11 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 9.375rem;
  display: table-cell;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
  color: rgb(73,73,73);
  font-weight: 600;
}

.c11:not(:first-child) {
  border-left-width: 0;
}

.c11:not(:last-child) {
  border-right-width: 0;
}

.c2 {
  display: table-row;
  color: rgb(73,73,73);
  background-color: rgb(255,255,255);
  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
  box-sizing: border-box;
  color: rgb(73,73,73);
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.c2:last-child {
  box-shadow: none;
}

.c2:last-child td {
  border-bottom-width: 0.0625rem;
}

@media only screen and (min-width:37.4375rem) {
  .c13 {
    width: 10rem;
    display: table-cell;
  }
}

<table
    className="c0"
>
    <thead
        className="c1"
        disabled={undefined}
        name="thdead"
        selected={undefined}
    >
        <tr
            className="c2"
            disabled={undefined}
            name="tr"
            selected={undefined}
        >
            <th
                className="c3"
                disabled={undefined}
                name="th"
                selected={undefined}
            >
                <div
                    className="c4"
                    role="group"
                    style={undefined}
                >
                    <li
                        className="c5"
                    >
                        <div
                            checked={false}
                            className="c6"
                            disabled={false}
                            id="w"
                            onBlur={undefined}
                            onChange={[Function]}
                            type="checkbox"
                        >
                            <input
                                checked={false}
                                className="c7 c8"
                                disabled={false}
                                id="x"
                                onBlur={undefined}
                                onChange={[Function]}
                                type="checkbox"
                            />
                            <label
                                className="c9"
                                htmlFor="x"
                            />
                        </div>
                    </li>
                </div>
            </th>
            <th
                className="c10"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Name 
                </span>
            </th>
            <th
                className="c11"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Status 
                </span>
                <div
                    className="c12"
                >
                    <svg
                        height="6"
                        style={
                            Object {
                                "transform": "rotate(180deg)",
                              }
                        }
                        viewBox="0 0 9.6 6"
                        width="9.6"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
                            fill="rgb(73, 73, 73)"
                        />
                    </svg>
                </div>
            </th>
            <th
                className="c13"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Created 
                </span>
            </th>
            <th
                className="c14"
                disabled={undefined}
                name="th"
                selected={undefined}
            />
        </tr>
    </thead>
    <tbody
        className="c15"
        disabled={undefined}
        name="tbody"
        selected={undefined}
    />
</table>,
  .c6 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: 400;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c4 {
  margin-bottom: 0.75rem;
}

.c2 {
  padding: 8rem;
}

.c1 {
  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);
}

.c3 {
  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;
}

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

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

<div
    className="c0 c1"
    disabled={false}
    name="card"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <svg
                    height="109"
                    style={
                        Object {
                            "transform": "rotate(0deg)",
                          }
                    }
                    viewBox="0 0 119.34 109.47"
                    width="119"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlnsXlink="http://www.w3.org/1999/xlink"
                >
                    <defs>
                        <style
                            dangerouslySetInnerHTML={
                                Object {
                                    "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
                                  }
                            }
                        />
                        <radialGradient
                            cx="208.79"
                            cy="99.06"
                            gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient"
                            r="57.13"
                        >
                            <stop
                                offset="0.05"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.1"
                                stopColor="#415f72"
                            />
                            <stop
                                offset="0.13"
                                stopColor="#3a5769"
                            />
                            <stop
                                offset="0.16"
                                stopColor="#2e4959"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1d3543"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.26"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.32"
                                stopColor="#274150"
                            />
                            <stop
                                offset="0.39"
                                stopColor="#365364"
                            />
                            <stop
                                offset="0.43"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.49"
                                stopColor="#3f5d6f"
                            />
                            <stop
                                offset="0.56"
                                stopColor="#324e5f"
                            />
                            <stop
                                offset="0.65"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.66"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.9"
                                stopColor="#2c4656"
                            />
                            <stop
                                offset="0.95"
                                stopColor="#436275"
                            />
                        </radialGradient>
                        <radialGradient
                            cx="59.15"
                            cy="56.86"
                            gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-2"
                            r="46.01"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.1"
                                stopColor="#426073"
                            />
                            <stop
                                offset="0.13"
                                stopColor="#3c5a6c"
                            />
                            <stop
                                offset="0.16"
                                stopColor="#344f61"
                            />
                            <stop
                                offset="0.18"
                                stopColor="#274050"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.26"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.32"
                                stopColor="#274150"
                            />
                            <stop
                                offset="0.39"
                                stopColor="#365364"
                            />
                            <stop
                                offset="0.43"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.49"
                                stopColor="#3f5d6f"
                            />
                            <stop
                                offset="0.56"
                                stopColor="#324e5f"
                            />
                            <stop
                                offset="0.65"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.66"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.92"
                                stopColor="#2c4656"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                            />
                        </radialGradient>
                        <radialGradient
                            cx="-521.06"
                            cy="366.16"
                            gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-3"
                            r="32.44"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.02"
                                stopColor="#436275"
                                stopOpacity="0.97"
                            />
                            <stop
                                offset="0.34"
                                stopColor="#436275"
                                stopOpacity="0.55"
                            />
                            <stop
                                offset="0.62"
                                stopColor="#436275"
                                stopOpacity="0.25"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#436275"
                                stopOpacity="0.07"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                                stopOpacity={0}
                            />
                        </radialGradient>
                        <radialGradient
                            cx="-136.43"
                            cy="140.9"
                            gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-4"
                            r="54.82"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.58"
                                stopColor="#436275"
                                stopOpacity="0.4"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                                stopOpacity={0}
                            />
                        </radialGradient>
                    </defs>
                    <title>
                        Empty-state-illustration
                    </title>
                    <g
                        data-name="Layer 2"
                        id="Layer_2"
                    >
                        <g
                            data-name="Layer 1"
                            id="Layer_1-2"
                        >
                            <g
                                className="cls-1"
                            >
                                <path
                                    className="cls-2"
                                    d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
                                />
                            </g>
                            <g
                                className="cls-1"
                            >
                                <path
                                    className="cls-3"
                                    d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
                                />
                            </g>
                            <circle
                                className="cls-4"
                                cx="23.53"
                                cy="73.77"
                                r="11.93"
                            />
                            <circle
                                className="cls-5"
                                cx="23.53"
                                cy="73.77"
                                r="11.93"
                            />
                            <circle
                                className="cls-6"
                                cx="61.95"
                                cy="55.24"
                                r="34.25"
                            />
                            <circle
                                className="cls-7"
                                cx="61.95"
                                cy="55.24"
                                r="34.25"
                            />
                        </g>
                    </g>
                </svg>
            </div>
            <h3
                className="c5 c6"
            >
                You have no Snapshots
            </h3>
        </div>
    </div>
</div>,
]
`;

exports[`renders <SnapshotList sortBy sortOrder /> without throwing 1`] = `
Array [
  .c8 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
}

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

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

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

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

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

.c12 {
  display: inline-block;
  margin-left: 0.375rem;
}

.c7 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  display: none;
}

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

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

.c7:checked + label {
  border-color: rgb(59,70,204);
}

.c7:selected + label {
  border-color: rgb(59,70,204);
}

.c7:disabled + label {
  background-color: rgb(249,249,249);
  cursor: not-allowed;
}

.c9 {
  color: rgb(100,100,100);
  position: absolute;
  width: 1.125rem;
  height: 1.125rem;
  box-sizing: border-box;
  top: 0;
  cursor: pointer;
  background-color: rgb(255,255,255);
  box-shadow: none;
  border: 0.0625rem solid rgb(216,216,216);
  cursor: pointer;
  border-radius: 0.25rem;
  width: 1.125rem;
  height: 1.125rem;
}

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

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

.c5 {
  list-style-type: none;
  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;
  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-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  height: 1.5rem;
}

.c5 label {
  font-weight: 400;
}

.c5 label::after {
  width: 0.475rem;
  height: 0.205rem;
  top: 0.4125rem;
  left: 0.35rem;
}

.c5 div[type='checkbox'],
.c5 div[type='checkbox'] input,
.c5 div[type='checkbox'] label {
  height: 1.5rem;
  width: 1.5rem;
}

.c4 {
  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;
}

.c0 {
  overflow: hidden;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}

.c1 {
  width: 100%;
  background: rgb(250,250,250);
}

.c1 th:first-child {
  border-top-left-radius: 0.25rem;
}

.c1 th:last-child {
  border-top-right-radius: 0.25rem;
}

.c15 {
  width: 100%;
}

.c3 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 2rem;
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c3:not(:first-child) {
  border-left-width: 0;
}

.c3:not(:last-child) {
  border-right-width: 0;
}

.c13 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 0rem;
  display: none;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c13:not(:first-child) {
  border-left-width: 0;
}

.c13:not(:last-child) {
  border-right-width: 0;
}

.c14 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 3.75rem;
  display: table-cell;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c14:not(:first-child) {
  border-left-width: 0;
}

.c14:not(:last-child) {
  border-right-width: 0;
}

.c10 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c10:not(:first-child) {
  border-left-width: 0;
}

.c10:not(:last-child) {
  border-right-width: 0;
}

.c11 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 9.375rem;
  display: table-cell;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
  color: rgb(73,73,73);
  font-weight: 600;
}

.c11:not(:first-child) {
  border-left-width: 0;
}

.c11:not(:last-child) {
  border-right-width: 0;
}

.c2 {
  display: table-row;
  color: rgb(73,73,73);
  background-color: rgb(255,255,255);
  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
  box-sizing: border-box;
  color: rgb(73,73,73);
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.c2:last-child {
  box-shadow: none;
}

.c2:last-child td {
  border-bottom-width: 0.0625rem;
}

@media only screen and (min-width:37.4375rem) {
  .c13 {
    width: 10rem;
    display: table-cell;
  }
}

<table
    className="c0"
>
    <thead
        className="c1"
        disabled={undefined}
        name="thdead"
        selected={undefined}
    >
        <tr
            className="c2"
            disabled={undefined}
            name="tr"
            selected={undefined}
        >
            <th
                className="c3"
                disabled={undefined}
                name="th"
                selected={undefined}
            >
                <div
                    className="c4"
                    role="group"
                    style={undefined}
                >
                    <li
                        className="c5"
                    >
                        <div
                            checked={false}
                            className="c6"
                            disabled={false}
                            id="z"
                            onBlur={undefined}
                            onChange={[Function]}
                            type="checkbox"
                        >
                            <input
                                checked={false}
                                className="c7 c8"
                                disabled={false}
                                id="A"
                                onBlur={undefined}
                                onChange={[Function]}
                                type="checkbox"
                            />
                            <label
                                className="c9"
                                htmlFor="A"
                            />
                        </div>
                    </li>
                </div>
            </th>
            <th
                className="c10"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Name 
                </span>
            </th>
            <th
                className="c11"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Status 
                </span>
                <div
                    className="c12"
                >
                    <svg
                        height="6"
                        style={
                            Object {
                                "transform": "rotate(0deg)",
                              }
                        }
                        viewBox="0 0 9.6 6"
                        width="9.6"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
                            fill="rgb(73, 73, 73)"
                        />
                    </svg>
                </div>
            </th>
            <th
                className="c13"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Created 
                </span>
            </th>
            <th
                className="c14"
                disabled={undefined}
                name="th"
                selected={undefined}
            />
        </tr>
    </thead>
    <tbody
        className="c15"
        disabled={undefined}
        name="tbody"
        selected={undefined}
    />
</table>,
  .c6 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: 400;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c4 {
  margin-bottom: 0.75rem;
}

.c2 {
  padding: 8rem;
}

.c1 {
  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);
}

.c3 {
  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;
}

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

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

<div
    className="c0 c1"
    disabled={false}
    name="card"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <svg
                    height="109"
                    style={
                        Object {
                            "transform": "rotate(0deg)",
                          }
                    }
                    viewBox="0 0 119.34 109.47"
                    width="119"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlnsXlink="http://www.w3.org/1999/xlink"
                >
                    <defs>
                        <style
                            dangerouslySetInnerHTML={
                                Object {
                                    "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
                                  }
                            }
                        />
                        <radialGradient
                            cx="208.79"
                            cy="99.06"
                            gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient"
                            r="57.13"
                        >
                            <stop
                                offset="0.05"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.1"
                                stopColor="#415f72"
                            />
                            <stop
                                offset="0.13"
                                stopColor="#3a5769"
                            />
                            <stop
                                offset="0.16"
                                stopColor="#2e4959"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1d3543"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.26"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.32"
                                stopColor="#274150"
                            />
                            <stop
                                offset="0.39"
                                stopColor="#365364"
                            />
                            <stop
                                offset="0.43"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.49"
                                stopColor="#3f5d6f"
                            />
                            <stop
                                offset="0.56"
                                stopColor="#324e5f"
                            />
                            <stop
                                offset="0.65"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.66"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.9"
                                stopColor="#2c4656"
                            />
                            <stop
                                offset="0.95"
                                stopColor="#436275"
                            />
                        </radialGradient>
                        <radialGradient
                            cx="59.15"
                            cy="56.86"
                            gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-2"
                            r="46.01"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.1"
                                stopColor="#426073"
                            />
                            <stop
                                offset="0.13"
                                stopColor="#3c5a6c"
                            />
                            <stop
                                offset="0.16"
                                stopColor="#344f61"
                            />
                            <stop
                                offset="0.18"
                                stopColor="#274050"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.26"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.32"
                                stopColor="#274150"
                            />
                            <stop
                                offset="0.39"
                                stopColor="#365364"
                            />
                            <stop
                                offset="0.43"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.49"
                                stopColor="#3f5d6f"
                            />
                            <stop
                                offset="0.56"
                                stopColor="#324e5f"
                            />
                            <stop
                                offset="0.65"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.66"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.92"
                                stopColor="#2c4656"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                            />
                        </radialGradient>
                        <radialGradient
                            cx="-521.06"
                            cy="366.16"
                            gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-3"
                            r="32.44"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.02"
                                stopColor="#436275"
                                stopOpacity="0.97"
                            />
                            <stop
                                offset="0.34"
                                stopColor="#436275"
                                stopOpacity="0.55"
                            />
                            <stop
                                offset="0.62"
                                stopColor="#436275"
                                stopOpacity="0.25"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#436275"
                                stopOpacity="0.07"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                                stopOpacity={0}
                            />
                        </radialGradient>
                        <radialGradient
                            cx="-136.43"
                            cy="140.9"
                            gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-4"
                            r="54.82"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.58"
                                stopColor="#436275"
                                stopOpacity="0.4"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                                stopOpacity={0}
                            />
                        </radialGradient>
                    </defs>
                    <title>
                        Empty-state-illustration
                    </title>
                    <g
                        data-name="Layer 2"
                        id="Layer_2"
                    >
                        <g
                            data-name="Layer 1"
                            id="Layer_1-2"
                        >
                            <g
                                className="cls-1"
                            >
                                <path
                                    className="cls-2"
                                    d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
                                />
                            </g>
                            <g
                                className="cls-1"
                            >
                                <path
                                    className="cls-3"
                                    d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
                                />
                            </g>
                            <circle
                                className="cls-4"
                                cx="23.53"
                                cy="73.77"
                                r="11.93"
                            />
                            <circle
                                className="cls-5"
                                cx="23.53"
                                cy="73.77"
                                r="11.93"
                            />
                            <circle
                                className="cls-6"
                                cx="61.95"
                                cy="55.24"
                                r="34.25"
                            />
                            <circle
                                className="cls-7"
                                cx="61.95"
                                cy="55.24"
                                r="34.25"
                            />
                        </g>
                    </g>
                </svg>
            </div>
            <h3
                className="c5 c6"
            >
                You have no Snapshots
            </h3>
        </div>
    </div>
</div>,
]
`;

exports[`renders <SnapshotList submitting /> without throwing 1`] = `
Array [
  .c8 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
}

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

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

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

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

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

.c11 {
  display: inline-block;
  margin-left: 0.375rem;
}

.c7 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  display: none;
}

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

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

.c7:checked + label {
  border-color: rgb(59,70,204);
}

.c7:selected + label {
  border-color: rgb(59,70,204);
}

.c7:disabled + label {
  background-color: rgb(249,249,249);
  cursor: not-allowed;
}

.c9 {
  color: rgb(100,100,100);
  position: absolute;
  width: 1.125rem;
  height: 1.125rem;
  box-sizing: border-box;
  top: 0;
  cursor: pointer;
  background-color: rgb(255,255,255);
  box-shadow: none;
  border: 0.0625rem solid rgb(216,216,216);
  cursor: pointer;
  border-radius: 0.25rem;
  width: 1.125rem;
  height: 1.125rem;
}

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

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

.c5 {
  list-style-type: none;
  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;
  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-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  height: 1.5rem;
}

.c5 label {
  font-weight: 400;
}

.c5 label::after {
  width: 0.475rem;
  height: 0.205rem;
  top: 0.4125rem;
  left: 0.35rem;
}

.c5 div[type='checkbox'],
.c5 div[type='checkbox'] input,
.c5 div[type='checkbox'] label {
  height: 1.5rem;
  width: 1.5rem;
}

.c4 {
  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;
}

.c0 {
  overflow: hidden;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}

.c1 {
  width: 100%;
  background: rgb(250,250,250);
}

.c1 th:first-child {
  border-top-left-radius: 0.25rem;
}

.c1 th:last-child {
  border-top-right-radius: 0.25rem;
}

.c15 {
  width: 100%;
}

.c3 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 2rem;
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c3:not(:first-child) {
  border-left-width: 0;
}

.c3:not(:last-child) {
  border-right-width: 0;
}

.c10 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
  color: rgb(73,73,73);
  font-weight: 600;
}

.c10:not(:first-child) {
  border-left-width: 0;
}

.c10:not(:last-child) {
  border-right-width: 0;
}

.c12 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 9.375rem;
  display: table-cell;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c12:not(:first-child) {
  border-left-width: 0;
}

.c12:not(:last-child) {
  border-right-width: 0;
}

.c13 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 0rem;
  display: none;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: left;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c13:not(:first-child) {
  border-left-width: 0;
}

.c13:not(:last-child) {
  border-right-width: 0;
}

.c14 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
  border-spacing: 0;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 1.5rem;
  height: 3.75rem;
  width: 3.75rem;
  display: table-cell;
  height: 2.625rem;
  color: rgb(189,189,189);
  font-weight: 500;
  border-bottom-width: 0;
}

.c14:not(:first-child) {
  border-left-width: 0;
}

.c14:not(:last-child) {
  border-right-width: 0;
}

.c2 {
  display: table-row;
  color: rgb(73,73,73);
  background-color: rgb(255,255,255);
  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
  box-sizing: border-box;
  color: rgb(73,73,73);
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.c2:last-child {
  box-shadow: none;
}

.c2:last-child td {
  border-bottom-width: 0.0625rem;
}

@media only screen and (min-width:37.4375rem) {
  .c13 {
    width: 10rem;
    display: table-cell;
  }
}

<table
    className="c0"
>
    <thead
        className="c1"
        disabled={undefined}
        name="thdead"
        selected={undefined}
    >
        <tr
            className="c2"
            disabled={undefined}
            name="tr"
            selected={undefined}
        >
            <th
                className="c3"
                disabled={undefined}
                name="th"
                selected={undefined}
            >
                <div
                    className="c4"
                    role="group"
                    style={undefined}
                >
                    <li
                        className="c5"
                    >
                        <div
                            checked={false}
                            className="c6"
                            disabled={true}
                            id="C"
                            onBlur={undefined}
                            onChange={[Function]}
                            type="checkbox"
                        >
                            <input
                                checked={false}
                                className="c7 c8"
                                disabled={true}
                                id="D"
                                onBlur={undefined}
                                onChange={[Function]}
                                type="checkbox"
                            />
                            <label
                                className="c9"
                                htmlFor="D"
                            />
                        </div>
                    </li>
                </div>
            </th>
            <th
                className="c10"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Name 
                </span>
                <div
                    className="c11"
                >
                    <svg
                        height="6"
                        style={
                            Object {
                                "transform": "rotate(180deg)",
                              }
                        }
                        viewBox="0 0 9.6 6"
                        width="9.6"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
                            fill="rgb(73, 73, 73)"
                        />
                    </svg>
                </div>
            </th>
            <th
                className="c12"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Status 
                </span>
            </th>
            <th
                className="c13"
                disabled={undefined}
                name="th"
                onClick={[Function]}
                selected={undefined}
            >
                <span>
                    Created 
                </span>
            </th>
            <th
                className="c14"
                disabled={undefined}
                name="th"
                selected={undefined}
            />
        </tr>
    </thead>
    <tbody
        className="c15"
        disabled={undefined}
        name="tbody"
        selected={undefined}
    />
</table>,
  .c6 {
  margin: 0;
  color: rgb(73,73,73);
  font-weight: 400;
  line-height: 1.625rem;
  font-size: 1.3125rem;
}

.c4 {
  margin-bottom: 0.75rem;
}

.c2 {
  padding: 8rem;
}

.c1 {
  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);
}

.c3 {
  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;
}

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

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

<div
    className="c0 c1"
    disabled={false}
    name="card"
>
    <div
        className="c2"
    >
        <div
            className="c3"
        >
            <div
                className="c4"
            >
                <svg
                    height="109"
                    style={
                        Object {
                            "transform": "rotate(0deg)",
                          }
                    }
                    viewBox="0 0 119.34 109.47"
                    width="119"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlnsXlink="http://www.w3.org/1999/xlink"
                >
                    <defs>
                        <style
                            dangerouslySetInnerHTML={
                                Object {
                                    "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
                                  }
                            }
                        />
                        <radialGradient
                            cx="208.79"
                            cy="99.06"
                            gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient"
                            r="57.13"
                        >
                            <stop
                                offset="0.05"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.1"
                                stopColor="#415f72"
                            />
                            <stop
                                offset="0.13"
                                stopColor="#3a5769"
                            />
                            <stop
                                offset="0.16"
                                stopColor="#2e4959"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1d3543"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.26"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.32"
                                stopColor="#274150"
                            />
                            <stop
                                offset="0.39"
                                stopColor="#365364"
                            />
                            <stop
                                offset="0.43"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.49"
                                stopColor="#3f5d6f"
                            />
                            <stop
                                offset="0.56"
                                stopColor="#324e5f"
                            />
                            <stop
                                offset="0.65"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.66"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.9"
                                stopColor="#2c4656"
                            />
                            <stop
                                offset="0.95"
                                stopColor="#436275"
                            />
                        </radialGradient>
                        <radialGradient
                            cx="59.15"
                            cy="56.86"
                            gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-2"
                            r="46.01"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.1"
                                stopColor="#426073"
                            />
                            <stop
                                offset="0.13"
                                stopColor="#3c5a6c"
                            />
                            <stop
                                offset="0.16"
                                stopColor="#344f61"
                            />
                            <stop
                                offset="0.18"
                                stopColor="#274050"
                            />
                            <stop
                                offset="0.19"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.26"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.32"
                                stopColor="#274150"
                            />
                            <stop
                                offset="0.39"
                                stopColor="#365364"
                            />
                            <stop
                                offset="0.43"
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.49"
                                stopColor="#3f5d6f"
                            />
                            <stop
                                offset="0.56"
                                stopColor="#324e5f"
                            />
                            <stop
                                offset="0.65"
                                stopColor="#1e3644"
                            />
                            <stop
                                offset="0.66"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#1b3240"
                            />
                            <stop
                                offset="0.92"
                                stopColor="#2c4656"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                            />
                        </radialGradient>
                        <radialGradient
                            cx="-521.06"
                            cy="366.16"
                            gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-3"
                            r="32.44"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.02"
                                stopColor="#436275"
                                stopOpacity="0.97"
                            />
                            <stop
                                offset="0.34"
                                stopColor="#436275"
                                stopOpacity="0.55"
                            />
                            <stop
                                offset="0.62"
                                stopColor="#436275"
                                stopOpacity="0.25"
                            />
                            <stop
                                offset="0.85"
                                stopColor="#436275"
                                stopOpacity="0.07"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                                stopOpacity={0}
                            />
                        </radialGradient>
                        <radialGradient
                            cx="-136.43"
                            cy="140.9"
                            gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
                            gradientUnits="userSpaceOnUse"
                            id="radial-gradient-4"
                            r="54.82"
                        >
                            <stop
                                offset={0}
                                stopColor="#436275"
                            />
                            <stop
                                offset="0.58"
                                stopColor="#436275"
                                stopOpacity="0.4"
                            />
                            <stop
                                offset={1}
                                stopColor="#436275"
                                stopOpacity={0}
                            />
                        </radialGradient>
                    </defs>
                    <title>
                        Empty-state-illustration
                    </title>
                    <g
                        data-name="Layer 2"
                        id="Layer_2"
                    >
                        <g
                            data-name="Layer 1"
                            id="Layer_1-2"
                        >
                            <g
                                className="cls-1"
                            >
                                <path
                                    className="cls-2"
                                    d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
                                />
                            </g>
                            <g
                                className="cls-1"
                            >
                                <path
                                    className="cls-3"
                                    d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
                                />
                            </g>
                            <circle
                                className="cls-4"
                                cx="23.53"
                                cy="73.77"
                                r="11.93"
                            />
                            <circle
                                className="cls-5"
                                cx="23.53"
                                cy="73.77"
                                r="11.93"
                            />
                            <circle
                                className="cls-6"
                                cx="61.95"
                                cy="55.24"
                                r="34.25"
                            />
                            <circle
                                className="cls-7"
                                cx="61.95"
                                cy="55.24"
                                r="34.25"
                            />
                        </g>
                    </g>
                </svg>
            </div>
            <h3
                className="c5 c6"
            >
                You have no Snapshots
            </h3>
        </div>
    </div>
</div>,
]
`;