@luxexchange/lx 1.0.0

package/src/components/network/NetworkPile/__snapshots__/NetworkPile.test.tsx.snap

@@ -0,0 +1,984 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`[object Object] > default size > caps at 4 logos when more than 4 chainIds provided 1`] = `
+<DocumentFragment>
+  <span
+    class=""
+    style="display: contents;"
+  >
+    <div
+      class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-32px _width-32px"
+    >
+      <div
+        class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-32px _width-32px _pointerEvents-auto _position-relative"
+        data-testid="network-pile"
+      >
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-13 _top-0px _left-0px"
+        >
+          <div
+            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006 _position-absolute"
+            style="width: 16px; height: 16px;"
+          />
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-statusCriti3045924 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006"
+            style="width: 16px; height: 16px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 14px; height: 14px; border-radius: 4.2px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 14px; height: 14px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-ETHEREUM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-ETHEREUM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-12 _top-0px _right-0px"
+        >
+          <div
+            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006 _position-absolute"
+            style="width: 16px; height: 16px;"
+          />
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-statusCriti3045924 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006"
+            style="width: 16px; height: 16px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 14px; height: 14px; border-radius: 4.2px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 14px; height: 14px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-ARBITRUM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-ARBITRUM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-11 _bottom-0px _left-0px"
+        >
+          <div
+            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006 _position-absolute"
+            style="width: 16px; height: 16px;"
+          />
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-statusCriti3045924 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006"
+            style="width: 16px; height: 16px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 14px; height: 14px; border-radius: 4.2px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 14px; height: 14px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-OPTIMISM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-OPTIMISM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-10 _bottom-0px _right-0px"
+        >
+          <div
+            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006 _position-absolute"
+            style="width: 16px; height: 16px;"
+          />
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-statusCriti3045924 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006"
+            style="width: 16px; height: 16px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 14px; height: 14px; border-radius: 4.2px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 14px; height: 14px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-BASE_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-BASE_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style="display: contents;"
+    />
+  </span>
+</DocumentFragment>
+`;
+
+exports[`[object Object] > default size > renders double logos 1`] = `
+<DocumentFragment>
+  <span
+    class=""
+    style="display: contents;"
+  >
+    <div
+      class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-32px _width-32px"
+    >
+      <div
+        class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-32px _width-32px _pointerEvents-auto _position-relative"
+        data-testid="network-pile"
+      >
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-10 _top-0px _left-0px"
+        >
+          <div
+            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690004 _borderTopRightRadius-t-radius-ro840690004 _borderBottomRightRadius-t-radius-ro840690004 _borderBottomLeftRadius-t-radius-ro840690004 _position-absolute"
+            style="width: 20px; height: 20px;"
+          />
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-statusCriti3045924 _borderTopLeftRadius-t-radius-ro840690004 _borderTopRightRadius-t-radius-ro840690004 _borderBottomRightRadius-t-radius-ro840690004 _borderBottomLeftRadius-t-radius-ro840690004"
+            style="width: 20px; height: 20px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 18px; height: 18px; border-radius: 5.3999999999999995px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 18px; height: 18px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-ETHEREUM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-ETHEREUM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-11 _bottom-0px _right-0px"
+        >
+          <div
+            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690004 _borderTopRightRadius-t-radius-ro840690004 _borderBottomRightRadius-t-radius-ro840690004 _borderBottomLeftRadius-t-radius-ro840690004 _position-absolute"
+            style="width: 20px; height: 20px;"
+          />
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-statusCriti3045924 _borderTopLeftRadius-t-radius-ro840690004 _borderTopRightRadius-t-radius-ro840690004 _borderBottomRightRadius-t-radius-ro840690004 _borderBottomLeftRadius-t-radius-ro840690004"
+            style="width: 20px; height: 20px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 18px; height: 18px; border-radius: 5.3999999999999995px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 18px; height: 18px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-ARBITRUM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-ARBITRUM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style="display: contents;"
+    />
+  </span>
+</DocumentFragment>
+`;
+
+exports[`[object Object] > default size > renders empty when no chainIds provided 1`] = `
+<DocumentFragment>
+  <span
+    class=""
+    style="display: contents;"
+  >
+    <div
+      class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-32px _width-32px"
+    >
+      <div
+        class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-32px _width-32px _pointerEvents-auto _position-relative"
+        data-testid="network-pile"
+      />
+    </div>
+    <div
+      style="display: contents;"
+    />
+  </span>
+</DocumentFragment>
+`;
+
+exports[`[object Object] > default size > renders quad logos 1`] = `
+<DocumentFragment>
+  <span
+    class=""
+    style="display: contents;"
+  >
+    <div
+      class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-32px _width-32px"
+    >
+      <div
+        class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-32px _width-32px _pointerEvents-auto _position-relative"
+        data-testid="network-pile"
+      >
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-13 _top-0px _left-0px"
+        >
+          <div
+            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006 _position-absolute"
+            style="width: 16px; height: 16px;"
+          />
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-statusCriti3045924 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006"
+            style="width: 16px; height: 16px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 14px; height: 14px; border-radius: 4.2px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 14px; height: 14px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-ETHEREUM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-ETHEREUM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-12 _top-0px _right-0px"
+        >
+          <div
+            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006 _position-absolute"
+            style="width: 16px; height: 16px;"
+          />
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-statusCriti3045924 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006"
+            style="width: 16px; height: 16px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 14px; height: 14px; border-radius: 4.2px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 14px; height: 14px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-ARBITRUM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-ARBITRUM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-11 _bottom-0px _left-0px"
+        >
+          <div
+            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006 _position-absolute"
+            style="width: 16px; height: 16px;"
+          />
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-statusCriti3045924 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006"
+            style="width: 16px; height: 16px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 14px; height: 14px; border-radius: 4.2px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 14px; height: 14px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-OPTIMISM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-OPTIMISM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-10 _bottom-0px _right-0px"
+        >
+          <div
+            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006 _position-absolute"
+            style="width: 16px; height: 16px;"
+          />
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-statusCriti3045924 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006"
+            style="width: 16px; height: 16px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 14px; height: 14px; border-radius: 4.2px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 14px; height: 14px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-BASE_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-BASE_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style="display: contents;"
+    />
+  </span>
+</DocumentFragment>
+`;
+
+exports[`[object Object] > default size > renders single logo 1`] = `
+<DocumentFragment>
+  <span
+    class=""
+    style="display: contents;"
+  >
+    <div
+      class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-32px _width-32px"
+    >
+      <div
+        class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-32px _width-32px _pointerEvents-auto _position-relative"
+        data-testid="network-pile"
+      >
+        <div
+          class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _borderTopLeftRadius-t-radius-ro840690002 _borderTopRightRadius-t-radius-ro840690002 _borderBottomRightRadius-t-radius-ro840690002 _borderBottomLeftRadius-t-radius-ro840690002"
+          style="width: 24px; height: 24px;"
+        >
+          <div
+            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+            data-testid="network-logo"
+            style="width: 24px; height: 24px; border-radius: 7.199999999999999px; border-width: 0px; border-color: #131313; border-style: solid;"
+          >
+            <div
+              class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+              style="width: 24px; height: 24px;"
+            >
+              <div
+                class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                style="background-image: url(mock-asset-ETHEREUM_LOGO.png);"
+              />
+              <img
+                alt=""
+                class="css-accessibilityImage-9pa8cd"
+                draggable="false"
+                src="mock-asset-ETHEREUM_LOGO.png"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style="display: contents;"
+    />
+  </span>
+</DocumentFragment>
+`;
+
+exports[`[object Object] > default size > renders triple logos 1`] = `
+<DocumentFragment>
+  <span
+    class=""
+    style="display: contents;"
+  >
+    <div
+      class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-32px _width-32px"
+    >
+      <div
+        class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-32px _width-32px _pointerEvents-auto _position-relative"
+        data-testid="network-pile"
+      >
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-10 _top-0px _left-0px"
+        >
+          <div
+            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006 _position-absolute"
+            style="width: 16px; height: 16px;"
+          />
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-statusCriti3045924 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006"
+            style="width: 16px; height: 16px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 14px; height: 14px; border-radius: 4.2px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 14px; height: 14px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-ETHEREUM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-ETHEREUM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-10 _bottom-0px _right-0px"
+        >
+          <div
+            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006 _position-absolute"
+            style="width: 16px; height: 16px;"
+          />
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-statusCriti3045924 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006"
+            style="width: 16px; height: 16px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 14px; height: 14px; border-radius: 4.2px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 14px; height: 14px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-OPTIMISM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-OPTIMISM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-11"
+        >
+          <div
+            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006 _position-absolute"
+            style="width: 16px; height: 16px;"
+          />
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-statusCriti3045924 _borderTopLeftRadius-t-radius-ro840690006 _borderTopRightRadius-t-radius-ro840690006 _borderBottomRightRadius-t-radius-ro840690006 _borderBottomLeftRadius-t-radius-ro840690006"
+            style="width: 16px; height: 16px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 14px; height: 14px; border-radius: 4.2px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 14px; height: 14px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-ARBITRUM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-ARBITRUM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style="display: contents;"
+    />
+  </span>
+</DocumentFragment>
+`;
+
+exports[`[object Object] > small size > renders double logos 1`] = `
+<DocumentFragment>
+  <span
+    class=""
+    style="display: contents;"
+  >
+    <div
+      class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-20px _width-20px"
+    >
+      <div
+        class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-20px _width-20px _pointerEvents-auto _position-relative"
+        data-testid="network-pile"
+      >
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-10 _top-0px _left-0px"
+        >
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690004 _borderTopRightRadius-t-radius-ro840690004 _borderBottomRightRadius-t-radius-ro840690004 _borderBottomLeftRadius-t-radius-ro840690004"
+            style="width: 13px; height: 13px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 11px; height: 11px; border-radius: 3.3px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 11px; height: 11px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-ETHEREUM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-ETHEREUM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-11 _bottom-0px _right-0px"
+        >
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690004 _borderTopRightRadius-t-radius-ro840690004 _borderBottomRightRadius-t-radius-ro840690004 _borderBottomLeftRadius-t-radius-ro840690004"
+            style="width: 13px; height: 13px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 11px; height: 11px; border-radius: 3.3px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 11px; height: 11px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-ARBITRUM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-ARBITRUM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style="display: contents;"
+    />
+  </span>
+</DocumentFragment>
+`;
+
+exports[`[object Object] > small size > renders quad logos 1`] = `
+<DocumentFragment>
+  <span
+    class=""
+    style="display: contents;"
+  >
+    <div
+      class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-20px _width-20px"
+    >
+      <div
+        class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-20px _width-20px _pointerEvents-auto _position-relative"
+        data-testid="network-pile"
+      >
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-13 _top-0px _left-0px"
+        >
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690004 _borderTopRightRadius-t-radius-ro840690004 _borderBottomRightRadius-t-radius-ro840690004 _borderBottomLeftRadius-t-radius-ro840690004"
+            style="width: 10px; height: 10px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 9px; height: 9px; border-radius: 2.6999999999999997px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 9px; height: 9px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-ETHEREUM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-ETHEREUM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-12 _top-0px _right-0px"
+        >
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690004 _borderTopRightRadius-t-radius-ro840690004 _borderBottomRightRadius-t-radius-ro840690004 _borderBottomLeftRadius-t-radius-ro840690004"
+            style="width: 10px; height: 10px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 9px; height: 9px; border-radius: 2.6999999999999997px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 9px; height: 9px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-ARBITRUM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-ARBITRUM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-11 _bottom-0px _left-0px"
+        >
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690004 _borderTopRightRadius-t-radius-ro840690004 _borderBottomRightRadius-t-radius-ro840690004 _borderBottomLeftRadius-t-radius-ro840690004"
+            style="width: 10px; height: 10px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 9px; height: 9px; border-radius: 2.6999999999999997px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 9px; height: 9px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-OPTIMISM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-OPTIMISM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-10 _bottom-0px _right-0px"
+        >
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690004 _borderTopRightRadius-t-radius-ro840690004 _borderBottomRightRadius-t-radius-ro840690004 _borderBottomLeftRadius-t-radius-ro840690004"
+            style="width: 10px; height: 10px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 9px; height: 9px; border-radius: 2.6999999999999997px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 9px; height: 9px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-BASE_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-BASE_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style="display: contents;"
+    />
+  </span>
+</DocumentFragment>
+`;
+
+exports[`[object Object] > small size > renders single logo 1`] = `
+<DocumentFragment>
+  <span
+    class=""
+    style="display: contents;"
+  >
+    <div
+      class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-20px _width-20px"
+    >
+      <div
+        class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-20px _width-20px _pointerEvents-auto _position-relative"
+        data-testid="network-pile"
+      >
+        <div
+          class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _borderTopLeftRadius-t-radius-ro840690004 _borderTopRightRadius-t-radius-ro840690004 _borderBottomRightRadius-t-radius-ro840690004 _borderBottomLeftRadius-t-radius-ro840690004"
+          style="width: 20px; height: 20px;"
+        >
+          <div
+            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+            data-testid="network-logo"
+            style="width: 20px; height: 20px; border-radius: 6px; border-width: 0px; border-color: #131313; border-style: solid;"
+          >
+            <div
+              class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+              style="width: 20px; height: 20px;"
+            >
+              <div
+                class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                style="background-image: url(mock-asset-ETHEREUM_LOGO.png);"
+              />
+              <img
+                alt=""
+                class="css-accessibilityImage-9pa8cd"
+                draggable="false"
+                src="mock-asset-ETHEREUM_LOGO.png"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style="display: contents;"
+    />
+  </span>
+</DocumentFragment>
+`;
+
+exports[`[object Object] > small size > renders triple logos 1`] = `
+<DocumentFragment>
+  <span
+    class=""
+    style="display: contents;"
+  >
+    <div
+      class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-20px _width-20px"
+    >
+      <div
+        class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _height-20px _width-20px _pointerEvents-auto _position-relative"
+        data-testid="network-pile"
+      >
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-10 _top-0px _left-0px"
+        >
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690004 _borderTopRightRadius-t-radius-ro840690004 _borderBottomRightRadius-t-radius-ro840690004 _borderBottomLeftRadius-t-radius-ro840690004"
+            style="width: 10px; height: 10px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 9px; height: 9px; border-radius: 2.6999999999999997px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 9px; height: 9px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-ETHEREUM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-ETHEREUM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-10 _bottom-0px _right-0px"
+        >
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690004 _borderTopRightRadius-t-radius-ro840690004 _borderBottomRightRadius-t-radius-ro840690004 _borderBottomLeftRadius-t-radius-ro840690004"
+            style="width: 10px; height: 10px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 9px; height: 9px; border-radius: 2.6999999999999997px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 9px; height: 9px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-OPTIMISM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-OPTIMISM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _position-absolute _zIndex-11"
+        >
+          <div
+            class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _backgroundColor-surface1 _borderTopLeftRadius-t-radius-ro840690004 _borderTopRightRadius-t-radius-ro840690004 _borderBottomRightRadius-t-radius-ro840690004 _borderBottomLeftRadius-t-radius-ro840690004"
+            style="width: 10px; height: 10px;"
+          >
+            <div
+              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+              data-testid="network-logo"
+              style="width: 9px; height: 9px; border-radius: 2.6999999999999997px; border-width: 0px; border-color: #131313; border-style: solid;"
+            >
+              <div
+                class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                style="width: 9px; height: 9px;"
+              >
+                <div
+                  class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                  style="background-image: url(mock-asset-ARBITRUM_LOGO.png);"
+                />
+                <img
+                  alt=""
+                  class="css-accessibilityImage-9pa8cd"
+                  draggable="false"
+                  src="mock-asset-ARBITRUM_LOGO.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style="display: contents;"
+    />
+  </span>
+</DocumentFragment>
+`;