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

package/dist/interactive-component-library.js

@@ -1,15 +1,17 @@
 import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
-import { useRef, useCallback, useEffect, useMemo, useState, useLayoutEffect, useContext, useImperativeHandle } from "preact/hooks";
+import { useRef, useMemo, useCallback, useEffect, useState, useLayoutEffect, 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, geoContains, geoMercator } from "d3-geo";
 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,
@@ -48,19 +50,20 @@ function Chevron({
   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 jsx("svg", {
     width: "16",
     height: "24",
     viewBox: "0 0 16 24",
+    className: styles2.svg,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: jsx("g", {
@@ -75,12 +78,12 @@ function Chevron({
     })
   });
 }
-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
@@ -96,10 +99,10 @@ const LegendItem = ({
   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 jsxs("div", {
@@ -112,19 +115,60 @@ const LegendItem = ({
     })]
   });
 };
-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
@@ -132,11 +176,32 @@ function StackedBar({
   const rectElements = useRef([]);
   const textElements = useRef([]);
   styles2 = mergeStyles({
-    ...defaultStyles$q
+    ...defaultStyles$r
   }, styles2);
+  const svgHeight = labelType === LabelType.hanging ? height + 20 : height;
+  const renderLabel = (config, i) => 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 = jsxs("g", {
       transform: `translate(${totalWidth}, 0)`,
       children: [jsx("rect", {
@@ -148,23 +213,28 @@ function StackedBar({
           fill: d2.fill
         },
         "shape-rendering": "crispEdges"
-      }), !hideLabels && 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 = 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 = jsx("g", {
     children: jsx("rect", {
       x: "0",
@@ -178,14 +248,16 @@ function StackedBar({
     return 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, jsxs("g", {
+        children: [content2, labelType === LabelType.hanging && !hideLabels && hangingLabelConfig.map((config, i) => renderLabel(config, i))]
+      })]
     });
   }
-  return jsx(Fragment, {
-    children: content2
+  return jsxs("g", {
+    children: [content2, labelType === LabelType.hanging && !hideLabels && hangingLabelConfig.map((config, i) => renderLabel(config, i))]
   });
 }
 function shouldUpdate(oldState, newState) {
@@ -245,7 +317,7 @@ const [useGradients, setGradients, getGradients] = createStore({});
 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
@@ -256,7 +328,7 @@ const GradientIcon = (props) => {
     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();
   useEffect(() => {
@@ -323,9 +395,9 @@ function GradientDefs({
     })
   });
 }
-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
 };
@@ -334,7 +406,7 @@ const InfoButton = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$o
+    ...defaultStyles$p
   }, styles2);
   return jsx("button", {
     class: styles2.button,
@@ -352,7 +424,7 @@ const InfoButton = ({
 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
@@ -362,7 +434,7 @@ const CircleIcon = ({
   pulse: pulse2 = false,
   styles: styles2
 }) => {
-  styles2 = mergeStyles(defaultStyles$n, styles2);
+  styles2 = mergeStyles(defaultStyles$o, styles2);
   return jsx("svg", {
     style: styles2.svg,
     fill: "none",
@@ -382,7 +454,7 @@ const CircleIcon = ({
   });
 };
 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 : {};
@@ -732,7 +804,7 @@ const RelativeTimeSentence = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$m
+    ...defaultStyles$n
   }, styles2);
   let timeSince = dayjs(timeStamp).fromNow();
   return jsx("span", {
@@ -742,7 +814,7 @@ const RelativeTimeSentence = ({
 };
 const pageContainer = "_pageContainer_1s0yq_9";
 const sideBorders = "_sideBorders_1s0yq_42";
-const defaultStyles$l = {
+const defaultStyles$m = {
   pageContainer,
   sideBorders
 };
@@ -754,15 +826,19 @@ function Container({
   const {
     pageContainer: pageContainer2,
     sideBorders: sideBordersStyle
-  } = mergeStyles(defaultStyles$l, styles2);
+  } = mergeStyles(defaultStyles$m, styles2);
   return 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,
@@ -778,23 +854,27 @@ function ChangeBar({
   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 jsx("div", {
+  return jsxs("div", {
     className: styles2.wrapper,
     style: `width: ${width}px`,
-    children: jsx("div", {
+    children: [jsx("div", {
       className: styles2.bar.concat(thisColor),
       style: thisStyles
-    })
+    }), 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,
@@ -807,7 +887,7 @@ const SquareCutCornerIcon = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$j
+    ...defaultStyles$k
   }, styles2);
   let cornerSize = squareSize * 0.625;
   let cornerMargin = squareSize < 100 ? squareSize / 6 : 10;
@@ -840,12 +920,12 @@ const SquareCutCornerIcon = ({
     })
   });
 };
-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,
@@ -871,29 +951,23 @@ const getContainerFlip = (fromBottom, fromLeft) => {
 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 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
 };
@@ -903,7 +977,7 @@ const SquareIcon = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$h
+    ...defaultStyles$i
   }, styles2);
   return jsx("svg", {
     width: size,
@@ -921,7 +995,7 @@ const SquareIcon = ({
 };
 const button$3 = "_button_1fees_1";
 const icon = "_icon_1fees_6";
-const defaultStyles$g = {
+const defaultStyles$h = {
   button: button$3,
   icon
 };
@@ -931,7 +1005,7 @@ function ArrowButton({
   styles: styles2,
   onClick
 }) {
-  styles2 = mergeStyles(defaultStyles$g, styles2);
+  styles2 = mergeStyles(defaultStyles$h, styles2);
   return jsx("button", {
     className: styles2.button,
     disabled,
@@ -955,9 +1029,9 @@ function ArrowButton({
     })
   });
 }
-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
 };
@@ -967,7 +1041,7 @@ function Button({
   styles: styles2,
   children
 }) {
-  styles2 = mergeStyles(defaultStyles$f, styles2);
+  styles2 = mergeStyles(defaultStyles$g, styles2);
   return jsx("button", {
     className: styles2.button,
     "data-type": type,
@@ -978,11 +1052,11 @@ function Button({
     })
   });
 }
-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,
@@ -993,7 +1067,7 @@ function CloseButton({
   onClick,
   styles: styles2
 }) {
-  styles2 = mergeStyles(defaultStyles$e, styles2);
+  styles2 = mergeStyles(defaultStyles$f, styles2);
   return jsx("button", {
     className: [styles2.button, border && styles2.buttonBorder].join(" "),
     onClick,
@@ -1011,6 +1085,39 @@ function CloseButton({
     })
   });
 }
+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 jsx("div", {
+    className: ["ad-slot-container", styles2.container].join(" "),
+    children: 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];
@@ -1129,13 +1236,13 @@ class CellModel {
     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,
@@ -1180,6 +1287,8 @@ function Table({
   styles2 = mergeStyles(defaultStyles$d, styles2);
   return jsxs("table", {
     className: styles2.table,
+    cellSpacing: 0,
+    cellPadding: 0,
     children: [jsx("thead", {
       className: hideHeader2 && styles2.hideHeader,
       children: jsx("tr", {
@@ -1237,42 +1346,6 @@ function HeaderCell({
     })]
   });
 }
-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] = useState(() => {
     if (typeof window === "undefined")
@@ -1745,16 +1818,17 @@ const ControlChange = ({
     })
   });
 };
-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,
@@ -1762,6 +1836,7 @@ const defaultStyles$9 = {
   name,
   displayNumbers,
   mainNumber,
+  mainNumberSuffix,
   secondaryNumber,
   displayRow,
   displayColumn,
@@ -1771,6 +1846,7 @@ const ToplineResult = ({
   name: name2,
   secondaryName,
   mainNumber: mainNumber2,
+  mainNumberSuffix: mainNumberSuffix2,
   secondaryNumber: secondaryNumber2,
   styles: styles2,
   displayRow: displayRow2 = false,
@@ -1783,64 +1859,66 @@ const ToplineResult = ({
     ...defaultStyles$9
   }, styles2);
   const displayStyle = displayRow2 ? styles2.displayRow : styles2.displayColumn;
-  return !secondaryName ? jsxs(Fragment, {
-    children: ["    ", jsxs("div", {
-      class: styles2.toplineResult,
-      onMouseOver,
+  return !secondaryName ? 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: [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
+        class: styles2.mainNumber,
+        children: [mainNumber2, mainNumberSuffix2 && jsx("span", {
+          className: styles2.mainNumberSuffix,
+          children: mainNumberSuffix2
         })]
+      }), jsx("div", {
+        class: styles2.secondaryNumber,
+        children: secondaryNumber2
       })]
     })]
-  }) : jsx(Fragment, {
-    children: jsxs("div", {
-      class: styles2.toplineResult,
-      onMouseOver,
+  }) : 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: [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
+        class: styles2.mainNumber,
+        children: [mainNumber2, mainNumberSuffix2 && jsx("span", {
+          className: styles2.mainNumberSuffix,
+          children: mainNumberSuffix2
         })]
+      }), jsx("div", {
+        class: styles2.secondaryNumber,
+        children: secondaryNumber2
       })]
-    })
+    })]
   });
 };
 const section = "_section_12aiu_9";
@@ -2714,14 +2792,14 @@ function SearchIcon() {
     })
   });
 }
-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,
@@ -3122,15 +3200,15 @@ function Gradient() {
     })]
   });
 }
-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,
@@ -3221,7 +3299,7 @@ function Ticker({
       }), jsx("div", {
         className: styles.button,
         children: jsx(Button, {
-          type: "small",
+          type: "regular",
           styles: {
             buttonInner: styles.buttonInner
           },
@@ -3233,6 +3311,7 @@ function Ticker({
   });
 }
 export {
+  AdSlot,
   ArrowButton,
   Button,
   ChangeBar,
@@ -3246,6 +3325,7 @@ export {
   GradientIcon,
   GridType,
   InfoButton,
+  LabelType,
   LegendItem,
   Map$1 as Map,
   MapConfiguration,