From a36945add4de68d41034ffa0ea5456036eb9bf36 Mon Sep 17 00:00:00 2001
From: Alec Chen <93971719+0xAlec@users.noreply.github.com>
Date: Wed, 14 Aug 2024 14:05:56 -0700
Subject: [PATCH] add `cn` overrideable className

---
 site/docs/pages/swap/types.mdx       | 1 +
 src/swap/components/SwapSettings.tsx | 9 +++++++--
 src/swap/types.ts                    | 1 +
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/site/docs/pages/swap/types.mdx b/site/docs/pages/swap/types.mdx
index 9f774d4d2b..41b186c1ae 100644
--- a/site/docs/pages/swap/types.mdx
+++ b/site/docs/pages/swap/types.mdx
@@ -145,6 +145,7 @@ type SwapReact = {
 
 ```ts
 type SwapSettingsReact = {
+  className?: string; // Optional className override for top div element.
   icon: ReactNode;
   title: string;
 };
diff --git a/src/swap/components/SwapSettings.tsx b/src/swap/components/SwapSettings.tsx
index 135b84a5c1..cf1e62c0af 100644
--- a/src/swap/components/SwapSettings.tsx
+++ b/src/swap/components/SwapSettings.tsx
@@ -1,8 +1,13 @@
 import { isValidElement, useMemo } from 'react';
 import { SwapSettingsSvg } from '../../internal/svg/swapSettings';
+import { cn } from '../../styles/theme';
 import type { SwapSettingsReact } from '../types';
 
-export function SwapSettings({ icon, title = 'Auto' }: SwapSettingsReact) {
+export function SwapSettings({
+  className,
+  icon,
+  title = 'Auto',
+}: SwapSettingsReact) {
   const iconSvg = useMemo(() => {
     if (icon === undefined) {
       return SwapSettingsSvg;
@@ -14,7 +19,7 @@ export function SwapSettings({ icon, title = 'Auto' }: SwapSettingsReact) {
 
   return (
     <div
-      className="flex w-full items-center justify-between"
+      className={cn('flex w-full items-center justify-between', className)}
       data-testid="ockSwapSettings_Settings"
     >
       <div className="flex items-center space-x-1">
diff --git a/src/swap/types.ts b/src/swap/types.ts
index cb69fa11b1..4687e6c950 100644
--- a/src/swap/types.ts
+++ b/src/swap/types.ts
@@ -223,6 +223,7 @@ export type SwapReact = {
  * Note: exported as public Type
  */
 export type SwapSettingsReact = {
+  className?: string; // Optional className override for top div element.
   icon: ReactNode;
   title: string;
 };