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

package/dist/interactive-component-library.umd.cjs

@@ -1,13 +1,13 @@
 (function(global2, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("preact/jsx-runtime"), require("preact/hooks"), require("preact/compat"), require("preact"), require("d3-scale"), require("d3-geo")) : typeof define === "function" && define.amd ? define(["exports", "preact/jsx-runtime", "preact/hooks", "preact/compat", "preact", "d3-scale", "d3-geo"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2["interactive-component-library"] = {}, global2["preact/jsx-runtime"], global2["preact/hooks"], global2["preact/compat"], global2.preact, global2["d3-scale"], global2["d3-geo"]));
-})(this, function(exports2, jsxRuntime, hooks, compat, preact, d3Scale, d3Geo) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("preact/jsx-runtime"), require("preact/hooks"), require("preact"), require("preact/compat"), require("d3-scale"), require("d3-geo")) : typeof define === "function" && define.amd ? define(["exports", "preact/jsx-runtime", "preact/hooks", "preact", "preact/compat", "d3-scale", "d3-geo"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2["interactive-component-library"] = {}, global2["preact/jsx-runtime"], global2["preact/hooks"], global2.preact, global2["preact/compat"], global2["d3-scale"], global2["d3-geo"]));
+})(this, function(exports2, jsxRuntime, hooks, preact, compat, d3Scale, d3Geo) {
   "use strict";
   const main = "";
   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,
@@ -46,13 +46,13 @@
     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 jsxRuntime.jsx("svg", {
@@ -75,12 +75,12 @@
   }
   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 = {
@@ -94,10 +94,10 @@
     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 jsxRuntime.jsxs("div", {
@@ -132,7 +132,7 @@
   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
@@ -166,7 +166,7 @@
       setHideLabels(false);
     }, [stack, width, height]);
     styles2 = mergeStyles({
-      ...defaultStyles$o
+      ...defaultStyles$p
     }, styles2);
     let totalWidth = 0;
     const content2 = stack.map((d2, index2) => {
@@ -222,62 +222,153 @@
       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 = hooks.useCallback((updater) => {
+        const listener = {
+          updater,
+          selectorFn
+        };
+        listeners.add(listener);
+        return () => {
+          listeners.delete(listener);
+        };
+      }, []);
+      const syncedStore = compat.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 = hooks.useId();
-    return jsxRuntime.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();
+    hooks.useEffect(() => {
+      setGradients((current) => {
+        current[gradientId] = {
+          id: gradientId,
+          ...props
+        };
+        return current;
+      });
+    }, [gradientId, props]);
+    hooks.useEffect(() => {
+      let container2 = document.getElementById("gv-gradient-defs");
+      if (!container2) {
+        container2 = document.createElement("div");
+        container2.id = "gv-gradient-defs";
+        document.body.prepend(container2);
+      }
+      preact.render(jsxRuntime.jsx(GradientDefs, {
+        gradients: Object.values(gradients)
+      }), container2);
+    }, [gradients]);
+    return jsxRuntime.jsx("svg", {
       class: styles2.svg,
       width: "24",
       height: "11",
       viewBox: "0 0 24 11",
       xmlns: "http://www.w3.org/2000/svg",
-      children: [jsxRuntime.jsx("path", {
+      children: jsxRuntime.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})`
-      }), jsxRuntime.jsx("defs", {
-        children: jsxRuntime.jsxs("linearGradient", {
-          id: gradientId,
-          x1: "5.5",
-          y1: "5.5",
-          x2: "12",
-          y2: "5.5",
-          gradientUnits: "userSpaceOnUse",
-          children: [jsxRuntime.jsx("stop", {
-            class: `${styles2.previous} stop-color--${previous2}`
-          }), jsxRuntime.jsx("stop", {
-            class: `${styles2.next} stop-color--${next2}`,
-            offset: "1"
-          })]
-        })
-      })]
+      })
     });
   };
+  function GradientDefs({
+    gradients
+  }) {
+    return jsxRuntime.jsx("svg", {
+      width: "24",
+      height: "11",
+      viewBox: "0 0 24 11",
+      children: jsxRuntime.jsx("defs", {
+        children: gradients.map(({
+          id,
+          previous: previous2,
+          next: next2,
+          styles: styles2
+        }) => {
+          return jsxRuntime.jsxs("linearGradient", {
+            id,
+            x1: "5.5",
+            y1: "5.5",
+            x2: "12",
+            y2: "5.5",
+            gradientUnits: "userSpaceOnUse",
+            children: [jsxRuntime.jsx("stop", {
+              class: `${styles2 == null ? void 0 : styles2.previous} stop-color--${previous2}`
+            }), jsxRuntime.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 jsxRuntime.jsx("button", {
       class: styles2.button,
@@ -292,28 +383,32 @@
       })
     });
   };
-  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 jsxRuntime.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: jsxRuntime.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"
@@ -321,7 +416,7 @@
     });
   };
   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 : {};
@@ -671,7 +766,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$k
+      ...defaultStyles$l
     }, styles2);
     let timeSince = dayjs(timeStamp).fromNow();
     return jsxRuntime.jsx("span", {
@@ -681,7 +776,7 @@
   };
   const pageContainer = "_pageContainer_1s0yq_9";
   const sideBorders = "_sideBorders_1s0yq_42";
-  const defaultStyles$j = {
+  const defaultStyles$k = {
     pageContainer,
     sideBorders
   };
@@ -693,14 +788,14 @@
     const {
       pageContainer: pageContainer2,
       sideBorders: sideBordersStyle
-    } = mergeStyles(defaultStyles$j, styles2);
+    } = mergeStyles(defaultStyles$k, styles2);
     return jsxRuntime.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({
@@ -718,7 +813,7 @@
     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 jsxRuntime.jsx("div", {
       className: styles2.wrapper,
@@ -733,7 +828,7 @@
   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,
@@ -746,7 +841,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$h
+      ...defaultStyles$i
     }, styles2);
     let cornerSize = squareSize * 0.625;
     let cornerMargin = squareSize < 100 ? squareSize / 6 : 10;
@@ -784,7 +879,7 @@
   const stackedGridRotateItems90 = "_stackedGridRotateItems90_1e05o_19";
   const stackedGridRotateItems180 = "_stackedGridRotateItems180_1e05o_25";
   const stackedGridRotateItems270 = "_stackedGridRotateItems270_1e05o_31";
-  const defaultStyles$g = {
+  const defaultStyles$h = {
     stackedGridContainer,
     stackedGridRotateItems0,
     stackedGridRotateItems90,
@@ -823,7 +918,7 @@
       width: containerWidth,
       transform: containerFlip
     };
-    styles2 = mergeStyles(defaultStyles$g, styles2);
+    styles2 = mergeStyles(defaultStyles$h, styles2);
     return jsxRuntime.jsx("div", {
       style: flexStyles,
       className: `${styles2.stackedGridContainer} ${styles2[itemRotateClass]}`,
@@ -832,7 +927,7 @@
   };
   const svg$4 = "_svg_l2fsl_9";
   const squareFill = "_squareFill_l2fsl_16";
-  const defaultStyles$f = {
+  const defaultStyles$g = {
     svg: svg$4,
     squareFill
   };
@@ -842,7 +937,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$f
+      ...defaultStyles$g
     }, styles2);
     return jsxRuntime.jsx("svg", {
       width: size,
@@ -860,7 +955,7 @@
   };
   const button$3 = "_button_1fees_1";
   const icon = "_icon_1fees_6";
-  const defaultStyles$e = {
+  const defaultStyles$f = {
     button: button$3,
     icon
   };
@@ -870,7 +965,7 @@
     styles: styles2,
     onClick
   }) {
-    styles2 = mergeStyles(defaultStyles$e, styles2);
+    styles2 = mergeStyles(defaultStyles$f, styles2);
     return jsxRuntime.jsx("button", {
       className: styles2.button,
       disabled,
@@ -896,7 +991,7 @@
   }
   const button$2 = "_button_19t7j_1";
   const buttonInner$1 = "_buttonInner_19t7j_6";
-  const defaultStyles$d = {
+  const defaultStyles$e = {
     button: button$2,
     buttonInner: buttonInner$1
   };
@@ -906,7 +1001,7 @@
     styles: styles2,
     children
   }) {
-    styles2 = mergeStyles(defaultStyles$d, styles2);
+    styles2 = mergeStyles(defaultStyles$e, styles2);
     return jsxRuntime.jsx("button", {
       className: styles2.button,
       "data-type": type,
@@ -921,7 +1016,7 @@
   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,
@@ -932,7 +1027,7 @@
     onClick,
     styles: styles2
   }) {
-    styles2 = mergeStyles(defaultStyles$c, styles2);
+    styles2 = mergeStyles(defaultStyles$d, styles2);
     return jsxRuntime.jsx("button", {
       className: [styles2.button, border && styles2.buttonBorder].join(" "),
       onClick,
@@ -1075,7 +1170,7 @@
   const headerCellButton = "_headerCellButton_1b75c_39";
   const bodyRow = "_bodyRow_1b75c_48";
   const bodyCell = "_bodyCell_1b75c_53";
-  const defaultStyles$b = {
+  const defaultStyles$c = {
     table,
     hideHeader,
     hideHeaderNoBorder,
@@ -1116,7 +1211,7 @@
         };
       });
     };
-    styles2 = mergeStyles(defaultStyles$b, styles2);
+    styles2 = mergeStyles(defaultStyles$c, styles2);
     return jsxRuntime.jsxs("table", {
       className: styles2.table,
       children: [jsxRuntime.jsx("thead", {
@@ -1249,7 +1344,7 @@
   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,
@@ -1301,7 +1396,7 @@
       return positionLabels(labels);
     }, [lines, y2Label2, yScale]);
     styles2 = mergeStyles({
-      ...defaultStyles$a
+      ...defaultStyles$b
     }, styles2);
     const chart = jsxRuntime.jsx("svg", {
       class: styles2.svg,
@@ -1390,9 +1485,9 @@
       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,
@@ -1524,7 +1619,7 @@
     });
   }
   const tooltip = "_tooltip_11t5d_1";
-  const defaultStyles$9 = {
+  const defaultStyles$a = {
     tooltip
   };
   const TooltipType = {
@@ -1552,7 +1647,7 @@
       hoverActive
     } = useTooltipTarget(targetElement, trackPosition);
     const tooltipRef = hooks.useRef(null);
-    styles2 = mergeStyles(defaultStyles$9, styles2);
+    styles2 = mergeStyles(defaultStyles$a, styles2);
     hooks.useEffect(() => {
       let element = null;
       if (typeof refOrSelector === "string") {
@@ -1647,7 +1742,7 @@
   }
   const text$2 = "_text_1b8t2_1";
   const container$3 = "_container_1b8t2_10";
-  const defaultStyles$8 = {
+  const defaultStyles$9 = {
     text: text$2,
     container: container$3
   };
@@ -1658,7 +1753,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$8
+      ...defaultStyles$9
     }, styles2);
     let hasChanged = next2 !== previous2;
     return jsxRuntime.jsx("div", {
@@ -1672,9 +1767,8 @@
             next: styles2.next
           }
         }) : jsxRuntime.jsx(CircleIcon, {
-          abbreviation: next2,
           styles: {
-            rect: styles2.next
+            circle: styles2.next || `fill-color--${next2}`
           }
         }), jsxRuntime.jsx("strong", {
           className: styles2.text,
@@ -1683,16 +1777,20 @@
       })
     });
   };
-  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,
@@ -1703,6 +1801,7 @@
   };
   const ToplineResult = ({
     name: name2,
+    secondaryName,
     mainNumber: mainNumber2,
     secondaryNumber: secondaryNumber2,
     styles: styles2,
@@ -1713,40 +1812,74 @@
     showInfoButton = false
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$7
+      ...defaultStyles$8
     }, styles2);
     const displayStyle = displayRow2 ? styles2.displayRow : styles2.displayColumn;
-    return jsxRuntime.jsxs("div", {
-      class: styles2.toplineResult,
-      onMouseOver,
-      children: [jsxRuntime.jsxs("div", {
-        class: styles2.topRow,
-        children: [jsxRuntime.jsx("span", {
-          class: `${styles2.name} before-color--${abbreviation}`,
-          children: name2
-        }), " ", showInfoButton && jsxRuntime.jsx("span", {
-          class: styles2.infoButton,
-          children: jsxRuntime.jsx(InfoButton, {
-            onClick: onInfoPress
-          })
-        })]
-      }), jsxRuntime.jsxs("div", {
-        class: `${styles2.displayNumbers} ${displayStyle}`,
-        children: [jsxRuntime.jsx("div", {
-          class: styles2.mainNumber,
-          children: mainNumber2
-        }), jsxRuntime.jsx("div", {
-          class: styles2.secondaryNumber,
-          children: secondaryNumber2
+    return !secondaryName ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: ["    ", jsxRuntime.jsxs("div", {
+        class: styles2.toplineResult,
+        onMouseOver,
+        children: [jsxRuntime.jsxs("div", {
+          class: styles2.topRow,
+          children: [jsxRuntime.jsx("span", {
+            class: `${styles2.name} before-color--${abbreviation}`,
+            children: name2
+          }), " ", showInfoButton && jsxRuntime.jsx("span", {
+            class: styles2.infoButton,
+            children: jsxRuntime.jsx(InfoButton, {
+              onClick: onInfoPress
+            })
+          })]
+        }), jsxRuntime.jsxs("div", {
+          class: `${styles2.displayNumbers} ${displayStyle}`,
+          children: [jsxRuntime.jsx("div", {
+            class: styles2.mainNumber,
+            children: mainNumber2
+          }), jsxRuntime.jsx("div", {
+            class: styles2.secondaryNumber,
+            children: secondaryNumber2
+          })]
         })]
       })]
+    }) : jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: jsxRuntime.jsxs("div", {
+        class: styles2.toplineResult,
+        onMouseOver,
+        children: [jsxRuntime.jsxs("div", {
+          class: styles2.topRow,
+          children: [jsxRuntime.jsx("span", {
+            class: `${styles2.primaryname} before-color--${abbreviation}`,
+            children: name2
+          }), " ", showInfoButton && jsxRuntime.jsx("span", {
+            class: styles2.infoButton,
+            children: jsxRuntime.jsx(InfoButton, {
+              onClick: onInfoPress
+            })
+          })]
+        }), jsxRuntime.jsxs("div", {
+          class: styles2.subhead,
+          children: [jsxRuntime.jsx("span", {
+            class: styles2.secondaryname,
+            children: secondaryName
+          }), " "]
+        }), jsxRuntime.jsxs("div", {
+          class: `${styles2.displayNumbers} ${displayStyle}`,
+          children: [jsxRuntime.jsx("div", {
+            class: styles2.mainNumber,
+            children: mainNumber2
+          }), jsxRuntime.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,
@@ -1755,14 +1888,18 @@
   const PageSection = compat.forwardRef(({
     children,
     styles: styles2,
-    borderTop: borderTop2 = false
+    borderTop: borderTop2 = false,
+    backgroundColor = "transparent"
   }, ref) => {
     styles2 = mergeStyles({
-      ...defaultStyles$6
+      ...defaultStyles$7
     }, styles2);
     return jsxRuntime.jsxs("section", {
       ref,
       className: [styles2.section, borderTop2 && styles2.borderTop].join(" "),
+      style: {
+        "--background-color": backgroundColor
+      },
       children: [jsxRuntime.jsx("div", {
         className: styles2.header,
         children: children.header
@@ -1775,7 +1912,7 @@
   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
@@ -1790,17 +1927,16 @@
     columnPadding,
     styles: styles2
   }) => {
-    styles2 = mergeStyles(defaultStyles$5, styles2);
+    styles2 = mergeStyles(defaultStyles$6, styles2);
     const yScale = d3Scale.scaleLinear([maxValue, minValue], [0, chartHeight]);
+    const totalColumnWidth = Number(columnWidth) + Number(columnPadding.left) + Number(columnPadding.right);
     return jsxRuntime.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 jsxRuntime.jsxs("g", {
           children: [jsxRuntime.jsx("rect", {
             x: index2 * totalColumnWidth,
@@ -1810,7 +1946,7 @@
             fill: column.color,
             className: `${styles2.bar} fill-color--${column.id}`,
             id: column.id
-          }, index2), jsxRuntime.jsx("text", {
+          }), jsxRuntime.jsx("text", {
             className: styles2.text,
             x: index2 * totalColumnWidth + 2,
             y: column.value < 0 ? yScale(0) - 6 : yScale(0) + 20,
@@ -1834,7 +1970,7 @@
   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,
@@ -1853,7 +1989,7 @@
     abbreviation
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$4
+      ...defaultStyles$5
     }, styles2);
     return jsxRuntime.jsx("div", {
       class: styles2.container,
@@ -2162,7 +2298,7 @@
     });
   }
   const path$1 = "_path_1cwd5_9";
-  const defaultStyles$3 = {
+  const defaultStyles$4 = {
     path: path$1
   };
   function CompositionBorders({
@@ -2171,7 +2307,7 @@
     const {
       projection
     } = hooks.useContext(MapContext);
-    styles2 = mergeStyles(defaultStyles$3, styles2);
+    styles2 = mergeStyles(defaultStyles$4, styles2);
     return jsxRuntime.jsx("path", {
       className: styles2.path,
       d: projection.getCompositionBorders()
@@ -2470,7 +2606,7 @@
   });
   const container = "_container_azu4a_1";
   const paragraph = "_paragraph_azu4a_12";
-  const defaultStyles$2 = {
+  const defaultStyles$3 = {
     container,
     paragraph
   };
@@ -2483,7 +2619,7 @@
     styles: styles2
   }) {
     styles2 = mergeStyles({
-      ...defaultStyles$2
+      ...defaultStyles$3
     }, styles2);
     return jsxRuntime.jsxs("div", {
       class: styles2.container,
@@ -2526,7 +2662,7 @@
   const suggestion = "_suggestion_g5w44_36";
   const selected = "_selected_g5w44_59";
   const highlighted = "_highlighted_g5w44_63";
-  const defaultStyles$1 = {
+  const defaultStyles$2 = {
     searchContainer,
     input,
     searchIcon,
@@ -2547,7 +2683,7 @@
     styles: styles2
   }) {
     var _a, _b, _c;
-    styles2 = mergeStyles(defaultStyles$1, styles2);
+    styles2 = mergeStyles(defaultStyles$2, styles2);
     const inputRef = hooks.useRef(null);
     const [selectedIndex, setSelectedIndex] = hooks.useState(-1);
     const [suggestions2, setSuggestions] = hooks.useState();
@@ -2656,6 +2792,32 @@
       })
     });
   }
+  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 jsxRuntime.jsxs("div", {
+      className: styles2.refreshIndicator,
+      children: [jsxRuntime.jsx(CircleIcon, {
+        pulse: true
+      }), jsxRuntime.jsx("span", {
+        className: styles2.liveText,
+        children: "LIVE"
+      }), jsxRuntime.jsx("span", {
+        className: styles2.refreshText,
+        children: text2
+      })]
+    });
+  }
   const coalitionsWrapper = "_coalitionsWrapper_1ahqy_9";
   const coalitionsContainer = "_coalitionsContainer_1ahqy_14";
   const coalition = "_coalition_1ahqy_9";
@@ -2958,6 +3120,7 @@
   exports2.PageSection = PageSection;
   exports2.PartyProfile = PartyProfile;
   exports2.Projection = Projection;
+  exports2.RefreshIndicator = RefreshIndicator;
   exports2.RelativeTimeSentence = RelativeTimeSentence;
   exports2.ResultSummary = ResultSummary;
   exports2.SearchInput = SearchInput;