@guardian/interactive-component-library 0.1.0-alpha.21 → 0.1.0-alpha.23

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

@@ -8,7 +8,7 @@
   const rotated = "_rotated_b5io0_10";
   const path$4 = "_path_b5io0_14";
   const active = "_active_b5io0_18";
-  const defaultStyles$t = {
+  const defaultStyles$v = {
     svg: svg$9,
     group,
     rotated,
@@ -48,13 +48,13 @@
     styles: styles2
   }) {
     const defaultStylesCopy = {
-      ...defaultStyles$t
+      ...defaultStyles$v
     };
     if (active2) {
-      defaultStylesCopy.path = mergeStyles(defaultStyles$t.path, defaultStyles$t.active);
+      defaultStylesCopy.path = mergeStyles(defaultStyles$v.path, defaultStyles$v.active);
     }
     if (direction === DIRECTION.up) {
-      defaultStylesCopy.group = mergeStyles(defaultStyles$t.group, defaultStyles$t.rotated);
+      defaultStylesCopy.group = mergeStyles(defaultStyles$v.group, defaultStyles$v.rotated);
     }
     styles2 = mergeStyles(defaultStylesCopy, styles2);
     return size === SIZE.small ? jsxRuntime.jsx(SmallChevron, {
@@ -104,12 +104,12 @@
       })
     });
   }
-  const container$5 = "_container_jzalm_1";
+  const container$7 = "_container_jzalm_1";
   const dot = "_dot_jzalm_6";
   const circle$2 = "_circle_jzalm_13";
   const text$3 = "_text_jzalm_17";
-  const defaultStyles$s = {
-    container: container$5,
+  const defaultStyles$u = {
+    container: container$7,
     dot,
     circle: circle$2,
     text: text$3
@@ -125,10 +125,10 @@
     abbreviation
   }) => {
     const defaultStylesCopy = {
-      ...defaultStyles$s
+      ...defaultStyles$u
     };
     if (dotType === DOT_TYPE.round) {
-      defaultStylesCopy.dot = mergeStyles(defaultStyles$s.dot, defaultStyles$s.circle);
+      defaultStylesCopy.dot = mergeStyles(defaultStyles$u.dot, defaultStyles$u.circle);
     }
     styles2 = mergeStyles(defaultStylesCopy, styles2);
     return jsxRuntime.jsxs("div", {
@@ -144,7 +144,7 @@
   const bar$2 = "_bar_bf839_1";
   const label$1 = "_label_bf839_5";
   const backgroundRect = "_backgroundRect_bf839_11";
-  const defaultStyles$r = {
+  const defaultStyles$t = {
     bar: bar$2,
     label: label$1,
     backgroundRect
@@ -200,7 +200,7 @@
     const rectElements = hooks.useRef([]);
     const textElements = hooks.useRef([]);
     styles2 = mergeStyles({
-      ...defaultStyles$r
+      ...defaultStyles$t
     }, styles2);
     const svgHeight = labelType === LabelType.hanging && !hideLabels ? height + 20 : height;
     const renderLabel = (config, i) => jsxRuntime.jsx("text", {
@@ -340,7 +340,7 @@
   const svg$8 = "_svg_1cajk_6";
   const previous = "_previous_1cajk_12";
   const next = "_next_1cajk_16";
-  const defaultStyles$q = {
+  const defaultStyles$s = {
     svg: svg$8,
     previous,
     next
@@ -351,7 +351,7 @@
       next: next2,
       styles: styles2
     } = props;
-    styles2 = mergeStyles(defaultStyles$q, styles2);
+    styles2 = mergeStyles(defaultStyles$s, styles2);
     const gradientId = `gv-gradient-def-${previous2}-${next2}`;
     const gradients = useGradients();
     hooks.useEffect(() => {
@@ -418,20 +418,135 @@
       })
     });
   }
+  const unit = "_unit_mo5d9_1";
+  const container$6 = "_container_mo5d9_6";
+  const defaultStyles$r = {
+    unit,
+    container: container$6
+  };
+  function useWindowSize() {
+    const [windowSize, setWindowSize] = hooks.useState(() => {
+      if (typeof window === "undefined")
+        return {
+          width: 0,
+          height: 0
+        };
+      return {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
+    });
+    hooks.useEffect(() => {
+      if (typeof window === "undefined")
+        return;
+      function handleResize() {
+        setWindowSize({
+          width: window.innerWidth,
+          height: window.innerHeight
+        });
+      }
+      window.addEventListener("resize", handleResize);
+      return () => {
+        window.removeEventListener("resize", handleResize);
+      };
+    }, []);
+    return windowSize;
+  }
+  function useContainerSize(containerRef) {
+    const windowSize = useWindowSize();
+    const [containerSize, setContainerSize] = hooks.useState();
+    hooks.useLayoutEffect(() => {
+      const container2 = containerRef.current;
+      if (!container2)
+        return;
+      setContainerSize({
+        width: container2.clientWidth,
+        height: container2.clientHeight
+      });
+    }, [containerRef, windowSize]);
+    return containerSize;
+  }
+  const WaffleType = {
+    circle: "circle",
+    square: "square"
+  };
+  const WaffleUnit = ({
+    type,
+    attributes
+  }) => type === WaffleType.square ? jsxRuntime.jsx("rect", {
+    ...attributes
+  }) : jsxRuntime.jsx("circle", {
+    ...attributes
+  });
+  const Waffle = ({
+    units,
+    numberOfRows,
+    type = WaffleType.circle,
+    idAccessor,
+    onMouseOver,
+    styles: styles2
+  }) => {
+    const containerRef = hooks.useRef();
+    const containerSize = useContainerSize(containerRef);
+    const width = containerSize ? containerSize.width : 0;
+    const total = units.length;
+    const columns = Math.ceil(total / numberOfRows);
+    const unitWidth = width / columns;
+    const unitHeight = unitWidth;
+    const height = numberOfRows * unitHeight;
+    styles2 = mergeStyles(defaultStyles$r, styles2);
+    return jsxRuntime.jsx("div", {
+      ref: containerRef,
+      className: styles2.container,
+      children: containerSize && jsxRuntime.jsx("svg", {
+        viewBox: `0 0 ${width} ${height}`,
+        class: styles2.svg,
+        children: jsxRuntime.jsx("g", {
+          children: units.map((unit2, j) => {
+            let attributes;
+            if (type === WaffleType.square) {
+              attributes = {
+                id: unit2[idAccessor] || `w-${j}`,
+                onMouseOver: (e) => onMouseOver(unit2, e),
+                class: `${styles2.unit} ${unit2.class}`,
+                height: unitHeight,
+                width: unitWidth,
+                x: unitWidth * Math.floor(j / numberOfRows),
+                y: unitHeight * (j % numberOfRows)
+              };
+            } else {
+              attributes = {
+                id: unit2[idAccessor] || `w-${j}`,
+                onMouseOver: (e) => onMouseOver(unit2, e),
+                class: `${styles2.unit} ${unit2.class}`,
+                r: unitWidth / 2,
+                transform: `translate(${unitWidth * Math.floor(j / numberOfRows) + unitWidth / 2}, ${unitHeight * (j % numberOfRows) + unitHeight / 2})`
+              };
+            }
+            return jsxRuntime.jsx(WaffleUnit, {
+              type,
+              attributes
+            }, `wu-${j}`);
+          })
+        })
+      })
+    });
+  };
   const button$5 = "_button_oqopj_1";
   const svg$7 = "_svg_oqopj_15";
-  const defaultStyles$p = {
+  const defaultStyles$q = {
     button: button$5,
     svg: svg$7
   };
-  const InfoButton = ({
+  const InfoButton = compat.forwardRef(({
     onClick,
     styles: styles2
-  }) => {
+  }, ref) => {
     styles2 = mergeStyles({
-      ...defaultStyles$p
+      ...defaultStyles$q
     }, styles2);
     return jsxRuntime.jsx("button", {
+      ref,
       class: styles2.button,
       onClick,
       children: jsxRuntime.jsx("svg", {
@@ -443,11 +558,11 @@
         })
       })
     });
-  };
+  });
   const svg$6 = "_svg_1v49v_1";
   const circle$1 = "_circle_1v49v_5";
   const pulse = "_pulse_1v49v_9";
-  const defaultStyles$o = {
+  const defaultStyles$p = {
     svg: svg$6,
     circle: circle$1,
     pulse
@@ -457,7 +572,7 @@
     pulse: pulse2 = false,
     styles: styles2
   }) => {
-    styles2 = mergeStyles(defaultStyles$o, styles2);
+    styles2 = mergeStyles(defaultStyles$p, styles2);
     return jsxRuntime.jsx("svg", {
       style: styles2.svg,
       fill: "none",
@@ -477,7 +592,7 @@
     });
   };
   const text$2 = "_text_1okyv_1";
-  const defaultStyles$n = {
+  const defaultStyles$o = {
     text: text$2
   };
   var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -827,7 +942,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$n
+      ...defaultStyles$o
     }, styles2);
     let timeSince = dayjs(timeStamp).fromNow();
     return jsxRuntime.jsx("span", {
@@ -837,7 +952,7 @@
   };
   const pageContainer = "_pageContainer_1s0yq_9";
   const sideBorders = "_sideBorders_1s0yq_42";
-  const defaultStyles$m = {
+  const defaultStyles$n = {
     pageContainer,
     sideBorders
   };
@@ -849,17 +964,17 @@
     const {
       pageContainer: pageContainer2,
       sideBorders: sideBordersStyle
-    } = mergeStyles(defaultStyles$m, styles2);
+    } = mergeStyles(defaultStyles$n, styles2);
     return jsxRuntime.jsx("div", {
       className: [pageContainer2, sideBorders2 && sideBordersStyle].join(" "),
       children
     });
   }
-  const wrapper = "_wrapper_5oj1x_9";
+  const wrapper$1 = "_wrapper_5oj1x_9";
   const bar$1 = "_bar_5oj1x_14";
   const zero = "_zero_5oj1x_19";
-  const defaultStyles$l = {
-    wrapper,
+  const defaultStyles$m = {
+    wrapper: wrapper$1,
     bar: bar$1,
     zero
   };
@@ -879,7 +994,7 @@
     let thisColor = ` bg-color--${party}`;
     let zeroStyles = ` height: ${height};`;
     styles2 = mergeStyles({
-      ...defaultStyles$l
+      ...defaultStyles$m
     }, styles2);
     return jsxRuntime.jsxs("div", {
       className: styles2.wrapper,
@@ -897,7 +1012,7 @@
   const dividingLineColor = "_dividingLineColor_886i1_16";
   const square = "_square_886i1_20";
   const corner = "_corner_886i1_24";
-  const defaultStyles$k = {
+  const defaultStyles$l = {
     svg: svg$5,
     dividingLineColor,
     square,
@@ -910,7 +1025,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$k
+      ...defaultStyles$l
     }, styles2);
     let cornerSize = squareSize * 0.625;
     let cornerMargin = squareSize < 100 ? squareSize / 6 : 10;
@@ -948,7 +1063,7 @@
   const stackedGridRotateItems90 = "_stackedGridRotateItems90_6whof_17";
   const stackedGridRotateItems180 = "_stackedGridRotateItems180_6whof_23";
   const stackedGridRotateItems270 = "_stackedGridRotateItems270_6whof_29";
-  const defaultStyles$j = {
+  const defaultStyles$k = {
     stackedGridContainer,
     stackedGridRotateItems0,
     stackedGridRotateItems90,
@@ -979,7 +1094,7 @@
   }) => {
     let containerFlip = getContainerFlip(fromBottom, fromLeft);
     let itemRotateClass = getItemRotate(fromBottom, fromLeft);
-    styles2 = mergeStyles(defaultStyles$j, styles2);
+    styles2 = mergeStyles(defaultStyles$k, styles2);
     return jsxRuntime.jsx("div", {
       style: {
         transform: containerFlip
@@ -990,7 +1105,7 @@
   };
   const svg$4 = "_svg_l2fsl_9";
   const squareFill = "_squareFill_l2fsl_16";
-  const defaultStyles$i = {
+  const defaultStyles$j = {
     svg: svg$4,
     squareFill
   };
@@ -1000,7 +1115,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$i
+      ...defaultStyles$j
     }, styles2);
     return jsxRuntime.jsx("svg", {
       width: size,
@@ -1018,7 +1133,7 @@
   };
   const button$4 = "_button_1fees_1";
   const icon$2 = "_icon_1fees_6";
-  const defaultStyles$h = {
+  const defaultStyles$i = {
     button: button$4,
     icon: icon$2
   };
@@ -1028,7 +1143,7 @@
     styles: styles2,
     onClick
   }) {
-    styles2 = mergeStyles(defaultStyles$h, styles2);
+    styles2 = mergeStyles(defaultStyles$i, styles2);
     return jsxRuntime.jsx("button", {
       className: styles2.button,
       disabled,
@@ -1054,7 +1169,7 @@
   }
   const button$3 = "_button_3521c_1";
   const buttonInner$1 = "_buttonInner_3521c_6";
-  const defaultStyles$g = {
+  const defaultStyles$h = {
     button: button$3,
     buttonInner: buttonInner$1
   };
@@ -1064,7 +1179,7 @@
     styles: styles2,
     children
   }) {
-    styles2 = mergeStyles(defaultStyles$g, styles2);
+    styles2 = mergeStyles(defaultStyles$h, styles2);
     return jsxRuntime.jsx("button", {
       className: styles2.button,
       "data-type": type,
@@ -1079,7 +1194,7 @@
   const buttonBorder = "_buttonBorder_125im_11";
   const svg$3 = "_svg_125im_19";
   const path$3 = "_path_125im_25";
-  const defaultStyles$f = {
+  const defaultStyles$g = {
     button: button$2,
     buttonBorder,
     svg: svg$3,
@@ -1090,7 +1205,7 @@
     onClick,
     styles: styles2
   }) {
-    styles2 = mergeStyles(defaultStyles$f, styles2);
+    styles2 = mergeStyles(defaultStyles$g, styles2);
     return jsxRuntime.jsx("button", {
       className: [styles2.button, border && styles2.buttonBorder].join(" "),
       onClick,
@@ -1108,10 +1223,10 @@
       })
     });
   }
-  const container$4 = "_container_tq3ke_1";
+  const container$5 = "_container_tq3ke_1";
   const slot = "_slot_tq3ke_5";
-  const defaultStyles$e = {
-    container: container$4,
+  const defaultStyles$f = {
+    container: container$5,
     slot
   };
   function AdSlot({
@@ -1121,7 +1236,7 @@
   }) {
     var _a, _b, _c;
     const slotId = `dfp-ad--${name2}`;
-    styles2 = mergeStyles(defaultStyles$e, styles2);
+    styles2 = mergeStyles(defaultStyles$f, 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("|");
@@ -1266,7 +1381,7 @@
   const headerCellButton = "_headerCellButton_1dg64_40";
   const bodyRow = "_bodyRow_1dg64_49";
   const bodyCell = "_bodyCell_1dg64_54";
-  const defaultStyles$d = {
+  const defaultStyles$e = {
     table,
     hideHeader,
     hideHeaderNoBorder,
@@ -1307,7 +1422,7 @@
         };
       });
     };
-    styles2 = mergeStyles(defaultStyles$d, styles2);
+    styles2 = mergeStyles(defaultStyles$e, styles2);
     return jsxRuntime.jsxs("table", {
       className: styles2.table,
       cellSpacing: 0,
@@ -1369,47 +1484,19 @@
       })]
     });
   }
-  function useWindowSize() {
-    const [windowSize, setWindowSize] = hooks.useState(() => {
-      if (typeof window === "undefined")
-        return {
-          width: 0,
-          height: 0
-        };
-      return {
-        width: window.innerWidth,
-        height: window.innerHeight
-      };
-    });
-    hooks.useEffect(() => {
-      if (typeof window === "undefined")
-        return;
-      function handleResize() {
-        setWindowSize({
-          width: window.innerWidth,
-          height: window.innerHeight
-        });
-      }
-      window.addEventListener("resize", handleResize);
-      return () => {
-        window.removeEventListener("resize", handleResize);
-      };
-    }, []);
-    return windowSize;
-  }
   const slopeChartContainer = "_slopeChartContainer_gj7pr_1";
   const svg$2 = "_svg_gj7pr_5";
-  const line = "_line_gj7pr_9";
+  const line$1 = "_line_gj7pr_9";
   const circle = "_circle_gj7pr_14";
   const label = "_label_gj7pr_18";
   const y1Label = "_y1Label_gj7pr_24";
   const y2Label = "_y2Label_gj7pr_28";
   const axis$1 = "_axis_gj7pr_32";
   const axisLabel = "_axisLabel_gj7pr_37";
-  const defaultStyles$c = {
+  const defaultStyles$d = {
     slopeChartContainer,
     svg: svg$2,
-    line,
+    line: line$1,
     circle,
     label,
     y1Label,
@@ -1458,7 +1545,7 @@
       return positionLabels(labels);
     }, [lines, y2Label2, yScale]);
     styles2 = mergeStyles({
-      ...defaultStyles$c
+      ...defaultStyles$d
     }, styles2);
     const chart = jsxRuntime.jsx("svg", {
       class: styles2.svg,
@@ -1538,161 +1625,27 @@
       children: show && chart
     });
   };
-  const useTooltipTarget = (targetElement, trackPosition) => {
-    const [targetRect, setTargetRect] = hooks.useState();
-    const [position, setPosition] = hooks.useState(null);
-    const [hoverActive, setHoverActive] = hooks.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);
-      });
-    };
-    hooks.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 = hooks.useRef(), _2 = hooks.useRef();
-    let d2 = false;
-    const [f, D] = hooks.useState(() => (d2 = true, u2 ? A ? T.APPEAR : T.APPEAR_DONE : T.EXIT_DONE));
-    hooks.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]), hooks.useLayoutEffect(() => {
-      d2 || D(u2 ? N2 ? T.ENTER : T.ENTER_DONE : l ? T.EXIT : T.EXIT_DONE);
-    }, [u2]);
-    const X = hooks.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 preact.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 preact.createElement(u, o, (r, E2) => {
-      const { className: o2 } = t.props, i = hooks.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 preact.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$6 = {
-    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 jsxRuntime.jsx(d, {
-      in: visible,
-      duration: 300,
-      classNames: styles$6,
-      alwaysMounted: true,
-      children: jsxRuntime.jsx("div", {
-        class: styles$6.transitionContainer,
-        children: jsxRuntime.jsx("div", {
-          class: styles$6.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 = {
+  const defaultStyles$c = {
     tooltip
   };
-  const TooltipType = {
-    float: "float",
-    modal: "modal"
-  };
   function Tooltip({
     for: targetElement,
-    renderIn: refOrSelector,
-    type = TooltipType.float,
+    touchRect,
+    positionInTarget,
+    show = true,
     styles: styles2,
     children
   }) {
@@ -1703,29 +1656,19 @@
       y: 0
     });
     const [displayElement, setDisplayElement] = hooks.useState(null);
-    const trackPosition = typeof children === "function";
-    const {
-      targetRect,
-      positionInTarget,
-      hoverActive
-    } = useTooltipTarget(targetElement, trackPosition);
-    const tooltipRef = hooks.useRef(null);
-    styles2 = mergeStyles(defaultStyles$b, styles2);
+    const tooltipRef = hooks.useRef();
+    styles2 = mergeStyles(defaultStyles$c, styles2);
     hooks.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);
+      };
+    }, []);
     hooks.useLayoutEffect(() => {
       if (!tooltipRef.current)
         return;
-      if (trackPosition && positionInTarget) {
+      const targetRect = targetElement.getBoundingClientRect();
+      if (positionInTarget) {
         const newPosition = tooltipPositionForPoint({
           targetRect,
           positionInTarget,
@@ -1733,35 +1676,32 @@
           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 = jsxRuntime.jsxs("div", {
+    const tooltip2 = jsxRuntime.jsx("div", {
       ref: tooltipRef,
       className: styles2.tooltip,
       style: fixedStyle,
-      children: [positionInTarget && children(positionInTarget), !trackPosition && children]
+      children
     });
-    return compat.createPortal(type === TooltipType.modal ? jsxRuntime.jsx(Modal$1, {
-      visible: hoverActive,
-      children: tooltip2
-    }) : tooltip2, displayElement);
+    return compat.createPortal(tooltip2, displayElement);
   }
   function tooltipPositionForPoint({
     targetRect,
@@ -1782,10 +1722,19 @@
     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
   }) {
@@ -1795,6 +1744,15 @@
     };
     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;
@@ -1802,13 +1760,16 @@
     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$1 = "_text_1b8t2_1";
-  const container$3 = "_container_1b8t2_10";
-  const defaultStyles$a = {
+  const container$4 = "_container_1b8t2_10";
+  const defaultStyles$b = {
     text: text$1,
-    container: container$3
+    container: container$4
   };
   const ControlChange = ({
     previous: previous2,
@@ -1817,7 +1778,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$a
+      ...defaultStyles$b
     }, styles2);
     let hasChanged = next2 !== previous2;
     return jsxRuntime.jsx("div", {
@@ -1841,6 +1802,34 @@
       })
     });
   };
+  const wrapper = "_wrapper_8vo05_1";
+  const line = "_line_8vo05_5";
+  const halfLineText = "_halfLineText_8vo05_15";
+  const defaultStyles$a = {
+    wrapper,
+    line,
+    halfLineText
+  };
+  const FirstPastThePostWaffle = ({
+    styles: styles2,
+    children,
+    lineOverHang
+  }) => {
+    styles2 = mergeStyles(defaultStyles$a, styles2);
+    return jsxRuntime.jsxs("div", {
+      class: styles2.wrapper,
+      children: [jsxRuntime.jsx("p", {
+        style: {
+          height: lineOverHang + 20
+        },
+        class: styles2.halfLineText,
+        children: children.halfLineText
+      }), jsxRuntime.jsx("div", {
+        class: styles2.line,
+        children: " "
+      }), children.waffle]
+    });
+  };
   const toplineResult = "_toplineResult_49z3u_9";
   const primaryname = "_primaryname_49z3u_14";
   const secondaryname = "_secondaryname_49z3u_29";
@@ -1865,7 +1854,7 @@
     displayColumn,
     topRow
   };
-  const ToplineResult = ({
+  const ToplineResult = compat.forwardRef(({
     name: name2,
     secondaryName,
     mainNumber: mainNumber2,
@@ -1876,8 +1865,9 @@
     abbreviation,
     onMouseOver,
     onInfoPress,
-    showInfoButton = false
-  }) => {
+    showInfoButton = false,
+    infoButtonRef
+  }, ref) => {
     styles2 = mergeStyles({
       ...defaultStyles$9
     }, styles2);
@@ -1885,6 +1875,7 @@
     return !secondaryName ? jsxRuntime.jsxs("div", {
       class: styles2.toplineResult,
       onMouseOver,
+      ref,
       children: [jsxRuntime.jsxs("div", {
         class: styles2.topRow,
         children: [jsxRuntime.jsx("span", {
@@ -1893,7 +1884,8 @@
         }), " ", showInfoButton && jsxRuntime.jsx("span", {
           class: styles2.infoButton,
           children: jsxRuntime.jsx(InfoButton, {
-            onClick: onInfoPress
+            onClick: onInfoPress,
+            ref: infoButtonRef
           })
         })]
       }), jsxRuntime.jsxs("div", {
@@ -1912,6 +1904,7 @@
     }) : jsxRuntime.jsxs("div", {
       class: styles2.toplineResult,
       onMouseOver,
+      ref,
       children: [jsxRuntime.jsxs("div", {
         class: styles2.topRow,
         children: [jsxRuntime.jsx("span", {
@@ -1943,7 +1936,7 @@
         })]
       })]
     });
-  };
+  });
   const section = "_section_12aiu_9";
   const borderTop = "_borderTop_12aiu_52";
   const header = "_header_12aiu_56";
@@ -1963,14 +1956,22 @@
     styles2 = mergeStyles({
       ...defaultStyles$8
     }, styles2);
+    const [minHeight, setMinHeight] = hooks.useState("auto");
+    const headerRef = hooks.useRef();
+    hooks.useLayoutEffect(() => {
+      const headerElement = headerRef.current;
+      setMinHeight(headerElement.offsetHeight);
+    }, [children]);
     return jsxRuntime.jsxs("section", {
       ref,
       className: [styles2.section, borderTop2 && styles2.borderTop].join(" "),
       style: {
-        "--background-color": backgroundColor
+        "--background-color": backgroundColor,
+        minHeight
       },
       children: [jsxRuntime.jsx("div", {
         className: styles2.header,
+        ref: headerRef,
         children: children.header
       }), jsxRuntime.jsx("div", {
         className: styles2.content,
@@ -2032,7 +2033,7 @@
       })]
     });
   };
-  const container$2 = "_container_1snyq_1";
+  const container$3 = "_container_1snyq_1";
   const img = "_img_1snyq_7";
   const title$2 = "_title_1snyq_15";
   const subtitle = "_subtitle_1snyq_31";
@@ -2040,7 +2041,7 @@
   const blurb = "_blurb_1snyq_51";
   const footnote = "_footnote_1snyq_59";
   const defaultStyles$6 = {
-    container: container$2,
+    container: container$3,
     img,
     title: title$2,
     subtitle,
@@ -2480,24 +2481,10 @@
       })
     });
   }
-  function useContainerSize(containerRef) {
-    const windowSize = useWindowSize();
-    const [containerSize, setContainerSize] = hooks.useState();
-    hooks.useLayoutEffect(() => {
-      const container2 = containerRef.current;
-      if (!container2)
-        return;
-      setContainerSize({
-        width: container2.clientWidth,
-        height: container2.clientHeight
-      });
-    }, [containerRef, windowSize]);
-    return containerSize;
-  }
-  const container$1 = "_container_cyrny_1";
+  const container$2 = "_container_cyrny_1";
   const svg$1 = "_svg_cyrny_6";
   const styles$5 = {
-    container: container$1,
+    container: container$2,
     svg: svg$1
   };
   function dynamicPropValue(prop, d2, index2) {
@@ -2763,10 +2750,10 @@
       })
     });
   });
-  const container = "_container_azu4a_1";
+  const container$1 = "_container_azu4a_1";
   const paragraph = "_paragraph_azu4a_12";
   const defaultStyles$4 = {
-    container,
+    container: container$1,
     paragraph
   };
   function ResultSummary({
@@ -3010,6 +2997,72 @@
       })
     });
   }
+  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 = hooks.useRef(), _2 = hooks.useRef();
+    let d2 = false;
+    const [f, D] = hooks.useState(() => (d2 = true, u2 ? A ? T.APPEAR : T.APPEAR_DONE : T.EXIT_DONE));
+    hooks.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]), hooks.useLayoutEffect(() => {
+      d2 || D(u2 ? N2 ? T.ENTER : T.ENTER_DONE : l ? T.EXIT : T.EXIT_DONE);
+    }, [u2]);
+    const X = hooks.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 preact.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 preact.createElement(u, o, (r, E2) => {
+      const { className: o2 } = t.props, i = hooks.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 preact.cloneElement(t, { className: i });
+    });
+  };
   const transitionContainer = "_transitionContainer_wws3j_1";
   const modalBox = "_modalBox_wws3j_13";
   const enter = "_enter_wws3j_21";
@@ -3054,18 +3107,20 @@
       })
     }), 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 container = "_container_iozsb_1";
+  const button$1 = "_button_iozsb_6";
+  const icon = "_icon_iozsb_22";
+  const title$1 = "_title_iozsb_27";
+  const popout = "_popout_iozsb_34";
+  const hint = "_hint_iozsb_51";
+  const option = "_option_iozsb_58";
+  const optionIcon = "_optionIcon_iozsb_79";
+  const optionTitle = "_optionTitle_iozsb_84";
+  const optionDescription = "_optionDescription_iozsb_92";
+  const checkmark = "_checkmark_iozsb_99";
+  const checkmarkPath = "_checkmarkPath_iozsb_105";
   const styles$2 = {
+    container,
     button: button$1,
     icon,
     title: title$1,
@@ -3096,6 +3151,7 @@
       return selectedOption.icon;
     }, [options, selectedIndex]);
     return jsxRuntime.jsxs("div", {
+      className: styles$2.container,
       children: [jsxRuntime.jsxs("button", {
         className: styles$2.button,
         onClick: () => setExpanded((current) => !current),
@@ -3438,6 +3494,122 @@
       })]
     });
   }
+  function useTouchOrHover() {
+    const ref = hooks.useRef();
+    const [position, setPosition] = hooks.useState();
+    const [isActive, setIsActive] = hooks.useState(false);
+    const [touchRect, setTouchRect] = hooks.useState();
+    hooks.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
+    };
+  }
   exports2.AdSlot = AdSlot;
   exports2.ArrowButton = ArrowButton;
   exports2.Button = Button;
@@ -3450,6 +3622,7 @@
   exports2.Container = Container;
   exports2.ControlChange = ControlChange;
   exports2.Dropdown = Dropdown;
+  exports2.FirstPastThePostWaffle = FirstPastThePostWaffle;
   exports2.GradientIcon = GradientIcon;
   exports2.GridType = GridType;
   exports2.InfoButton = InfoButton;
@@ -3475,8 +3648,12 @@
   exports2.Table = Table;
   exports2.Ticker = Ticker;
   exports2.Tooltip = Tooltip;
-  exports2.TooltipType = TooltipType;
   exports2.ToplineResult = ToplineResult;
+  exports2.Waffle = Waffle;
+  exports2.WaffleType = WaffleType;
+  exports2.useContainerSize = useContainerSize;
+  exports2.useTouchOrHover = useTouchOrHover;
+  exports2.useWindowSize = useWindowSize;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });
 //# sourceMappingURL=interactive-component-library.umd.cjs.map