removed the necessity for hardcoded line height variables

src/views/components/common/Divider/Divider.module.scss

@@ -0,0 +1,5 @@
+@import 'src/views/styles/base.module.scss';
+
+hr {
+    border: 1px solid $limestone;
+}

src/views/components/common/Divider/Divider.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import classnames from 'classnames';
+import { Color } from 'src/views/styles/colors.module.scss';
+import styles from './Divider.module.scss';
+
+export type Props = {
+    color?: Color | React.CSSProperties['borderColor'];
+    type?: 'solid' | 'dashed' | 'dotted';
+    style?: React.CSSProperties;
+    className?: string;
+    testId?: string;
+};
+
+/**
+ * This is a reusable divider component that can be used to separate content
+ */
+export default function Divider(props: Props) {
+    const style = {
+        ...props.style,
+        borderColor: props.color,
+        borderStyle: props.type,
+    };
+
+    return <hr data-testid={props.testId} style={style} className={classnames(styles.divider, props.className)} />;
+}

src/views/components/common/Text/Text.module.scss

@@ -1,11 +1,11 @@
-@import "src/views/styles/base.module.scss";
+@import 'src/views/styles/base.module.scss';
 
 .text {
     font-family: 'Inter', sans-serif;
     color: $charcoal;
+    line-height: initial;
 }
 
-
 .light_weight {
     font-weight: $light_weight;
 }
@@ -53,28 +53,3 @@
 .xx_large_size {
     font-size: $xx_large_size;
 }
-
-.x_small_line_height {
-    line-height: $x_small_line_height;
-}
-
-.small_line_height {
-    line-height: $small_line_height;
-}
-
-.medium_line_height {
-    line-height: $medium_line_height;
-}
-
-.large_line_height {
-    line-height: $large_line_height;
-}
-
-.x_large_line_height {
-    line-height: $x_large_line_height;
-}
-
-.xx_large_line_height {
-    line-height: $xx_large_line_height;
-}
-

src/views/components/common/Text/Text.tsx

@@ -27,15 +27,8 @@ export default function Text(props: PropsWithChildren<TextProps>) {
 
     const weightClass = `${props.weight ?? 'regular'}_weight`;
     const fontSizeClass = `${props.size ?? 'medium'}_size`;
-    const lineHightClass = `${props.size ?? 'medium'}_line_height`;
 
-    const className = classNames(
-        styles.text,
-        styles[weightClass],
-        styles[fontSizeClass],
-        styles[lineHightClass],
-        props.className
-    );
+    const className = classNames(styles.text, styles[weightClass], styles[fontSizeClass], props.className);
 
     if (props.span) {
         return (