From 76c84e5ff6ed29db42a00dbecc2253bc67e8e6be Mon Sep 17 00:00:00 2001
From: Paula Stachova <paula.stachova@mongodb.com>
Date: Thu, 2 Oct 2025 14:21:05 +0200
Subject: [PATCH 1/3] fix(compass-components): use stacked component styles for
 tooltip COMPASS-8299

---
 packages/compass-components/src/components/leafygreen.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/compass-components/src/components/leafygreen.tsx b/packages/compass-components/src/components/leafygreen.tsx
index 96f8df17870..7ef67fef377 100644
--- a/packages/compass-components/src/components/leafygreen.tsx
+++ b/packages/compass-components/src/components/leafygreen.tsx
@@ -73,7 +73,7 @@ import LeafyGreenTextInput from '@leafygreen-ui/text-input';
 import { SearchInput } from '@leafygreen-ui/search-input';
 export { usePrevious, useMergeRefs } from '@leafygreen-ui/hooks';
 import Toggle from '@leafygreen-ui/toggle';
-import Tooltip from '@leafygreen-ui/tooltip';
+import LGTooltip from '@leafygreen-ui/tooltip';
 import {
   H1,
   H2,
@@ -92,6 +92,9 @@ import {
   ComboboxOption,
   ComboboxGroup,
 } from '@leafygreen-ui/combobox';
+import { withStackedComponentStyles } from '../hooks/use-stacked-component';
+
+const Tooltip = withStackedComponentStyles(LGTooltip);
 
 // 2. Wrap and make any changes/workaround to leafygreen components.
 const Icon = ({

From e2b09f6cd85f2d2abfbb89c5a17ecbe4d86e286a Mon Sep 17 00:00:00 2001
From: Paula Stachova <paula.stachova@tutanota.com>
Date: Thu, 2 Oct 2025 15:01:05 +0200
Subject: [PATCH 2/3] Update
 packages/compass-components/src/components/leafygreen.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/compass-components/src/components/leafygreen.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/compass-components/src/components/leafygreen.tsx b/packages/compass-components/src/components/leafygreen.tsx
index 7ef67fef377..3d7ce1c8093 100644
--- a/packages/compass-components/src/components/leafygreen.tsx
+++ b/packages/compass-components/src/components/leafygreen.tsx
@@ -94,9 +94,10 @@ import {
 } from '@leafygreen-ui/combobox';
 import { withStackedComponentStyles } from '../hooks/use-stacked-component';
 
-const Tooltip = withStackedComponentStyles(LGTooltip);
+
 
 // 2. Wrap and make any changes/workaround to leafygreen components.
+const Tooltip = withStackedComponentStyles(LGTooltip);
 const Icon = ({
   size,
   ...rest

From 96c7aaec69ff32c4fcdc99585f770b8cd28d6dfa Mon Sep 17 00:00:00 2001
From: Paula Stachova <paula.stachova@mongodb.com>
Date: Tue, 7 Oct 2025 11:28:31 +0200
Subject: [PATCH 3/3] fix type

---
 .../compass-components/src/hooks/use-stacked-component.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/compass-components/src/hooks/use-stacked-component.tsx b/packages/compass-components/src/hooks/use-stacked-component.tsx
index fe891960c37..044d949a54c 100644
--- a/packages/compass-components/src/hooks/use-stacked-component.tsx
+++ b/packages/compass-components/src/hooks/use-stacked-component.tsx
@@ -32,8 +32,8 @@ type StackedComponentProps<T extends boolean> = T extends true
 
 // TODO(LG-4109): This should be eventually supported by the LG design system
 export const withStackedComponentStyles = function <ComponentProps>(
-  WrappedComponent: ComponentType<ComponentProps>
-): ComponentType<ComponentProps> {
+  WrappedComponent: React.FC<ComponentProps>
+): React.FC<ComponentProps> {
   const ComponentWithStackedStyles = (
     props: ComponentProps,
     ref: ForwardedRef<ComponentType<ComponentProps>>