ADDED: typography headers

TODO: complete section buttons and typography

src/primitive-components/input-components/radio/radio.tsx

@@ -13,7 +13,7 @@ import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
  */
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>(
-    ({ centralRipple, ...props }, ref) => {
+    ({ centralRipple = true, ...props }, ref) => {
         const [isActive, setIsActive] = useState<boolean>(false),
             ripplesRef = useRef(null),
             events = useRippleEffect(ripplesRef, setIsActive);

src/primitive-components/typography/typography.tsx

@@ -0,0 +1,76 @@
+import { forwardRef, HTMLAttributes } from 'react';
+
+export const Typography = {
+    h1: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+        (props, ref) => {
+            return (
+                <h1
+                    className={`m3 m3-typography display-hero ${props.className}`}
+                    ref={ref}
+                >
+                    {props.children}
+                </h1>
+            );
+        },
+    ),
+    h2: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+        (props, ref) => {
+            return (
+                <h2
+                    className={`m3 m3-typography display-large ${props.className}`}
+                    ref={ref}
+                >
+                    {props.children}
+                </h2>
+            );
+        },
+    ),
+    h3: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+        (props, ref) => {
+            return (
+                <h3
+                    className={`m3 m3-typography headline-medium ${props.className}`}
+                    ref={ref}
+                >
+                    {props.children}
+                </h3>
+            );
+        },
+    ),
+    h4: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+        (props, ref) => {
+            return (
+                <h4
+                    className={`m3 m3-typography headline-small ${props.className}`}
+                    ref={ref}
+                >
+                    {props.children}
+                </h4>
+            );
+        },
+    ),
+    h5: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+        (props, ref) => {
+            return (
+                <h5
+                    className={`m3 m3-typography title-medium ${props.className}`}
+                    ref={ref}
+                >
+                    {props.children}
+                </h5>
+            );
+        },
+    ),
+    h6: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+        (props, ref) => {
+            return (
+                <h6
+                    className={`m3 m3-typography title-small ${props.className}`}
+                    ref={ref}
+                >
+                    {props.children}
+                </h6>
+            );
+        },
+    ),
+};