feat(Heading): Add asChild support to Heading (#1459)

Author: Barsnes

packages/react/src/components/Typography/Heading/Heading.tsx

@@ -1,6 +1,7 @@
 import type { ElementType, HTMLAttributes } from 'react';
 import React, { forwardRef } from 'react';
 import cl from 'clsx';
+import { Slot } from '@radix-ui/react-slot';
 
 import type { OverridableComponent } from '../../../types/OverridableComponent';
 
@@ -15,16 +16,31 @@ export type HeadingProps = {
   size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
   /** Adds margin-bottom */
   spacing?: boolean;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
 } & HTMLAttributes<HTMLHeadingElement>;
 
 /** Use `Heading` to render h1-6 elements with heading text styles.  */
 export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =
   forwardRef(
     (
-      { level = 1, size = 'xlarge', spacing = false, className, as, ...rest },
+      {
+        level = 1,
+        size = 'xlarge',
+        spacing = false,
+        className,
+        as,
+        asChild,
+        ...rest
+      },
       ref,
     ) => {
-      const Component = as ?? (`h${level ?? 1}` as ElementType);
+      const Component = asChild
+        ? Slot
+        : as ?? (`h${level ?? 1}` as ElementType);
 
       return (
         <Component