fix: remove deprecated APIs

src/Type/Headings.story.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text, Heading1, Heading2, Heading3, Heading4 } from "../index";
+import { Text, Heading1, Heading2, Heading3, Heading4, StatusIndicator } from "../index";
 
 export default {
   title: "Components/Headings",
@@ -36,6 +36,11 @@ export const WithACustomMargin = () => (
   </>
 );
 
-WithACustomMargin.story = {
-  name: "With a custom margin",
-};
+export const Inline = () => (
+  <>
+    <Heading1 inline>Heading1</Heading1>
+    <StatusIndicator ml="x2" type="informative">
+      Status
+    </StatusIndicator>
+  </>
+);

src/Type/Headings.tsx

@@ -1,35 +1,59 @@
+import styled from "styled-components";
+import { addStyledProps } from "../StyledProps";
 import Text from "./Text";
 
-const Heading1 = Text.withComponent("h1");
-Heading1.defaultProps = {
-  fontSize: "heading1",
-  lineHeight: "heading1",
-  fontWeight: "light",
-  mt: 0,
-  mb: "x6",
-};
-const Heading2 = Text.withComponent("h2");
-Heading2.defaultProps = {
-  fontSize: "heading2",
-  lineHeight: "heading2",
-  fontWeight: "normal",
-  mt: 0,
-  mb: "x2",
-};
-const Heading3 = Text.withComponent("h3");
-Heading3.defaultProps = {
-  fontSize: "heading3",
-  lineHeight: "heading3",
-  fontWeight: "medium",
-  mt: 0,
-  mb: "x1",
-};
-const Heading4 = Text.withComponent("h4");
-Heading4.defaultProps = {
-  fontSize: "heading4",
-  lineHeight: "heading4",
-  fontWeight: "bold",
-  mt: 0,
-  mb: "x1",
-};
-export { Heading1, Heading2, Heading3, Heading4 };
+export const Heading1 = styled(Text).attrs((props) => ({
+  as: "h1",
+  ...props,
+}))(
+  ({ theme }) => ({
+    fontSize: theme.fontSizes.heading1,
+    lineHeight: theme.lineHeights.heading1,
+    fontWeight: theme.fontWeights.light,
+    marginTop: 0,
+    marginBottom: theme.space.x6,
+  }),
+  addStyledProps
+);
+
+export const Heading2 = styled(Text).attrs((props) => ({
+  as: "h2",
+  ...props,
+}))(
+  ({ theme }) => ({
+    fontSize: theme.fontSizes.heading2,
+    lineHeight: theme.lineHeights.heading2,
+    fontWeight: theme.fontWeights.normal,
+    marginTop: 0,
+    marginBottom: theme.space.x2,
+  }),
+  addStyledProps
+);
+
+export const Heading3 = styled(Text).attrs((props) => ({
+  as: "h3",
+  ...props,
+}))(
+  ({ theme }) => ({
+    fontSize: theme.fontSizes.heading3,
+    lineHeight: theme.lineHeights.heading3,
+    fontWeight: theme.fontWeights.medium,
+    marginTop: 0,
+    marginBottom: theme.space.x1,
+  }),
+  addStyledProps
+);
+
+export const Heading4 = styled(Text).attrs((props) => ({
+  as: "h4",
+  ...props,
+}))(
+  ({ theme }) => ({
+    fontSize: theme.fontSizes.heading4,
+    lineHeight: theme.lineHeights.heading4,
+    fontWeight: theme.fontWeights.bold,
+    marginTop: 0,
+    marginBottom: theme.space.x1,
+  }),
+  addStyledProps
+);