@guardian/interactive-component-library 0.1.0-alpha.20 → 0.1.0-alpha.22

package/dist/interactive-component-library.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
 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 { render, createContext, toChildArray, cloneElement, createElement } from "preact";
+import { useSyncExternalStore, forwardRef, createPortal } from "preact/compat";
 import { scaleLinear as scaleLinear$1 } from "d3-scale";
 import { geoStream, geoAlbers, geoPath, geoContains, geoMercator } from "d3-geo";
 const main = "";
@@ -18,6 +18,8 @@ const defaultStyles$t = {
   active
 };
 function mergeStyles(firstStyle, secondStyle) {
+  if (!firstStyle)
+    return secondStyle;
   if (!secondStyle)
     return firstStyle;
   if (typeof firstStyle === "string") {
@@ -28,14 +30,7 @@ function mergeStyles(firstStyle, secondStyle) {
   }
   const allKeys = /* @__PURE__ */ new Set([...Object.keys(firstStyle), ...Object.keys(secondStyle)]);
   const merged = Array.from(allKeys).reduce((result, key) => {
-    const classNames = [];
-    if (firstStyle && key in firstStyle) {
-      classNames.push(firstStyle[key]);
-    }
-    if (secondStyle && key in secondStyle) {
-      classNames.push(secondStyle[key]);
-    }
-    result[key] = classNames.join(" ");
+    result[key] = mergeStyles(firstStyle[key], secondStyle[key]);
     return result;
   }, {});
   return merged;
@@ -44,9 +39,14 @@ const DIRECTION = {
   up: "up",
   down: "down"
 };
+const SIZE = {
+  small: "small",
+  large: "large"
+};
 function Chevron({
   active: active2 = false,
   direction = DIRECTION.down,
+  size = SIZE.small,
   styles: styles2
 }) {
   const defaultStylesCopy = {
@@ -59,6 +59,15 @@ function Chevron({
     defaultStylesCopy.group = mergeStyles(defaultStyles$t.group, defaultStyles$t.rotated);
   }
   styles2 = mergeStyles(defaultStylesCopy, styles2);
+  return size === SIZE.small ? jsx(SmallChevron, {
+    styles: styles2
+  }) : jsx(LargeChevron, {
+    styles: styles2
+  });
+}
+function SmallChevron({
+  styles: styles2
+}) {
   return jsx("svg", {
     width: "16",
     height: "24",
@@ -78,15 +87,34 @@ function Chevron({
     })
   });
 }
+function LargeChevron({
+  styles: styles2
+}) {
+  return jsx("svg", {
+    width: "15",
+    height: "19",
+    className: styles2.svg,
+    viewBox: "0 0 15 19",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: jsx("g", {
+      className: styles2.group,
+      children: jsx("path", {
+        d: "M0.667809 7.5L6.81507 12.1053L8.18493 12.1053L14.3322 7.5L15 8.09868L7.84247 14.5L7.15753 14.5L-2.61693e-08 8.09868L0.667809 7.5Z",
+        className: styles2.path
+      })
+    })
+  });
+}
 const container$5 = "_container_jzalm_1";
 const dot = "_dot_jzalm_6";
 const circle$2 = "_circle_jzalm_13";
-const text$4 = "_text_jzalm_17";
+const text$3 = "_text_jzalm_17";
 const defaultStyles$s = {
   container: container$5,
   dot,
   circle: circle$2,
-  text: text$4
+  text: text$3
 };
 const DOT_TYPE = {
   round: "round",
@@ -187,7 +215,7 @@ function StackedBar({
     x: config.x,
     y: config.y,
     textAnchor: config.textAnchor,
-    alignmentBaseline: config.alignmentBaseline,
+    dominantBaseline: config.dominantBaseline,
     children: config.value
   }, `label-${i}`);
   let totalWidth = 0;
@@ -198,7 +226,7 @@ function StackedBar({
       x: itemWidth - 4,
       y: height / 2,
       textAnchor: "end",
-      alignmentBaseline: "central"
+      dominantBaseline: "middle"
     };
     const value = jsxs("g", {
       transform: `translate(${totalWidth}, 0)`,
@@ -225,7 +253,7 @@ function StackedBar({
         y: height + 4,
         value: d2.label,
         textAnchor: "end",
-        alignmentBaseline: "hanging"
+        dominantBaseline: "hanging"
       };
       totalW += itemWidth;
       return labelConfig;
@@ -285,7 +313,7 @@ function createStore(initialStore) {
       return () => {
         listeners.delete(listener);
       };
-    }, []);
+    }, [selectorFn]);
     const syncedStore = useSyncExternalStore(subscribe, getStore, getServerStore);
     return selectorFn(syncedStore);
   }
@@ -392,20 +420,21 @@ function GradientDefs({
     })
   });
 }
-const button$4 = "_button_oqopj_1";
+const button$5 = "_button_oqopj_1";
 const svg$7 = "_svg_oqopj_15";
 const defaultStyles$p = {
-  button: button$4,
+  button: button$5,
   svg: svg$7
 };
-const InfoButton = ({
+const InfoButton = forwardRef(({
   onClick,
   styles: styles2
-}) => {
+}, ref) => {
   styles2 = mergeStyles({
     ...defaultStyles$p
   }, styles2);
   return jsx("button", {
+    ref,
     class: styles2.button,
     onClick,
     children: jsx("svg", {
@@ -417,7 +446,7 @@ const InfoButton = ({
       })
     })
   });
-};
+});
 const svg$6 = "_svg_1v49v_1";
 const circle$1 = "_circle_1v49v_5";
 const pulse = "_pulse_1v49v_9";
@@ -450,9 +479,9 @@ const CircleIcon = ({
     })
   });
 };
-const text$3 = "_text_1okyv_1";
+const text$2 = "_text_1okyv_1";
 const defaultStyles$n = {
-  text: text$3
+  text: text$2
 };
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
@@ -990,11 +1019,11 @@ const SquareIcon = ({
     })
   });
 };
-const button$3 = "_button_1fees_1";
-const icon = "_icon_1fees_6";
+const button$4 = "_button_1fees_1";
+const icon$2 = "_icon_1fees_6";
 const defaultStyles$h = {
-  button: button$3,
-  icon
+  button: button$4,
+  icon: icon$2
 };
 function ArrowButton({
   direction = "right",
@@ -1026,10 +1055,10 @@ function ArrowButton({
     })
   });
 }
-const button$2 = "_button_3521c_1";
+const button$3 = "_button_3521c_1";
 const buttonInner$1 = "_buttonInner_3521c_6";
 const defaultStyles$g = {
-  button: button$2,
+  button: button$3,
   buttonInner: buttonInner$1
 };
 function Button({
@@ -1049,12 +1078,12 @@ function Button({
     })
   });
 }
-const button$1 = "_button_125im_1";
+const button$2 = "_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,
+  button: button$2,
   buttonBorder,
   svg: svg$3,
   path: path$3
@@ -1512,161 +1541,27 @@ const SlopeChart = ({
     children: show && chart
   });
 };
-const useTooltipTarget = (targetElement, trackPosition) => {
-  const [targetRect, setTargetRect] = useState();
-  const [position, setPosition] = useState(null);
-  const [hoverActive, setHoverActive] = useState(false);
-  const onMouseMove = ({
-    clientX,
-    clientY,
-    currentTarget
-  }) => {
-    const rect = currentTarget.getBoundingClientRect();
-    const x = clientX - rect.left;
-    const y = clientY - rect.top;
-    requestAnimationFrame(() => {
-      setTargetRect(rect);
-      setPosition({
-        x,
-        y
-      });
-      setHoverActive(true);
-    });
-  };
-  const onMouseOut = () => {
-    requestAnimationFrame(() => {
-      setHoverActive(false);
-    });
-  };
-  useEffect(() => {
-    setTargetRect(targetElement.getBoundingClientRect());
-    if (trackPosition) {
-      targetElement.addEventListener("mousemove", onMouseMove);
-      targetElement.addEventListener("mouseout", onMouseOut);
-    }
-    return () => {
-      if (trackPosition) {
-        targetElement.removeEventListener("mousemove", onMouseMove);
-        targetElement.removeEventListener("mouseout", onMouseOut);
-      }
-    };
-  }, [targetElement, trackPosition]);
-  return {
-    targetRect,
-    positionInTarget: position,
-    hoverActive
-  };
-};
-function n(n2) {
-  return (r) => {
-    n2.forEach((n3) => {
-      "function" == typeof n3 ? n3(r) : null != n3 && (n3.current = r);
-    });
-  };
-}
-var T, c;
-!function(e) {
-  e.APPEAR = "appear", e.APPEAR_ACTIVE = "appearActive", e.APPEAR_DONE = "appearDone", e.ENTER = "enter", e.ENTER_ACTIVE = "enterActive", e.ENTER_DONE = "enterDone", e.EXIT = "exit", e.EXIT_ACTIVE = "exitActive", e.EXIT_DONE = "exitDone";
-}(T || (T = {})), function(e) {
-  e.ENTER = "onEnter", e.ENTERING = "onEntering", e.ENTERED = "onEntered", e.EXIT = "onExit", e.EXITING = "onExiting", e.EXITED = "onExited";
-}(c || (c = {}));
-const s = { [T.APPEAR]: [c.ENTER, T.APPEAR_ACTIVE], [T.APPEAR_ACTIVE]: [c.ENTERING, T.APPEAR_DONE, true], [T.APPEAR_DONE]: [c.ENTERED], [T.ENTER]: [c.ENTER, T.ENTER_ACTIVE], [T.ENTER_ACTIVE]: [c.ENTERING, T.ENTER_DONE, true], [T.ENTER_DONE]: [c.ENTERED], [T.EXIT]: [c.EXIT, T.EXIT_ACTIVE], [T.EXIT_ACTIVE]: [c.EXITING, T.EXIT_DONE, true], [T.EXIT_DONE]: [c.EXITED] };
-var u = (r) => {
-  const { children: c2, in: u2 = false, appear: A = false, enter: N2 = true, exit: l = true, duration: I = 500, alwaysMounted: p2 = false, addEndListener: R2 } = r, P2 = useRef(), _2 = useRef();
-  let d2 = false;
-  const [f, D] = useState(() => (d2 = true, u2 ? A ? T.APPEAR : T.APPEAR_DONE : T.EXIT_DONE));
-  useEffect(() => {
-    var e;
-    const { setTimeout: E, clearTimeout: t } = window, [n2, o, i] = s[f];
-    return null == (e = r[n2]) || e.call(r, P2.current), o && (i ? R2 ? R2(P2.current, () => D(o)) : _2.current = E(D, I, o) : D(o)), () => {
-      t(_2.current);
-    };
-  }, [f, I]), useLayoutEffect(() => {
-    d2 || D(u2 ? N2 ? T.ENTER : T.ENTER_DONE : l ? T.EXIT : T.EXIT_DONE);
-  }, [u2]);
-  const X = useMemo(() => {
-    const e = {};
-    return Object.values(T).forEach((r2) => {
-      e[r2] = f === r2;
-    }), e;
-  }, [f]);
-  if (!p2 && f === T.EXIT_DONE)
-    return null;
-  const O = c2(X, f);
-  return cloneElement(O, { ref: n([P2, O.ref]) });
-};
-function N(e, r) {
-  if (null == e)
-    return {};
-  var E, t, n2 = {}, o = Object.keys(e);
-  for (t = 0; t < o.length; t++)
-    r.indexOf(E = o[t]) >= 0 || (n2[E] = e[E]);
-  return n2;
+function rectsIntersect(rect1, rect2) {
+  if (rect1.width === 0 || rect1.height === 0 || rect2.width === 0 || rect2.height === 0) {
+    return false;
+  }
+  if (rect1.x + rect1.width <= rect2.x || rect2.x + rect2.width <= rect1.x || rect1.y + rect1.height <= rect2.y || rect2.y + rect2.height <= rect1.y) {
+    return false;
+  }
+  return true;
 }
-const p = ["children", "classNames"], R = { [T.APPEAR]: "-appear", [T.APPEAR_ACTIVE]: "-appear-active", [T.APPEAR_DONE]: "-appear-done", [T.ENTER]: "-enter", [T.ENTER_ACTIVE]: "-enter-active", [T.ENTER_DONE]: "-enter-done", [T.EXIT]: "-exit", [T.EXIT_ACTIVE]: "-exit-active", [T.EXIT_DONE]: "-exit-done" }, P = (...e) => e.filter((e2) => !!e2).join(" "), _ = (e, r) => "string" == typeof r ? `${r}${R[e]}` : r[e];
-var d = (E) => {
-  const { children: t, classNames: n2 } = E, o = N(E, p);
-  return createElement(u, o, (r, E2) => {
-    const { className: o2 } = t.props, i = useMemo(() => P(o2, ((e, r2) => {
-      const E3 = _(e, r2);
-      switch (e) {
-        case T.APPEAR_ACTIVE:
-          return P(_(T.APPEAR, r2), E3);
-        case T.ENTER_ACTIVE:
-          return P(_(T.ENTER, r2), E3);
-        case T.EXIT_ACTIVE:
-          return P(_(T.EXIT, r2), E3);
-        default:
-          return E3;
-      }
-    })(E2, n2)), [o2, n2, E2]);
-    return cloneElement(t, { className: i });
-  });
-};
-const transitionContainer$1 = "_transitionContainer_1gzlr_1";
-const modalBox$1 = "_modalBox_1gzlr_13";
-const enter$1 = "_enter_1gzlr_21";
-const exitDone$1 = "_exitDone_1gzlr_22";
-const enterActive$1 = "_enterActive_1gzlr_31";
-const exit$1 = "_exit_1gzlr_22";
-const styles$5 = {
-  transitionContainer: transitionContainer$1,
-  modalBox: modalBox$1,
-  enter: enter$1,
-  exitDone: exitDone$1,
-  enterActive: enterActive$1,
-  exit: exit$1
-};
-function Modal$1({
-  visible = false,
-  children
-}) {
-  return jsx(d, {
-    in: visible,
-    duration: 300,
-    classNames: styles$5,
-    alwaysMounted: true,
-    children: jsx("div", {
-      class: styles$5.transitionContainer,
-      children: jsx("div", {
-        class: styles$5.modalBox,
-        children
-      })
-    })
-  });
+function pointInsideRect(point, rect) {
+  return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
 }
 const tooltip = "_tooltip_11t5d_1";
 const defaultStyles$b = {
   tooltip
 };
-const TooltipType = {
-  float: "float",
-  modal: "modal"
-};
 function Tooltip({
   for: targetElement,
-  renderIn: refOrSelector,
-  type = TooltipType.float,
+  touchRect,
+  positionInTarget,
+  show = true,
   styles: styles2,
   children
 }) {
@@ -1677,29 +1572,19 @@ function Tooltip({
     y: 0
   });
   const [displayElement, setDisplayElement] = useState(null);
-  const trackPosition = typeof children === "function";
-  const {
-    targetRect,
-    positionInTarget,
-    hoverActive
-  } = useTooltipTarget(targetElement, trackPosition);
-  const tooltipRef = useRef(null);
+  const tooltipRef = useRef();
   styles2 = mergeStyles(defaultStyles$b, styles2);
   useEffect(() => {
-    let element = null;
-    if (typeof refOrSelector === "string") {
-      element = document.querySelector(refOrSelector);
-    } else if ("current" in refOrSelector) {
-      element = refOrSelector.current;
-    } else {
-      throw new Error("renderIn prop needs to be a selector or ref (from useRef)");
-    }
-    setDisplayElement(element);
-  }, [refOrSelector]);
+    setDisplayElement(document.querySelector("body"));
+    return () => {
+      setDisplayElement(null);
+    };
+  }, []);
   useLayoutEffect(() => {
     if (!tooltipRef.current)
       return;
-    if (trackPosition && positionInTarget) {
+    const targetRect = targetElement.getBoundingClientRect();
+    if (positionInTarget) {
       const newPosition = tooltipPositionForPoint({
         targetRect,
         positionInTarget,
@@ -1707,35 +1592,32 @@ function Tooltip({
         displayElement
       });
       setTooltipPosition(newPosition);
-    } else if (!trackPosition) {
+    } else if (!positionInTarget) {
       const newPosition = tooltipPositionForRect({
         targetRect,
+        touchRect,
         tooltip: tooltipRef.current,
         displayElement
       });
       setTooltipPosition(newPosition);
     }
-  }, [trackPosition, targetRect, positionInTarget, displayElement, tooltipRef]);
+  }, [targetElement, positionInTarget, displayElement, tooltipRef, touchRect]);
   if (!displayElement)
     return;
-  const displayTooltip = hoverActive || !trackPosition;
-  const fixedStyle = type === TooltipType.modal ? {} : {
-    display: displayTooltip ? "block" : "none",
+  const fixedStyle = {
+    display: show ? "block" : "none",
     position: "fixed",
     left: tooltipPosition.x,
     top: tooltipPosition.y,
     zIndex: 100
   };
-  const tooltip2 = jsxs("div", {
+  const tooltip2 = jsx("div", {
     ref: tooltipRef,
     className: styles2.tooltip,
     style: fixedStyle,
-    children: [positionInTarget && children(positionInTarget), !trackPosition && children]
+    children
   });
-  return createPortal(type === TooltipType.modal ? jsx(Modal$1, {
-    visible: hoverActive,
-    children: tooltip2
-  }) : tooltip2, displayElement);
+  return createPortal(tooltip2, displayElement);
 }
 function tooltipPositionForPoint({
   targetRect,
@@ -1756,10 +1638,19 @@ function tooltipPositionForPoint({
   if (newPosition.y + tooltipHeight > displayElementRect.bottom) {
     newPosition.y -= tooltipHeight;
   }
+  if (newPosition.x <= displayElementRect.left) {
+    newPosition.x = displayElementRect.left + displayElementRect.width / 2 - tooltipWidth / 2;
+  }
   return newPosition;
 }
 function tooltipPositionForRect({
   targetRect,
+  touchRect = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  },
   tooltip: tooltip2,
   displayElement
 }) {
@@ -1769,6 +1660,15 @@ function tooltipPositionForRect({
   };
   const tooltipWidth = tooltip2.offsetWidth;
   const tooltipHeight = tooltip2.offsetHeight;
+  const tooltipRect = {
+    ...newPosition,
+    width: tooltipWidth,
+    height: tooltipHeight
+  };
+  if (rectsIntersect(tooltipRect, touchRect)) {
+    newPosition.x = touchRect.x + touchRect.width / 2;
+    newPosition.y = touchRect.y - tooltipHeight;
+  }
   const displayElementRect = displayElement.getBoundingClientRect();
   if (newPosition.x + tooltipWidth > displayElementRect.right) {
     newPosition.x = targetRect.left - tooltipWidth;
@@ -1776,12 +1676,15 @@ function tooltipPositionForRect({
   if (newPosition.y - tooltipHeight < displayElementRect.top) {
     newPosition.y = targetRect.bottom;
   }
+  if (newPosition.x <= displayElementRect.left) {
+    newPosition.x = displayElementRect.left + displayElementRect.width / 2 - tooltipWidth / 2;
+  }
   return newPosition;
 }
-const text$2 = "_text_1b8t2_1";
+const text$1 = "_text_1b8t2_1";
 const container$3 = "_container_1b8t2_10";
 const defaultStyles$a = {
-  text: text$2,
+  text: text$1,
   container: container$3
 };
 const ControlChange = ({
@@ -1839,7 +1742,7 @@ const defaultStyles$9 = {
   displayColumn,
   topRow
 };
-const ToplineResult = ({
+const ToplineResult = forwardRef(({
   name: name2,
   secondaryName,
   mainNumber: mainNumber2,
@@ -1850,8 +1753,9 @@ const ToplineResult = ({
   abbreviation,
   onMouseOver,
   onInfoPress,
-  showInfoButton = false
-}) => {
+  showInfoButton = false,
+  infoButtonRef
+}, ref) => {
   styles2 = mergeStyles({
     ...defaultStyles$9
   }, styles2);
@@ -1859,6 +1763,7 @@ const ToplineResult = ({
   return !secondaryName ? jsxs("div", {
     class: styles2.toplineResult,
     onMouseOver,
+    ref,
     children: [jsxs("div", {
       class: styles2.topRow,
       children: [jsx("span", {
@@ -1867,7 +1772,8 @@ const ToplineResult = ({
       }), " ", showInfoButton && jsx("span", {
         class: styles2.infoButton,
         children: jsx(InfoButton, {
-          onClick: onInfoPress
+          onClick: onInfoPress,
+          ref: infoButtonRef
         })
       })]
     }), jsxs("div", {
@@ -1886,6 +1792,7 @@ const ToplineResult = ({
   }) : jsxs("div", {
     class: styles2.toplineResult,
     onMouseOver,
+    ref,
     children: [jsxs("div", {
       class: styles2.topRow,
       children: [jsx("span", {
@@ -1917,7 +1824,7 @@ const ToplineResult = ({
       })]
     })]
   });
-};
+});
 const section = "_section_12aiu_9";
 const borderTop = "_borderTop_12aiu_52";
 const header = "_header_12aiu_56";
@@ -1952,11 +1859,11 @@ const PageSection = forwardRef(({
     })]
   });
 });
-const text$1 = "_text_lo5h3_1";
+const text = "_text_lo5h3_1";
 const axis = "_axis_lo5h3_6";
 const bar = "_bar_lo5h3_10";
 const defaultStyles$7 = {
-  text: text$1,
+  text,
   axis,
   bar
 };
@@ -2006,58 +1913,56 @@ const ColumnChart = ({
     })]
   });
 };
-const text = "_text_vd5ly_1";
-const container$2 = "_container_vd5ly_9";
-const title$1 = "_title_vd5ly_16";
-const subtitle = "_subtitle_vd5ly_33";
-const blurb = "_blurb_vd5ly_44";
-const leftCell = "_leftCell_vd5ly_55";
-const rightCell = "_rightCell_vd5ly_55";
-const mugshot = "_mugshot_vd5ly_71";
+const container$2 = "_container_1snyq_1";
+const img = "_img_1snyq_7";
+const title$2 = "_title_1snyq_15";
+const subtitle = "_subtitle_1snyq_31";
+const small = "_small_1snyq_41";
+const blurb = "_blurb_1snyq_51";
+const footnote = "_footnote_1snyq_59";
 const defaultStyles$6 = {
-  text,
   container: container$2,
-  title: title$1,
+  img,
+  title: title$2,
   subtitle,
+  small,
   blurb,
-  leftCell,
-  rightCell,
-  mugshot
+  footnote
+};
+const SubtitleStyle = {
+  small: "small",
+  large: "large"
 };
 const PartyProfile = ({
-  styles: styles2,
   title: title2,
   subtitle: subtitle2,
+  subtitleStyle = SubtitleStyle.large,
   blurb: blurb2,
+  footnote: footnote2,
   imgSrc,
-  abbreviation
+  styles: styles2
 }) => {
   styles2 = mergeStyles({
     ...defaultStyles$6
   }, styles2);
-  return jsx("div", {
+  return jsxs("div", {
     class: styles2.container,
-    children: jsxs(Fragment, {
-      children: [jsxs("div", {
-        className: styles2.leftCell,
-        children: [jsx("h3", {
-          className: `${styles2.title}`,
-          children: title2
-        }), jsx("div", {
-          className: styles2.subtitle,
-          children: subtitle2
-        }), jsx("div", {
-          className: styles2.blurb,
-          children: blurb2
-        })]
-      }), jsx("div", {
-        className: styles2.rightCell,
-        children: jsx("img", {
-          src: imgSrc,
-          className: `${styles2.mugshot} bg-color--${abbreviation}`
-        })
-      })]
-    })
+    children: [jsx("img", {
+      src: imgSrc,
+      className: styles2.img
+    }), jsx("h3", {
+      className: styles2.title,
+      children: title2
+    }), jsx("div", {
+      className: [styles2.subtitle, styles2[subtitleStyle]].join(" "),
+      children: subtitle2
+    }), jsx("div", {
+      className: styles2.blurb,
+      children: blurb2
+    }), jsx("div", {
+      className: styles2.footnote,
+      children: footnote2
+    })]
   });
 };
 var epsilon$1 = 1e-6;
@@ -2472,7 +2377,7 @@ function useContainerSize(containerRef) {
 }
 const container$1 = "_container_cyrny_1";
 const svg$1 = "_svg_cyrny_6";
-const styles$4 = {
+const styles$5 = {
   container: container$1,
   svg: svg$1
 };
@@ -2720,7 +2625,7 @@ const Map$1 = forwardRef(({
   const renderSVG = containerSize && !config.drawToCanvas;
   return jsx("div", {
     ref: containerRef,
-    className: styles$4.container,
+    className: styles$5.container,
     style: containerStyle,
     children: renderSVG && jsx(SVGMapProvider, {
       id,
@@ -2772,7 +2677,7 @@ function ResultSummary({
 }
 const svg = "_svg_1dms8_1";
 const path = "_path_1dms8_8";
-const styles$3 = {
+const styles$4 = {
   svg,
   path
 };
@@ -2780,9 +2685,9 @@ function SearchIcon() {
   return jsx("svg", {
     viewBox: "0 0 20 20",
     xmlns: "http://www.w3.org/2000/svg",
-    className: styles$3.svg,
+    className: styles$4.svg,
     children: jsx("path", {
-      className: styles$3.path,
+      className: styles$4.path,
       "fill-rule": "evenodd",
       "clip-rule": "evenodd",
       d: "M7.273 0c4.022 0 7.25 3.295 7.25 7.273a7.226 7.226 0 01-7.25 7.25C3.25 14.523 0 11.295 0 7.273 0 3.295 3.25 0 7.273 0zm0 1.84A5.403 5.403 0 001.84 7.274c0 3 2.409 5.454 5.432 5.454 3 0 5.454-2.454 5.454-5.454 0-3.023-2.454-5.432-5.454-5.432zM20 18.16l-5.432-5.432h-.932l-.909.91v.931L18.16 20 20 18.159z"
@@ -2927,11 +2832,13 @@ function SuggestionList({
     })
   });
 }
-const refreshIndicator = "_refreshIndicator_u6lji_1";
-const liveText = "_liveText_u6lji_8";
-const refreshText = "_refreshText_u6lji_9";
+const refreshIndicator = "_refreshIndicator_3z0ji_9";
+const icon$1 = "_icon_3z0ji_17";
+const liveText = "_liveText_3z0ji_26";
+const refreshText = "_refreshText_3z0ji_27";
 const defaultStyles$2 = {
   refreshIndicator,
+  icon: icon$1,
   liveText,
   refreshText
 };
@@ -2942,8 +2849,11 @@ function RefreshIndicator({
   styles2 = mergeStyles(defaultStyles$2, styles2);
   return jsxs("div", {
     className: styles2.refreshIndicator,
-    children: [jsx(CircleIcon, {
-      pulse: true
+    children: [jsx("span", {
+      className: styles2.icon,
+      children: jsx(CircleIcon, {
+        pulse: true
+      })
     }), jsx("span", {
       className: styles2.liveText,
       children: "LIVE"
@@ -2981,13 +2891,79 @@ function ResponsiveGrid({
     })
   });
 }
+function n(n2) {
+  return (r) => {
+    n2.forEach((n3) => {
+      "function" == typeof n3 ? n3(r) : null != n3 && (n3.current = r);
+    });
+  };
+}
+var T, c;
+!function(e) {
+  e.APPEAR = "appear", e.APPEAR_ACTIVE = "appearActive", e.APPEAR_DONE = "appearDone", e.ENTER = "enter", e.ENTER_ACTIVE = "enterActive", e.ENTER_DONE = "enterDone", e.EXIT = "exit", e.EXIT_ACTIVE = "exitActive", e.EXIT_DONE = "exitDone";
+}(T || (T = {})), function(e) {
+  e.ENTER = "onEnter", e.ENTERING = "onEntering", e.ENTERED = "onEntered", e.EXIT = "onExit", e.EXITING = "onExiting", e.EXITED = "onExited";
+}(c || (c = {}));
+const s = { [T.APPEAR]: [c.ENTER, T.APPEAR_ACTIVE], [T.APPEAR_ACTIVE]: [c.ENTERING, T.APPEAR_DONE, true], [T.APPEAR_DONE]: [c.ENTERED], [T.ENTER]: [c.ENTER, T.ENTER_ACTIVE], [T.ENTER_ACTIVE]: [c.ENTERING, T.ENTER_DONE, true], [T.ENTER_DONE]: [c.ENTERED], [T.EXIT]: [c.EXIT, T.EXIT_ACTIVE], [T.EXIT_ACTIVE]: [c.EXITING, T.EXIT_DONE, true], [T.EXIT_DONE]: [c.EXITED] };
+var u = (r) => {
+  const { children: c2, in: u2 = false, appear: A = false, enter: N2 = true, exit: l = true, duration: I = 500, alwaysMounted: p2 = false, addEndListener: R2 } = r, P2 = useRef(), _2 = useRef();
+  let d2 = false;
+  const [f, D] = useState(() => (d2 = true, u2 ? A ? T.APPEAR : T.APPEAR_DONE : T.EXIT_DONE));
+  useEffect(() => {
+    var e;
+    const { setTimeout: E, clearTimeout: t } = window, [n2, o, i] = s[f];
+    return null == (e = r[n2]) || e.call(r, P2.current), o && (i ? R2 ? R2(P2.current, () => D(o)) : _2.current = E(D, I, o) : D(o)), () => {
+      t(_2.current);
+    };
+  }, [f, I]), useLayoutEffect(() => {
+    d2 || D(u2 ? N2 ? T.ENTER : T.ENTER_DONE : l ? T.EXIT : T.EXIT_DONE);
+  }, [u2]);
+  const X = useMemo(() => {
+    const e = {};
+    return Object.values(T).forEach((r2) => {
+      e[r2] = f === r2;
+    }), e;
+  }, [f]);
+  if (!p2 && f === T.EXIT_DONE)
+    return null;
+  const O = c2(X, f);
+  return cloneElement(O, { ref: n([P2, O.ref]) });
+};
+function N(e, r) {
+  if (null == e)
+    return {};
+  var E, t, n2 = {}, o = Object.keys(e);
+  for (t = 0; t < o.length; t++)
+    r.indexOf(E = o[t]) >= 0 || (n2[E] = e[E]);
+  return n2;
+}
+const p = ["children", "classNames"], R = { [T.APPEAR]: "-appear", [T.APPEAR_ACTIVE]: "-appear-active", [T.APPEAR_DONE]: "-appear-done", [T.ENTER]: "-enter", [T.ENTER_ACTIVE]: "-enter-active", [T.ENTER_DONE]: "-enter-done", [T.EXIT]: "-exit", [T.EXIT_ACTIVE]: "-exit-active", [T.EXIT_DONE]: "-exit-done" }, P = (...e) => e.filter((e2) => !!e2).join(" "), _ = (e, r) => "string" == typeof r ? `${r}${R[e]}` : r[e];
+var d = (E) => {
+  const { children: t, classNames: n2 } = E, o = N(E, p);
+  return createElement(u, o, (r, E2) => {
+    const { className: o2 } = t.props, i = useMemo(() => P(o2, ((e, r2) => {
+      const E3 = _(e, r2);
+      switch (e) {
+        case T.APPEAR_ACTIVE:
+          return P(_(T.APPEAR, r2), E3);
+        case T.ENTER_ACTIVE:
+          return P(_(T.ENTER, r2), E3);
+        case T.EXIT_ACTIVE:
+          return P(_(T.EXIT, r2), E3);
+        default:
+          return E3;
+      }
+    })(E2, n2)), [o2, n2, E2]);
+    return cloneElement(t, { className: i });
+  });
+};
 const transitionContainer = "_transitionContainer_wws3j_1";
 const modalBox = "_modalBox_wws3j_13";
 const enter = "_enter_wws3j_21";
 const exitDone = "_exitDone_wws3j_22";
 const enterActive = "_enterActive_wws3j_31";
 const exit = "_exit_wws3j_22";
-const styles$2 = {
+const styles$3 = {
   transitionContainer,
   modalBox,
   enter,
@@ -3010,21 +2986,123 @@ function Modal({
   return createPortal(jsx(d, {
     in: visible,
     duration: 300,
-    classNames: styles$2,
+    classNames: styles$3,
     children: jsx("div", {
-      class: styles$2.transitionContainer,
+      class: styles$3.transitionContainer,
       onClick,
       style: {
         pointerEvents: visible ? "auto" : "none"
       },
       children: jsx("div", {
         ref: modalBoxRef,
-        class: styles$2.modalBox,
+        class: styles$3.modalBox,
         children
       })
     })
   }), document.body);
 }
+const button$1 = "_button_xeyqm_1";
+const icon = "_icon_xeyqm_17";
+const title$1 = "_title_xeyqm_22";
+const popout = "_popout_xeyqm_29";
+const hint = "_hint_xeyqm_44";
+const option = "_option_xeyqm_51";
+const optionIcon = "_optionIcon_xeyqm_71";
+const optionTitle = "_optionTitle_xeyqm_76";
+const optionDescription = "_optionDescription_xeyqm_84";
+const checkmark = "_checkmark_xeyqm_91";
+const checkmarkPath = "_checkmarkPath_xeyqm_97";
+const styles$2 = {
+  button: button$1,
+  icon,
+  title: title$1,
+  popout,
+  hint,
+  option,
+  optionIcon,
+  optionTitle,
+  optionDescription,
+  checkmark,
+  checkmarkPath
+};
+function Dropdown({
+  title: title2,
+  hint: hint2,
+  options,
+  onSelect
+}) {
+  const [expanded, setExpanded] = useState(true);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const onOptionClick = useCallback((option2, index2) => {
+    setSelectedIndex(index2);
+    if (onSelect)
+      onSelect(option2, index2);
+  }, [onSelect]);
+  const iconForSelectedOption = useMemo(() => {
+    const selectedOption = options[selectedIndex];
+    return selectedOption.icon;
+  }, [options, selectedIndex]);
+  return jsxs("div", {
+    children: [jsxs("button", {
+      className: styles$2.button,
+      onClick: () => setExpanded((current) => !current),
+      children: [jsx("img", {
+        src: iconForSelectedOption,
+        className: styles$2.icon
+      }), jsx("span", {
+        className: styles$2.title,
+        children: title2
+      }), jsx(Chevron, {
+        active: true,
+        size: "large",
+        direction: expanded ? "up" : "down"
+      })]
+    }), jsxs("div", {
+      className: styles$2.popout,
+      style: {
+        visibility: expanded ? "visible" : "hidden"
+      },
+      children: [hint2 && jsx("p", {
+        className: styles$2.hint,
+        children: hint2
+      }), options.map((option2, index2) => jsxs("button", {
+        className: styles$2.option,
+        onClick: () => onOptionClick(option2, index2),
+        children: [jsx("img", {
+          src: option2.icon,
+          className: styles$2.optionIcon
+        }), jsxs("div", {
+          className: styles$2.optionText,
+          children: [jsx("h4", {
+            className: styles$2.optionTitle,
+            children: option2.title
+          }), jsx("p", {
+            className: styles$2.optionDescription,
+            children: option2.description
+          })]
+        }), index2 === selectedIndex && jsx("div", {
+          className: styles$2.checkmark,
+          children: jsx(Checkmark, {})
+        })]
+      }, option2.title))]
+    })]
+  });
+}
+function Checkmark() {
+  return jsx("svg", {
+    width: "11",
+    height: "9",
+    viewBox: "0 0 11 9",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: jsx("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M0.631814 4.43687L0.0839844 4.9847L2.82313 8.8195H3.08335L10.9173 0.711624L10.3695 0.17749L3.08335 6.77884L0.631814 4.43687Z",
+      className: styles$2.checkmarkPath
+    })
+  });
+}
 const coalitionsWrapper = "_coalitionsWrapper_1ahqy_9";
 const coalitionsContainer = "_coalitionsContainer_1ahqy_14";
 const coalition = "_coalition_1ahqy_9";
@@ -3307,6 +3385,122 @@ function Ticker({
     })]
   });
 }
+function useTouchOrHover() {
+  const ref = useRef();
+  const [position, setPosition] = useState();
+  const [isActive, setIsActive] = useState(false);
+  const [touchRect, setTouchRect] = useState();
+  useEffect(() => {
+    const element = ref.current;
+    let touchCancelled = false;
+    const touchStarted = (event) => {
+      if (event.touches.length > 1)
+        return;
+      touchCancelled = false;
+      const touch = event.touches[0];
+      const {
+        clientX,
+        clientY
+      } = touch;
+      const rect = element.getBoundingClientRect();
+      const point = {
+        x: clientX - rect.left,
+        y: clientY - rect.top
+      };
+      setPosition(point);
+      const touchRect2 = {
+        x: clientX - touch.radiusX,
+        y: clientY - touch.radiusY,
+        width: touch.radiusX * 2,
+        height: touch.radiusY * 2
+      };
+      setTouchRect(touchRect2);
+      setIsActive(true);
+      event.stopPropagation();
+    };
+    const touchMoved = (event) => {
+      if (touchCancelled || event.targetTouches.length !== 1)
+        return;
+      const touch = event.targetTouches[0];
+      const {
+        clientX,
+        clientY
+      } = touch;
+      const rect = element.getBoundingClientRect();
+      const point = {
+        x: clientX - rect.left,
+        y: clientY - rect.top
+      };
+      if (!event.cancelable || !pointInsideRect(point, rect)) {
+        setIsActive(false);
+        touchCancelled = true;
+      } else {
+        setPosition(point);
+        setIsActive(true);
+      }
+    };
+    const touchEnded = (event) => {
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+      setIsActive(false);
+      setPosition(null);
+    };
+    const mouseOver = (event) => {
+      const {
+        clientX,
+        clientY
+      } = event;
+      const rect = element.getBoundingClientRect();
+      const x = clientX - rect.left;
+      const y = clientY - rect.top;
+      setPosition({
+        x,
+        y
+      });
+      setIsActive(true);
+    };
+    const mouseMoved = (event) => {
+      const {
+        clientX,
+        clientY
+      } = event;
+      const rect = element.getBoundingClientRect();
+      const x = clientX - rect.left;
+      const y = clientY - rect.top;
+      setPosition({
+        x,
+        y
+      });
+    };
+    const mouseOut = () => {
+      setIsActive(false);
+      setPosition(null);
+    };
+    element.addEventListener("touchstart", touchStarted);
+    element.addEventListener("touchmove", touchMoved);
+    element.addEventListener("touchend", touchEnded);
+    element.addEventListener("touchcancel", touchEnded);
+    element.addEventListener("mouseover", mouseOver);
+    element.addEventListener("mousemove", mouseMoved);
+    element.addEventListener("mouseout", mouseOut);
+    return () => {
+      element.removeEventListener("touchstart", touchStarted);
+      element.removeEventListener("touchmove", touchMoved);
+      element.removeEventListener("touchend", mouseOut);
+      element.removeEventListener("touchcancel", mouseOut);
+      element.removeEventListener("mouseover", touchStarted);
+      element.removeEventListener("mousemove", mouseMoved);
+      element.removeEventListener("mouseout", mouseOut);
+    };
+  }, []);
+  return {
+    touchOrHoverRef: ref,
+    touchOrHoverIsActive: isActive,
+    touchRect,
+    positionInTarget: position
+  };
+}
 export {
   AdSlot,
   ArrowButton,
@@ -3319,6 +3513,7 @@ export {
   ColumnChart,
   Container,
   ControlChange,
+  Dropdown,
   GradientIcon,
   GridType,
   InfoButton,
@@ -3344,7 +3539,9 @@ export {
   Table,
   Ticker,
   Tooltip,
-  TooltipType,
-  ToplineResult
+  ToplineResult,
+  useContainerSize,
+  useTouchOrHover,
+  useWindowSize
 };
 //# sourceMappingURL=interactive-component-library.js.map