@guardian/interactive-component-library 0.1.0-alpha.34 → 0.1.0-alpha.36

package/dist/interactive-component-library.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
-import { useRef, useMemo, useCallback, useEffect, useState, useLayoutEffect, useContext, useImperativeHandle } from "preact/hooks";
-import { render, toChildArray, createElement, cloneElement, createContext } from "preact";
-import { useSyncExternalStore, forwardRef, createPortal } from "preact/compat";
+import { useRef, useMemo, useId, useState, useLayoutEffect, useEffect, useCallback, useContext, useImperativeHandle } from "preact/hooks";
+import { forwardRef, createPortal } from "preact/compat";
 import { scaleLinear as scaleLinear$1 } from "d3-scale";
+import { toChildArray, createElement, cloneElement, createContext } from "preact";
 import { geoStream, geoAlbers, geoPath, geoContains, geoMercator } from "d3-geo";
 import { zoomIdentity, zoom, ZoomTransform } from "d3-zoom";
 import { namespace, matcher, selector, selectorAll, selection, style, select } from "d3-selection";
@@ -306,60 +306,6 @@ function StackedBar({
     children: [content2, labelType === LabelType.hanging && !hideLabels && hangingLabelConfig.map((config, i) => renderLabel(config, i))]
   });
 }
-function shouldUpdate(oldState, newState) {
-  if (oldState === newState)
-    return false;
-  if (isObj(oldState) && isObj(newState)) {
-    for (let key in newState) {
-      if (oldState[key] !== newState[key])
-        return true;
-    }
-    return false;
-  }
-  return true;
-}
-function isObj(obj) {
-  return typeof obj === "object" && !Array.isArray(obj) && obj !== null;
-}
-function createStore(initialStore) {
-  let store = initialStore;
-  const listeners = /* @__PURE__ */ new Set();
-  function useStore(selectorFn = (store2) => store2) {
-    const subscribe = useCallback((updater) => {
-      const listener = {
-        updater,
-        selectorFn
-      };
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    }, [selectorFn]);
-    const syncedStore = useSyncExternalStore(subscribe, getStore, getServerStore);
-    return selectorFn(syncedStore);
-  }
-  function setStore(action) {
-    const oldStore = store;
-    store = action instanceof Function ? action(store) : action;
-    listeners.forEach(({
-      selectorFn,
-      updater
-    }) => {
-      const oldState = selectorFn(oldStore);
-      const newState = selectorFn(store);
-      if (shouldUpdate(oldState, newState))
-        updater(() => newState);
-    });
-  }
-  function getStore() {
-    return store;
-  }
-  function getServerStore() {
-    return initialStore;
-  }
-  return [useStore, setStore, getStore];
-}
-const [useGradients, setGradients, getGradients] = createStore({});
 const svg$8 = "_svg_1cajk_6";
 const previous = "_previous_1cajk_12";
 const next = "_next_1cajk_16";
@@ -375,72 +321,34 @@ const GradientIcon = (props) => {
     styles: styles2
   } = props;
   styles2 = mergeStyles(defaultStyles$t, styles2);
-  const gradientId = `gv-gradient-def-${previous2}-${next2}`;
-  const gradients = useGradients();
-  useEffect(() => {
-    setGradients((current) => {
-      current[gradientId] = {
-        id: gradientId,
-        ...props
-      };
-      return current;
-    });
-  }, [gradientId, props]);
-  useEffect(() => {
-    let container2 = document.getElementById("gv-gradient-defs");
-    if (!container2) {
-      container2 = document.createElement("div");
-      container2.id = "gv-gradient-defs";
-      document.body.prepend(container2);
-    }
-    render(jsx(GradientDefs, {
-      gradients: Object.values(gradients)
-    }), container2);
-  }, [gradients]);
-  return jsx("svg", {
+  const gradientId = useId();
+  return jsxs("svg", {
     class: styles2.svg,
     width: "24",
     height: "11",
     viewBox: "0 0 24 11",
     xmlns: "http://www.w3.org/2000/svg",
-    children: jsx("path", {
+    children: [jsx("defs", {
+      children: jsxs("linearGradient", {
+        id: gradientId,
+        x1: "5.5",
+        y1: "5.5",
+        x2: "12",
+        y2: "5.5",
+        gradientUnits: "userSpaceOnUse",
+        children: [jsx("stop", {
+          class: `${styles2 == null ? void 0 : styles2.previous} stop-color--${previous2}`
+        }), jsx("stop", {
+          class: `${styles2 == null ? void 0 : styles2.next} stop-color--${next2}`,
+          offset: "1"
+        })]
+      })
+    }), jsx("path", {
       d: "M0 5.434C0 2.43288 2.43288 0 5.434 0H5.69626C6.85818 0 7.9797 0.426401 8.84813 1.19834C10.6456 2.79612 13.3544 2.79612 15.1519 1.19834C16.0203 0.426401 17.1418 0 18.3037 0L18.566 0C21.5671 0 24 2.43288 24 5.434V5.566C24 8.56712 21.5671 11 18.566 11H18.3037C17.1418 11 16.0203 10.5736 15.1519 9.80166C13.3544 8.20388 10.6456 8.20388 8.84813 9.80166C7.9797 10.5736 6.85818 11 5.69626 11H5.434C2.43288 11 0 8.56712 0 5.566V5.434Z",
       fill: `url(#${gradientId})`
-    })
+    })]
   });
 };
-function GradientDefs({
-  gradients
-}) {
-  return jsx("svg", {
-    width: "24",
-    height: "11",
-    viewBox: "0 0 24 11",
-    children: jsx("defs", {
-      children: gradients.map(({
-        id: id2,
-        previous: previous2,
-        next: next2,
-        styles: styles2
-      }) => {
-        return jsxs("linearGradient", {
-          id: id2,
-          x1: "5.5",
-          y1: "5.5",
-          x2: "12",
-          y2: "5.5",
-          gradientUnits: "userSpaceOnUse",
-          children: [jsx("stop", {
-            class: `${styles2 == null ? void 0 : styles2.previous} stop-color--${previous2}`
-          }), jsx("stop", {
-            class: `${styles2 == null ? void 0 : styles2.next} stop-color--${next2}`,
-            offset: "1"
-          })]
-        }, id2);
-      })
-    })
-  });
-}
 const unit = "_unit_mo5d9_1";
 const container$6 = "_container_mo5d9_6";
 const defaultStyles$s = {
@@ -489,7 +397,8 @@ const Waffle = ({
   },
   onClick = () => {
   },
-  styles: styles2
+  styles: styles2,
+  svgId
 }) => {
   const containerRef = useRef();
   const containerSize = useContainerSize(containerRef);
@@ -506,6 +415,7 @@ const Waffle = ({
     children: containerSize && jsx("svg", {
       viewBox: `0 0 ${width} ${height}`,
       class: styles2.svg,
+      id: svgId,
       children: jsx("g", {
         children: units.map((unit2, j) => {
           let attributes;
@@ -1223,10 +1133,10 @@ function Button({
     })
   });
 }
-const button$4 = "_button_nr8bh_1";
-const buttonBorder = "_buttonBorder_nr8bh_11";
-const svg$3 = "_svg_nr8bh_19";
-const path$3 = "_path_nr8bh_25";
+const button$4 = "_button_1bibm_1";
+const buttonBorder = "_buttonBorder_1bibm_14";
+const svg$3 = "_svg_1bibm_22";
+const path$3 = "_path_1bibm_29";
 const defaultStyles$h = {
   button: button$4,
   buttonBorder,
@@ -1246,11 +1156,12 @@ function CloseButton({
       className: styles2.svg,
       viewBox: "0 0 17 17",
       fill: "none",
+      preserveAspectRatio: "xMidYMid meet",
       xmlns: "http://www.w3.org/2000/svg",
       children: jsx("path", {
         className: styles2.path,
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M8.32497 10.025L15.5499 16.6499L16.6249 15.5749L10.025 8.32497L16.6249 1.075L15.5499 0L8.32497 6.62498L1.075 0.0249999L0 1.1L6.62498 8.32497L0 15.5499L1.075 16.6249L8.32497 10.025Z"
       })
     })
@@ -1468,6 +1379,7 @@ function Table({
         children: table2.columns.map((column, index) => {
           var _a;
           return jsx("th", {
+            scope: "col",
             className: mergeStyles(styles2.headerCell, (_a = column.styles) == null ? void 0 : _a.headerCell),
             children: jsx(HeaderCell, {
               styles: mergeStyles(styles2, column.styles),
@@ -1553,7 +1465,8 @@ const SlopeChart = ({
     right: 24,
     top: 20,
     bottom: 20
-  }
+  },
+  svgId
 }) => {
   const wrapperRef = useRef(null);
   const containerSize = useContainerSize(wrapperRef);
@@ -1584,6 +1497,7 @@ const SlopeChart = ({
     class: styles2.svg,
     width,
     height,
+    id: svgId,
     children: jsxs("g", {
       transform: `translate(${padding.left} ${padding.top})`,
       children: [jsxs("g", {
@@ -1820,25 +1734,23 @@ const ControlChange = ({
     ...defaultStyles$c
   }, styles2);
   let hasChanged = next2 !== previous2;
-  return jsx("div", {
+  return jsxs("div", {
     class: styles2.container,
-    children: jsxs(Fragment, {
-      children: [hasChanged ? jsx(GradientIcon, {
-        previous: previous2,
-        next: next2,
-        styles: {
-          previous: styles2.previous,
-          next: styles2.next
-        }
-      }) : jsx(CircleIcon, {
-        styles: {
-          circle: `fill-color--${next2}`
-        }
-      }), jsx("strong", {
-        className: styles2.text,
-        children: text2
-      })]
-    })
+    children: [hasChanged ? jsx(GradientIcon, {
+      previous: previous2,
+      next: next2,
+      styles: {
+        previous: styles2.previous,
+        next: styles2.next
+      }
+    }) : jsx(CircleIcon, {
+      styles: {
+        circle: `fill-color--${next2}`
+      }
+    }), jsx("strong", {
+      className: styles2.text,
+      children: text2
+    })]
   });
 };
 const wrapper = "_wrapper_8vo05_1";
@@ -2155,14 +2067,14 @@ function SearchIcon() {
     })
   });
 }
-const searchContainer = "_searchContainer_116es_1";
-const input = "_input_116es_5";
-const searchIcon = "_searchIcon_116es_27";
-const clearButton = "_clearButton_116es_36";
-const suggestions = "_suggestions_116es_42";
-const suggestion = "_suggestion_116es_42";
-const selected$1 = "_selected_116es_68";
-const highlighted = "_highlighted_116es_72";
+const searchContainer = "_searchContainer_1px2g_1";
+const input = "_input_1px2g_5";
+const searchIcon = "_searchIcon_1px2g_27";
+const clearButton = "_clearButton_1px2g_36";
+const suggestions = "_suggestions_1px2g_42";
+const suggestion = "_suggestion_1px2g_42";
+const selected$1 = "_selected_1px2g_68";
+const highlighted = "_highlighted_1px2g_72";
 const defaultStyles$5 = {
   searchContainer,
   input,
@@ -2419,13 +2331,13 @@ var d = (E) => {
     return cloneElement(t, { className: i });
   });
 };
-const transitionContainer = "_transitionContainer_15ioc_1";
-const blur = "_blur_15ioc_12";
-const modalBox = "_modalBox_15ioc_17";
-const enter = "_enter_15ioc_26";
-const exitDone = "_exitDone_15ioc_27";
-const enterActive = "_enterActive_15ioc_38";
-const exit = "_exit_15ioc_27";
+const transitionContainer = "_transitionContainer_1syip_1";
+const blur = "_blur_1syip_12";
+const modalBox = "_modalBox_1syip_17";
+const enter = "_enter_1syip_26";
+const exitDone = "_exitDone_1syip_27";
+const enterActive = "_enterActive_1syip_38";
+const exitActive = "_exitActive_1syip_49";
 const styles$6 = {
   transitionContainer,
   blur,
@@ -2433,7 +2345,7 @@ const styles$6 = {
   enter,
   exitDone,
   enterActive,
-  exit
+  exitActive
 };
 function Modal({
   visible = false,
@@ -3871,7 +3783,7 @@ const SVGMap = forwardRef(({
   const renderSVG = containerSize && !config.drawToCanvas;
   const zoomControl2 = organisedChildren.controls["ZoomControl"];
   const renderZoomControl = zoomControl2 && zoom2.enabled;
-  return jsxs("div", {
+  return jsxs("figure", {
     ref: containerRef,
     className: styles$4.container,
     style: containerStyle,
@@ -6380,7 +6292,7 @@ const Map$1 = forwardRef(({
       map.setLayers(layers);
     }
   }, [map, layers]);
-  return jsx("div", {
+  return jsx("figure", {
     ref: targetRef,
     className: styles$3.mapContainer,
     children: jsxs("div", {
@@ -6407,10 +6319,10 @@ function IconMinus() {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: jsx("path", {
-      "fill-rule": "evenodd",
-      "clip-rule": "evenodd",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
       d: "M0 0.75V3.24999H21.9999V0.75H0Z",
-      fill: "#121212"
+      fill: "var(--news-grey-01)"
     })
   });
 }
@@ -6422,10 +6334,10 @@ function IconPlus() {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: jsx("path", {
-      "fill-rule": "evenodd",
-      "clip-rule": "evenodd",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
       d: "M9.79997 12.2L10.225 21.9999H11.75L12.2 12.2L21.9999 11.75V10.225L12.2 9.79997L11.75 0H10.225L9.79997 9.79997L0 10.225V11.75L9.79997 12.2Z",
-      fill: "#121212"
+      fill: "var(--news-grey-01)"
     })
   });
 }
@@ -6439,8 +6351,8 @@ function IconReset({
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: jsx("path", {
-      "fill-rule": "evenodd",
-      "clip-rule": "evenodd",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
       d: "M32.107 33.107L26.5535 27.5535C24.7984 29.0775 22.5069 30 20 30L19.9916 30L19.9811 30C17.4476 30 15.1269 29.0482 13.3721 27.4882C11.3038 25.6561 10 22.9803 10 20H11.8C11.8 24.5287 15.4713 28.2 20 28.2C20.0567 28.2 20.1134 28.1994 20.1698 28.1983C24.5716 28.0965 28.1587 24.4465 28.1587 19.9772C28.1587 15.467 24.4685 11.7995 19.9811 11.7995C17.407 11.7995 15.1975 12.9385 13.6713 14.7608L16.9742 15.3075V16.4465L11.1428 16.4465L10.71 16.0137V10H11.8262L12.3956 13.4396C14.218 11.3212 16.9059 10 19.9811 10C25.5164 10 30.0039 14.4647 30.0039 19.9772C30.0039 21.8429 29.4982 23.5854 28.6171 25.0771C28.4764 25.3155 28.326 25.5474 28.1666 25.7725L33.8221 31.428C33.2844 32.0212 32.7116 32.5819 32.107 33.107Z",
       fill
     })
@@ -6485,7 +6397,7 @@ function ZoomControl({
       onClick: _onReset,
       disabled: !resetEnabled,
       children: jsx(IconReset, {
-        fill: resetEnabled ? "var(--primary-text-color)" : "var(--news-grey-02)"
+        fill: resetEnabled ? "var(--primary-text-color)" : "var(--news-grey-03)"
       })
     })]
   });
@@ -7555,7 +7467,7 @@ function CoalitionsTracker({
         position: "relative",
         zIndex: 2
       },
-      children: [jsx("h4", {
+      children: [jsx("h3", {
         className: styles2.title,
         children: list.title
       }), jsx("p", {