@guardian/interactive-component-library 0.1.0-alpha.18 → 0.1.0-alpha.19

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

@@ -3,11 +3,13 @@
 })(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$s = {
+  const svg$9 = "_svg_b5io0_1";
+  const group = "_group_b5io0_5";
+  const rotated = "_rotated_b5io0_10";
+  const path$4 = "_path_b5io0_14";
+  const active = "_active_b5io0_18";
+  const defaultStyles$t = {
+    svg: svg$9,
     group,
     rotated,
     path: path$4,
@@ -46,19 +48,20 @@
     styles: styles2
   }) {
     const defaultStylesCopy = {
-      ...defaultStyles$s
+      ...defaultStyles$t
     };
     if (active2) {
-      defaultStylesCopy.path = mergeStyles(defaultStyles$s.path, defaultStyles$s.active);
+      defaultStylesCopy.path = mergeStyles(defaultStyles$t.path, defaultStyles$t.active);
     }
     if (direction === DIRECTION.up) {
-      defaultStylesCopy.group = mergeStyles(defaultStyles$s.group, defaultStyles$s.rotated);
+      defaultStylesCopy.group = mergeStyles(defaultStyles$t.group, defaultStyles$t.rotated);
     }
     styles2 = mergeStyles(defaultStylesCopy, styles2);
     return jsxRuntime.jsx("svg", {
       width: "16",
       height: "24",
       viewBox: "0 0 16 24",
+      className: styles2.svg,
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: jsxRuntime.jsx("g", {
@@ -73,12 +76,12 @@
       })
     });
   }
-  const container$4 = "_container_jzalm_1";
+  const container$5 = "_container_jzalm_1";
   const dot = "_dot_jzalm_6";
   const circle$2 = "_circle_jzalm_13";
   const text$4 = "_text_jzalm_17";
-  const defaultStyles$r = {
-    container: container$4,
+  const defaultStyles$s = {
+    container: container$5,
     dot,
     circle: circle$2,
     text: text$4
@@ -94,10 +97,10 @@
     abbreviation
   }) => {
     const defaultStylesCopy = {
-      ...defaultStyles$r
+      ...defaultStyles$s
     };
     if (dotType === DOT_TYPE.round) {
-      defaultStylesCopy.dot = mergeStyles(defaultStyles$r.dot, defaultStyles$r.circle);
+      defaultStylesCopy.dot = mergeStyles(defaultStyles$s.dot, defaultStyles$s.circle);
     }
     styles2 = mergeStyles(defaultStylesCopy, styles2);
     return jsxRuntime.jsxs("div", {
@@ -110,19 +113,60 @@
       })]
     });
   };
-  const bar$2 = "_bar_wmb0k_1";
-  const label$1 = "_label_wmb0k_5";
-  const backgroundRect = "_backgroundRect_wmb0k_11";
-  const defaultStyles$q = {
+  const bar$2 = "_bar_bf839_1";
+  const label$1 = "_label_bf839_5";
+  const backgroundRect = "_backgroundRect_bf839_11";
+  const defaultStyles$r = {
     bar: bar$2,
     label: label$1,
     backgroundRect
   };
+  function preventOverlap(labelPositions, iteration = 0, labelSize = 12, coordinate = "y") {
+    const maxIterations = 10;
+    let totalOverlap = 0;
+    for (let index2 = 1; index2 < labelPositions.length; index2++) {
+      const previousElement = labelPositions[index2 - 1];
+      const element = labelPositions[index2];
+      const overlap = previousElement[coordinate] - (element[coordinate] - labelSize);
+      if (overlap < 0) {
+        continue;
+      }
+      previousElement[coordinate] -= overlap / 2;
+      element[coordinate] += overlap / 2;
+      totalOverlap += overlap;
+    }
+    if (totalOverlap > 0 && iteration < maxIterations) {
+      return preventOverlap(labelPositions, iteration + 1);
+    }
+    return labelPositions;
+  }
+  function uniqueBy(array, key) {
+    return [...array.reduce((map, d2) => map.set(d2[key], d2), /* @__PURE__ */ new Map()).values()];
+  }
+  function positionLabels(labels, coordinate = "y") {
+    labels = uniqueBy(labels, "value");
+    labels.sort((a, b) => a[coordinate] - b[coordinate]);
+    return preventOverlap(labels);
+  }
+  function scaleLinear(domain, range) {
+    const [domainMin, domainMax] = domain;
+    const [rangeMin, rangeMax] = range;
+    const slope = (rangeMax - rangeMin) / (domainMax - domainMin);
+    const intercept = rangeMin - slope * domainMin;
+    return function(x) {
+      return slope * x + intercept;
+    };
+  }
+  const LabelType = {
+    hanging: "hanging",
+    inline: "inline"
+  };
   function StackedBar({
     stack,
     width,
     height,
-    hideLabels = true,
+    hideLabels = false,
+    labelType = LabelType.hanging,
     showBackgroundRect = false,
     createSVG = true,
     styles: styles2
@@ -130,11 +174,32 @@
     const rectElements = hooks.useRef([]);
     const textElements = hooks.useRef([]);
     styles2 = mergeStyles({
-      ...defaultStyles$q
+      ...defaultStyles$r
     }, styles2);
+    const svgHeight = labelType === LabelType.hanging ? height + 20 : height;
+    const renderLabel = (config, i) => jsxRuntime.jsx("text", {
+      ref: (element) => textElements.current[i] = element,
+      "text-rendering": "optimizeLegibility",
+      className: styles2.label,
+      style: {
+        display: "visible"
+      },
+      x: config.x,
+      y: config.y,
+      textAnchor: config.textAnchor,
+      alignmentBaseline: config.alignmentBaseline,
+      children: config.value
+    }, `label-${i}`);
     let totalWidth = 0;
     const content2 = stack.map((d2, index2) => {
       const itemWidth = d2.fraction * width;
+      const labelConfig = {
+        value: d2.label,
+        x: itemWidth - 4,
+        y: height / 2,
+        textAnchor: "end",
+        alignmentBaseline: "central"
+      };
       const value = jsxRuntime.jsxs("g", {
         transform: `translate(${totalWidth}, 0)`,
         children: [jsxRuntime.jsx("rect", {
@@ -146,23 +211,28 @@
             fill: d2.fill
           },
           "shape-rendering": "crispEdges"
-        }), !hideLabels && jsxRuntime.jsx("text", {
-          ref: (element) => textElements.current[index2] = element,
-          x: itemWidth - 4,
-          y: height / 2,
-          "text-anchor": "end",
-          "alignment-baseline": "central",
-          "text-rendering": "optimizeLegibility",
-          className: styles2.label,
-          style: {
-            display: hideLabels ? "hidden" : "visible"
-          },
-          children: d2.label
-        })]
+        }), labelType === LabelType.inline && !hideLabels && renderLabel(labelConfig, index2)]
       }, index2);
       totalWidth += itemWidth;
       return value;
     });
+    const hangingLabelConfig = hooks.useMemo(() => {
+      let totalW = 0;
+      let labels = stack.map((d2) => {
+        const itemWidth = d2.fraction * width;
+        const labelConfig = {
+          x: itemWidth + totalW,
+          y: height + 4,
+          value: d2.label,
+          textAnchor: "end",
+          alignmentBaseline: "hanging"
+        };
+        console.log(labelConfig);
+        totalW += itemWidth;
+        return labelConfig;
+      });
+      return preventOverlap(labels, 0, 20, "x");
+    }, [stack, height, width]);
     const backgroundRect2 = jsxRuntime.jsx("g", {
       children: jsxRuntime.jsx("rect", {
         x: "0",
@@ -176,14 +246,16 @@
       return jsxRuntime.jsxs("svg", {
         overflow: "hidden",
         width,
-        height,
-        viewBox: `0 0 ${width} ${height}`,
+        height: svgHeight,
+        viewBox: `0 0 ${width} ${svgHeight}`,
         xmlns: "http://www.w3.org/2000/svg",
-        children: [showBackgroundRect && backgroundRect2, content2]
+        children: [showBackgroundRect && backgroundRect2, jsxRuntime.jsxs("g", {
+          children: [content2, labelType === LabelType.hanging && !hideLabels && hangingLabelConfig.map((config, i) => renderLabel(config, i))]
+        })]
       });
     }
-    return jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: content2
+    return jsxRuntime.jsxs("g", {
+      children: [content2, labelType === LabelType.hanging && !hideLabels && hangingLabelConfig.map((config, i) => renderLabel(config, i))]
     });
   }
   function shouldUpdate(oldState, newState) {
@@ -243,7 +315,7 @@
   const svg$8 = "_svg_1cajk_6";
   const previous = "_previous_1cajk_12";
   const next = "_next_1cajk_16";
-  const defaultStyles$p = {
+  const defaultStyles$q = {
     svg: svg$8,
     previous,
     next
@@ -254,7 +326,7 @@
       next: next2,
       styles: styles2
     } = props;
-    styles2 = mergeStyles(defaultStyles$p, styles2);
+    styles2 = mergeStyles(defaultStyles$q, styles2);
     const gradientId = `gv-gradient-def-${previous2}-${next2}`;
     const gradients = useGradients();
     hooks.useEffect(() => {
@@ -321,9 +393,9 @@
       })
     });
   }
-  const button$4 = "_button_kpmyt_1";
-  const svg$7 = "_svg_kpmyt_14";
-  const defaultStyles$o = {
+  const button$4 = "_button_oqopj_1";
+  const svg$7 = "_svg_oqopj_15";
+  const defaultStyles$p = {
     button: button$4,
     svg: svg$7
   };
@@ -332,7 +404,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$o
+      ...defaultStyles$p
     }, styles2);
     return jsxRuntime.jsx("button", {
       class: styles2.button,
@@ -350,7 +422,7 @@
   const svg$6 = "_svg_1v49v_1";
   const circle$1 = "_circle_1v49v_5";
   const pulse = "_pulse_1v49v_9";
-  const defaultStyles$n = {
+  const defaultStyles$o = {
     svg: svg$6,
     circle: circle$1,
     pulse
@@ -360,7 +432,7 @@
     pulse: pulse2 = false,
     styles: styles2
   }) => {
-    styles2 = mergeStyles(defaultStyles$n, styles2);
+    styles2 = mergeStyles(defaultStyles$o, styles2);
     return jsxRuntime.jsx("svg", {
       style: styles2.svg,
       fill: "none",
@@ -380,7 +452,7 @@
     });
   };
   const text$3 = "_text_1okyv_1";
-  const defaultStyles$m = {
+  const defaultStyles$n = {
     text: text$3
   };
   var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -730,7 +802,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$m
+      ...defaultStyles$n
     }, styles2);
     let timeSince = dayjs(timeStamp).fromNow();
     return jsxRuntime.jsx("span", {
@@ -740,7 +812,7 @@
   };
   const pageContainer = "_pageContainer_1s0yq_9";
   const sideBorders = "_sideBorders_1s0yq_42";
-  const defaultStyles$l = {
+  const defaultStyles$m = {
     pageContainer,
     sideBorders
   };
@@ -752,15 +824,19 @@
     const {
       pageContainer: pageContainer2,
       sideBorders: sideBordersStyle
-    } = mergeStyles(defaultStyles$l, styles2);
+    } = mergeStyles(defaultStyles$m, styles2);
     return jsxRuntime.jsx("div", {
       className: [pageContainer2, sideBorders2 && sideBordersStyle].join(" "),
       children
     });
   }
-  const bar$1 = "_bar_17pyf_9";
-  const defaultStyles$k = {
-    bar: bar$1
+  const wrapper = "_wrapper_5oj1x_9";
+  const bar$1 = "_bar_5oj1x_14";
+  const zero = "_zero_5oj1x_19";
+  const defaultStyles$l = {
+    wrapper,
+    bar: bar$1,
+    zero
   };
   function ChangeBar({
     fraction,
@@ -776,23 +852,27 @@
     let posleft = `${centre}px`;
     let thisStyles = ` height: ${height}; width: ${barwidth}px; ${positive ? `left: ${posleft}` : `left: ${negleft}`}`;
     let thisColor = ` bg-color--${party}`;
+    let zeroStyles = ` height: ${height};`;
     styles2 = mergeStyles({
-      ...defaultStyles$k
+      ...defaultStyles$l
     }, styles2);
-    return jsxRuntime.jsx("div", {
+    return jsxRuntime.jsxs("div", {
       className: styles2.wrapper,
       style: `width: ${width}px`,
-      children: jsxRuntime.jsx("div", {
+      children: [jsxRuntime.jsx("div", {
         className: styles2.bar.concat(thisColor),
         style: thisStyles
-      })
+      }), jsxRuntime.jsx("div", {
+        className: styles2.zero,
+        style: zeroStyles
+      })]
     });
   }
   const svg$5 = "_svg_886i1_9";
   const dividingLineColor = "_dividingLineColor_886i1_16";
   const square = "_square_886i1_20";
   const corner = "_corner_886i1_24";
-  const defaultStyles$j = {
+  const defaultStyles$k = {
     svg: svg$5,
     dividingLineColor,
     square,
@@ -805,7 +885,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$j
+      ...defaultStyles$k
     }, styles2);
     let cornerSize = squareSize * 0.625;
     let cornerMargin = squareSize < 100 ? squareSize / 6 : 10;
@@ -838,12 +918,12 @@
       })
     });
   };
-  const stackedGridContainer = "_stackedGridContainer_1e05o_1";
-  const stackedGridRotateItems0 = "_stackedGridRotateItems0_1e05o_13";
-  const stackedGridRotateItems90 = "_stackedGridRotateItems90_1e05o_19";
-  const stackedGridRotateItems180 = "_stackedGridRotateItems180_1e05o_25";
-  const stackedGridRotateItems270 = "_stackedGridRotateItems270_1e05o_31";
-  const defaultStyles$i = {
+  const stackedGridContainer = "_stackedGridContainer_6whof_1";
+  const stackedGridRotateItems0 = "_stackedGridRotateItems0_6whof_11";
+  const stackedGridRotateItems90 = "_stackedGridRotateItems90_6whof_17";
+  const stackedGridRotateItems180 = "_stackedGridRotateItems180_6whof_23";
+  const stackedGridRotateItems270 = "_stackedGridRotateItems270_6whof_29";
+  const defaultStyles$j = {
     stackedGridContainer,
     stackedGridRotateItems0,
     stackedGridRotateItems90,
@@ -869,29 +949,23 @@
   const StackedGrid = ({
     fromLeft,
     fromBottom,
-    containerWidth,
     children,
     styles: styles2
   }) => {
     let containerFlip = getContainerFlip(fromBottom, fromLeft);
     let itemRotateClass = getItemRotate(fromBottom, fromLeft);
-    let flexStyles = {
-      display: "flex",
-      flexDirection: "row",
-      flexWrap: "wrap",
-      width: containerWidth,
-      transform: containerFlip
-    };
-    styles2 = mergeStyles(defaultStyles$i, styles2);
+    styles2 = mergeStyles(defaultStyles$j, styles2);
     return jsxRuntime.jsx("div", {
-      style: flexStyles,
+      style: {
+        transform: containerFlip
+      },
       className: `${styles2.stackedGridContainer} ${styles2[itemRotateClass]}`,
       children
     });
   };
   const svg$4 = "_svg_l2fsl_9";
   const squareFill = "_squareFill_l2fsl_16";
-  const defaultStyles$h = {
+  const defaultStyles$i = {
     svg: svg$4,
     squareFill
   };
@@ -901,7 +975,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$h
+      ...defaultStyles$i
     }, styles2);
     return jsxRuntime.jsx("svg", {
       width: size,
@@ -919,7 +993,7 @@
   };
   const button$3 = "_button_1fees_1";
   const icon = "_icon_1fees_6";
-  const defaultStyles$g = {
+  const defaultStyles$h = {
     button: button$3,
     icon
   };
@@ -929,7 +1003,7 @@
     styles: styles2,
     onClick
   }) {
-    styles2 = mergeStyles(defaultStyles$g, styles2);
+    styles2 = mergeStyles(defaultStyles$h, styles2);
     return jsxRuntime.jsx("button", {
       className: styles2.button,
       disabled,
@@ -953,9 +1027,9 @@
       })
     });
   }
-  const button$2 = "_button_19t7j_1";
-  const buttonInner$1 = "_buttonInner_19t7j_6";
-  const defaultStyles$f = {
+  const button$2 = "_button_3521c_1";
+  const buttonInner$1 = "_buttonInner_3521c_6";
+  const defaultStyles$g = {
     button: button$2,
     buttonInner: buttonInner$1
   };
@@ -965,7 +1039,7 @@
     styles: styles2,
     children
   }) {
-    styles2 = mergeStyles(defaultStyles$f, styles2);
+    styles2 = mergeStyles(defaultStyles$g, styles2);
     return jsxRuntime.jsx("button", {
       className: styles2.button,
       "data-type": type,
@@ -976,11 +1050,11 @@
       })
     });
   }
-  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$e = {
+  const button$1 = "_button_125im_1";
+  const buttonBorder = "_buttonBorder_125im_11";
+  const svg$3 = "_svg_125im_19";
+  const path$3 = "_path_125im_25";
+  const defaultStyles$f = {
     button: button$1,
     buttonBorder,
     svg: svg$3,
@@ -991,7 +1065,7 @@
     onClick,
     styles: styles2
   }) {
-    styles2 = mergeStyles(defaultStyles$e, styles2);
+    styles2 = mergeStyles(defaultStyles$f, styles2);
     return jsxRuntime.jsx("button", {
       className: [styles2.button, border && styles2.buttonBorder].join(" "),
       onClick,
@@ -1009,6 +1083,39 @@
       })
     });
   }
+  const container$4 = "_container_tq3ke_1";
+  const slot = "_slot_tq3ke_5";
+  const defaultStyles$e = {
+    container: container$4,
+    slot
+  };
+  function AdSlot({
+    name: name2,
+    sizeMapping,
+    styles: styles2
+  }) {
+    var _a, _b, _c;
+    const slotId = `dfp-ad--${name2}`;
+    styles2 = mergeStyles(defaultStyles$e, styles2);
+    const mobileSizes = (_a = sizeMapping.mobile) == null ? void 0 : _a.map((size) => size.join(",")).join("|");
+    const tabletSizes = (_b = sizeMapping.tablet) == null ? void 0 : _b.map((size) => size.join(",")).join("|");
+    const desktopSizes = (_c = sizeMapping.desktop) == null ? void 0 : _c.map((size) => size.join(",")).join("|");
+    return jsxRuntime.jsx("div", {
+      className: ["ad-slot-container", styles2.container].join(" "),
+      children: jsxRuntime.jsx("div", {
+        id: slotId,
+        className: ["js-ad-slot", "ad-slot", "interactive-ad-slot", styles2.slot].join(" "),
+        "data-link-name": `ad slot ${name2}`,
+        "data-name": `${name2}`,
+        "data-label-show": "true",
+        "ad-label-text": "Advertisement",
+        "aria-hidden": "true",
+        "data-mobile": mobileSizes,
+        "data-tablet": tabletSizes,
+        "data-desktop": desktopSizes
+      })
+    });
+  }
   const sortAscending = (accessor) => {
     return (a, b) => {
       const valueA = a[accessor];
@@ -1127,13 +1234,13 @@
       return this.row[this.column.accessor].toString();
     }
   }
-  const table = "_table_1b75c_9";
-  const hideHeader = "_hideHeader_1b75c_18";
-  const hideHeaderNoBorder = "_hideHeaderNoBorder_1b75c_27";
-  const headerCell = "_headerCell_1b75c_31";
-  const headerCellButton = "_headerCellButton_1b75c_39";
-  const bodyRow = "_bodyRow_1b75c_48";
-  const bodyCell = "_bodyCell_1b75c_53";
+  const table = "_table_1dg64_9";
+  const hideHeader = "_hideHeader_1dg64_19";
+  const hideHeaderNoBorder = "_hideHeaderNoBorder_1dg64_28";
+  const headerCell = "_headerCell_1dg64_32";
+  const headerCellButton = "_headerCellButton_1dg64_40";
+  const bodyRow = "_bodyRow_1dg64_49";
+  const bodyCell = "_bodyCell_1dg64_54";
   const defaultStyles$d = {
     table,
     hideHeader,
@@ -1178,6 +1285,8 @@
     styles2 = mergeStyles(defaultStyles$d, styles2);
     return jsxRuntime.jsxs("table", {
       className: styles2.table,
+      cellSpacing: 0,
+      cellPadding: 0,
       children: [jsxRuntime.jsx("thead", {
         className: hideHeader2 && styles2.hideHeader,
         children: jsxRuntime.jsx("tr", {
@@ -1235,42 +1344,6 @@
       })]
     });
   }
-  function preventOverlap(labelPositions, iteration = 0, labelHeight = 12) {
-    const maxIterations = 10;
-    let totalOverlap = 0;
-    for (let index2 = 1; index2 < labelPositions.length; index2++) {
-      const previousElement = labelPositions[index2 - 1];
-      const element = labelPositions[index2];
-      const overlap = previousElement.y - (element.y - labelHeight);
-      if (overlap < 0) {
-        continue;
-      }
-      previousElement.y -= overlap / 2;
-      element.y += overlap / 2;
-      totalOverlap += overlap;
-    }
-    if (totalOverlap > 0 && iteration < maxIterations) {
-      return preventOverlap(labelPositions, iteration + 1);
-    }
-    return labelPositions;
-  }
-  function uniqueBy(array, key) {
-    return [...array.reduce((map, d2) => map.set(d2[key], d2), /* @__PURE__ */ new Map()).values()];
-  }
-  function positionLabels(labels) {
-    labels = uniqueBy(labels, "value");
-    labels.sort((a, b) => a.y - b.y);
-    return preventOverlap(labels);
-  }
-  function scaleLinear(domain, range) {
-    const [domainMin, domainMax] = domain;
-    const [rangeMin, rangeMax] = range;
-    const slope = (rangeMax - rangeMin) / (domainMax - domainMin);
-    const intercept = rangeMin - slope * domainMin;
-    return function(x) {
-      return slope * x + intercept;
-    };
-  }
   function useWindowSize() {
     const [windowSize, setWindowSize] = hooks.useState(() => {
       if (typeof window === "undefined")
@@ -1743,16 +1816,17 @@
       })
     });
   };
-  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 toplineResult = "_toplineResult_49z3u_9";
+  const primaryname = "_primaryname_49z3u_14";
+  const secondaryname = "_secondaryname_49z3u_29";
+  const name = "_name_49z3u_36";
+  const displayNumbers = "_displayNumbers_49z3u_50";
+  const mainNumber = "_mainNumber_49z3u_61";
+  const mainNumberSuffix = "_mainNumberSuffix_49z3u_66";
+  const secondaryNumber = "_secondaryNumber_49z3u_69";
+  const displayRow = "_displayRow_49z3u_76";
+  const displayColumn = "_displayColumn_49z3u_82";
+  const topRow = "_topRow_49z3u_86";
   const defaultStyles$9 = {
     toplineResult,
     primaryname,
@@ -1760,6 +1834,7 @@
     name,
     displayNumbers,
     mainNumber,
+    mainNumberSuffix,
     secondaryNumber,
     displayRow,
     displayColumn,
@@ -1769,6 +1844,7 @@
     name: name2,
     secondaryName,
     mainNumber: mainNumber2,
+    mainNumberSuffix: mainNumberSuffix2,
     secondaryNumber: secondaryNumber2,
     styles: styles2,
     displayRow: displayRow2 = false,
@@ -1781,64 +1857,66 @@
       ...defaultStyles$9
     }, styles2);
     const displayStyle = displayRow2 ? styles2.displayRow : styles2.displayColumn;
-    return !secondaryName ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: ["    ", jsxRuntime.jsxs("div", {
-        class: styles2.toplineResult,
-        onMouseOver,
+    return !secondaryName ? 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.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
+          class: styles2.mainNumber,
+          children: [mainNumber2, mainNumberSuffix2 && jsxRuntime.jsx("span", {
+            className: styles2.mainNumberSuffix,
+            children: mainNumberSuffix2
           })]
+        }), jsxRuntime.jsx("div", {
+          class: styles2.secondaryNumber,
+          children: secondaryNumber2
         })]
       })]
-    }) : jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: jsxRuntime.jsxs("div", {
-        class: styles2.toplineResult,
-        onMouseOver,
+    }) : 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.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
+          class: styles2.mainNumber,
+          children: [mainNumber2, mainNumberSuffix2 && jsxRuntime.jsx("span", {
+            className: styles2.mainNumberSuffix,
+            children: mainNumberSuffix2
           })]
+        }), jsxRuntime.jsx("div", {
+          class: styles2.secondaryNumber,
+          children: secondaryNumber2
         })]
-      })
+      })]
     });
   };
   const section = "_section_12aiu_9";
@@ -2712,14 +2790,14 @@
       })
     });
   }
-  const searchContainer = "_searchContainer_g5w44_1";
-  const input = "_input_g5w44_5";
-  const searchIcon = "_searchIcon_g5w44_21";
-  const clearButton = "_clearButton_g5w44_30";
-  const suggestions = "_suggestions_g5w44_36";
-  const suggestion = "_suggestion_g5w44_36";
-  const selected = "_selected_g5w44_59";
-  const highlighted = "_highlighted_g5w44_63";
+  const searchContainer = "_searchContainer_1883t_1";
+  const input = "_input_1883t_5";
+  const searchIcon = "_searchIcon_1883t_23";
+  const clearButton = "_clearButton_1883t_32";
+  const suggestions = "_suggestions_1883t_38";
+  const suggestion = "_suggestion_1883t_38";
+  const selected = "_selected_1883t_61";
+  const highlighted = "_highlighted_1883t_65";
   const defaultStyles$3 = {
     searchContainer,
     input,
@@ -3120,15 +3198,15 @@
       })]
     });
   }
-  const ticker = "_ticker_2eemh_9";
-  const tickerItems = "_tickerItems_2eemh_19";
-  const tickerScroll = "_tickerScroll_2eemh_24";
-  const tickerItem = "_tickerItem_2eemh_19";
-  const controls = "_controls_2eemh_46";
-  const gradient = "_gradient_2eemh_61";
-  const buttons = "_buttons_2eemh_75";
-  const button = "_button_2eemh_75";
-  const buttonInner = "_buttonInner_2eemh_101";
+  const ticker = "_ticker_1as05_9";
+  const tickerItems = "_tickerItems_1as05_21";
+  const tickerScroll = "_tickerScroll_1as05_26";
+  const tickerItem = "_tickerItem_1as05_21";
+  const controls = "_controls_1as05_48";
+  const gradient = "_gradient_1as05_63";
+  const buttons = "_buttons_1as05_75";
+  const button = "_button_1as05_75";
+  const buttonInner = "_buttonInner_1as05_100";
   const styles = {
     ticker,
     tickerItems,
@@ -3219,7 +3297,7 @@
         }), jsxRuntime.jsx("div", {
           className: styles.button,
           children: jsxRuntime.jsx(Button, {
-            type: "small",
+            type: "regular",
             styles: {
               buttonInner: styles.buttonInner
             },
@@ -3230,6 +3308,7 @@
       })]
     });
   }
+  exports2.AdSlot = AdSlot;
   exports2.ArrowButton = ArrowButton;
   exports2.Button = Button;
   exports2.ChangeBar = ChangeBar;
@@ -3243,6 +3322,7 @@
   exports2.GradientIcon = GradientIcon;
   exports2.GridType = GridType;
   exports2.InfoButton = InfoButton;
+  exports2.LabelType = LabelType;
   exports2.LegendItem = LegendItem;
   exports2.Map = Map$1;
   exports2.MapConfiguration = MapConfiguration;