From 526bec8eba0ef05536d29ed587b7625aae8db29c Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 17 Oct 2024 15:51:12 +0200
Subject: [PATCH] Tabs: simplify styled components code

---
 packages/components/src/tabs/styles.ts   | 2 +-
 packages/components/src/tabs/tablist.tsx | 8 +++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 926abc3e34b10..923c47726293c 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -11,7 +11,7 @@ import { COLORS, CONFIG } from '../utils';
 import { space } from '../utils/space';
 import Icon from '../icon';
 
-export const TabListWrapper = styled.div`
+export const StyledTabList = styled( Ariakit.TabList )`
 	display: flex;
 	align-items: stretch;
 	overflow-x: auto;
diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx
index 512a3eb672428..46cc0488bc67a 100644
--- a/packages/components/src/tabs/tablist.tsx
+++ b/packages/components/src/tabs/tablist.tsx
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import * as Ariakit from '@ariakit/react';
 import { useStoreState } from '@ariakit/react';
 
 /**
@@ -16,7 +15,7 @@ import { useMergeRefs } from '@wordpress/compose';
  */
 import type { TabListProps } from './types';
 import { useTabsContext } from './context';
-import { TabListWrapper } from './styles';
+import { StyledTabList } from './styles';
 import type { WordPressComponentProps } from '../context';
 import clsx from 'clsx';
 import type { ElementOffsetRect } from '../utils/element-rect';
@@ -109,10 +108,9 @@ export const TabList = forwardRef<
 	}
 
 	return (
-		<Ariakit.TabList
+		<StyledTabList
 			ref={ refs }
 			store={ store }
-			render={ <TabListWrapper /> }
 			onBlur={ onBlur }
 			tabIndex={ -1 }
 			data-select-on-move={ selectOnMove ? 'true' : 'false' }
@@ -124,6 +122,6 @@ export const TabList = forwardRef<
 			) }
 		>
 			{ children }
-		</Ariakit.TabList>
+		</StyledTabList>
 	);
 } );