// 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: #131313;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c8 {
  color: rgba(19,19,19,0.63);
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.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: rgba(19,19,19,0.63);
}

.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 rgba(34,34,34,0.05);
  -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: #131313;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(34,34,34,0.05);
  box-shadow: 0px 6px 12px -3px rgba(0,0,0,0.05), 0px 2px 5px -2px rgba(0,0,0,0.03);
}

.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: rgba(19,19,19,0.63);
}

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

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

.c14:hover {
  opacity: 0.6;
}

.c14:active {
  opacity: 0.4;
}

.c13 {
  display: inline;
}

.c16 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: rgba(34,34,34,0.05);
  border-radius: 8px;
  color: rgba(19,19,19,0.63);
  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;"
  >
    <div
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <div
              class="c0 c3 css-142zc9n"
            >
              <div
                class="c2"
              >
                <div
                  class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                >
                  <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"
                          >
                            $0
                          </div>
                          <s>
                            $7.87
                          </s>
                        </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/17544708791821?product_link=web"
                      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/17544708791821?product_link=web"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
          </div>
          <div
            class="c15 arrow-"
            style="position: absolute;"
          />
        </div>
      </div>
    </div>
    <div
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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/17544708791821?product_link=web"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
          </div>
          <div
            class="c15 arrow-"
            style="position: absolute;"
          />
        </div>
      </div>
    </div>
    <div
      style="display: contents;"
    />
  </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: #131313;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c8 {
  color: rgba(19,19,19,0.63);
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.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: rgba(19,19,19,0.63);
}

.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 rgba(34,34,34,0.05);
  -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: #131313;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(34,34,34,0.05);
  box-shadow: 0px 6px 12px -3px rgba(0,0,0,0.05), 0px 2px 5px -2px rgba(0,0,0,0.03);
}

.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: rgba(19,19,19,0.63);
}

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

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

.c14:hover {
  opacity: 0.6;
}

.c14:active {
  opacity: 0.4;
}

.c13 {
  display: inline;
}

.c16 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: rgba(34,34,34,0.05);
  border-radius: 8px;
  color: rgba(19,19,19,0.63);
  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;"
  >
    <div
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <div
              class="c0 c3 css-142zc9n"
            >
              <div
                class="c2"
              >
                <div
                  class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                >
                  <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"
                          >
                            $0
                          </div>
                          <s>
                            $7.87
                          </s>
                        </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/17544708791821?product_link=web"
                      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/17544708791821?product_link=web"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
          </div>
          <div
            class="c15 arrow-"
            style="position: absolute;"
          />
        </div>
      </div>
    </div>
    <div
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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/17544708791821?product_link=web"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
          </div>
          <div
            class="c15 arrow-"
            style="position: absolute;"
          />
        </div>
      </div>
    </div>
    <div
      style="display: contents;"
    />
  </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: #131313;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c9 {
  color: rgba(19,19,19,0.63);
  -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;
}

.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: rgba(19,19,19,0.63);
}

.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 rgba(34,34,34,0.05);
  -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: #131313;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(34,34,34,0.05);
  box-shadow: 0px 6px 12px -3px rgba(0,0,0,0.05), 0px 2px 5px -2px rgba(0,0,0,0.03);
}

.c17 {
  max-width: 400px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 16px 20px;
  pointer-events: auto;
  color: #131313;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(34,34,34,0.05);
  box-shadow: 0px 6px 12px -3px rgba(0,0,0,0.05), 0px 2px 5px -2px rgba(0,0,0,0.03);
}

.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: rgba(19,19,19,0.63);
}

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

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

.c13:hover {
  opacity: 0.6;
}

.c13:active {
  opacity: 0.4;
}

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

.c8 > * {
  fill: rgba(19,19,19,0.35);
}

.c15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: rgba(34,34,34,0.05);
  border-radius: 8px;
  color: rgba(19,19,19,0.63);
  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;"
  >
    <div
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <div
              class="c0 c3 css-142zc9n"
            >
              <div
                class="c2"
              >
                <div
                  class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                >
                  <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"
                        >
                          $1.00
                        </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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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-row _alignItems-center _gap-t-space-spa94665589"
                  >
                    <div
                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _justifyContent-space-evenl121 _flexGrow-1 _position-relative _width-auto _pt-t-space-spa94665589 _pb-t-space-spa94665589"
                    >
                      <div
                        class="_display-flex _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _position-absolute _width-10037 _height-10037 _left-0px _top-0px _zIndex-1 _opacity-0--5"
                      >
                        <svg
                          stroke-width="8"
                          style="width: 8px; height: 8px; min-width: 100%; min-height: 35px; color: currentColor;"
                          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 _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _gap-t-space-spa94665589 _width-auto _zIndex-2 _flexGrow-1 _justifyContent-space-evenl121 _alignItems-center"
                      >
                        <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 _ml-2px"
                            >
                              <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"
                >
                  Most efficient route is estimated to cost ~$1.00 in network costs.  This route considers split routes, multiple hops, and network costs of each step.
                </div>
              </div>
            </div>
          </div>
          <div
            class="c14 arrow-"
            style="position: absolute;"
          />
        </div>
      </div>
    </div>
    <div
      style="display: contents;"
    />
  </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: #131313;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c9 {
  color: rgba(19,19,19,0.63);
  -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;
}

.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: rgba(19,19,19,0.63);
}

.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 rgba(34,34,34,0.05);
  -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: #131313;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(34,34,34,0.05);
  box-shadow: 0px 6px 12px -3px rgba(0,0,0,0.05), 0px 2px 5px -2px rgba(0,0,0,0.03);
}

.c17 {
  max-width: 400px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 16px 20px;
  pointer-events: auto;
  color: #131313;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(34,34,34,0.05);
  box-shadow: 0px 6px 12px -3px rgba(0,0,0,0.05), 0px 2px 5px -2px rgba(0,0,0,0.03);
}

.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: rgba(19,19,19,0.63);
}

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

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

.c13:hover {
  opacity: 0.6;
}

.c13:active {
  opacity: 0.4;
}

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

.c8 > * {
  fill: rgba(19,19,19,0.35);
}

.c15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: rgba(34,34,34,0.05);
  border-radius: 8px;
  color: rgba(19,19,19,0.63);
  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;"
  >
    <div
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <div
              class="c0 c3 css-142zc9n"
            >
              <div
                class="c2"
              >
                <div
                  class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                >
                  <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"
                        >
                          $1.00
                        </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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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-row _alignItems-center _gap-t-space-spa94665589"
                  >
                    <div
                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _justifyContent-space-evenl121 _flexGrow-1 _position-relative _width-auto _pt-t-space-spa94665589 _pb-t-space-spa94665589"
                    >
                      <div
                        class="_display-flex _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _position-absolute _width-10037 _height-10037 _left-0px _top-0px _zIndex-1 _opacity-0--5"
                      >
                        <svg
                          stroke-width="8"
                          style="width: 8px; height: 8px; min-width: 100%; min-height: 35px; color: currentColor;"
                          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 _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _gap-t-space-spa94665589 _width-auto _zIndex-2 _flexGrow-1 _justifyContent-space-evenl121 _alignItems-center"
                      >
                        <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 _ml-2px"
                            >
                              <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"
                >
                  Most efficient route is estimated to cost ~$1.00 in network costs.  This route considers split routes, multiple hops, and network costs of each step.
                </div>
              </div>
            </div>
          </div>
          <div
            class="c14 arrow-"
            style="position: absolute;"
          />
        </div>
      </div>
    </div>
    <div
      style="display: contents;"
    />
  </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: #131313;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c9 {
  color: rgba(19,19,19,0.63);
  -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;
}

.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: rgba(19,19,19,0.63);
}

.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 rgba(34,34,34,0.05);
  -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: #131313;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(34,34,34,0.05);
  box-shadow: 0px 6px 12px -3px rgba(0,0,0,0.05), 0px 2px 5px -2px rgba(0,0,0,0.03);
}

.c17 {
  max-width: 400px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 16px 20px;
  pointer-events: auto;
  color: #131313;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(34,34,34,0.05);
  box-shadow: 0px 6px 12px -3px rgba(0,0,0,0.05), 0px 2px 5px -2px rgba(0,0,0,0.03);
}

.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: rgba(19,19,19,0.63);
}

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

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

.c13:hover {
  opacity: 0.6;
}

.c13:active {
  opacity: 0.4;
}

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

.c8 > * {
  fill: rgba(19,19,19,0.35);
}

.c15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: rgba(34,34,34,0.05);
  border-radius: 8px;
  color: rgba(19,19,19,0.63);
  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;"
  >
    <div
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <div
              class="c0 c3 css-142zc9n"
            >
              <div
                class="c2"
              >
                <div
                  class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                >
                  <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
                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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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-row _alignItems-center _gap-t-space-spa94665589"
                  >
                    <div
                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _justifyContent-space-evenl121 _flexGrow-1 _position-relative _width-auto _pt-t-space-spa94665589 _pb-t-space-spa94665589"
                    >
                      <div
                        class="_display-flex _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _position-absolute _width-10037 _height-10037 _left-0px _top-0px _zIndex-1 _opacity-0--5"
                      >
                        <svg
                          stroke-width="8"
                          style="width: 8px; height: 8px; min-width: 100%; min-height: 35px; color: currentColor;"
                          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 _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _gap-t-space-spa94665589 _width-auto _zIndex-2 _flexGrow-1 _justifyContent-space-evenl121 _alignItems-center"
                      >
                        <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 _ml-2px"
                            >
                              <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 considers split routes, multiple hops, and network costs of each step.
                </div>
              </div>
            </div>
          </div>
          <div
            class="c14 arrow-"
            style="position: absolute;"
          />
        </div>
      </div>
    </div>
    <div
      style="display: contents;"
    />
  </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: #131313;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c9 {
  color: rgba(19,19,19,0.63);
  -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;
}

.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: rgba(19,19,19,0.63);
}

.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 rgba(34,34,34,0.05);
  -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: #131313;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(34,34,34,0.05);
  box-shadow: 0px 6px 12px -3px rgba(0,0,0,0.05), 0px 2px 5px -2px rgba(0,0,0,0.03);
}

.c17 {
  max-width: 400px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 16px 20px;
  pointer-events: auto;
  color: #131313;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(34,34,34,0.05);
  box-shadow: 0px 6px 12px -3px rgba(0,0,0,0.05), 0px 2px 5px -2px rgba(0,0,0,0.03);
}

.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: rgba(19,19,19,0.63);
}

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

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

.c13:hover {
  opacity: 0.6;
}

.c13:active {
  opacity: 0.4;
}

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

.c8 > * {
  fill: rgba(19,19,19,0.35);
}

.c15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: rgba(34,34,34,0.05);
  border-radius: 8px;
  color: rgba(19,19,19,0.63);
  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;"
  >
    <div
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <div
              class="c0 c3 css-142zc9n"
            >
              <div
                class="c2"
              >
                <div
                  class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                >
                  <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"
                        >
                          $1.00
                        </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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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-row _alignItems-center _gap-t-space-spa94665589"
                  >
                    <div
                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _justifyContent-space-evenl121 _flexGrow-1 _position-relative _width-auto _pt-t-space-spa94665589 _pb-t-space-spa94665589"
                    >
                      <div
                        class="_display-flex _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _position-absolute _width-10037 _height-10037 _left-0px _top-0px _zIndex-1 _opacity-0--5"
                      >
                        <svg
                          stroke-width="8"
                          style="width: 8px; height: 8px; min-width: 100%; min-height: 35px; color: currentColor;"
                          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 _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _gap-t-space-spa94665589 _width-auto _zIndex-2 _flexGrow-1 _justifyContent-space-evenl121 _alignItems-center"
                      >
                        <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 _ml-2px"
                            >
                              <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"
                >
                  Most efficient route is estimated to cost ~$1.00 in network costs.  This route considers split routes, multiple hops, and network costs of each step.
                </div>
              </div>
            </div>
          </div>
          <div
            class="c14 arrow-"
            style="position: absolute;"
          />
        </div>
      </div>
    </div>
    <div
      style="display: contents;"
    />
  </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: #131313;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c9 {
  color: rgba(19,19,19,0.63);
  -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;
}

.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: rgba(19,19,19,0.63);
}

.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 rgba(34,34,34,0.05);
  -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: #131313;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(34,34,34,0.05);
  box-shadow: 0px 6px 12px -3px rgba(0,0,0,0.05), 0px 2px 5px -2px rgba(0,0,0,0.03);
}

.c17 {
  max-width: 400px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 16px 20px;
  pointer-events: auto;
  color: #131313;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(34,34,34,0.05);
  box-shadow: 0px 6px 12px -3px rgba(0,0,0,0.05), 0px 2px 5px -2px rgba(0,0,0,0.03);
}

.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: rgba(19,19,19,0.63);
}

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

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

.c13:hover {
  opacity: 0.6;
}

.c13:active {
  opacity: 0.4;
}

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

.c8 > * {
  fill: rgba(19,19,19,0.35);
}

.c15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: rgba(34,34,34,0.05);
  border-radius: 8px;
  color: rgba(19,19,19,0.63);
  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;"
  >
    <div
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <div
              class="c0 c3 css-142zc9n"
            >
              <div
                class="c2"
              >
                <div
                  class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                >
                  <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"
                        >
                          $1.00
                        </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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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-row _alignItems-center _gap-t-space-spa94665589"
                  >
                    <div
                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _justifyContent-space-evenl121 _flexGrow-1 _position-relative _width-auto _pt-t-space-spa94665589 _pb-t-space-spa94665589"
                    >
                      <div
                        class="_display-flex _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _position-absolute _width-10037 _height-10037 _left-0px _top-0px _zIndex-1 _opacity-0--5"
                      >
                        <svg
                          stroke-width="8"
                          style="width: 8px; height: 8px; min-width: 100%; min-height: 35px; color: currentColor;"
                          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 _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _gap-t-space-spa94665589 _width-auto _zIndex-2 _flexGrow-1 _justifyContent-space-evenl121 _alignItems-center"
                      >
                        <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 _ml-2px"
                            >
                              <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"
                >
                  Most efficient route is estimated to cost ~$1.00 in network costs.  This route considers split routes, multiple hops, and network costs of each step.
                </div>
              </div>
            </div>
          </div>
          <div
            class="c14 arrow-"
            style="position: absolute;"
          />
        </div>
      </div>
    </div>
    <div
      style="display: contents;"
    />
  </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%, rgba(34,34,34,0.05) 50%, #FFFFFF 75% );
  background-size: 400%;
  will-change: background-position;
  border-radius: 12px;
  height: 15px;
  width: 50px;
}

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

.c7 {
  color: rgba(19,19,19,0.63);
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.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: rgba(19,19,19,0.63);
}

.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 rgba(34,34,34,0.05);
  -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: #131313;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(34,34,34,0.05);
  box-shadow: 0px 6px 12px -3px rgba(0,0,0,0.05), 0px 2px 5px -2px rgba(0,0,0,0.03);
}

.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: rgba(19,19,19,0.63);
}

.c13 {
  cursor: auto;
  color: rgba(19,19,19,0.63);
}

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

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

.c8:hover {
  opacity: 0.6;
}

.c8:active {
  opacity: 0.4;
}

.c12 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: rgba(34,34,34,0.05);
  border-radius: 8px;
  color: rgba(19,19,19,0.63);
  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;"
  >
    <div
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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
      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
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
          >
            <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
      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>
    <div
      style="display: contents;"
    />
  </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%, rgba(34,34,34,0.05) 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%, rgba(34,34,34,0.05) 50%, #FFFFFF 75% );
  background-size: 400%;
  will-change: background-position;
  border-radius: 12px;
  height: 15px;
  width: 70px;
}

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

.c1 {
  cursor: help;
  color: rgba(19,19,19,0.63);
}

.c4 {
  cursor: auto;
  color: rgba(19,19,19,0.63);
}

<span
    class=""
    style="display: contents;"
  >
    <div
      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
      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
      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
      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
      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>
    <div
      style="display: contents;"
    />
  </span>
</DocumentFragment>
`;
