@guardian/interactive-component-library 0.1.0-alpha.14 → 0.1.0-alpha.15

package/dist/interactive-component-library.js

@@ -3,13 +3,13 @@ import { useRef, useState, useLayoutEffect, useCallback, useEffect, useMemo, use
 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, geoMercator, geoContains } from "d3-geo";
+import { geoStream, geoAlbers, geoPath, 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$r = {
+const defaultStyles$s = {
   group,
   rotated,
   path: path$4,
@@ -48,13 +48,13 @@ function Chevron({
   styles: styles2
 }) {
   const defaultStylesCopy = {
-    ...defaultStyles$r
+    ...defaultStyles$s
   };
   if (active2) {
-    defaultStylesCopy.path = mergeStyles(defaultStyles$r.path, defaultStyles$r.active);
+    defaultStylesCopy.path = mergeStyles(defaultStyles$s.path, defaultStyles$s.active);
   }
   if (direction === DIRECTION.up) {
-    defaultStylesCopy.group = mergeStyles(defaultStyles$r.group, defaultStyles$r.rotated);
+    defaultStylesCopy.group = mergeStyles(defaultStyles$s.group, defaultStyles$s.rotated);
   }
   styles2 = mergeStyles(defaultStylesCopy, styles2);
   return jsx("svg", {
@@ -79,7 +79,7 @@ const container$4 = "_container_jzalm_1";
 const dot = "_dot_jzalm_6";
 const circle$2 = "_circle_jzalm_13";
 const text$4 = "_text_jzalm_17";
-const defaultStyles$q = {
+const defaultStyles$r = {
   container: container$4,
   dot,
   circle: circle$2,
@@ -96,10 +96,10 @@ const LegendItem = ({
   abbreviation
 }) => {
   const defaultStylesCopy = {
-    ...defaultStyles$q
+    ...defaultStyles$r
   };
   if (dotType === DOT_TYPE.round) {
-    defaultStylesCopy.dot = mergeStyles(defaultStyles$q.dot, defaultStyles$q.circle);
+    defaultStylesCopy.dot = mergeStyles(defaultStyles$r.dot, defaultStyles$r.circle);
   }
   styles2 = mergeStyles(defaultStylesCopy, styles2);
   return jsxs("div", {
@@ -134,7 +134,7 @@ function isDarkColor(color) {
 const bar$2 = "_bar_wmb0k_1";
 const label$1 = "_label_wmb0k_5";
 const backgroundRect = "_backgroundRect_wmb0k_11";
-const defaultStyles$p = {
+const defaultStyles$q = {
   bar: bar$2,
   label: label$1,
   backgroundRect
@@ -168,7 +168,7 @@ function StackedBar({
     setHideLabels(false);
   }, [stack, width, height]);
   styles2 = mergeStyles({
-    ...defaultStyles$p
+    ...defaultStyles$q
   }, styles2);
   let totalWidth = 0;
   const content2 = stack.map((d2, index2) => {
@@ -281,7 +281,7 @@ const [useGradients, setGradients, getGradients] = createStore({});
 const svg$8 = "_svg_1cajk_6";
 const previous = "_previous_1cajk_12";
 const next = "_next_1cajk_16";
-const defaultStyles$o = {
+const defaultStyles$p = {
   svg: svg$8,
   previous,
   next
@@ -292,7 +292,7 @@ const GradientIcon = (props) => {
     next: next2,
     styles: styles2
   } = props;
-  styles2 = mergeStyles(defaultStyles$o, styles2);
+  styles2 = mergeStyles(defaultStyles$p, styles2);
   const gradientId = `gv-gradient-def-${previous2}-${next2}`;
   const gradients = useGradients();
   useEffect(() => {
@@ -361,7 +361,7 @@ function GradientDefs({
 }
 const button$4 = "_button_kpmyt_1";
 const svg$7 = "_svg_kpmyt_14";
-const defaultStyles$n = {
+const defaultStyles$o = {
   button: button$4,
   svg: svg$7
 };
@@ -370,7 +370,7 @@ const InfoButton = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$n
+    ...defaultStyles$o
   }, styles2);
   return jsx("button", {
     class: styles2.button,
@@ -388,7 +388,7 @@ const InfoButton = ({
 const svg$6 = "_svg_1v49v_1";
 const circle$1 = "_circle_1v49v_5";
 const pulse = "_pulse_1v49v_9";
-const defaultStyles$m = {
+const defaultStyles$n = {
   svg: svg$6,
   circle: circle$1,
   pulse
@@ -398,7 +398,7 @@ const CircleIcon = ({
   pulse: pulse2 = false,
   styles: styles2
 }) => {
-  styles2 = mergeStyles(defaultStyles$m, styles2);
+  styles2 = mergeStyles(defaultStyles$n, styles2);
   return jsx("svg", {
     style: styles2.svg,
     fill: "none",
@@ -418,7 +418,7 @@ const CircleIcon = ({
   });
 };
 const text$3 = "_text_1okyv_1";
-const defaultStyles$l = {
+const defaultStyles$m = {
   text: text$3
 };
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -768,7 +768,7 @@ const RelativeTimeSentence = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$l
+    ...defaultStyles$m
   }, styles2);
   let timeSince = dayjs(timeStamp).fromNow();
   return jsx("span", {
@@ -778,7 +778,7 @@ const RelativeTimeSentence = ({
 };
 const pageContainer = "_pageContainer_1s0yq_9";
 const sideBorders = "_sideBorders_1s0yq_42";
-const defaultStyles$k = {
+const defaultStyles$l = {
   pageContainer,
   sideBorders
 };
@@ -790,14 +790,14 @@ function Container({
   const {
     pageContainer: pageContainer2,
     sideBorders: sideBordersStyle
-  } = mergeStyles(defaultStyles$k, styles2);
+  } = mergeStyles(defaultStyles$l, styles2);
   return jsx("div", {
     className: [pageContainer2, sideBorders2 && sideBordersStyle].join(" "),
     children
   });
 }
 const bar$1 = "_bar_17pyf_9";
-const defaultStyles$j = {
+const defaultStyles$k = {
   bar: bar$1
 };
 function ChangeBar({
@@ -815,7 +815,7 @@ function ChangeBar({
   let thisStyles = ` height: ${height}; width: ${barwidth}px; ${positive ? `left: ${posleft}` : `left: ${negleft}`}`;
   let thisColor = ` bg-color--${party}`;
   styles2 = mergeStyles({
-    ...defaultStyles$j
+    ...defaultStyles$k
   }, styles2);
   return jsx("div", {
     className: styles2.wrapper,
@@ -830,7 +830,7 @@ const svg$5 = "_svg_886i1_9";
 const dividingLineColor = "_dividingLineColor_886i1_16";
 const square = "_square_886i1_20";
 const corner = "_corner_886i1_24";
-const defaultStyles$i = {
+const defaultStyles$j = {
   svg: svg$5,
   dividingLineColor,
   square,
@@ -843,7 +843,7 @@ const SquareCutCornerIcon = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$i
+    ...defaultStyles$j
   }, styles2);
   let cornerSize = squareSize * 0.625;
   let cornerMargin = squareSize < 100 ? squareSize / 6 : 10;
@@ -881,7 +881,7 @@ const stackedGridRotateItems0 = "_stackedGridRotateItems0_1e05o_13";
 const stackedGridRotateItems90 = "_stackedGridRotateItems90_1e05o_19";
 const stackedGridRotateItems180 = "_stackedGridRotateItems180_1e05o_25";
 const stackedGridRotateItems270 = "_stackedGridRotateItems270_1e05o_31";
-const defaultStyles$h = {
+const defaultStyles$i = {
   stackedGridContainer,
   stackedGridRotateItems0,
   stackedGridRotateItems90,
@@ -920,7 +920,7 @@ const StackedGrid = ({
     width: containerWidth,
     transform: containerFlip
   };
-  styles2 = mergeStyles(defaultStyles$h, styles2);
+  styles2 = mergeStyles(defaultStyles$i, styles2);
   return jsx("div", {
     style: flexStyles,
     className: `${styles2.stackedGridContainer} ${styles2[itemRotateClass]}`,
@@ -929,7 +929,7 @@ const StackedGrid = ({
 };
 const svg$4 = "_svg_l2fsl_9";
 const squareFill = "_squareFill_l2fsl_16";
-const defaultStyles$g = {
+const defaultStyles$h = {
   svg: svg$4,
   squareFill
 };
@@ -939,7 +939,7 @@ const SquareIcon = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$g
+    ...defaultStyles$h
   }, styles2);
   return jsx("svg", {
     width: size,
@@ -957,7 +957,7 @@ const SquareIcon = ({
 };
 const button$3 = "_button_1fees_1";
 const icon = "_icon_1fees_6";
-const defaultStyles$f = {
+const defaultStyles$g = {
   button: button$3,
   icon
 };
@@ -967,7 +967,7 @@ function ArrowButton({
   styles: styles2,
   onClick
 }) {
-  styles2 = mergeStyles(defaultStyles$f, styles2);
+  styles2 = mergeStyles(defaultStyles$g, styles2);
   return jsx("button", {
     className: styles2.button,
     disabled,
@@ -993,7 +993,7 @@ function ArrowButton({
 }
 const button$2 = "_button_19t7j_1";
 const buttonInner$1 = "_buttonInner_19t7j_6";
-const defaultStyles$e = {
+const defaultStyles$f = {
   button: button$2,
   buttonInner: buttonInner$1
 };
@@ -1003,7 +1003,7 @@ function Button({
   styles: styles2,
   children
 }) {
-  styles2 = mergeStyles(defaultStyles$e, styles2);
+  styles2 = mergeStyles(defaultStyles$f, styles2);
   return jsx("button", {
     className: styles2.button,
     "data-type": type,
@@ -1018,7 +1018,7 @@ 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$d = {
+const defaultStyles$e = {
   button: button$1,
   buttonBorder,
   svg: svg$3,
@@ -1029,7 +1029,7 @@ function CloseButton({
   onClick,
   styles: styles2
 }) {
-  styles2 = mergeStyles(defaultStyles$d, styles2);
+  styles2 = mergeStyles(defaultStyles$e, styles2);
   return jsx("button", {
     className: [styles2.button, border && styles2.buttonBorder].join(" "),
     onClick,
@@ -1172,7 +1172,7 @@ const headerCell = "_headerCell_1b75c_31";
 const headerCellButton = "_headerCellButton_1b75c_39";
 const bodyRow = "_bodyRow_1b75c_48";
 const bodyCell = "_bodyCell_1b75c_53";
-const defaultStyles$c = {
+const defaultStyles$d = {
   table,
   hideHeader,
   hideHeaderNoBorder,
@@ -1213,7 +1213,7 @@ function Table({
       };
     });
   };
-  styles2 = mergeStyles(defaultStyles$c, styles2);
+  styles2 = mergeStyles(defaultStyles$d, styles2);
   return jsxs("table", {
     className: styles2.table,
     children: [jsx("thead", {
@@ -1346,7 +1346,7 @@ const y1Label = "_y1Label_gj7pr_24";
 const y2Label = "_y2Label_gj7pr_28";
 const axis$1 = "_axis_gj7pr_32";
 const axisLabel = "_axisLabel_gj7pr_37";
-const defaultStyles$b = {
+const defaultStyles$c = {
   slopeChartContainer,
   svg: svg$2,
   line,
@@ -1398,7 +1398,7 @@ const SlopeChart = ({
     return positionLabels(labels);
   }, [lines, y2Label2, yScale]);
   styles2 = mergeStyles({
-    ...defaultStyles$b
+    ...defaultStyles$c
   }, styles2);
   const chart = jsx("svg", {
     class: styles2.svg,
@@ -1491,6 +1491,7 @@ const useTooltipTarget = (targetElement, trackPosition) => {
     const x = clientX - rect.left;
     const y = clientY - rect.top;
     requestAnimationFrame(() => {
+      setTargetRect(rect);
       setPosition({
         x,
         y
@@ -1621,7 +1622,7 @@ function Modal({
   });
 }
 const tooltip = "_tooltip_11t5d_1";
-const defaultStyles$a = {
+const defaultStyles$b = {
   tooltip
 };
 const TooltipType = {
@@ -1649,7 +1650,7 @@ function Tooltip({
     hoverActive
   } = useTooltipTarget(targetElement, trackPosition);
   const tooltipRef = useRef(null);
-  styles2 = mergeStyles(defaultStyles$a, styles2);
+  styles2 = mergeStyles(defaultStyles$b, styles2);
   useEffect(() => {
     let element = null;
     if (typeof refOrSelector === "string") {
@@ -1703,17 +1704,18 @@ function Tooltip({
   }) : tooltip2, displayElement);
 }
 function tooltipPositionForPoint({
+  targetRect,
   positionInTarget,
   tooltip: tooltip2,
   displayElement
 }) {
-  const displayElementRect = displayElement.getBoundingClientRect();
   const newPosition = {
-    x: positionInTarget.x + displayElementRect.x,
-    y: positionInTarget.y + displayElementRect.y
+    x: positionInTarget.x + targetRect.x,
+    y: positionInTarget.y + targetRect.y
   };
   const tooltipWidth = tooltip2.offsetWidth;
   const tooltipHeight = tooltip2.offsetHeight;
+  const displayElementRect = displayElement.getBoundingClientRect();
   if (newPosition.x + tooltipWidth > displayElementRect.right) {
     newPosition.x -= tooltipWidth;
   }
@@ -1744,7 +1746,7 @@ function tooltipPositionForRect({
 }
 const text$2 = "_text_1b8t2_1";
 const container$3 = "_container_1b8t2_10";
-const defaultStyles$9 = {
+const defaultStyles$a = {
   text: text$2,
   container: container$3
 };
@@ -1755,7 +1757,7 @@ const ControlChange = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$9
+    ...defaultStyles$a
   }, styles2);
   let hasChanged = next2 !== previous2;
   return jsx("div", {
@@ -1789,7 +1791,7 @@ const secondaryNumber = "_secondaryNumber_w8o28_58";
 const displayRow = "_displayRow_w8o28_65";
 const displayColumn = "_displayColumn_w8o28_71";
 const topRow = "_topRow_w8o28_75";
-const defaultStyles$8 = {
+const defaultStyles$9 = {
   toplineResult,
   primaryname,
   secondaryname,
@@ -1814,7 +1816,7 @@ const ToplineResult = ({
   showInfoButton = false
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$8
+    ...defaultStyles$9
   }, styles2);
   const displayStyle = displayRow2 ? styles2.displayRow : styles2.displayColumn;
   return !secondaryName ? jsxs(Fragment, {
@@ -1881,7 +1883,7 @@ const section = "_section_12aiu_9";
 const borderTop = "_borderTop_12aiu_52";
 const header = "_header_12aiu_56";
 const content = "_content_12aiu_76";
-const defaultStyles$7 = {
+const defaultStyles$8 = {
   section,
   borderTop,
   header,
@@ -1894,7 +1896,7 @@ const PageSection = forwardRef(({
   backgroundColor = "transparent"
 }, ref) => {
   styles2 = mergeStyles({
-    ...defaultStyles$7
+    ...defaultStyles$8
   }, styles2);
   return jsxs("section", {
     ref,
@@ -1914,7 +1916,7 @@ const PageSection = forwardRef(({
 const text$1 = "_text_lo5h3_1";
 const axis = "_axis_lo5h3_6";
 const bar = "_bar_lo5h3_10";
-const defaultStyles$6 = {
+const defaultStyles$7 = {
   text: text$1,
   axis,
   bar
@@ -1929,7 +1931,7 @@ const ColumnChart = ({
   columnPadding,
   styles: styles2
 }) => {
-  styles2 = mergeStyles(defaultStyles$6, styles2);
+  styles2 = mergeStyles(defaultStyles$7, styles2);
   const yScale = scaleLinear$1([maxValue, minValue], [0, chartHeight]);
   const totalColumnWidth = Number(columnWidth) + Number(columnPadding.left) + Number(columnPadding.right);
   let marginBottom = minValue < 0 ? 0 : 40;
@@ -1973,7 +1975,7 @@ const blurb = "_blurb_vd5ly_44";
 const leftCell = "_leftCell_vd5ly_55";
 const rightCell = "_rightCell_vd5ly_55";
 const mugshot = "_mugshot_vd5ly_71";
-const defaultStyles$5 = {
+const defaultStyles$6 = {
   text,
   container: container$2,
   title: title$1,
@@ -1992,7 +1994,7 @@ const PartyProfile = ({
   abbreviation
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$5
+    ...defaultStyles$6
   }, styles2);
   return jsx("div", {
     class: styles2.container,
@@ -2260,6 +2262,33 @@ function bboxFeature(bounds) {
   return feature;
 }
 const MapContext = createContext();
+function calculateScale(mapBounds, mapWidthPixels, mapHeightPixels) {
+  const south = mapBounds[0][1];
+  const west = mapBounds[0][0];
+  const north = mapBounds[1][1];
+  const east = mapBounds[1][0];
+  const widthKilometers = distanceInKmBetweenEarthCoordinates([west, south], [east, south]);
+  const heightKilometers = distanceInKmBetweenEarthCoordinates([west, south], [west, north]);
+  const scaleX = mapWidthPixels / widthKilometers;
+  const scaleY = mapHeightPixels / heightKilometers;
+  const scale = (scaleX + scaleY) / 2;
+  return scale;
+}
+function distanceInKmBetweenEarthCoordinates(point1, point2) {
+  let [lon1, lat1] = point1;
+  let [lon2, lat2] = point2;
+  const earthRadiusKm = 6371;
+  const dLat = degreesToRadians(lat2 - lat1);
+  const dLon = degreesToRadians(lon2 - lon1);
+  lat1 = degreesToRadians(lat1);
+  lat2 = degreesToRadians(lat2);
+  const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2);
+  const c2 = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  return earthRadiusKm * c2;
+}
+function degreesToRadians(degrees) {
+  return degrees * Math.PI / 180;
+}
 function SVGMapProvider({
   id,
   mapRef,
@@ -2279,9 +2308,47 @@ function SVGMapProvider({
     return config.projection.fitSize([contentSize.width, contentSize.height], bboxFeature(config.bounds));
   }, [contentSize, config]);
   const path2 = geoPath().projection(projection);
+  const layerSet = useRef(/* @__PURE__ */ new Set());
+  const layers = useRef([]);
+  const updateLayers = useCallback((layerSet2) => {
+    const _layers = Array.from(layerSet2.current);
+    _layers.sort((a, b) => {
+      return b.zIndex - a.zIndex;
+    });
+    layers.current = _layers;
+  }, []);
+  const registerLayer = useCallback((layer) => {
+    layerSet.current.add(layer);
+    updateLayers(layerSet);
+  }, [updateLayers]);
+  const unregisterLayer = useCallback((layer) => {
+    layerSet.current.delete(layer);
+    updateLayers(layerSet);
+  }, [updateLayers]);
+  const findFeatureAtPoint = useCallback(({
+    x,
+    y
+  }) => {
+    const adjustedPoint = [x - padding.left, y - padding.top];
+    for (const layer of layers.current) {
+      if (typeof layer.findFeatureAtPoint === "function") {
+        const feature = layer.findFeatureAtPoint(adjustedPoint);
+        if (feature)
+          return feature;
+      }
+    }
+    return null;
+  }, [padding]);
+  const getVisibleBounds = useCallback(() => {
+    const projectedSW = projection.invert([padding.left, contentSize.height]);
+    const projectedNE = projection.invert([padding.left + contentSize.width, padding.top]);
+    return [projectedSW, projectedNE];
+  }, [projection, contentSize, padding]);
+  const getZoomScale = useCallback(() => {
+    return calculateScale(getVisibleBounds(), contentSize.width, contentSize.height);
+  }, [getVisibleBounds, contentSize]);
   const context = {
     id,
-    mapRef,
     projection,
     config,
     path: path2,
@@ -2293,15 +2360,20 @@ function SVGMapProvider({
     padding,
     zoom,
     extent: [[0, 0], [width, height]],
-    selectedFeature
+    selectedFeature,
+    getZoomScale,
+    registerLayer,
+    unregisterLayer,
+    findFeatureAtPoint
   };
+  mapRef.current = context;
   return jsx(MapContext.Provider, {
     value: context,
     children
   });
 }
 const path$1 = "_path_1cwd5_9";
-const defaultStyles$4 = {
+const defaultStyles$5 = {
   path: path$1
 };
 function CompositionBorders({
@@ -2310,7 +2382,7 @@ function CompositionBorders({
   const {
     projection
   } = useContext(MapContext);
-  styles2 = mergeStyles(defaultStyles$4, styles2);
+  styles2 = mergeStyles(defaultStyles$5, styles2);
   return jsx("path", {
     className: styles2.path,
     d: projection.getCompositionBorders()
@@ -2321,7 +2393,6 @@ function SVGRenderer({
 }) {
   const {
     id,
-    mapRef,
     config,
     size,
     selectedFeature,
@@ -2329,7 +2400,6 @@ function SVGRenderer({
   } = useContext(MapContext);
   return jsx("svg", {
     id,
-    ref: mapRef,
     width: size.width,
     height: size.height,
     viewBox: `0 0 ${size.width} ${size.height}`,
@@ -2379,9 +2449,22 @@ function Polygon({
   fill = null,
   stroke = null,
   strokeWidth = 1,
+  zIndex = 0,
   styles: styles2
 }) {
   const context = useContext(MapContext);
+  useEffect(() => {
+    function findFeatureAtPoint(point) {
+    }
+    const layer = {
+      zIndex,
+      findFeatureAtPoint
+    };
+    context.registerLayer(layer);
+    return () => {
+      context.unregisterLayer(layer);
+    };
+  }, [context, zIndex]);
   return jsx(Fragment, {
     children: features.map((d2, index2) => {
       return jsx("path", {
@@ -2462,9 +2545,34 @@ function Point({
   fill = null,
   stroke = null,
   strokeWidth = 1,
+  zIndex = 0,
   styles: styles2
 }) {
   const context = useContext(MapContext);
+  useEffect(() => {
+    function findFeatureAtPoint(point) {
+      for (const [index2, feature] of features.entries()) {
+        const resolvedRadius = dynamicPropValue(radius, feature, index2);
+        if (isNaN(resolvedRadius))
+          return;
+        const [cx, cy] = context.projection(feature.geometry.coordinates);
+        const distanceSquared = (point[0] - cx) ** 2 + (point[1] - cy) ** 2;
+        const radiusSquared = resolvedRadius ** 2;
+        if (distanceSquared <= radiusSquared) {
+          return feature;
+        }
+      }
+      return null;
+    }
+    const layer = {
+      zIndex,
+      findFeatureAtPoint
+    };
+    context.registerLayer(layer);
+    return () => {
+      context.unregisterLayer(layer);
+    };
+  }, [context, features, radius, zIndex]);
   return jsx(Fragment, {
     children: features.map((d2, index2) => {
       const [cx, cy] = context.projection(d2.geometry.coordinates);
@@ -2549,34 +2657,12 @@ const Map$1 = forwardRef(({
       setIsReady(true);
     }
   }, [isReady]);
-  useImperativeHandle(
-    ref,
-    () => ({
-      isReady,
-      getContainer: () => containerRef.current,
-      findFeatureAtPoint
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isReady]
-  );
-  function findFeatureAtPoint({
-    x,
-    y
-  }) {
-    const adjustedPoint = [x - padding.left, y - padding.top];
-    const coordinates = config.projection.invert(adjustedPoint);
-    for (const child of toChildArray(children)) {
-      if (Object.prototype.hasOwnProperty.call(child.props, "features")) {
-        const features = child.props.features;
-        for (const feature of features) {
-          if (geoContains(feature, coordinates)) {
-            return feature;
-          }
-        }
-      }
-    }
-    return null;
-  }
+  const mapRef = useRef();
+  useImperativeHandle(ref, () => ({
+    isReady,
+    getContainer: () => containerRef.current,
+    getContext: () => mapRef.current
+  }), [isReady]);
   const containerSize = useContainerSize(containerRef);
   const containerStyle = useMemo(() => {
     const style = {};
@@ -2586,7 +2672,6 @@ const Map$1 = forwardRef(({
       style["height"] = height;
     return style;
   }, [width, height]);
-  const mapRef = useRef();
   const renderSVG = containerSize && !config.drawToCanvas;
   return jsx("div", {
     ref: containerRef,
@@ -2602,14 +2687,16 @@ const Map$1 = forwardRef(({
       selectedFeature,
       zoom,
       children: jsx(SVGRenderer, {
-        children
+        children: toChildArray(children).map((child, index2) => cloneElement(child, {
+          zIndex: index2
+        }))
       })
     })
   });
 });
 const container = "_container_azu4a_1";
 const paragraph = "_paragraph_azu4a_12";
-const defaultStyles$3 = {
+const defaultStyles$4 = {
   container,
   paragraph
 };
@@ -2622,7 +2709,7 @@ function ResultSummary({
   styles: styles2
 }) {
   styles2 = mergeStyles({
-    ...defaultStyles$3
+    ...defaultStyles$4
   }, styles2);
   return jsxs("div", {
     class: styles2.container,
@@ -2665,7 +2752,7 @@ const suggestions = "_suggestions_g5w44_36";
 const suggestion = "_suggestion_g5w44_36";
 const selected = "_selected_g5w44_59";
 const highlighted = "_highlighted_g5w44_63";
-const defaultStyles$2 = {
+const defaultStyles$3 = {
   searchContainer,
   input,
   searchIcon,
@@ -2686,7 +2773,7 @@ function SearchInput({
   styles: styles2
 }) {
   var _a, _b, _c;
-  styles2 = mergeStyles(defaultStyles$2, styles2);
+  styles2 = mergeStyles(defaultStyles$3, styles2);
   const inputRef = useRef(null);
   const [selectedIndex, setSelectedIndex] = useState(-1);
   const [suggestions2, setSuggestions] = useState();
@@ -2798,7 +2885,7 @@ function SuggestionList({
 const refreshIndicator = "_refreshIndicator_u6lji_1";
 const liveText = "_liveText_u6lji_8";
 const refreshText = "_refreshText_u6lji_9";
-const defaultStyles$1 = {
+const defaultStyles$2 = {
   refreshIndicator,
   liveText,
   refreshText
@@ -2807,7 +2894,7 @@ function RefreshIndicator({
   text: text2,
   styles: styles2
 }) {
-  styles2 = mergeStyles(defaultStyles$1, styles2);
+  styles2 = mergeStyles(defaultStyles$2, styles2);
   return jsxs("div", {
     className: styles2.refreshIndicator,
     children: [jsx(CircleIcon, {
@@ -2821,6 +2908,34 @@ function RefreshIndicator({
     })]
   });
 }
+const grid = "_grid_xps7m_9";
+const defaultStyles$1 = {
+  grid
+};
+const GridType = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
+function ResponsiveGrid({
+  type = GridType.medium,
+  children,
+  styles: styles2
+}) {
+  styles2 = mergeStyles({
+    ...defaultStyles$1
+  }, styles2);
+  return jsx("div", {
+    className: styles2.grid,
+    "data-grid-type": type,
+    children: toChildArray(children).map((child, index2) => {
+      return jsx("div", {
+        className: styles2.gridItem,
+        children: child
+      }, index2);
+    })
+  });
+}
 const coalitionsWrapper = "_coalitionsWrapper_1ahqy_9";
 const coalitionsContainer = "_coalitionsContainer_1ahqy_14";
 const coalition = "_coalition_1ahqy_9";
@@ -3116,6 +3231,7 @@ export {
   Container,
   ControlChange,
   GradientIcon,
+  GridType,
   InfoButton,
   LegendItem,
   Map$1 as Map,
@@ -3126,6 +3242,7 @@ export {
   Projection,
   RefreshIndicator,
   RelativeTimeSentence,
+  ResponsiveGrid,
   ResultSummary,
   SearchInput,
   SlopeChart,