fix: tag heading levels properly (#1374)

This pull request includes updates to the heading levels in the table of
contents and MDX components to ensure consistency and improve
accessibility.

Changes to heading levels:

*
[`src/components/table-of-contents.js`](diffhunk://#diff-bd59de7c368e7b6e065bc8d893ae0400197c0a3bcb7d2e22a58fdc97e2abc9dbL79-R79):
Changed the heading level from `h3` to `h2` for the "Table of contents"
heading to improve accessibility and consistency.
*
[`src/mdx/components.js`](diffhunk://#diff-d4d36da21aca0163a287721a4d65a9cb75e8f1da88ba43b373dff9ad0fb81dc7L127-R130):
Updated the heading levels in the `Headings` component to ensure that
`H3` wraps `h2`, `H4` wraps `h3`, `H5` wraps `h4`, and `H6` wraps `h5`
to maintain a proper heading hierarchy.

src/components/table-of-contents.js

@@ -76,7 +76,7 @@ export const Desktop = withTableOfContents(({items}) => (
       maxHeight: `calc(100vh - ${SCROLL_MARGIN_TOP}px)`,
     }}
   >
-    <Heading as="h3" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold'}} id="toc-heading">
+    <Heading as="h2" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold'}} id="toc-heading">
       Table of contents
     </Heading>
     <Box

src/mdx/components.js

@@ -125,10 +125,10 @@ const Headings = {
 
 export const H1 = Headings.wrap('h1')
 export const H2 = Headings.wrap('h2')
-export const H3 = Headings.wrap('h3')
-export const H4 = Headings.wrap('h4')
-export const H5 = Headings.wrap('h5')
-export const H6 = Headings.wrap('h6')
+export const H3 = Headings.wrap('h2')
+export const H4 = Headings.wrap('h3')
+export const H5 = Headings.wrap('h4')
+export const H6 = Headings.wrap('h5')
 
 export const Blockquote = styled.blockquote`
   margin: 0 0 ${themeGet('space.3')};