chore: update Text component - fix props

packages/design-system/src/components/Text/Text.tsx

@@ -1,30 +1,32 @@
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, HTMLAttributes } from 'react';
 import { textRecipe, TextRecipe } from './Text.css';
 import { CommonBaseProps } from '../../utils/common-props';
 
-type TextProps<T extends keyof JSX.IntrinsicElements> = TextRecipe & {
+// from from https://github.com/kripod/react-polymorphic-box
+type AsProp<T extends React.ElementType = React.ElementType> = {
   as?: T;
-  className?: string;
-  children: React.ReactNode;
-  'data-testid'?: string;
-  style?: React.CSSProperties;
-} & CommonBaseProps;
+};
 
-export const Text = forwardRef<HTMLElement, React.PropsWithChildren<TextProps<any>>>(
-  (
-    { variant, weight, children, color, 'data-testid': dataTestId, className, as: Tag = 'p', ...props },
-    forwardedRef
-  ) => {
+type TextProps<T extends React.ElementType = React.ElementType> = Omit<React.ComponentProps<T>, keyof AsProp> &
+  CommonBaseProps &
+  TextRecipe & {
+    children: React.ReactNode;
+  };
+
+export const Text: <T extends React.ElementType = React.ElementType>(props: TextProps<T>) => React.ReactElement | null =
+  forwardRef(function Text(
+    { variant, weight, children, color, 'data-testid': dataTestId, className, as: Tag = 'p', ...props }: TextProps,
+    ref: React.Ref<Element>
+  ) {
     return (
       <Tag
         className={clsx(textRecipe({ variant, weight, color }), className)}
-        ref={forwardedRef}
         data-testid={dataTestId}
+        ref={ref}
         {...props}
       >
         {children}
       </Tag>
     );
-  }
-);
+  });