Extracted mdx-mapped headings to a separate file. Applied correct sizing to headings

packages/website/ts/components/docs/headings.tsx

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { Heading } from 'ts/components/text';
+
+const H1 = styled(Heading).attrs({
+    size: 'large',
+    marginBottom: '1.875rem',
+})``;
+
+const H2 = styled(Heading).attrs({
+    size: 34,
+    asElement: 'h2',
+    marginBottom: '1rem',
+})`
+    /* @TODO: adjust the heading size variables in global styles instead of using custom size here */
+    @media (max-width: 768px) {
+        font-size: 20px !important;
+    }
+`;
+
+const H3 = styled(Heading).attrs({
+    size: 'default',
+    asElement: 'h3',
+    marginBottom: '1rem',
+})``;
+
+const H4 = styled(Heading).attrs({
+    size: 'small',
+    asElement: 'h4',
+    fontWeight: '300',
+    marginBottom: '1rem',
+})``;
+
+export { H1, H2, H3, H4 };