fix: do not use an <hr /> as a divider

src/Divider/Divider.story.tsx

@@ -1,9 +1,36 @@
 import React from "react";
 import { Divider } from ".";
+import { Text } from "../Type";
 
 export default {
   title: "Components/Divider",
   component: Divider,
 };
 
-export const _Divider = () => <Divider />;
+export const Default = () => (
+  <div>
+    <Text>Section A</Text>
+    <Divider />
+    <Text>Section B</Text>
+  </div>
+);
+
+export const WithCustomColourAndSpacing = () => (
+  <div>
+    <Text>Section A</Text>
+    <Divider borderColor="darkBlue" my="x1" />
+    <Text>Section B</Text>
+  </div>
+);
+
+export const WithCustomProperties = () => (
+  <div>
+    <Text>Section A</Text>
+    <Divider
+      borderColor="none"
+      height="2px"
+      backgroundImage={`linear-gradient(90deg, hsl(292deg 100% 97%) 0%, hsl(329deg 100% 19%) 17%, hsl(343deg 100% 36%) 33%, hsl(0deg 100% 50%) 50%, hsl(345deg 100% 69%) 67%, hsl(325deg 100% 84%) 83%, hsl(292deg 100% 97%) 100%);`}
+    />
+    <Text>Section B</Text>
+  </div>
+);

src/Divider/Divider.tsx

@@ -1,9 +1,19 @@
-import React from "react";
-import { Box } from "../Box";
-import { BoxProps } from "../Box/Box";
+import styled from "styled-components";
+import { addStyledProps, StyledProps } from "../StyledProps";
 
-const Divider = ({ borderColor = "lightGrey", ...props }: BoxProps) => (
-  <Box as="hr" borderTop="1px solid" borderColor={borderColor} {...props} />
+type Props = StyledProps;
+
+const Divider = styled.div<Props>(
+  ({ theme, color }) => ({
+    display: "flex",
+    marginTop: theme.space.x2,
+    marginBottom: theme.space.x2,
+    marginLeft: "0",
+    marginRight: "0",
+    borderBottom: "1px solid",
+    borderColor: color ? color : theme.colors.lightGrey,
+  }),
+  addStyledProps
 );
 
 export default Divider;