From d21d35904dbaad8a74f2fc2b42b1489da22b906b Mon Sep 17 00:00:00 2001
From: lisa <llupi@scaleway.com>
Date: Tue, 14 Oct 2025 15:01:44 +0200
Subject: [PATCH] refactor: menu vanilla extract

---
 .changeset/four-goats-smash.md                |   5 +
 .../ui/src/components/Menu/MenuContent.tsx    | 112 +----
 .../src/components/Menu/components/Group.tsx  |  11 +-
 .../src/components/Menu/components/Item.tsx   | 130 +----
 packages/ui/src/components/Menu/styles.css.ts | 227 +++++++++
 .../__snapshots__/index.test.tsx.snap         | 451 ++++--------------
 6 files changed, 378 insertions(+), 558 deletions(-)
 create mode 100644 .changeset/four-goats-smash.md
 create mode 100644 packages/ui/src/components/Menu/styles.css.ts

diff --git a/.changeset/four-goats-smash.md b/.changeset/four-goats-smash.md
new file mode 100644
index 0000000000..d4c98fe282
--- /dev/null
+++ b/.changeset/four-goats-smash.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Refactor component `Menu` to usa vanilla extract instead of Emotion
diff --git a/packages/ui/src/components/Menu/MenuContent.tsx b/packages/ui/src/components/Menu/MenuContent.tsx
index d2363a1fd9..9f8cbc7ab5 100644
--- a/packages/ui/src/components/Menu/MenuContent.tsx
+++ b/packages/ui/src/components/Menu/MenuContent.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import styled from '@emotion/styled'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
 import type {
   ButtonHTMLAttributes,
   KeyboardEvent,
@@ -23,82 +23,21 @@ import {
 import { Popup } from '../Popup'
 import { SearchInput } from '../SearchInput'
 import { Stack } from '../Stack'
-import { SIZES } from './constants'
 import { getListItem, searchChildren } from './helpers'
 import { DisclosureContext, useMenu } from './MenuProvider'
+import {
+  heightAvailableSpace,
+  heightMenu,
+  menu,
+  menuContent,
+  menuFooter,
+  menuList,
+  menuSearchInput,
+} from './styles.css'
 import type { MenuProps } from './types'
 
 const SPACE_DISCLOSURE_POPUP = 24 // in px
 
-const StyledPopup = styled(Popup, {
-  shouldForwardProp: prop => !['searchable'].includes(prop),
-})<{ searchable: boolean }>`
-  background-color: ${({ theme }) =>
-    theme.colors.other.elevation.background.raised};
-  box-shadow: ${({ theme }) =>
-    `${theme.shadows.raised[0]}, ${theme.shadows.raised[1]}`};
-  padding: 0;
-
-  &[data-has-arrow='true'] {
-    &::after {
-      border-color: ${({ theme }) =>
-        theme.colors.other.elevation.background.raised}
-        transparent transparent transparent;
-    }
-  }
-
-  min-width: ${SIZES.small};
-  max-width: ${SIZES.large};
-
-  ${({ searchable }) => (searchable ? `min-width: 20rem` : null)};
-  padding: ${({ theme }) => `${theme.space['0.25']} 0`};
-
-`
-
-const Content = styled(Stack)`
-overflow: auto;
-`
-
-const Footer = styled(Stack)`
-  padding: ${({ theme }) => theme.space['1']};
-`
-
-const MenuList = styled(Stack, {
-  shouldForwardProp: prop => !['height', 'heightAvailableSpace'].includes(prop),
-})<{ height: string; heightAvailableSpace: string }>`
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: ${({ theme, height, heightAvailableSpace }) =>
-    `calc(min(${height}, ${heightAvailableSpace}) - ${theme.space['0.5']})`};
-
-  &:after,
-  &:before {
-    border: solid transparent;
-    border-width: 9px;
-    content: ' ';
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-  }
-
-  &:after {
-    border-color: transparent;
-  }
-  &:before {
-    border-color: transparent;
-  }
-  background-color: ${({ theme }) =>
-    theme.colors.other.elevation.background.raised};
-  color: ${({ theme }) => theme.colors.neutral.text};
-  border-radius: ${({ theme }) => theme.radii.default};
-  position: relative;
-`
-
-const StyledSearchInput = styled(SearchInput)`
-  padding: ${({ theme }) => theme.space['1']};
-`
-
 export const Menu = forwardRef(
   (
     {
@@ -274,17 +213,16 @@ export const Menu = forwardRef(
     }, [isVisible, portalTarget, disclosureRef, placement, noShrink])
 
     return (
-      <StyledPopup
+      <Popup
         align={align}
         aria-label={ariaLabel}
-        className={className}
-        data-has-arrow={hasArrow}
+        className={`${className ? `${className} ` : ''}${menu({ arrow: hasArrow, searchable })}`}
         debounceDelay={triggerMethod === 'hover' ? 250 : 0}
         dynamicDomRendering={dynamicDomRendering}
         hasArrow={hasArrow}
         hideOnClickOutside
         id={finalId}
-        maxHeight={maxHeight ?? '30rem'}
+        maxHeight={maxHeight ?? 'fit-content'}
         onClose={() => {
           setIsVisible(false)
           setLocalChild(null)
@@ -298,38 +236,40 @@ export const Menu = forwardRef(
         portalTarget={portalTarget}
         ref={menuRef}
         role="dialog"
-        searchable={searchable}
         tabIndex={-1}
         text={
-          <MenuList
-            className={className}
+          <Stack
+            className={`${className ? `${className} ` : ''}${menuList}`}
             data-testid={dataTestId}
-            height={maxHeight ?? '30rem'}
-            heightAvailableSpace={popupMaxHeight}
             onKeyDown={handleKeyDown}
             onMouseEnter={() => setShouldBeVisible(true)}
             onMouseLeave={() => setShouldBeVisible(false)}
             role="menu"
+            style={assignInlineVars({
+              [heightMenu]: maxHeight ?? '30rem',
+              [heightAvailableSpace]: popupMaxHeight,
+            })}
           >
-            <Content ref={contentRef}>
+            <Stack className={menuContent} ref={contentRef}>
               {searchable && typeof children !== 'function' ? (
-                <StyledSearchInput
+                <SearchInput
+                  className={menuSearchInput}
                   onSearch={onSearch}
                   ref={searchInputRef}
                   size="small"
                 />
               ) : null}
               {finalChild}
-            </Content>
-            {footer ? <Footer>{footer}</Footer> : null}
-          </MenuList>
+            </Stack>
+            {footer ? <Stack className={menuFooter}>{footer}</Stack> : null}
+          </Stack>
         }
         visible={triggerMethod === 'click' ? isVisible : shouldBeVisible}
       >
         <DisclosureContext.Provider value>
           {finalDisclosure}
         </DisclosureContext.Provider>
-      </StyledPopup>
+      </Popup>
     )
   },
 )
diff --git a/packages/ui/src/components/Menu/components/Group.tsx b/packages/ui/src/components/Menu/components/Group.tsx
index 52a2f3d154..33beef5def 100644
--- a/packages/ui/src/components/Menu/components/Group.tsx
+++ b/packages/ui/src/components/Menu/components/Group.tsx
@@ -1,15 +1,10 @@
 'use client'
 
-import styled from '@emotion/styled'
 import type { ReactNode } from 'react'
 import { Children } from 'react'
 import { Stack } from '../../Stack'
 import { Text } from '../../Text'
-
-const Container = styled.span`
-  padding: ${({ theme }) => `${theme.space['0.5']} ${theme.space['1.5']}`};
-  text-align: left;
-`
+import { menuGroup } from '../styles.css'
 
 type GroupProps = {
   label: string
@@ -31,7 +26,7 @@ export const Group = ({
 
   return (
     <>
-      <Container>
+      <span className={menuGroup}>
         <Stack alignItems="center" direction="row" gap={1}>
           <Text
             as="span"
@@ -43,7 +38,7 @@ export const Group = ({
           </Text>
           {labelDescription || null}
         </Stack>
-      </Container>
+      </span>
       {isChildrenEmpty && emptyState ? emptyState : children}
     </>
   )
diff --git a/packages/ui/src/components/Menu/components/Item.tsx b/packages/ui/src/components/Menu/components/Item.tsx
index 906c44195f..e5bd170d42 100644
--- a/packages/ui/src/components/Menu/components/Item.tsx
+++ b/packages/ui/src/components/Menu/components/Item.tsx
@@ -1,7 +1,5 @@
 'use client'
 
-import type { Theme } from '@emotion/react'
-import styled from '@emotion/styled'
 import { ArrowRightIcon } from '@ultraviolet/icons'
 import type {
   KeyboardEvent,
@@ -15,105 +13,10 @@ import { Stack } from '../../Stack'
 import { Tooltip } from '../../Tooltip'
 import { getListItem } from '../helpers'
 import { useDisclosureContext, useMenu } from '../MenuProvider'
+import { menuItem, menuItemContainer } from '../styles.css'
 
 type MenuItemSentiment = 'neutral' | 'primary' | 'danger'
 
-const ANIMATION_DURATION = 200 // in ms
-
-const itemCoreStyle = ({
-  theme,
-  sentiment,
-  disabled,
-}: {
-  theme: Theme
-  borderless: boolean
-  sentiment: MenuItemSentiment
-  disabled: boolean
-}) => `
-  display: flex;
-  justify-content: start;
-  text-align: left;
-  align-items: center;
-  min-height: ${theme.sizing['400']};
-  max-height: ${theme.sizing['500']};
-  font-size: ${theme.typography.bodySmall.fontSize};
-  line-height: ${theme.typography.bodySmall.lineHeight};
-  font-weight: inherit;
-  padding: ${`${theme.space['0.5']} ${theme.space['1']}`};
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: ${theme.radii.default};
-  transition: background-color ${ANIMATION_DURATION}ms, color ${ANIMATION_DURATION}ms;
-
-  color: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
-  svg {
-    fill: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
-  }
-
-  ${
-    disabled
-      ? `
-        cursor: not-allowed;
-      `
-      : `
-          &:hover,
-          &:focus-visible, &[data-active='true'] {
-            background-color: ${theme.colors[sentiment].backgroundHover};
-            color: ${theme.colors[sentiment].textHover};
-            svg {
-              fill: ${theme.colors[sentiment].textHover};
-            }
-          }`
-  }
-`
-
-const Container = styled('div', {
-  shouldForwardProp: prop => !['borderless'].includes(prop),
-})<{ borderless: boolean }>`
-  ${({ theme, borderless }) =>
-    borderless
-      ? ''
-      : `border-bottom: 1px solid ${theme.colors.neutral.border};`}
-  padding: ${({ theme, borderless }) =>
-    `${borderless ? theme.space['0.25'] : theme.space['0.5']} ${
-      theme.space['0.5']
-    }`};
-  &:last-child {
-    border: none;
-  }
-  width: 100%;
-`
-
-const StyledItem = styled('button', {
-  shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
-})<{
-  borderless: boolean
-  disabled: boolean
-  sentiment: MenuItemSentiment
-}>`
-  ${({ theme, borderless, sentiment, disabled }) =>
-    itemCoreStyle({ borderless, disabled, sentiment, theme })}
-  background: none;
-`
-
-const StyledLinkItem = styled('a', {
-  shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
-})<{
-  borderless: boolean
-  disabled: boolean
-  sentiment: MenuItemSentiment
-}>`
-  ${({ theme, borderless, sentiment, disabled }) =>
-    itemCoreStyle({ borderless, disabled, sentiment, theme })}
-  text-decoration: none;
-
-  &:focus {
-    text-decoration: none;
-  }
-`
-
 type ItemProps = {
   href?: HTMLAnchorElement['href']
   target?: HTMLAnchorElement['target']
@@ -221,23 +124,23 @@ const Item = forwardRef<HTMLElement, ItemProps>(
 
     if (href && !disabled) {
       return (
-        <Container borderless={borderless} data-search-text={searchText}>
+        <div
+          className={menuItemContainer({ borderless })}
+          data-search-text={searchText}
+        >
           <Tooltip text={tooltip}>
-            <StyledLinkItem
-              borderless
-              className={className}
+            <a
+              className={`${className ? `${className} ` : ''}${menuItem({ borderless: true, disabled, sentiment })}`}
               data-active={active}
               data-is-disclosure={isDisclosure}
               data-is-menu-item
               data-testid={dataTestId}
-              disabled={disabled}
               href={href}
               onClick={onClickHandle}
               onKeyDown={handleKeyDown}
               ref={ref as Ref<HTMLAnchorElement>}
               rel={rel}
               role="menuitem"
-              sentiment={sentiment}
               target={target}
             >
               {isDisclosure ? (
@@ -252,18 +155,20 @@ const Item = forwardRef<HTMLElement, ItemProps>(
               ) : (
                 children
               )}
-            </StyledLinkItem>
+            </a>
           </Tooltip>
-        </Container>
+        </div>
       )
     }
 
     return (
-      <Container borderless={borderless} data-search-text={searchText}>
+      <div
+        className={menuItemContainer({ borderless })}
+        data-search-text={searchText}
+      >
         <Tooltip text={tooltip}>
-          <StyledItem
-            borderless={borderless}
-            className={className}
+          <button
+            className={`${className ? `${className} ` : ''}${menuItem({ borderless, disabled, sentiment })}`}
             data-active={active || (isVisible && isDisclosure)}
             data-is-disclosure={isDisclosure}
             data-is-menu-item
@@ -278,7 +183,6 @@ const Item = forwardRef<HTMLElement, ItemProps>(
             onKeyDown={handleKeyDown}
             ref={ref as Ref<HTMLButtonElement>}
             role="menuitem"
-            sentiment={sentiment}
             type="button"
           >
             {isDisclosure ? (
@@ -293,9 +197,9 @@ const Item = forwardRef<HTMLElement, ItemProps>(
             ) : (
               children
             )}
-          </StyledItem>
+          </button>
         </Tooltip>
-      </Container>
+      </div>
     )
   },
 )
diff --git a/packages/ui/src/components/Menu/styles.css.ts b/packages/ui/src/components/Menu/styles.css.ts
new file mode 100644
index 0000000000..65d5d3cf79
--- /dev/null
+++ b/packages/ui/src/components/Menu/styles.css.ts
@@ -0,0 +1,227 @@
+import { theme } from '@ultraviolet/themes'
+import { recipe } from '@vanilla-extract/recipes'
+import { SIZES } from './constants'
+import { createVar, globalStyle, style } from '@vanilla-extract/css'
+
+export const heightMenu = createVar()
+export const heightAvailableSpace = createVar()
+
+const ANIMATION_DURATION = 200 // in ms
+const ITEM_SENTIMENT = ['neutral', 'danger', 'primary'] as const
+
+function makeItemStyle(
+  sentiment: keyof typeof theme.colors,
+  disabled: boolean,
+) {
+  const color = theme.colors[sentiment] as typeof theme.colors.neutral
+
+  const base = {
+    color: color[disabled ? 'textDisabled' : 'text'],
+  }
+
+  if (!disabled) {
+    return {
+      ...base,
+      selectors: {
+        "&:hover, &:focus-visible, &[data-active='true']": {
+          backgroundColor: color.backgroundHover,
+          color: color.textHover,
+        },
+      },
+    }
+  }
+
+  return base
+}
+export const menu = recipe({
+  base: {
+    backgroundColor: theme.colors.other.elevation.background.raised,
+    boxShadow: `${theme.shadows.raised[0]}, ${theme.shadows.raised[1]}`,
+    padding: `${theme.space['0.25']} 0`,
+    minWidth: SIZES.small,
+    maxWidth: SIZES.large,
+  },
+  variants: {
+    arrow: {
+      true: {
+        selectors: {
+          '&::after': {
+            borderColor: `${theme.colors.other.elevation.background.raised} transparent transparent transparent`,
+          },
+        },
+      },
+    },
+    searchable: {
+      true: {
+        minWidth: '20rem',
+      },
+    },
+  },
+  defaultVariants: {
+    arrow: false,
+    searchable: false,
+  },
+})
+
+export const menuContent = style({ overflow: 'auto' })
+
+export const menuFooter = style({ padding: theme.space[1] })
+
+export const menuList = style({
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  maxHeight: `calc(min(${heightMenu}, ${heightAvailableSpace}) - ${theme.space['0.5']})`,
+  backgroundColor: theme.colors.other.elevation.background.raised,
+  color: theme.colors.neutral.text,
+  position: 'relative',
+  selectors: {
+    '&:after, &:before': {
+      border: 'solid transparent',
+      borderWidth: 9,
+      content: ' ',
+      height: 0,
+      width: 0,
+      position: 'absolute',
+      pointerEvents: 'none',
+    },
+  },
+})
+
+export const menuSearchInput = style({ padding: theme.space[1] })
+
+export const menuGroup = style({
+  padding: `${theme.space['0.5']} ${theme.space['1.5']}`,
+  textAlign: 'left',
+})
+
+export const menuItemContainer = recipe({
+  base: {
+    selectors: {
+      '&:last-child': {
+        border: 'none',
+      },
+    },
+    width: '100%',
+  },
+  variants: {
+    borderless: {
+      false: {
+        borderBottom: `1px solid ${theme.colors.neutral.border}`,
+        padding: `${theme.space['0.5']} ${theme.space['0.5']}`,
+      },
+      true: {
+        padding: `${theme.space['0.25']} ${theme.space['0.5']}`,
+      },
+    },
+  },
+  defaultVariants: {
+    borderless: false,
+  },
+})
+
+export const menuItem = recipe({
+  base: {
+    background: 'none',
+    textDecoration: 'none',
+    display: 'flex',
+    justifyContent: 'start',
+    textAlign: 'left',
+    alignItems: 'center',
+    minHeight: theme.sizing[400],
+    maxHeight: theme.sizing[500],
+    fontSize: theme.typography.bodySmall.fontSize,
+    lineHeight: theme.typography.bodySmall.lineHeight,
+    fontWeight: 'inherit',
+    padding: `${theme.space['0.5']} ${theme.space['1']}`,
+    border: 'none',
+    cursor: 'pointer',
+    minWidth: '6.875rem',
+    width: '100%',
+    borderRadius: theme.radii.default,
+    transition: `background-color ${ANIMATION_DURATION}ms, color ${ANIMATION_DURATION}ms`,
+    selectors: {
+      '&:focus': {
+        textDecoration: 'none',
+      },
+    },
+  },
+  variants: {
+    borderless: {
+      true: {},
+    },
+    disabled: {
+      true: {
+        cursor: 'not-allowed',
+      },
+    },
+    sentiment: Object.fromEntries(
+      ITEM_SENTIMENT.map(sentiment => [sentiment, {}]),
+    ),
+  },
+  compoundVariants: [
+    ...ITEM_SENTIMENT.map(sentiment => ({
+      variants: {
+        sentiment,
+        disabled: false,
+      },
+      style: makeItemStyle(sentiment, false),
+    })),
+    ...ITEM_SENTIMENT.map(sentiment => ({
+      variants: {
+        sentiment,
+        disabled: true,
+      },
+      style: makeItemStyle(sentiment, true),
+    })),
+  ],
+  defaultVariants: {
+    borderless: false,
+    disabled: false,
+    sentiment: 'neutral',
+  },
+})
+
+ITEM_SENTIMENT.map(sentiment =>
+  globalStyle(
+    `${menuItem({ borderless: false, disabled: false, sentiment })} > svg`,
+    {
+      fill: theme.colors[sentiment].text,
+    },
+  ),
+)
+
+ITEM_SENTIMENT.map(sentiment =>
+  globalStyle(
+    `${menuItem({ borderless: false, disabled: true, sentiment })} > svg`,
+    {
+      fill: theme.colors[sentiment].textDisabled,
+    },
+  ),
+)
+
+ITEM_SENTIMENT.map(sentiment =>
+  globalStyle(
+    `${menuItem({ borderless: false, disabled: false, sentiment })}:hover, ${menuItem({ borderless: false, disabled: false, sentiment })}:focus-visible, ${menuItem({ borderless: false, disabled: false, sentiment })}[data-active="true"] > svg, ${menuItem({ borderless: true, disabled: false, sentiment })}:hover, ${menuItem({ borderless: true, disabled: false, sentiment })}:focus-visible, ${menuItem({ borderless: true, disabled: false, sentiment })}[data-active="true"] > svg`,
+    {
+      fill: theme.colors[sentiment].textHover,
+    },
+  ),
+)
+
+ITEM_SENTIMENT.map(sentiment =>
+  globalStyle(
+    `${menuItem({ borderless: true, disabled: false, sentiment })} > svg`,
+    {
+      fill: theme.colors[sentiment].text,
+    },
+  ),
+)
+
+ITEM_SENTIMENT.map(sentiment =>
+  globalStyle(
+    `${menuItem({ borderless: true, disabled: true, sentiment })} > svg`,
+    {
+      fill: theme.colors[sentiment].textDisabled,
+    },
+  ),
+)
diff --git a/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap
index 05dc797cd7..ccfe9650fb 100644
--- a/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap
@@ -1853,136 +1853,33 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       </div>
     </div>
   </div>
-  .emotion-0 {
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  min-width: 11.25rem;
-  max-width: 23.75rem;
-  padding: 0.125rem 0;
-}
-
-.emotion-0[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-2 {
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: calc(min(30rem, -24px) - 0.25rem);
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-2:after,
-.emotion-2:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-2:after {
-  border-color: transparent;
-}
-
-.emotion-2:before {
-  border-color: transparent;
-}
-
-.emotion-4 {
-  overflow: auto;
-}
-
-.emotion-6 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-  width: 100%;
-}
-
-.emotion-6: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-visible,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus-visible svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
-}
-
-.emotion-9[aria-selected='true'] {
+  .emotion-0[aria-selected='true'] {
   color: #641cb3;
 }
 
 <div
-    class="emotion-0 emotion-1 styles__w40vpo4 null"
+    class="styles__gky3yh2 styles__w40vpo4 null"
     id="menu-test"
     role="dialog"
-    style="--ozfz3c0: -5px; --ozfz3c1: 0px; --ozfz3c2:  rotate(180deg); --ozfz3c4: translate3d(0px, 4px, 0); --ozfz3c5: 0ms; --ozfz3c6: translate3d(0px, 4px, 0); --ozfz3c7: 14.5rem; --ozfz3c3: 30rem; opacity: 1; animation: none;"
+    style="--ozfz3c0: -5px; --ozfz3c1: 0px; --ozfz3c2:  rotate(180deg); --ozfz3c4: translate3d(0px, 4px, 0); --ozfz3c5: 0ms; --ozfz3c6: translate3d(0px, 4px, 0); --ozfz3c7: 14.5rem; --ozfz3c3: fit-content; opacity: 1; animation: none;"
   >
     <div
       class="styles__w40vpo2 styles_hasMaxHeight_true__w40vpo3"
-      style="--ozfz3c3: 30rem;"
+      style="--ozfz3c3: fit-content;"
     >
       <div
-        class="emotion-2 emotion-3 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_justifyContent_normal_xxsmall__toi52u5d"
+        class="styles__gky3yh7 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_justifyContent_normal_xxsmall__toi52u5d"
         role="menu"
+        style="--gky3yh0: 30rem; --gky3yh1: -24px;"
       >
         <div
-          class="emotion-4 emotion-5 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_justifyContent_normal_xxsmall__toi52u5d"
+          class="styles__gky3yh5 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_justifyContent_normal_xxsmall__toi52u5d"
         >
           <div
-            class="emotion-6 emotion-7"
+            class="styles__gky3yha styles_borderless_false__gky3yhb"
           >
             <button
-              class="emotion-8 emotion-9 emotion-10"
+              class="emotion-0 emotion-1 styles__gky3yhd styles_sentiment_neutral__gky3yhg styles_undefined_compound_0__gky3yhj"
               data-active="false"
               data-is-disclosure="false"
               data-is-menu-item="true"
@@ -1993,10 +1890,10 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             </button>
           </div>
           <div
-            class="emotion-6 emotion-7"
+            class="styles__gky3yha styles_borderless_false__gky3yhb"
           >
             <button
-              class="emotion-8 emotion-9 emotion-10"
+              class="emotion-0 emotion-1 styles__gky3yhd styles_sentiment_neutral__gky3yhg styles_undefined_compound_0__gky3yhj"
               data-active="false"
               data-is-disclosure="false"
               data-is-menu-item="true"
@@ -2011,52 +1908,6 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
     </div>
   </div>
   .emotion-0 {
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  min-width: 11.25rem;
-  max-width: 23.75rem;
-  padding: 0.125rem 0;
-}
-
-.emotion-0[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-2 {
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: calc(min(30rem, -24px) - 0.25rem);
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-2:after,
-.emotion-2:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-2:after {
-  border-color: transparent;
-}
-
-.emotion-2:before {
-  border-color: transparent;
-}
-
-.emotion-4 {
-  overflow: auto;
-}
-
-.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2066,7 +1917,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
   flex-direction: column;
 }
 
-.emotion-6 .emotion-9 {
+.emotion-0 .emotion-3 {
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: inherit;
@@ -2078,14 +1929,14 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
   background-color: transparent;
 }
 
-.emotion-6 .emotion-9[aria-disabled='true'],
-.emotion-6 .emotion-9:disabled {
+.emotion-0 .emotion-3[aria-disabled='true'],
+.emotion-0 .emotion-3:disabled {
   cursor: not-allowed;
   -webkit-filter: grayscale(1) opacity(50%);
   filter: grayscale(1) opacity(50%);
 }
 
-.emotion-8 {
+.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2127,62 +1978,62 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
   line-height: 1.5rem;
 }
 
-.emotion-8:hover,
-.emotion-8:active,
-.emotion-8:focus {
+.emotion-2:hover,
+.emotion-2:active,
+.emotion-2:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   outline: none;
 }
 
-.emotion-8:focus-visible {
+.emotion-2:focus-visible {
   outline: auto;
 }
 
-.emotion-8[aria-selected='true'] {
+.emotion-2[aria-selected='true'] {
   color: #641cb3;
   border-bottom-color: #8c40ef;
 }
 
-.emotion-8[aria-selected='true'] .e1hzf7cr3 {
+.emotion-2[aria-selected='true'] .e1hzf7cr3 {
   color: #641cb3;
 }
 
-.emotion-8[aria-disabled='false']:not(:disabled):hover,
-.emotion-8[aria-disabled='false']:not(:disabled):focus,
-.emotion-8[aria-disabled='false']:not(:disabled):active {
+.emotion-2[aria-disabled='false']:not(:disabled):hover,
+.emotion-2[aria-disabled='false']:not(:disabled):focus,
+.emotion-2[aria-disabled='false']:not(:disabled):active {
   outline: none;
   color: #641cb3;
   border-bottom-color: #8c40ef;
 }
 
-.emotion-8[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .emotion-11,
-.emotion-8[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .emotion-11,
-.emotion-8[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .emotion-11 {
+.emotion-2[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .emotion-5,
+.emotion-2[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .emotion-5,
+.emotion-2[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .emotion-5 {
   background-color: #f1eefc;
   border-color: #f1eefc;
   color: #641cb3;
 }
 
-.emotion-8[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .e1hzf7cr3,
-.emotion-8[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .e1hzf7cr3,
-.emotion-8[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .e1hzf7cr3 {
+.emotion-2[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .e1hzf7cr3,
+.emotion-2[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .e1hzf7cr3,
+.emotion-2[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .e1hzf7cr3 {
   color: #641cb3;
 }
 
-.emotion-8[aria-disabled='true'],
-.emotion-8:disabled {
+.emotion-2[aria-disabled='true'],
+.emotion-2:disabled {
   cursor: not-allowed;
   -webkit-filter: grayscale(1) opacity(50%);
   filter: grayscale(1) opacity(50%);
 }
 
-.emotion-10 {
+.emotion-4 {
   padding: 0 0.5rem;
   margin-left: 0.5rem;
 }
 
-.emotion-28 {
+.emotion-22 {
   margin-left: 0.5rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2190,7 +2041,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
   display: flex;
 }
 
-.emotion-56 {
+.emotion-50 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2202,7 +2053,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
   right: 0;
 }
 
-.emotion-58 {
+.emotion-52 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2244,64 +2095,64 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
   line-height: 1.5rem;
 }
 
-.emotion-58:hover,
-.emotion-58:active,
-.emotion-58:focus {
+.emotion-52:hover,
+.emotion-52:active,
+.emotion-52:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   outline: none;
 }
 
-.emotion-58:focus-visible {
+.emotion-52:focus-visible {
   outline: auto;
 }
 
-.emotion-58[aria-selected='true'] {
+.emotion-52[aria-selected='true'] {
   color: #641cb3;
   border-bottom-color: #8c40ef;
 }
 
-.emotion-58[aria-selected='true'] .e1hzf7cr3 {
+.emotion-52[aria-selected='true'] .e1hzf7cr3 {
   color: #641cb3;
 }
 
-.emotion-58[aria-disabled='false']:not(:disabled):hover,
-.emotion-58[aria-disabled='false']:not(:disabled):focus,
-.emotion-58[aria-disabled='false']:not(:disabled):active {
+.emotion-52[aria-disabled='false']:not(:disabled):hover,
+.emotion-52[aria-disabled='false']:not(:disabled):focus,
+.emotion-52[aria-disabled='false']:not(:disabled):active {
   outline: none;
   color: #641cb3;
   border-bottom-color: #8c40ef;
 }
 
-.emotion-58[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .emotion-11,
-.emotion-58[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .emotion-11,
-.emotion-58[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .emotion-11 {
+.emotion-52[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .emotion-5,
+.emotion-52[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .emotion-5,
+.emotion-52[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .emotion-5 {
   background-color: #f1eefc;
   border-color: #f1eefc;
   color: #641cb3;
 }
 
-.emotion-58[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .e1hzf7cr3,
-.emotion-58[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .e1hzf7cr3,
-.emotion-58[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .e1hzf7cr3 {
+.emotion-52[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .e1hzf7cr3,
+.emotion-52[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .e1hzf7cr3,
+.emotion-52[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .e1hzf7cr3 {
   color: #641cb3;
 }
 
-.emotion-58[aria-disabled='true'],
-.emotion-58:disabled {
+.emotion-52[aria-disabled='true'],
+.emotion-52:disabled {
   cursor: not-allowed;
   -webkit-filter: grayscale(1) opacity(50%);
   filter: grayscale(1) opacity(50%);
 }
 
-.emotion-58 .emotion-61 {
+.emotion-52 .emotion-55 {
   color: inherit;
   margin-left: 0.5rem;
   -webkit-transition: 300ms -webkit-transform ease-out;
   transition: 300ms transform ease-out;
 }
 
-.emotion-58[aria-expanded='true'] .emotion-61 {
+.emotion-52[aria-expanded='true'] .emotion-55 {
   -webkit-transform: rotate(-180deg);
   -moz-transform: rotate(-180deg);
   -ms-transform: rotate(-180deg);
@@ -2309,29 +2160,30 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
 }
 
 <div
-    class="emotion-0 emotion-1 styles__w40vpo4 null"
+    class="styles__gky3yh2 styles__w40vpo4 null"
     id="menu-«ro»"
     role="dialog"
-    style="--ozfz3c0: -5px; --ozfz3c1: 0px; --ozfz3c2:  rotate(180deg); --ozfz3c4: translate3d(0px, 4px, 0); --ozfz3c5: 0ms; --ozfz3c6: translate3d(0px, 4px, 0); --ozfz3c7: 14.5rem; --ozfz3c3: 30rem; opacity: 1; animation: none;"
+    style="--ozfz3c0: -5px; --ozfz3c1: 0px; --ozfz3c2:  rotate(180deg); --ozfz3c4: translate3d(0px, 4px, 0); --ozfz3c5: 0ms; --ozfz3c6: translate3d(0px, 4px, 0); --ozfz3c7: 14.5rem; --ozfz3c3: fit-content; opacity: 1; animation: none;"
   >
     <div
       class="styles__w40vpo2 styles_hasMaxHeight_true__w40vpo3"
-      style="--ozfz3c3: 30rem;"
+      style="--ozfz3c3: fit-content;"
     >
       <div
-        class="emotion-2 emotion-3 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_justifyContent_normal_xxsmall__toi52u5d"
+        class="styles__gky3yh7 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_justifyContent_normal_xxsmall__toi52u5d"
         role="menu"
+        style="--gky3yh0: 30rem; --gky3yh1: -24px;"
       >
         <div
-          class="emotion-4 emotion-5 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_justifyContent_normal_xxsmall__toi52u5d"
+          class="styles__gky3yh5 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_justifyContent_normal_xxsmall__toi52u5d"
         >
           <div
-            class="emotion-6 emotion-7"
+            class="emotion-0 emotion-1"
           >
             <button
               aria-disabled="false"
               aria-selected="true"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="true"
               role="tab"
               type="button"
@@ -2344,7 +2196,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
                 >
                   First
                   <span
-                    class="emotion-10 emotion-11 styles__1yf71jy0 styles_size_medium__1yf71jy2 styles_prominence_strong__1yf71jye styles_sentiment_primary__1yf71jy4 styles_undefined_compound_7__1yf71jyn style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
+                    class="emotion-4 emotion-5 styles__1yf71jy0 styles_size_medium__1yf71jy2 styles_prominence_strong__1yf71jye styles_sentiment_primary__1yf71jy4 styles_undefined_compound_7__1yf71jyn style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
                     style="--qabug41: nowrap;"
                   >
                     2
@@ -2356,7 +2208,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
               aria-disabled="false"
               aria-label="1"
               aria-selected="false"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2374,7 +2226,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2392,7 +2244,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2405,7 +2257,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
                 >
                   Counter
                   <span
-                    class="emotion-10 emotion-11 styles__1yf71jy0 styles_size_medium__1yf71jy2 styles_prominence_default__1yf71jyd styles_sentiment_neutral__1yf71jya styles_undefined_compound_6__1yf71jym style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
+                    class="emotion-4 emotion-5 styles__1yf71jy0 styles_size_medium__1yf71jy2 styles_prominence_default__1yf71jyd styles_sentiment_neutral__1yf71jya styles_undefined_compound_6__1yf71jym style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
                     style="--qabug41: nowrap;"
                   >
                     12
@@ -2417,7 +2269,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
               aria-disabled="false"
               aria-label="2"
               aria-selected="false"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2430,7 +2282,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
                 >
                   Counter no items
                   <span
-                    class="emotion-10 emotion-11 styles__1yf71jy0 styles_size_medium__1yf71jy2 styles_prominence_default__1yf71jyd styles_sentiment_neutral__1yf71jya styles_undefined_compound_6__1yf71jym style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
+                    class="emotion-4 emotion-5 styles__1yf71jy0 styles_size_medium__1yf71jy2 styles_prominence_default__1yf71jyd styles_sentiment_neutral__1yf71jya styles_undefined_compound_6__1yf71jym style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
                     style="--qabug41: nowrap;"
                   >
                     0
@@ -2441,7 +2293,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2454,13 +2306,13 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
                 >
                   Conter and badge
                   <span
-                    class="emotion-10 emotion-11 styles__1yf71jy0 styles_size_medium__1yf71jy2 styles_prominence_default__1yf71jyd styles_sentiment_neutral__1yf71jya styles_undefined_compound_6__1yf71jym style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
+                    class="emotion-4 emotion-5 styles__1yf71jy0 styles_size_medium__1yf71jy2 styles_prominence_default__1yf71jyd styles_sentiment_neutral__1yf71jya styles_undefined_compound_6__1yf71jym style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
                     style="--qabug41: nowrap;"
                   >
                     12
                   </span>
                   <span
-                    class="emotion-28 emotion-29"
+                    class="emotion-22 emotion-23"
                   >
                     Badge
                   </span>
@@ -2470,7 +2322,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2483,7 +2335,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
                 >
                   Badge
                   <span
-                    class="emotion-28 emotion-29"
+                    class="emotion-22 emotion-23"
                   >
                     Badge
                   </span>
@@ -2493,7 +2345,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2511,7 +2363,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2529,7 +2381,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2547,7 +2399,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2565,7 +2417,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2583,7 +2435,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2601,7 +2453,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2619,7 +2471,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2637,7 +2489,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2655,7 +2507,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2673,7 +2525,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-8 emotion-9"
+              class="emotion-2 emotion-3"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2689,7 +2541,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
               </div>
             </button>
             <div
-              class="emotion-56 emotion-57"
+              class="emotion-50 emotion-51"
             >
               <div
                 aria-controls="menu-test"
@@ -2701,13 +2553,13 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
                   aria-disabled="false"
                   aria-expanded="true"
                   aria-haspopup="dialog"
-                  class="emotion-58 emotion-59"
+                  class="emotion-52 emotion-53"
                   role="tab"
                   type="button"
                 >
                   Blabla
                   <svg
-                    class="emotion-60 emotion-61 styles__vbm0wq0 styles_prominence_default__vbm0wqg styles_disabled_false__vbm0wqf styles_size_small__vbm0wqa styles_undefined_compound_39__vbm0wq1n"
+                    class="emotion-54 emotion-55 styles__vbm0wq0 styles_prominence_default__vbm0wqg styles_disabled_false__vbm0wqf styles_size_small__vbm0wqa styles_undefined_compound_39__vbm0wq1n"
                     viewBox="0 0 16 16"
                   >
                     <path
@@ -2724,136 +2576,33 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       </div>
     </div>
   </div>
-  .emotion-0 {
-  background-color: #ffffff;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-  padding: 0;
-  min-width: 11.25rem;
-  max-width: 23.75rem;
-  padding: 0.125rem 0;
-}
-
-.emotion-0[data-has-arrow='true']::after {
-  border-color: #ffffff transparent transparent transparent;
-}
-
-.emotion-2 {
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: calc(min(30rem, -24px) - 0.25rem);
-  background-color: #ffffff;
-  color: #3f4250;
-  border-radius: 0.25rem;
-  position: relative;
-}
-
-.emotion-2:after,
-.emotion-2:before {
-  border: solid transparent;
-  border-width: 9px;
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.emotion-2:after {
-  border-color: transparent;
-}
-
-.emotion-2:before {
-  border-color: transparent;
-}
-
-.emotion-4 {
-  overflow: auto;
-}
-
-.emotion-6 {
-  border-bottom: 1px solid #d9dadd;
-  padding: 0.25rem 0.25rem;
-  width: 100%;
-}
-
-.emotion-6: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-visible,
-.emotion-9[data-active='true'] {
-  background-color: #e9eaeb;
-  color: #222638;
-}
-
-.emotion-9:hover svg,
-.emotion-9:focus-visible svg,
-.emotion-9[data-active='true'] svg {
-  fill: #222638;
-}
-
-.emotion-9[aria-selected='true'] {
+  .emotion-0[aria-selected='true'] {
   color: #641cb3;
 }
 
 <div
-    class="emotion-0 emotion-1 styles__w40vpo4 null"
+    class="styles__gky3yh2 styles__w40vpo4 null"
     id="menu-test"
     role="dialog"
-    style="--ozfz3c0: 0px; --ozfz3c1: -5px; --ozfz3c2: translate(50%, -50%) rotate(90deg); --ozfz3c4: translate3d(8px, 0px, 0); --ozfz3c5: 0ms; --ozfz3c6: translate3d(8px, 0px, 0); --ozfz3c7: 14.5rem; --ozfz3c3: 30rem; opacity: 1; animation: none;"
+    style="--ozfz3c0: 0px; --ozfz3c1: -5px; --ozfz3c2: translate(50%, -50%) rotate(90deg); --ozfz3c4: translate3d(8px, 0px, 0); --ozfz3c5: 0ms; --ozfz3c6: translate3d(8px, 0px, 0); --ozfz3c7: 14.5rem; --ozfz3c3: fit-content; opacity: 1; animation: none;"
   >
     <div
       class="styles__w40vpo2 styles_hasMaxHeight_true__w40vpo3"
-      style="--ozfz3c3: 30rem;"
+      style="--ozfz3c3: fit-content;"
     >
       <div
-        class="emotion-2 emotion-3 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_justifyContent_normal_xxsmall__toi52u5d"
+        class="styles__gky3yh7 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_justifyContent_normal_xxsmall__toi52u5d"
         role="menu"
+        style="--gky3yh0: 30rem; --gky3yh1: -24px;"
       >
         <div
-          class="emotion-4 emotion-5 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_justifyContent_normal_xxsmall__toi52u5d"
+          class="styles__gky3yh5 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_column_xxsmall__toi52u2d styles_flexWrap_nowrap_xxsmall__toi52u7d styles_justifyContent_normal_xxsmall__toi52u5d"
         >
           <div
-            class="emotion-6 emotion-7"
+            class="styles__gky3yha styles_borderless_false__gky3yhb"
           >
             <button
-              class="emotion-8 emotion-9 emotion-10"
+              class="emotion-0 emotion-1 styles__gky3yhd styles_sentiment_neutral__gky3yhg styles_undefined_compound_0__gky3yhj"
               data-active="false"
               data-is-disclosure="false"
               data-is-menu-item="true"
@@ -2864,10 +2613,10 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             </button>
           </div>
           <div
-            class="emotion-6 emotion-7"
+            class="styles__gky3yha styles_borderless_false__gky3yhb"
           >
             <button
-              class="emotion-8 emotion-9 emotion-10"
+              class="emotion-0 emotion-1 styles__gky3yhd styles_sentiment_neutral__gky3yhg styles_undefined_compound_0__gky3yhj"
               data-active="false"
               data-is-disclosure="false"
               data-is-menu-item="true"