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

exports[`PriceChart renders correctly with all prices filled 1`] = `
<DocumentFragment>
  .c3 {
  color: #40B66B;
}

.c0 {
  position: absolute;
  -webkit-animation: iAjNNh 125ms ease-in;
  animation: iAjNNh 125ms ease-in;
  -webkit-animation-duration: 250ms;
  animation-duration: 250ms;
}

.c1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
  font-size: 24px;
  line-height: 44px;
}

.c2 {
  height: 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 4px;
  color: #7D7D7D;
}

<div
    class="c0"
    data-cy="chart-header"
  >
    <div
      class="c1"
    >
      <div
        class="css-15popx1"
      >
        $1.00
      </div>
    </div>
    <div
      class="c2"
    >
      0.00%
      <svg
        aria-label="up"
        class="c3"
        fill="none"
        height="16"
        viewBox="0 0 24 24"
        width="16"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M13.3021 7.7547L17.6821 14.2475C18.4182 15.3388 17.7942 17 16.6482 17L7.3518 17C6.2058 17 5.5818 15.3376 6.3179 14.2475L10.6979 7.7547C11.377 6.7484 12.623 6.7484 13.3021 7.7547Z"
          fill="currentColor"
        />
      </svg>
    </div>
  </div>
  <svg
    data-cy="price-chart"
    height="392"
    style="min-width: 100%;"
    width="780"
  >
    <g
      class="visx-group visx-axis visx-axis-bottom"
      transform="translate(0, 391)"
    >
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="0"
            y="18"
          >
            <tspan
              dy="0em"
              x="0"
            >
              0
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="90.27777777777777"
            y="18"
          >
            <tspan
              dy="0em"
              x="90.27777777777777"
            >
              5,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="180.55555555555554"
            y="18"
          >
            <tspan
              dy="0em"
              x="180.55555555555554"
            >
              10,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="270.8333333333333"
            y="18"
          >
            <tspan
              dy="0em"
              x="270.8333333333333"
            >
              15,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="361.1111111111111"
            y="18"
          >
            <tspan
              dy="0em"
              x="361.1111111111111"
            >
              20,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="451.3888888888889"
            y="18"
          >
            <tspan
              dy="0em"
              x="451.3888888888889"
            >
              25,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="541.6666666666666"
            y="18"
          >
            <tspan
              dy="0em"
              x="541.6666666666666"
            >
              30,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="631.9444444444445"
            y="18"
          >
            <tspan
              dy="0em"
              x="631.9444444444445"
            >
              35,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="722.2222222222222"
            y="18"
          >
            <tspan
              dy="0em"
              x="722.2222222222222"
            >
              40,000
            </tspan>
          </text>
        </svg>
      </g>
    </g>
    <rect
      fill="transparent"
      height="392"
      width="780"
      x="0"
      y="0"
    />
  </svg>
</DocumentFragment>
`;

exports[`PriceChart renders correctly with empty price array 1`] = `
<DocumentFragment>
  .c1 {
  color: #CECECE;
}

.c0 {
  position: absolute;
  -webkit-animation: iAjNNh 125ms ease-in;
  animation: iAjNNh 125ms ease-in;
  -webkit-animation-duration: 250ms;
  animation-duration: 250ms;
}

<div
    class="c0"
    data-cy="chart-header"
  >
    <div
      class="c1 css-slqfkh"
    >
      Price Unavailable
    </div>
    <div
      class="c1 css-142zc9n"
    >
      Missing price data due to recently low trading volume on Uniswap v3
    </div>
  </div>
  <svg
    data-cy="missing-chart"
    height="392"
    style="min-width: 100%;"
    width="780"
  >
    <path
      d="M 0 241 Q 104 171, 208 241 T 416 241
          M 416 241 Q 520 171, 624 241 T 832 241"
      fill="transparent"
      stroke="#22222212"
      stroke-width="2"
    />
  </svg>
</DocumentFragment>
`;

exports[`PriceChart renders correctly with some prices filled 1`] = `
<DocumentFragment>
  .c2 {
  display: inline-block;
  height: inherit;
}

.c4 {
  color: #7D7D7D;
}

.c0 {
  position: absolute;
  -webkit-animation: iAjNNh 125ms ease-in;
  animation: iAjNNh 125ms ease-in;
  -webkit-animation-duration: 250ms;
  animation-duration: 250ms;
  color: #7D7D7D;
}

.c1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
  font-size: 24px;
  line-height: 44px;
}

.c3 {
  height: 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 4px;
  color: #7D7D7D;
}

<div
    class="c0"
    data-cy="chart-header"
  >
    <div
      class="c1"
    >
      <div
        class="css-15popx1"
      >
        $1.00
      </div>
      <div
        class="c2"
      >
        <div>
          <svg
            data-testid="chart-stale-icon"
            fill="none"
            height="16"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle
              cx="12"
              cy="12"
              r="10"
            />
            <line
              x1="12"
              x2="12"
              y1="16"
              y2="12"
            />
            <line
              x1="12"
              x2="12.01"
              y1="8"
              y2="8"
            />
          </svg>
        </div>
      </div>
    </div>
    <div
      class="c3"
    >
      0.00%
      <svg
        aria-label="up"
        class="c4"
        fill="none"
        height="16"
        viewBox="0 0 24 24"
        width="16"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M13.3021 7.7547L17.6821 14.2475C18.4182 15.3388 17.7942 17 16.6482 17L7.3518 17C6.2058 17 5.5818 15.3376 6.3179 14.2475L10.6979 7.7547C11.377 6.7484 12.623 6.7484 13.3021 7.7547Z"
          fill="currentColor"
        />
      </svg>
    </div>
  </div>
  <svg
    data-cy="price-chart"
    height="392"
    style="min-width: 100%;"
    width="780"
  >
    <g
      class="visx-group visx-axis visx-axis-bottom"
      transform="translate(0, 391)"
    >
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="0"
            y="18"
          >
            <tspan
              dy="0em"
              x="0"
            >
              0
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="90.27777777777777"
            y="18"
          >
            <tspan
              dy="0em"
              x="90.27777777777777"
            >
              5,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="180.55555555555554"
            y="18"
          >
            <tspan
              dy="0em"
              x="180.55555555555554"
            >
              10,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="270.8333333333333"
            y="18"
          >
            <tspan
              dy="0em"
              x="270.8333333333333"
            >
              15,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="361.1111111111111"
            y="18"
          >
            <tspan
              dy="0em"
              x="361.1111111111111"
            >
              20,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="451.3888888888889"
            y="18"
          >
            <tspan
              dy="0em"
              x="451.3888888888889"
            >
              25,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="541.6666666666666"
            y="18"
          >
            <tspan
              dy="0em"
              x="541.6666666666666"
            >
              30,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="631.9444444444445"
            y="18"
          >
            <tspan
              dy="0em"
              x="631.9444444444445"
            >
              35,000
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="722.2222222222222"
            y="18"
          >
            <tspan
              dy="0em"
              x="722.2222222222222"
            >
              40,000
            </tspan>
          </text>
        </svg>
      </g>
    </g>
    <rect
      fill="transparent"
      height="392"
      width="780"
      x="0"
      y="0"
    />
  </svg>
</DocumentFragment>
`;

exports[`PriceChart renders correctly with undefined prices 1`] = `
<DocumentFragment>
  .c1 {
  color: #CECECE;
}

.c0 {
  position: absolute;
  -webkit-animation: iAjNNh 125ms ease-in;
  animation: iAjNNh 125ms ease-in;
  -webkit-animation-duration: 250ms;
  animation-duration: 250ms;
}

<div
    class="c0"
    data-cy="chart-header"
  >
    <div
      class="c1 css-slqfkh"
    >
      Price Unavailable
    </div>
    <div
      class="c1 css-142zc9n"
    >
      Missing chart data
    </div>
  </div>
  <svg
    data-cy="missing-chart"
    height="392"
    style="min-width: 100%;"
    width="780"
  >
    <path
      d="M 0 241 Q 104 171, 208 241 T 416 241
          M 416 241 Q 520 171, 624 241 T 832 241"
      fill="transparent"
      stroke="#22222212"
      stroke-width="2"
    />
  </svg>
</DocumentFragment>
`;

exports[`PriceChart renders stale UI 1`] = `
<DocumentFragment>
  .c2 {
  display: inline-block;
  height: inherit;
}

.c4 {
  color: #7D7D7D;
}

.c0 {
  position: absolute;
  -webkit-animation: iAjNNh 125ms ease-in;
  animation: iAjNNh 125ms ease-in;
  -webkit-animation-duration: 250ms;
  animation-duration: 250ms;
  color: #7D7D7D;
}

.c1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
  font-size: 24px;
  line-height: 44px;
}

.c3 {
  height: 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 4px;
  color: #7D7D7D;
}

<div
    class="c0"
    data-cy="chart-header"
  >
    <div
      class="c1"
    >
      <div
        class="css-15popx1"
      >
        $1.00
      </div>
      <div
        class="c2"
      >
        <div>
          <svg
            data-testid="chart-stale-icon"
            fill="none"
            height="16"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle
              cx="12"
              cy="12"
              r="10"
            />
            <line
              x1="12"
              x2="12"
              y1="16"
              y2="12"
            />
            <line
              x1="12"
              x2="12.01"
              y1="8"
              y2="8"
            />
          </svg>
        </div>
      </div>
    </div>
    <div
      class="c3"
    >
      0.00%
      <svg
        aria-label="up"
        class="c4"
        fill="none"
        height="16"
        viewBox="0 0 24 24"
        width="16"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M13.3021 7.7547L17.6821 14.2475C18.4182 15.3388 17.7942 17 16.6482 17L7.3518 17C6.2058 17 5.5818 15.3376 6.3179 14.2475L10.6979 7.7547C11.377 6.7484 12.623 6.7484 13.3021 7.7547Z"
          fill="currentColor"
        />
      </svg>
    </div>
  </div>
  <svg
    data-cy="price-chart"
    height="392"
    style="min-width: 100%;"
    width="780"
  >
    <g
      class="visx-group visx-axis visx-axis-bottom"
      transform="translate(0, 391)"
    >
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="48.75"
            y="18"
          >
            <tspan
              dy="0em"
              x="48.75"
            >
              1,694,538,840
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="109.6875"
            y="18"
          >
            <tspan
              dy="0em"
              x="109.6875"
            >
              1,694,538,845
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="170.625"
            y="18"
          >
            <tspan
              dy="0em"
              x="170.625"
            >
              1,694,538,850
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="231.5625"
            y="18"
          >
            <tspan
              dy="0em"
              x="231.5625"
            >
              1,694,538,855
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="292.5"
            y="18"
          >
            <tspan
              dy="0em"
              x="292.5"
            >
              1,694,538,860
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="353.4375"
            y="18"
          >
            <tspan
              dy="0em"
              x="353.4375"
            >
              1,694,538,865
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="414.375"
            y="18"
          >
            <tspan
              dy="0em"
              x="414.375"
            >
              1,694,538,870
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="475.3125"
            y="18"
          >
            <tspan
              dy="0em"
              x="475.3125"
            >
              1,694,538,875
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="536.25"
            y="18"
          >
            <tspan
              dy="0em"
              x="536.25"
            >
              1,694,538,880
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="597.1875"
            y="18"
          >
            <tspan
              dy="0em"
              x="597.1875"
            >
              1,694,538,885
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="658.125"
            y="18"
          >
            <tspan
              dy="0em"
              x="658.125"
            >
              1,694,538,890
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="719.0625"
            y="18"
          >
            <tspan
              dy="0em"
              x="719.0625"
            >
              1,694,538,895
            </tspan>
          </text>
        </svg>
      </g>
      <g
        class="visx-group visx-axis-tick"
        transform="translate(0, 0)"
      >
        <svg
          font-size="10"
          style="overflow: visible;"
          x="0"
          y="0.25em"
        >
          <text
            fill="#222"
            font-family="Arial"
            font-size="10"
            text-anchor="middle"
            transform=""
            x="780"
            y="18"
          >
            <tspan
              dy="0em"
              x="780"
            >
              1,694,538,900
            </tspan>
          </text>
        </svg>
      </g>
    </g>
    <rect
      fill="transparent"
      height="392"
      width="780"
      x="0"
      y="0"
    />
  </svg>
</DocumentFragment>
`;
