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

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

@@ -7,7 +7,7 @@
   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,
@@ -46,13 +46,13 @@
     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 jsxRuntime.jsx("svg", {
@@ -77,7 +77,7 @@
   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,
@@ -94,10 +94,10 @@
     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 jsxRuntime.jsxs("div", {
@@ -132,7 +132,7 @@
   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
@@ -166,7 +166,7 @@
       setHideLabels(false);
     }, [stack, width, height]);
     styles2 = mergeStyles({
-      ...defaultStyles$p
+      ...defaultStyles$q
     }, styles2);
     let totalWidth = 0;
     const content2 = stack.map((d2, index2) => {
@@ -279,7 +279,7 @@
   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
@@ -290,7 +290,7 @@
       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();
     hooks.useEffect(() => {
@@ -359,7 +359,7 @@
   }
   const button$4 = "_button_kpmyt_1";
   const svg$7 = "_svg_kpmyt_14";
-  const defaultStyles$n = {
+  const defaultStyles$o = {
     button: button$4,
     svg: svg$7
   };
@@ -368,7 +368,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$n
+      ...defaultStyles$o
     }, styles2);
     return jsxRuntime.jsx("button", {
       class: styles2.button,
@@ -386,7 +386,7 @@
   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
@@ -396,7 +396,7 @@
     pulse: pulse2 = false,
     styles: styles2
   }) => {
-    styles2 = mergeStyles(defaultStyles$m, styles2);
+    styles2 = mergeStyles(defaultStyles$n, styles2);
     return jsxRuntime.jsx("svg", {
       style: styles2.svg,
       fill: "none",
@@ -416,7 +416,7 @@
     });
   };
   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 : {};
@@ -766,7 +766,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$l
+      ...defaultStyles$m
     }, styles2);
     let timeSince = dayjs(timeStamp).fromNow();
     return jsxRuntime.jsx("span", {
@@ -776,7 +776,7 @@
   };
   const pageContainer = "_pageContainer_1s0yq_9";
   const sideBorders = "_sideBorders_1s0yq_42";
-  const defaultStyles$k = {
+  const defaultStyles$l = {
     pageContainer,
     sideBorders
   };
@@ -788,14 +788,14 @@
     const {
       pageContainer: pageContainer2,
       sideBorders: sideBordersStyle
-    } = mergeStyles(defaultStyles$k, styles2);
+    } = mergeStyles(defaultStyles$l, styles2);
     return jsxRuntime.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({
@@ -813,7 +813,7 @@
     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 jsxRuntime.jsx("div", {
       className: styles2.wrapper,
@@ -828,7 +828,7 @@
   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,
@@ -841,7 +841,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$i
+      ...defaultStyles$j
     }, styles2);
     let cornerSize = squareSize * 0.625;
     let cornerMargin = squareSize < 100 ? squareSize / 6 : 10;
@@ -879,7 +879,7 @@
   const stackedGridRotateItems90 = "_stackedGridRotateItems90_1e05o_19";
   const stackedGridRotateItems180 = "_stackedGridRotateItems180_1e05o_25";
   const stackedGridRotateItems270 = "_stackedGridRotateItems270_1e05o_31";
-  const defaultStyles$h = {
+  const defaultStyles$i = {
     stackedGridContainer,
     stackedGridRotateItems0,
     stackedGridRotateItems90,
@@ -918,7 +918,7 @@
       width: containerWidth,
       transform: containerFlip
     };
-    styles2 = mergeStyles(defaultStyles$h, styles2);
+    styles2 = mergeStyles(defaultStyles$i, styles2);
     return jsxRuntime.jsx("div", {
       style: flexStyles,
       className: `${styles2.stackedGridContainer} ${styles2[itemRotateClass]}`,
@@ -927,7 +927,7 @@
   };
   const svg$4 = "_svg_l2fsl_9";
   const squareFill = "_squareFill_l2fsl_16";
-  const defaultStyles$g = {
+  const defaultStyles$h = {
     svg: svg$4,
     squareFill
   };
@@ -937,7 +937,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$g
+      ...defaultStyles$h
     }, styles2);
     return jsxRuntime.jsx("svg", {
       width: size,
@@ -955,7 +955,7 @@
   };
   const button$3 = "_button_1fees_1";
   const icon = "_icon_1fees_6";
-  const defaultStyles$f = {
+  const defaultStyles$g = {
     button: button$3,
     icon
   };
@@ -965,7 +965,7 @@
     styles: styles2,
     onClick
   }) {
-    styles2 = mergeStyles(defaultStyles$f, styles2);
+    styles2 = mergeStyles(defaultStyles$g, styles2);
     return jsxRuntime.jsx("button", {
       className: styles2.button,
       disabled,
@@ -991,7 +991,7 @@
   }
   const button$2 = "_button_19t7j_1";
   const buttonInner$1 = "_buttonInner_19t7j_6";
-  const defaultStyles$e = {
+  const defaultStyles$f = {
     button: button$2,
     buttonInner: buttonInner$1
   };
@@ -1001,7 +1001,7 @@
     styles: styles2,
     children
   }) {
-    styles2 = mergeStyles(defaultStyles$e, styles2);
+    styles2 = mergeStyles(defaultStyles$f, styles2);
     return jsxRuntime.jsx("button", {
       className: styles2.button,
       "data-type": type,
@@ -1016,7 +1016,7 @@
   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,
@@ -1027,7 +1027,7 @@
     onClick,
     styles: styles2
   }) {
-    styles2 = mergeStyles(defaultStyles$d, styles2);
+    styles2 = mergeStyles(defaultStyles$e, styles2);
     return jsxRuntime.jsx("button", {
       className: [styles2.button, border && styles2.buttonBorder].join(" "),
       onClick,
@@ -1170,7 +1170,7 @@
   const headerCellButton = "_headerCellButton_1b75c_39";
   const bodyRow = "_bodyRow_1b75c_48";
   const bodyCell = "_bodyCell_1b75c_53";
-  const defaultStyles$c = {
+  const defaultStyles$d = {
     table,
     hideHeader,
     hideHeaderNoBorder,
@@ -1211,7 +1211,7 @@
         };
       });
     };
-    styles2 = mergeStyles(defaultStyles$c, styles2);
+    styles2 = mergeStyles(defaultStyles$d, styles2);
     return jsxRuntime.jsxs("table", {
       className: styles2.table,
       children: [jsxRuntime.jsx("thead", {
@@ -1344,7 +1344,7 @@
   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,
@@ -1396,7 +1396,7 @@
       return positionLabels(labels);
     }, [lines, y2Label2, yScale]);
     styles2 = mergeStyles({
-      ...defaultStyles$b
+      ...defaultStyles$c
     }, styles2);
     const chart = jsxRuntime.jsx("svg", {
       class: styles2.svg,
@@ -1489,6 +1489,7 @@
       const x = clientX - rect.left;
       const y = clientY - rect.top;
       requestAnimationFrame(() => {
+        setTargetRect(rect);
         setPosition({
           x,
           y
@@ -1619,7 +1620,7 @@
     });
   }
   const tooltip = "_tooltip_11t5d_1";
-  const defaultStyles$a = {
+  const defaultStyles$b = {
     tooltip
   };
   const TooltipType = {
@@ -1647,7 +1648,7 @@
       hoverActive
     } = useTooltipTarget(targetElement, trackPosition);
     const tooltipRef = hooks.useRef(null);
-    styles2 = mergeStyles(defaultStyles$a, styles2);
+    styles2 = mergeStyles(defaultStyles$b, styles2);
     hooks.useEffect(() => {
       let element = null;
       if (typeof refOrSelector === "string") {
@@ -1701,17 +1702,18 @@
     }) : 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;
     }
@@ -1742,7 +1744,7 @@
   }
   const text$2 = "_text_1b8t2_1";
   const container$3 = "_container_1b8t2_10";
-  const defaultStyles$9 = {
+  const defaultStyles$a = {
     text: text$2,
     container: container$3
   };
@@ -1753,7 +1755,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$9
+      ...defaultStyles$a
     }, styles2);
     let hasChanged = next2 !== previous2;
     return jsxRuntime.jsx("div", {
@@ -1787,7 +1789,7 @@
   const displayRow = "_displayRow_w8o28_65";
   const displayColumn = "_displayColumn_w8o28_71";
   const topRow = "_topRow_w8o28_75";
-  const defaultStyles$8 = {
+  const defaultStyles$9 = {
     toplineResult,
     primaryname,
     secondaryname,
@@ -1812,7 +1814,7 @@
     showInfoButton = false
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$8
+      ...defaultStyles$9
     }, styles2);
     const displayStyle = displayRow2 ? styles2.displayRow : styles2.displayColumn;
     return !secondaryName ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -1879,7 +1881,7 @@
   const borderTop = "_borderTop_12aiu_52";
   const header = "_header_12aiu_56";
   const content = "_content_12aiu_76";
-  const defaultStyles$7 = {
+  const defaultStyles$8 = {
     section,
     borderTop,
     header,
@@ -1892,7 +1894,7 @@
     backgroundColor = "transparent"
   }, ref) => {
     styles2 = mergeStyles({
-      ...defaultStyles$7
+      ...defaultStyles$8
     }, styles2);
     return jsxRuntime.jsxs("section", {
       ref,
@@ -1912,7 +1914,7 @@
   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
@@ -1927,12 +1929,13 @@
     columnPadding,
     styles: styles2
   }) => {
-    styles2 = mergeStyles(defaultStyles$6, styles2);
+    styles2 = mergeStyles(defaultStyles$7, styles2);
     const yScale = d3Scale.scaleLinear([maxValue, minValue], [0, chartHeight]);
     const totalColumnWidth = Number(columnWidth) + Number(columnPadding.left) + Number(columnPadding.right);
+    let marginBottom = minValue < 0 ? 0 : 40;
     return jsxRuntime.jsxs("svg", {
       width: chartWidth,
-      height: chartHeight,
+      height: chartHeight + marginBottom,
       children: [columns.map((column, index2) => {
         const getHeight = (input2) => {
           return yScale(0) - yScale(input2);
@@ -1970,7 +1973,7 @@
   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,
@@ -1989,7 +1992,7 @@
     abbreviation
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$5
+      ...defaultStyles$6
     }, styles2);
     return jsxRuntime.jsx("div", {
       class: styles2.container,
@@ -2257,6 +2260,33 @@
     return feature;
   }
   const MapContext = preact.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,
@@ -2276,9 +2306,47 @@
       return config.projection.fitSize([contentSize.width, contentSize.height], bboxFeature(config.bounds));
     }, [contentSize, config]);
     const path2 = d3Geo.geoPath().projection(projection);
+    const layerSet = hooks.useRef(/* @__PURE__ */ new Set());
+    const layers = hooks.useRef([]);
+    const updateLayers = hooks.useCallback((layerSet2) => {
+      const _layers = Array.from(layerSet2.current);
+      _layers.sort((a, b) => {
+        return b.zIndex - a.zIndex;
+      });
+      layers.current = _layers;
+    }, []);
+    const registerLayer = hooks.useCallback((layer) => {
+      layerSet.current.add(layer);
+      updateLayers(layerSet);
+    }, [updateLayers]);
+    const unregisterLayer = hooks.useCallback((layer) => {
+      layerSet.current.delete(layer);
+      updateLayers(layerSet);
+    }, [updateLayers]);
+    const findFeatureAtPoint = hooks.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 = hooks.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 = hooks.useCallback(() => {
+      return calculateScale(getVisibleBounds(), contentSize.width, contentSize.height);
+    }, [getVisibleBounds, contentSize]);
     const context = {
       id,
-      mapRef,
       projection,
       config,
       path: path2,
@@ -2290,15 +2358,20 @@
       padding,
       zoom,
       extent: [[0, 0], [width, height]],
-      selectedFeature
+      selectedFeature,
+      getZoomScale,
+      registerLayer,
+      unregisterLayer,
+      findFeatureAtPoint
     };
+    mapRef.current = context;
     return jsxRuntime.jsx(MapContext.Provider, {
       value: context,
       children
     });
   }
   const path$1 = "_path_1cwd5_9";
-  const defaultStyles$4 = {
+  const defaultStyles$5 = {
     path: path$1
   };
   function CompositionBorders({
@@ -2307,7 +2380,7 @@
     const {
       projection
     } = hooks.useContext(MapContext);
-    styles2 = mergeStyles(defaultStyles$4, styles2);
+    styles2 = mergeStyles(defaultStyles$5, styles2);
     return jsxRuntime.jsx("path", {
       className: styles2.path,
       d: projection.getCompositionBorders()
@@ -2318,7 +2391,6 @@
   }) {
     const {
       id,
-      mapRef,
       config,
       size,
       selectedFeature,
@@ -2326,7 +2398,6 @@
     } = hooks.useContext(MapContext);
     return jsxRuntime.jsx("svg", {
       id,
-      ref: mapRef,
       width: size.width,
       height: size.height,
       viewBox: `0 0 ${size.width} ${size.height}`,
@@ -2376,9 +2447,22 @@
     fill = null,
     stroke = null,
     strokeWidth = 1,
+    zIndex = 0,
     styles: styles2
   }) {
     const context = hooks.useContext(MapContext);
+    hooks.useEffect(() => {
+      function findFeatureAtPoint(point) {
+      }
+      const layer = {
+        zIndex,
+        findFeatureAtPoint
+      };
+      context.registerLayer(layer);
+      return () => {
+        context.unregisterLayer(layer);
+      };
+    }, [context, zIndex]);
     return jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: features.map((d2, index2) => {
         return jsxRuntime.jsx("path", {
@@ -2459,9 +2543,34 @@
     fill = null,
     stroke = null,
     strokeWidth = 1,
+    zIndex = 0,
     styles: styles2
   }) {
     const context = hooks.useContext(MapContext);
+    hooks.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 jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: features.map((d2, index2) => {
         const [cx, cy] = context.projection(d2.geometry.coordinates);
@@ -2546,34 +2655,12 @@
         setIsReady(true);
       }
     }, [isReady]);
-    hooks.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 preact.toChildArray(children)) {
-        if (Object.prototype.hasOwnProperty.call(child.props, "features")) {
-          const features = child.props.features;
-          for (const feature of features) {
-            if (d3Geo.geoContains(feature, coordinates)) {
-              return feature;
-            }
-          }
-        }
-      }
-      return null;
-    }
+    const mapRef = hooks.useRef();
+    hooks.useImperativeHandle(ref, () => ({
+      isReady,
+      getContainer: () => containerRef.current,
+      getContext: () => mapRef.current
+    }), [isReady]);
     const containerSize = useContainerSize(containerRef);
     const containerStyle = hooks.useMemo(() => {
       const style = {};
@@ -2583,7 +2670,6 @@
         style["height"] = height;
       return style;
     }, [width, height]);
-    const mapRef = hooks.useRef();
     const renderSVG = containerSize && !config.drawToCanvas;
     return jsxRuntime.jsx("div", {
       ref: containerRef,
@@ -2599,14 +2685,16 @@
         selectedFeature,
         zoom,
         children: jsxRuntime.jsx(SVGRenderer, {
-          children
+          children: preact.toChildArray(children).map((child, index2) => preact.cloneElement(child, {
+            zIndex: index2
+          }))
         })
       })
     });
   });
   const container = "_container_azu4a_1";
   const paragraph = "_paragraph_azu4a_12";
-  const defaultStyles$3 = {
+  const defaultStyles$4 = {
     container,
     paragraph
   };
@@ -2619,7 +2707,7 @@
     styles: styles2
   }) {
     styles2 = mergeStyles({
-      ...defaultStyles$3
+      ...defaultStyles$4
     }, styles2);
     return jsxRuntime.jsxs("div", {
       class: styles2.container,
@@ -2662,7 +2750,7 @@
   const suggestion = "_suggestion_g5w44_36";
   const selected = "_selected_g5w44_59";
   const highlighted = "_highlighted_g5w44_63";
-  const defaultStyles$2 = {
+  const defaultStyles$3 = {
     searchContainer,
     input,
     searchIcon,
@@ -2683,7 +2771,7 @@
     styles: styles2
   }) {
     var _a, _b, _c;
-    styles2 = mergeStyles(defaultStyles$2, styles2);
+    styles2 = mergeStyles(defaultStyles$3, styles2);
     const inputRef = hooks.useRef(null);
     const [selectedIndex, setSelectedIndex] = hooks.useState(-1);
     const [suggestions2, setSuggestions] = hooks.useState();
@@ -2795,7 +2883,7 @@
   const refreshIndicator = "_refreshIndicator_u6lji_1";
   const liveText = "_liveText_u6lji_8";
   const refreshText = "_refreshText_u6lji_9";
-  const defaultStyles$1 = {
+  const defaultStyles$2 = {
     refreshIndicator,
     liveText,
     refreshText
@@ -2804,7 +2892,7 @@
     text: text2,
     styles: styles2
   }) {
-    styles2 = mergeStyles(defaultStyles$1, styles2);
+    styles2 = mergeStyles(defaultStyles$2, styles2);
     return jsxRuntime.jsxs("div", {
       className: styles2.refreshIndicator,
       children: [jsxRuntime.jsx(CircleIcon, {
@@ -2818,6 +2906,34 @@
       })]
     });
   }
+  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 jsxRuntime.jsx("div", {
+      className: styles2.grid,
+      "data-grid-type": type,
+      children: preact.toChildArray(children).map((child, index2) => {
+        return jsxRuntime.jsx("div", {
+          className: styles2.gridItem,
+          children: child
+        }, index2);
+      })
+    });
+  }
   const coalitionsWrapper = "_coalitionsWrapper_1ahqy_9";
   const coalitionsContainer = "_coalitionsContainer_1ahqy_14";
   const coalition = "_coalition_1ahqy_9";
@@ -3112,6 +3228,7 @@
   exports2.Container = Container;
   exports2.ControlChange = ControlChange;
   exports2.GradientIcon = GradientIcon;
+  exports2.GridType = GridType;
   exports2.InfoButton = InfoButton;
   exports2.LegendItem = LegendItem;
   exports2.Map = Map$1;
@@ -3122,6 +3239,7 @@
   exports2.Projection = Projection;
   exports2.RefreshIndicator = RefreshIndicator;
   exports2.RelativeTimeSentence = RelativeTimeSentence;
+  exports2.ResponsiveGrid = ResponsiveGrid;
   exports2.ResultSummary = ResultSummary;
   exports2.SearchInput = SearchInput;
   exports2.SlopeChart = SlopeChart;