[Components] Use `styles[as]` for Heading

Is your feature request related to a problem? Please describe. While using the Heading component, I came across the issue that my h1-h3 styles were ignored:

// theme.js
export default {
  fontSizes: {
    sm: '0.8rem', //  1.25 ** -1
    base: '1rem', //  1.25 **  0
    lg: '1.5rem', //  1.25 ** +2
    xl: '2rem', //    1.25 ** +3
    '2xl': '3rem', // 1.25 ** +5
  },
  styles: {
    h1: { fontSize: '2xl' },
    h2: { fontSize: 'xl' },
    h3: { fontSize: 'lg' },
  },
};

I would like to alter the styles of headings without adding them to the root styles (body h1, body h2 and body h3).

Describe the solution you’d like The Heading component should inherit the style determined by its as prop.

Describe alternatives you’ve considered Set the default as value of Heading to Styled.h2.

[jxnblk]

The theme.styles object is specifically intended for markdown/MDX content. There are many cases where a headings styles should not match the HTML element to account for a11y, SEO, and the intended visual designs. I do not think these styles should be attached to an HTML element outside of markdown, but as stated above, you can use variant: 'styles.h1' where needed or create a custom component to reuse behavior in your application

[kripod]

Sounds reasonable, thank you for the detailed explanation!