From 856297fc66e0ba3b7ad792267bbb3cd9103ebf9e Mon Sep 17 00:00:00 2001
From: fichtnerma <72387685+fichtnerma@users.noreply.github.com>
Date: Mon, 13 Jan 2025 08:57:46 +0100
Subject: [PATCH] Fix warning of props being forwarded to the DOM (#3083)

Co-authored-by: Markus Fichtner <markus.fichtner@vivid-planet.com>
---
 demo/site/src/common/components/Typography.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/demo/site/src/common/components/Typography.tsx b/demo/site/src/common/components/Typography.tsx
index a484fd07c9..823bca53da 100644
--- a/demo/site/src/common/components/Typography.tsx
+++ b/demo/site/src/common/components/Typography.tsx
@@ -191,11 +191,15 @@ const variantToElementMap: Record<TypographyVariant, "h1" | "h2" | "h3" | "h4" |
     p200: "p",
 };
 
-export const Typography = styled.div.attrs<{
-    as?: unknown;
-    variant?: TypographyVariant;
-    bottomSpacing?: boolean;
-}>((props) => ({ as: props.as ?? variantToElementMap[props.variant ?? "p300"] }))`
+export const Typography = styled.div
+    .withConfig({
+        shouldForwardProp: (prop) => !["variant", "bottomSpacing"].includes(prop),
+    })
+    .attrs<{
+        as?: unknown;
+        variant?: TypographyVariant;
+        bottomSpacing?: boolean;
+    }>((props) => ({ as: props.as ?? variantToElementMap[props.variant ?? "p300"] }))`
     font-family: ${({ theme }) => theme.fontFamily};
     ${({ variant = "p300" }) => typographyVariantStyle[variant]};
     margin-top: 0;