diff --git a/components/BarGraph.tsx b/components/BarGraph.tsx
index 222770d..b4b0a03 100644
--- a/components/BarGraph.tsx
+++ b/components/BarGraph.tsx
@@ -25,9 +25,9 @@ interface BarGraphProps {
     right: number;
   };
   className?: string;
-  /** Font size of the category tick labels, in pixels. Default is 16px. */
+  /** Font size of the category axis tick labels, in pixels. Default is 16px. */
   categoryTickLabelSize?: number;
-  /** Font size of the value tick labels, in pixels. Default is 16px. */
+  /** Font size of the value axis tick labels, in pixels. Default is 16px. */
   valueTickLabelSize?: number;
   /** Font size of the value that appears when hovering over a bar, in pixels. */
   hoverLabelSize?: number;
diff --git a/components/GroupedBarGraph.module.css b/components/GroupedBarGraph.module.css
new file mode 100644
index 0000000..96ab995
--- /dev/null
+++ b/components/GroupedBarGraph.module.css
@@ -0,0 +1,38 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  width: min-content;
+}
+
+.barBackground {
+  fill: var(--card-background);
+}
+
+.barText {
+  visibility: hidden;
+
+  font-family: "Inconsolata", monospace;
+  font-weight: 800;
+  fill: var(--label);
+}
+
+.singleBar:hover .barText {
+  visibility: visible;
+}
+
+.tickLabel {
+  font-family: "Inconsolata", monospace;
+  font-weight: 800;
+  fill: var(--label);
+}
+
+.axisLabel {
+  font-family: "Inconsolata", monospace;
+  font-weight: 800;
+  fill: var(--label);
+}
+
+.legend {
+  display: flex;
+  margin: calc(16rem / 16);
+}
diff --git a/components/GroupedBarGraph.tsx b/components/GroupedBarGraph.tsx
new file mode 100644
index 0000000..28ef034
--- /dev/null
+++ b/components/GroupedBarGraph.tsx
@@ -0,0 +1,621 @@
+import { AxisBottom, AxisLeft } from "@visx/axis";
+import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
+import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
+import { GridColumns, GridRows } from "@visx/grid";
+import { Group } from "@visx/group";
+import { LegendOrdinal } from "@visx/legend";
+import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
+import { Bar, BarGroup, BarGroupHorizontal } from "@visx/shape";
+import { BarGroupBar as BarGroupBarType } from "@visx/shape/lib/types";
+import { Text } from "@visx/text";
+import React, { useState } from "react";
+import { Color } from "utils/Color";
+
+import styles from "./GroupedBarGraph.module.css";
+
+interface GroupedBarGraphProps {
+  data: GroupedBarGraphData[];
+  /** Colours of bars in each group. */
+  barColors: string[];
+  /** Object mapping from the possible colours of bars in each group (barColors) to the colour of the bar when hovered. */
+  barHoverColorsMap: Record<string, string>;
+  /** Width of the entire graph, in pixels. */
+  width: number;
+  /** Height of the entire graph, in pixels. */
+  height: number;
+  /** Distance between the edge of the graph and the area where the bars are drawn, in pixels. */
+  margin: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  };
+  className?: string;
+  /** Font size of the category axis tick labels, in pixels. Default is 16px. */
+  categoryTickLabelSize?: number;
+  /** Font size of the value axis tick labels, in pixels. Default is 16px. */
+  valueTickLabelSize?: number;
+  /** Font size of the value that appears when hovering over a bar, in pixels. */
+  hoverLabelSize?: number;
+  /** Label text for the category axis. */
+  categoryAxisLabel?: string;
+  /** Font size of the label for the cateogry axis, in pixels. */
+  categoryAxisLabelSize?: number;
+  /** Controls the distance between the category axis label and the category axis. */
+  categoryAxisLabelOffset?: number;
+  /** Label text for the value axis. */
+  valueAxisLabel?: string;
+  /** Font size of the label for the value axis, in pixels. */
+  valueAxisLabelSize?: number;
+  /** Controls the distance between the value axis label and the value axis. */
+  valueAxisLabelOffset?: number;
+  legendProps?: LegendProps;
+}
+
+// Best format for props
+interface GroupedBarGraphData {
+  category: string;
+  values: {
+    [key: string]: number;
+  };
+}
+
+// Best format for visx
+interface BarGroupData {
+  category: string;
+  [key: string]: string | number;
+}
+
+interface LegendProps {
+  /** Position of the legend, relative to the graph. */
+  position?: "top" | "right";
+  /** Font size of the labels in the legend, in pixels. Default is 16px. */
+  itemLabelSize?: number;
+  /** Gap between items in the legend, in pixels. */
+  itemGap?: number;
+  /** Distance between the legend and other adjacent elements, in pixels. */
+  margin?: {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+  };
+}
+
+// BAR_PADDING must be in the range [0, 1)
+const BAR_PADDING = 0.2;
+const BAR_TEXT_PADDING = 12;
+
+const DEFAULT_LABEL_SIZE = 16;
+const DEFAULT_LEGEND_GAP = 16;
+
+export function GroupedBarGraphVertical(props: GroupedBarGraphProps) {
+  const {
+    data: propsData,
+    barColors,
+    barHoverColorsMap,
+    width,
+    height,
+    margin,
+    className,
+    categoryTickLabelSize = DEFAULT_LABEL_SIZE,
+    valueTickLabelSize = DEFAULT_LABEL_SIZE,
+    hoverLabelSize,
+    categoryAxisLabel,
+    categoryAxisLabelSize = DEFAULT_LABEL_SIZE,
+    categoryAxisLabelOffset = 0,
+    valueAxisLabel,
+    valueAxisLabelSize = DEFAULT_LABEL_SIZE,
+    valueAxisLabelOffset = 0,
+    legendProps,
+  } = props;
+
+  const {
+    position: legendPosition = "right",
+    itemLabelSize: legendLabelSize = DEFAULT_LABEL_SIZE,
+    itemGap: legendItemGap = DEFAULT_LEGEND_GAP,
+    margin: legendMargin = {},
+  } = legendProps ?? {};
+
+  const data: BarGroupData[] = propsData.map((datum: GroupedBarGraphData) => {
+    return { category: datum.category, ...datum.values };
+  });
+
+  const keys = Object.keys(propsData[0].values);
+  propsData.forEach((d: GroupedBarGraphData) => {
+    const currentKeys = Object.keys(d.values);
+    if (
+      keys.length != currentKeys.length ||
+      !keys.every((key: string) => currentKeys.includes(key))
+    ) {
+      throw new Error(
+        "Every category in a GroupedBarGraph must have the same keys. Check the data prop"
+      );
+    }
+  });
+
+  const allValues = propsData
+    .map((d: GroupedBarGraphData) => Object.values(d.values))
+    .flat();
+
+  const categoryMax = width - margin.left - margin.right;
+  const valueMax = height - margin.top - margin.bottom;
+
+  const getCategory = (d: BarGroupData) => d.category;
+
+  const categoryScale = scaleBand({
+    domain: data.map(getCategory),
+    padding: BAR_PADDING,
+  });
+
+  const keyScale = scaleBand({
+    domain: keys,
+  });
+
+  const valueScale = scaleLinear<number>({
+    domain: [0, Math.max(...allValues)],
+  });
+
+  const colorScale = scaleOrdinal<string, string>({
+    domain: keys,
+    range: barColors,
+  });
+
+  categoryScale.rangeRound([0, categoryMax]);
+  keyScale.rangeRound([0, categoryScale.bandwidth()]);
+  valueScale.rangeRound([valueMax, 0]);
+
+  return (
+    <div
+      className={className ? `${className} ${styles.wrapper}` : styles.wrapper}
+      style={{
+        flexDirection: legendPosition === "right" ? "row" : "column-reverse",
+      }}
+    >
+      <svg width={width} height={height}>
+        <defs>
+          {Object.keys(barHoverColorsMap).map((color: string) => {
+            // remove brackets from colour name to make ids work
+            const colorId = removeBrackets(color);
+            return (
+              <filter key={`glow-${color}`} id={`glow-${colorId}`}>
+                <feDropShadow
+                  dx="0"
+                  dy="0"
+                  stdDeviation="4"
+                  floodColor={barHoverColorsMap[color]}
+                />
+              </filter>
+            );
+          })}
+        </defs>
+        <Group top={margin.top} left={margin.left}>
+          <Group>
+            {data.map((d, idx) => {
+              const barName = `${getCategory(d)}-${idx}`;
+              const barWidth = categoryScale.bandwidth();
+              const backgroundBarWidth = barWidth / (1 - BAR_PADDING);
+              return idx % 2 === 0 ? (
+                <Bar
+                  className={styles.barBackground}
+                  key={`bar-${barName}-background`}
+                  x={
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    categoryScale(getCategory(d))! -
+                    (backgroundBarWidth - barWidth) / 2
+                  }
+                  y={0}
+                  width={backgroundBarWidth}
+                  height={valueMax}
+                />
+              ) : null;
+            })}
+          </Group>
+          <GridRows
+            scale={valueScale}
+            width={categoryMax}
+            numTicks={5}
+            stroke={Color.label}
+            strokeWidth={4}
+            strokeDasharray="10"
+            strokeLinecap="round"
+          />
+          <BarGroup
+            data={data}
+            keys={keys}
+            height={valueMax}
+            x0={getCategory}
+            x0Scale={categoryScale}
+            x1Scale={keyScale}
+            yScale={valueScale}
+            color={colorScale}
+          >
+            {(barGroups) =>
+              barGroups.map((barGroup) => (
+                <Group
+                  key={`bar-group-${barGroup.x0}-${barGroup.index}`}
+                  left={barGroup.x0}
+                >
+                  {barGroup.bars.map((bar) => (
+                    <HoverableBar
+                      key={`bar-group-bar-${barGroup.x0}-${barGroup.index}-${bar.key}-${bar.index}`}
+                      bar={bar}
+                      valueMax={valueMax}
+                      hoverFillColor={barHoverColorsMap[bar.color]}
+                      hoverLabelSize={hoverLabelSize}
+                    />
+                  ))}
+                </Group>
+              ))
+            }
+          </BarGroup>
+        </Group>
+        <AxisBottom
+          scale={categoryScale}
+          top={valueMax + margin.top}
+          left={margin.left}
+          hideAxisLine
+          hideTicks
+          tickLabelProps={() => {
+            return {
+              ...bottomTickLabelProps(),
+              className: styles.tickLabel,
+              dy: "-0.25rem",
+              fontSize: `${categoryTickLabelSize / 16}rem`,
+              width: categoryScale.bandwidth(),
+              verticalAnchor: "start",
+            };
+          }}
+          label={categoryAxisLabel}
+          labelClassName={styles.axisLabel}
+          labelOffset={categoryAxisLabelOffset}
+          labelProps={{
+            fontSize: `${categoryAxisLabelSize / 16}rem`,
+          }}
+        />
+        <AxisLeft
+          scale={valueScale}
+          top={margin.top}
+          left={margin.left}
+          hideAxisLine
+          hideTicks
+          numTicks={5}
+          tickLabelProps={() => {
+            return {
+              ...leftTickLabelProps(),
+              className: styles.tickLabel,
+              dx: "-0.5rem",
+              dy: "0.25rem",
+              fontSize: `${valueTickLabelSize / 16}rem`,
+            };
+          }}
+          label={valueAxisLabel}
+          labelClassName={styles.axisLabel}
+          labelOffset={valueAxisLabelOffset}
+          labelProps={{
+            fontSize: `${valueAxisLabelSize / 16}rem`,
+          }}
+        />
+      </svg>
+      <LegendOrdinal
+        className={styles.legend}
+        style={{
+          marginTop: legendMargin.top,
+          marginRight: legendMargin.right,
+          marginBottom: legendMargin.bottom,
+          marginLeft: legendMargin.left,
+          fontSize: legendLabelSize,
+        }}
+        scale={colorScale}
+        direction={legendPosition === "right" ? "column" : "row"}
+        itemMargin={
+          legendPosition === "right"
+            ? `calc(${legendItemGap / 2}rem / 16) 0 calc(${
+                legendItemGap / 2
+              }rem / 16) 0`
+            : `0 calc(${legendItemGap / 2}rem / 16) 0 calc(${
+                legendItemGap / 2
+              }rem / 16)`
+        }
+      />
+    </div>
+  );
+}
+
+export function GroupedBarGraphHorizontal(props: GroupedBarGraphProps) {
+  const {
+    data: propsData,
+    barColors,
+    barHoverColorsMap,
+    width,
+    height,
+    margin,
+    className,
+    categoryTickLabelSize = DEFAULT_LABEL_SIZE,
+    valueTickLabelSize = DEFAULT_LABEL_SIZE,
+    hoverLabelSize,
+    categoryAxisLabel,
+    categoryAxisLabelSize = DEFAULT_LABEL_SIZE,
+    categoryAxisLabelOffset = 0,
+    valueAxisLabel,
+    valueAxisLabelSize = DEFAULT_LABEL_SIZE,
+    valueAxisLabelOffset = 0,
+    legendProps,
+  } = props;
+
+  const {
+    position: legendPosition = "top",
+    itemLabelSize: legendLabelSize = DEFAULT_LABEL_SIZE,
+    itemGap: legendItemGap = DEFAULT_LEGEND_GAP,
+    margin: legendMargin = {},
+  } = legendProps ?? {};
+
+  const data: BarGroupData[] = propsData.map((datum: GroupedBarGraphData) => {
+    return { category: datum.category, ...datum.values };
+  });
+
+  const keys = Object.keys(propsData[0].values);
+  propsData.forEach((d: GroupedBarGraphData) => {
+    const currentKeys = Object.keys(d.values);
+    if (
+      keys.length != currentKeys.length ||
+      !keys.every((key: string) => currentKeys.includes(key))
+    ) {
+      throw new Error(
+        "Every category in a GroupedBarGraph must have the same keys. Check the data prop"
+      );
+    }
+  });
+
+  const allValues = propsData
+    .map((d: GroupedBarGraphData) => Object.values(d.values))
+    .flat();
+
+  const categoryMax = height - margin.top - margin.bottom;
+  const valueMax = width - margin.left - margin.right;
+
+  const getCategory = (d: BarGroupData) => d.category;
+
+  const categoryScale = scaleBand({
+    domain: data.map(getCategory),
+    padding: BAR_PADDING,
+  });
+
+  const keyScale = scaleBand({
+    domain: keys,
+  });
+
+  const valueScale = scaleLinear<number>({
+    domain: [Math.max(...allValues), 0],
+  });
+
+  const colorScale = scaleOrdinal<string, string>({
+    domain: keys,
+    range: barColors,
+  });
+
+  categoryScale.rangeRound([0, categoryMax]);
+  keyScale.rangeRound([0, categoryScale.bandwidth()]);
+  valueScale.rangeRound([valueMax, 0]);
+
+  return (
+    <div
+      className={className ? `${className} ${styles.wrapper}` : styles.wrapper}
+      style={{
+        flexDirection: legendPosition === "right" ? "row" : "column-reverse",
+      }}
+    >
+      <svg width={width} height={height}>
+        <defs>
+          {Object.keys(barHoverColorsMap).map((color: string) => {
+            // remove brackets from colour name to make ids work
+            const colorId = removeBrackets(color);
+            return (
+              <filter key={`glow-${color}`} id={`glow-${colorId}`}>
+                <feDropShadow
+                  dx="0"
+                  dy="0"
+                  stdDeviation="4"
+                  floodColor={barHoverColorsMap[color]}
+                />
+              </filter>
+            );
+          })}
+        </defs>
+        <Group top={margin.top} left={margin.left}>
+          <Group>
+            {data.map((d, idx) => {
+              const barName = `${getCategory(d)}-${idx}`;
+              const barWidth = categoryScale.bandwidth();
+              const backgroundBarWidth = barWidth / (1 - BAR_PADDING);
+              return idx % 2 === 0 ? (
+                <Bar
+                  className={styles.barBackground}
+                  key={`bar-${barName}-background`}
+                  x={0}
+                  y={
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    categoryScale(getCategory(d))! -
+                    (backgroundBarWidth - barWidth) / 2
+                  }
+                  width={valueMax}
+                  height={backgroundBarWidth}
+                />
+              ) : null;
+            })}
+          </Group>
+          <GridColumns
+            scale={valueScale}
+            height={categoryMax}
+            numTicks={5}
+            stroke={Color.label}
+            strokeWidth={4}
+            strokeDasharray="10"
+            strokeLinecap="round"
+          />
+          <BarGroupHorizontal
+            data={data}
+            keys={keys}
+            width={valueMax}
+            y0={getCategory}
+            y0Scale={categoryScale}
+            y1Scale={keyScale}
+            xScale={valueScale}
+            color={colorScale}
+          >
+            {(barGroups) =>
+              barGroups.map((barGroup) => (
+                <Group
+                  key={`bar-group-${barGroup.y0}-${barGroup.index}`}
+                  top={barGroup.y0}
+                >
+                  {barGroup.bars.map((bar) => (
+                    <HoverableBar
+                      key={`bar-group-bar-${barGroup.y0}-${barGroup.index}-${bar.key}-${bar.index}`}
+                      bar={bar}
+                      valueMax={valueMax}
+                      hoverFillColor={barHoverColorsMap[bar.color]}
+                      hoverLabelSize={hoverLabelSize}
+                      isHorizontal
+                    />
+                  ))}
+                </Group>
+              ))
+            }
+          </BarGroupHorizontal>
+        </Group>
+        <AxisLeft
+          scale={categoryScale}
+          top={margin.top}
+          left={margin.left}
+          hideAxisLine
+          hideTicks
+          tickLabelProps={() => {
+            return {
+              ...leftTickLabelProps(),
+              className: styles.tickLabel,
+              dx: "-0.5rem",
+              dy: "0.25rem",
+              fontSize: `${valueTickLabelSize / 16}rem`,
+              height: categoryScale.bandwidth(),
+            };
+          }}
+          label={categoryAxisLabel}
+          labelClassName={styles.axisLabel}
+          labelOffset={categoryAxisLabelOffset}
+          labelProps={{
+            fontSize: `${categoryAxisLabelSize / 16}rem`,
+          }}
+        />
+        <AxisBottom
+          scale={valueScale}
+          top={categoryMax + margin.top}
+          left={margin.left}
+          hideAxisLine
+          hideTicks
+          numTicks={5}
+          tickLabelProps={() => {
+            return {
+              ...bottomTickLabelProps(),
+              className: styles.tickLabel,
+              dy: "-0.25rem",
+              fontSize: `${categoryTickLabelSize / 16}rem`,
+              verticalAnchor: "start",
+            };
+          }}
+          label={valueAxisLabel}
+          labelClassName={styles.axisLabel}
+          labelOffset={valueAxisLabelOffset}
+          labelProps={{
+            fontSize: `${valueAxisLabelSize / 16}rem`,
+          }}
+        />
+      </svg>
+      <LegendOrdinal
+        className={styles.legend}
+        style={{
+          marginTop: legendMargin.top,
+          marginRight: legendMargin.right,
+          marginBottom: legendMargin.bottom,
+          marginLeft: legendMargin.left,
+          fontSize: legendLabelSize,
+        }}
+        scale={colorScale}
+        direction={legendPosition === "right" ? "column" : "row"}
+        itemMargin={
+          legendPosition === "right"
+            ? `calc(${legendItemGap / 2}rem / 16) 0 calc(${
+                legendItemGap / 2
+              }rem / 16) 0`
+            : `0 calc(${legendItemGap / 2}rem / 16) 0 calc(${
+                legendItemGap / 2
+              }rem / 16)`
+        }
+      />
+    </div>
+  );
+}
+
+interface HoverableBarProps {
+  bar: BarGroupBarType<string>;
+  valueMax: number;
+  hoverFillColor?: string;
+  hoverLabelSize?: number;
+  isHorizontal?: boolean;
+}
+
+function HoverableBar(props: HoverableBarProps) {
+  const {
+    bar,
+    valueMax,
+    hoverLabelSize,
+    hoverFillColor,
+    isHorizontal = false,
+  } = props;
+
+  const [isHovered, setIsHovered] = useState(false);
+
+  const colorId = removeBrackets(bar.color);
+
+  return (
+    <Group
+      className={styles.singleBar}
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}
+    >
+      <Bar
+        x={bar.x}
+        y={bar.y}
+        width={bar.width}
+        height={bar.height}
+        fill={isHovered && hoverFillColor ? hoverFillColor : bar.color}
+        // apply the glow effect when the bar is hovered
+        filter={isHovered ? `url(#glow-${colorId})` : undefined}
+      />
+      <Text
+        className={styles.barText}
+        x={isHorizontal ? bar.width - BAR_TEXT_PADDING : bar.x + bar.width / 2}
+        y={
+          isHorizontal
+            ? bar.y + bar.height / 2
+            : valueMax - bar.height + BAR_TEXT_PADDING
+        }
+        fontSize={
+          hoverLabelSize ?? (isHorizontal ? bar.height : bar.width) * 0.5
+        }
+        textAnchor={isHorizontal ? "end" : "middle"}
+        verticalAnchor={isHorizontal ? "middle" : "start"}
+      >
+        {bar.value}
+      </Text>
+    </Group>
+  );
+}
+
+function removeBrackets(str: string) {
+  return str.replace(/\(|\)/g, "");
+}
diff --git a/components/StackedBarGraph.module.css b/components/StackedBarGraph.module.css
new file mode 100644
index 0000000..ffe660f
--- /dev/null
+++ b/components/StackedBarGraph.module.css
@@ -0,0 +1,35 @@
+.container {
+  position: relative;
+}
+
+.barStack:hover {
+  filter: drop-shadow(0 0 calc(4rem / 16) var(--label));
+}
+
+.legend {
+  position: absolute;
+  display: flex;
+  font-size: calc(16rem / 16);
+  top: 0;
+}
+
+.toolTip {
+  font-family: "Inconsolata", monospace;
+  top: 0;
+  left: 0;
+  position: absolute;
+  background-color: var(--label);
+  color: var(--primary-background);
+  pointer-events: none;
+  border-radius: calc(10rem / 16);
+  padding: calc(10rem / 16);
+}
+
+.toolTip p {
+  margin: 0 calc(5rem / 16);
+  font-size: calc(16rem / 16);
+}
+
+.key {
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/components/StackedBarGraph.tsx b/components/StackedBarGraph.tsx
new file mode 100644
index 0000000..7c195e0
--- /dev/null
+++ b/components/StackedBarGraph.tsx
@@ -0,0 +1,455 @@
+import { AxisLeft, AxisBottom } from "@visx/axis";
+import { localPoint } from "@visx/event";
+import { GridRows, GridColumns } from "@visx/grid";
+import { Group } from "@visx/group";
+import { LegendOrdinal } from "@visx/legend";
+import { Point } from "@visx/point";
+import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
+import { BarStack, BarStackHorizontal, Line } from "@visx/shape";
+import { SeriesPoint } from "@visx/shape/lib/types";
+import { withTooltip, Tooltip } from "@visx/tooltip";
+import { WithTooltipProvidedProps } from "@visx/tooltip/lib/enhancers/withTooltip";
+import React from "react";
+import { Color } from "utils/Color";
+
+import styles from "./StackedBarGraph.module.css";
+
+interface StackedBarData {
+  category: string;
+  [key: string]: number | string;
+}
+
+type TooltipData = {
+  bar: SeriesPoint<StackedBarData>;
+  key: string;
+  index: number;
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+  color: string;
+};
+
+export type StackedBarProps = {
+  data: StackedBarData[];
+  /** Width of the entire graph, in pixels, greater than 10.  */
+  width: number;
+  /** Height of the entire graph, in pixels. */
+  height: number;
+  /** Names of the groups appearing in the legend */
+  keys: string[];
+  /** Colours for each key */
+  colorRange: string[];
+  /** Distance between the edge of the graph and the area where the bars are drawn, in pixels. */
+  margin: { top: number; left: number };
+  /** Number of ticks for the value axis */
+  numTicksValueAxis?: number;
+  /** Distance between the left axis labels and the start of the lines of the graph, in px. */
+  axisLeftOffset?: number;
+  /** Distance between the bottom axis and the bottom of the container of the graph, in px. */
+  axisBottomOffset?: number;
+  /** Distance between the right side of the graph and the legend, in px. */
+  legendLeftOffset?: number;
+  /** Distance between the top of the graph and the legend, in px. */
+  legendTopOffset?: number;
+  /** Width of the lines in the graph, in px. */
+  strokeWidth?: number;
+  /** Length of the dashes and the gaps in the graph, in px. */
+  strokeDashArray?: string;
+  /** Padding between each bar in the stacked bar graph, from 0 to 1 */
+  scalePadding?: number;
+  /** Margin for each item in the legend */
+  itemMargin?: string;
+  /** Factor multiplied with an offset to center the labels of the category-axis depending on the width/height of the graph.
+   * >1 for width/height <600 and <1 for width/height >600 (vertical=width/horizontal=height) */
+  categoryAxisLeftFactor?: number;
+};
+
+let tooltipTimeout: number;
+
+export const StackedBarGraphVertical = withTooltip<
+  StackedBarProps,
+  TooltipData
+>(
+  ({
+    data,
+    width,
+    height,
+    keys,
+    colorRange,
+    margin,
+    scalePadding = 0.3,
+    numTicksValueAxis = 6,
+    axisLeftOffset = 40,
+    axisBottomOffset = 40,
+    strokeWidth = 2.5,
+    strokeDashArray = "10,4",
+    legendLeftOffset = 40,
+    legendTopOffset = 40,
+    itemMargin = "15px 0 0 0",
+    categoryAxisLeftFactor = 1,
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
+  }: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => {
+    const yTotals = data.reduce((allTotals, currCategory) => {
+      const yTotal = keys.reduce((categoryTotal, k) => {
+        categoryTotal += currCategory[k] as number;
+        return categoryTotal;
+      }, 0);
+      allTotals.push(yTotal);
+      return allTotals;
+    }, [] as number[]);
+
+    const TICK_LABEL_FONT_WEIGHT = 800;
+
+    // accessors
+    const getCategory = (d: StackedBarData) => d.category;
+
+    // scales
+    const categoryScale = scaleBand<string>({
+      domain: data.map(getCategory),
+      padding: scalePadding,
+    });
+    const valueScale = scaleLinear<number>({
+      domain: [0, Math.max(...yTotals)],
+      nice: true,
+    });
+    const colorScale = scaleOrdinal<string, string>({
+      domain: keys,
+      range: colorRange,
+    });
+
+    // bounds
+    const xMax = width;
+    const yMax = height - margin.top - axisBottomOffset;
+
+    categoryScale.rangeRound([0, xMax - axisLeftOffset]);
+    valueScale.range([yMax, 0]);
+
+    return width < 10 ? null : (
+      <div className={styles.container}>
+        <svg width={width} height={height}>
+          <Group top={margin.top} left={margin.left}>
+            <GridRows
+              scale={valueScale}
+              width={xMax}
+              height={yMax}
+              left={axisLeftOffset}
+              numTicks={numTicksValueAxis}
+              stroke={Color.tertiaryBackground}
+              strokeWidth={strokeWidth}
+              strokeDasharray={strokeDashArray}
+            />
+            <GridColumns
+              scale={categoryScale}
+              height={yMax}
+              left={axisLeftOffset}
+              offset={categoryScale.bandwidth() / 2}
+              stroke={Color.tertiaryBackground}
+              strokeWidth={strokeWidth}
+              strokeDasharray={strokeDashArray}
+            />
+            <Group left={axisLeftOffset}>
+              <BarStack<StackedBarData, string>
+                data={data}
+                keys={keys}
+                x={getCategory}
+                xScale={categoryScale}
+                yScale={valueScale}
+                color={colorScale}
+              >
+                {(barStacks) =>
+                  barStacks.map((barStack) =>
+                    barStack.bars.map((bar) => (
+                      <rect
+                        className={styles.barStack}
+                        key={`bar-stack-${barStack.index}-${bar.index}`}
+                        x={bar.x}
+                        y={bar.y}
+                        height={bar.height}
+                        width={bar.width / 2}
+                        fill={bar.color}
+                        onMouseLeave={() => {
+                          tooltipTimeout = window.setTimeout(() => {
+                            hideTooltip();
+                          }, 300);
+                        }}
+                        onMouseMove={(event) => {
+                          if (tooltipTimeout) clearTimeout(tooltipTimeout);
+                          const eventSvgCoords = localPoint(event);
+                          const left = bar.x + bar.width / 2;
+                          showTooltip({
+                            tooltipData: bar,
+                            tooltipTop: eventSvgCoords?.y,
+                            tooltipLeft: left,
+                          });
+                        }}
+                      />
+                    ))
+                  )
+                }
+              </BarStack>
+            </Group>
+            <Line
+              fill={Color.tertiaryBackground}
+              to={new Point({ x: axisLeftOffset, y: 0 })}
+              from={new Point({ x: axisLeftOffset, y: yMax })}
+              stroke={Color.tertiaryBackground}
+              strokeWidth={strokeWidth}
+              strokeDasharray={strokeDashArray}
+            />
+            <AxisBottom
+              top={yMax}
+              scale={categoryScale}
+              left={
+                ((categoryScale.bandwidth() * 100) / width) *
+                categoryAxisLeftFactor
+              }
+              hideTicks
+              hideAxisLine
+              labelProps={{
+                fontSize: `${10 / 16}rem`,
+              }}
+              tickLabelProps={() => ({
+                fill: Color.label,
+                fontWeight: TICK_LABEL_FONT_WEIGHT,
+              })}
+            />
+            <AxisLeft
+              scale={valueScale}
+              top={5}
+              numTicks={numTicksValueAxis}
+              hideAxisLine
+              labelProps={{
+                fontSize: `${10 / 16}rem`,
+              }}
+              tickLabelProps={() => {
+                return {
+                  fill: Color.label,
+                  fontWeight: TICK_LABEL_FONT_WEIGHT,
+                };
+              }}
+            />
+          </Group>
+        </svg>
+        <div
+          className={styles.legend}
+          style={{ left: width + legendLeftOffset, top: legendTopOffset }}
+        >
+          <LegendOrdinal
+            scale={colorScale}
+            direction="column"
+            itemMargin={itemMargin}
+          />
+        </div>
+
+        {tooltipOpen && tooltipData ? (
+          <Tooltip
+            className={styles.toolTip}
+            top={tooltipTop}
+            left={tooltipLeft}
+            unstyled
+          >
+            <p className={styles.key}>{tooltipData.key}</p>
+            <p>{tooltipData.bar.data[tooltipData.key]}</p>
+            <p>{getCategory(tooltipData.bar.data)}</p>
+          </Tooltip>
+        ) : null}
+      </div>
+    );
+  }
+);
+
+export const StackedBarGraphHorizontal = withTooltip<
+  StackedBarProps,
+  TooltipData
+>(
+  ({
+    data,
+    width,
+    height,
+    keys,
+    colorRange,
+    margin,
+    scalePadding = 0.3,
+    numTicksValueAxis = 6,
+    axisLeftOffset = 40,
+    axisBottomOffset = 40,
+    strokeWidth = 2.5,
+    strokeDashArray = "10,4",
+    legendLeftOffset = 40,
+    legendTopOffset = 40,
+    itemMargin = "15px 0 0 0",
+    categoryAxisLeftFactor = 1,
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
+  }: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => {
+    const yTotals = data.reduce((allTotals, currCategory) => {
+      const yTotal = keys.reduce((categoryTotal, k) => {
+        categoryTotal += currCategory[k] as number;
+        return categoryTotal;
+      }, 0);
+      allTotals.push(yTotal);
+      return allTotals;
+    }, [] as number[]);
+
+    const TICK_LABEL_FONT_WEIGHT = 800;
+
+    // accessors
+    const getCategory = (d: StackedBarData) => d.category;
+
+    // scales
+    const valueScale = scaleLinear<number>({
+      domain: [0, Math.max(...yTotals)],
+      nice: true,
+    });
+    const categoryScale = scaleBand<string>({
+      domain: data.map(getCategory),
+      padding: scalePadding,
+    });
+    const colorScale = scaleOrdinal<string, string>({
+      domain: keys,
+      range: colorRange,
+    });
+
+    // bounds
+    const xMax = width;
+    const yMax = height - margin.top - axisBottomOffset;
+
+    categoryScale.rangeRound([yMax, 0]);
+    valueScale.range([0, xMax - axisLeftOffset]);
+
+    return width < 10 ? null : (
+      <div className={styles.container}>
+        <svg width={width} height={height}>
+          <Group top={margin.top} left={margin.left}>
+            <GridRows
+              scale={categoryScale}
+              width={xMax}
+              height={yMax}
+              offset={categoryScale.bandwidth() / 2}
+              left={axisLeftOffset}
+              stroke={Color.tertiaryBackground}
+              strokeWidth={strokeWidth}
+              strokeDasharray={strokeDashArray}
+            />
+            <GridColumns
+              scale={valueScale}
+              height={yMax}
+              numTicks={numTicksValueAxis}
+              left={axisLeftOffset}
+              stroke={Color.tertiaryBackground}
+              strokeWidth={strokeWidth}
+              strokeDasharray={strokeDashArray}
+            />
+            <Group left={axisLeftOffset}>
+              <BarStackHorizontal<StackedBarData, string>
+                data={data}
+                keys={keys}
+                y={getCategory}
+                xScale={valueScale}
+                yScale={categoryScale}
+                color={colorScale}
+              >
+                {(barStacks) =>
+                  barStacks.map((barStack) =>
+                    barStack.bars.map((bar) => (
+                      <rect
+                        className={styles.barStack}
+                        key={`bar-stack-${barStack.index}-${bar.index}`}
+                        x={bar.x}
+                        y={bar.y}
+                        height={bar.height / 2}
+                        width={bar.width}
+                        fill={bar.color}
+                        onMouseLeave={() => {
+                          tooltipTimeout = window.setTimeout(() => {
+                            hideTooltip();
+                          }, 300);
+                        }}
+                        onMouseMove={(event) => {
+                          if (tooltipTimeout) clearTimeout(tooltipTimeout);
+                          const eventSvgCoords = localPoint(event);
+                          const left = bar.x + bar.width / 2;
+                          showTooltip({
+                            tooltipData: bar,
+                            tooltipTop: eventSvgCoords?.y,
+                            tooltipLeft: left,
+                          });
+                        }}
+                      />
+                    ))
+                  )
+                }
+              </BarStackHorizontal>
+            </Group>
+            <AxisBottom
+              top={yMax}
+              scale={valueScale}
+              left={axisLeftOffset}
+              numTicks={numTicksValueAxis}
+              hideAxisLine
+              hideTicks
+              labelProps={{
+                fontSize: `${10 / 16}rem`,
+              }}
+              tickLabelProps={() => ({
+                fill: Color.label,
+                fontWeight: TICK_LABEL_FONT_WEIGHT,
+              })}
+            />
+            <AxisLeft
+              top={
+                -((categoryScale.bandwidth() * 100) / width) *
+                categoryAxisLeftFactor
+              }
+              scale={categoryScale}
+              hideAxisLine
+              hideTicks
+              labelProps={{
+                fontSize: `${10 / 16}rem`,
+              }}
+              tickLabelProps={() => {
+                return {
+                  fill: Color.label,
+                  fontWeight: TICK_LABEL_FONT_WEIGHT,
+                };
+              }}
+            />
+          </Group>
+        </svg>
+        <div
+          className={styles.legend}
+          style={{ left: width + legendLeftOffset, top: legendTopOffset }}
+        >
+          <LegendOrdinal
+            scale={colorScale}
+            direction="column"
+            itemMargin={itemMargin}
+          />
+        </div>
+
+        {tooltipOpen && tooltipData ? (
+          <Tooltip
+            className={styles.toolTip}
+            top={tooltipTop}
+            left={tooltipLeft}
+            unstyled
+          >
+            <p className={styles.key}>{tooltipData.key}</p>
+            <p>{tooltipData.bar.data[tooltipData.key]}</p>
+            <p>{getCategory(tooltipData.bar.data)}</p>
+          </Tooltip>
+        ) : null}
+      </div>
+    );
+  }
+);
diff --git a/data/mocks.ts b/data/mocks.ts
index ae7b6a8..cfcf0c8 100644
--- a/data/mocks.ts
+++ b/data/mocks.ts
@@ -80,6 +80,45 @@ export const moreMockCategoricalData = [
   { key: "Dart", value: 2.21 },
 ];
 
+export const mockStackedBarGraphData = [
+  {
+    category: "1A",
+    "geese watchers": 60,
+    "geese breeders": 80,
+    "geese catchers": 90,
+  },
+  {
+    category: "1B",
+    "geese watchers": 25,
+    "geese breeders": 37,
+    "geese catchers": 80,
+  },
+  {
+    category: "2A",
+    "geese watchers": 40,
+    "geese breeders": 50,
+    "geese catchers": 70,
+  },
+  {
+    category: "2B",
+    "geese watchers": 40,
+    "geese breeders": 80,
+    "geese catchers": 88,
+  },
+  {
+    category: "3A",
+    "geese watchers": 15,
+    "geese breeders": 30,
+    "geese catchers": 45,
+  },
+];
+
+export const mockStackedBarKeys = [
+  "geese watchers",
+  "geese breeders",
+  "geese catchers",
+];
+
 export const mockLineData = {
   xValues: ["1A", "1B", "2A", "2B", "3A", "3B"],
   lines: [
@@ -162,3 +201,27 @@ export const mockQuoteDataLong = [
   "Hello, world!",
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in enim neque. Sed sit amet convallis tellus. Integer condimentum a felis id gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam metus libero, sagittis in consectetur in, scelerisque sed sapien. Nullam ut feugiat sapien. Praesent dictum ac ipsum ac lacinia.",
 ];
+
+export const mockGroupedBarGraphData = [
+  {
+    category: "AJ",
+    values: {
+      Shooting: 7,
+      Melee: 9,
+    },
+  },
+  {
+    category: "Zen",
+    values: {
+      Shooting: 17,
+      Melee: 5,
+    },
+  },
+  {
+    category: "Lyra",
+    values: {
+      Shooting: 3,
+      Melee: 14,
+    },
+  },
+];
diff --git a/package-lock.json b/package-lock.json
index e345883..2e0bf1e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -979,21 +979,6 @@
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/@visx/legend/-/legend-2.10.0.tgz",
       "integrity": "sha512-OI8BYE6QQI9eXAng/C7UzuVw7d0fwlzrth6RmrdhlyT1K+BA3WpExapV+pDfwxu/tkEik8Ps5cZRV6HjX1/Mww==",
-      "dependencies": {
-        "@types/react": "*",
-        "@visx/group": "2.10.0",
-        "@visx/scale": "2.2.2",
-        "classnames": "^2.3.1",
-        "prop-types": "^15.5.10"
-      },
-      "peerDependencies": {
-        "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0"
-      }
-    },
-    "node_modules/@visx/mock-data": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@visx/mock-data/-/mock-data-2.1.2.tgz",
-      "integrity": "sha512-6xUVP56tiPwVi3BxvoXPQzDYWG6iX2nnOlsHEYsHgK8gHq1r7AhjQtdbQUX7QF0QkmkJM0cW8TBjZ2e+dItB8Q==",
       "dependencies": {
         "@types/d3-random": "^2.2.0",
         "d3-random": "^2.2.2"
@@ -1593,14 +1578,6 @@
         "d3-time-format": "2 - 3"
       }
     },
-    "node_modules/d3-scale/node_modules/d3-array": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
-      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
-      "dependencies": {
-        "internmap": "^1.0.0"
-      }
-    },
     "node_modules/d3-shape": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
@@ -1625,14 +1602,6 @@
         "d3-time": "1 - 2"
       }
     },
-    "node_modules/d3-time/node_modules/d3-array": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
-      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
-      "dependencies": {
-        "internmap": "^1.0.0"
-      }
-    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -3318,11 +3287,13 @@
         "node": ">=6"
       }
     },
+<<<<<<< HEAD
     "node_modules/path-exists": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
       "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
       "dev": true,
+<<<<<<< HEAD
       "engines": {
         "node": ">=4"
       }
@@ -3345,6 +3316,7 @@
         "node": ">=8"
       }
     },
+<<<<<<< HEAD
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -3448,6 +3420,95 @@
       "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
+=======
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-attribute-case-insensitive": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.0.tgz",
+      "integrity": "sha512-b4g9eagFGq9T5SWX4+USfVyjIb3liPnjhHHRMP7FMB2kFVpYyfEscV0wP3eaXhKlcHKUut8lt5BGoeylWA/dBQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.2"
+      }
+    },
+    "node_modules/postcss-calc": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
+      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.9",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.2"
+      }
+    },
+    "node_modules/postcss-clamp": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-clamp/-/postcss-clamp-4.1.0.tgz",
+      "integrity": "sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": ">=7.6.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.6"
+      }
+    },
+    "node_modules/postcss-color-functional-notation": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.3.tgz",
+      "integrity": "sha512-5fbr6FzFzjwHXKsVnkmEYrJYG8VNNzvD1tAXaPPWR97S6rhKI5uh2yOfV5TAzhDkZoq4h+chxEplFDc8GeyFtw==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
       },
       "engines": {
         "node": "^12 || ^14 || >=16"
@@ -3543,14 +3604,30 @@
       "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.9"
+>>>>>>> main
       },
       "engines": {
         "node": "^12 || ^14 || >=16"
       },
+<<<<<<< HEAD
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+=======
+>>>>>>> main
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
+<<<<<<< HEAD
+    "node_modules/postcss-color-hex-alpha": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-8.0.3.tgz",
+      "integrity": "sha512-fESawWJCrBV035DcbKRPAVmy21LpoyiXdPTuHUfWJ14ZRjY7Y7PA6P4g8z6LQGYhU1WAxkTxjIjurXzoe68Glw==",
+      "dev": true,
+      "dependencies": {
+=======
     "node_modules/postcss-double-position-gradients": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-3.1.1.tgz",
@@ -3558,6 +3635,7 @@
       "dev": true,
       "dependencies": {
         "@csstools/postcss-progressive-custom-properties": "^1.1.0",
+>>>>>>> main
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
@@ -3567,10 +3645,17 @@
         "postcss": "^8.4"
       }
     },
+<<<<<<< HEAD
+    "node_modules/postcss-color-rebeccapurple": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-7.0.2.tgz",
+      "integrity": "sha512-SFc3MaocHaQ6k3oZaFwH8io6MdypkUtEy/eXzXEB1vEQlO3S3oDc/FSZA8AsS04Z25RirQhlDlHLh3dn7XewWw==",
+=======
     "node_modules/postcss-env-function": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-4.0.6.tgz",
       "integrity": "sha512-kpA6FsLra+NqcFnL81TnsU+Z7orGtDTxcOhl6pwXeEq1yFPpRMkCDpHhrz8CFQDr/Wfm0jLiNQ1OsGGPjlqPwA==",
+>>>>>>> main
       "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -3579,6 +3664,30 @@
         "node": "^12 || ^14 || >=16"
       },
       "peerDependencies": {
+<<<<<<< HEAD
+        "postcss": "^8.3"
+      }
+    },
+    "node_modules/postcss-custom-media": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz",
+      "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-custom-properties": {
+      "version": "12.1.7",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-12.1.7.tgz",
+      "integrity": "sha512-N/hYP5gSoFhaqxi2DPCmvto/ZcRDVjE3T1LiAMzc/bg53hvhcHOLpXOHb526LzBBp5ZlAUhkuot/bfpmpgStJg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+=======
         "postcss": "^8.4"
       }
     },
@@ -3598,6 +3707,45 @@
       "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.9"
+>>>>>>> main
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+<<<<<<< HEAD
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+=======
+>>>>>>> main
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+<<<<<<< HEAD
+    "node_modules/postcss-custom-selectors": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-6.0.0.tgz",
+      "integrity": "sha512-/1iyBhz/W8jUepjGyu7V1OPcGbc636snN1yXEQCinb6Bwt7KxsiU7/bLQlp8GwAXzCh7cobBU5odNn/2zQWR8Q==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.2"
+      }
+    },
+    "node_modules/postcss-dir-pseudo-class": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.4.tgz",
+      "integrity": "sha512-I8epwGy5ftdzNWEYok9VjW9whC4xnelAtbajGv4adql4FIF09rnrxnA9Y8xSHN47y7gqFIv10C5+ImsLeJpKBw==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.9"
       },
       "engines": {
         "node": "^12 || ^14 || >=16"
@@ -3606,6 +3754,16 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/postcss-double-position-gradients": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-3.1.1.tgz",
+      "integrity": "sha512-jM+CGkTs4FcG53sMPjrrGE0rIvLDdCrqMzgDC5fLI7JHDO7o6QG8C5TQBtExb13hdBdoH9C2QVbG4jo2y9lErQ==",
+      "dev": true,
+      "dependencies": {
+        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+=======
     "node_modules/postcss-focus-within": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-5.0.4.tgz",
@@ -3635,6 +3793,7 @@
       "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.3.tgz",
       "integrity": "sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ==",
       "dev": true,
+>>>>>>> main
       "engines": {
         "node": "^12 || ^14 || >=16"
       },
@@ -3642,10 +3801,17 @@
         "postcss": "^8.4"
       }
     },
+<<<<<<< HEAD
+    "node_modules/postcss-env-function": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-4.0.6.tgz",
+      "integrity": "sha512-kpA6FsLra+NqcFnL81TnsU+Z7orGtDTxcOhl6pwXeEq1yFPpRMkCDpHhrz8CFQDr/Wfm0jLiNQ1OsGGPjlqPwA==",
+=======
     "node_modules/postcss-image-set-function": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-4.0.6.tgz",
       "integrity": "sha512-KfdC6vg53GC+vPd2+HYzsZ6obmPqOk6HY09kttU19+Gj1nC3S3XBVEXDHxkhxTohgZqzbUb94bKXvKDnYWBm/A==",
+>>>>>>> main
       "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -3673,6 +3839,62 @@
       "dev": true,
       "dependencies": {
         "@csstools/postcss-progressive-custom-properties": "^1.1.0",
+=======
+      }
+    },
+    "node_modules/postcss-preset-env": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-7.7.0.tgz",
+      "integrity": "sha512-2Q9YARQju+j2BVgAyDnW1pIWIMlaHZqbaGISPMmalznNlWcNFIZFQsJfRLXS+WHmHJDCmV7wIWpVf9JNKR4Elw==",
+      "dev": true,
+      "dependencies": {
+        "@csstools/postcss-cascade-layers": "^1.0.2",
+        "@csstools/postcss-color-function": "^1.1.0",
+        "@csstools/postcss-font-format-keywords": "^1.0.0",
+        "@csstools/postcss-hwb-function": "^1.0.1",
+        "@csstools/postcss-ic-unit": "^1.0.0",
+        "@csstools/postcss-is-pseudo-class": "^2.0.4",
+        "@csstools/postcss-normalize-display-values": "^1.0.0",
+        "@csstools/postcss-oklab-function": "^1.1.0",
+        "@csstools/postcss-progressive-custom-properties": "^1.3.0",
+        "@csstools/postcss-stepped-value-functions": "^1.0.0",
+        "@csstools/postcss-trigonometric-functions": "^1.0.0",
+        "@csstools/postcss-unset-value": "^1.0.1",
+        "autoprefixer": "^10.4.7",
+        "browserslist": "^4.20.3",
+        "css-blank-pseudo": "^3.0.3",
+        "css-has-pseudo": "^3.0.4",
+        "css-prefers-color-scheme": "^6.0.3",
+        "cssdb": "^6.6.2",
+        "postcss-attribute-case-insensitive": "^5.0.0",
+        "postcss-clamp": "^4.1.0",
+        "postcss-color-functional-notation": "^4.2.3",
+        "postcss-color-hex-alpha": "^8.0.3",
+        "postcss-color-rebeccapurple": "^7.0.2",
+        "postcss-custom-media": "^8.0.0",
+        "postcss-custom-properties": "^12.1.7",
+        "postcss-custom-selectors": "^6.0.0",
+        "postcss-dir-pseudo-class": "^6.0.4",
+        "postcss-double-position-gradients": "^3.1.1",
+        "postcss-env-function": "^4.0.6",
+        "postcss-focus-visible": "^6.0.4",
+        "postcss-focus-within": "^5.0.4",
+        "postcss-font-variant": "^5.0.0",
+        "postcss-gap-properties": "^3.0.3",
+        "postcss-image-set-function": "^4.0.6",
+        "postcss-initial": "^4.0.1",
+        "postcss-lab-function": "^4.2.0",
+        "postcss-logical": "^5.0.4",
+        "postcss-media-minmax": "^5.0.0",
+        "postcss-nesting": "^10.1.7",
+        "postcss-opacity-percentage": "^1.1.2",
+        "postcss-overflow-shorthand": "^3.0.3",
+        "postcss-page-break": "^3.0.4",
+        "postcss-place": "^7.0.4",
+        "postcss-pseudo-class-any-link": "^7.1.4",
+        "postcss-replace-overflow-wrap": "^4.0.0",
+        "postcss-selector-not": "^5.0.0",
+>>>>>>> main
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
@@ -3681,11 +3903,35 @@
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/csstools"
+<<<<<<< HEAD
+      },
+=======
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
+    "node_modules/postcss-pseudo-class-any-link": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-7.1.4.tgz",
+      "integrity": "sha512-JxRcLXm96u14N3RzFavPIE9cRPuOqLDuzKeBsqi4oRk4vt8n0A7I0plFs/VXTg7U2n7g/XkQi0OwqTO3VWBfEg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+>>>>>>> main
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+<<<<<<< HEAD
     "node_modules/postcss-logical": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
@@ -4066,6 +4312,204 @@
       "engines": {
         "node": ">= 0.4"
       },
+=======
+    "node_modules/postcss-replace-overflow-wrap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
+      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
+      "dev": true,
+      "peerDependencies": {
+        "postcss": "^8.0.3"
+      }
+    },
+    "node_modules/postcss-selector-not": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-5.0.0.tgz",
+      "integrity": "sha512-/2K3A4TCP9orP4TNS7u3tGdRFVKqz/E6pX3aGnriPG0jU78of8wsUcqE4QAhWEU0d+WnMSF93Ah3F//vUtK+iQ==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
+      "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/react": {
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.1.0.tgz",
+      "integrity": "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz",
+      "integrity": "sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.22.0"
+      },
+      "peerDependencies": {
+        "react": "^18.1.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/react-use-measure": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
+      "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==",
+      "dependencies": {
+        "debounce": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      }
+    },
+    "node_modules/reduce-css-calc": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz",
+      "integrity": "sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=",
+      "dependencies": {
+        "balanced-match": "^0.4.2",
+        "math-expression-evaluator": "^1.2.14",
+        "reduce-function-call": "^1.0.1"
+      }
+    },
+    "node_modules/reduce-css-calc/node_modules/balanced-match": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
+      "integrity": "sha512-STw03mQKnGUYtoNjmowo4F2cRmIIxYEGiMsjjwla/u5P1lxadj/05WkNaFjNiKTgJkj8KiXbgAiRTmcQRwQNtg=="
+    },
+    "node_modules/reduce-function-call": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/reduce-function-call/-/reduce-function-call-1.0.3.tgz",
+      "integrity": "sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
+      "dev": true
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
+      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "functions-have-names": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -4210,6 +4654,200 @@
         "get-intrinsic": "^1.0.2",
         "object-inspect": "^1.9.0"
       },
+>>>>>>> main
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+<<<<<<< HEAD
+    "node_modules/regexpp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
+      "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.8.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+=======
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz",
+      "integrity": "sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1",
+        "get-intrinsic": "^1.1.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "regexp.prototype.flags": "^1.4.1",
+        "side-channel": "^1.0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
+      "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+>>>>>>> main
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+<<<<<<< HEAD
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz",
+      "integrity": "sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -4531,6 +5169,308 @@
       "dev": true
     }
   },
+  "dependencies": {
+    "@babel/runtime": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz",
+      "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
+      "dev": true,
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@babel/runtime-corejs3": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.18.3.tgz",
+      "integrity": "sha512-l4ddFwrc9rnR+EJsHsh+TJ4A35YqQz/UqcjtlX2ov53hlJYG5CxtQmNZxyajwDVmCxwy++rtvGU5HazCK4W41Q==",
+      "dev": true,
+      "requires": {
+        "core-js-pure": "^3.20.2",
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@csstools/postcss-cascade-layers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.0.2.tgz",
+      "integrity": "sha512-n5fSd3N/RTLjwC6TLnHjlVEt5tRg6S6Pu+LpRgXayX0QVJHvlMzE3+R12cd2F0we8WB4OE8o5r5iWgmBPpqUyQ==",
+      "dev": true,
+      "requires": {
+        "@csstools/selector-specificity": "^1.0.0",
+        "postcss-selector-parser": "^6.0.10"
+      }
+    },
+    "@csstools/postcss-color-function": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-1.1.0.tgz",
+      "integrity": "sha512-5D5ND/mZWcQoSfYnSPsXtuiFxhzmhxt6pcjrFLJyldj+p0ZN2vvRpYNX+lahFTtMhAYOa2WmkdGINr0yP0CvGA==",
+=======
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
+      "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.2.tgz",
+      "integrity": "sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==",
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
+      "dev": true
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
+      "integrity": "sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.1",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
+    "node_modules/tsutils": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^1.8.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "peerDependencies": {
+        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
+      }
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.2.tgz",
+      "integrity": "sha512-Mamb1iX2FDUpcTRzltPxgWMKy3fhg0TN378ylbktPGPK/99KbDtMQ4W1hwgsbPAsG3a0xKa1vmw4VKZQbkvz5A==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "node_modules/v8-compile-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
+      "dev": true
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "dependencies": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    }
+  },
   "dependencies": {
     "@babel/runtime": {
       "version": "7.18.3",
@@ -4622,6 +5562,79 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-1.1.0.tgz",
       "integrity": "sha512-e/Q5HopQzmnQgqimG9v3w2IG4VRABsBq3itOcn4bnm+j4enTgQZ0nWsaH/m9GV2otWGQ0nwccYL5vmLKyvP1ww==",
+>>>>>>> main
+      "dev": true,
+      "requires": {
+        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+<<<<<<< HEAD
+    "@csstools/postcss-font-format-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-1.0.0.tgz",
+      "integrity": "sha512-oO0cZt8do8FdVBX8INftvIA4lUrKUSCcWUf9IwH9IPWOgKT22oAZFXeHLoDK7nhB2SmkNycp5brxfNMRLIhd6Q==",
+=======
+    "@csstools/postcss-progressive-custom-properties": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-1.3.0.tgz",
+      "integrity": "sha512-ASA9W1aIy5ygskZYuWams4BzafD12ULvSypmaLJT2jvQ8G0M3I8PRQhC0h7mG0Z3LI05+agZjqSR9+K9yaQQjA==",
+>>>>>>> main
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+<<<<<<< HEAD
+    "@csstools/postcss-hwb-function": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-1.0.1.tgz",
+      "integrity": "sha512-AMZwWyHbbNLBsDADWmoXT9A5yl5dsGEBeJSJRUJt8Y9n8Ziu7Wstt4MC8jtPW7xjcLecyfJwtnUTNSmOzcnWeg==",
+=======
+    "@csstools/postcss-stepped-value-functions": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-1.0.0.tgz",
+      "integrity": "sha512-q8c4bs1GumAiRenmFjASBcWSLKrbzHzWl6C2HcaAxAXIiL2rUlUWbqQZUjwVG5tied0rld19j/Mm90K3qI26vw==",
+>>>>>>> main
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+<<<<<<< HEAD
+    "@csstools/postcss-ic-unit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-1.0.0.tgz",
+      "integrity": "sha512-i4yps1mBp2ijrx7E96RXrQXQQHm6F4ym1TOD0D69/sjDjZvQ22tqiEvaNw7pFZTUO5b9vWRHzbHzP9+UKuw+bA==",
+      "dev": true,
+      "requires": {
+        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-is-pseudo-class": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-2.0.4.tgz",
+      "integrity": "sha512-T2Tmr5RIxkCEXxHwMVyValqwv3h5FTJPpmU8Mq/HDV+TY6C9srVaNMiMG/sp0QaxUnVQQrnXsuLU+1g2zrLDcQ==",
+      "dev": true,
+      "requires": {
+        "@csstools/selector-specificity": "^1.0.0",
+        "postcss-selector-parser": "^6.0.10"
+      }
+    },
+    "@csstools/postcss-normalize-display-values": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-1.0.0.tgz",
+      "integrity": "sha512-bX+nx5V8XTJEmGtpWTO6kywdS725t71YSLlxWt78XoHUbELWgoCXeOFymRJmL3SU1TLlKSIi7v52EWqe60vJTQ==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-oklab-function": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-1.1.0.tgz",
+      "integrity": "sha512-e/Q5HopQzmnQgqimG9v3w2IG4VRABsBq3itOcn4bnm+j4enTgQZ0nWsaH/m9GV2otWGQ0nwccYL5vmLKyvP1ww==",
       "dev": true,
       "requires": {
         "@csstools/postcss-progressive-custom-properties": "^1.1.0",
@@ -5122,6 +6135,912 @@
         "prop-types": "^15.5.10"
       }
     },
+    "@visx/point": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@visx/point/-/point-2.6.0.tgz",
+      "integrity": "sha512-amBi7yMz4S2VSchlPdliznN41TuES64506ySI22DeKQ+mc1s1+BudlpnY90sM1EIw4xnqbKmrghTTGfy6SVqvQ=="
+    },
+    "@visx/scale": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@visx/scale/-/scale-2.2.2.tgz",
+      "integrity": "sha512-3aDySGUTpe6VykDQmF+g2nz5paFu9iSPTcCOEgkcru0/v5tmGzUdvivy8CkYbr87HN73V/Jc53lGm+kJUQcLBw==",
+      "requires": {
+        "@types/d3-interpolate": "^1.3.1",
+        "@types/d3-scale": "^3.3.0",
+        "@types/d3-time": "^2.0.0",
+        "d3-interpolate": "^1.4.0",
+        "d3-scale": "^3.3.0",
+        "d3-time": "^2.1.1"
+      }
+    },
+    "@visx/shape": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-2.10.0.tgz",
+      "integrity": "sha512-aRQBfclEWEPDmQmnB+BGN9Issg7u9lLrZ5LUSI3gfR9WAAHoNldxjpHRcYx8Y16A3YlCFVgWIBBL7pH0XUYcCA==",
+      "requires": {
+        "@types/d3-path": "^1.0.8",
+        "@types/d3-shape": "^1.3.1",
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "@visx/curve": "2.1.0",
+        "@visx/group": "2.10.0",
+        "@visx/scale": "2.2.2",
+        "classnames": "^2.3.1",
+        "d3-path": "^1.0.5",
+        "d3-shape": "^1.2.0",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.5.10"
+      }
+    },
+    "@visx/stats": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/stats/-/stats-2.10.0.tgz",
+      "integrity": "sha512-4p8rQamOc1IC3IkqTHgfMHbSXvRl9DMWFCglJy+DmbH6Wx1TaWt2nj/N0Ttp350UTRzBy4o5ou/D4Gts8LZHuA==",
+      "requires": {
+        "@types/d3-shape": "^1.3.2",
+        "@types/react": "*",
+        "@visx/group": "2.10.0",
+        "@visx/scale": "2.2.2",
+        "classnames": "^2.3.1",
+        "d3-shape": "^1.2.0",
+        "prop-types": "^15.5.10"
+      }
+    },
+    "@visx/text": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/text/-/text-2.10.0.tgz",
+      "integrity": "sha512-Wbt0Mq130akOahaby2Ziwkr62LuK6td9RcIWI9o4xsLE7GCIkxeUiVci0YUo2yewgwOLwR9F1guPuHPqYd+eYg==",
+      "requires": {
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "classnames": "^2.3.1",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2",
+        "reduce-css-calc": "^1.3.0"
+      }
+    },
+    "@visx/tooltip": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/tooltip/-/tooltip-2.10.0.tgz",
+      "integrity": "sha512-6Zrd79MIEfyuLBcZ1ypSeAkpQc8oLRNB7FQnegzl3Lje4LK5lJtuf5ST0mwK6G2Uv+GlOW9REJ6VK4gfAGkq9A==",
+      "requires": {
+        "@types/react": "*",
+        "@visx/bounds": "2.10.0",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.5.10",
+        "react-use-measure": "^2.0.4"
+      }
+    },
+    "@visx/wordcloud": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/wordcloud/-/wordcloud-2.10.0.tgz",
+      "integrity": "sha512-SN3W9VbnU/qYofPG5xlN0jJWFTMo5v9jlJtWFLgTy9aHV3CtclyyEAQ6/+VPrKWuNR5bgtOSegiE8EJdobrStg==",
+      "requires": {
+        "@types/d3-cloud": "1.2.5",
+        "@visx/group": "2.10.0",
+        "d3-cloud": "^1.2.5"
+      }
+    },
+    "acorn": {
+      "version": "8.7.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
+      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+      "dev": true
+    },
+    "acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^2.0.1"
+      }
+    },
+    "argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "aria-query": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
+      "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.10.2",
+        "@babel/runtime-corejs3": "^7.10.2"
+      }
+    },
+    "array-includes": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz",
+      "integrity": "sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5",
+        "get-intrinsic": "^1.1.1",
+        "is-string": "^1.0.7"
+      }
+    },
+    "array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true
+    },
+    "array.prototype.flat": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
+      "integrity": "sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
+    "array.prototype.flatmap": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz",
+      "integrity": "sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
+    "ast-types-flow": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
+      "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==",
+      "dev": true
+    },
+    "autoprefixer": {
+      "version": "10.4.7",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
+      "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.20.3",
+        "caniuse-lite": "^1.0.30001335",
+        "fraction.js": "^4.2.0",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "axe-core": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.2.tgz",
+      "integrity": "sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==",
+      "dev": true
+    },
+    "axobject-query": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
+      "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "browserslist": {
+      "version": "4.20.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz",
+      "integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==",
+      "dev": true,
+      "requires": {
+        "caniuse-lite": "^1.0.30001332",
+        "electron-to-chromium": "^1.4.118",
+        "escalade": "^3.1.1",
+        "node-releases": "^2.0.3",
+        "picocolors": "^1.0.0"
+      }
+    },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001344",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz",
+      "integrity": "sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g=="
+    },
+    "chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      }
+    },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "core-js-pure": {
+      "version": "3.22.7",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.22.7.tgz",
+      "integrity": "sha512-wTriFxiZI+C8msGeh7fJcbC/a0V8fdInN1oS2eK79DMBGs8iIJiXhtFJCiT3rBa8w6zroHWW3p8ArlujZ/Mz+w==",
+      "dev": true
+    },
+    "cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "requires": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      }
+    },
+    "css-blank-pseudo": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-3.0.3.tgz",
+      "integrity": "sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.9"
+      }
+    },
+    "css-has-pseudo": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-3.0.4.tgz",
+      "integrity": "sha512-Vse0xpR1K9MNlp2j5w1pgWIJtm1a8qS0JwS9goFYcImjlHEmywP9VUF05aGBXzGpDJF86QXk4L0ypBmwPhGArw==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.9"
+      }
+    },
+    "css-prefers-color-scheme": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
+      "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==",
+      "dev": true,
+      "requires": {}
+    },
+    "cssdb": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-6.6.2.tgz",
+      "integrity": "sha512-w08LaP+DRoPlw4g4LSUp+EWRrWTPlrzWREcU7/6IeMfL7tPR2P9oeQ1G+pxyfMmLWBNDwqHWa6kxiuGMLb71EA==",
+      "dev": true
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
+    "csstype": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+    },
+    "d3-cloud": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-cloud/-/d3-cloud-1.2.5.tgz",
+      "integrity": "sha512-4s2hXZgvs0CoUIw31oBAGrHt9Kt/7P9Ik5HIVzISFiWkD0Ga2VLAuO/emO/z1tYIpE7KG2smB4PhMPfFMJpahw==",
+      "requires": {
+        "d3-dispatch": "^1.0.3"
+      }
+    },
+    "d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+    },
+    "d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
+    },
+    "d3-format": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
+      "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
+    },
+    "d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "requires": {
+        "d3-color": "1"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "d3-random": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-2.2.2.tgz",
+      "integrity": "sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw=="
+    },
+    "d3-scale": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
+      "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
+      "requires": {
+        "d3-array": "^2.3.0",
+        "d3-format": "1 - 2",
+        "d3-interpolate": "1.2.0 - 2",
+        "d3-time": "^2.1.1",
+        "d3-time-format": "2 - 3"
+      },
+      "dependencies": {
+        "d3-array": {
+          "version": "2.12.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+          "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+          "requires": {
+            "internmap": "^1.0.0"
+=======
+    "@csstools/postcss-trigonometric-functions": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-1.0.1.tgz",
+      "integrity": "sha512-G78CY/+GePc6dDCTUbwI6TTFQ5fs3N9POHhI6v0QzteGpf6ylARiJUNz9HrRKi4eVYBNXjae1W2766iUEFxHlw==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-unset-value": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.1.tgz",
+      "integrity": "sha512-f1G1WGDXEU/RN1TWAxBPQgQudtLnLQPyiWdtypkPC+mVYNKFKH/HYXSxH4MVNqwF8M0eDsoiU7HumJHCg/L/jg==",
+      "dev": true,
+      "requires": {}
+    },
+    "@csstools/selector-specificity": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-1.0.0.tgz",
+      "integrity": "sha512-RkYG5KiGNX0fJ5YoI0f4Wfq2Yo74D25Hru4fxTOioYdQvHBxcrrtTTyT5Ozzh2ejcNrhFy7IEts2WyEY7yi5yw==",
+      "dev": true,
+      "requires": {}
+    },
+    "@eslint/eslintrc": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
+      "integrity": "sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.3.2",
+        "globals": "^13.15.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      }
+    },
+    "@humanwhocodes/config-array": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
+      "integrity": "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==",
+      "dev": true,
+      "requires": {
+        "@humanwhocodes/object-schema": "^1.2.1",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
+      }
+    },
+    "@humanwhocodes/object-schema": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "dev": true
+    },
+    "@next/env": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.6.tgz",
+      "integrity": "sha512-Te/OBDXFSodPU6jlXYPAXpmZr/AkG6DCATAxttQxqOWaq6eDFX25Db3dK0120GZrSZmv4QCe9KsZmJKDbWs4OA=="
+    },
+    "@next/eslint-plugin-next": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-12.1.6.tgz",
+      "integrity": "sha512-yNUtJ90NEiYFT6TJnNyofKMPYqirKDwpahcbxBgSIuABwYOdkGwzos1ZkYD51Qf0diYwpQZBeVqElTk7Q2WNqw==",
+      "dev": true,
+      "requires": {
+        "glob": "7.1.7"
+      }
+    },
+    "@next/swc-android-arm-eabi": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.6.tgz",
+      "integrity": "sha512-BxBr3QAAAXWgk/K7EedvzxJr2dE014mghBSA9iOEAv0bMgF+MRq4PoASjuHi15M2zfowpcRG8XQhMFtxftCleQ==",
+      "optional": true
+    },
+    "@next/swc-android-arm64": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.1.6.tgz",
+      "integrity": "sha512-EboEk3ROYY7U6WA2RrMt/cXXMokUTXXfnxe2+CU+DOahvbrO8QSWhlBl9I9ZbFzJx28AGB9Yo3oQHCvph/4Lew==",
+      "optional": true
+    },
+    "@next/swc-darwin-arm64": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.6.tgz",
+      "integrity": "sha512-P0EXU12BMSdNj1F7vdkP/VrYDuCNwBExtRPDYawgSUakzi6qP0iKJpya2BuLvNzXx+XPU49GFuDC5X+SvY0mOw==",
+      "optional": true
+    },
+    "@next/swc-darwin-x64": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.6.tgz",
+      "integrity": "sha512-9FptMnbgHJK3dRDzfTpexs9S2hGpzOQxSQbe8omz6Pcl7rnEp9x4uSEKY51ho85JCjL4d0tDLBcXEJZKKLzxNg==",
+      "optional": true
+    },
+    "@next/swc-linux-arm-gnueabihf": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.6.tgz",
+      "integrity": "sha512-PvfEa1RR55dsik/IDkCKSFkk6ODNGJqPY3ysVUZqmnWMDSuqFtf7BPWHFa/53znpvVB5XaJ5Z1/6aR5CTIqxPw==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-gnu": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.6.tgz",
+      "integrity": "sha512-53QOvX1jBbC2ctnmWHyRhMajGq7QZfl974WYlwclXarVV418X7ed7o/EzGY+YVAEKzIVaAB9JFFWGXn8WWo0gQ==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-musl": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.6.tgz",
+      "integrity": "sha512-CMWAkYqfGdQCS+uuMA1A2UhOfcUYeoqnTW7msLr2RyYAys15pD960hlDfq7QAi8BCAKk0sQ2rjsl0iqMyziohQ==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-gnu": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.6.tgz",
+      "integrity": "sha512-AC7jE4Fxpn0s3ujngClIDTiEM/CQiB2N2vkcyWWn6734AmGT03Duq6RYtPMymFobDdAtZGFZd5nR95WjPzbZAQ==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-musl": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.6.tgz",
+      "integrity": "sha512-c9Vjmi0EVk0Kou2qbrynskVarnFwfYIi+wKufR9Ad7/IKKuP6aEhOdZiIIdKsYWRtK2IWRF3h3YmdnEa2WLUag==",
+      "optional": true
+    },
+    "@next/swc-win32-arm64-msvc": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.6.tgz",
+      "integrity": "sha512-3UTOL/5XZSKFelM7qN0it35o3Cegm6LsyuERR3/OoqEExyj3aCk7F025b54/707HTMAnjlvQK3DzLhPu/xxO4g==",
+      "optional": true
+    },
+    "@next/swc-win32-ia32-msvc": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.6.tgz",
+      "integrity": "sha512-8ZWoj6nCq6fI1yCzKq6oK0jE6Mxlz4MrEsRyu0TwDztWQWe7rh4XXGLAa2YVPatYcHhMcUL+fQQbqd1MsgaSDA==",
+      "optional": true
+    },
+    "@next/swc-win32-x64-msvc": {
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.6.tgz",
+      "integrity": "sha512-4ZEwiRuZEicXhXqmhw3+de8Z4EpOLQj/gp+D9fFWo6ii6W1kBkNNvvEx4A90ugppu+74pT1lIJnOuz3A9oQeJA==",
+      "optional": true
+    },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      }
+    },
+    "@rushstack/eslint-patch": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz",
+      "integrity": "sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw==",
+      "dev": true
+    },
+    "@types/d3": {
+      "version": "3.5.47",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-3.5.47.tgz",
+      "integrity": "sha512-VkWIQoZXLFdcBGe5pdBKJmTU3fmpXvo/KV6ixvTzOMl1yJ2hbTXpfvsziag0kcaerPDwas2T0vxojwQG3YwivQ=="
+    },
+    "@types/d3-cloud": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@types/d3-cloud/-/d3-cloud-1.2.5.tgz",
+      "integrity": "sha512-vEIER9DsEBUOdpRiwCh3n1qE+cV6h4e1LhxhY2sLt+m8LPNAIkOOhTlqk0JDiBwD+ZPM8ynFAOU3AuPuVYBFBA==",
+      "requires": {
+        "@types/d3": "^3"
+      }
+    },
+    "@types/d3-color": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.4.2.tgz",
+      "integrity": "sha512-fYtiVLBYy7VQX+Kx7wU/uOIkGQn8aAEY8oWMoyja3N4dLd8Yf6XgSIR/4yWvMuveNOH5VShnqCgRqqh/UNanBA=="
+    },
+    "@types/d3-interpolate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-1.4.2.tgz",
+      "integrity": "sha512-ylycts6llFf8yAEs1tXzx2loxxzDZHseuhPokrqKprTQSTcD3JbJI1omZP1rphsELZO3Q+of3ff0ZS7+O6yVzg==",
+      "requires": {
+        "@types/d3-color": "^1"
+      }
+    },
+    "@types/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ=="
+    },
+    "@types/d3-random": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-2.2.1.tgz",
+      "integrity": "sha512-5vvxn6//poNeOxt1ZwC7QU//dG9QqABjy1T7fP/xmFHY95GnaOw3yABf29hiu5SR1Oo34XcpyHFbzod+vemQjA=="
+    },
+    "@types/d3-scale": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-3.3.2.tgz",
+      "integrity": "sha512-gGqr7x1ost9px3FvIfUMi5XA/F/yAf4UkUDtdQhpH92XCT0Oa7zkkRzY61gPVJq+DxpHn/btouw5ohWkbBsCzQ==",
+      "requires": {
+        "@types/d3-time": "^2"
+      }
+    },
+    "@types/d3-shape": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.8.tgz",
+      "integrity": "sha512-gqfnMz6Fd5H6GOLYixOZP/xlrMtJms9BaS+6oWxTKHNqPGZ93BkWWupQSCYm6YHqx6h9wjRupuJb90bun6ZaYg==",
+      "requires": {
+        "@types/d3-path": "^1"
+      }
+    },
+    "@types/d3-time": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg=="
+    },
+    "@types/json-schema": {
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
+      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
+      "dev": true
+    },
+    "@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true
+    },
+    "@types/lodash": {
+      "version": "4.14.182",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+    },
+    "@types/node": {
+      "version": "17.0.38",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.38.tgz",
+      "integrity": "sha512-5jY9RhV7c0Z4Jy09G+NIDTsCZ5G0L5n+Z+p+Y7t5VJHM30bgwzSjVtlcBxqAj+6L/swIlvtOSzr8rBk/aNyV2g==",
+      "dev": true
+    },
+    "@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
+    "@types/react": {
+      "version": "18.0.10",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.10.tgz",
+      "integrity": "sha512-dIugadZuIPrRzvIEevIu7A1smqOAjkSMv8qOfwPt9Ve6i6JT/FQcCHyk2qIAxwsQNKZt5/oGR0T4z9h2dXRAkg==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-dom": {
+      "version": "18.0.5",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.5.tgz",
+      "integrity": "sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
+    "@typescript-eslint/eslint-plugin": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.27.0.tgz",
+      "integrity": "sha512-DDrIA7GXtmHXr1VCcx9HivA39eprYBIFxbQEHI6NyraRDxCGpxAFiYQAT/1Y0vh1C+o2vfBiy4IuPoXxtTZCAQ==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/scope-manager": "5.27.0",
+        "@typescript-eslint/type-utils": "5.27.0",
+        "@typescript-eslint/utils": "5.27.0",
+        "debug": "^4.3.4",
+        "functional-red-black-tree": "^1.0.1",
+        "ignore": "^5.2.0",
+        "regexpp": "^3.2.0",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      }
+    },
+    "@typescript-eslint/parser": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.27.0.tgz",
+      "integrity": "sha512-8oGjQF46c52l7fMiPPvX4It3u3V3JipssqDfHQ2hcR0AeR8Zge+OYyKUCm5b70X72N1qXt0qgHenwN6Gc2SXZA==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/scope-manager": "5.27.0",
+        "@typescript-eslint/types": "5.27.0",
+        "@typescript-eslint/typescript-estree": "5.27.0",
+        "debug": "^4.3.4"
+      }
+    },
+    "@typescript-eslint/scope-manager": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.27.0.tgz",
+      "integrity": "sha512-VnykheBQ/sHd1Vt0LJ1JLrMH1GzHO+SzX6VTXuStISIsvRiurue/eRkTqSrG0CexHQgKG8shyJfR4o5VYioB9g==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "5.27.0",
+        "@typescript-eslint/visitor-keys": "5.27.0"
+      }
+    },
+    "@typescript-eslint/type-utils": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.27.0.tgz",
+      "integrity": "sha512-vpTvRRchaf628Hb/Xzfek+85o//zEUotr1SmexKvTfs7czXfYjXVT/a5yDbpzLBX1rhbqxjDdr1Gyo0x1Fc64g==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/utils": "5.27.0",
+        "debug": "^4.3.4",
+        "tsutils": "^3.21.0"
+      }
+    },
+    "@typescript-eslint/types": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.27.0.tgz",
+      "integrity": "sha512-lY6C7oGm9a/GWhmUDOs3xAVRz4ty/XKlQ2fOLr8GAIryGn0+UBOoJDWyHer3UgrHkenorwvBnphhP+zPmzmw0A==",
+      "dev": true
+    },
+    "@typescript-eslint/typescript-estree": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.27.0.tgz",
+      "integrity": "sha512-QywPMFvgZ+MHSLRofLI7BDL+UczFFHyj0vF5ibeChDAJgdTV8k4xgEwF0geFhVlPc1p8r70eYewzpo6ps+9LJQ==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "5.27.0",
+        "@typescript-eslint/visitor-keys": "5.27.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      }
+    },
+    "@typescript-eslint/utils": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.27.0.tgz",
+      "integrity": "sha512-nZvCrkIJppym7cIbP3pOwIkAefXOmfGPnCM0LQfzNaKxJHI6VjI8NC662uoiPlaf5f6ymkTy9C3NQXev2mdXmA==",
+      "dev": true,
+      "requires": {
+        "@types/json-schema": "^7.0.9",
+        "@typescript-eslint/scope-manager": "5.27.0",
+        "@typescript-eslint/types": "5.27.0",
+        "@typescript-eslint/typescript-estree": "5.27.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "eslint-scope": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "estraverse": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+          "dev": true
+        }
+      }
+    },
+    "@typescript-eslint/visitor-keys": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.27.0.tgz",
+      "integrity": "sha512-46cYrteA2MrIAjv9ai44OQDUoCZyHeGIc4lsjCUX2WT6r4C+kidz1bNiR4017wHOPUythYeH+Sc7/cFP97KEAA==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "5.27.0",
+        "eslint-visitor-keys": "^3.3.0"
+      }
+    },
+    "@visx/axis": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-2.10.0.tgz",
+      "integrity": "sha512-myEcXPzD7ZmKiXuhue2lpiuTDgl3Glhe1LB+xoUDS8ZAW76Asd6PwurjoxSnq3tHCz0EDBh7YlgApeFy3Bw38A==",
+      "requires": {
+        "@types/react": "*",
+        "@visx/group": "2.10.0",
+        "@visx/point": "2.6.0",
+        "@visx/scale": "2.2.2",
+        "@visx/shape": "2.10.0",
+        "@visx/text": "2.10.0",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.6.0"
+      }
+    },
+    "@visx/bounds": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/bounds/-/bounds-2.10.0.tgz",
+      "integrity": "sha512-rY7WFTIjQaXA8tFL45O2qbtSRkyF4yF75HiWz06F7BVmJ9UjF2qlomB3Y1z6gk6ZiFhwQ4zxABjOVjAQPLn7nQ==",
+      "requires": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "prop-types": "^15.5.10"
+      }
+    },
+    "@visx/curve": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@visx/curve/-/curve-2.1.0.tgz",
+      "integrity": "sha512-9b6JOnx91gmOQiSPhUOxdsvcnW88fgqfTPKoVgQxidMsD/I3wksixtwo8TR/vtEz2aHzzsEEhlv1qK7Y3yaSDw==",
+      "requires": {
+        "@types/d3-shape": "^1.3.1",
+        "d3-shape": "^1.0.6"
+      }
+    },
+    "@visx/event": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@visx/event/-/event-2.6.0.tgz",
+      "integrity": "sha512-WGp91g82s727g3NAnENF1ppC3ZAlvWg+Y+GG0WFg34NmmOZbvPI/PTOqTqZE3x6B8EUn8NJiMxRjxIMbi+IvRw==",
+      "requires": {
+        "@types/react": "*",
+        "@visx/point": "2.6.0"
+      }
+    },
+    "@visx/grid": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-2.10.0.tgz",
+      "integrity": "sha512-2uj8vfwQ0f7EN1MuNne/1a94gyux19MZxBd36BqXmyUpnRxC4DSYQRra05tqoydUupe1mAlJZHUuKl2zDK7tOw==",
+      "requires": {
+        "@types/react": "*",
+        "@visx/curve": "2.1.0",
+        "@visx/group": "2.10.0",
+        "@visx/point": "2.6.0",
+        "@visx/scale": "2.2.2",
+        "@visx/shape": "2.10.0",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "@visx/group": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/group/-/group-2.10.0.tgz",
+      "integrity": "sha512-DNJDX71f65Et1+UgQvYlZbE66owYUAfcxTkC96Db6TnxV221VKI3T5l23UWbnMzwFBP9dR3PWUjjqhhF12N5pA==",
+      "requires": {
+        "@types/react": "*",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "@visx/legend": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@visx/legend/-/legend-2.10.0.tgz",
+      "integrity": "sha512-OI8BYE6QQI9eXAng/C7UzuVw7d0fwlzrth6RmrdhlyT1K+BA3WpExapV+pDfwxu/tkEik8Ps5cZRV6HjX1/Mww==",
+      "requires": {
+        "@types/react": "*",
+        "@visx/group": "2.10.0",
+        "@visx/scale": "2.2.2",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.5.10"
+      }
+    },
     "@visx/mock-data": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@visx/mock-data/-/mock-data-2.1.2.tgz",
@@ -5501,6 +7420,14 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
       "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
     },
+    "d3-array": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.0.tgz",
+      "integrity": "sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==",
+      "requires": {
+        "internmap": "1 - 2"
+      }
+    },
     "d3-cloud": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/d3-cloud/-/d3-cloud-1.2.5.tgz",
@@ -5542,6 +7469,11 @@
       "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-2.2.2.tgz",
       "integrity": "sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw=="
     },
+    "d3-random": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-2.2.2.tgz",
+      "integrity": "sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw=="
+    },
     "d3-scale": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
@@ -5552,18 +7484,9 @@
         "d3-interpolate": "1.2.0 - 2",
         "d3-time": "^2.1.1",
         "d3-time-format": "2 - 3"
-      },
-      "dependencies": {
-        "d3-array": {
-          "version": "2.12.1",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
-          "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
-          "requires": {
-            "internmap": "^1.0.0"
-          }
-        }
       }
     },
+<<<<<<< HEAD
     "d3-shape": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
@@ -5578,16 +7501,6 @@
       "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
       "requires": {
         "d3-array": "2"
-      },
-      "dependencies": {
-        "d3-array": {
-          "version": "2.12.1",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
-          "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
-          "requires": {
-            "internmap": "^1.0.0"
-          }
-        }
       }
     },
     "d3-time-format": {
@@ -5811,10 +7724,301 @@
           "dev": true,
           "requires": {
             "ms": "^2.1.1"
+=======
+    "eslint-import-resolver-typescript": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz",
+      "integrity": "sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.3.4",
+        "glob": "^7.2.0",
+        "is-glob": "^4.0.3",
+        "resolve": "^1.22.0",
+        "tsconfig-paths": "^3.14.1"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.2.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.1.1",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
           }
         }
       }
     },
+    "eslint-module-utils": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz",
+      "integrity": "sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==",
+      "dev": true,
+      "requires": {
+        "debug": "^3.2.7",
+        "find-up": "^2.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
+    "eslint-plugin-import": {
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
+      "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.1.4",
+        "array.prototype.flat": "^1.2.5",
+        "debug": "^2.6.9",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-module-utils": "^2.7.3",
+        "has": "^1.0.3",
+        "is-core-module": "^2.8.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.values": "^1.1.5",
+        "resolve": "^1.22.0",
+        "tsconfig-paths": "^3.14.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-plugin-jsx-a11y": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz",
+      "integrity": "sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "aria-query": "^4.2.2",
+        "array-includes": "^3.1.4",
+        "ast-types-flow": "^0.0.7",
+        "axe-core": "^4.3.5",
+        "axobject-query": "^2.2.0",
+        "damerau-levenshtein": "^1.0.7",
+        "emoji-regex": "^9.2.2",
+        "has": "^1.0.3",
+        "jsx-ast-utils": "^3.2.1",
+        "language-tags": "^1.0.5",
+        "minimatch": "^3.0.4"
+      }
+    },
+    "eslint-plugin-prettier": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz",
+      "integrity": "sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==",
+      "dev": true,
+      "requires": {
+        "prettier-linter-helpers": "^1.0.0"
+      }
+    },
+    "eslint-plugin-react": {
+      "version": "7.30.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.30.0.tgz",
+      "integrity": "sha512-RgwH7hjW48BleKsYyHK5vUAvxtE9SMPDKmcPRQgtRCYaZA0XQPt5FSkrU3nhz5ifzMZcA8opwmRJ2cmOO8tr5A==",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.1.5",
+        "array.prototype.flatmap": "^1.3.0",
+        "doctrine": "^2.1.0",
+        "estraverse": "^5.3.0",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.5",
+        "object.fromentries": "^2.0.5",
+        "object.hasown": "^1.1.1",
+        "object.values": "^1.1.5",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.3",
+        "semver": "^6.3.0",
+        "string.prototype.matchall": "^4.0.7"
+      },
+      "dependencies": {
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2"
+          }
+        },
+        "resolve": {
+          "version": "2.0.0-next.3",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz",
+          "integrity": "sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==",
+          "dev": true,
+          "requires": {
+            "is-core-module": "^2.2.0",
+            "path-parse": "^1.0.6"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-plugin-react-hooks": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz",
+      "integrity": "sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==",
+      "dev": true,
+      "requires": {}
+    },
+    "eslint-scope": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+      "dev": true,
+      "requires": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      }
+    },
+    "eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+      "dev": true
+    },
+    "espree": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
+      "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.7.1",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.3.0"
+      }
+    },
+    "esquery": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.1.0"
+      }
+    },
+    "esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.2.0"
+      }
+    },
+    "estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true
+    },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
+    "fast-glob": {
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+>>>>>>> main
+          }
+        }
+      }
+    },
+<<<<<<< HEAD
     "eslint-import-resolver-typescript": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz",
@@ -6712,10 +8916,11 @@
       "integrity": "sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==",
       "dev": true
     },
-    "normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+=======
+    "fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "dev": true
     },
     "object-assign": {
diff --git a/pages/playground.tsx b/pages/playground.tsx
index 1499dc4..da3ca34 100644
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@@ -3,20 +3,32 @@ import { BoxPlot } from "components/Boxplot";
 import {
   mockCategoricalData,
   moreMockCategoricalData,
+  mockStackedBarKeys,
+  mockStackedBarGraphData,
   mockBoxPlotData,
   mockLineData,
   mockQuoteData,
   mockQuoteDataLong,
   mockPieData,
   mockTimelineData,
+  mockGroupedBarGraphData,
 } from "data/mocks";
 import { sectionsData } from "data/routes";
 import React from "react";
+import { Color } from "utils/Color";
 
 import { About } from "@/components/About";
+import {
+  GroupedBarGraphHorizontal,
+  GroupedBarGraphVertical,
+} from "@/components/GroupedBarGraph";
 import { PieChart } from "@/components/PieChart";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
 import { Sections } from "@/components/Sections";
+import {
+  StackedBarGraphVertical,
+  StackedBarGraphHorizontal,
+} from "@/components/StackedBarGraph";
 import { Timeline } from "@/components/Timeline";
 
 import { CenterWrapper } from "../components/CenterWrapper";
@@ -28,7 +40,7 @@ import styles from "./playground.module.css";
 
 export default function Home() {
   return (
-    <div className={styles.page}>
+    <div className={styles.page} suppressHydrationWarning>
       <h1>Playground</h1>
       <p>Show off your components here!</p>
 
@@ -97,6 +109,48 @@ export default function Home() {
         }))}
       />
 
+      <h2>
+        <code>{"<StackedBarGraphVertical />"}</code>
+      </h2>
+      <StackedBarGraphVertical
+        width={600}
+        height={400}
+        keys={mockStackedBarKeys}
+        colorRange={[
+          Color.primaryAccent,
+          Color.secondaryAccentLight,
+          Color.primaryAccentLighter,
+        ]}
+        data={mockStackedBarGraphData}
+        margin={{
+          top: 20,
+          left: 20,
+        }}
+      />
+
+      <h2>
+        <code>{"<StackedBarGraphHorizontal />"}</code>
+      </h2>
+      <p>
+        <code>{"<StackedBarGraphHorizontal />"}</code> takes the same props as{" "}
+        <code>{"<StackedBarGraphVertical />"}</code>.
+      </p>
+      <StackedBarGraphHorizontal
+        width={600}
+        height={400}
+        keys={mockStackedBarKeys}
+        colorRange={[
+          Color.primaryAccent,
+          Color.secondaryAccentLight,
+          Color.primaryAccentLighter,
+        ]}
+        data={mockStackedBarGraphData}
+        margin={{
+          top: 20,
+          left: 20,
+        }}
+      />
+
       <h2>
         <code>{"<Timeline />"}</code>
       </h2>
@@ -185,6 +239,52 @@ export default function Home() {
           circleDiameter={180}
         />
       </div>
+
+      <h2>
+        <code>{"<GroupedBarGraphVertical />"}</code>
+      </h2>
+      <GroupedBarGraphVertical
+        className={styles.barGraphDemo}
+        data={mockGroupedBarGraphData}
+        barColors={[Color.primaryAccentLight, Color.secondaryAccentLight]}
+        barHoverColorsMap={{
+          [Color.primaryAccentLight]: Color.primaryAccent,
+          [Color.secondaryAccentLight]: Color.secondaryAccent,
+        }}
+        width={500}
+        height={400}
+        margin={{
+          top: 20,
+          bottom: 40,
+          left: 50,
+          right: 20,
+        }}
+      />
+
+      <h2>
+        <code>{"<GroupedBarGraphHorizontal />"}</code>
+      </h2>
+      <p>
+        <code>{"<GroupedBarGraphHorizontal />"}</code> takes the same props as{" "}
+        <code>{"<GroupedBarGraphVertical />"}</code>.
+      </p>
+      <GroupedBarGraphHorizontal
+        className={styles.barGraphDemo}
+        data={mockGroupedBarGraphData}
+        barColors={[Color.primaryAccentLight, Color.secondaryAccentLight]}
+        barHoverColorsMap={{
+          [Color.primaryAccentLight]: Color.primaryAccent,
+          [Color.secondaryAccentLight]: Color.secondaryAccent,
+        }}
+        width={600}
+        height={400}
+        margin={{
+          top: 20,
+          bottom: 40,
+          left: 60,
+          right: 20,
+        }}
+      />
     </div>
   );
 }