export MarketingModal and wrap it with withStackedComponentStyles

ncarbon · ncarbon · commit 4b9716bcc2f4 · 2025-08-27T18:20:05.000-04:00
diff --git a/packages/compass-components/src/components/modals/marketing-modal.tsx b/packages/compass-components/src/components/modals/marketing-modal.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import {
+  Body,
+  MarketingModal as LeafyGreenMarketingModal,
+} from '../leafygreen';
+import { withStackedComponentStyles } from '../../hooks/use-stacked-component';
+
+function MarketingModal({
+  children,
+  ...props
+}: React.ComponentProps<typeof LeafyGreenMarketingModal>): React.ReactElement {
+  return (
+    <LeafyGreenMarketingModal {...props}>
+      <Body as="div">{children}</Body>
+    </LeafyGreenMarketingModal>
+  );
+}
+
+export default withStackedComponentStyles(MarketingModal);
diff --git a/packages/compass-components/src/index.ts b/packages/compass-components/src/index.ts
@@ -14,6 +14,7 @@ export {
   cache,
 } from '@leafygreen-ui/emotion';
 import ConfirmationModal from './components/modals/confirmation-modal';
+import MarketingModal from './components/modals/marketing-modal';
 import type {
   ElectronFileDialogOptions,
   ElectronShowFileDialogProvider,
@@ -131,6 +132,7 @@ export {
   defaultSidebarWidth,
   createElectronFileInputBackend,
   createJSDomFileInputDummyBackend,
+  MarketingModal,
 };
 export {
   useFocusState,
diff --git a/packages/compass-generative-ai/src/components/ai-optin-modal.tsx b/packages/compass-generative-ai/src/components/ai-optin-modal.tsx
@@ -7,9 +7,9 @@ import {
   css,
   spacing,
   palette,
-  MarketingModal,
   Theme,
   useDarkMode,
+  MarketingModal,
 } from '@mongodb-js/compass-components';
 import { AiImageBanner } from './ai-image-banner';
 import { closeOptInModal, optIn } from '../store/atlas-optin-reducer';
