@guardian/interactive-component-library 0.1.0-alpha.41 → 0.1.0-alpha.43

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$w = {
+  const defaultStyles$x = {
     svg: svg$9,
     group,
     rotated,
@@ -48,13 +48,13 @@
     styles: styles2
   }) {
     const defaultStylesCopy = {
-      ...defaultStyles$w
+      ...defaultStyles$x
     };
     if (active2) {
-      defaultStylesCopy.path = mergeStyles(defaultStyles$w.path, defaultStyles$w.active);
+      defaultStylesCopy.path = mergeStyles(defaultStyles$x.path, defaultStyles$x.active);
     }
     if (direction === DIRECTION.up) {
-      defaultStylesCopy.group = mergeStyles(defaultStyles$w.group, defaultStyles$w.rotated);
+      defaultStylesCopy.group = mergeStyles(defaultStyles$x.group, defaultStyles$x.rotated);
     }
     styles2 = mergeStyles(defaultStylesCopy, styles2);
     return size === SIZE.small ? jsxRuntime.jsx(SmallChevron, {
@@ -108,7 +108,7 @@
   const dot = "_dot_jzalm_6";
   const circle$2 = "_circle_jzalm_13";
   const text$2 = "_text_jzalm_17";
-  const defaultStyles$v = {
+  const defaultStyles$w = {
     container: container$7,
     dot,
     circle: circle$2,
@@ -125,10 +125,10 @@
     abbreviation
   }) => {
     const defaultStylesCopy = {
-      ...defaultStyles$v
+      ...defaultStyles$w
     };
     if (dotType === DOT_TYPE.round) {
-      defaultStylesCopy.dot = mergeStyles(defaultStyles$v.dot, defaultStyles$v.circle);
+      defaultStylesCopy.dot = mergeStyles(defaultStyles$w.dot, defaultStyles$w.circle);
     }
     styles2 = mergeStyles(defaultStylesCopy, styles2);
     return jsxRuntime.jsxs("div", {
@@ -145,7 +145,7 @@
   const label$1 = "_label_1jxh9_5";
   const labelStroke = "_labelStroke_1jxh9_11";
   const backgroundRect = "_backgroundRect_1jxh9_17";
-  const defaultStyles$u = {
+  const defaultStyles$v = {
     bar: bar$2,
     label: label$1,
     labelStroke,
@@ -214,7 +214,7 @@
     const rectElements = hooks.useRef([]);
     const textElements = hooks.useRef([]);
     styles2 = mergeStyles({
-      ...defaultStyles$u
+      ...defaultStyles$v
     }, styles2);
     const svgHeight = labelType === LabelType.hanging && !hideLabels ? height + 20 : height;
     const cleanBorderAbbr = (abbrText) => abbrText.split("-")[0];
@@ -305,7 +305,7 @@
   const svg$8 = "_svg_1cajk_6";
   const previous = "_previous_1cajk_12";
   const next = "_next_1cajk_16";
-  const defaultStyles$t = {
+  const defaultStyles$u = {
     svg: svg$8,
     previous,
     next
@@ -316,7 +316,7 @@
       next: next2,
       styles: styles2
     } = props;
-    styles2 = mergeStyles(defaultStyles$t, styles2);
+    styles2 = mergeStyles(defaultStyles$u, styles2);
     const gradientId = hooks.useId();
     return jsxRuntime.jsxs("svg", {
       class: styles2.svg,
@@ -347,7 +347,7 @@
   };
   const unit = "_unit_mo5d9_1";
   const container$6 = "_container_mo5d9_6";
-  const defaultStyles$s = {
+  const defaultStyles$t = {
     unit,
     container: container$6
   };
@@ -404,7 +404,7 @@
     const unitWidth = width / columns;
     const unitHeight = unitWidth;
     const height = numberOfRows * unitHeight;
-    styles2 = mergeStyles(defaultStyles$s, styles2);
+    styles2 = mergeStyles(defaultStyles$t, styles2);
     return jsxRuntime.jsx("div", {
       ref: containerRef,
       className: styles2.container,
@@ -447,7 +447,7 @@
   };
   const button$7 = "_button_oqopj_1";
   const svg$7 = "_svg_oqopj_15";
-  const defaultStyles$r = {
+  const defaultStyles$s = {
     button: button$7,
     svg: svg$7
   };
@@ -456,7 +456,7 @@
     styles: styles2
   }, ref) => {
     styles2 = mergeStyles({
-      ...defaultStyles$r
+      ...defaultStyles$s
     }, styles2);
     return jsxRuntime.jsx("button", {
       ref,
@@ -475,7 +475,7 @@
   const svg$6 = "_svg_1v49v_1";
   const circle$1 = "_circle_1v49v_5";
   const pulse = "_pulse_1v49v_9";
-  const defaultStyles$q = {
+  const defaultStyles$r = {
     svg: svg$6,
     circle: circle$1,
     pulse
@@ -485,7 +485,7 @@
     pulse: pulse2 = false,
     styles: styles2
   }) => {
-    styles2 = mergeStyles(defaultStyles$q, styles2);
+    styles2 = mergeStyles(defaultStyles$r, styles2);
     return jsxRuntime.jsx("svg", {
       style: styles2.svg,
       fill: "none",
@@ -505,7 +505,7 @@
     });
   };
   const dateStampText = "_dateStampText_wczs5_1";
-  const defaultStyles$p = {
+  const defaultStyles$q = {
     dateStampText
   };
   var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -881,7 +881,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$p
+      ...defaultStyles$q
     }, styles2);
     let timeSince = dayjs(timeStamp).fromNow();
     return jsxRuntime.jsx("span", {
@@ -891,7 +891,7 @@
   };
   const pageContainer = "_pageContainer_1s0yq_9";
   const sideBorders = "_sideBorders_1s0yq_42";
-  const defaultStyles$o = {
+  const defaultStyles$p = {
     pageContainer,
     sideBorders
   };
@@ -903,7 +903,7 @@
     const {
       pageContainer: pageContainer2,
       sideBorders: sideBordersStyle
-    } = mergeStyles(defaultStyles$o, styles2);
+    } = mergeStyles(defaultStyles$p, styles2);
     return jsxRuntime.jsx("div", {
       className: [pageContainer2, sideBorders2 && sideBordersStyle].join(" "),
       children
@@ -912,7 +912,7 @@
   const wrapper$1 = "_wrapper_5oj1x_9";
   const bar$1 = "_bar_5oj1x_14";
   const zero$1 = "_zero_5oj1x_19";
-  const defaultStyles$n = {
+  const defaultStyles$o = {
     wrapper: wrapper$1,
     bar: bar$1,
     zero: zero$1
@@ -933,7 +933,7 @@
     let thisColor = ` bg-color--${party}`;
     let zeroStyles = ` height: ${height};`;
     styles2 = mergeStyles({
-      ...defaultStyles$n
+      ...defaultStyles$o
     }, styles2);
     return jsxRuntime.jsxs("div", {
       className: styles2.wrapper,
@@ -951,7 +951,7 @@
   const dividingLineColor = "_dividingLineColor_886i1_16";
   const square = "_square_886i1_20";
   const corner = "_corner_886i1_24";
-  const defaultStyles$m = {
+  const defaultStyles$n = {
     svg: svg$5,
     dividingLineColor,
     square,
@@ -964,7 +964,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$m
+      ...defaultStyles$n
     }, styles2);
     let cornerSize = squareSize * 0.625;
     let cornerMargin = squareSize < 100 ? squareSize / 6 : 10;
@@ -1002,7 +1002,7 @@
   const stackedGridRotateItems90 = "_stackedGridRotateItems90_6whof_17";
   const stackedGridRotateItems180 = "_stackedGridRotateItems180_6whof_23";
   const stackedGridRotateItems270 = "_stackedGridRotateItems270_6whof_29";
-  const defaultStyles$l = {
+  const defaultStyles$m = {
     stackedGridContainer,
     stackedGridRotateItems0,
     stackedGridRotateItems90,
@@ -1033,7 +1033,7 @@
   }) => {
     let containerFlip = getContainerFlip(fromBottom, fromLeft);
     let itemRotateClass = getItemRotate(fromBottom, fromLeft);
-    styles2 = mergeStyles(defaultStyles$l, styles2);
+    styles2 = mergeStyles(defaultStyles$m, styles2);
     return jsxRuntime.jsx("div", {
       style: {
         transform: containerFlip
@@ -1044,7 +1044,7 @@
   };
   const svg$4 = "_svg_l2fsl_9";
   const squareFill = "_squareFill_l2fsl_16";
-  const defaultStyles$k = {
+  const defaultStyles$l = {
     svg: svg$4,
     squareFill
   };
@@ -1054,7 +1054,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$k
+      ...defaultStyles$l
     }, styles2);
     return jsxRuntime.jsx("svg", {
       width: size,
@@ -1072,7 +1072,7 @@
   };
   const button$6 = "_button_1kqfn_1";
   const icon$2 = "_icon_1kqfn_6";
-  const defaultStyles$j = {
+  const defaultStyles$k = {
     button: button$6,
     icon: icon$2
   };
@@ -1082,7 +1082,7 @@
     styles: styles2,
     onClick
   }) {
-    styles2 = mergeStyles(defaultStyles$j, styles2);
+    styles2 = mergeStyles(defaultStyles$k, styles2);
     return jsxRuntime.jsx("button", {
       className: styles2.button,
       disabled: disabled2,
@@ -1108,7 +1108,7 @@
   }
   const button$5 = "_button_s6ell_1";
   const buttonInner$1 = "_buttonInner_s6ell_6";
-  const defaultStyles$i = {
+  const defaultStyles$j = {
     button: button$5,
     buttonInner: buttonInner$1
   };
@@ -1118,7 +1118,7 @@
     styles: styles2,
     children
   }) {
-    styles2 = mergeStyles(defaultStyles$i, styles2);
+    styles2 = mergeStyles(defaultStyles$j, styles2);
     return jsxRuntime.jsx("button", {
       className: styles2.button,
       "data-type": type,
@@ -1133,7 +1133,7 @@
   const buttonBorder = "_buttonBorder_1bibm_14";
   const svg$3 = "_svg_1bibm_22";
   const path$3 = "_path_1bibm_29";
-  const defaultStyles$h = {
+  const defaultStyles$i = {
     button: button$4,
     buttonBorder,
     svg: svg$3,
@@ -1144,7 +1144,7 @@
     onClick,
     styles: styles2
   }) {
-    styles2 = mergeStyles(defaultStyles$h, styles2);
+    styles2 = mergeStyles(defaultStyles$i, styles2);
     return jsxRuntime.jsx("button", {
       className: [styles2.button, border && styles2.buttonBorder].join(" "),
       onClick,
@@ -1165,7 +1165,7 @@
   }
   const container$5 = "_container_tq3ke_1";
   const slot = "_slot_tq3ke_5";
-  const defaultStyles$g = {
+  const defaultStyles$h = {
     container: container$5,
     slot
   };
@@ -1176,7 +1176,7 @@
   }) {
     var _a, _b, _c;
     const slotId = `dfp-ad--${name2}`;
-    styles2 = mergeStyles(defaultStyles$g, styles2);
+    styles2 = mergeStyles(defaultStyles$h, 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("|");
@@ -1334,7 +1334,7 @@
   const headerCellButton = "_headerCellButton_fhbur_49";
   const bodyRow = "_bodyRow_fhbur_58";
   const bodyCell = "_bodyCell_fhbur_62";
-  const defaultStyles$f = {
+  const defaultStyles$g = {
     table,
     hideHeader,
     hideHeaderNoBorder,
@@ -1377,7 +1377,7 @@
         };
       });
     };
-    styles2 = mergeStyles(defaultStyles$f, styles2);
+    styles2 = mergeStyles(defaultStyles$g, styles2);
     return jsxRuntime.jsxs("table", {
       className: styles2.table,
       cellSpacing: 0,
@@ -1454,7 +1454,7 @@
   const y2Label = "_y2Label_nmjjj_33";
   const axis$1 = "_axis_nmjjj_37";
   const axisLabel = "_axisLabel_nmjjj_42";
-  const defaultStyles$e = {
+  const defaultStyles$f = {
     slopeChartContainer,
     svg: svg$2,
     line: line$1,
@@ -1504,7 +1504,7 @@
       return positionLabels(labels);
     }, [lines, y2Label2, yScale]);
     styles2 = mergeStyles({
-      ...defaultStyles$e
+      ...defaultStyles$f
     }, styles2);
     const chart = jsxRuntime.jsx("svg", {
       class: styles2.svg,
@@ -1604,7 +1604,7 @@
     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$d = {
+  const defaultStyles$e = {
     tooltip
   };
   function Tooltip({
@@ -1623,7 +1623,7 @@
     });
     const [displayElement, setDisplayElement] = hooks.useState(null);
     const tooltipRef = hooks.useRef();
-    styles2 = mergeStyles(defaultStyles$d, styles2);
+    styles2 = mergeStyles(defaultStyles$e, styles2);
     hooks.useEffect(() => {
       setDisplayElement(document.querySelector("body"));
       return () => {
@@ -1733,7 +1733,7 @@
   }
   const text$1 = "_text_1b8t2_1";
   const container$4 = "_container_1b8t2_10";
-  const defaultStyles$c = {
+  const defaultStyles$d = {
     text: text$1,
     container: container$4
   };
@@ -1744,7 +1744,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$c
+      ...defaultStyles$d
     }, styles2);
     let hasChanged = next2 !== previous2;
     return jsxRuntime.jsxs("div", {
@@ -1769,7 +1769,7 @@
   const wrapper = "_wrapper_8vo05_1";
   const line = "_line_8vo05_5";
   const halfLineText = "_halfLineText_8vo05_15";
-  const defaultStyles$b = {
+  const defaultStyles$c = {
     wrapper,
     line,
     halfLineText
@@ -1779,7 +1779,7 @@
     children,
     lineOverHang
   }) => {
-    styles2 = mergeStyles(defaultStyles$b, styles2);
+    styles2 = mergeStyles(defaultStyles$c, styles2);
     return jsxRuntime.jsxs("div", {
       class: styles2.wrapper,
       children: [jsxRuntime.jsx("p", {
@@ -1805,7 +1805,7 @@
   const displayRow = "_displayRow_49z3u_76";
   const displayColumn = "_displayColumn_49z3u_82";
   const topRow = "_topRow_49z3u_86";
-  const defaultStyles$a = {
+  const defaultStyles$b = {
     toplineResult,
     primaryname,
     secondaryname,
@@ -1833,7 +1833,7 @@
     infoButtonRef
   }, ref) => {
     styles2 = mergeStyles({
-      ...defaultStyles$a
+      ...defaultStyles$b
     }, styles2);
     const displayStyle = displayRow2 ? styles2.displayRow : styles2.displayColumn;
     return jsxRuntime.jsxs("div", {
@@ -1873,12 +1873,12 @@
       })]
     });
   });
-  const borderTop = "_borderTop_gph7y_9";
-  const section = "_section_gph7y_13";
-  const fullWidth = "_fullWidth_gph7y_19";
-  const header = "_header_gph7y_95";
-  const content = "_content_gph7y_132";
-  const defaultStyles$9 = {
+  const borderTop = "_borderTop_1xpz0_9";
+  const section = "_section_1xpz0_39";
+  const fullWidth = "_fullWidth_1xpz0_39";
+  const header = "_header_1xpz0_150";
+  const content = "_content_1xpz0_187";
+  const defaultStyles$a = {
     borderTop,
     section,
     fullWidth,
@@ -1890,6 +1890,7 @@
     fullWidth: "fullWidth"
   };
   const PageSection = compat.forwardRef(({
+    id: id2,
     children,
     layout = SectionLayout.default,
     styles: styles2,
@@ -1897,7 +1898,7 @@
     backgroundColor = "transparent"
   }, ref) => {
     styles2 = mergeStyles({
-      ...defaultStyles$9
+      ...defaultStyles$a
     }, styles2);
     const [minHeight, setMinHeight] = hooks.useState("auto");
     const headerRef = hooks.useRef();
@@ -1906,13 +1907,16 @@
       setMinHeight(headerElement.offsetHeight);
     }, [children]);
     return jsxRuntime.jsxs("section", {
+      id: id2,
       ref,
-      className: [styles2.section, styles2[layout], borderTop2 && styles2.borderTop].join(" "),
+      className: [styles2.section, styles2[layout]].join(" "),
       style: {
         "--background-color": backgroundColor,
         minHeight
       },
-      children: [jsxRuntime.jsx("div", {
+      children: [borderTop2 && jsxRuntime.jsx("div", {
+        className: styles2.borderTop
+      }), jsxRuntime.jsx("div", {
         className: [styles2.header, styles2[layout]].join(" "),
         ref: headerRef,
         children: children.header
@@ -1925,7 +1929,7 @@
   const text = "_text_lo5h3_1";
   const axis = "_axis_lo5h3_6";
   const bar = "_bar_lo5h3_10";
-  const defaultStyles$8 = {
+  const defaultStyles$9 = {
     text,
     axis,
     bar
@@ -1940,7 +1944,7 @@
     columnPadding,
     styles: styles2
   }) => {
-    styles2 = mergeStyles(defaultStyles$8, styles2);
+    styles2 = mergeStyles(defaultStyles$9, 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;
@@ -1983,7 +1987,7 @@
   const small = "_small_hbk39_39";
   const blurb = "_blurb_hbk39_49";
   const footnote = "_footnote_hbk39_57";
-  const defaultStyles$7 = {
+  const defaultStyles$8 = {
     container: container$3,
     img,
     title: title$2,
@@ -2007,7 +2011,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$7
+      ...defaultStyles$8
     }, styles2);
     return jsxRuntime.jsxs("div", {
       class: styles2.container,
@@ -2032,7 +2036,7 @@
   };
   const container$2 = "_container_azu4a_1";
   const paragraph = "_paragraph_azu4a_12";
-  const defaultStyles$6 = {
+  const defaultStyles$7 = {
     container: container$2,
     paragraph
   };
@@ -2045,7 +2049,7 @@
     styles: styles2
   }) {
     styles2 = mergeStyles({
-      ...defaultStyles$6
+      ...defaultStyles$7
     }, styles2);
     return jsxRuntime.jsxs("div", {
       class: styles2.container,
@@ -2063,7 +2067,7 @@
   }
   const svg$1 = "_svg_1dms8_1";
   const path$2 = "_path_1dms8_8";
-  const styles$7 = {
+  const styles$6 = {
     svg: svg$1,
     path: path$2
   };
@@ -2071,9 +2075,9 @@
     return jsxRuntime.jsx("svg", {
       viewBox: "0 0 20 20",
       xmlns: "http://www.w3.org/2000/svg",
-      className: styles$7.svg,
+      className: styles$6.svg,
       children: jsxRuntime.jsx("path", {
-        className: styles$7.path,
+        className: styles$6.path,
         "fill-rule": "evenodd",
         "clip-rule": "evenodd",
         d: "M7.273 0c4.022 0 7.25 3.295 7.25 7.273a7.226 7.226 0 01-7.25 7.25C3.25 14.523 0 11.295 0 7.273 0 3.295 3.25 0 7.273 0zm0 1.84A5.403 5.403 0 001.84 7.274c0 3 2.409 5.454 5.432 5.454 3 0 5.454-2.454 5.454-5.454 0-3.023-2.454-5.432-5.454-5.432zM20 18.16l-5.432-5.432h-.932l-.909.91v.931L18.16 20 20 18.159z"
@@ -2089,7 +2093,7 @@
   const disabled = "_disabled_1kj0x_68";
   const selected$1 = "_selected_1kj0x_73";
   const highlighted = "_highlighted_1kj0x_77";
-  const defaultStyles$5 = {
+  const defaultStyles$6 = {
     searchContainer,
     input,
     searchIcon,
@@ -2108,10 +2112,11 @@
     onSubmit,
     onSelect,
     onClear,
+    onFocus,
     styles: styles2
   }) {
     var _a, _b, _c;
-    styles2 = mergeStyles(defaultStyles$5, styles2);
+    styles2 = mergeStyles(defaultStyles$6, styles2);
     const inputRef = hooks.useRef(null);
     const [selectedIndex, setSelectedIndex] = hooks.useState(-1);
     const [suggestions2, setSuggestions] = hooks.useState();
@@ -2180,6 +2185,7 @@
         onFocus: (e) => {
           e.target.select();
           setShowSuggestions(true);
+          onFocus && onFocus(e);
         },
         className: styles2.input
       }), jsxRuntime.jsx("div", {
@@ -2242,7 +2248,7 @@
   const icon$1 = "_icon_3z0ji_17";
   const liveText = "_liveText_3z0ji_26";
   const refreshText = "_refreshText_3z0ji_27";
-  const defaultStyles$4 = {
+  const defaultStyles$5 = {
     refreshIndicator,
     icon: icon$1,
     liveText,
@@ -2252,7 +2258,7 @@
     text: text2,
     styles: styles2
   }) {
-    styles2 = mergeStyles(defaultStyles$4, styles2);
+    styles2 = mergeStyles(defaultStyles$5, styles2);
     return jsxRuntime.jsxs("div", {
       className: styles2.refreshIndicator,
       children: [jsxRuntime.jsx("span", {
@@ -2270,7 +2276,7 @@
     });
   }
   const grid = "_grid_xps7m_9";
-  const defaultStyles$3 = {
+  const defaultStyles$4 = {
     grid
   };
   const GridType = {
@@ -2284,7 +2290,7 @@
     styles: styles2
   }) {
     styles2 = mergeStyles({
-      ...defaultStyles$3
+      ...defaultStyles$4
     }, styles2);
     return jsxRuntime.jsx("div", {
       className: styles2.grid,
@@ -2370,7 +2376,7 @@
   const exitDone = "_exitDone_48fp9_26";
   const enterActive = "_enterActive_48fp9_37";
   const exitActive = "_exitActive_48fp9_48";
-  const styles$6 = {
+  const defaultStyles$3 = {
     transitionContainer,
     blur,
     modalBox,
@@ -2382,9 +2388,11 @@
   function Modal({
     visible = false,
     blurBackground = true,
+    styles: styles2,
     children,
     onClickOutside
   }) {
+    styles2 = mergeStyles(defaultStyles$3, styles2);
     const modalBoxRef = hooks.useRef();
     const onClick = hooks.useCallback((event) => {
       if (!modalBoxRef.current.contains(event.target)) {
@@ -2409,13 +2417,13 @@
     return compat.createPortal(jsxRuntime.jsx(d, {
       in: visible,
       duration: 300,
-      classNames: styles$6,
+      classNames: styles2,
       children: jsxRuntime.jsx("div", {
-        className: [styles$6.transitionContainer, blurBackground && styles$6.blur, visible && styles$6.visible].join(" "),
+        className: [styles2.transitionContainer, blurBackground && styles2.blur, visible && styles2.visible].join(" "),
         onClick,
         children: jsxRuntime.jsx("div", {
           ref: modalBoxRef,
-          class: styles$6.modalBox,
+          class: styles2.modalBox,
           children
         })
       })
@@ -5919,7 +5927,7 @@
         if (event.type === "wheel" && !event[this._zoomBypassKey]) {
           return filterEvent(true);
         }
-        if ("targetTouches" in event) {
+        if ("targetTouches" in event && this.collaborativeGesturesEnabled) {
           if (event.targetTouches.length < 2) {
             return false;
           }
@@ -5938,6 +5946,8 @@
       this._viewport.addEventListener("touchmove", (event) => {
         if (event.targetTouches.length < 2) {
           this._filterEventCallback(true);
+        } else {
+          event.stopImmediatePropagation();
         }
       });
     }
@@ -6271,6 +6281,7 @@
   const mobileHelpText = "Use two fingers to zoom";
   const Map$1 = compat.forwardRef(({
     config,
+    inModalState = false,
     onLoad,
     children
   }, ref) => {
@@ -6286,6 +6297,7 @@
         view: new View(config.view),
         target: targetRef.current
       });
+      map2.collaborativeGesturesEnabled = !inModalState;
       map2.addLayers(layers);
       setMap(map2);
       if (ref)
@@ -6324,6 +6336,11 @@
         map.setLayers(layers);
       }
     }, [map, layers]);
+    hooks.useEffect(() => {
+      if (!map)
+        return;
+      map.collaborativeGesturesEnabled = !inModalState;
+    }, [inModalState]);
     return jsxRuntime.jsx("figure", {
       ref: targetRef,
       className: styles$3.mapContainer,
@@ -6464,11 +6481,11 @@
       } = this.style;
       if (stroke) {
         context.lineWidth = stroke.width * pixelRatio / transform.k;
-        context.strokeStyle = stroke.color;
+        context.strokeStyle = stroke.getRgba();
         context.stroke();
       }
       if (fill) {
-        context.fillStyle = fill.color;
+        context.fillStyle = fill.getRgba();
         context.fill();
       }
     }
@@ -6601,15 +6618,63 @@
       this.text = options == null ? void 0 : options.text;
     }
   }
+  function memoise(fn) {
+    let called = false;
+    let lastResult;
+    let lastArgs;
+    let lastThis;
+    return function() {
+      const nextArgs = Array.prototype.slice.call(arguments);
+      if (!called || this !== lastThis || !arrayEquals(nextArgs, lastArgs)) {
+        called = true;
+        lastThis = this;
+        lastArgs = nextArgs;
+        lastResult = fn.apply(this, arguments);
+      }
+      return lastResult;
+    };
+  }
+  function toRgba(color2, opacity = 1) {
+    color2 = color2.replace(/\s+/g, "").toLowerCase();
+    if (color2.startsWith("#")) {
+      color2 = color2.replace(/^#/, "");
+      if (color2.length === 3) {
+        color2 = color2.split("").map((char) => char + char).join("");
+      }
+      let r = parseInt(color2.substring(0, 2), 16);
+      let g = parseInt(color2.substring(2, 4), 16);
+      let b = parseInt(color2.substring(4, 6), 16);
+      return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    }
+    let rgbaMatch = color2.match(/^rgba?\((\d+),(\d+),(\d+)(?:,(\d+(\.\d+)?))?\)$/);
+    if (rgbaMatch) {
+      let r = parseInt(rgbaMatch[1], 10);
+      let g = parseInt(rgbaMatch[2], 10);
+      let b = parseInt(rgbaMatch[3], 10);
+      let a = rgbaMatch[4] !== void 0 ? parseFloat(rgbaMatch[4]) : opacity;
+      return `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
+    throw new Error("Unsupported color format");
+  }
   class Stroke {
     constructor(options) {
       this.color = (options == null ? void 0 : options.color) || "#121212";
       this.width = (options == null ? void 0 : options.width) || 0.5;
+      this.opacity = (options == null ? void 0 : options.opacity) || 1;
+      this._getRgba = memoise(toRgba);
+    }
+    getRgba() {
+      return this._getRgba(this.color, this.opacity);
     }
   }
   class Fill {
     constructor(options) {
       this.color = (options == null ? void 0 : options.color) || "#CCC";
+      this.opacity = (options == null ? void 0 : options.opacity) || 1;
+      this._getRgba = memoise(toRgba);
+    }
+    getRgba() {
+      return this._getRgba(this.color, this.opacity);
     }
   }
   class Text {
@@ -7102,9 +7167,9 @@
       return features;
     };
   }
-  function interpolateStyles(firstStyle, secondStyle, interpolateColors) {
-    const fillInterpolator = interpolateFill(firstStyle.fill, secondStyle.fill, interpolateColors);
-    const strokeInterpolator = interpolateStroke(firstStyle.stroke, secondStyle.stroke, interpolateColors);
+  function interpolateStyles(firstStyle, secondStyle, interpolateColors, interpolateNumbers) {
+    const fillInterpolator = interpolateFill(firstStyle.fill, secondStyle.fill, interpolateColors, interpolateNumbers);
+    const strokeInterpolator = interpolateStroke(firstStyle.stroke, secondStyle.stroke, interpolateColors, interpolateNumbers);
     return (t) => {
       return new Style({
         fill: fillInterpolator(t),
@@ -7112,25 +7177,24 @@
       });
     };
   }
-  function interpolateFill(fillA, fillB, interpolateColors) {
-    const colorInterpolator = interpolateColors((fillA == null ? void 0 : fillA.color) || "transparent", (fillB == null ? void 0 : fillB.color) || "transparent");
+  function interpolateFill(fillA, fillB, interpolateColors, interpolateNumbers) {
+    const colorInterpolator = interpolateColors((fillA == null ? void 0 : fillA.color) ?? "transparent", (fillB == null ? void 0 : fillB.color) ?? "transparent");
+    const opacityInterpolator = interpolateNumbers((fillA == null ? void 0 : fillA.opacity) ?? 1, (fillB == null ? void 0 : fillB.opacity) ?? 1);
     return (t) => {
       return new Fill({
-        color: colorInterpolator(t)
+        color: colorInterpolator(t),
+        opacity: opacityInterpolator(t)
       });
     };
   }
-  function interpolateStroke(strokeA, strokeB, interpolateColors) {
-    const colorInterpolator = interpolateColors((strokeA == null ? void 0 : strokeA.color) || "transparent", (strokeB == null ? void 0 : strokeB.color) || "transparent");
-    const widthInterpolator = (t) => {
-      const widthA = (strokeA == null ? void 0 : strokeA.width) || 0;
-      const widthB = (strokeB == null ? void 0 : strokeB.width) || 0;
-      const diff = widthB - widthA;
-      return widthA + diff * t;
-    };
+  function interpolateStroke(strokeA, strokeB, interpolateColors, interpolateNumbers) {
+    const colorInterpolator = interpolateColors((strokeA == null ? void 0 : strokeA.color) ?? "transparent", (strokeB == null ? void 0 : strokeB.color) ?? "transparent");
+    const opacityInterpolator = interpolateNumbers((strokeA == null ? void 0 : strokeA.opacity) ?? 1, (strokeB == null ? void 0 : strokeB.opacity) ?? 1);
+    const widthInterpolator = interpolateNumbers((strokeA == null ? void 0 : strokeA.width) ?? 1, (strokeB == null ? void 0 : strokeB.width) ?? 1);
     return (t) => {
       return new Stroke({
         color: colorInterpolator(t),
+        opacity: opacityInterpolator(t),
         width: widthInterpolator(t)
       });
     };
@@ -7196,22 +7260,6 @@
       });
     }
   }
-  function memoise(fn) {
-    let called = false;
-    let lastResult;
-    let lastArgs;
-    let lastThis;
-    return function() {
-      const nextArgs = Array.prototype.slice.call(arguments);
-      if (!called || this !== lastThis || !arrayEquals(nextArgs, lastArgs)) {
-        called = true;
-        lastThis = this;
-        lastArgs = nextArgs;
-        lastResult = fn.apply(this, arguments);
-      }
-      return lastResult;
-    };
-  }
   class LineString {
     constructor({
       type = "LineString",