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

package/dist/interactive-component-library.js

@@ -12,7 +12,7 @@ const group = "_group_b5io0_5";
 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,
@@ -52,13 +52,13 @@ function Chevron({
   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 ? jsx(SmallChevron, {
@@ -112,7 +112,7 @@ const container$7 = "_container_jzalm_1";
 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,
@@ -129,10 +129,10 @@ const LegendItem = ({
   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 jsxs("div", {
@@ -149,7 +149,7 @@ const bar$2 = "_bar_1jxh9_1";
 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,
@@ -218,7 +218,7 @@ function StackedBar({
   const rectElements = useRef([]);
   const textElements = useRef([]);
   styles2 = mergeStyles({
-    ...defaultStyles$u
+    ...defaultStyles$v
   }, styles2);
   const svgHeight = labelType === LabelType.hanging && !hideLabels ? height + 20 : height;
   const cleanBorderAbbr = (abbrText) => abbrText.split("-")[0];
@@ -309,7 +309,7 @@ function StackedBar({
 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
@@ -320,7 +320,7 @@ const GradientIcon = (props) => {
     next: next2,
     styles: styles2
   } = props;
-  styles2 = mergeStyles(defaultStyles$t, styles2);
+  styles2 = mergeStyles(defaultStyles$u, styles2);
   const gradientId = useId();
   return jsxs("svg", {
     class: styles2.svg,
@@ -351,7 +351,7 @@ const GradientIcon = (props) => {
 };
 const unit = "_unit_mo5d9_1";
 const container$6 = "_container_mo5d9_6";
-const defaultStyles$s = {
+const defaultStyles$t = {
   unit,
   container: container$6
 };
@@ -408,7 +408,7 @@ const Waffle = ({
   const unitWidth = width / columns;
   const unitHeight = unitWidth;
   const height = numberOfRows * unitHeight;
-  styles2 = mergeStyles(defaultStyles$s, styles2);
+  styles2 = mergeStyles(defaultStyles$t, styles2);
   return jsx("div", {
     ref: containerRef,
     className: styles2.container,
@@ -451,7 +451,7 @@ const Waffle = ({
 };
 const button$7 = "_button_oqopj_1";
 const svg$7 = "_svg_oqopj_15";
-const defaultStyles$r = {
+const defaultStyles$s = {
   button: button$7,
   svg: svg$7
 };
@@ -460,7 +460,7 @@ const InfoButton = forwardRef(({
   styles: styles2
 }, ref) => {
   styles2 = mergeStyles({
-    ...defaultStyles$r
+    ...defaultStyles$s
   }, styles2);
   return jsx("button", {
     ref,
@@ -479,7 +479,7 @@ const InfoButton = forwardRef(({
 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
@@ -489,7 +489,7 @@ const CircleIcon = ({
   pulse: pulse2 = false,
   styles: styles2
 }) => {
-  styles2 = mergeStyles(defaultStyles$q, styles2);
+  styles2 = mergeStyles(defaultStyles$r, styles2);
   return jsx("svg", {
     style: styles2.svg,
     fill: "none",
@@ -509,7 +509,7 @@ const CircleIcon = ({
   });
 };
 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 : {};
@@ -885,7 +885,7 @@ const RelativeTimeSentence = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$p
+    ...defaultStyles$q
   }, styles2);
   let timeSince = dayjs(timeStamp).fromNow();
   return jsx("span", {
@@ -895,7 +895,7 @@ const RelativeTimeSentence = ({
 };
 const pageContainer = "_pageContainer_1s0yq_9";
 const sideBorders = "_sideBorders_1s0yq_42";
-const defaultStyles$o = {
+const defaultStyles$p = {
   pageContainer,
   sideBorders
 };
@@ -907,7 +907,7 @@ function Container({
   const {
     pageContainer: pageContainer2,
     sideBorders: sideBordersStyle
-  } = mergeStyles(defaultStyles$o, styles2);
+  } = mergeStyles(defaultStyles$p, styles2);
   return jsx("div", {
     className: [pageContainer2, sideBorders2 && sideBordersStyle].join(" "),
     children
@@ -916,7 +916,7 @@ function Container({
 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
@@ -937,7 +937,7 @@ function ChangeBar({
   let thisColor = ` bg-color--${party}`;
   let zeroStyles = ` height: ${height};`;
   styles2 = mergeStyles({
-    ...defaultStyles$n
+    ...defaultStyles$o
   }, styles2);
   return jsxs("div", {
     className: styles2.wrapper,
@@ -955,7 +955,7 @@ const svg$5 = "_svg_886i1_9";
 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,
@@ -968,7 +968,7 @@ const SquareCutCornerIcon = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$m
+    ...defaultStyles$n
   }, styles2);
   let cornerSize = squareSize * 0.625;
   let cornerMargin = squareSize < 100 ? squareSize / 6 : 10;
@@ -1006,7 +1006,7 @@ const stackedGridRotateItems0 = "_stackedGridRotateItems0_6whof_11";
 const stackedGridRotateItems90 = "_stackedGridRotateItems90_6whof_17";
 const stackedGridRotateItems180 = "_stackedGridRotateItems180_6whof_23";
 const stackedGridRotateItems270 = "_stackedGridRotateItems270_6whof_29";
-const defaultStyles$l = {
+const defaultStyles$m = {
   stackedGridContainer,
   stackedGridRotateItems0,
   stackedGridRotateItems90,
@@ -1037,7 +1037,7 @@ const StackedGrid = ({
 }) => {
   let containerFlip = getContainerFlip(fromBottom, fromLeft);
   let itemRotateClass = getItemRotate(fromBottom, fromLeft);
-  styles2 = mergeStyles(defaultStyles$l, styles2);
+  styles2 = mergeStyles(defaultStyles$m, styles2);
   return jsx("div", {
     style: {
       transform: containerFlip
@@ -1048,7 +1048,7 @@ const StackedGrid = ({
 };
 const svg$4 = "_svg_l2fsl_9";
 const squareFill = "_squareFill_l2fsl_16";
-const defaultStyles$k = {
+const defaultStyles$l = {
   svg: svg$4,
   squareFill
 };
@@ -1058,7 +1058,7 @@ const SquareIcon = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$k
+    ...defaultStyles$l
   }, styles2);
   return jsx("svg", {
     width: size,
@@ -1076,7 +1076,7 @@ const SquareIcon = ({
 };
 const button$6 = "_button_1kqfn_1";
 const icon$2 = "_icon_1kqfn_6";
-const defaultStyles$j = {
+const defaultStyles$k = {
   button: button$6,
   icon: icon$2
 };
@@ -1086,7 +1086,7 @@ function ArrowButton({
   styles: styles2,
   onClick
 }) {
-  styles2 = mergeStyles(defaultStyles$j, styles2);
+  styles2 = mergeStyles(defaultStyles$k, styles2);
   return jsx("button", {
     className: styles2.button,
     disabled: disabled2,
@@ -1112,7 +1112,7 @@ function ArrowButton({
 }
 const button$5 = "_button_s6ell_1";
 const buttonInner$1 = "_buttonInner_s6ell_6";
-const defaultStyles$i = {
+const defaultStyles$j = {
   button: button$5,
   buttonInner: buttonInner$1
 };
@@ -1122,7 +1122,7 @@ function Button({
   styles: styles2,
   children
 }) {
-  styles2 = mergeStyles(defaultStyles$i, styles2);
+  styles2 = mergeStyles(defaultStyles$j, styles2);
   return jsx("button", {
     className: styles2.button,
     "data-type": type,
@@ -1137,7 +1137,7 @@ 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 = {
+const defaultStyles$i = {
   button: button$4,
   buttonBorder,
   svg: svg$3,
@@ -1148,7 +1148,7 @@ function CloseButton({
   onClick,
   styles: styles2
 }) {
-  styles2 = mergeStyles(defaultStyles$h, styles2);
+  styles2 = mergeStyles(defaultStyles$i, styles2);
   return jsx("button", {
     className: [styles2.button, border && styles2.buttonBorder].join(" "),
     onClick,
@@ -1169,7 +1169,7 @@ function CloseButton({
 }
 const container$5 = "_container_tq3ke_1";
 const slot = "_slot_tq3ke_5";
-const defaultStyles$g = {
+const defaultStyles$h = {
   container: container$5,
   slot
 };
@@ -1180,7 +1180,7 @@ function AdSlot({
 }) {
   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("|");
@@ -1338,7 +1338,7 @@ const stickyHeader = "_stickyHeader_fhbur_42";
 const headerCellButton = "_headerCellButton_fhbur_49";
 const bodyRow = "_bodyRow_fhbur_58";
 const bodyCell = "_bodyCell_fhbur_62";
-const defaultStyles$f = {
+const defaultStyles$g = {
   table,
   hideHeader,
   hideHeaderNoBorder,
@@ -1381,7 +1381,7 @@ function Table({
       };
     });
   };
-  styles2 = mergeStyles(defaultStyles$f, styles2);
+  styles2 = mergeStyles(defaultStyles$g, styles2);
   return jsxs("table", {
     className: styles2.table,
     cellSpacing: 0,
@@ -1458,7 +1458,7 @@ const y1Label = "_y1Label_nmjjj_29";
 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,
@@ -1508,7 +1508,7 @@ const SlopeChart = ({
     return positionLabels(labels);
   }, [lines, y2Label2, yScale]);
   styles2 = mergeStyles({
-    ...defaultStyles$e
+    ...defaultStyles$f
   }, styles2);
   const chart = jsx("svg", {
     class: styles2.svg,
@@ -1608,7 +1608,7 @@ function pointInsideRect(point, rect) {
   return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
 }
 const tooltip = "_tooltip_11t5d_1";
-const defaultStyles$d = {
+const defaultStyles$e = {
   tooltip
 };
 function Tooltip({
@@ -1627,7 +1627,7 @@ function Tooltip({
   });
   const [displayElement, setDisplayElement] = useState(null);
   const tooltipRef = useRef();
-  styles2 = mergeStyles(defaultStyles$d, styles2);
+  styles2 = mergeStyles(defaultStyles$e, styles2);
   useEffect(() => {
     setDisplayElement(document.querySelector("body"));
     return () => {
@@ -1737,7 +1737,7 @@ function tooltipPositionForRect({
 }
 const text$1 = "_text_1b8t2_1";
 const container$4 = "_container_1b8t2_10";
-const defaultStyles$c = {
+const defaultStyles$d = {
   text: text$1,
   container: container$4
 };
@@ -1748,7 +1748,7 @@ const ControlChange = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$c
+    ...defaultStyles$d
   }, styles2);
   let hasChanged = next2 !== previous2;
   return jsxs("div", {
@@ -1773,7 +1773,7 @@ const ControlChange = ({
 const wrapper = "_wrapper_8vo05_1";
 const line = "_line_8vo05_5";
 const halfLineText = "_halfLineText_8vo05_15";
-const defaultStyles$b = {
+const defaultStyles$c = {
   wrapper,
   line,
   halfLineText
@@ -1783,7 +1783,7 @@ const FirstPastThePostWaffle = ({
   children,
   lineOverHang
 }) => {
-  styles2 = mergeStyles(defaultStyles$b, styles2);
+  styles2 = mergeStyles(defaultStyles$c, styles2);
   return jsxs("div", {
     class: styles2.wrapper,
     children: [jsx("p", {
@@ -1809,7 +1809,7 @@ const secondaryNumber = "_secondaryNumber_49z3u_69";
 const displayRow = "_displayRow_49z3u_76";
 const displayColumn = "_displayColumn_49z3u_82";
 const topRow = "_topRow_49z3u_86";
-const defaultStyles$a = {
+const defaultStyles$b = {
   toplineResult,
   primaryname,
   secondaryname,
@@ -1837,7 +1837,7 @@ const ToplineResult = forwardRef(({
   infoButtonRef
 }, ref) => {
   styles2 = mergeStyles({
-    ...defaultStyles$a
+    ...defaultStyles$b
   }, styles2);
   const displayStyle = displayRow2 ? styles2.displayRow : styles2.displayColumn;
   return jsxs("div", {
@@ -1877,12 +1877,12 @@ const ToplineResult = forwardRef(({
     })]
   });
 });
-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,
@@ -1894,6 +1894,7 @@ const SectionLayout = {
   fullWidth: "fullWidth"
 };
 const PageSection = forwardRef(({
+  id: id2,
   children,
   layout = SectionLayout.default,
   styles: styles2,
@@ -1901,7 +1902,7 @@ const PageSection = forwardRef(({
   backgroundColor = "transparent"
 }, ref) => {
   styles2 = mergeStyles({
-    ...defaultStyles$9
+    ...defaultStyles$a
   }, styles2);
   const [minHeight, setMinHeight] = useState("auto");
   const headerRef = useRef();
@@ -1910,13 +1911,16 @@ const PageSection = forwardRef(({
     setMinHeight(headerElement.offsetHeight);
   }, [children]);
   return 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: [jsx("div", {
+    children: [borderTop2 && jsx("div", {
+      className: styles2.borderTop
+    }), jsx("div", {
       className: [styles2.header, styles2[layout]].join(" "),
       ref: headerRef,
       children: children.header
@@ -1929,7 +1933,7 @@ const PageSection = forwardRef(({
 const text = "_text_lo5h3_1";
 const axis = "_axis_lo5h3_6";
 const bar = "_bar_lo5h3_10";
-const defaultStyles$8 = {
+const defaultStyles$9 = {
   text,
   axis,
   bar
@@ -1944,7 +1948,7 @@ const ColumnChart = ({
   columnPadding,
   styles: styles2
 }) => {
-  styles2 = mergeStyles(defaultStyles$8, styles2);
+  styles2 = mergeStyles(defaultStyles$9, 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;
@@ -1987,7 +1991,7 @@ const subtitle = "_subtitle_hbk39_29";
 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,
@@ -2011,7 +2015,7 @@ const PartyProfile = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$7
+    ...defaultStyles$8
   }, styles2);
   return jsxs("div", {
     class: styles2.container,
@@ -2036,7 +2040,7 @@ const PartyProfile = ({
 };
 const container$2 = "_container_azu4a_1";
 const paragraph = "_paragraph_azu4a_12";
-const defaultStyles$6 = {
+const defaultStyles$7 = {
   container: container$2,
   paragraph
 };
@@ -2049,7 +2053,7 @@ function ResultSummary({
   styles: styles2
 }) {
   styles2 = mergeStyles({
-    ...defaultStyles$6
+    ...defaultStyles$7
   }, styles2);
   return jsxs("div", {
     class: styles2.container,
@@ -2067,7 +2071,7 @@ function ResultSummary({
 }
 const svg$1 = "_svg_1dms8_1";
 const path$2 = "_path_1dms8_8";
-const styles$7 = {
+const styles$6 = {
   svg: svg$1,
   path: path$2
 };
@@ -2075,9 +2079,9 @@ function SearchIcon() {
   return jsx("svg", {
     viewBox: "0 0 20 20",
     xmlns: "http://www.w3.org/2000/svg",
-    className: styles$7.svg,
+    className: styles$6.svg,
     children: 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"
@@ -2093,7 +2097,7 @@ const suggestion = "_suggestion_1kj0x_42";
 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,
@@ -2112,10 +2116,11 @@ function SearchInput({
   onSubmit,
   onSelect,
   onClear,
+  onFocus,
   styles: styles2
 }) {
   var _a, _b, _c;
-  styles2 = mergeStyles(defaultStyles$5, styles2);
+  styles2 = mergeStyles(defaultStyles$6, styles2);
   const inputRef = useRef(null);
   const [selectedIndex, setSelectedIndex] = useState(-1);
   const [suggestions2, setSuggestions] = useState();
@@ -2184,6 +2189,7 @@ function SearchInput({
       onFocus: (e) => {
         e.target.select();
         setShowSuggestions(true);
+        onFocus && onFocus(e);
       },
       className: styles2.input
     }), jsx("div", {
@@ -2246,7 +2252,7 @@ const refreshIndicator = "_refreshIndicator_3z0ji_9";
 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,
@@ -2256,7 +2262,7 @@ function RefreshIndicator({
   text: text2,
   styles: styles2
 }) {
-  styles2 = mergeStyles(defaultStyles$4, styles2);
+  styles2 = mergeStyles(defaultStyles$5, styles2);
   return jsxs("div", {
     className: styles2.refreshIndicator,
     children: [jsx("span", {
@@ -2274,7 +2280,7 @@ function RefreshIndicator({
   });
 }
 const grid = "_grid_xps7m_9";
-const defaultStyles$3 = {
+const defaultStyles$4 = {
   grid
 };
 const GridType = {
@@ -2288,7 +2294,7 @@ function ResponsiveGrid({
   styles: styles2
 }) {
   styles2 = mergeStyles({
-    ...defaultStyles$3
+    ...defaultStyles$4
   }, styles2);
   return jsx("div", {
     className: styles2.grid,
@@ -2374,7 +2380,7 @@ const enter = "_enter_48fp9_25";
 const exitDone = "_exitDone_48fp9_26";
 const enterActive = "_enterActive_48fp9_37";
 const exitActive = "_exitActive_48fp9_48";
-const styles$6 = {
+const defaultStyles$3 = {
   transitionContainer,
   blur,
   modalBox,
@@ -2386,9 +2392,11 @@ const styles$6 = {
 function Modal({
   visible = false,
   blurBackground = true,
+  styles: styles2,
   children,
   onClickOutside
 }) {
+  styles2 = mergeStyles(defaultStyles$3, styles2);
   const modalBoxRef = useRef();
   const onClick = useCallback((event) => {
     if (!modalBoxRef.current.contains(event.target)) {
@@ -2413,13 +2421,13 @@ function Modal({
   return createPortal(jsx(d, {
     in: visible,
     duration: 300,
-    classNames: styles$6,
+    classNames: styles2,
     children: 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: jsx("div", {
         ref: modalBoxRef,
-        class: styles$6.modalBox,
+        class: styles2.modalBox,
         children
       })
     })
@@ -5923,7 +5931,7 @@ let Map$2 = class Map2 {
       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;
         }
@@ -5942,6 +5950,8 @@ let Map$2 = class Map2 {
     this._viewport.addEventListener("touchmove", (event) => {
       if (event.targetTouches.length < 2) {
         this._filterEventCallback(true);
+      } else {
+        event.stopImmediatePropagation();
       }
     });
   }
@@ -6275,6 +6285,7 @@ const styles$3 = {
 const mobileHelpText = "Use two fingers to zoom";
 const Map$1 = forwardRef(({
   config,
+  inModalState = false,
   onLoad,
   children
 }, ref) => {
@@ -6290,6 +6301,7 @@ const Map$1 = forwardRef(({
       view: new View(config.view),
       target: targetRef.current
     });
+    map2.collaborativeGesturesEnabled = !inModalState;
     map2.addLayers(layers);
     setMap(map2);
     if (ref)
@@ -6328,6 +6340,11 @@ const Map$1 = forwardRef(({
       map.setLayers(layers);
     }
   }, [map, layers]);
+  useEffect(() => {
+    if (!map)
+      return;
+    map.collaborativeGesturesEnabled = !inModalState;
+  }, [inModalState]);
   return jsx("figure", {
     ref: targetRef,
     className: styles$3.mapContainer,
@@ -6468,11 +6485,11 @@ class FeatureRenderer {
     } = 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();
     }
   }
@@ -6605,15 +6622,63 @@ class Style {
     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 {
@@ -7106,9 +7171,9 @@ function interpolateFeatures(currentFeatures, newFeatures, {
     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),
@@ -7116,25 +7181,24 @@ function interpolateStyles(firstStyle, secondStyle, interpolateColors) {
     });
   };
 }
-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)
     });
   };
@@ -7200,22 +7264,6 @@ class Feature {
     });
   }
 }
-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",