From e23b736fdceca79eb57df4acdfd412f68e0327cf Mon Sep 17 00:00:00 2001
From: Matthias <mprost@scaleway.com>
Date: Fri, 13 Dec 2024 11:53:15 +0100
Subject: [PATCH] refactor(MenuV2): default portal to be document body

---
 .changeset/flat-days-yawn.md                  |    5 +
 .../__snapshots__/index.test.tsx.snap         | 4601 +----------------
 packages/ui/src/components/MenuV2/index.tsx   |    2 +-
 3 files changed, 207 insertions(+), 4401 deletions(-)
 create mode 100644 .changeset/flat-days-yawn.md

diff --git a/.changeset/flat-days-yawn.md b/.changeset/flat-days-yawn.md
new file mode 100644
index 0000000000..aa40f60636
--- /dev/null
+++ b/.changeset/flat-days-yawn.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Make `<MenuV2 />` default portalTarget set to `document.body` to avoid scrolling in a list when menu is added
diff --git a/packages/ui/src/components/MenuV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/MenuV2/__tests__/__snapshots__/index.test.tsx.snap
index 1f7ae79204..23868f11b9 100644
--- a/packages/ui/src/components/MenuV2/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/MenuV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -772,61 +772,7 @@ exports[`Menu > Menu.Item > render with sentiment danger 1`] = `
 
 exports[`Menu > placement > renders bottom 1`] = `
 <DocumentFragment>
-  @keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-.emotion-0 {
+  .emotion-0 {
   display: inherit;
 }
 
@@ -850,501 +796,59 @@ exports[`Menu > placement > renders bottom 1`] = `
   width: 100%;
 }
 
-.emotion-3 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  position: absolute;
-  max-width: 14.5rem;
-  max-height: 480px;
-  overflow: auto;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  width: 180px;
-  max-width: none;
-  padding: 0.125rem 0;
-}
-
-.emotion-3[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-3[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-3[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-3[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-3 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  position: absolute;
-  max-width: 14.5rem;
-  max-height: 480px;
-  overflow: auto;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  width: 180px;
-  max-width: none;
-  padding: 0.125rem 0;
-}
-
-.emotion-3[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-3[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-3[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-3[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-3 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  position: absolute;
-  max-width: 14.5rem;
-  max-height: 480px;
-  overflow: auto;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  width: 180px;
-  max-width: none;
-  padding: 0.125rem 0;
-}
-
-.emotion-3[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-3[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-3[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-3[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
+<div
+    data-testid="testing"
+  >
+    <div
+      aria-controls="menu-:rr:"
+      aria-describedby="menu-:rr:"
+      class="emotion-0 emotion-1"
+      tabindex="-1"
+    >
+      <button
+        aria-expanded="true"
+        aria-haspopup="dialog"
+        type="button"
+      >
+        Menu
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
 
-.emotion-7:last-child {
-  border: none;
+exports[`Menu > placement > renders left 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: inherit;
 }
 
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
+.emotion-0[data-container-full-width="true"] {
   width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
 }
 
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
+.emotion-0 {
+  display: inherit;
 }
 
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
+.emotion-0[data-container-full-width="true"] {
   width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
 }
 
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
+.emotion-0 {
+  display: inherit;
 }
 
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
+.emotion-0[data-container-full-width="true"] {
   width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
 }
 
 <div
     data-testid="testing"
   >
     <div
-      aria-controls="menu-:rr:"
-      aria-describedby="menu-:rr:"
+      aria-controls="menu-:ru:"
+      aria-describedby="menu-:ru:"
       class="emotion-0 emotion-1"
       tabindex="-1"
     >
@@ -1355,57 +859,14 @@ exports[`Menu > placement > renders bottom 1`] = `
       >
         Menu
       </button>
-      <div
-        class="emotion-2 emotion-3 emotion-4"
-        data-animated="false"
-        data-has-arrow="false"
-        id="menu-:rr:"
-        role="dialog"
-        style="opacity: 1;"
-      >
-        <div
-          class="emotion-5 emotion-6"
-          role="menu"
-        >
-          <div
-            class="emotion-7 emotion-8"
-          >
-            <button
-              class="emotion-9 emotion-10"
-              role="menuitem"
-              type="button"
-            >
-              bottom
-            </button>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`Menu > placement > renders left 1`] = `
+exports[`Menu > placement > renders right 1`] = `
 <DocumentFragment>
-  @keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-8px, 0px, 0);
-    -moz-transform: translate3d(-8px, 0px, 0);
-    -ms-transform: translate3d(-8px, 0px, 0);
-    transform: translate3d(-8px, 0px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(-8px, 0px, 0);
-    -moz-transform: translate3d(-8px, 0px, 0);
-    -ms-transform: translate3d(-8px, 0px, 0);
-    transform: translate3d(-8px, 0px, 0);
-  }
-}
-
-.emotion-0 {
+  .emotion-0 {
   display: inherit;
 }
 
@@ -1429,385 +890,59 @@ exports[`Menu > placement > renders left 1`] = `
   width: 100%;
 }
 
-.emotion-3 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  position: absolute;
-  max-width: 14.5rem;
-  max-height: 480px;
-  overflow: auto;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(-8px, 0px, 0);
-  -moz-transform: translate3d(-8px, 0px, 0);
-  -ms-transform: translate3d(-8px, 0px, 0);
-  transform: translate3d(-8px, 0px, 0);
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  width: 180px;
-  max-width: none;
-  padding: 0.125rem 0;
-}
-
-.emotion-3[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-3[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: 0px;
-  left: 5px;
-  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
-  -moz-transform: translate(-50%, -50%) rotate(-90deg);
-  -ms-transform: translate(-50%, -50%) rotate(-90deg);
-  transform: translate(-50%, -50%) rotate(-90deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-3[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-3[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
+<div
+    data-testid="testing"
+  >
+    <div
+      aria-controls="menu-:r11:"
+      aria-describedby="menu-:r11:"
+      class="emotion-0 emotion-1"
+      tabindex="-1"
+    >
+      <button
+        aria-expanded="true"
+        aria-haspopup="dialog"
+        type="button"
+      >
+        Menu
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
 
-.emotion-7:last-child {
-  border: none;
+exports[`Menu > placement > renders top 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: inherit;
 }
 
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
+.emotion-0[data-container-full-width="true"] {
   width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
 }
 
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
+.emotion-0 {
+  display: inherit;
 }
 
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
+.emotion-0[data-container-full-width="true"] {
   width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
 }
 
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
+.emotion-0 {
+  display: inherit;
 }
 
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
+.emotion-0[data-container-full-width="true"] {
   width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
 }
 
 <div
     data-testid="testing"
   >
     <div
-      aria-controls="menu-:ru:"
-      aria-describedby="menu-:ru:"
+      aria-controls="menu-:ro:"
+      aria-describedby="menu-:ro:"
       class="emotion-0 emotion-1"
       tabindex="-1"
     >
@@ -1818,57 +953,14 @@ exports[`Menu > placement > renders left 1`] = `
       >
         Menu
       </button>
-      <div
-        class="emotion-2 emotion-3 emotion-4"
-        data-animated="false"
-        data-has-arrow="false"
-        id="menu-:ru:"
-        role="dialog"
-        style="opacity: 1;"
-      >
-        <div
-          class="emotion-5 emotion-6"
-          role="menu"
-        >
-          <div
-            class="emotion-7 emotion-8"
-          >
-            <button
-              class="emotion-9 emotion-10"
-              role="menuitem"
-              type="button"
-            >
-              left
-            </button>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`Menu > placement > renders right 1`] = `
+exports[`Menu > renders with Menu.Group 1`] = `
 <DocumentFragment>
-  @keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(8px, 0px, 0);
-    -moz-transform: translate3d(8px, 0px, 0);
-    -ms-transform: translate3d(8px, 0px, 0);
-    transform: translate3d(8px, 0px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(8px, 0px, 0);
-    -moz-transform: translate3d(8px, 0px, 0);
-    -ms-transform: translate3d(8px, 0px, 0);
-    transform: translate3d(8px, 0px, 0);
-  }
-}
-
-.emotion-0 {
+  .emotion-0 {
   display: inherit;
 }
 
@@ -1876,1888 +968,30 @@ exports[`Menu > placement > renders right 1`] = `
   width: 100%;
 }
 
-.emotion-0 {
-  display: inherit;
-}
-
-.emotion-0[data-container-full-width="true"] {
-  width: 100%;
-}
+<div
+    data-testid="testing"
+  >
+    <div
+      aria-controls="menu-:r7:"
+      aria-describedby="menu-:r7:"
+      class="emotion-0 emotion-1"
+      tabindex="-1"
+    >
+      <button
+        aria-expanded="true"
+        aria-haspopup="dialog"
+        type="button"
+      >
+        Menu
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
 
-.emotion-0 {
-  display: inherit;
-}
-
-.emotion-0[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-3 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  position: absolute;
-  max-width: 14.5rem;
-  max-height: 480px;
-  overflow: auto;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(8px, 0px, 0);
-  -moz-transform: translate3d(8px, 0px, 0);
-  -ms-transform: translate3d(8px, 0px, 0);
-  transform: translate3d(8px, 0px, 0);
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  width: 180px;
-  max-width: none;
-  padding: 0.125rem 0;
-}
-
-.emotion-3[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-3[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: 0px;
-  left: -5px;
-  -webkit-transform: translate(50%, -50%) rotate(90deg);
-  -moz-transform: translate(50%, -50%) rotate(90deg);
-  -ms-transform: translate(50%, -50%) rotate(90deg);
-  transform: translate(50%, -50%) rotate(90deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-3[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-3[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      aria-controls="menu-:r11:"
-      aria-describedby="menu-:r11:"
-      class="emotion-0 emotion-1"
-      tabindex="-1"
-    >
-      <button
-        aria-expanded="true"
-        aria-haspopup="dialog"
-        type="button"
-      >
-        Menu
-      </button>
-      <div
-        class="emotion-2 emotion-3 emotion-4"
-        data-animated="false"
-        data-has-arrow="false"
-        id="menu-:r11:"
-        role="dialog"
-        style="opacity: 1;"
-      >
-        <div
-          class="emotion-5 emotion-6"
-          role="menu"
-        >
-          <div
-            class="emotion-7 emotion-8"
-          >
-            <button
-              class="emotion-9 emotion-10"
-              role="menuitem"
-              type="button"
-            >
-              right
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Menu > placement > renders top 1`] = `
-<DocumentFragment>
-  @keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, -4px, 0);
-    -moz-transform: translate3d(0px, -4px, 0);
-    -ms-transform: translate3d(0px, -4px, 0);
-    transform: translate3d(0px, -4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, -4px, 0);
-    -moz-transform: translate3d(0px, -4px, 0);
-    -ms-transform: translate3d(0px, -4px, 0);
-    transform: translate3d(0px, -4px, 0);
-  }
-}
-
-.emotion-0 {
-  display: inherit;
-}
-
-.emotion-0[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-0 {
-  display: inherit;
-}
-
-.emotion-0[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-0 {
-  display: inherit;
-}
-
-.emotion-0[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-3 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  position: absolute;
-  max-width: 14.5rem;
-  max-height: 480px;
-  overflow: auto;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, -4px, 0);
-  -moz-transform: translate3d(0px, -4px, 0);
-  -ms-transform: translate3d(0px, -4px, 0);
-  transform: translate3d(0px, -4px, 0);
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  width: 180px;
-  max-width: none;
-  padding: 0.125rem 0;
-}
-
-.emotion-3[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-3[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -1px;
-  left: 0px;
-  -webkit-transform: rotate(0deg);
-  -moz-transform: rotate(0deg);
-  -ms-transform: rotate(0deg);
-  transform: rotate(0deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-3[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-3[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      aria-controls="menu-:ro:"
-      aria-describedby="menu-:ro:"
-      class="emotion-0 emotion-1"
-      tabindex="-1"
-    >
-      <button
-        aria-expanded="true"
-        aria-haspopup="dialog"
-        type="button"
-      >
-        Menu
-      </button>
-      <div
-        class="emotion-2 emotion-3 emotion-4"
-        data-animated="false"
-        data-has-arrow="false"
-        id="menu-:ro:"
-        role="dialog"
-        style="opacity: 1;"
-      >
-        <div
-          class="emotion-5 emotion-6"
-          role="menu"
-        >
-          <div
-            class="emotion-7 emotion-8"
-          >
-            <button
-              class="emotion-9 emotion-10"
-              role="menuitem"
-              type="button"
-            >
-              top
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Menu > renders with Menu.Group 1`] = `
-<DocumentFragment>
-  @keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-.emotion-0 {
-  display: inherit;
-}
-
-.emotion-0[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-3 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  position: absolute;
-  max-width: 14.5rem;
-  max-height: 480px;
-  overflow: auto;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  width: 180px;
-  max-width: none;
-  padding: 0.125rem 0;
-}
-
-.emotion-3[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-3[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-3[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-3[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-7 {
-  padding: 0.25rem 0.75rem;
-  text-align: left;
-}
-
-.emotion-9 {
-  color: #727683;
-  font-size: 0.75rem;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1rem;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-11 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-11:last-child {
-  border: none;
-}
-
-.emotion-13 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-13 svg {
-  fill: #3f4250;
-}
-
-.emotion-13:hover,
-.emotion-13:focus,
-.emotion-13[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-13:hover svg,
-.emotion-13:focus svg,
-.emotion-13[data-active='true'] svg {
-  fill: #222638;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      aria-controls="menu-:r7:"
-      aria-describedby="menu-:r7:"
-      class="emotion-0 emotion-1"
-      tabindex="-1"
-    >
-      <button
-        aria-expanded="true"
-        aria-haspopup="dialog"
-        type="button"
-      >
-        Menu
-      </button>
-      <div
-        class="emotion-2 emotion-3 emotion-4"
-        data-animated="false"
-        data-has-arrow="false"
-        id="menu-:r7:"
-        role="dialog"
-        style="opacity: 1;"
-      >
-        <div
-          class="emotion-5 emotion-6"
-          role="menu"
-        >
-          <span
-            class="emotion-7 emotion-8"
-          >
-            <span
-              class="emotion-9 emotion-10"
-            >
-              Group
-            </span>
-          </span>
-          <div
-            class="emotion-11 emotion-12"
-          >
-            <button
-              class="emotion-13 emotion-14"
-              role="menuitem"
-              type="button"
-            >
-              Menu.Item
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Menu > renders with Menu.Item 1`] = `
-<DocumentFragment>
-  @keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-.emotion-0 {
-  display: inherit;
-}
-
-.emotion-0[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-3 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  position: absolute;
-  max-width: 14.5rem;
-  max-height: 480px;
-  overflow: auto;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  width: 180px;
-  max-width: none;
-  padding: 0.125rem 0;
-}
-
-.emotion-3[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-3[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-3[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-3[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      aria-controls="menu-:r4:"
-      aria-describedby="menu-:r4:"
-      class="emotion-0 emotion-1"
-      tabindex="-1"
-    >
-      <button
-        aria-expanded="true"
-        aria-haspopup="dialog"
-        type="button"
-      >
-        Menu
-      </button>
-      <div
-        class="emotion-2 emotion-3 emotion-4"
-        data-animated="false"
-        data-has-arrow="false"
-        id="menu-:r4:"
-        role="dialog"
-        style="opacity: 1;"
-      >
-        <div
-          class="emotion-5 emotion-6"
-          role="menu"
-        >
-          <div
-            class="emotion-7 emotion-8"
-          >
-            <button
-              class="emotion-9 emotion-10"
-              role="menuitem"
-              type="button"
-            >
-              Menu.Item
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Menu > renders with Menu.ItemLink & Menu.Item disabled 1`] = `
-<DocumentFragment>
-  @keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-.emotion-0 {
-  display: inherit;
-}
-
-.emotion-0[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-3 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  position: absolute;
-  max-width: 14.5rem;
-  max-height: 480px;
-  overflow: auto;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  width: 180px;
-  max-width: none;
-  padding: 0.125rem 0;
-}
-
-.emotion-3[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-3[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-3[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-3[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #b5b7bd;
-  cursor: not-allowed;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #b5b7bd;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      aria-controls="menu-:re:"
-      aria-describedby="menu-:re:"
-      class="emotion-0 emotion-1"
-      tabindex="-1"
-    >
-      <button
-        aria-expanded="true"
-        aria-haspopup="dialog"
-        type="button"
-      >
-        Menu
-      </button>
-      <div
-        class="emotion-2 emotion-3 emotion-4"
-        data-animated="false"
-        data-has-arrow="false"
-        id="menu-:re:"
-        role="dialog"
-        style="opacity: 1;"
-      >
-        <div
-          class="emotion-5 emotion-6"
-          role="menu"
-        >
-          <div
-            class="emotion-7 emotion-8"
-          >
-            <button
-              class="emotion-9 emotion-10"
-              disabled=""
-              role="menuitem"
-              type="button"
-            >
-              Menu.Item disabled
-            </button>
-          </div>
-          <div
-            class="emotion-7 emotion-8"
-          >
-            <button
-              class="emotion-9 emotion-10"
-              disabled=""
-              role="menuitem"
-              type="button"
-            >
-              Menu.Item Link disabled
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Menu > renders with Menu.ItemLink 1`] = `
-<DocumentFragment>
-  @keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-.emotion-0 {
-  display: inherit;
-}
-
-.emotion-0[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-3 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  position: absolute;
-  max-width: 14.5rem;
-  max-height: 480px;
-  overflow: auto;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  width: 180px;
-  max-width: none;
-  padding: 0.125rem 0;
-}
-
-.emotion-3[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-3[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-3[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-3[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
-}
-
-.emotion-9:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-<div
-    data-testid="testing"
-  >
-    <div
-      aria-controls="menu-:rb:"
-      aria-describedby="menu-:rb:"
-      class="emotion-0 emotion-1"
-      tabindex="-1"
-    >
-      <button
-        aria-expanded="true"
-        aria-haspopup="dialog"
-        type="button"
-      >
-        Menu
-      </button>
-      <div
-        class="emotion-2 emotion-3 emotion-4"
-        data-animated="false"
-        data-has-arrow="false"
-        id="menu-:rb:"
-        role="dialog"
-        style="opacity: 1;"
-      >
-        <div
-          class="emotion-5 emotion-6"
-          role="menu"
-        >
-          <div
-            class="emotion-7 emotion-8"
-          >
-            <a
-              class="emotion-9 emotion-10"
-              href="/link"
-              role="menuitem"
-            >
-              Menu.Item as Link
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Menu > renders with disclosure not a function 1`] = `
-<DocumentFragment>
-  .emotion-0 {
+exports[`Menu > renders with Menu.Item 1`] = `
+<DocumentFragment>
+  .emotion-0 {
   display: inherit;
 }
 
@@ -3769,24 +1003,24 @@ exports[`Menu > renders with disclosure not a function 1`] = `
     data-testid="testing"
   >
     <div
-      aria-controls="menu-:r0:"
-      aria-describedby="menu-:r0:"
+      aria-controls="menu-:r4:"
+      aria-describedby="menu-:r4:"
       class="emotion-0 emotion-1"
       tabindex="-1"
     >
       <button
-        aria-expanded="false"
+        aria-expanded="true"
         aria-haspopup="dialog"
         type="button"
       >
-        Menu is visible
+        Menu
       </button>
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`Menu > renders with visible=false 1`] = `
+exports[`Menu > renders with Menu.ItemLink & Menu.Item disabled 1`] = `
 <DocumentFragment>
   .emotion-0 {
   display: inherit;
@@ -3800,518 +1034,39 @@ exports[`Menu > renders with visible=false 1`] = `
     data-testid="testing"
   >
     <div
-      aria-controls="menu-:r2:"
-      aria-describedby="menu-:r2:"
+      aria-controls="menu-:re:"
+      aria-describedby="menu-:re:"
       class="emotion-0 emotion-1"
       tabindex="-1"
     >
       <button
-        aria-expanded="false"
+        aria-expanded="true"
         aria-haspopup="dialog"
         type="button"
       >
-        Menu is visible
+        Menu
       </button>
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`Menu > sizes > renders large 1`] = `
+exports[`Menu > renders with Menu.ItemLink 1`] = `
 <DocumentFragment>
-  @keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-.emotion-0 {
-  display: inherit;
-}
-
-.emotion-0[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-0 {
-  display: inherit;
-}
-
-.emotion-0[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-0 {
+  .emotion-0 {
   display: inherit;
 }
 
-.emotion-0[data-container-full-width="true"] {
-  width: 100%;
-}
-
-.emotion-3 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  position: absolute;
-  max-width: 14.5rem;
-  max-height: 480px;
-  overflow: auto;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  width: 380px;
-  max-width: none;
-  padding: 0.125rem 0;
-}
-
-.emotion-3[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-3[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-3[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-3[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
+.emotion-0[data-container-full-width="true"] {
+  width: 100%;
 }
 
 <div
     data-testid="testing"
   >
     <div
-      aria-controls="menu-:r1a:"
-      aria-describedby="menu-:r1a:"
+      aria-controls="menu-:rb:"
+      aria-describedby="menu-:rb:"
       class="emotion-0 emotion-1"
       tabindex="-1"
     >
@@ -4322,111 +1077,45 @@ exports[`Menu > sizes > renders large 1`] = `
       >
         Menu
       </button>
-      <div
-        class="emotion-2 emotion-3 emotion-4"
-        data-animated="false"
-        data-has-arrow="false"
-        id="menu-:r1a:"
-        role="dialog"
-        style="opacity: 1;"
-      >
-        <div
-          class="emotion-5 emotion-6"
-          role="menu"
-        >
-          <div
-            class="emotion-7 emotion-8"
-          >
-            <button
-              class="emotion-9 emotion-10"
-              role="menuitem"
-              type="button"
-            >
-              large
-            </button>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`Menu > sizes > renders medium 1`] = `
+exports[`Menu > renders with disclosure not a function 1`] = `
 <DocumentFragment>
-  @keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
+  .emotion-0 {
+  display: inherit;
 }
 
-@keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
+.emotion-0[data-container-full-width="true"] {
+  width: 100%;
 }
 
-@keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
+<div
+    data-testid="testing"
+  >
+    <div
+      aria-controls="menu-:r0:"
+      aria-describedby="menu-:r0:"
+      class="emotion-0 emotion-1"
+      tabindex="-1"
+    >
+      <button
+        aria-expanded="false"
+        aria-haspopup="dialog"
+        type="button"
+      >
+        Menu is visible
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
 
-.emotion-0 {
+exports[`Menu > renders with visible=false 1`] = `
+<DocumentFragment>
+  .emotion-0 {
   display: inherit;
 }
 
@@ -4434,7 +1123,30 @@ exports[`Menu > sizes > renders medium 1`] = `
   width: 100%;
 }
 
-.emotion-0 {
+<div
+    data-testid="testing"
+  >
+    <div
+      aria-controls="menu-:r2:"
+      aria-describedby="menu-:r2:"
+      class="emotion-0 emotion-1"
+      tabindex="-1"
+    >
+      <button
+        aria-expanded="false"
+        aria-haspopup="dialog"
+        type="button"
+      >
+        Menu is visible
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Menu > sizes > renders large 1`] = `
+<DocumentFragment>
+  .emotion-0 {
   display: inherit;
 }
 
@@ -4449,386 +1161,21 @@ exports[`Menu > sizes > renders medium 1`] = `
 .emotion-0[data-container-full-width="true"] {
   width: 100%;
 }
-
-.emotion-3 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  position: absolute;
-  max-width: 14.5rem;
-  max-height: 480px;
-  overflow: auto;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  width: 280px;
-  max-width: none;
-  padding: 0.125rem 0;
-}
-
-.emotion-3[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-3[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-3[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-3[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
+
+.emotion-0 {
+  display: inherit;
 }
 
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
+.emotion-0[data-container-full-width="true"] {
+  width: 100%;
 }
 
 <div
     data-testid="testing"
   >
     <div
-      aria-controls="menu-:r17:"
-      aria-describedby="menu-:r17:"
+      aria-controls="menu-:r1a:"
+      aria-describedby="menu-:r1a:"
       class="emotion-0 emotion-1"
       tabindex="-1"
     >
@@ -4839,93 +1186,14 @@ exports[`Menu > sizes > renders medium 1`] = `
       >
         Menu
       </button>
-      <div
-        class="emotion-2 emotion-3 emotion-4"
-        data-animated="false"
-        data-has-arrow="false"
-        id="menu-:r17:"
-        role="dialog"
-        style="opacity: 1;"
-      >
-        <div
-          class="emotion-5 emotion-6"
-          role="menu"
-        >
-          <div
-            class="emotion-7 emotion-8"
-          >
-            <button
-              class="emotion-9 emotion-10"
-              role="menuitem"
-              type="button"
-            >
-              medium
-            </button>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`Menu > sizes > renders small 1`] = `
+exports[`Menu > sizes > renders medium 1`] = `
 <DocumentFragment>
-  @keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translate3d(0px, 4px, 0);
-    -moz-transform: translate3d(0px, 4px, 0);
-    -ms-transform: translate3d(0px, 4px, 0);
-    transform: translate3d(0px, 4px, 0);
-  }
-}
-
-.emotion-0 {
+  .emotion-0 {
   display: inherit;
 }
 
@@ -4949,493 +1217,51 @@ exports[`Menu > sizes > renders small 1`] = `
   width: 100%;
 }
 
-.emotion-3 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  position: absolute;
-  max-width: 14.5rem;
-  max-height: 480px;
-  overflow: auto;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  width: 180px;
-  max-width: none;
-  padding: 0.125rem 0;
-}
-
-.emotion-3[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-3[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-3[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-3[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-3 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  position: absolute;
-  max-width: 14.5rem;
-  max-height: 480px;
-  overflow: auto;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  width: 180px;
-  max-width: none;
-  padding: 0.125rem 0;
-}
-
-.emotion-3[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-3[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-3[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-3[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-3 {
-  background: #151a2d;
-  color: #ffffff;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  position: absolute;
-  max-width: 14.5rem;
-  max-height: 480px;
-  overflow: auto;
-  overflow-wrap: break-word;
-  font-size: 0.8rem;
-  inset: 0 auto auto 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  -webkit-transform: translate3d(0px, 4px, 0);
-  -moz-transform: translate3d(0px, 4px, 0);
-  -ms-transform: translate3d(0px, 4px, 0);
-  transform: translate3d(0px, 4px, 0);
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  width: 180px;
-  max-width: none;
-  padding: 0.125rem 0;
-}
-
-.emotion-3[data-animated="true"] {
-  -webkit-animation: 0ms animation-0 forwards;
-  animation: 0ms animation-0 forwards;
-}
-
-.emotion-3[data-has-arrow="true"]::after {
-  content: " ";
-  position: absolute;
-  top: -5px;
-  left: 0px;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-left: -8px;
-  border-width: 8px;
-  border-style: solid;
-  border-color: #151a2d transparent transparent transparent;
-  pointer-events: none;
-}
-
-.emotion-3[data-visible-in-dom="false"] {
-  display: none;
-}
-
-.emotion-3[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-5:after,
-.emotion-5:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-5:after {
-  border-color: transparent;
-}
-
-.emotion-5:before {
-  border-color: transparent;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
-
-.emotion-7:last-child {
-  border: none;
-}
-
-.emotion-7 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-}
+<div
+    data-testid="testing"
+  >
+    <div
+      aria-controls="menu-:r17:"
+      aria-describedby="menu-:r17:"
+      class="emotion-0 emotion-1"
+      tabindex="-1"
+    >
+      <button
+        aria-expanded="true"
+        aria-haspopup="dialog"
+        type="button"
+      >
+        Menu
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
 
-.emotion-7:last-child {
-  border: none;
+exports[`Menu > sizes > renders small 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: inherit;
 }
 
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
+.emotion-0[data-container-full-width="true"] {
   width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
 }
 
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
+.emotion-0 {
+  display: inherit;
 }
 
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
+.emotion-0[data-container-full-width="true"] {
   width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
 }
 
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
+.emotion-0 {
+  display: inherit;
 }
 
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 2rem;
-  max-height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.25rem 0.5rem;
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
+.emotion-0[data-container-full-width="true"] {
   width: 100%;
-  border-radius: 0.25rem;
-  -webkit-transition: background-color 200ms,color 200ms;
-  transition: background-color 200ms,color 200ms;
-  color: #3f4250;
-  background: none;
-}
-
-.emotion-9 svg {
-  fill: #3f4250;
-}
-
-.emotion-9:hover,
-.emotion-9:focus,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
 }
 
 <div
@@ -5454,31 +1280,6 @@ exports[`Menu > sizes > renders small 1`] = `
       >
         Menu
       </button>
-      <div
-        class="emotion-2 emotion-3 emotion-4"
-        data-animated="false"
-        data-has-arrow="false"
-        id="menu-:r14:"
-        role="dialog"
-        style="opacity: 1;"
-      >
-        <div
-          class="emotion-5 emotion-6"
-          role="menu"
-        >
-          <div
-            class="emotion-7 emotion-8"
-          >
-            <button
-              class="emotion-9 emotion-10"
-              role="menuitem"
-              type="button"
-            >
-              small
-            </button>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 </DocumentFragment>
diff --git a/packages/ui/src/components/MenuV2/index.tsx b/packages/ui/src/components/MenuV2/index.tsx
index 95bd5d35e1..56c89c753a 100644
--- a/packages/ui/src/components/MenuV2/index.tsx
+++ b/packages/ui/src/components/MenuV2/index.tsx
@@ -131,7 +131,7 @@ const FwdMenu = forwardRef(
       'data-testid': dataTestId,
       maxHeight,
       maxWidth,
-      portalTarget,
+      portalTarget = document.body,
       size = 'small',
       triggerMethod = 'click',
       dynamicDomRendering,