From 45ae12139859f1c8c81a77fc0f514e79a92358f1 Mon Sep 17 00:00:00 2001
From: lisa <llupi@scaleway.com>
Date: Wed, 22 Oct 2025 11:17:43 +0200
Subject: [PATCH] refactor: tabs vanilla extract

---
 .changeset/lovely-flies-flash.md              |    5 +
 packages/ui/src/components/Tabs/Tab.tsx       |  123 +-
 packages/ui/src/components/Tabs/TabMenu.tsx   |   37 +-
 .../ui/src/components/Tabs/TabMenuItem.tsx    |   15 +-
 .../__tests__/__snapshots__/Tab.test.tsx.snap |  309 +--
 .../__snapshots__/index.test.tsx.snap         | 1827 +----------------
 packages/ui/src/components/Tabs/index.tsx     |   77 +-
 packages/ui/src/components/Tabs/styles.css.ts |  157 ++
 8 files changed, 314 insertions(+), 2236 deletions(-)
 create mode 100644 .changeset/lovely-flies-flash.md
 create mode 100644 packages/ui/src/components/Tabs/styles.css.ts

diff --git a/.changeset/lovely-flies-flash.md b/.changeset/lovely-flies-flash.md
new file mode 100644
index 0000000000..2804c853b9
--- /dev/null
+++ b/.changeset/lovely-flies-flash.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Refactor component `Tabs` to use vanilla extract instead of Emotion
diff --git a/packages/ui/src/components/Tabs/Tab.tsx b/packages/ui/src/components/Tabs/Tab.tsx
index 521b8363d6..1d2ab16e29 100644
--- a/packages/ui/src/components/Tabs/Tab.tsx
+++ b/packages/ui/src/components/Tabs/Tab.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import styled from '@emotion/styled'
 import type {
   ComponentProps,
   ElementType,
@@ -15,96 +14,14 @@ import { Badge } from '../Badge'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
 import { Tooltip } from '../Tooltip'
+import {
+  tabsBadge,
+  tabsBadgeContainer,
+  tabsButton,
+  tabsTextSelected,
+} from './styles.css'
 import { useTabsContext } from './TabsContext'
 
-const StyledBadge = styled(Badge)`
-  padding: 0 ${({ theme }) => theme.space['1']};
-  margin-left: ${({ theme }) => theme.space['1']};
-`
-
-const StyledText = styled(Text)``
-
-const StyledTooltip = styled(Tooltip)``
-
-const BadgeContainer = styled.span`
-  margin-left: ${({ theme }) => theme.space['1']};
-  display: flex;
-`
-
-export const StyledTabButton = styled('button')`
-  display: flex;
-  flex-direction: row;
-  padding: ${({ theme }) => `${theme.space['1']} ${theme.space['2']}`};
-  cursor: pointer;
-  justify-content: center;
-  align-items: baseline;
-  white-space: nowrap;
-  color: ${({ theme }) => theme.colors.neutral.text};
-  text-decoration: none;
-  user-select: none;
-  touch-action: manipulation;
-  transition: color 0.2s;
-  border: none;
-  background: none;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: ${({ theme }) => theme.colors.neutral.border};
-  outline: none;
-
-  font-size: ${({ theme }) => theme.typography.bodyStrong.fontSize};
-  font-family: ${({ theme }) => theme.typography.bodyStrong.fontFamily};
-  font-weight: ${({ theme }) => theme.typography.bodyStrong.weight};
-  letter-spacing: ${({ theme }) => theme.typography.bodyStrong.letterSpacing};
-  line-height: ${({ theme }) => theme.typography.bodyStrong.lineHeight};
-
-  &:hover,
-  &:active,
-  &:focus {
-    text-decoration: none;
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: auto;
-  }
-
-  &[aria-selected='true'] {
-    color: ${({ theme }) => theme.colors.primary.text};
-    border-bottom-color: ${({ theme }) => theme.colors.primary.border};
-
-    ${StyledText} {
-      color: ${({ theme }) => theme.colors.primary.text};
-    }
-  }
-
-  &[aria-disabled='false']:not(:disabled) {
-    &:hover,
-    &:focus,
-    &:active {
-      outline: none;
-      color: ${({ theme }) => theme.colors.primary.text};
-      border-bottom-color: ${({ theme }) => theme.colors.primary.border};
-
-      &[data-is-selected='false'] {
-        ${StyledBadge} {
-          background-color: ${({ theme }) => theme.colors.primary.background};
-          border-color: ${({ theme }) => theme.colors.primary.background};
-          color: ${({ theme }) => theme.colors.primary.text};
-        }
-        ${StyledText} {
-          color: ${({ theme }) => theme.colors.primary.text};
-        }
-      }
-    }
-  }
-
-  &[aria-disabled='true'],
-  &:disabled {
-    cursor: not-allowed;
-    filter: grayscale(1) opacity(50%);
-  }
-`
-
 type TabProps<T extends ElementType = 'button'> = {
   as?: T
   badge?: ReactNode
@@ -150,19 +67,19 @@ export const Tab = forwardRef(
   ) => {
     const { selected, onChange } = useTabsContext()
     const computedAs = as ?? 'button'
+    const ComputedComponent = as ?? 'button'
     const isSelected = useMemo(
       () => value !== undefined && selected === value,
       [value, selected],
     )
 
     return (
-      <StyledTooltip text={tooltip}>
-        <StyledTabButton
+      <Tooltip text={tooltip}>
+        <ComputedComponent
           aria-disabled={disabled}
           aria-label={value ? `${value}` : undefined}
           aria-selected={isSelected}
-          as={computedAs}
-          className={className}
+          className={`${className ? `${className} ` : ''}${tabsButton}`}
           data-is-selected={isSelected}
           disabled={computedAs === 'button' ? disabled : undefined}
           onClick={event => {
@@ -186,31 +103,37 @@ export const Tab = forwardRef(
             <Stack alignItems="center" direction="row">
               {children}
               {typeof counter === 'number' || typeof counter === 'string' ? (
-                <StyledBadge
+                <Badge
+                  className={tabsBadge}
                   prominence={isSelected ? 'strong' : 'default'}
                   sentiment={isSelected ? 'primary' : 'neutral'}
                   size="medium"
                 >
                   {counter}
-                </StyledBadge>
+                </Badge>
+              ) : null}
+              {badge ? (
+                <span className={tabsBadgeContainer}>{badge}</span>
               ) : null}
-              {badge ? <BadgeContainer>{badge}</BadgeContainer> : null}
             </Stack>
             {subtitle ? (
               <Stack direction="row">
-                <StyledText
+                <Text
                   as="span"
+                  className={
+                    tabsTextSelected[isSelected ? 'selected' : 'default']
+                  }
                   prominence="weak"
                   sentiment="neutral"
                   variant="bodySmall"
                 >
                   {subtitle}
-                </StyledText>
+                </Text>
               </Stack>
             ) : null}
           </Stack>
-        </StyledTabButton>
-      </StyledTooltip>
+        </ComputedComponent>
+      </Tooltip>
     )
   },
 )
diff --git a/packages/ui/src/components/Tabs/TabMenu.tsx b/packages/ui/src/components/Tabs/TabMenu.tsx
index f7fa7e8d79..44a42676be 100644
--- a/packages/ui/src/components/Tabs/TabMenu.tsx
+++ b/packages/ui/src/components/Tabs/TabMenu.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import styled from '@emotion/styled'
 import { ArrowDownIcon } from '@ultraviolet/icons'
 import type {
   ButtonHTMLAttributes,
@@ -10,29 +9,7 @@ import type {
 } from 'react'
 import { forwardRef } from 'react'
 import { Menu } from '../Menu'
-import { StyledTabButton } from './Tab'
-
-const ArrowIcon = styled(ArrowDownIcon)``
-const StyledMenu = styled(StyledTabButton)`
-  ${ArrowIcon} {
-    color: inherit;
-    margin-left: ${({ theme }) => theme.space['1']};
-    transition: 300ms transform ease-out;
-  }
-
-  &[aria-expanded='true'] ${ArrowIcon} {
-    transform: rotate(-180deg);
-  }
-`
-
-// This will wrap and give the positioning to the popup div that is added onto the disclosure
-const StyledPositioningWrapper = styled.div`
-  display: flex;
-  position: sticky;
-  top: 0;
-  bottom: 0;
-  right: 0;
-`
+import { tabsArrowIcon, tabsButton, tabsMenuWrapper } from './styles.css'
 
 type TabMenuProps = {
   children: ReactNode
@@ -55,22 +32,22 @@ export const TabMenu = forwardRef(
     }: TabMenuProps,
     ref: Ref<HTMLButtonElement>,
   ) => (
-    <StyledPositioningWrapper>
+    <div className={tabsMenuWrapper}>
       <Menu
         disclosure={
-          <StyledMenu
+          <button
             aria-disabled={disabled ?? 'false'}
             aria-haspopup="menu"
             aria-selected={ariaSelected}
-            className={className}
+            className={`${className ? `${className} ` : ''}${tabsButton}`}
             disabled={disabled}
             role="tab"
             type="button"
             {...props}
           >
             {disclosure}
-            <ArrowIcon />
-          </StyledMenu>
+            <ArrowDownIcon className={tabsArrowIcon} />
+          </button>
         }
         id={id}
         portalTarget={document.body}
@@ -79,6 +56,6 @@ export const TabMenu = forwardRef(
       >
         {children}
       </Menu>
-    </StyledPositioningWrapper>
+    </div>
   ),
 )
diff --git a/packages/ui/src/components/Tabs/TabMenuItem.tsx b/packages/ui/src/components/Tabs/TabMenuItem.tsx
index 943b8a28d7..12004db0d3 100644
--- a/packages/ui/src/components/Tabs/TabMenuItem.tsx
+++ b/packages/ui/src/components/Tabs/TabMenuItem.tsx
@@ -1,20 +1,14 @@
 'use client'
 
-import styled from '@emotion/styled'
 import type { ComponentProps } from 'react'
 import { useMemo } from 'react'
 import { Menu } from '../Menu'
+import { tabsTextSelected } from './styles.css'
 import { useTabsContext } from './TabsContext'
 
-const StyledMenuItem = styled(Menu.Item)`
-  &[aria-selected='true'] {
-    color: ${({ theme }) => theme.colors.primary.text};
-  }
-`
-
 type TabMenuItemProps = {
   value?: string | number
-} & ComponentProps<typeof StyledMenuItem>
+} & ComponentProps<typeof Menu.Item>
 
 export const TabMenuItem = ({
   value,
@@ -30,8 +24,9 @@ export const TabMenuItem = ({
   )
 
   return (
-    <StyledMenuItem
+    <Menu.Item
       aria-selected={isSelected}
+      className={tabsTextSelected[isSelected ? 'selected' : 'default']}
       onClick={event => {
         if (value !== undefined) {
           onChange(value)
@@ -41,6 +36,6 @@ export const TabMenuItem = ({
       {...props}
     >
       {children}
-    </StyledMenuItem>
+    </Menu.Item>
   )
 }
diff --git a/packages/ui/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap b/packages/ui/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap
index e419384cda..18e3224a57 100644
--- a/packages/ui/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap
+++ b/packages/ui/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap
@@ -2,105 +2,13 @@
 
 exports[`tab > renders correctly 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  white-space: nowrap;
-  color: #3f4250;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  border: none;
-  background: none;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: #d9dadd;
-  outline: none;
-  font-size: 1rem;
-  font-family: Inter,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.5rem;
-}
-
-.emotion-0:hover,
-.emotion-0:active,
-.emotion-0:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none;
-}
-
-.emotion-0:focus-visible {
-  outline: auto;
-}
-
-.emotion-0[aria-selected='true'] {
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-0[aria-selected='true'] .e1hzf7cr3 {
-  color: #641cb3;
-}
-
-.emotion-0[aria-disabled='false']:not(:disabled):hover,
-.emotion-0[aria-disabled='false']:not(:disabled):focus,
-.emotion-0[aria-disabled='false']:not(:disabled):active {
-  outline: none;
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-0[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .e1hzf7cr4,
-.emotion-0[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .e1hzf7cr4,
-.emotion-0[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .e1hzf7cr4 {
-  background-color: #f1eefc;
-  border-color: #f1eefc;
-  color: #641cb3;
-}
-
-.emotion-0[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .e1hzf7cr3,
-.emotion-0[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .e1hzf7cr3,
-.emotion-0[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .e1hzf7cr3 {
-  color: #641cb3;
-}
-
-.emotion-0[aria-disabled='true'],
-.emotion-0:disabled {
-  cursor: not-allowed;
-  -webkit-filter: grayscale(1) opacity(50%);
-  filter: grayscale(1) opacity(50%);
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <button
       aria-disabled="false"
       aria-selected="false"
-      class="emotion-0 emotion-1"
+      class="styles__1xz9hlg7"
       data-is-selected="false"
       role="tab"
       type="button"
@@ -119,118 +27,13 @@ exports[`tab > renders correctly 1`] = `
 
 exports[`tab > renders correctly with counter, badge and subtitle 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  white-space: nowrap;
-  color: #3f4250;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  border: none;
-  background: none;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: #d9dadd;
-  outline: none;
-  font-size: 1rem;
-  font-family: Inter,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.5rem;
-}
-
-.emotion-0:hover,
-.emotion-0:active,
-.emotion-0:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none;
-}
-
-.emotion-0:focus-visible {
-  outline: auto;
-}
-
-.emotion-0[aria-selected='true'] {
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-0[aria-selected='true'] .emotion-7 {
-  color: #641cb3;
-}
-
-.emotion-0[aria-disabled='false']:not(:disabled):hover,
-.emotion-0[aria-disabled='false']:not(:disabled):focus,
-.emotion-0[aria-disabled='false']:not(:disabled):active {
-  outline: none;
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-0[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .emotion-3,
-.emotion-0[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .emotion-3,
-.emotion-0[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .emotion-3 {
-  background-color: #f1eefc;
-  border-color: #f1eefc;
-  color: #641cb3;
-}
-
-.emotion-0[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .emotion-7,
-.emotion-0[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .emotion-7,
-.emotion-0[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .emotion-7 {
-  color: #641cb3;
-}
-
-.emotion-0[aria-disabled='true'],
-.emotion-0:disabled {
-  cursor: not-allowed;
-  -webkit-filter: grayscale(1) opacity(50%);
-  filter: grayscale(1) opacity(50%);
-}
-
-.emotion-2 {
-  padding: 0 0.5rem;
-  margin-left: 0.5rem;
-}
-
-.emotion-4 {
-  margin-left: 0.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <button
       aria-disabled="false"
       aria-selected="false"
-      class="emotion-0 emotion-1"
+      class="styles__1xz9hlg7"
       data-is-selected="false"
       role="tab"
       type="button"
@@ -242,13 +45,13 @@ exports[`tab > renders correctly with counter, badge and subtitle 1`] = `
           class="styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_justifyContent_normal_xxsmall__toi52u5d"
         >
           <span
-            class="emotion-2 emotion-3 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="styles__1xz9hlg3 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;"
           >
             1
           </span>
           <span
-            class="emotion-4 emotion-5"
+            class="styles__1xz9hlg6"
           >
             badge
           </span>
@@ -257,7 +60,7 @@ exports[`tab > renders correctly with counter, badge and subtitle 1`] = `
           class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_justifyContent_normal_xxsmall__toi52u5d"
         >
           <span
-            class="emotion-6 emotion-7 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_weak__m4c9owl style_variant_bodySmall__m4c9own style_disabled_false__m4c9ow1b style_undefined_compound_27__m4c9ow23 style_undefined_compound_75__m4c9ow3f"
+            class="styles_default__1xz9hlg5 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_weak__m4c9owl style_variant_bodySmall__m4c9own style_disabled_false__m4c9ow1b style_undefined_compound_27__m4c9ow23 style_undefined_compound_75__m4c9ow3f"
           >
             subtitle
           </span>
@@ -270,105 +73,13 @@ exports[`tab > renders correctly with counter, badge and subtitle 1`] = `
 
 exports[`tab > renders correctly with subtitle 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  white-space: nowrap;
-  color: #3f4250;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  border: none;
-  background: none;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: #d9dadd;
-  outline: none;
-  font-size: 1rem;
-  font-family: Inter,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.5rem;
-}
-
-.emotion-0:hover,
-.emotion-0:active,
-.emotion-0:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none;
-}
-
-.emotion-0:focus-visible {
-  outline: auto;
-}
-
-.emotion-0[aria-selected='true'] {
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-0[aria-selected='true'] .emotion-3 {
-  color: #641cb3;
-}
-
-.emotion-0[aria-disabled='false']:not(:disabled):hover,
-.emotion-0[aria-disabled='false']:not(:disabled):focus,
-.emotion-0[aria-disabled='false']:not(:disabled):active {
-  outline: none;
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-0[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .e1hzf7cr4,
-.emotion-0[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .e1hzf7cr4,
-.emotion-0[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .e1hzf7cr4 {
-  background-color: #f1eefc;
-  border-color: #f1eefc;
-  color: #641cb3;
-}
-
-.emotion-0[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .emotion-3,
-.emotion-0[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .emotion-3,
-.emotion-0[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .emotion-3 {
-  color: #641cb3;
-}
-
-.emotion-0[aria-disabled='true'],
-.emotion-0:disabled {
-  cursor: not-allowed;
-  -webkit-filter: grayscale(1) opacity(50%);
-  filter: grayscale(1) opacity(50%);
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <button
       aria-disabled="false"
       aria-selected="false"
-      class="emotion-0 emotion-1"
+      class="styles__1xz9hlg7"
       data-is-selected="false"
       role="tab"
       type="button"
@@ -383,7 +94,7 @@ exports[`tab > renders correctly with subtitle 1`] = `
           class="styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_justifyContent_normal_xxsmall__toi52u5d"
         >
           <span
-            class="emotion-2 emotion-3 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_weak__m4c9owl style_variant_bodySmall__m4c9own style_disabled_false__m4c9ow1b style_undefined_compound_27__m4c9ow23 style_undefined_compound_75__m4c9ow3f"
+            class="styles_default__1xz9hlg5 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_weak__m4c9owl style_variant_bodySmall__m4c9own style_disabled_false__m4c9ow1b style_undefined_compound_27__m4c9ow23 style_undefined_compound_75__m4c9ow3f"
           >
             test
           </span>
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 4a32f62b42..83bd8980e5 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
@@ -2,42 +2,11 @@
 
 exports[`tabs > renders correctly 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
-  position: relative;
-  z-index: 0;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.emotion-0::after {
-  z-index: -1;
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: #d9dadd;
-}
-
-.emotion-0::-webkit-scrollbar {
-  display: none;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="styles__1xz9hlg2"
       role="tablist"
     />
   </div>
@@ -46,263 +15,17 @@ exports[`tabs > renders correctly 1`] = `
 
 exports[`tabs > renders correctly with Tabs and last disabled 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
-  position: relative;
-  z-index: 0;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.emotion-0::after {
-  z-index: -1;
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: #d9dadd;
-}
-
-.emotion-0::-webkit-scrollbar {
-  display: none;
-}
-
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
-  position: relative;
-  z-index: 0;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.emotion-0::after {
-  z-index: -1;
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: #d9dadd;
-}
-
-.emotion-0::-webkit-scrollbar {
-  display: none;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  white-space: nowrap;
-  color: #3f4250;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  border: none;
-  background: none;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: #d9dadd;
-  outline: none;
-  font-size: 1rem;
-  font-family: Inter,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.5rem;
-}
-
-.emotion-2:hover,
-.emotion-2:active,
-.emotion-2:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none;
-}
-
-.emotion-2:focus-visible {
-  outline: auto;
-}
-
-.emotion-2[aria-selected='true'] {
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-2[aria-selected='true'] .e1hzf7cr3 {
-  color: #641cb3;
-}
-
-.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-2[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .e1hzf7cr4,
-.emotion-2[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .e1hzf7cr4,
-.emotion-2[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .e1hzf7cr4 {
-  background-color: #f1eefc;
-  border-color: #f1eefc;
-  color: #641cb3;
-}
-
-.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-2[aria-disabled='true'],
-.emotion-2:disabled {
-  cursor: not-allowed;
-  -webkit-filter: grayscale(1) opacity(50%);
-  filter: grayscale(1) opacity(50%);
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  white-space: nowrap;
-  color: #3f4250;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  border: none;
-  background: none;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: #d9dadd;
-  outline: none;
-  font-size: 1rem;
-  font-family: Inter,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.5rem;
-}
-
-.emotion-2:hover,
-.emotion-2:active,
-.emotion-2:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none;
-}
-
-.emotion-2:focus-visible {
-  outline: auto;
-}
-
-.emotion-2[aria-selected='true'] {
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-2[aria-selected='true'] .e1hzf7cr3 {
-  color: #641cb3;
-}
-
-.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-2[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .e1hzf7cr4,
-.emotion-2[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .e1hzf7cr4,
-.emotion-2[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .e1hzf7cr4 {
-  background-color: #f1eefc;
-  border-color: #f1eefc;
-  color: #641cb3;
-}
-
-.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-2[aria-disabled='true'],
-.emotion-2:disabled {
-  cursor: not-allowed;
-  -webkit-filter: grayscale(1) opacity(50%);
-  filter: grayscale(1) opacity(50%);
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="styles__1xz9hlg2"
       role="tablist"
     >
       <button
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -321,7 +44,7 @@ exports[`tabs > renders correctly with Tabs and last disabled 1`] = `
         aria-disabled="false"
         aria-label="1"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -340,7 +63,7 @@ exports[`tabs > renders correctly with Tabs and last disabled 1`] = `
         aria-disabled="true"
         aria-label="2"
         aria-selected="true"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="true"
         disabled=""
         role="tab"
@@ -363,258 +86,17 @@ exports[`tabs > renders correctly with Tabs and last disabled 1`] = `
 
 exports[`tabs > renders correctly with Tabs menu selected 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
-  position: relative;
-  z-index: 0;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.emotion-0::after {
-  z-index: -1;
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: #d9dadd;
-}
-
-.emotion-0::-webkit-scrollbar {
-  display: none;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  white-space: nowrap;
-  color: #3f4250;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  border: none;
-  background: none;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: #d9dadd;
-  outline: none;
-  font-size: 1rem;
-  font-family: Inter,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.5rem;
-}
-
-.emotion-2:hover,
-.emotion-2:active,
-.emotion-2:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none;
-}
-
-.emotion-2:focus-visible {
-  outline: auto;
-}
-
-.emotion-2[aria-selected='true'] {
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-2[aria-selected='true'] .e1hzf7cr3 {
-  color: #641cb3;
-}
-
-.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-2[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .e1hzf7cr4,
-.emotion-2[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .e1hzf7cr4,
-.emotion-2[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .e1hzf7cr4 {
-  background-color: #f1eefc;
-  border-color: #f1eefc;
-  color: #641cb3;
-}
-
-.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-2[aria-disabled='true'],
-.emotion-2:disabled {
-  cursor: not-allowed;
-  -webkit-filter: grayscale(1) opacity(50%);
-  filter: grayscale(1) opacity(50%);
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.emotion-10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  white-space: nowrap;
-  color: #3f4250;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  border: none;
-  background: none;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: #d9dadd;
-  outline: none;
-  font-size: 1rem;
-  font-family: Inter,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.5rem;
-}
-
-.emotion-10:hover,
-.emotion-10:active,
-.emotion-10:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none;
-}
-
-.emotion-10:focus-visible {
-  outline: auto;
-}
-
-.emotion-10[aria-selected='true'] {
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-10[aria-selected='true'] .e1hzf7cr3 {
-  color: #641cb3;
-}
-
-.emotion-10[aria-disabled='false']:not(:disabled):hover,
-.emotion-10[aria-disabled='false']:not(:disabled):focus,
-.emotion-10[aria-disabled='false']:not(:disabled):active {
-  outline: none;
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-10[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .e1hzf7cr4,
-.emotion-10[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .e1hzf7cr4,
-.emotion-10[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .e1hzf7cr4 {
-  background-color: #f1eefc;
-  border-color: #f1eefc;
-  color: #641cb3;
-}
-
-.emotion-10[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .e1hzf7cr3,
-.emotion-10[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .e1hzf7cr3,
-.emotion-10[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .e1hzf7cr3 {
-  color: #641cb3;
-}
-
-.emotion-10[aria-disabled='true'],
-.emotion-10:disabled {
-  cursor: not-allowed;
-  -webkit-filter: grayscale(1) opacity(50%);
-  filter: grayscale(1) opacity(50%);
-}
-
-.emotion-10 .emotion-13 {
-  color: inherit;
-  margin-left: 0.5rem;
-  -webkit-transition: 300ms -webkit-transform ease-out;
-  transition: 300ms transform ease-out;
-}
-
-.emotion-10[aria-expanded='true'] .emotion-13 {
-  -webkit-transform: rotate(-180deg);
-  -moz-transform: rotate(-180deg);
-  -ms-transform: rotate(-180deg);
-  transform: rotate(-180deg);
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="styles__1xz9hlg2"
       role="tablist"
     >
       <button
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -633,7 +115,7 @@ exports[`tabs > renders correctly with Tabs menu selected 1`] = `
         aria-disabled="false"
         aria-label="1"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -652,7 +134,7 @@ exports[`tabs > renders correctly with Tabs menu selected 1`] = `
         aria-disabled="false"
         aria-label="2"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -668,7 +150,7 @@ exports[`tabs > renders correctly with Tabs menu selected 1`] = `
         </div>
       </button>
       <div
-        class="emotion-8 emotion-9"
+        class="styles__1xz9hlg9"
       >
         <div
           aria-controls="menu-test"
@@ -680,13 +162,13 @@ exports[`tabs > renders correctly with Tabs menu selected 1`] = `
             aria-disabled="false"
             aria-expanded="true"
             aria-haspopup="dialog"
-            class="emotion-10 emotion-11"
+            class="styles__1xz9hlg7"
             role="tab"
             type="button"
           >
             More
             <svg
-              class="emotion-12 emotion-13 styles__vbm0wq0 styles_prominence_default__vbm0wqg styles_disabled_false__vbm0wqf styles_size_small__vbm0wqa styles_undefined_compound_39__vbm0wq1n"
+              class="styles__1xz9hlg8 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
@@ -699,7 +181,7 @@ exports[`tabs > renders correctly with Tabs menu selected 1`] = `
         </div>
       </div>
       <div
-        class="emotion-8 emotion-9"
+        class="styles__1xz9hlg9"
       >
         <div
           aria-controls="menu-_r_1r_"
@@ -711,14 +193,14 @@ exports[`tabs > renders correctly with Tabs menu selected 1`] = `
             aria-disabled="true"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="emotion-10 emotion-11"
+            class="styles__1xz9hlg7"
             disabled=""
             role="tab"
             type="button"
           >
             More again
             <svg
-              class="emotion-12 emotion-13 styles__vbm0wq0 styles_prominence_default__vbm0wqg styles_disabled_false__vbm0wqf styles_size_small__vbm0wqa styles_undefined_compound_39__vbm0wq1n"
+              class="styles__1xz9hlg8 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
@@ -737,264 +219,18 @@ exports[`tabs > renders correctly with Tabs menu selected 1`] = `
 
 exports[`tabs > renders correctly with Tabs name 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
-  position: relative;
-  z-index: 0;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.emotion-0::after {
-  z-index: -1;
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: #d9dadd;
-}
-
-.emotion-0::-webkit-scrollbar {
-  display: none;
-}
-
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
-  position: relative;
-  z-index: 0;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.emotion-0::after {
-  z-index: -1;
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: #d9dadd;
-}
-
-.emotion-0::-webkit-scrollbar {
-  display: none;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  white-space: nowrap;
-  color: #3f4250;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  border: none;
-  background: none;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: #d9dadd;
-  outline: none;
-  font-size: 1rem;
-  font-family: Inter,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.5rem;
-}
-
-.emotion-2:hover,
-.emotion-2:active,
-.emotion-2:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none;
-}
-
-.emotion-2:focus-visible {
-  outline: auto;
-}
-
-.emotion-2[aria-selected='true'] {
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-2[aria-selected='true'] .e1hzf7cr3 {
-  color: #641cb3;
-}
-
-.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-2[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .e1hzf7cr4,
-.emotion-2[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .e1hzf7cr4,
-.emotion-2[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .e1hzf7cr4 {
-  background-color: #f1eefc;
-  border-color: #f1eefc;
-  color: #641cb3;
-}
-
-.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-2[aria-disabled='true'],
-.emotion-2:disabled {
-  cursor: not-allowed;
-  -webkit-filter: grayscale(1) opacity(50%);
-  filter: grayscale(1) opacity(50%);
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  white-space: nowrap;
-  color: #3f4250;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  border: none;
-  background: none;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: #d9dadd;
-  outline: none;
-  font-size: 1rem;
-  font-family: Inter,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.5rem;
-}
-
-.emotion-2:hover,
-.emotion-2:active,
-.emotion-2:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none;
-}
-
-.emotion-2:focus-visible {
-  outline: auto;
-}
-
-.emotion-2[aria-selected='true'] {
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-2[aria-selected='true'] .e1hzf7cr3 {
-  color: #641cb3;
-}
-
-.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-2[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .e1hzf7cr4,
-.emotion-2[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .e1hzf7cr4,
-.emotion-2[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .e1hzf7cr4 {
-  background-color: #f1eefc;
-  border-color: #f1eefc;
-  color: #641cb3;
-}
-
-.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-2[aria-disabled='true'],
-.emotion-2:disabled {
-  cursor: not-allowed;
-  -webkit-filter: grayscale(1) opacity(50%);
-  filter: grayscale(1) opacity(50%);
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="styles__1xz9hlg2"
       role="tablist"
     >
       <button
         aria-disabled="false"
         aria-label="first"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1013,7 +249,7 @@ exports[`tabs > renders correctly with Tabs name 1`] = `
         aria-disabled="false"
         aria-label="second"
         aria-selected="true"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="true"
         role="tab"
         type="button"
@@ -1032,7 +268,7 @@ exports[`tabs > renders correctly with Tabs name 1`] = `
         aria-disabled="true"
         aria-label="three"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         disabled=""
         role="tab"
@@ -1055,384 +291,17 @@ exports[`tabs > renders correctly with Tabs name 1`] = `
 
 exports[`tabs > renders correctly with Tabs with prop 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
-  position: relative;
-  z-index: 0;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.emotion-0::after {
-  z-index: -1;
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: #d9dadd;
-}
-
-.emotion-0::-webkit-scrollbar {
-  display: none;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  white-space: nowrap;
-  color: #3f4250;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  border: none;
-  background: none;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: #d9dadd;
-  outline: none;
-  font-size: 1rem;
-  font-family: Inter,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.5rem;
-}
-
-.emotion-2:hover,
-.emotion-2:active,
-.emotion-2:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none;
-}
-
-.emotion-2:focus-visible {
-  outline: auto;
-}
-
-.emotion-2[aria-selected='true'] {
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-2[aria-selected='true'] .e1hzf7cr3 {
-  color: #641cb3;
-}
-
-.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-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-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-2[aria-disabled='true'],
-.emotion-2:disabled {
-  cursor: not-allowed;
-  -webkit-filter: grayscale(1) opacity(50%);
-  filter: grayscale(1) opacity(50%);
-}
-
-.emotion-4 {
-  padding: 0 0.5rem;
-  margin-left: 0.5rem;
-}
-
-.emotion-22 {
-  margin-left: 0.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-50 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.emotion-52 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  white-space: nowrap;
-  color: #3f4250;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  border: none;
-  background: none;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: #d9dadd;
-  outline: none;
-  font-size: 1rem;
-  font-family: Inter,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.5rem;
-}
-
-.emotion-52:hover,
-.emotion-52:active,
-.emotion-52:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none;
-}
-
-.emotion-52:focus-visible {
-  outline: auto;
-}
-
-.emotion-52[aria-selected='true'] {
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-52[aria-selected='true'] .e1hzf7cr3 {
-  color: #641cb3;
-}
-
-.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-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-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-52[aria-disabled='true'],
-.emotion-52:disabled {
-  cursor: not-allowed;
-  -webkit-filter: grayscale(1) opacity(50%);
-  filter: grayscale(1) opacity(50%);
-}
-
-.emotion-52 .emotion-55 {
-  color: inherit;
-  margin-left: 0.5rem;
-  -webkit-transition: 300ms -webkit-transform ease-out;
-  transition: 300ms transform ease-out;
-}
-
-.emotion-52[aria-expanded='true'] .emotion-55 {
-  -webkit-transform: rotate(-180deg);
-  -moz-transform: rotate(-180deg);
-  -ms-transform: rotate(-180deg);
-  transform: rotate(-180deg);
-}
-
-.emotion-59 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  white-space: nowrap;
-  color: #3f4250;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  border: none;
-  background: none;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: #d9dadd;
-  outline: none;
-  font-size: 1rem;
-  font-family: Inter,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.5rem;
-  position: -webkit-sticky;
-  position: sticky;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: #ffffff;
-  box-shadow: 0px 0px 24px 6px #d9dadd66;
-}
-
-.emotion-59:hover,
-.emotion-59:active,
-.emotion-59:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none;
-}
-
-.emotion-59:focus-visible {
-  outline: auto;
-}
-
-.emotion-59[aria-selected='true'] {
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-59[aria-selected='true'] .e1hzf7cr3 {
-  color: #641cb3;
-}
-
-.emotion-59[aria-disabled='false']:not(:disabled):hover,
-.emotion-59[aria-disabled='false']:not(:disabled):focus,
-.emotion-59[aria-disabled='false']:not(:disabled):active {
-  outline: none;
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-59[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .emotion-5,
-.emotion-59[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .emotion-5,
-.emotion-59[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .emotion-5 {
-  background-color: #f1eefc;
-  border-color: #f1eefc;
-  color: #641cb3;
-}
-
-.emotion-59[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .e1hzf7cr3,
-.emotion-59[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .e1hzf7cr3,
-.emotion-59[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .e1hzf7cr3 {
-  color: #641cb3;
-}
-
-.emotion-59[aria-disabled='true'],
-.emotion-59:disabled {
-  cursor: not-allowed;
-  -webkit-filter: grayscale(1) opacity(50%);
-  filter: grayscale(1) opacity(50%);
-}
-
-.emotion-59 .emotion-55 {
-  color: inherit;
-  margin-left: 0.5rem;
-  -webkit-transition: 300ms -webkit-transform ease-out;
-  transition: 300ms transform ease-out;
-}
-
-.emotion-59[aria-expanded='true'] .emotion-55 {
-  -webkit-transform: rotate(-180deg);
-  -moz-transform: rotate(-180deg);
-  -ms-transform: rotate(-180deg);
-  transform: rotate(-180deg);
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="styles__1xz9hlg2"
       role="tablist"
     >
       <button
         aria-disabled="false"
         aria-selected="true"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="true"
         role="tab"
         type="button"
@@ -1445,7 +314,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
           >
             First
             <span
-              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"
+              class="styles__1xz9hlg3 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
@@ -1457,7 +326,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
         aria-disabled="false"
         aria-label="1"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1475,7 +344,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       <button
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1493,7 +362,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       <button
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1506,7 +375,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
           >
             Counter
             <span
-              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"
+              class="styles__1xz9hlg3 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
@@ -1518,7 +387,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
         aria-disabled="false"
         aria-label="2"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1531,7 +400,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
           >
             Counter no items
             <span
-              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"
+              class="styles__1xz9hlg3 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
@@ -1542,7 +411,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       <button
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1555,13 +424,13 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
           >
             Conter and badge
             <span
-              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"
+              class="styles__1xz9hlg3 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-22 emotion-23"
+              class="styles__1xz9hlg6"
             >
               Badge
             </span>
@@ -1571,7 +440,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       <button
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1584,7 +453,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
           >
             Badge
             <span
-              class="emotion-22 emotion-23"
+              class="styles__1xz9hlg6"
             >
               Badge
             </span>
@@ -1594,7 +463,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       <button
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1612,7 +481,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       <button
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1630,7 +499,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       <button
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1648,7 +517,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       <button
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1666,7 +535,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       <button
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1684,7 +553,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       <button
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1702,7 +571,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       <button
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1720,7 +589,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       <button
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1738,7 +607,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       <button
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1756,7 +625,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       <button
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1774,7 +643,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       <button
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
         type="button"
@@ -1790,7 +659,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
         </div>
       </button>
       <div
-        class="emotion-50 emotion-51"
+        class="styles__1xz9hlg9"
       >
         <div
           aria-controls="menu-test"
@@ -1802,13 +671,13 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             aria-disabled="false"
             aria-expanded="true"
             aria-haspopup="dialog"
-            class="emotion-52 emotion-53"
+            class="styles__1xz9hlg7"
             role="tab"
             type="button"
           >
             Blabla
             <svg
-              class="emotion-54 emotion-55 styles__vbm0wq0 styles_prominence_default__vbm0wqg styles_disabled_false__vbm0wqf styles_size_small__vbm0wqa styles_undefined_compound_39__vbm0wq1n"
+              class="styles__1xz9hlg8 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
@@ -1821,7 +690,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
         </div>
       </div>
       <div
-        class="emotion-50 emotion-51"
+        class="styles__1xz9hlg9"
       >
         <div
           aria-controls="menu-_r_o_"
@@ -1833,13 +702,13 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             aria-disabled="false"
             aria-expanded="true"
             aria-haspopup="dialog"
-            class="emotion-58 emotion-59 emotion-53"
+            class="styles__1xz9hlg1 styles__1xz9hlg7"
             role="tab"
             type="button"
           >
             More
             <svg
-              class="emotion-54 emotion-55 styles__vbm0wq0 styles_prominence_default__vbm0wqg styles_disabled_false__vbm0wqf styles_size_small__vbm0wqa styles_undefined_compound_39__vbm0wq1n"
+              class="styles__1xz9hlg8 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
@@ -1853,11 +722,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       </div>
     </div>
   </div>
-  .emotion-0[aria-selected='true'] {
-  color: #641cb3;
-}
-
-<div
+  <div
     class="styles__gky3yh2 styles__w40vpo4 null"
     id="menu-test"
     role="dialog"
@@ -1879,7 +744,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             class="styles__gky3yha styles_borderless_false__gky3yhb"
           >
             <button
-              class="emotion-0 emotion-1 styles__gky3yhd styles_sentiment_neutral__gky3yhg styles_undefined_compound_0__gky3yhj"
+              class="styles_default__1xz9hlg5 styles__gky3yhd styles_sentiment_neutral__gky3yhg styles_undefined_compound_0__gky3yhj"
               data-active="false"
               data-is-disclosure="false"
               data-is-menu-item="true"
@@ -1893,7 +758,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             class="styles__gky3yha styles_borderless_false__gky3yhb"
           >
             <button
-              class="emotion-0 emotion-1 styles__gky3yhd styles_sentiment_neutral__gky3yhg styles_undefined_compound_0__gky3yhj"
+              class="styles_default__1xz9hlg5 styles__gky3yhd styles_sentiment_neutral__gky3yhg styles_undefined_compound_0__gky3yhj"
               data-active="false"
               data-is-disclosure="false"
               data-is-menu-item="true"
@@ -1907,259 +772,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       </div>
     </div>
   </div>
-  .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.emotion-0 .emotion-3 {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: inherit;
-  padding: 0.5rem 1rem;
-  border-bottom-width: 1.5px;
-  width: 100%;
-  cursor: pointer;
-  min-width: 6.875rem;
-  background-color: transparent;
-}
-
-.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-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  white-space: nowrap;
-  color: #3f4250;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  border: none;
-  background: none;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: #d9dadd;
-  outline: none;
-  font-size: 1rem;
-  font-family: Inter,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.5rem;
-}
-
-.emotion-2:hover,
-.emotion-2:active,
-.emotion-2:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none;
-}
-
-.emotion-2:focus-visible {
-  outline: auto;
-}
-
-.emotion-2[aria-selected='true'] {
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-2[aria-selected='true'] .e1hzf7cr3 {
-  color: #641cb3;
-}
-
-.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-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-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-2[aria-disabled='true'],
-.emotion-2:disabled {
-  cursor: not-allowed;
-  -webkit-filter: grayscale(1) opacity(50%);
-  filter: grayscale(1) opacity(50%);
-}
-
-.emotion-4 {
-  padding: 0 0.5rem;
-  margin-left: 0.5rem;
-}
-
-.emotion-22 {
-  margin-left: 0.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-50 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.emotion-52 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  white-space: nowrap;
-  color: #3f4250;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  border: none;
-  background: none;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: #d9dadd;
-  outline: none;
-  font-size: 1rem;
-  font-family: Inter,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.5rem;
-}
-
-.emotion-52:hover,
-.emotion-52:active,
-.emotion-52:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none;
-}
-
-.emotion-52:focus-visible {
-  outline: auto;
-}
-
-.emotion-52[aria-selected='true'] {
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-52[aria-selected='true'] .e1hzf7cr3 {
-  color: #641cb3;
-}
-
-.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-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-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-52[aria-disabled='true'],
-.emotion-52:disabled {
-  cursor: not-allowed;
-  -webkit-filter: grayscale(1) opacity(50%);
-  filter: grayscale(1) opacity(50%);
-}
-
-.emotion-52 .emotion-55 {
-  color: inherit;
-  margin-left: 0.5rem;
-  -webkit-transition: 300ms -webkit-transform ease-out;
-  transition: 300ms transform ease-out;
-}
-
-.emotion-52[aria-expanded='true'] .emotion-55 {
-  -webkit-transform: rotate(-180deg);
-  -moz-transform: rotate(-180deg);
-  -ms-transform: rotate(-180deg);
-  transform: rotate(-180deg);
-}
-
-<div
+  <div
     class="styles__gky3yh2 styles__w40vpo4 null"
     id="menu-_r_o_"
     role="dialog"
@@ -2178,12 +791,12 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
           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-0 emotion-1"
+            class="styles__1xz9hlg0"
           >
             <button
               aria-disabled="false"
               aria-selected="true"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="true"
               role="tab"
               type="button"
@@ -2196,7 +809,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
                 >
                   First
                   <span
-                    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"
+                    class="styles__1xz9hlg3 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
@@ -2208,7 +821,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
               aria-disabled="false"
               aria-label="1"
               aria-selected="false"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2226,7 +839,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2244,7 +857,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2257,7 +870,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
                 >
                   Counter
                   <span
-                    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"
+                    class="styles__1xz9hlg3 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
@@ -2269,7 +882,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
               aria-disabled="false"
               aria-label="2"
               aria-selected="false"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2282,7 +895,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
                 >
                   Counter no items
                   <span
-                    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"
+                    class="styles__1xz9hlg3 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
@@ -2293,7 +906,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2306,13 +919,13 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
                 >
                   Conter and badge
                   <span
-                    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"
+                    class="styles__1xz9hlg3 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-22 emotion-23"
+                    class="styles__1xz9hlg6"
                   >
                     Badge
                   </span>
@@ -2322,7 +935,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2335,7 +948,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
                 >
                   Badge
                   <span
-                    class="emotion-22 emotion-23"
+                    class="styles__1xz9hlg6"
                   >
                     Badge
                   </span>
@@ -2345,7 +958,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2363,7 +976,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2381,7 +994,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2399,7 +1012,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2417,7 +1030,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2435,7 +1048,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2453,7 +1066,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2471,7 +1084,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2489,7 +1102,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2507,7 +1120,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2525,7 +1138,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             <button
               aria-disabled="false"
               aria-selected="false"
-              class="emotion-2 emotion-3"
+              class="styles__1xz9hlg7"
               data-is-selected="false"
               role="tab"
               type="button"
@@ -2541,7 +1154,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
               </div>
             </button>
             <div
-              class="emotion-50 emotion-51"
+              class="styles__1xz9hlg9"
             >
               <div
                 aria-controls="menu-test"
@@ -2553,13 +1166,13 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
                   aria-disabled="false"
                   aria-expanded="true"
                   aria-haspopup="dialog"
-                  class="emotion-52 emotion-53"
+                  class="styles__1xz9hlg7"
                   role="tab"
                   type="button"
                 >
                   Blabla
                   <svg
-                    class="emotion-54 emotion-55 styles__vbm0wq0 styles_prominence_default__vbm0wqg styles_disabled_false__vbm0wqf styles_size_small__vbm0wqa styles_undefined_compound_39__vbm0wq1n"
+                    class="styles__1xz9hlg8 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
@@ -2576,11 +1189,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
       </div>
     </div>
   </div>
-  .emotion-0[aria-selected='true'] {
-  color: #641cb3;
-}
-
-<div
+  <div
     class="styles__gky3yh2 styles__w40vpo4 null"
     id="menu-test"
     role="dialog"
@@ -2602,7 +1211,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             class="styles__gky3yha styles_borderless_false__gky3yhb"
           >
             <button
-              class="emotion-0 emotion-1 styles__gky3yhd styles_sentiment_neutral__gky3yhg styles_undefined_compound_0__gky3yhj"
+              class="styles_default__1xz9hlg5 styles__gky3yhd styles_sentiment_neutral__gky3yhg styles_undefined_compound_0__gky3yhj"
               data-active="false"
               data-is-disclosure="false"
               data-is-menu-item="true"
@@ -2616,7 +1225,7 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
             class="styles__gky3yha styles_borderless_false__gky3yhb"
           >
             <button
-              class="emotion-0 emotion-1 styles__gky3yhd styles_sentiment_neutral__gky3yhg styles_undefined_compound_0__gky3yhj"
+              class="styles_default__1xz9hlg5 styles__gky3yhd styles_sentiment_neutral__gky3yhg styles_undefined_compound_0__gky3yhj"
               data-active="false"
               data-is-disclosure="false"
               data-is-menu-item="true"
@@ -2635,263 +1244,17 @@ exports[`tabs > renders correctly with Tabs with prop 1`] = `
 
 exports[`tabs > renders correctly with custom Tabs component 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
-  position: relative;
-  z-index: 0;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.emotion-0::after {
-  z-index: -1;
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: #d9dadd;
-}
-
-.emotion-0::-webkit-scrollbar {
-  display: none;
-}
-
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
-  position: relative;
-  z-index: 0;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.emotion-0::after {
-  z-index: -1;
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: #d9dadd;
-}
-
-.emotion-0::-webkit-scrollbar {
-  display: none;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  white-space: nowrap;
-  color: #3f4250;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  border: none;
-  background: none;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: #d9dadd;
-  outline: none;
-  font-size: 1rem;
-  font-family: Inter,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.5rem;
-}
-
-.emotion-2:hover,
-.emotion-2:active,
-.emotion-2:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none;
-}
-
-.emotion-2:focus-visible {
-  outline: auto;
-}
-
-.emotion-2[aria-selected='true'] {
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-2[aria-selected='true'] .e1hzf7cr3 {
-  color: #641cb3;
-}
-
-.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-2[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .e1hzf7cr4,
-.emotion-2[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .e1hzf7cr4,
-.emotion-2[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .e1hzf7cr4 {
-  background-color: #f1eefc;
-  border-color: #f1eefc;
-  color: #641cb3;
-}
-
-.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-2[aria-disabled='true'],
-.emotion-2:disabled {
-  cursor: not-allowed;
-  -webkit-filter: grayscale(1) opacity(50%);
-  filter: grayscale(1) opacity(50%);
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  white-space: nowrap;
-  color: #3f4250;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-  border: none;
-  background: none;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: #d9dadd;
-  outline: none;
-  font-size: 1rem;
-  font-family: Inter,sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 1.5rem;
-}
-
-.emotion-2:hover,
-.emotion-2:active,
-.emotion-2:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  outline: none;
-}
-
-.emotion-2:focus-visible {
-  outline: auto;
-}
-
-.emotion-2[aria-selected='true'] {
-  color: #641cb3;
-  border-bottom-color: #8c40ef;
-}
-
-.emotion-2[aria-selected='true'] .e1hzf7cr3 {
-  color: #641cb3;
-}
-
-.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-2[aria-disabled='false']:not(:disabled):hover[data-is-selected='false'] .e1hzf7cr4,
-.emotion-2[aria-disabled='false']:not(:disabled):focus[data-is-selected='false'] .e1hzf7cr4,
-.emotion-2[aria-disabled='false']:not(:disabled):active[data-is-selected='false'] .e1hzf7cr4 {
-  background-color: #f1eefc;
-  border-color: #f1eefc;
-  color: #641cb3;
-}
-
-.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-2[aria-disabled='true'],
-.emotion-2:disabled {
-  cursor: not-allowed;
-  -webkit-filter: grayscale(1) opacity(50%);
-  filter: grayscale(1) opacity(50%);
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="styles__1xz9hlg2"
       role="tablist"
     >
       <div
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
       >
@@ -2908,7 +1271,7 @@ exports[`tabs > renders correctly with custom Tabs component 1`] = `
       <a
         aria-disabled="false"
         aria-selected="false"
-        class="emotion-2 emotion-3"
+        class="styles__1xz9hlg7"
         data-is-selected="false"
         role="tab"
       >
@@ -2923,7 +1286,7 @@ exports[`tabs > renders correctly with custom Tabs component 1`] = `
         </div>
       </a>
       <a
-        class="emotion-2 emotion-3 styles__1dtqm9e0 styles_prominence_default__1dtqm9e3 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodyStrong__1dtqm9eb styles_type_standalone__1dtqm9ed styles_undefined_compound_4__1dtqm9ei styles__1dtqm9en"
+        class="styles__1xz9hlg7 styles__1dtqm9e0 styles_prominence_default__1dtqm9e3 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodyStrong__1dtqm9eb styles_type_standalone__1dtqm9ed styles_undefined_compound_4__1dtqm9ei styles__1dtqm9en"
         data-variant="standalone"
         href="#"
       >
diff --git a/packages/ui/src/components/Tabs/index.tsx b/packages/ui/src/components/Tabs/index.tsx
index c613b44f55..70ce4c5ab9 100644
--- a/packages/ui/src/components/Tabs/index.tsx
+++ b/packages/ui/src/components/Tabs/index.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import styled from '@emotion/styled'
 import type { ComponentProps, HTMLAttributes, ReactNode } from 'react'
 import {
   Children,
@@ -11,68 +10,12 @@ import {
   useRef,
   useState,
 } from 'react'
-import { StyledTabButton, Tab } from './Tab'
+import { tabsContainer, tabsMenu, tabsMenuContainer } from './styles.css'
+import { Tab } from './Tab'
 import { TabMenu } from './TabMenu'
 import { TabMenuItem } from './TabMenuItem'
 import { TabsContext } from './TabsContext'
 
-const MenuContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  ${StyledTabButton} {
-    font-size: ${({ theme }) => theme.typography.bodySmall.fontSize};
-    line-height: ${({ theme }) => theme.typography.bodySmall.lineHeight};
-    font-weight: inherit;
-    padding: ${({ theme }) => `${theme.space['1']} ${theme.space['2']}`};
-    border-bottom-width: 1.5px;
-    width: 100%;
-    cursor: pointer;
-    min-width: 6.875rem;
-    background-color: transparent;
-    &[aria-disabled='true'],
-    &:disabled {
-      cursor: not-allowed;
-      filter: grayscale(1) opacity(50%);
-    }
-  }
-`
-
-// Migration to Menu will not work as expected here.
-const StyledTabMenu = styled(TabMenu)`
-  position: sticky;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: ${({ theme }) => theme.colors.neutral.background};
-  box-shadow: ${({ theme }) => theme.shadows.menu};
-`
-
-const TabsContainer = styled.div`
-  display: flex;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
-  position: relative;
-  z-index: 0;
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-
-  &::after {
-    z-index: -1;
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: ${({ theme }) => theme.colors.neutral.border};
-  }
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`
-
 type TabsProps = {
   selected?: string | number
   onChange: (data: string | number) => void
@@ -159,8 +102,8 @@ export const Tabs = ({
 
   return (
     <TabsContext.Provider value={value}>
-      <TabsContainer
-        className={className}
+      <div
+        className={`${className ? `${className} ` : ''}${tabsContainer}`}
         data-testid={dataTestId}
         ref={tabsRef}
         role="tablist"
@@ -168,11 +111,15 @@ export const Tabs = ({
       >
         {children}
         {displayMore ? (
-          <StyledTabMenu disclosure={moreDisclosure} ref={moreStaticRef}>
-            <MenuContainer>{menuItemChildren}</MenuContainer>
-          </StyledTabMenu>
+          <TabMenu
+            className={tabsMenu}
+            disclosure={moreDisclosure}
+            ref={moreStaticRef}
+          >
+            <div className={tabsMenuContainer}>{menuItemChildren}</div>
+          </TabMenu>
         ) : null}
-      </TabsContainer>
+      </div>
     </TabsContext.Provider>
   )
 }
diff --git a/packages/ui/src/components/Tabs/styles.css.ts b/packages/ui/src/components/Tabs/styles.css.ts
new file mode 100644
index 0000000000..fdfb313931
--- /dev/null
+++ b/packages/ui/src/components/Tabs/styles.css.ts
@@ -0,0 +1,157 @@
+import { theme } from '@ultraviolet/themes'
+import { globalStyle, style, styleVariants } from '@vanilla-extract/css'
+
+export const tabsMenuContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+})
+
+export const tabsMenu = style({
+  position: 'sticky',
+  right: 0,
+  top: 0,
+  bottom: 0,
+  background: `${theme.colors.neutral.background} !important`,
+  boxShadow: theme.shadows.menu,
+})
+
+export const tabsContainer = style({
+  display: 'flex',
+  flexWrap: 'nowrap',
+  overflowX: 'scroll',
+  position: 'relative',
+  zIndex: 0,
+  msOverflowStyle: 'none',
+  scrollbarWidth: 'none',
+  selectors: {
+    '&::after': {
+      zIndex: -1,
+      content: '""',
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: 2,
+      background: theme.colors.neutral.border,
+    },
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+  },
+})
+
+export const tabsBadge = style({
+  padding: `0 ${theme.space[1]}`,
+  marginLeft: theme.space[1],
+})
+
+export const tabsTextSelected = styleVariants({
+  selected: {
+    color: theme.colors.primary.text,
+  },
+  default: {},
+})
+
+export const tabsBadgeContainer = style({
+  marginLeft: theme.space[1],
+  display: 'flex',
+})
+
+export const tabsButton = style({
+  display: 'flex',
+  flexDirection: 'row',
+  padding: `${theme.space[1]} ${theme.space[2]}`,
+  cursor: 'pointer',
+  justifyContent: 'center',
+  alignItems: 'baseline',
+  whiteSpace: 'nowrap',
+  color: theme.colors.neutral.text,
+  textDecoration: 'none',
+  userSelect: 'none',
+  touchAction: 'manipulation',
+  transition: 'color 0.2s',
+  border: 'none',
+  background: 'none',
+  borderBottom: `2px solid ${theme.colors.neutral.border}`,
+  outline: 'none',
+  fontSize: theme.typography.bodyStrong.fontSize,
+  fontFamily: theme.typography.bodyStrong.fontFamily,
+  fontWeight: theme.typography.bodyStrong.weight,
+  letterSpacing: theme.typography.bodyStrong.letterSpacing,
+  lineHeight: theme.typography.bodyStrong.lineHeight,
+  selectors: {
+    '&:hover, &:active, &:focus': {
+      textDecoration: 'none',
+      outline: 'none',
+    },
+    '&:focus-visible': {
+      outline: 'auto',
+    },
+    '&[aria-selected="true"]': {
+      color: theme.colors.primary.text,
+      borderBottomColor: theme.colors.primary.border,
+    },
+    '&[aria-disabled="false"]:not(:disabled):focus, &[aria-disabled="false"]:not(:disabled):hover, &[aria-disabled="false"]:not(:disabled):active':
+      {
+        outline: 'none',
+        color: theme.colors.primary.text,
+        borderBottomColor: theme.colors.primary.border,
+      },
+    '&[aria-disabled="true"], &:disabled': {
+      cursor: 'not-allowed',
+      filter: 'grayscale(1) opacity(50%)',
+    },
+    [`${tabsMenuContainer} &`]: {
+      fontSize: theme.typography.bodySmall.fontSize,
+      lineHeight: theme.typography.bodySmall.lineHeight,
+      fontWeight: 'inherit',
+      borderBottomWidth: 1.5,
+      width: '100%',
+      cursor: 'pointer',
+      minWidth: '6.875rem',
+      backgroundColor: 'transparent',
+    },
+    [`${tabsMenuContainer} &[aria-disabled='true']`]: {
+      cursor: 'not-allowed',
+      filter: 'grayscale(1) opacity(50%)',
+    },
+    [`${tabsMenuContainer} &:disabled`]: {
+      cursor: 'not-allowed',
+      filter: 'grayscale(1) opacity(50%)',
+    },
+  },
+})
+
+globalStyle(
+  `${tabsButton}[aria-selected="false"]:hover ${tabsBadge}, ${tabsButton}[aria-selected="false"]:active ${tabsBadge}`,
+  {
+    backgroundColor: theme.colors.primary.background,
+    borderColor: theme.colors.primary.background,
+    color: theme.colors.primary.text,
+  },
+)
+
+globalStyle(
+  `${tabsButton}:hover ${tabsTextSelected.default}, ${tabsButton}:focus ${tabsTextSelected.default}, ${tabsButton}:active ${tabsTextSelected.default}`,
+  {
+    color: theme.colors.primary.text,
+  },
+)
+
+export const tabsArrowIcon = style({
+  color: 'inherit',
+  marginLeft: theme.space[1],
+  transition: '300ms transform ease-out',
+})
+
+export const tabsMenuWrapper = style({
+  display: 'flex',
+  position: 'sticky',
+  top: 0,
+  bottom: 0,
+  right: 0,
+})
+
+globalStyle(`${tabsButton}[aria-expanded="true"] ${tabsArrowIcon}`, {
+  transform: 'rotate(-180deg)',
+})