// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

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

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

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

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

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

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

.c10 {
  color: #4673fa;
}

@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
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-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>
          </div>
        </div>
      </div>
    </div>
    <div
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-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>
    </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;
}

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

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

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

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

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

.c10 {
  color: #4673fa;
}

@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
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-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>
          </div>
        </div>
      </div>
    </div>
    <div
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-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>
    </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;
}

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

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

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

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

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

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

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

<span
    class=""
    style="display: contents;"
  >
    <div
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-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>
          </div>
        </div>
      </div>
    </div>
    <div
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-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>
    </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;
}

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

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

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

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

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

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

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

<span
    class=""
    style="display: contents;"
  >
    <div
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-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>
          </div>
        </div>
      </div>
    </div>
    <div
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-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>
    </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;
}

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

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

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

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

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

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

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

<span
    class=""
    style="display: contents;"
  >
    <div
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-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>
          </div>
        </div>
      </div>
    </div>
    <div
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-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>
    </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;
}

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

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

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

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

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

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

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

<span
    class=""
    style="display: contents;"
  >
    <div
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-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>
          </div>
        </div>
      </div>
    </div>
    <div
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-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>
    </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;
}

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

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

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

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

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

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

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

<span
    class=""
    style="display: contents;"
  >
    <div
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-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>
          </div>
        </div>
      </div>
    </div>
    <div
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-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>
    </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;
}

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

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

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

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

<span
    class=""
    style="display: contents;"
  >
    <div
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-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>
    </div>
    <div
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-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 c5 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: 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;
}

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

<span
    class=""
    style="display: contents;"
  >
    <div
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _opacity-1"
    >
      <div
        class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _justifyContent-space-betwe3241 _width-10037"
      >
        <div
          class="c0 c1 css-142zc9n"
          data-testid="swap-li-label"
        >
          Network cost
        </div>
        <div
          class="c2"
          data-testid="loading-row"
          height="15"
          width="50"
        />
      </div>
    </div>
    <div
      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-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: contents;"
    />
  </span>
</DocumentFragment>
`;
