feat: Typography component for cmp library

src/components/Elements/Typography/index.tsx

@@ -0,0 +1,10 @@
+import React, { HTMLAttributes } from 'react';
+import { TypographyProps } from './interface';
+import { P } from './styles';
+
+export default (
+  props: HTMLAttributes<HTMLParagraphElement> & TypographyProps
+) => {
+  const { children, weight } = props;
+  return <P weight={weight}>{children}</P>;
+};

src/components/Elements/Typography/interface.ts

@@ -0,0 +1,10 @@
+import { theme } from './../../../theme';
+const weight = theme.typography.weight;
+
+export interface TypographyProps {
+  weight?:
+    | typeof weight.light
+    | typeof weight.regular
+    | typeof weight.bold
+    | typeof weight.black;
+}

src/components/Elements/Typography/styles.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { theme } from '../../../theme';
+import { TypographyProps } from './interface';
+
+export const P = styled('p')<TypographyProps>`
+  font-family: ${theme.typography.font.base};
+  font-weight: ${(p) => (p ? p.weight : theme.typography.weight.regular)};
+`;