@guardian/interactive-component-library 0.1.0-alpha.11 → 0.1.0-alpha.13

package/dist/interactive-component-library.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
-import { useRef, useState, useLayoutEffect, useId, useMemo, useEffect, useContext, useImperativeHandle } from "preact/hooks";
-import { createPortal, forwardRef } from "preact/compat";
-import { createElement, cloneElement, createContext, toChildArray } from "preact";
+import { useRef, useState, useLayoutEffect, useCallback, useEffect, useMemo, useContext, useImperativeHandle } from "preact/hooks";
+import { render, createElement, cloneElement, createContext, toChildArray } from "preact";
+import { useSyncExternalStore, createPortal, forwardRef } from "preact/compat";
 import { scaleLinear as scaleLinear$1 } from "d3-scale";
 import { geoStream, geoAlbers, geoPath, geoMercator, geoContains } from "d3-geo";
 const main = "";
@@ -9,7 +9,7 @@ const group = "_group_nq9z3_1";
 const rotated = "_rotated_nq9z3_6";
 const path$4 = "_path_nq9z3_10";
 const active = "_active_nq9z3_14";
-const defaultStyles$q = {
+const defaultStyles$r = {
   group,
   rotated,
   path: path$4,
@@ -48,13 +48,13 @@ function Chevron({
   styles: styles2
 }) {
   const defaultStylesCopy = {
-    ...defaultStyles$q
+    ...defaultStyles$r
   };
   if (active2) {
-    defaultStylesCopy.path = mergeStyles(defaultStyles$q.path, defaultStyles$q.active);
+    defaultStylesCopy.path = mergeStyles(defaultStyles$r.path, defaultStyles$r.active);
   }
   if (direction === DIRECTION.up) {
-    defaultStylesCopy.group = mergeStyles(defaultStyles$q.group, defaultStyles$q.rotated);
+    defaultStylesCopy.group = mergeStyles(defaultStyles$r.group, defaultStyles$r.rotated);
   }
   styles2 = mergeStyles(defaultStylesCopy, styles2);
   return jsx("svg", {
@@ -77,12 +77,12 @@ function Chevron({
 }
 const container$4 = "_container_jzalm_1";
 const dot = "_dot_jzalm_6";
-const circle$1 = "_circle_jzalm_13";
+const circle$2 = "_circle_jzalm_13";
 const text$4 = "_text_jzalm_17";
-const defaultStyles$p = {
+const defaultStyles$q = {
   container: container$4,
   dot,
-  circle: circle$1,
+  circle: circle$2,
   text: text$4
 };
 const DOT_TYPE = {
@@ -96,10 +96,10 @@ const LegendItem = ({
   abbreviation
 }) => {
   const defaultStylesCopy = {
-    ...defaultStyles$p
+    ...defaultStyles$q
   };
   if (dotType === DOT_TYPE.round) {
-    defaultStylesCopy.dot = mergeStyles(defaultStyles$p.dot, defaultStyles$p.circle);
+    defaultStylesCopy.dot = mergeStyles(defaultStyles$q.dot, defaultStyles$q.circle);
   }
   styles2 = mergeStyles(defaultStylesCopy, styles2);
   return jsxs("div", {
@@ -134,7 +134,7 @@ function isDarkColor(color) {
 const bar$2 = "_bar_wmb0k_1";
 const label$1 = "_label_wmb0k_5";
 const backgroundRect = "_backgroundRect_wmb0k_11";
-const defaultStyles$o = {
+const defaultStyles$p = {
   bar: bar$2,
   label: label$1,
   backgroundRect
@@ -168,7 +168,7 @@ function StackedBar({
     setHideLabels(false);
   }, [stack, width, height]);
   styles2 = mergeStyles({
-    ...defaultStyles$o
+    ...defaultStyles$p
   }, styles2);
   let totalWidth = 0;
   const content2 = stack.map((d2, index2) => {
@@ -224,62 +224,153 @@ function StackedBar({
     children: content2
   });
 }
-const svg$7 = "_svg_un4gp_1";
-const previous = "_previous_un4gp_7";
-const next = "_next_un4gp_11";
-const defaultStyles$n = {
-  svg: svg$7,
+function shouldUpdate(oldState, newState) {
+  if (oldState === newState)
+    return false;
+  if (isObj(oldState) && isObj(newState)) {
+    for (let key in newState) {
+      if (oldState[key] !== newState[key])
+        return true;
+    }
+    return false;
+  }
+  return true;
+}
+function isObj(obj) {
+  return typeof obj === "object" && !Array.isArray(obj) && obj !== null;
+}
+function createStore(initialStore) {
+  let store = initialStore;
+  const listeners = /* @__PURE__ */ new Set();
+  function useStore(selectorFn = (store2) => store2) {
+    const subscribe = useCallback((updater) => {
+      const listener = {
+        updater,
+        selectorFn
+      };
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }, []);
+    const syncedStore = useSyncExternalStore(subscribe, getStore, getServerStore);
+    return selectorFn(syncedStore);
+  }
+  function setStore(action) {
+    const oldStore = store;
+    store = action instanceof Function ? action(store) : action;
+    listeners.forEach(({
+      selectorFn,
+      updater
+    }) => {
+      const oldState = selectorFn(oldStore);
+      const newState = selectorFn(store);
+      if (shouldUpdate(oldState, newState))
+        updater(() => newState);
+    });
+  }
+  function getStore() {
+    return store;
+  }
+  function getServerStore() {
+    return initialStore;
+  }
+  return [useStore, setStore, getStore];
+}
+const [useGradients, setGradients, getGradients] = createStore({});
+const svg$8 = "_svg_1cajk_6";
+const previous = "_previous_1cajk_12";
+const next = "_next_1cajk_16";
+const defaultStyles$o = {
+  svg: svg$8,
   previous,
   next
 };
-const GradientIcon = ({
-  previous: previous2,
-  next: next2,
-  styles: styles2
-}) => {
-  styles2 = mergeStyles({
-    ...defaultStyles$n
-  }, styles2);
-  const gradientId = useId();
-  return jsxs("svg", {
+const GradientIcon = (props) => {
+  let {
+    previous: previous2,
+    next: next2,
+    styles: styles2
+  } = props;
+  styles2 = mergeStyles(defaultStyles$o, styles2);
+  const gradientId = `gv-gradient-def-${previous2}-${next2}`;
+  const gradients = useGradients();
+  useEffect(() => {
+    setGradients((current) => {
+      current[gradientId] = {
+        id: gradientId,
+        ...props
+      };
+      return current;
+    });
+  }, [gradientId, props]);
+  useEffect(() => {
+    let container2 = document.getElementById("gv-gradient-defs");
+    if (!container2) {
+      container2 = document.createElement("div");
+      container2.id = "gv-gradient-defs";
+      document.body.prepend(container2);
+    }
+    render(jsx(GradientDefs, {
+      gradients: Object.values(gradients)
+    }), container2);
+  }, [gradients]);
+  return jsx("svg", {
     class: styles2.svg,
     width: "24",
     height: "11",
     viewBox: "0 0 24 11",
     xmlns: "http://www.w3.org/2000/svg",
-    children: [jsx("path", {
+    children: jsx("path", {
       d: "M0 5.434C0 2.43288 2.43288 0 5.434 0H5.69626C6.85818 0 7.9797 0.426401 8.84813 1.19834C10.6456 2.79612 13.3544 2.79612 15.1519 1.19834C16.0203 0.426401 17.1418 0 18.3037 0L18.566 0C21.5671 0 24 2.43288 24 5.434V5.566C24 8.56712 21.5671 11 18.566 11H18.3037C17.1418 11 16.0203 10.5736 15.1519 9.80166C13.3544 8.20388 10.6456 8.20388 8.84813 9.80166C7.9797 10.5736 6.85818 11 5.69626 11H5.434C2.43288 11 0 8.56712 0 5.566V5.434Z",
       fill: `url(#${gradientId})`
-    }), jsx("defs", {
-      children: jsxs("linearGradient", {
-        id: gradientId,
-        x1: "5.5",
-        y1: "5.5",
-        x2: "12",
-        y2: "5.5",
-        gradientUnits: "userSpaceOnUse",
-        children: [jsx("stop", {
-          class: `${styles2.previous} stop-color--${previous2}`
-        }), jsx("stop", {
-          class: `${styles2.next} stop-color--${next2}`,
-          offset: "1"
-        })]
-      })
-    })]
+    })
   });
 };
+function GradientDefs({
+  gradients
+}) {
+  return jsx("svg", {
+    width: "24",
+    height: "11",
+    viewBox: "0 0 24 11",
+    children: jsx("defs", {
+      children: gradients.map(({
+        id,
+        previous: previous2,
+        next: next2,
+        styles: styles2
+      }) => {
+        return jsxs("linearGradient", {
+          id,
+          x1: "5.5",
+          y1: "5.5",
+          x2: "12",
+          y2: "5.5",
+          gradientUnits: "userSpaceOnUse",
+          children: [jsx("stop", {
+            class: `${styles2 == null ? void 0 : styles2.previous} stop-color--${previous2}`
+          }), jsx("stop", {
+            class: `${styles2 == null ? void 0 : styles2.next} stop-color--${next2}`,
+            offset: "1"
+          })]
+        }, id);
+      })
+    })
+  });
+}
 const button$4 = "_button_kpmyt_1";
-const svg$6 = "_svg_kpmyt_14";
-const defaultStyles$m = {
+const svg$7 = "_svg_kpmyt_14";
+const defaultStyles$n = {
   button: button$4,
-  svg: svg$6
+  svg: svg$7
 };
 const InfoButton = ({
   onClick,
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$m
+    ...defaultStyles$n
   }, styles2);
   return jsx("button", {
     class: styles2.button,
@@ -294,28 +385,32 @@ const InfoButton = ({
     })
   });
 };
-const circleicon = "_circleicon_1ge2m_1";
-const rect = "_rect_1ge2m_7";
-const defaultStyles$l = {
-  circleicon,
-  rect
+const svg$6 = "_svg_1v49v_1";
+const circle$1 = "_circle_1v49v_5";
+const pulse = "_pulse_1v49v_9";
+const defaultStyles$m = {
+  svg: svg$6,
+  circle: circle$1,
+  pulse
 };
 const CircleIcon = ({
-  abbreviation,
+  color,
+  pulse: pulse2 = false,
   styles: styles2
 }) => {
-  styles2 = mergeStyles({
-    ...defaultStyles$l
-  }, styles2);
+  styles2 = mergeStyles(defaultStyles$m, styles2);
   return jsx("svg", {
-    style: styles2.circleicon,
+    style: styles2.svg,
     fill: "none",
     height: "11",
     viewBox: "0 0 11 11",
     width: "11",
     xmlns: "http://www.w3.org/2000/svg",
     children: jsx("rect", {
-      class: `${styles2.rect}  fill-color--${abbreviation}`,
+      class: [styles2.circle, pulse2 && styles2.pulse].join(" "),
+      style: {
+        fill: color
+      },
       height: "11",
       rx: "5.5",
       width: "11"
@@ -323,7 +418,7 @@ const CircleIcon = ({
   });
 };
 const text$3 = "_text_1okyv_1";
-const defaultStyles$k = {
+const defaultStyles$l = {
   text: text$3
 };
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -673,7 +768,7 @@ const RelativeTimeSentence = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$k
+    ...defaultStyles$l
   }, styles2);
   let timeSince = dayjs(timeStamp).fromNow();
   return jsx("span", {
@@ -683,7 +778,7 @@ const RelativeTimeSentence = ({
 };
 const pageContainer = "_pageContainer_1s0yq_9";
 const sideBorders = "_sideBorders_1s0yq_42";
-const defaultStyles$j = {
+const defaultStyles$k = {
   pageContainer,
   sideBorders
 };
@@ -695,14 +790,14 @@ function Container({
   const {
     pageContainer: pageContainer2,
     sideBorders: sideBordersStyle
-  } = mergeStyles(defaultStyles$j, styles2);
+  } = mergeStyles(defaultStyles$k, styles2);
   return jsx("div", {
     className: [pageContainer2, sideBorders2 && sideBordersStyle].join(" "),
     children
   });
 }
 const bar$1 = "_bar_17pyf_9";
-const defaultStyles$i = {
+const defaultStyles$j = {
   bar: bar$1
 };
 function ChangeBar({
@@ -720,7 +815,7 @@ function ChangeBar({
   let thisStyles = ` height: ${height}; width: ${barwidth}px; ${positive ? `left: ${posleft}` : `left: ${negleft}`}`;
   let thisColor = ` bg-color--${party}`;
   styles2 = mergeStyles({
-    ...defaultStyles$i
+    ...defaultStyles$j
   }, styles2);
   return jsx("div", {
     className: styles2.wrapper,
@@ -735,7 +830,7 @@ const svg$5 = "_svg_886i1_9";
 const dividingLineColor = "_dividingLineColor_886i1_16";
 const square = "_square_886i1_20";
 const corner = "_corner_886i1_24";
-const defaultStyles$h = {
+const defaultStyles$i = {
   svg: svg$5,
   dividingLineColor,
   square,
@@ -748,7 +843,7 @@ const SquareCutCornerIcon = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$h
+    ...defaultStyles$i
   }, styles2);
   let cornerSize = squareSize * 0.625;
   let cornerMargin = squareSize < 100 ? squareSize / 6 : 10;
@@ -786,7 +881,7 @@ const stackedGridRotateItems0 = "_stackedGridRotateItems0_1e05o_13";
 const stackedGridRotateItems90 = "_stackedGridRotateItems90_1e05o_19";
 const stackedGridRotateItems180 = "_stackedGridRotateItems180_1e05o_25";
 const stackedGridRotateItems270 = "_stackedGridRotateItems270_1e05o_31";
-const defaultStyles$g = {
+const defaultStyles$h = {
   stackedGridContainer,
   stackedGridRotateItems0,
   stackedGridRotateItems90,
@@ -825,7 +920,7 @@ const StackedGrid = ({
     width: containerWidth,
     transform: containerFlip
   };
-  styles2 = mergeStyles(defaultStyles$g, styles2);
+  styles2 = mergeStyles(defaultStyles$h, styles2);
   return jsx("div", {
     style: flexStyles,
     className: `${styles2.stackedGridContainer} ${styles2[itemRotateClass]}`,
@@ -834,7 +929,7 @@ const StackedGrid = ({
 };
 const svg$4 = "_svg_l2fsl_9";
 const squareFill = "_squareFill_l2fsl_16";
-const defaultStyles$f = {
+const defaultStyles$g = {
   svg: svg$4,
   squareFill
 };
@@ -844,7 +939,7 @@ const SquareIcon = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$f
+    ...defaultStyles$g
   }, styles2);
   return jsx("svg", {
     width: size,
@@ -862,7 +957,7 @@ const SquareIcon = ({
 };
 const button$3 = "_button_1fees_1";
 const icon = "_icon_1fees_6";
-const defaultStyles$e = {
+const defaultStyles$f = {
   button: button$3,
   icon
 };
@@ -872,7 +967,7 @@ function ArrowButton({
   styles: styles2,
   onClick
 }) {
-  styles2 = mergeStyles(defaultStyles$e, styles2);
+  styles2 = mergeStyles(defaultStyles$f, styles2);
   return jsx("button", {
     className: styles2.button,
     disabled,
@@ -898,7 +993,7 @@ function ArrowButton({
 }
 const button$2 = "_button_19t7j_1";
 const buttonInner$1 = "_buttonInner_19t7j_6";
-const defaultStyles$d = {
+const defaultStyles$e = {
   button: button$2,
   buttonInner: buttonInner$1
 };
@@ -908,7 +1003,7 @@ function Button({
   styles: styles2,
   children
 }) {
-  styles2 = mergeStyles(defaultStyles$d, styles2);
+  styles2 = mergeStyles(defaultStyles$e, styles2);
   return jsx("button", {
     className: styles2.button,
     "data-type": type,
@@ -923,7 +1018,7 @@ const button$1 = "_button_6w12u_1";
 const buttonBorder = "_buttonBorder_6w12u_10";
 const svg$3 = "_svg_6w12u_18";
 const path$3 = "_path_6w12u_24";
-const defaultStyles$c = {
+const defaultStyles$d = {
   button: button$1,
   buttonBorder,
   svg: svg$3,
@@ -934,7 +1029,7 @@ function CloseButton({
   onClick,
   styles: styles2
 }) {
-  styles2 = mergeStyles(defaultStyles$c, styles2);
+  styles2 = mergeStyles(defaultStyles$d, styles2);
   return jsx("button", {
     className: [styles2.button, border && styles2.buttonBorder].join(" "),
     onClick,
@@ -1077,7 +1172,7 @@ const headerCell = "_headerCell_1b75c_31";
 const headerCellButton = "_headerCellButton_1b75c_39";
 const bodyRow = "_bodyRow_1b75c_48";
 const bodyCell = "_bodyCell_1b75c_53";
-const defaultStyles$b = {
+const defaultStyles$c = {
   table,
   hideHeader,
   hideHeaderNoBorder,
@@ -1118,7 +1213,7 @@ function Table({
       };
     });
   };
-  styles2 = mergeStyles(defaultStyles$b, styles2);
+  styles2 = mergeStyles(defaultStyles$c, styles2);
   return jsxs("table", {
     className: styles2.table,
     children: [jsx("thead", {
@@ -1251,7 +1346,7 @@ const y1Label = "_y1Label_gj7pr_24";
 const y2Label = "_y2Label_gj7pr_28";
 const axis$1 = "_axis_gj7pr_32";
 const axisLabel = "_axisLabel_gj7pr_37";
-const defaultStyles$a = {
+const defaultStyles$b = {
   slopeChartContainer,
   svg: svg$2,
   line,
@@ -1303,7 +1398,7 @@ const SlopeChart = ({
     return positionLabels(labels);
   }, [lines, y2Label2, yScale]);
   styles2 = mergeStyles({
-    ...defaultStyles$a
+    ...defaultStyles$b
   }, styles2);
   const chart = jsx("svg", {
     class: styles2.svg,
@@ -1392,9 +1487,9 @@ const useTooltipTarget = (targetElement, trackPosition) => {
     clientY,
     currentTarget
   }) => {
-    const rect2 = currentTarget.getBoundingClientRect();
-    const x = clientX - rect2.left;
-    const y = clientY - rect2.top;
+    const rect = currentTarget.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const y = clientY - rect.top;
     requestAnimationFrame(() => {
       setPosition({
         x,
@@ -1526,7 +1621,7 @@ function Modal({
   });
 }
 const tooltip = "_tooltip_11t5d_1";
-const defaultStyles$9 = {
+const defaultStyles$a = {
   tooltip
 };
 const TooltipType = {
@@ -1554,7 +1649,7 @@ function Tooltip({
     hoverActive
   } = useTooltipTarget(targetElement, trackPosition);
   const tooltipRef = useRef(null);
-  styles2 = mergeStyles(defaultStyles$9, styles2);
+  styles2 = mergeStyles(defaultStyles$a, styles2);
   useEffect(() => {
     let element = null;
     if (typeof refOrSelector === "string") {
@@ -1649,7 +1744,7 @@ function tooltipPositionForRect({
 }
 const text$2 = "_text_1b8t2_1";
 const container$3 = "_container_1b8t2_10";
-const defaultStyles$8 = {
+const defaultStyles$9 = {
   text: text$2,
   container: container$3
 };
@@ -1660,7 +1755,7 @@ const ControlChange = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$8
+    ...defaultStyles$9
   }, styles2);
   let hasChanged = next2 !== previous2;
   return jsx("div", {
@@ -1674,9 +1769,8 @@ const ControlChange = ({
           next: styles2.next
         }
       }) : jsx(CircleIcon, {
-        abbreviation: next2,
         styles: {
-          rect: styles2.next
+          circle: styles2.next || `fill-color--${next2}`
         }
       }), jsx("strong", {
         className: styles2.text,
@@ -1685,16 +1779,20 @@ const ControlChange = ({
     })
   });
 };
-const toplineResult = "_toplineResult_lvw57_9";
-const name = "_name_lvw57_12";
-const displayNumbers = "_displayNumbers_lvw57_25";
-const mainNumber = "_mainNumber_lvw57_34";
-const secondaryNumber = "_secondaryNumber_lvw57_38";
-const displayRow = "_displayRow_lvw57_45";
-const displayColumn = "_displayColumn_lvw57_51";
-const topRow = "_topRow_lvw57_55";
-const defaultStyles$7 = {
+const toplineResult = "_toplineResult_w8o28_9";
+const primaryname = "_primaryname_w8o28_12";
+const secondaryname = "_secondaryname_w8o28_26";
+const name = "_name_w8o28_32";
+const displayNumbers = "_displayNumbers_w8o28_45";
+const mainNumber = "_mainNumber_w8o28_54";
+const secondaryNumber = "_secondaryNumber_w8o28_58";
+const displayRow = "_displayRow_w8o28_65";
+const displayColumn = "_displayColumn_w8o28_71";
+const topRow = "_topRow_w8o28_75";
+const defaultStyles$8 = {
   toplineResult,
+  primaryname,
+  secondaryname,
   name,
   displayNumbers,
   mainNumber,
@@ -1705,6 +1803,7 @@ const defaultStyles$7 = {
 };
 const ToplineResult = ({
   name: name2,
+  secondaryName,
   mainNumber: mainNumber2,
   secondaryNumber: secondaryNumber2,
   styles: styles2,
@@ -1715,40 +1814,74 @@ const ToplineResult = ({
   showInfoButton = false
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$7
+    ...defaultStyles$8
   }, styles2);
   const displayStyle = displayRow2 ? styles2.displayRow : styles2.displayColumn;
-  return jsxs("div", {
-    class: styles2.toplineResult,
-    onMouseOver,
-    children: [jsxs("div", {
-      class: styles2.topRow,
-      children: [jsx("span", {
-        class: `${styles2.name} before-color--${abbreviation}`,
-        children: name2
-      }), " ", showInfoButton && jsx("span", {
-        class: styles2.infoButton,
-        children: jsx(InfoButton, {
-          onClick: onInfoPress
-        })
-      })]
-    }), jsxs("div", {
-      class: `${styles2.displayNumbers} ${displayStyle}`,
-      children: [jsx("div", {
-        class: styles2.mainNumber,
-        children: mainNumber2
-      }), jsx("div", {
-        class: styles2.secondaryNumber,
-        children: secondaryNumber2
+  return !secondaryName ? jsxs(Fragment, {
+    children: ["    ", jsxs("div", {
+      class: styles2.toplineResult,
+      onMouseOver,
+      children: [jsxs("div", {
+        class: styles2.topRow,
+        children: [jsx("span", {
+          class: `${styles2.name} before-color--${abbreviation}`,
+          children: name2
+        }), " ", showInfoButton && jsx("span", {
+          class: styles2.infoButton,
+          children: jsx(InfoButton, {
+            onClick: onInfoPress
+          })
+        })]
+      }), jsxs("div", {
+        class: `${styles2.displayNumbers} ${displayStyle}`,
+        children: [jsx("div", {
+          class: styles2.mainNumber,
+          children: mainNumber2
+        }), jsx("div", {
+          class: styles2.secondaryNumber,
+          children: secondaryNumber2
+        })]
       })]
     })]
+  }) : jsx(Fragment, {
+    children: jsxs("div", {
+      class: styles2.toplineResult,
+      onMouseOver,
+      children: [jsxs("div", {
+        class: styles2.topRow,
+        children: [jsx("span", {
+          class: `${styles2.primaryname} before-color--${abbreviation}`,
+          children: name2
+        }), " ", showInfoButton && jsx("span", {
+          class: styles2.infoButton,
+          children: jsx(InfoButton, {
+            onClick: onInfoPress
+          })
+        })]
+      }), jsxs("div", {
+        class: styles2.subhead,
+        children: [jsx("span", {
+          class: styles2.secondaryname,
+          children: secondaryName
+        }), " "]
+      }), jsxs("div", {
+        class: `${styles2.displayNumbers} ${displayStyle}`,
+        children: [jsx("div", {
+          class: styles2.mainNumber,
+          children: mainNumber2
+        }), jsx("div", {
+          class: styles2.secondaryNumber,
+          children: secondaryNumber2
+        })]
+      })]
+    })
   });
 };
-const section = "_section_te61d_9";
-const borderTop = "_borderTop_te61d_13";
-const header = "_header_te61d_45";
-const content = "_content_te61d_65";
-const defaultStyles$6 = {
+const section = "_section_12aiu_9";
+const borderTop = "_borderTop_12aiu_52";
+const header = "_header_12aiu_56";
+const content = "_content_12aiu_76";
+const defaultStyles$7 = {
   section,
   borderTop,
   header,
@@ -1757,14 +1890,18 @@ const defaultStyles$6 = {
 const PageSection = forwardRef(({
   children,
   styles: styles2,
-  borderTop: borderTop2 = false
+  borderTop: borderTop2 = false,
+  backgroundColor = "transparent"
 }, ref) => {
   styles2 = mergeStyles({
-    ...defaultStyles$6
+    ...defaultStyles$7
   }, styles2);
   return jsxs("section", {
     ref,
     className: [styles2.section, borderTop2 && styles2.borderTop].join(" "),
+    style: {
+      "--background-color": backgroundColor
+    },
     children: [jsx("div", {
       className: styles2.header,
       children: children.header
@@ -1777,7 +1914,7 @@ const PageSection = forwardRef(({
 const text$1 = "_text_lo5h3_1";
 const axis = "_axis_lo5h3_6";
 const bar = "_bar_lo5h3_10";
-const defaultStyles$5 = {
+const defaultStyles$6 = {
   text: text$1,
   axis,
   bar
@@ -1792,17 +1929,16 @@ const ColumnChart = ({
   columnPadding,
   styles: styles2
 }) => {
-  styles2 = mergeStyles(defaultStyles$5, styles2);
+  styles2 = mergeStyles(defaultStyles$6, styles2);
   const yScale = scaleLinear$1([maxValue, minValue], [0, chartHeight]);
+  const totalColumnWidth = Number(columnWidth) + Number(columnPadding.left) + Number(columnPadding.right);
   return jsxs("svg", {
     width: chartWidth,
     height: chartHeight,
-    style: "",
     children: [columns.map((column, index2) => {
       const getHeight = (input2) => {
         return yScale(0) - yScale(input2);
       };
-      let totalColumnWidth = Number(columnWidth) + Number(columnPadding.left) + Number(columnPadding.right);
       return jsxs("g", {
         children: [jsx("rect", {
           x: index2 * totalColumnWidth,
@@ -1812,7 +1948,7 @@ const ColumnChart = ({
           fill: column.color,
           className: `${styles2.bar} fill-color--${column.id}`,
           id: column.id
-        }, index2), jsx("text", {
+        }), jsx("text", {
           className: styles2.text,
           x: index2 * totalColumnWidth + 2,
           y: column.value < 0 ? yScale(0) - 6 : yScale(0) + 20,
@@ -1836,7 +1972,7 @@ const blurb = "_blurb_vd5ly_44";
 const leftCell = "_leftCell_vd5ly_55";
 const rightCell = "_rightCell_vd5ly_55";
 const mugshot = "_mugshot_vd5ly_71";
-const defaultStyles$4 = {
+const defaultStyles$5 = {
   text,
   container: container$2,
   title: title$1,
@@ -1855,7 +1991,7 @@ const PartyProfile = ({
   abbreviation
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$4
+    ...defaultStyles$5
   }, styles2);
   return jsx("div", {
     class: styles2.container,
@@ -2164,7 +2300,7 @@ function SVGMapProvider({
   });
 }
 const path$1 = "_path_1cwd5_9";
-const defaultStyles$3 = {
+const defaultStyles$4 = {
   path: path$1
 };
 function CompositionBorders({
@@ -2173,7 +2309,7 @@ function CompositionBorders({
   const {
     projection
   } = useContext(MapContext);
-  styles2 = mergeStyles(defaultStyles$3, styles2);
+  styles2 = mergeStyles(defaultStyles$4, styles2);
   return jsx("path", {
     className: styles2.path,
     d: projection.getCompositionBorders()
@@ -2472,7 +2608,7 @@ const Map$1 = forwardRef(({
 });
 const container = "_container_azu4a_1";
 const paragraph = "_paragraph_azu4a_12";
-const defaultStyles$2 = {
+const defaultStyles$3 = {
   container,
   paragraph
 };
@@ -2485,7 +2621,7 @@ function ResultSummary({
   styles: styles2
 }) {
   styles2 = mergeStyles({
-    ...defaultStyles$2
+    ...defaultStyles$3
   }, styles2);
   return jsxs("div", {
     class: styles2.container,
@@ -2528,7 +2664,7 @@ const suggestions = "_suggestions_g5w44_36";
 const suggestion = "_suggestion_g5w44_36";
 const selected = "_selected_g5w44_59";
 const highlighted = "_highlighted_g5w44_63";
-const defaultStyles$1 = {
+const defaultStyles$2 = {
   searchContainer,
   input,
   searchIcon,
@@ -2549,7 +2685,7 @@ function SearchInput({
   styles: styles2
 }) {
   var _a, _b, _c;
-  styles2 = mergeStyles(defaultStyles$1, styles2);
+  styles2 = mergeStyles(defaultStyles$2, styles2);
   const inputRef = useRef(null);
   const [selectedIndex, setSelectedIndex] = useState(-1);
   const [suggestions2, setSuggestions] = useState();
@@ -2658,6 +2794,32 @@ function SuggestionList({
     })
   });
 }
+const refreshIndicator = "_refreshIndicator_u6lji_1";
+const liveText = "_liveText_u6lji_8";
+const refreshText = "_refreshText_u6lji_9";
+const defaultStyles$1 = {
+  refreshIndicator,
+  liveText,
+  refreshText
+};
+function RefreshIndicator({
+  text: text2,
+  styles: styles2
+}) {
+  styles2 = mergeStyles(defaultStyles$1, styles2);
+  return jsxs("div", {
+    className: styles2.refreshIndicator,
+    children: [jsx(CircleIcon, {
+      pulse: true
+    }), jsx("span", {
+      className: styles2.liveText,
+      children: "LIVE"
+    }), jsx("span", {
+      className: styles2.refreshText,
+      children: text2
+    })]
+  });
+}
 const coalitionsWrapper = "_coalitionsWrapper_1ahqy_9";
 const coalitionsContainer = "_coalitionsContainer_1ahqy_14";
 const coalition = "_coalition_1ahqy_9";
@@ -2961,6 +3123,7 @@ export {
   PageSection,
   PartyProfile,
   Projection,
+  RefreshIndicator,
   RelativeTimeSentence,
   ResultSummary,
   SearchInput,