From d38906618222cf36fe5bade954c815af56b170c9 Mon Sep 17 00:00:00 2001
From: James Brooks <jamesbrooks@spotify.com>
Date: Thu, 3 Jul 2025 17:13:25 +0100
Subject: [PATCH] Canon - Update Heading & Text types

Signed-off-by: James Brooks <jamesbrooks@spotify.com>
---
 packages/canon/src/components/Heading/Heading.tsx | 13 +++++++------
 packages/canon/src/components/Text/Text.tsx       | 11 +++++++----
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/canon/src/components/Heading/Heading.tsx b/packages/canon/src/components/Heading/Heading.tsx
index 3d173e98ac..4ea8bdcfe6 100644
--- a/packages/canon/src/components/Heading/Heading.tsx
+++ b/packages/canon/src/components/Heading/Heading.tsx
@@ -54,10 +54,11 @@ function HeadingComponent<T extends ElementType = 'h1'>(
 HeadingComponent.displayName = 'Heading';
 
 /** @public */
-export const Heading = forwardRef(HeadingComponent) as <
-  T extends ElementType = 'h1',
->(
-  props: HeadingProps<T> & { ref?: React.Ref<any> },
-) => React.ReactElement | null;
+export const Heading = forwardRef(HeadingComponent) as {
+  <T extends ElementType = 'h1'>(
+    props: HeadingProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },
+  ): React.ReactElement<HeadingProps<T>, T>;
+  displayName: string;
+};
 
-(Heading as any).displayName = 'Heading';
+Heading.displayName = 'Heading';
diff --git a/packages/canon/src/components/Text/Text.tsx b/packages/canon/src/components/Text/Text.tsx
index c37f0e4ce7..275765c42d 100644
--- a/packages/canon/src/components/Text/Text.tsx
+++ b/packages/canon/src/components/Text/Text.tsx
@@ -56,8 +56,11 @@ function TextComponent<T extends ElementType = 'p'>(
 TextComponent.displayName = 'Text';
 
 /** @public */
-export const Text = forwardRef(TextComponent) as <T extends ElementType = 'p'>(
-  props: TextProps<T> & { ref?: React.Ref<any> },
-) => React.ReactElement | null;
+export const Text = forwardRef(TextComponent) as {
+  <T extends ElementType = 'p'>(
+    props: TextProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },
+  ): React.ReactElement<TextProps<T>, T>;
+  displayName: string;
+};
 
-(Text as any).displayName = 'Text';
+Text.displayName = 'Text';