@guardian/interactive-component-library 0.1.0-alpha.42 → 0.1.0-alpha.44

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", {
@@ -145,11 +145,11 @@ const LegendItem = ({
     })]
   });
 };
-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 bar$2 = "_bar_1b3uz_1";
+const label$1 = "_label_1b3uz_5";
+const labelStroke = "_labelStroke_1b3uz_12";
+const backgroundRect = "_backgroundRect_1b3uz_18";
+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", {
@@ -1882,7 +1882,7 @@ const section = "_section_1xpz0_39";
 const fullWidth = "_fullWidth_1xpz0_39";
 const header = "_header_1xpz0_150";
 const content = "_content_1xpz0_187";
-const defaultStyles$9 = {
+const defaultStyles$a = {
   borderTop,
   section,
   fullWidth,
@@ -1902,7 +1902,7 @@ const PageSection = forwardRef(({
   backgroundColor = "transparent"
 }, ref) => {
   styles2 = mergeStyles({
-    ...defaultStyles$9
+    ...defaultStyles$a
   }, styles2);
   const [minHeight, setMinHeight] = useState("auto");
   const headerRef = useRef();
@@ -1933,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
@@ -1948,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;
@@ -1991,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,
@@ -2015,7 +2015,7 @@ const PartyProfile = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$7
+    ...defaultStyles$8
   }, styles2);
   return jsxs("div", {
     class: styles2.container,
@@ -2040,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
 };
@@ -2053,7 +2053,7 @@ function ResultSummary({
   styles: styles2
 }) {
   styles2 = mergeStyles({
-    ...defaultStyles$6
+    ...defaultStyles$7
   }, styles2);
   return jsxs("div", {
     class: styles2.container,
@@ -2071,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
 };
@@ -2079,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"
@@ -2097,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,
@@ -2116,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();
@@ -2188,6 +2189,7 @@ function SearchInput({
       onFocus: (e) => {
         e.target.select();
         setShowSuggestions(true);
+        onFocus && onFocus(e);
       },
       className: styles2.input
     }), jsx("div", {
@@ -2250,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,
@@ -2260,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", {
@@ -2278,7 +2280,7 @@ function RefreshIndicator({
   });
 }
 const grid = "_grid_xps7m_9";
-const defaultStyles$3 = {
+const defaultStyles$4 = {
   grid
 };
 const GridType = {
@@ -2292,7 +2294,7 @@ function ResponsiveGrid({
   styles: styles2
 }) {
   styles2 = mergeStyles({
-    ...defaultStyles$3
+    ...defaultStyles$4
   }, styles2);
   return jsx("div", {
     className: styles2.grid,
@@ -2378,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,
@@ -2390,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)) {
@@ -2417,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
       })
     })
@@ -5917,35 +5921,11 @@ let Map$2 = class Map2 {
     this._renderer = new MapRenderer(this);
     this._resizeObserver = new ResizeObserver(() => this._updateSize());
     this._resizeObserver.observe(this.target);
-    this.view.transform = zoomIdentity;
-    this._zoomBypassKey = navigator.userAgent.indexOf("Mac") !== -1 ? "metaKey" : "ctrlKey";
-    this._zoomBehaviour = zoom().scaleExtent(this.view.scaleExtent).filter((event) => {
-      const filterEvent = (filter) => {
-        this._filterEventCallback(filter);
-        return !filter;
-      };
-      if (event.type === "wheel" && !event[this._zoomBypassKey]) {
-        return filterEvent(true);
-      }
-      if ("targetTouches" in event) {
-        if (event.targetTouches.length < 2) {
-          return false;
-        }
-        event.preventDefault();
-        return filterEvent(false);
-      }
-      return (!event.ctrlKey || event.type === "wheel") && !event.button;
-    }).on("zoom", (event) => {
-      this.view.transform = event.transform;
-      this._requestRender();
-      this.dispatcher.dispatch(MapEvent.ZOOM, {
-        currentZoomLevel: event.transform.k
-      });
-    });
-    select(this._viewport).call(this._zoomBehaviour);
     this._viewport.addEventListener("touchmove", (event) => {
       if (event.targetTouches.length < 2) {
         this._filterEventCallback(true);
+      } else {
+        event.stopImmediatePropagation();
       }
     });
   }
@@ -6025,7 +6005,7 @@ let Map$2 = class Map2 {
     const paddedViewPortWidth = viewPortWidth - padding.left - padding.right;
     const paddedViewPortHeight = viewPortHeight - padding.top - padding.bottom;
     const featureScale = Math.min(paddedViewPortWidth / featureWidth, paddedViewPortHeight / featureHeight);
-    const zoomScale = Math.min(this.view.maxZoom, featureScale);
+    const zoomScale = Math.min(this.view.scaleExtent[1], featureScale);
     const scaledPadding = {
       top: padding.top / zoomScale,
       right: padding.right / zoomScale,
@@ -6104,11 +6084,40 @@ let Map$2 = class Map2 {
     const view = this.view;
     if (view) {
       view.viewPortSize = size;
+      this._createZoomBehaviour(size);
     }
-    this._zoomBehaviour.extent([[0, 0], size]);
-    this._zoomBehaviour.translateExtent([[0, 0], size]);
     this._requestRender();
   }
+  _createZoomBehaviour(viewPortSize) {
+    if (this._zoomBehaviour) {
+      this._zoomBehaviour.on("zoom", null);
+    }
+    this._zoomBypassKey = navigator.userAgent.indexOf("Mac") !== -1 ? "metaKey" : "ctrlKey";
+    this._zoomBehaviour = zoom().extent([[0, 0], viewPortSize]).translateExtent([[0, 0], viewPortSize]).scaleExtent(this.view.scaleExtent).filter((event) => {
+      const filterEvent = (filter) => {
+        this._filterEventCallback(filter);
+        return !filter;
+      };
+      if (event.type === "wheel" && !event[this._zoomBypassKey]) {
+        return filterEvent(true);
+      }
+      if ("targetTouches" in event) {
+        if (event.targetTouches.length < 2) {
+          return false;
+        }
+        event.preventDefault();
+        return filterEvent(false);
+      }
+      return (!event.ctrlKey || event.type === "wheel") && !event.button;
+    }).on("zoom", (event) => {
+      this.view.transform = event.transform;
+      this._requestRender();
+      this.dispatcher.dispatch(MapEvent.ZOOM, {
+        zoomScale: event.transform.k
+      });
+    });
+    select(this._viewport).call(this._zoomBehaviour);
+  }
   _requestRender() {
     if (!this._renderer || !!this._animationFrameRequestID || this._isTransitioning)
       return;
@@ -6138,6 +6147,32 @@ function bboxFeature(bounds) {
   };
   return feature;
 }
+const BASE_RESOLUTION = 156543.03392;
+function zoomLevelToZoomScale(zoomLevel, initialResolution) {
+  const resolution = BASE_RESOLUTION / Math.pow(2, zoomLevel);
+  const zoomScale = initialResolution / resolution;
+  return zoomScale;
+}
+function zoomLevelForResolution(currentResolution) {
+  const zoomLevel = Math.log2(BASE_RESOLUTION / currentResolution);
+  return zoomLevel;
+}
+function haversineDistance(lat1, lon1, lat2, lon2) {
+  const R2 = 6371e3;
+  const toRadians = (degrees2) => degrees2 * Math.PI / 180;
+  const dLat = toRadians(lat2 - lat1);
+  const dLon = toRadians(lon2 - lon1);
+  const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
+  const c2 = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  return R2 * c2;
+}
+function resolutionForExtent(extent, viewportSize) {
+  const [lonMin, latMin, lonMax, latMax] = extent;
+  const latMid = (latMin + latMax) / 2;
+  const distance = haversineDistance(latMid, lonMin, latMid, lonMax);
+  const resolution = distance / viewportSize[0];
+  return resolution;
+}
 class View {
   constructor({
     projection,
@@ -6151,6 +6186,7 @@ class View {
     this.extent = extent;
     this.minZoom = minZoom;
     this.maxZoom = maxZoom;
+    this._transform = zoomIdentity;
     this._padding = padding;
     this._viewPortSize = [0, 0];
     this.pixelRatio = window.devicePixelRatio;
@@ -6160,6 +6196,8 @@ class View {
     this._viewPortSize = size;
     if (previousSize !== size) {
       this.fitObject(bboxFeature(this.extent));
+      const initialExtent = this.getVisibleExtent(zoomIdentity, this.projection);
+      this.initialResolution = resolutionForExtent(initialExtent, size);
     }
   }
   get viewPortSize() {
@@ -6185,9 +6223,10 @@ class View {
     };
     return scalePadding(scaledPadding, this.pixelRatio);
   }
-  // defines the upper and lower limits for zoom behaviour
+  // calculates the upper and lower zoom scales
   get scaleExtent() {
-    return [this.minZoom, this.maxZoom];
+    const maxScale = zoomLevelToZoomScale(this.maxZoom, this.initialResolution);
+    return [1, maxScale];
   }
   setProjection(projection) {
     this.projection = projection;
@@ -6233,6 +6272,14 @@ class View {
     const points = [topLeft, topRight, bottomRight, bottomLeft, topLeft];
     return points.map((d2) => this.invert(d2));
   }
+  // map resolution (meters per pixel)
+  getResolution() {
+    return resolutionForExtent(this.getVisibleExtent(this.transform, this.projection), this.viewPortSize);
+  }
+  // map zoom level (0 = the entire world)
+  getZoomLevel() {
+    return zoomLevelForResolution(this.getResolution());
+  }
   // get extent for drawn map
   getMapExtent() {
     const mapSizeInPixels = this.mapSize;
@@ -6259,6 +6306,7 @@ class View {
       zoomLevel: transform.k,
       pixelRatio: this.pixelRatio,
       padding: this.padding,
+      viewPortSize: this.viewPortSize,
       sizeInPixels: scaleSize(this.viewPortSize, this.pixelRatio),
       visibleExtent: this.getVisibleExtent(transform, projection)
     };
@@ -6279,6 +6327,7 @@ const styles$3 = {
 const mobileHelpText = "Use two fingers to zoom";
 const Map$1 = forwardRef(({
   config,
+  inModalState = false,
   onLoad,
   children
 }, ref) => {
@@ -6294,6 +6343,7 @@ const Map$1 = forwardRef(({
       view: new View(config.view),
       target: targetRef.current
     });
+    map2.collaborativeGesturesEnabled = !inModalState;
     map2.addLayers(layers);
     setMap(map2);
     if (ref)
@@ -6332,6 +6382,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,
@@ -6472,11 +6527,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();
     }
   }
@@ -6500,12 +6555,15 @@ class TextLayerRenderer {
     style2.pointerEvents = "none";
     style2.overflow = "hidden";
   }
-  renderFrame(frameState) {
+  renderFrame(frameState, targetElement) {
+    if (this.layer.opacity === 0)
+      return targetElement;
     const {
       declutterTree
     } = frameState;
     const {
       projection,
+      viewPortSize,
       sizeInPixels,
       visibleExtent,
       transform
@@ -6524,15 +6582,15 @@ class TextLayerRenderer {
       const featureStyle = styleFunction2(feature);
       const textElement = this.getTextElementWithID(feature.uid);
       textElement.innerText = featureStyle.text.content;
-      const [x, y] = transform.apply(point.coordinates);
+      const [relativeX, relativeY] = transform.apply(point.coordinates).map((d2, i) => d2 / sizeInPixels[i]);
       const position = {
-        left: `${x / sizeInPixels[0] * 100}%`,
-        top: `${y / sizeInPixels[1] * 100}%`
+        left: `${relativeX * 100}%`,
+        top: `${relativeY * 100}%`
       };
       this.styleTextElement(textElement, featureStyle.text, position);
       const bbox = this.getElementBBox(textElement, {
-        x,
-        y
+        x: relativeX * viewPortSize[0],
+        y: relativeY * viewPortSize[1]
       });
       if (declutterTree.collides(bbox)) {
         continue;
@@ -6598,7 +6656,7 @@ class TextLayerRenderer {
     style2.top = `${bbox.minY}px`;
     style2.width = `${bbox.maxX - bbox.minX}px`;
     style2.height = `${bbox.maxY - bbox.minY}px`;
-    style2.border = "1px solid black";
+    style2.border = "2px solid black";
     return element;
   }
 }
@@ -6609,15 +6667,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 {
@@ -7110,9 +7216,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),
@@ -7120,25 +7226,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)
     });
   };
@@ -7204,22 +7309,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",