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

exports[`SwapLineItem.tsx dutch order eth input 1`] = `
<DocumentFragment>
  .c4 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
}

.c10 {
  color: #4673fa;
}

.c0 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c8 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c14 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c14:hover {
  opacity: 0.6;
}

.c14:active {
  opacity: 0.4;
}

.c11 {
  z-index: 1070;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 150ms linear, opacity 150ms linear;
  transition: visibility 150ms linear, opacity 150ms linear;
  color: #7D7D7D;
}

.c2 {
  display: inline-block;
  height: inherit;
}

.c15 {
  width: 8px;
  height: 8px;
  z-index: 9998;
}

.c15::before {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  z-index: 9998;
  content: '';
  border: 1px solid #22222212;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #FFFFFF;
}

.c15.arrow-top {
  bottom: -4px;
}

.c15.arrow-top::before {
  border-top: none;
  border-left: none;
}

.c15.arrow-bottom {
  top: -4px;
}

.c15.arrow-bottom::before {
  border-bottom: none;
  border-right: none;
}

.c15.arrow-left {
  right: -4px;
}

.c15.arrow-left::before {
  border-bottom: none;
  border-left: none;
}

.c15.arrow-right {
  left: -4px;
}

.c15.arrow-right::before {
  border-right: none;
  border-top: none;
}

.c12 {
  max-width: 256px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 12px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c5 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c6 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 4px;
}

.c9 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.c7 {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: -xs;
}

.c1 {
  cursor: help;
  color: #7D7D7D;
}

.c3 {
  text-align: right;
  overflow-wrap: break-word;
}

.c13 {
  display: inline;
}

.c16 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@supports (-webkit-background-clip:text) and (-webkit-text-fill-color:transparent) {
  .c10 {
    background-image: linear-gradient(91.39deg,#4673fa -101.76%,#9646fa 101.76%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Network cost
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c2"
                  >
                    <div>
                      <div
                        class="c4"
                      >
                        <div
                          class="c5 c6 c7"
                        >
                          <svg
                            data-testid="gas-estimate-uniswapx-icon"
                            fill="none"
                            height="14"
                            viewBox="0 0 10 14"
                            width="10"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <defs>
                              <lineargradient
                                gradientUnits="userSpaceOnUse"
                                id="AutoRouterIconGradientfixed-uuid-value"
                                x1="-10.1807"
                                x2="10.6573"
                                y1="-12.0006"
                                y2="-11.6017"
                              >
                                <stop
                                  stop-color="#4673FA"
                                />
                                <stop
                                  offset="1"
                                  stop-color="#9646FA"
                                />
                              </lineargradient>
                            </defs>
                            <path
                              d="M9.97131 6.19803C9.91798 6.07737 9.79866 6.00003 9.66666 6.00003H6.66666V1.00003C6.66666 0.862034 6.58201 0.738037 6.45267 0.688704C6.32267 0.638704 6.17799 0.674696 6.08532 0.776696L0.0853237 7.44336C-0.00267631 7.54136 -0.0253169 7.68137 0.0286831 7.80204C0.0820164 7.9227 0.20133 8.00003 0.33333 8.00003H3.33333V13C3.33333 13.138 3.41799 13.262 3.54732 13.3114C3.58665 13.326 3.62666 13.3334 3.66666 13.3334C3.75933 13.3334 3.85 13.2947 3.91467 13.2227L9.91467 6.55603C10.0027 6.4587 10.0246 6.31803 9.97131 6.19803Z"
                              fill="url(#AutoRouterIconGradientfixed-uuid-value)"
                            />
                          </svg>
                          <div
                            class="c8 css-142zc9n"
                          >
                            <div
                              class="c5 c9"
                            >
                              <div
                                class="c10"
                              >
                                <div
                                  style="font-weight: 535;"
                                >
                                  $0
                                </div>
                              </div>
                              <div>
                                <s>
                                  $7.87
                                </s>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="c11"
                    style="position: fixed; left: 0px; top: 0px;"
                  >
                    <div
                      class="c12"
                    >
                      <div
                        class="c8 css-obwv3p"
                      >
                        <div
                          class="c10 c13"
                        >
                          UniswapX
                        </div>
                         aggregates liquidity sources for better prices and gas free swaps. 
                        <a
                          class="c14"
                          href="https://support.uniswap.org/hc/en-us/articles/17515415311501"
                          rel="noopener noreferrer"
                          target="_blank"
                        >
                          Learn more
                        </a>
                      </div>
                    </div>
                    <div
                      class="c15 arrow-"
                      style="position: absolute;"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c8 css-obwv3p"
                >
                  <div
                    class="c8 css-obwv3p"
                  >
                    <div
                      class="c10 c13"
                    >
                      UniswapX
                    </div>
                     aggregates liquidity sources for better prices and gas free swaps. 
                    <a
                      class="c14"
                      href="https://support.uniswap.org/hc/en-us/articles/17515415311501"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="c15 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Max. slippage
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c5 c9"
                  >
                    <div
                      class="c8 c16 css-1lgneq0"
                    >
                      Auto
                    </div>
                     2%
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c8 css-obwv3p"
                >
                  The maximum price movement before your transaction will revert.
                  <br />
                  <a
                    class="c14"
                    href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c15 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Fee 
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  0 DEF
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c8 css-obwv3p"
                >
                  Fees are applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap.
                  <br />
                  <a
                    class="c14"
                    href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c15 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Receive at least
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  0.0000000000000009 DEF
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c8 css-obwv3p"
                >
                  If the price moves so that you will receive less than 0.0000000000000009 DEF, your transaction will revert.
                  <br />
                  <a
                    class="c14"
                    href="https://support.uniswap.org/hc/en-us/articles/8643794102669-Price-Impact-vs-Price-Slippage"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c15 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Order routing
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="_flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _gap-t-space-gap52 _alignItems-center _width-auto _display-inline-flex"
                  >
                    <svg
                      fill="none"
                      height="14"
                      viewBox="0 0 10 14"
                      width="10"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <defs>
                        <lineargradient
                          gradientUnits="userSpaceOnUse"
                          id="AutoRouterIconGradientfixed-uuid-value"
                          x1="-10.1807"
                          x2="10.6573"
                          y1="-12.0006"
                          y2="-11.6017"
                        >
                          <stop
                            stop-color="#4673FA"
                          />
                          <stop
                            offset="1"
                            stop-color="#9646FA"
                          />
                        </lineargradient>
                      </defs>
                      <path
                        d="M9.97131 6.19803C9.91798 6.07737 9.79866 6.00003 9.66666 6.00003H6.66666V1.00003C6.66666 0.862034 6.58201 0.738037 6.45267 0.688704C6.32267 0.638704 6.17799 0.674696 6.08532 0.776696L0.0853237 7.44336C-0.00267631 7.54136 -0.0253169 7.68137 0.0286831 7.80204C0.0820164 7.9227 0.20133 8.00003 0.33333 8.00003H3.33333V13C3.33333 13.138 3.41799 13.262 3.54732 13.3114C3.58665 13.326 3.62666 13.3334 3.66666 13.3334C3.75933 13.3334 3.85 13.2947 3.91467 13.2227L9.91467 6.55603C10.0027 6.4587 10.0246 6.31803 9.97131 6.19803Z"
                        fill="url(#AutoRouterIconGradientfixed-uuid-value)"
                      />
                    </svg>
                    <div
                      class="c10"
                    >
                      <div
                        class="c0 css-142zc9n"
                      >
                        Uniswap X
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c8 css-obwv3p"
                >
                  <div
                    class="c8 css-obwv3p"
                  >
                    <div
                      class="c10 c13"
                    >
                      UniswapX
                    </div>
                     aggregates liquidity sources for better prices and gas free swaps. 
                    <a
                      class="c14"
                      href="https://support.uniswap.org/hc/en-us/articles/17515415311501"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="c15 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
      </span>
    </span>
  </span>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx dutch v2 order eth input 1`] = `
<DocumentFragment>
  .c4 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
}

.c10 {
  color: #4673fa;
}

.c0 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c8 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c14 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c14:hover {
  opacity: 0.6;
}

.c14:active {
  opacity: 0.4;
}

.c11 {
  z-index: 1070;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 150ms linear, opacity 150ms linear;
  transition: visibility 150ms linear, opacity 150ms linear;
  color: #7D7D7D;
}

.c2 {
  display: inline-block;
  height: inherit;
}

.c15 {
  width: 8px;
  height: 8px;
  z-index: 9998;
}

.c15::before {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  z-index: 9998;
  content: '';
  border: 1px solid #22222212;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #FFFFFF;
}

.c15.arrow-top {
  bottom: -4px;
}

.c15.arrow-top::before {
  border-top: none;
  border-left: none;
}

.c15.arrow-bottom {
  top: -4px;
}

.c15.arrow-bottom::before {
  border-bottom: none;
  border-right: none;
}

.c15.arrow-left {
  right: -4px;
}

.c15.arrow-left::before {
  border-bottom: none;
  border-left: none;
}

.c15.arrow-right {
  left: -4px;
}

.c15.arrow-right::before {
  border-right: none;
  border-top: none;
}

.c12 {
  max-width: 256px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 12px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c5 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c6 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 4px;
}

.c9 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.c7 {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: -xs;
}

.c1 {
  cursor: help;
  color: #7D7D7D;
}

.c3 {
  text-align: right;
  overflow-wrap: break-word;
}

.c13 {
  display: inline;
}

.c16 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@supports (-webkit-background-clip:text) and (-webkit-text-fill-color:transparent) {
  .c10 {
    background-image: linear-gradient(91.39deg,#4673fa -101.76%,#9646fa 101.76%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Network cost
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c2"
                  >
                    <div>
                      <div
                        class="c4"
                      >
                        <div
                          class="c5 c6 c7"
                        >
                          <svg
                            data-testid="gas-estimate-uniswapx-icon"
                            fill="none"
                            height="14"
                            viewBox="0 0 10 14"
                            width="10"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <defs>
                              <lineargradient
                                gradientUnits="userSpaceOnUse"
                                id="AutoRouterIconGradientfixed-uuid-value"
                                x1="-10.1807"
                                x2="10.6573"
                                y1="-12.0006"
                                y2="-11.6017"
                              >
                                <stop
                                  stop-color="#4673FA"
                                />
                                <stop
                                  offset="1"
                                  stop-color="#9646FA"
                                />
                              </lineargradient>
                            </defs>
                            <path
                              d="M9.97131 6.19803C9.91798 6.07737 9.79866 6.00003 9.66666 6.00003H6.66666V1.00003C6.66666 0.862034 6.58201 0.738037 6.45267 0.688704C6.32267 0.638704 6.17799 0.674696 6.08532 0.776696L0.0853237 7.44336C-0.00267631 7.54136 -0.0253169 7.68137 0.0286831 7.80204C0.0820164 7.9227 0.20133 8.00003 0.33333 8.00003H3.33333V13C3.33333 13.138 3.41799 13.262 3.54732 13.3114C3.58665 13.326 3.62666 13.3334 3.66666 13.3334C3.75933 13.3334 3.85 13.2947 3.91467 13.2227L9.91467 6.55603C10.0027 6.4587 10.0246 6.31803 9.97131 6.19803Z"
                              fill="url(#AutoRouterIconGradientfixed-uuid-value)"
                            />
                          </svg>
                          <div
                            class="c8 css-142zc9n"
                          >
                            <div
                              class="c5 c9"
                            >
                              <div
                                class="c10"
                              >
                                <div
                                  style="font-weight: 535;"
                                >
                                  $0
                                </div>
                              </div>
                              <div>
                                <s>
                                  $7.87
                                </s>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="c11"
                    style="position: fixed; left: 0px; top: 0px;"
                  >
                    <div
                      class="c12"
                    >
                      <div
                        class="c8 css-obwv3p"
                      >
                        <div
                          class="c10 c13"
                        >
                          UniswapX
                        </div>
                         aggregates liquidity sources for better prices and gas free swaps. 
                        <a
                          class="c14"
                          href="https://support.uniswap.org/hc/en-us/articles/17515415311501"
                          rel="noopener noreferrer"
                          target="_blank"
                        >
                          Learn more
                        </a>
                      </div>
                    </div>
                    <div
                      class="c15 arrow-"
                      style="position: absolute;"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c8 css-obwv3p"
                >
                  <div
                    class="c8 css-obwv3p"
                  >
                    <div
                      class="c10 c13"
                    >
                      UniswapX
                    </div>
                     aggregates liquidity sources for better prices and gas free swaps. 
                    <a
                      class="c14"
                      href="https://support.uniswap.org/hc/en-us/articles/17515415311501"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="c15 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Max. slippage
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c5 c9"
                  >
                    <div
                      class="c8 c16 css-1lgneq0"
                    >
                      Auto
                    </div>
                     2%
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c8 css-obwv3p"
                >
                  The maximum price movement before your transaction will revert.
                  <br />
                  <a
                    class="c14"
                    href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c15 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Fee 
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  0 DEF
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c8 css-obwv3p"
                >
                  Fees are applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap.
                  <br />
                  <a
                    class="c14"
                    href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c15 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Receive at least
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  0.0000000000000009 DEF
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c8 css-obwv3p"
                >
                  If the price moves so that you will receive less than 0.0000000000000009 DEF, your transaction will revert.
                  <br />
                  <a
                    class="c14"
                    href="https://support.uniswap.org/hc/en-us/articles/8643794102669-Price-Impact-vs-Price-Slippage"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c15 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Order routing
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="_flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _gap-t-space-gap52 _alignItems-center _width-auto _display-inline-flex"
                  >
                    <svg
                      fill="none"
                      height="14"
                      viewBox="0 0 10 14"
                      width="10"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <defs>
                        <lineargradient
                          gradientUnits="userSpaceOnUse"
                          id="AutoRouterIconGradientfixed-uuid-value"
                          x1="-10.1807"
                          x2="10.6573"
                          y1="-12.0006"
                          y2="-11.6017"
                        >
                          <stop
                            stop-color="#4673FA"
                          />
                          <stop
                            offset="1"
                            stop-color="#9646FA"
                          />
                        </lineargradient>
                      </defs>
                      <path
                        d="M9.97131 6.19803C9.91798 6.07737 9.79866 6.00003 9.66666 6.00003H6.66666V1.00003C6.66666 0.862034 6.58201 0.738037 6.45267 0.688704C6.32267 0.638704 6.17799 0.674696 6.08532 0.776696L0.0853237 7.44336C-0.00267631 7.54136 -0.0253169 7.68137 0.0286831 7.80204C0.0820164 7.9227 0.20133 8.00003 0.33333 8.00003H3.33333V13C3.33333 13.138 3.41799 13.262 3.54732 13.3114C3.58665 13.326 3.62666 13.3334 3.66666 13.3334C3.75933 13.3334 3.85 13.2947 3.91467 13.2227L9.91467 6.55603C10.0027 6.4587 10.0246 6.31803 9.97131 6.19803Z"
                        fill="url(#AutoRouterIconGradientfixed-uuid-value)"
                      />
                    </svg>
                    <div
                      class="c10"
                    >
                      <div
                        class="c0 css-142zc9n"
                      >
                        Uniswap X
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c8 css-obwv3p"
                >
                  <div
                    class="c8 css-obwv3p"
                  >
                    <div
                      class="c10 c13"
                    >
                      UniswapX
                    </div>
                     aggregates liquidity sources for better prices and gas free swaps. 
                    <a
                      class="c14"
                      href="https://support.uniswap.org/hc/en-us/articles/17515415311501"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="c15 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
      </span>
    </span>
  </span>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx exact input 1`] = `
<DocumentFragment>
  .c4 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
}

.c0 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c9 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c16 {
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c13 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c13:hover {
  opacity: 0.6;
}

.c13:active {
  opacity: 0.4;
}

.c11 {
  z-index: 1070;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 150ms linear, opacity 150ms linear;
  transition: visibility 150ms linear, opacity 150ms linear;
  color: #7D7D7D;
}

.c2 {
  display: inline-block;
  height: inherit;
}

.c14 {
  width: 8px;
  height: 8px;
  z-index: 9998;
}

.c14::before {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  z-index: 9998;
  content: '';
  border: 1px solid #22222212;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #FFFFFF;
}

.c14.arrow-top {
  bottom: -4px;
}

.c14.arrow-top::before {
  border-top: none;
  border-left: none;
}

.c14.arrow-bottom {
  top: -4px;
}

.c14.arrow-bottom::before {
  border-bottom: none;
  border-right: none;
}

.c14.arrow-left {
  right: -4px;
}

.c14.arrow-left::before {
  border-bottom: none;
  border-left: none;
}

.c14.arrow-right {
  left: -4px;
}

.c14.arrow-right::before {
  border-right: none;
  border-top: none;
}

.c12 {
  max-width: 256px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 12px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c17 {
  max-width: 400px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 16px 20px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c5 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c6 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 4px;
}

.c10 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.c7 {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: -xs;
}

.c1 {
  cursor: help;
  color: #7D7D7D;
}

.c3 {
  text-align: right;
  overflow-wrap: break-word;
}

.c18 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 12px;
}

.c8 {
  height: 16px;
  width: 16px;
}

.c8 > * {
  fill: #CECECE;
}

.c15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Network cost
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c2"
                  >
                    <div>
                      <div
                        class="c4"
                      >
                        <div
                          class="c5 c6 c7"
                        >
                          <svg
                            class="c8"
                            fill="none"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M15.3078 1.77827C15.7064 1.39599 16.3395 1.40923 16.7217 1.80783L20.9689 6.23633C21.2428 6.47474 21.4729 6.76205 21.6459 7.08464C21.8481 7.43172 22 7.84819 22 8.32698V16.7012C22 18.2484 20.7455 19.5 19.2 19.5C17.6536 19.5 16.4 18.2464 16.4 16.7V14.3999C16.4 13.8476 15.9523 13.3999 15.4 13.3999H14V20.5C14 20.569 13.9965 20.6372 13.9897 20.7045C13.9515 21.08 13.8095 21.4249 13.5927 21.7098C13.2274 22.19 12.6499 22.5 12 22.5H4C3.30964 22.5 2.70098 22.1502 2.34157 21.6182C2.12592 21.299 2.00001 20.9142 2 20.5V5.4999C2 3.84305 3.34315 2.4999 5 2.4999H11C12.6569 2.4999 14 3.84305 14 5.4999V11.3999H15.4C17.0569 11.3999 18.4 12.7431 18.4 14.3999V16.7C18.4 17.1418 18.7582 17.5 19.2 17.5C19.6427 17.5 20 17.1422 20 16.7012V11.3292C19.6872 11.4397 19.3506 11.4999 19 11.4999C17.3431 11.4999 16 10.1568 16 8.4999C16 7.28851 16.718 6.24482 17.7517 5.77117L15.2783 3.19217C14.896 2.79357 14.9092 2.16055 15.3078 1.77827ZM19.6098 7.70731C19.441 7.57725 19.2296 7.4999 19 7.4999C18.4477 7.4999 18 7.94762 18 8.4999C18 9.05219 18.4477 9.4999 19 9.4999C19.5523 9.4999 20 9.05219 20 8.4999C20 8.34084 19.9629 8.19045 19.8968 8.05693C19.8303 7.95164 19.7349 7.83559 19.6098 7.70731ZM5.21572 4.72463C4.66343 4.72463 4.21572 5.17235 4.21572 5.72463V9.72463C4.21572 10.2769 4.66343 10.7246 5.21572 10.7246H10.7157C11.268 10.7246 11.7157 10.2769 11.7157 9.72463V5.72463C11.7157 5.17235 11.268 4.72463 10.7157 4.72463H5.21572Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                          <div
                            class="c9 css-142zc9n"
                          >
                            <div
                              class="c5 c10"
                            >
                              <div>
                                $1.00
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="c11"
                    style="position: fixed; left: 0px; top: 0px;"
                  >
                    <div
                      class="c12"
                    >
                      <div
                        class="c9 css-1m65e73"
                      >
                        Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                        <a
                          class="c13"
                          href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                          rel="noopener noreferrer"
                          target="_blank"
                        >
                          Learn more
                        </a>
                      </div>
                    </div>
                    <div
                      class="c14 arrow-"
                      style="position: absolute;"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  <div
                    class="c9 css-1m65e73"
                  >
                    Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                    <a
                      class="c13"
                      href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Max. slippage
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c5 c10"
                  >
                    <div
                      class="c9 c15 css-1lgneq0"
                    >
                      Auto
                    </div>
                     2%
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  The maximum price movement before your transaction will revert.
                  <br />
                  <a
                    class="c13"
                    href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Fee 
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  0 DEF
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  Fees are applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap.
                  <br />
                  <a
                    class="c13"
                    href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Receive at least
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  0.00000000000000098 DEF
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will revert.
                  <br />
                  <a
                    class="c13"
                    href="https://support.uniswap.org/hc/en-us/articles/8643794102669-Price-Impact-vs-Price-Slippage"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Order routing
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c16 css-142zc9n"
                  >
                    Uniswap Client
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c17"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  <div
                    class="c18"
                  >
                    <div
                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                    >
                      <div
                        class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center"
                        style="display: grid; grid-template-columns: 24px 1fr 24px;"
                      >
                        <div
                          class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-center _width-10037"
                          style="padding: 0.1rem 0.5rem;"
                        >
                          <div
                            class="_display-flex _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _position-absolute _width-10037 _zIndex-1 _opacity-0--5"
                          >
                            <svg
                              stroke-width="8"
                              style="color: currentColor; width: 8px; height: 8px; min-width: 100%; min-height: 35px;"
                              viewBox="850 0 300 200"
                              width="100%"
                            >
                              <line
                                stroke="currentColor"
                                stroke-dasharray="1, 45"
                                stroke-linecap="round"
                                stroke-width="20"
                                x1="0"
                                x2="3000"
                                y1="100"
                                y2="100"
                              />
                            </svg>
                          </div>
                          <div
                            class="_display-_platformweb_grid _gridGap-_platformweb_t-space-spa94665589 _gridAutoFlow-_platformweb_column _display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-flex-start _backgroundColor-surface2 _borderTopLeftRadius-t-radius-ro840690002 _borderTopRightRadius-t-radius-ro840690002 _borderBottomRightRadius-t-radius-ro840690002 _borderBottomLeftRadius-t-radius-ro840690002 _pt-t-space-spa94665589 _pr-t-space-spa94665589 _pb-t-space-spa94665589 _pl-t-space-spa94665589 _zIndex-1020"
                          >
                            <span
                              class="font_body _wordBreak-_platformweb_normal _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-micr111 _lineHeight-f-lineHeigh1263414315 _fontWeight-f-weight-bo3548"
                              data-disable-theme="true"
                            >
                              V3
                            </span>
                            <span
                              class="font_body _wordBreak-_platformweb_normal _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-micr111 _lineHeight-f-lineHeigh1263414315 _fontWeight-f-weight-bo3548"
                              data-disable-theme="true"
                              style="min-width: auto;"
                            >
                              100%
                            </span>
                          </div>
                          <div
                            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _flexWrap-wrap _mt--32px _mr--32px _mb--32px _ml--32px _gap-1px _width-10037"
                            style="justify-content: space-evenly; z-index: 2;"
                          >
                            <div
                              aria-expanded="false"
                              class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0"
                              data-state="closed"
                            >
                              <div
                                class="_display-_platformweb_grid _gridGap-_platformweb_t-space-spa94665589 _gridAutoFlow-_platformweb_column _display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-flex-start _backgroundColor-surface2 _borderTopLeftRadius-t-radius-ro840690002 _borderTopRightRadius-t-radius-ro840690002 _borderBottomRightRadius-t-radius-ro840690002 _borderBottomLeftRadius-t-radius-ro840690002 _pt-t-space-spa94665589 _pr-t-space-spa94665589 _pb-t-space-spa94665589 _pl-t-space-spa94665589 _zIndex-1020"
                              >
                                <div
                                  class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _mr-4px _ml-12px"
                                >
                                  <div
                                    class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _height-20px _width-20px"
                                  >
                                    <div
                                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _left-0px _overflowX-hidden _overflowY-hidden _position-absolute _top-0px _width-9px"
                                      data-testid="input-currency-logo-container"
                                    />
                                    <div
                                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row-reverse _overflowX-hidden _overflowY-hidden _position-absolute _right-0px _top-0px _width-9px"
                                      data-testid="output-currency-logo-container"
                                    />
                                  </div>
                                </div>
                                <span
                                  class="font_body _wordBreak-_platformweb_normal _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-micr111 _lineHeight-f-lineHeigh1263414315 _fontWeight-f-weight-bo3548"
                                  data-disable-theme="true"
                                >
                                  1%
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      class="c9 css-obwv3p"
                    >
                      Best price route costs ~$1.00 in gas.  This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step.
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
      </span>
    </span>
  </span>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx exact input api 1`] = `
<DocumentFragment>
  .c4 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
}

.c0 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c9 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c16 {
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c13 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c13:hover {
  opacity: 0.6;
}

.c13:active {
  opacity: 0.4;
}

.c11 {
  z-index: 1070;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 150ms linear, opacity 150ms linear;
  transition: visibility 150ms linear, opacity 150ms linear;
  color: #7D7D7D;
}

.c2 {
  display: inline-block;
  height: inherit;
}

.c14 {
  width: 8px;
  height: 8px;
  z-index: 9998;
}

.c14::before {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  z-index: 9998;
  content: '';
  border: 1px solid #22222212;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #FFFFFF;
}

.c14.arrow-top {
  bottom: -4px;
}

.c14.arrow-top::before {
  border-top: none;
  border-left: none;
}

.c14.arrow-bottom {
  top: -4px;
}

.c14.arrow-bottom::before {
  border-bottom: none;
  border-right: none;
}

.c14.arrow-left {
  right: -4px;
}

.c14.arrow-left::before {
  border-bottom: none;
  border-left: none;
}

.c14.arrow-right {
  left: -4px;
}

.c14.arrow-right::before {
  border-right: none;
  border-top: none;
}

.c12 {
  max-width: 256px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 12px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c17 {
  max-width: 400px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 16px 20px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c5 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c6 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 4px;
}

.c10 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.c7 {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: -xs;
}

.c1 {
  cursor: help;
  color: #7D7D7D;
}

.c3 {
  text-align: right;
  overflow-wrap: break-word;
}

.c18 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 12px;
}

.c8 {
  height: 16px;
  width: 16px;
}

.c8 > * {
  fill: #CECECE;
}

.c15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Network cost
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c2"
                  >
                    <div>
                      <div
                        class="c4"
                      >
                        <div
                          class="c5 c6 c7"
                        >
                          <svg
                            class="c8"
                            fill="none"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M15.3078 1.77827C15.7064 1.39599 16.3395 1.40923 16.7217 1.80783L20.9689 6.23633C21.2428 6.47474 21.4729 6.76205 21.6459 7.08464C21.8481 7.43172 22 7.84819 22 8.32698V16.7012C22 18.2484 20.7455 19.5 19.2 19.5C17.6536 19.5 16.4 18.2464 16.4 16.7V14.3999C16.4 13.8476 15.9523 13.3999 15.4 13.3999H14V20.5C14 20.569 13.9965 20.6372 13.9897 20.7045C13.9515 21.08 13.8095 21.4249 13.5927 21.7098C13.2274 22.19 12.6499 22.5 12 22.5H4C3.30964 22.5 2.70098 22.1502 2.34157 21.6182C2.12592 21.299 2.00001 20.9142 2 20.5V5.4999C2 3.84305 3.34315 2.4999 5 2.4999H11C12.6569 2.4999 14 3.84305 14 5.4999V11.3999H15.4C17.0569 11.3999 18.4 12.7431 18.4 14.3999V16.7C18.4 17.1418 18.7582 17.5 19.2 17.5C19.6427 17.5 20 17.1422 20 16.7012V11.3292C19.6872 11.4397 19.3506 11.4999 19 11.4999C17.3431 11.4999 16 10.1568 16 8.4999C16 7.28851 16.718 6.24482 17.7517 5.77117L15.2783 3.19217C14.896 2.79357 14.9092 2.16055 15.3078 1.77827ZM19.6098 7.70731C19.441 7.57725 19.2296 7.4999 19 7.4999C18.4477 7.4999 18 7.94762 18 8.4999C18 9.05219 18.4477 9.4999 19 9.4999C19.5523 9.4999 20 9.05219 20 8.4999C20 8.34084 19.9629 8.19045 19.8968 8.05693C19.8303 7.95164 19.7349 7.83559 19.6098 7.70731ZM5.21572 4.72463C4.66343 4.72463 4.21572 5.17235 4.21572 5.72463V9.72463C4.21572 10.2769 4.66343 10.7246 5.21572 10.7246H10.7157C11.268 10.7246 11.7157 10.2769 11.7157 9.72463V5.72463C11.7157 5.17235 11.268 4.72463 10.7157 4.72463H5.21572Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                          <div
                            class="c9 css-142zc9n"
                          >
                            <div
                              class="c5 c10"
                            >
                              <div>
                                $1.00
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="c11"
                    style="position: fixed; left: 0px; top: 0px;"
                  >
                    <div
                      class="c12"
                    >
                      <div
                        class="c9 css-1m65e73"
                      >
                        Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                        <a
                          class="c13"
                          href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                          rel="noopener noreferrer"
                          target="_blank"
                        >
                          Learn more
                        </a>
                      </div>
                    </div>
                    <div
                      class="c14 arrow-"
                      style="position: absolute;"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  <div
                    class="c9 css-1m65e73"
                  >
                    Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                    <a
                      class="c13"
                      href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Max. slippage
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c5 c10"
                  >
                    <div
                      class="c9 c15 css-1lgneq0"
                    >
                      Auto
                    </div>
                     2%
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  The maximum price movement before your transaction will revert.
                  <br />
                  <a
                    class="c13"
                    href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Fee 
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  0 DEF
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  Fees are applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap.
                  <br />
                  <a
                    class="c13"
                    href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Receive at least
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  0.00000000000000098 DEF
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will revert.
                  <br />
                  <a
                    class="c13"
                    href="https://support.uniswap.org/hc/en-us/articles/8643794102669-Price-Impact-vs-Price-Slippage"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Order routing
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c16 css-142zc9n"
                  >
                    Uniswap API
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c17"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  <div
                    class="c18"
                  >
                    <div
                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                    >
                      <div
                        class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center"
                        style="display: grid; grid-template-columns: 24px 1fr 24px;"
                      >
                        <div
                          class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-center _width-10037"
                          style="padding: 0.1rem 0.5rem;"
                        >
                          <div
                            class="_display-flex _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _position-absolute _width-10037 _zIndex-1 _opacity-0--5"
                          >
                            <svg
                              stroke-width="8"
                              style="color: currentColor; width: 8px; height: 8px; min-width: 100%; min-height: 35px;"
                              viewBox="850 0 300 200"
                              width="100%"
                            >
                              <line
                                stroke="currentColor"
                                stroke-dasharray="1, 45"
                                stroke-linecap="round"
                                stroke-width="20"
                                x1="0"
                                x2="3000"
                                y1="100"
                                y2="100"
                              />
                            </svg>
                          </div>
                          <div
                            class="_display-_platformweb_grid _gridGap-_platformweb_t-space-spa94665589 _gridAutoFlow-_platformweb_column _display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-flex-start _backgroundColor-surface2 _borderTopLeftRadius-t-radius-ro840690002 _borderTopRightRadius-t-radius-ro840690002 _borderBottomRightRadius-t-radius-ro840690002 _borderBottomLeftRadius-t-radius-ro840690002 _pt-t-space-spa94665589 _pr-t-space-spa94665589 _pb-t-space-spa94665589 _pl-t-space-spa94665589 _zIndex-1020"
                          >
                            <span
                              class="font_body _wordBreak-_platformweb_normal _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-micr111 _lineHeight-f-lineHeigh1263414315 _fontWeight-f-weight-bo3548"
                              data-disable-theme="true"
                            >
                              V3
                            </span>
                            <span
                              class="font_body _wordBreak-_platformweb_normal _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-micr111 _lineHeight-f-lineHeigh1263414315 _fontWeight-f-weight-bo3548"
                              data-disable-theme="true"
                              style="min-width: auto;"
                            >
                              100%
                            </span>
                          </div>
                          <div
                            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _flexWrap-wrap _mt--32px _mr--32px _mb--32px _ml--32px _gap-1px _width-10037"
                            style="justify-content: space-evenly; z-index: 2;"
                          >
                            <div
                              aria-expanded="false"
                              class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0"
                              data-state="closed"
                            >
                              <div
                                class="_display-_platformweb_grid _gridGap-_platformweb_t-space-spa94665589 _gridAutoFlow-_platformweb_column _display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-flex-start _backgroundColor-surface2 _borderTopLeftRadius-t-radius-ro840690002 _borderTopRightRadius-t-radius-ro840690002 _borderBottomRightRadius-t-radius-ro840690002 _borderBottomLeftRadius-t-radius-ro840690002 _pt-t-space-spa94665589 _pr-t-space-spa94665589 _pb-t-space-spa94665589 _pl-t-space-spa94665589 _zIndex-1020"
                              >
                                <div
                                  class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _mr-4px _ml-12px"
                                >
                                  <div
                                    class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _height-20px _width-20px"
                                  >
                                    <div
                                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _left-0px _overflowX-hidden _overflowY-hidden _position-absolute _top-0px _width-9px"
                                      data-testid="input-currency-logo-container"
                                    />
                                    <div
                                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row-reverse _overflowX-hidden _overflowY-hidden _position-absolute _right-0px _top-0px _width-9px"
                                      data-testid="output-currency-logo-container"
                                    />
                                  </div>
                                </div>
                                <span
                                  class="font_body _wordBreak-_platformweb_normal _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-micr111 _lineHeight-f-lineHeigh1263414315 _fontWeight-f-weight-bo3548"
                                  data-disable-theme="true"
                                >
                                  1%
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      class="c9 css-obwv3p"
                    >
                      Best price route costs ~$1.00 in gas.  This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step.
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
      </span>
    </span>
  </span>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx exact output 1`] = `
<DocumentFragment>
  .c4 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
}

.c0 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c9 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c16 {
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c13 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c13:hover {
  opacity: 0.6;
}

.c13:active {
  opacity: 0.4;
}

.c11 {
  z-index: 1070;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 150ms linear, opacity 150ms linear;
  transition: visibility 150ms linear, opacity 150ms linear;
  color: #7D7D7D;
}

.c2 {
  display: inline-block;
  height: inherit;
}

.c14 {
  width: 8px;
  height: 8px;
  z-index: 9998;
}

.c14::before {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  z-index: 9998;
  content: '';
  border: 1px solid #22222212;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #FFFFFF;
}

.c14.arrow-top {
  bottom: -4px;
}

.c14.arrow-top::before {
  border-top: none;
  border-left: none;
}

.c14.arrow-bottom {
  top: -4px;
}

.c14.arrow-bottom::before {
  border-bottom: none;
  border-right: none;
}

.c14.arrow-left {
  right: -4px;
}

.c14.arrow-left::before {
  border-bottom: none;
  border-left: none;
}

.c14.arrow-right {
  left: -4px;
}

.c14.arrow-right::before {
  border-right: none;
  border-top: none;
}

.c12 {
  max-width: 256px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 12px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c17 {
  max-width: 400px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 16px 20px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c5 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c6 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 4px;
}

.c10 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.c7 {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: -xs;
}

.c1 {
  cursor: help;
  color: #7D7D7D;
}

.c3 {
  text-align: right;
  overflow-wrap: break-word;
}

.c18 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 12px;
}

.c8 {
  height: 16px;
  width: 16px;
}

.c8 > * {
  fill: #CECECE;
}

.c15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Network cost
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c2"
                  >
                    <div>
                      <div
                        class="c4"
                      >
                        <div
                          class="c5 c6 c7"
                        >
                          <svg
                            class="c8"
                            fill="none"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M15.3078 1.77827C15.7064 1.39599 16.3395 1.40923 16.7217 1.80783L20.9689 6.23633C21.2428 6.47474 21.4729 6.76205 21.6459 7.08464C21.8481 7.43172 22 7.84819 22 8.32698V16.7012C22 18.2484 20.7455 19.5 19.2 19.5C17.6536 19.5 16.4 18.2464 16.4 16.7V14.3999C16.4 13.8476 15.9523 13.3999 15.4 13.3999H14V20.5C14 20.569 13.9965 20.6372 13.9897 20.7045C13.9515 21.08 13.8095 21.4249 13.5927 21.7098C13.2274 22.19 12.6499 22.5 12 22.5H4C3.30964 22.5 2.70098 22.1502 2.34157 21.6182C2.12592 21.299 2.00001 20.9142 2 20.5V5.4999C2 3.84305 3.34315 2.4999 5 2.4999H11C12.6569 2.4999 14 3.84305 14 5.4999V11.3999H15.4C17.0569 11.3999 18.4 12.7431 18.4 14.3999V16.7C18.4 17.1418 18.7582 17.5 19.2 17.5C19.6427 17.5 20 17.1422 20 16.7012V11.3292C19.6872 11.4397 19.3506 11.4999 19 11.4999C17.3431 11.4999 16 10.1568 16 8.4999C16 7.28851 16.718 6.24482 17.7517 5.77117L15.2783 3.19217C14.896 2.79357 14.9092 2.16055 15.3078 1.77827ZM19.6098 7.70731C19.441 7.57725 19.2296 7.4999 19 7.4999C18.4477 7.4999 18 7.94762 18 8.4999C18 9.05219 18.4477 9.4999 19 9.4999C19.5523 9.4999 20 9.05219 20 8.4999C20 8.34084 19.9629 8.19045 19.8968 8.05693C19.8303 7.95164 19.7349 7.83559 19.6098 7.70731ZM5.21572 4.72463C4.66343 4.72463 4.21572 5.17235 4.21572 5.72463V9.72463C4.21572 10.2769 4.66343 10.7246 5.21572 10.7246H10.7157C11.268 10.7246 11.7157 10.2769 11.7157 9.72463V5.72463C11.7157 5.17235 11.268 4.72463 10.7157 4.72463H5.21572Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                          <div
                            class="c9 css-142zc9n"
                          >
                            <div
                              class="c5 c10"
                            >
                              <div>
                                -
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="c11"
                    style="position: fixed; left: 0px; top: 0px;"
                  >
                    <div
                      class="c12"
                    >
                      <div
                        class="c9 css-1m65e73"
                      >
                        Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                        <a
                          class="c13"
                          href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                          rel="noopener noreferrer"
                          target="_blank"
                        >
                          Learn more
                        </a>
                      </div>
                    </div>
                    <div
                      class="c14 arrow-"
                      style="position: absolute;"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  <div
                    class="c9 css-1m65e73"
                  >
                    Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                    <a
                      class="c13"
                      href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Max. slippage
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c5 c10"
                  >
                    <div
                      class="c9 c15 css-1lgneq0"
                    >
                      Auto
                    </div>
                     2%
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  The maximum price movement before your transaction will revert.
                  <br />
                  <a
                    class="c13"
                    href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Fee 
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  0 GHI
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  Fees are applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap.
                  <br />
                  <a
                    class="c13"
                    href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Pay at most
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  0.00000000000000102 ABC
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  The maximum amount you are guaranteed to spend. If the price slips any further, your transaction will revert.
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Receive at least
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  0.000000000000001 GHI
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  If the price moves so that you will receive less than 0.000000000000001 GHI, your transaction will revert.
                  <br />
                  <a
                    class="c13"
                    href="https://support.uniswap.org/hc/en-us/articles/8643794102669-Price-Impact-vs-Price-Slippage"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Order routing
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c16 css-142zc9n"
                  >
                    Uniswap Client
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c17"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  <div
                    class="c18"
                  >
                    <div
                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                    >
                      <div
                        class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center"
                        style="display: grid; grid-template-columns: 24px 1fr 24px;"
                      >
                        <div
                          class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-center _width-10037"
                          style="padding: 0.1rem 0.5rem;"
                        >
                          <div
                            class="_display-flex _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _position-absolute _width-10037 _zIndex-1 _opacity-0--5"
                          >
                            <svg
                              stroke-width="8"
                              style="color: currentColor; width: 8px; height: 8px; min-width: 100%; min-height: 35px;"
                              viewBox="850 0 300 200"
                              width="100%"
                            >
                              <line
                                stroke="currentColor"
                                stroke-dasharray="1, 45"
                                stroke-linecap="round"
                                stroke-width="20"
                                x1="0"
                                x2="3000"
                                y1="100"
                                y2="100"
                              />
                            </svg>
                          </div>
                          <div
                            class="_display-_platformweb_grid _gridGap-_platformweb_t-space-spa94665589 _gridAutoFlow-_platformweb_column _display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-flex-start _backgroundColor-surface2 _borderTopLeftRadius-t-radius-ro840690002 _borderTopRightRadius-t-radius-ro840690002 _borderBottomRightRadius-t-radius-ro840690002 _borderBottomLeftRadius-t-radius-ro840690002 _pt-t-space-spa94665589 _pr-t-space-spa94665589 _pb-t-space-spa94665589 _pl-t-space-spa94665589 _zIndex-1020"
                          >
                            <span
                              class="font_body _wordBreak-_platformweb_normal _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-micr111 _lineHeight-f-lineHeigh1263414315 _fontWeight-f-weight-bo3548"
                              data-disable-theme="true"
                            >
                              V3
                            </span>
                            <span
                              class="font_body _wordBreak-_platformweb_normal _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-micr111 _lineHeight-f-lineHeigh1263414315 _fontWeight-f-weight-bo3548"
                              data-disable-theme="true"
                              style="min-width: auto;"
                            >
                              100%
                            </span>
                          </div>
                          <div
                            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _flexWrap-wrap _mt--32px _mr--32px _mb--32px _ml--32px _gap-1px _width-10037"
                            style="justify-content: space-evenly; z-index: 2;"
                          >
                            <div
                              aria-expanded="false"
                              class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0"
                              data-state="closed"
                            >
                              <div
                                class="_display-_platformweb_grid _gridGap-_platformweb_t-space-spa94665589 _gridAutoFlow-_platformweb_column _display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-flex-start _backgroundColor-surface2 _borderTopLeftRadius-t-radius-ro840690002 _borderTopRightRadius-t-radius-ro840690002 _borderBottomRightRadius-t-radius-ro840690002 _borderBottomLeftRadius-t-radius-ro840690002 _pt-t-space-spa94665589 _pr-t-space-spa94665589 _pb-t-space-spa94665589 _pl-t-space-spa94665589 _zIndex-1020"
                              >
                                <div
                                  class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _mr-4px _ml-12px"
                                >
                                  <div
                                    class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _height-20px _width-20px"
                                  >
                                    <div
                                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _left-0px _overflowX-hidden _overflowY-hidden _position-absolute _top-0px _width-9px"
                                      data-testid="input-currency-logo-container"
                                    />
                                    <div
                                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row-reverse _overflowX-hidden _overflowY-hidden _position-absolute _right-0px _top-0px _width-9px"
                                      data-testid="output-currency-logo-container"
                                    />
                                  </div>
                                </div>
                                <span
                                  class="font_body _wordBreak-_platformweb_normal _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-micr111 _lineHeight-f-lineHeigh1263414315 _fontWeight-f-weight-bo3548"
                                  data-disable-theme="true"
                                >
                                  0.3%
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      class="c9 css-obwv3p"
                    >
                      This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step.
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
      </span>
    </span>
  </span>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx fee on buy 1`] = `
<DocumentFragment>
  .c4 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
}

.c0 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c9 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c16 {
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c13 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c13:hover {
  opacity: 0.6;
}

.c13:active {
  opacity: 0.4;
}

.c11 {
  z-index: 1070;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 150ms linear, opacity 150ms linear;
  transition: visibility 150ms linear, opacity 150ms linear;
  color: #7D7D7D;
}

.c2 {
  display: inline-block;
  height: inherit;
}

.c14 {
  width: 8px;
  height: 8px;
  z-index: 9998;
}

.c14::before {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  z-index: 9998;
  content: '';
  border: 1px solid #22222212;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #FFFFFF;
}

.c14.arrow-top {
  bottom: -4px;
}

.c14.arrow-top::before {
  border-top: none;
  border-left: none;
}

.c14.arrow-bottom {
  top: -4px;
}

.c14.arrow-bottom::before {
  border-bottom: none;
  border-right: none;
}

.c14.arrow-left {
  right: -4px;
}

.c14.arrow-left::before {
  border-bottom: none;
  border-left: none;
}

.c14.arrow-right {
  left: -4px;
}

.c14.arrow-right::before {
  border-right: none;
  border-top: none;
}

.c12 {
  max-width: 256px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 12px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c17 {
  max-width: 400px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 16px 20px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c5 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c6 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 4px;
}

.c10 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.c7 {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: -xs;
}

.c1 {
  cursor: help;
  color: #7D7D7D;
}

.c3 {
  text-align: right;
  overflow-wrap: break-word;
}

.c18 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 12px;
}

.c8 {
  height: 16px;
  width: 16px;
}

.c8 > * {
  fill: #CECECE;
}

.c15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Network cost
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c2"
                  >
                    <div>
                      <div
                        class="c4"
                      >
                        <div
                          class="c5 c6 c7"
                        >
                          <svg
                            class="c8"
                            fill="none"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M15.3078 1.77827C15.7064 1.39599 16.3395 1.40923 16.7217 1.80783L20.9689 6.23633C21.2428 6.47474 21.4729 6.76205 21.6459 7.08464C21.8481 7.43172 22 7.84819 22 8.32698V16.7012C22 18.2484 20.7455 19.5 19.2 19.5C17.6536 19.5 16.4 18.2464 16.4 16.7V14.3999C16.4 13.8476 15.9523 13.3999 15.4 13.3999H14V20.5C14 20.569 13.9965 20.6372 13.9897 20.7045C13.9515 21.08 13.8095 21.4249 13.5927 21.7098C13.2274 22.19 12.6499 22.5 12 22.5H4C3.30964 22.5 2.70098 22.1502 2.34157 21.6182C2.12592 21.299 2.00001 20.9142 2 20.5V5.4999C2 3.84305 3.34315 2.4999 5 2.4999H11C12.6569 2.4999 14 3.84305 14 5.4999V11.3999H15.4C17.0569 11.3999 18.4 12.7431 18.4 14.3999V16.7C18.4 17.1418 18.7582 17.5 19.2 17.5C19.6427 17.5 20 17.1422 20 16.7012V11.3292C19.6872 11.4397 19.3506 11.4999 19 11.4999C17.3431 11.4999 16 10.1568 16 8.4999C16 7.28851 16.718 6.24482 17.7517 5.77117L15.2783 3.19217C14.896 2.79357 14.9092 2.16055 15.3078 1.77827ZM19.6098 7.70731C19.441 7.57725 19.2296 7.4999 19 7.4999C18.4477 7.4999 18 7.94762 18 8.4999C18 9.05219 18.4477 9.4999 19 9.4999C19.5523 9.4999 20 9.05219 20 8.4999C20 8.34084 19.9629 8.19045 19.8968 8.05693C19.8303 7.95164 19.7349 7.83559 19.6098 7.70731ZM5.21572 4.72463C4.66343 4.72463 4.21572 5.17235 4.21572 5.72463V9.72463C4.21572 10.2769 4.66343 10.7246 5.21572 10.7246H10.7157C11.268 10.7246 11.7157 10.2769 11.7157 9.72463V5.72463C11.7157 5.17235 11.268 4.72463 10.7157 4.72463H5.21572Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                          <div
                            class="c9 css-142zc9n"
                          >
                            <div
                              class="c5 c10"
                            >
                              <div>
                                $1.00
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="c11"
                    style="position: fixed; left: 0px; top: 0px;"
                  >
                    <div
                      class="c12"
                    >
                      <div
                        class="c9 css-1m65e73"
                      >
                        Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                        <a
                          class="c13"
                          href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                          rel="noopener noreferrer"
                          target="_blank"
                        >
                          Learn more
                        </a>
                      </div>
                    </div>
                    <div
                      class="c14 arrow-"
                      style="position: absolute;"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  <div
                    class="c9 css-1m65e73"
                  >
                    Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                    <a
                      class="c13"
                      href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              DEF fee
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <span
                    class=""
                  >
                    3%
                  </span>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not receive any of these fees.
                  <br />
                  <a
                    class="c13"
                    href="https://support.uniswap.org/hc/en-us/articles/18673568523789-What-is-a-token-fee-"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Max. slippage
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c5 c10"
                  >
                    <div
                      class="c9 c15 css-1lgneq0"
                    >
                      Auto
                    </div>
                     2%
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  The maximum price movement before your transaction will revert.
                  <br />
                  <a
                    class="c13"
                    href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Fee 
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  0 DEF
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  Fees are applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap.
                  <br />
                  <a
                    class="c13"
                    href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Receive at least
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  0.00000000000000098 DEF
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will revert.
                  <br />
                  <a
                    class="c13"
                    href="https://support.uniswap.org/hc/en-us/articles/8643794102669-Price-Impact-vs-Price-Slippage"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Order routing
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c16 css-142zc9n"
                  >
                    Uniswap API
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c17"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  <div
                    class="c18"
                  >
                    <div
                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                    >
                      <div
                        class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center"
                        style="display: grid; grid-template-columns: 24px 1fr 24px;"
                      >
                        <div
                          class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-center _width-10037"
                          style="padding: 0.1rem 0.5rem;"
                        >
                          <div
                            class="_display-flex _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _position-absolute _width-10037 _zIndex-1 _opacity-0--5"
                          >
                            <svg
                              stroke-width="8"
                              style="color: currentColor; width: 8px; height: 8px; min-width: 100%; min-height: 35px;"
                              viewBox="850 0 300 200"
                              width="100%"
                            >
                              <line
                                stroke="currentColor"
                                stroke-dasharray="1, 45"
                                stroke-linecap="round"
                                stroke-width="20"
                                x1="0"
                                x2="3000"
                                y1="100"
                                y2="100"
                              />
                            </svg>
                          </div>
                          <div
                            class="_display-_platformweb_grid _gridGap-_platformweb_t-space-spa94665589 _gridAutoFlow-_platformweb_column _display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-flex-start _backgroundColor-surface2 _borderTopLeftRadius-t-radius-ro840690002 _borderTopRightRadius-t-radius-ro840690002 _borderBottomRightRadius-t-radius-ro840690002 _borderBottomLeftRadius-t-radius-ro840690002 _pt-t-space-spa94665589 _pr-t-space-spa94665589 _pb-t-space-spa94665589 _pl-t-space-spa94665589 _zIndex-1020"
                          >
                            <span
                              class="font_body _wordBreak-_platformweb_normal _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-micr111 _lineHeight-f-lineHeigh1263414315 _fontWeight-f-weight-bo3548"
                              data-disable-theme="true"
                            >
                              V3
                            </span>
                            <span
                              class="font_body _wordBreak-_platformweb_normal _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-micr111 _lineHeight-f-lineHeigh1263414315 _fontWeight-f-weight-bo3548"
                              data-disable-theme="true"
                              style="min-width: auto;"
                            >
                              100%
                            </span>
                          </div>
                          <div
                            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _flexWrap-wrap _mt--32px _mr--32px _mb--32px _ml--32px _gap-1px _width-10037"
                            style="justify-content: space-evenly; z-index: 2;"
                          >
                            <div
                              aria-expanded="false"
                              class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0"
                              data-state="closed"
                            >
                              <div
                                class="_display-_platformweb_grid _gridGap-_platformweb_t-space-spa94665589 _gridAutoFlow-_platformweb_column _display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-flex-start _backgroundColor-surface2 _borderTopLeftRadius-t-radius-ro840690002 _borderTopRightRadius-t-radius-ro840690002 _borderBottomRightRadius-t-radius-ro840690002 _borderBottomLeftRadius-t-radius-ro840690002 _pt-t-space-spa94665589 _pr-t-space-spa94665589 _pb-t-space-spa94665589 _pl-t-space-spa94665589 _zIndex-1020"
                              >
                                <div
                                  class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _mr-4px _ml-12px"
                                >
                                  <div
                                    class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _height-20px _width-20px"
                                  >
                                    <div
                                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _left-0px _overflowX-hidden _overflowY-hidden _position-absolute _top-0px _width-9px"
                                      data-testid="input-currency-logo-container"
                                    />
                                    <div
                                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row-reverse _overflowX-hidden _overflowY-hidden _position-absolute _right-0px _top-0px _width-9px"
                                      data-testid="output-currency-logo-container"
                                    />
                                  </div>
                                </div>
                                <span
                                  class="font_body _wordBreak-_platformweb_normal _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-micr111 _lineHeight-f-lineHeigh1263414315 _fontWeight-f-weight-bo3548"
                                  data-disable-theme="true"
                                >
                                  1%
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      class="c9 css-obwv3p"
                    >
                      Best price route costs ~$1.00 in gas.  This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step.
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
      </span>
    </span>
  </span>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx fee on sell 1`] = `
<DocumentFragment>
  .c4 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
}

.c0 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c9 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c16 {
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c13 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c13:hover {
  opacity: 0.6;
}

.c13:active {
  opacity: 0.4;
}

.c11 {
  z-index: 1070;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 150ms linear, opacity 150ms linear;
  transition: visibility 150ms linear, opacity 150ms linear;
  color: #7D7D7D;
}

.c2 {
  display: inline-block;
  height: inherit;
}

.c14 {
  width: 8px;
  height: 8px;
  z-index: 9998;
}

.c14::before {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  z-index: 9998;
  content: '';
  border: 1px solid #22222212;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #FFFFFF;
}

.c14.arrow-top {
  bottom: -4px;
}

.c14.arrow-top::before {
  border-top: none;
  border-left: none;
}

.c14.arrow-bottom {
  top: -4px;
}

.c14.arrow-bottom::before {
  border-bottom: none;
  border-right: none;
}

.c14.arrow-left {
  right: -4px;
}

.c14.arrow-left::before {
  border-bottom: none;
  border-left: none;
}

.c14.arrow-right {
  left: -4px;
}

.c14.arrow-right::before {
  border-right: none;
  border-top: none;
}

.c12 {
  max-width: 256px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 12px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c17 {
  max-width: 400px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 16px 20px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c5 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c6 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 4px;
}

.c10 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.c7 {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: -xs;
}

.c1 {
  cursor: help;
  color: #7D7D7D;
}

.c3 {
  text-align: right;
  overflow-wrap: break-word;
}

.c18 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 12px;
}

.c8 {
  height: 16px;
  width: 16px;
}

.c8 > * {
  fill: #CECECE;
}

.c15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Network cost
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c2"
                  >
                    <div>
                      <div
                        class="c4"
                      >
                        <div
                          class="c5 c6 c7"
                        >
                          <svg
                            class="c8"
                            fill="none"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M15.3078 1.77827C15.7064 1.39599 16.3395 1.40923 16.7217 1.80783L20.9689 6.23633C21.2428 6.47474 21.4729 6.76205 21.6459 7.08464C21.8481 7.43172 22 7.84819 22 8.32698V16.7012C22 18.2484 20.7455 19.5 19.2 19.5C17.6536 19.5 16.4 18.2464 16.4 16.7V14.3999C16.4 13.8476 15.9523 13.3999 15.4 13.3999H14V20.5C14 20.569 13.9965 20.6372 13.9897 20.7045C13.9515 21.08 13.8095 21.4249 13.5927 21.7098C13.2274 22.19 12.6499 22.5 12 22.5H4C3.30964 22.5 2.70098 22.1502 2.34157 21.6182C2.12592 21.299 2.00001 20.9142 2 20.5V5.4999C2 3.84305 3.34315 2.4999 5 2.4999H11C12.6569 2.4999 14 3.84305 14 5.4999V11.3999H15.4C17.0569 11.3999 18.4 12.7431 18.4 14.3999V16.7C18.4 17.1418 18.7582 17.5 19.2 17.5C19.6427 17.5 20 17.1422 20 16.7012V11.3292C19.6872 11.4397 19.3506 11.4999 19 11.4999C17.3431 11.4999 16 10.1568 16 8.4999C16 7.28851 16.718 6.24482 17.7517 5.77117L15.2783 3.19217C14.896 2.79357 14.9092 2.16055 15.3078 1.77827ZM19.6098 7.70731C19.441 7.57725 19.2296 7.4999 19 7.4999C18.4477 7.4999 18 7.94762 18 8.4999C18 9.05219 18.4477 9.4999 19 9.4999C19.5523 9.4999 20 9.05219 20 8.4999C20 8.34084 19.9629 8.19045 19.8968 8.05693C19.8303 7.95164 19.7349 7.83559 19.6098 7.70731ZM5.21572 4.72463C4.66343 4.72463 4.21572 5.17235 4.21572 5.72463V9.72463C4.21572 10.2769 4.66343 10.7246 5.21572 10.7246H10.7157C11.268 10.7246 11.7157 10.2769 11.7157 9.72463V5.72463C11.7157 5.17235 11.268 4.72463 10.7157 4.72463H5.21572Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                          <div
                            class="c9 css-142zc9n"
                          >
                            <div
                              class="c5 c10"
                            >
                              <div>
                                $1.00
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="c11"
                    style="position: fixed; left: 0px; top: 0px;"
                  >
                    <div
                      class="c12"
                    >
                      <div
                        class="c9 css-1m65e73"
                      >
                        Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                        <a
                          class="c13"
                          href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                          rel="noopener noreferrer"
                          target="_blank"
                        >
                          Learn more
                        </a>
                      </div>
                    </div>
                    <div
                      class="c14 arrow-"
                      style="position: absolute;"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  <div
                    class="c9 css-1m65e73"
                  >
                    Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                    <a
                      class="c13"
                      href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              ABC fee
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <span
                    class=""
                  >
                    3%
                  </span>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not receive any of these fees.
                  <br />
                  <a
                    class="c13"
                    href="https://support.uniswap.org/hc/en-us/articles/18673568523789-What-is-a-token-fee-"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Max. slippage
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c5 c10"
                  >
                    <div
                      class="c9 c15 css-1lgneq0"
                    >
                      Auto
                    </div>
                     2%
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  The maximum price movement before your transaction will revert.
                  <br />
                  <a
                    class="c13"
                    href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Fee 
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  0 DEF
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  Fees are applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap.
                  <br />
                  <a
                    class="c13"
                    href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Receive at least
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  0.00000000000000098 DEF
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c12"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will revert.
                  <br />
                  <a
                    class="c13"
                    href="https://support.uniswap.org/hc/en-us/articles/8643794102669-Price-Impact-vs-Price-Slippage"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Order routing
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c16 css-142zc9n"
                  >
                    Uniswap API
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c11"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c17"
              >
                <div
                  class="c9 css-obwv3p"
                >
                  <div
                    class="c18"
                  >
                    <div
                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                    >
                      <div
                        class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center"
                        style="display: grid; grid-template-columns: 24px 1fr 24px;"
                      >
                        <div
                          class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-center _width-10037"
                          style="padding: 0.1rem 0.5rem;"
                        >
                          <div
                            class="_display-flex _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _position-absolute _width-10037 _zIndex-1 _opacity-0--5"
                          >
                            <svg
                              stroke-width="8"
                              style="color: currentColor; width: 8px; height: 8px; min-width: 100%; min-height: 35px;"
                              viewBox="850 0 300 200"
                              width="100%"
                            >
                              <line
                                stroke="currentColor"
                                stroke-dasharray="1, 45"
                                stroke-linecap="round"
                                stroke-width="20"
                                x1="0"
                                x2="3000"
                                y1="100"
                                y2="100"
                              />
                            </svg>
                          </div>
                          <div
                            class="_display-_platformweb_grid _gridGap-_platformweb_t-space-spa94665589 _gridAutoFlow-_platformweb_column _display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-flex-start _backgroundColor-surface2 _borderTopLeftRadius-t-radius-ro840690002 _borderTopRightRadius-t-radius-ro840690002 _borderBottomRightRadius-t-radius-ro840690002 _borderBottomLeftRadius-t-radius-ro840690002 _pt-t-space-spa94665589 _pr-t-space-spa94665589 _pb-t-space-spa94665589 _pl-t-space-spa94665589 _zIndex-1020"
                          >
                            <span
                              class="font_body _wordBreak-_platformweb_normal _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-micr111 _lineHeight-f-lineHeigh1263414315 _fontWeight-f-weight-bo3548"
                              data-disable-theme="true"
                            >
                              V3
                            </span>
                            <span
                              class="font_body _wordBreak-_platformweb_normal _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-micr111 _lineHeight-f-lineHeigh1263414315 _fontWeight-f-weight-bo3548"
                              data-disable-theme="true"
                              style="min-width: auto;"
                            >
                              100%
                            </span>
                          </div>
                          <div
                            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _flexWrap-wrap _mt--32px _mr--32px _mb--32px _ml--32px _gap-1px _width-10037"
                            style="justify-content: space-evenly; z-index: 2;"
                          >
                            <div
                              aria-expanded="false"
                              class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0"
                              data-state="closed"
                            >
                              <div
                                class="_display-_platformweb_grid _gridGap-_platformweb_t-space-spa94665589 _gridAutoFlow-_platformweb_column _display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-flex-start _backgroundColor-surface2 _borderTopLeftRadius-t-radius-ro840690002 _borderTopRightRadius-t-radius-ro840690002 _borderBottomRightRadius-t-radius-ro840690002 _borderBottomLeftRadius-t-radius-ro840690002 _pt-t-space-spa94665589 _pr-t-space-spa94665589 _pb-t-space-spa94665589 _pl-t-space-spa94665589 _zIndex-1020"
                              >
                                <div
                                  class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _mr-4px _ml-12px"
                                >
                                  <div
                                    class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _height-20px _width-20px"
                                  >
                                    <div
                                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _left-0px _overflowX-hidden _overflowY-hidden _position-absolute _top-0px _width-9px"
                                      data-testid="input-currency-logo-container"
                                    />
                                    <div
                                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row-reverse _overflowX-hidden _overflowY-hidden _position-absolute _right-0px _top-0px _width-9px"
                                      data-testid="output-currency-logo-container"
                                    />
                                  </div>
                                </div>
                                <span
                                  class="font_body _wordBreak-_platformweb_normal _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-micr111 _lineHeight-f-lineHeigh1263414315 _fontWeight-f-weight-bo3548"
                                  data-disable-theme="true"
                                >
                                  1%
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      class="c9 css-obwv3p"
                    >
                      Best price route costs ~$1.00 in gas.  This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step.
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="c14 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
      </span>
    </span>
  </span>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx preview exact in 1`] = `
<DocumentFragment>
  .c4 {
  -webkit-animation: fAQEyV 1.5s infinite;
  animation: fAQEyV 1.5s infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  background: linear-gradient( to left, #FFFFFF 25%, #22222212 50%, #FFFFFF 75% );
  background-size: 400%;
  will-change: background-position;
  border-radius: 12px;
  height: 15px;
  width: 50px;
}

.c0 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c7 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c8 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c8:hover {
  opacity: 0.6;
}

.c8:active {
  opacity: 0.4;
}

.c5 {
  z-index: 1070;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 150ms linear, opacity 150ms linear;
  transition: visibility 150ms linear, opacity 150ms linear;
  color: #7D7D7D;
}

.c2 {
  display: inline-block;
  height: inherit;
}

.c9 {
  width: 8px;
  height: 8px;
  z-index: 9998;
}

.c9::before {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  z-index: 9998;
  content: '';
  border: 1px solid #22222212;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #FFFFFF;
}

.c9.arrow-top {
  bottom: -4px;
}

.c9.arrow-top::before {
  border-top: none;
  border-left: none;
}

.c9.arrow-bottom {
  top: -4px;
}

.c9.arrow-bottom::before {
  border-bottom: none;
  border-right: none;
}

.c9.arrow-left {
  right: -4px;
}

.c9.arrow-left::before {
  border-bottom: none;
  border-left: none;
}

.c9.arrow-right {
  left: -4px;
}

.c9.arrow-right::before {
  border-right: none;
  border-top: none;
}

.c6 {
  max-width: 256px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 12px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c10 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c11 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.c1 {
  cursor: help;
  color: #7D7D7D;
}

.c13 {
  cursor: auto;
  color: #7D7D7D;
}

.c3 {
  text-align: right;
  overflow-wrap: break-word;
}

.c12 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Network cost
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c4"
                    data-testid="loading-row"
                    height="15"
                    width="50"
                  />
                </div>
              </div>
            </div>
            <div
              class="c5"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c6"
              >
                <div
                  class="c7 css-obwv3p"
                >
                  <div
                    class="c7 css-1m65e73"
                  >
                    Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                    <a
                      class="c8"
                      href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="c9 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Max. slippage
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  <div
                    class="c10 c11"
                  >
                    <div
                      class="c7 c12 css-1lgneq0"
                    >
                      Auto
                    </div>
                     2%
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c5"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c6"
              >
                <div
                  class="c7 css-obwv3p"
                >
                  The maximum price movement before your transaction will revert.
                  <br />
                  <a
                    class="c8"
                    href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c9 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c13 css-142zc9n"
              data-testid="swap-li-label"
            >
              Fee
            </div>
            <div
              class="c0 c3 css-142zc9n"
            >
              <div
                class="c4"
                data-testid="loading-row"
                height="15"
                width="50"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Receive at least
            </div>
            <div
              class="c2"
            >
              <div>
                <div
                  class="c0 c3 css-142zc9n"
                >
                  0.00000000000000098 DEF
                </div>
              </div>
            </div>
            <div
              class="c5"
              style="position: fixed; left: 0px; top: 0px;"
            >
              <div
                class="c6"
              >
                <div
                  class="c7 css-obwv3p"
                >
                  If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will revert.
                  <br />
                  <a
                    class="c8"
                    href="https://support.uniswap.org/hc/en-us/articles/8643794102669-Price-Impact-vs-Price-Slippage"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
              <div
                class="c9 arrow-"
                style="position: absolute;"
              />
            </div>
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c13 css-142zc9n"
              data-testid="swap-li-label"
            >
              Order routing
            </div>
            <div
              class="c0 c3 css-142zc9n"
            >
              <div
                class="c4"
                data-testid="loading-row"
                height="15"
                width="50"
              />
            </div>
          </div>
        </div>
      </span>
    </span>
  </span>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx syncing 1`] = `
<DocumentFragment>
  .c2 {
  -webkit-animation: fAQEyV 1.5s infinite;
  animation: fAQEyV 1.5s infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  background: linear-gradient( to left, #FFFFFF 25%, #22222212 50%, #FFFFFF 75% );
  background-size: 400%;
  will-change: background-position;
  border-radius: 12px;
  height: 15px;
  width: 50px;
}

.c3 {
  -webkit-animation: fAQEyV 1.5s infinite;
  animation: fAQEyV 1.5s infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  background: linear-gradient( to left, #FFFFFF 25%, #22222212 50%, #FFFFFF 75% );
  background-size: 400%;
  will-change: background-position;
  border-radius: 12px;
  height: 15px;
  width: 70px;
}

.c0 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c1 {
  cursor: help;
  color: #7D7D7D;
}

.c4 {
  cursor: auto;
  color: #7D7D7D;
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Network cost
            </div>
            <div
              class="c2"
              data-testid="loading-row"
              height="15"
              width="50"
            />
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Max. slippage
            </div>
            <div
              class="c2"
              data-testid="loading-row"
              height="15"
              width="50"
            />
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Fee 
            </div>
            <div
              class="c2"
              data-testid="loading-row"
              height="15"
              width="50"
            />
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c1 css-142zc9n"
              data-testid="swap-li-label"
            >
              Receive at least
            </div>
            <div
              class="c3"
              data-testid="loading-row"
              height="15"
              width="70"
            />
          </div>
        </div>
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; opacity: 1;"
        >
          <div
            class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
          >
            <div
              class="c0 c4 css-142zc9n"
              data-testid="swap-li-label"
            >
              Order routing
            </div>
            <div
              class="c2"
              data-testid="loading-row"
              height="15"
              width="50"
            />
          </div>
        </div>
      </span>
    </span>
  </span>
</DocumentFragment>
`;
