From 2efab8f1fea12b6e8cddef8b59cbfad8b0d3b320 Mon Sep 17 00:00:00 2001
From: Jake Laderman <jsladerman@gmail.com>
Date: Thu, 28 Nov 2024 19:23:57 -0600
Subject: [PATCH] fix: callout causing bug in prod

---
 src/markdoc/components/Callout.tsx | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/markdoc/components/Callout.tsx b/src/markdoc/components/Callout.tsx
index 6330203d..ec313fed 100644
--- a/src/markdoc/components/Callout.tsx
+++ b/src/markdoc/components/Callout.tsx
@@ -45,19 +45,15 @@ function MarkdocCallout({
   )
 }
 
-const StyledCallout = styled(MarkdocCallout)`
-  ${({ theme }) => ({
-    marginTop: theme.spacing.xlarge,
-    marginBottom: theme.spacing.xlarge,
-    color: theme.colors['text-light'],
-  })}
+const StyledCallout = styled(MarkdocCallout)(({ theme }) => ({
+  marginTop: theme.spacing.xlarge,
+  marginBottom: theme.spacing.xlarge,
+  color: theme.colors['text-light'],
 
-  ${Paragraph}, ${ListItem} {
-    ${({ theme }) => ({
-      ...theme.partials.text.body2,
-      color: theme.colors['text-light'],
-    })}
-  }
-`
+  [`${Paragraph}, ${ListItem}`]: {
+    ...theme.partials.text.body2,
+    color: theme.colors['text-light'],
+  },
+}))
 
 export default StyledCallout