Fix Heading component styles not being applied

Changed Heading from extending Text with attrs to being a standalone styled.div with its own attrs. This fixes the issue where attrs from parent components were overriding child component defaults.

Co-authored-by: ryan-roemer <445557+ryan-roemer@users.noreply.github.com>

Author: Copilot

packages/spectacle/src/components/typography.test.tsx

@@ -34,6 +34,11 @@ describe('<Heading />', () => {
     const { getByText } = mountWithTheme(<Heading>Spectacle!</Heading>);
     expect(getByText('Spectacle!')).toHaveStyle({ fontSize: 'h1' });
   });
+
+  it('should apply the secondary color from theme', () => {
+    const { getByText } = mountWithTheme(<Heading>Spectacle!</Heading>);
+    expect(getByText('Spectacle!')).toHaveStyle({ color: '#fc6986' });
+  });
 });
 
 describe('<Quote />', () => {

packages/spectacle/src/components/typography.tsx

@@ -53,15 +53,16 @@ const Link = styled.a.attrs<CommonTypographyProps & DecorationProps>(
   compose(color, typography, space, decoration)
 );
 
-const Heading = styled(Text).attrs<CommonTypographyProps>((props) => ({
+const Heading = styled.div.attrs<CommonTypographyProps>((props) => ({
   color: 'secondary',
   fontFamily: 'header',
   fontSize: 'h1',
   fontWeight: 'bold',
   textAlign: 'center',
   margin: 1,
+  padding: 0,
   ...props
-}))<CommonTypographyProps>({});
+}))<CommonTypographyProps>(compose(color, typography, space));
 
 const Quote = styled(
   Text as FC<