Initial component

@@ -0,0 +2,4 @@
+  position: relative;
+}
+
+.line {

@@ -0,0 +9,4 @@
+}
+
+.timelineSections {
+  position: absolute;

@@ -0,0 +20,4 @@
+
+.timelineSection {
+  width: 100%;
+  height: inherit;

@@ -0,0 +40,4 @@
+}
+
+.circle {
+  margin-left: calc(2rem / 16);

@@ -0,0 +72,4 @@
+}
+
+.textHover {
+  border: calc(2rem / 16) solid var(--secondary-accent-light);

@@ -0,0 +12,4 @@
+  /** Width of the entire timeline, in pixels. */
+  width: number;
+  /** Height of the entire timeline, in pixels. */
+  height: number;

@@ -0,0 +18,4 @@
+  /** Width of time label, in pixels. */
+  timeWidth?: number;
+  /** Width of text label, in pixels. */
+  textWidth?: number;

@@ -0,0 +20,4 @@
+  /** Width of text label, in pixels. */
+  textWidth?: number;
+  /** Distance between labels to middle line, in pixels. */
+  labelsOffset?: number;

@@ -0,0 +43,4 @@
+    >
+      <div
+        className={styles.line}
+        style={{ height: height, left: width / 2 }}

@@ -0,0 +44,4 @@
+      <div
+        className={styles.line}
+        style={{ height: height, left: width / 2 }}
+      ></div>

@@ -0,0 +45,4 @@
+        className={styles.line}
+        style={{ height: height, left: width / 2 }}
+      ></div>
+      <div className={styles.timelineSections} style={{ width: width }}>

@@ -0,0 +76,4 @@
+  width,
+  isTimeUppercase,
+  timeWidth,
+

@@ -0,0 +80,4 @@
+  textWidth,
+  labelsOffset,
+}: TimelineSectionProps) {
+  const [onHover, setHover] = useState(false);

@@ -0,0 +84,4 @@
+
+  const handleMouseEnter = () => {
+    setHover(true);
+    console.log(onHover);

@@ -0,0 +93,4 @@
+    <div className={styles.timelineSection}>
+      <div
+        style={{
+          width: (width - labelsOffset - labelsOffset - 30) / 2 - timeWidth,

@@ -0,0 +106,4 @@
+      >
+        {isTimeUppercase ? datum.time.toUpperCase() : datum.time}
+      </div>
+      <div style={{ width: labelsOffset }}></div>

@@ -0,0 +109,4 @@
+      <div style={{ width: labelsOffset }}></div>
+      <div
+        className={styles.circle}
+        style={{ width: 30 }}

@@ -0,0 +115,4 @@
+      >
+        <div
+          className={styles.innerCircle}
+          style={{ display: onHover ? "inline" : "none" }}

@@ -0,0 +1,78 @@
+.wrapper {
+  position: relative;
+  height: 100%;

@@ -0,0 +22,4 @@
+
+.timelineSection {
+  width: 100%;
+  height: 100%;

@@ -0,0 +48,4 @@
+    throw new Error(
+      `<Timeline /> - timeWidth + gap + ${
+        outerCircleWidth > lineWidth ? "outerCircleWidth" : "lineWidth"
+      } + gap + textWidth  (${timeWidth} + ${gap} + ${largerMiddleElemeent} + ${gap} + ${textWidth} = ${requestedWidth}) is larger than width (${width})`

@@ -0,0 +111,4 @@
+  textWidth,
+  gap,
+}: TimelineSectionProps) {
+  const [onHover, setHover] = useState(false);