@optimum-intelligence/opti-ui 0.7.2 → 0.7.3

package/dist/components/map/Map.js

@@ -1,7 +1,8 @@
 "use client";
 import { cx } from "../../utils/cx.js";
 import { seriesColor } from "../../theme/series.js";
-import { EyeIcon, EyeOffIcon } from "../../icons/index.js";
+import { EyeIcon, EyeOffIcon, LayersIcon } from "../../icons/index.js";
+import { IconButton } from "../button/Button.js";
 import { SegmentedControl } from "../toggle/Toggle.js";
 import { useResolvedColors } from "./colors.js";
 import { c } from "react/compiler-runtime";
@@ -34,7 +35,8 @@ var defaultLabels = {
 	depot: "Depot",
 	noData: "No data to show",
 	expand: "Expand map",
-	collapse: "Exit expanded map"
+	collapse: "Exit expanded map",
+	baseLayer: "Base map"
 };
 var MapContext = React.createContext(null);
 function useMapContext(part) {
@@ -369,7 +371,7 @@ function usePartId(prefix) {
 * </Map.Root>
 */
 function MapRoot(t0) {
-	const $ = c(82);
+	const $ = c(87);
 	let baseLayer;
 	let baseLayers;
 	let children;
@@ -387,8 +389,9 @@ function MapRoot(t0) {
 	let t1;
 	let t2;
 	let t3;
+	let t4;
 	if ($[0] !== t0) {
-		({ref, baseLayers, baseLayer, defaultBaseLayer, onBaseLayerChange, initialView, fit: t1, labels, controlsPosition: t2, expandable: t3, className, style, children, onClick, onMouseMove, onMouseOut, ...props} = t0);
+		({ref, baseLayers, baseLayer, defaultBaseLayer, onBaseLayerChange, initialView, fit: t1, labels, controlsPosition: t2, expandable: t3, attributionCollapsed: t4, className, style, children, onClick, onMouseMove, onMouseOut, ...props} = t0);
 		$[0] = t0;
 		$[1] = baseLayer;
 		$[2] = baseLayers;
@@ -407,6 +410,7 @@ function MapRoot(t0) {
 		$[15] = t1;
 		$[16] = t2;
 		$[17] = t3;
+		$[18] = t4;
 	} else {
 		baseLayer = $[1];
 		baseLayers = $[2];
@@ -425,62 +429,64 @@ function MapRoot(t0) {
 		t1 = $[15];
 		t2 = $[16];
 		t3 = $[17];
+		t4 = $[18];
 	}
 	const fit = t1 === void 0 ? "data" : t1;
 	const controlsPosition = t2 === void 0 ? "top-right" : t2;
 	const expandable = t3 === void 0 ? false : t3;
+	const attributionCollapsed = t4 === void 0 ? false : t4;
 	const [element, setElement] = React.useState(null);
 	const [map, setMap] = React.useState(null);
-	let t4;
-	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = {};
-		$[18] = t4;
-	} else t4 = $[18];
-	const [parts, setParts] = React.useState(t4);
-	const [internalLayer, setInternalLayer] = React.useState(defaultBaseLayer ?? baseLayers[0]?.id ?? "");
-	const [cursor, setCursor] = React.useState("");
-	const [expanded, setExpanded] = React.useState(false);
 	let t5;
 	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = {};
 		$[19] = t5;
 	} else t5 = $[19];
-	const handlers = React.useRef(t5);
+	const [parts, setParts] = React.useState(t5);
+	const [internalLayer, setInternalLayer] = React.useState(defaultBaseLayer ?? baseLayers[0]?.id ?? "");
+	const [cursor, setCursor] = React.useState("");
+	const [expanded, setExpanded] = React.useState(false);
+	let t6;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = {};
+		$[20] = t6;
+	} else t6 = $[20];
+	const handlers = React.useRef(t6);
 	const hovered = React.useRef(null);
 	const colors = useResolvedColors(element);
-	let t6;
-	if ($[20] !== labels) {
-		t6 = {
+	let t7;
+	if ($[21] !== labels) {
+		t7 = {
 			...defaultLabels,
 			...labels
 		};
-		$[20] = labels;
-		$[21] = t6;
-	} else t6 = $[21];
-	const text = t6;
+		$[21] = labels;
+		$[22] = t7;
+	} else t7 = $[22];
+	const text = t7;
 	const currentId = baseLayer ?? internalLayer;
-	let t7;
-	if ($[22] !== baseLayers || $[23] !== currentId) {
-		t7 = baseLayers.find((l) => l.id === currentId) ?? baseLayers[0];
-		$[22] = baseLayers;
-		$[23] = currentId;
-		$[24] = t7;
-	} else t7 = $[24];
-	const current = t7;
-	const mapStyle = colors.dark && current?.darkStyle ? current.darkStyle : current?.style;
 	let t8;
-	if ($[25] !== onBaseLayerChange) {
-		t8 = (id) => {
+	if ($[23] !== baseLayers || $[24] !== currentId) {
+		t8 = baseLayers.find((l) => l.id === currentId) ?? baseLayers[0];
+		$[23] = baseLayers;
+		$[24] = currentId;
+		$[25] = t8;
+	} else t8 = $[25];
+	const current = t8;
+	const mapStyle = colors.dark && current?.darkStyle ? current.darkStyle : current?.style;
+	let t9;
+	if ($[26] !== onBaseLayerChange) {
+		t9 = (id) => {
 			setInternalLayer(id);
 			onBaseLayerChange?.(id);
 		};
-		$[25] = onBaseLayerChange;
-		$[26] = t8;
-	} else t8 = $[26];
-	const setBaseLayer = t8;
-	let t9;
-	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = (partId, part) => {
+		$[26] = onBaseLayerChange;
+		$[27] = t9;
+	} else t9 = $[27];
+	const setBaseLayer = t9;
+	let t10;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = (partId, part) => {
 			setParts((prev) => {
 				const next = { ...prev };
 				if (part) next[partId] = part;
@@ -488,61 +494,61 @@ function MapRoot(t0) {
 				return next;
 			});
 		};
-		$[27] = t9;
-	} else t9 = $[27];
-	const register = t9;
-	let t10;
-	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = (partId_0, value) => {
+		$[28] = t10;
+	} else t10 = $[28];
+	const register = t10;
+	let t11;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = (partId_0, value) => {
 			if (value) handlers.current[partId_0] = value;
 			else delete handlers.current[partId_0];
 		};
-		$[28] = t10;
-	} else t10 = $[28];
-	const setHandlers = t10;
+		$[29] = t11;
+	} else t11 = $[29];
+	const setHandlers = t11;
 	let dataKey;
 	let empty;
 	let interactiveLayerIds;
 	let ownerOf;
-	let t11;
-	if ($[29] !== fit || $[30] !== parts) {
+	let t12;
+	if ($[30] !== fit || $[31] !== parts) {
 		const entries = Object.entries(parts);
 		interactiveLayerIds = entries.flatMap(_temp3);
-		ownerOf = (layerId) => entries.find((t12) => {
-			const [, part_1] = t12;
+		ownerOf = (layerId) => entries.find((t13) => {
+			const [, part_1] = t13;
 			return part_1.layerIds.includes(layerId);
 		})?.[0];
 		empty = entries.length > 0 && entries.every(_temp4);
 		const corners = _temp5;
 		const boundsKey = _temp7;
-		dataKey = fit === "none" ? "" : boundsKey(extend(null, entries.map((t13) => {
-			const [, part_3] = t13;
+		dataKey = fit === "none" ? "" : boundsKey(extend(null, entries.map((t14) => {
+			const [, part_3] = t14;
 			return corners(part_3.bounds);
 		})));
-		t11 = fit === "selected" ? boundsKey(extend(null, entries.map((t14) => {
-			const [, part_4] = t14;
+		t12 = fit === "selected" ? boundsKey(extend(null, entries.map((t15) => {
+			const [, part_4] = t15;
 			return corners(part_4.selectedBounds);
 		}))) : "";
-		$[29] = fit;
-		$[30] = parts;
-		$[31] = dataKey;
-		$[32] = empty;
-		$[33] = interactiveLayerIds;
-		$[34] = ownerOf;
-		$[35] = t11;
+		$[30] = fit;
+		$[31] = parts;
+		$[32] = dataKey;
+		$[33] = empty;
+		$[34] = interactiveLayerIds;
+		$[35] = ownerOf;
+		$[36] = t12;
 	} else {
-		dataKey = $[31];
-		empty = $[32];
-		interactiveLayerIds = $[33];
-		ownerOf = $[34];
-		t11 = $[35];
+		dataKey = $[32];
+		empty = $[33];
+		interactiveLayerIds = $[34];
+		ownerOf = $[35];
+		t12 = $[36];
 	}
-	const selectionKey = t11;
+	const selectionKey = t12;
 	const userMoved = React.useRef(false);
-	let t12;
 	let t13;
-	if ($[36] !== map) {
-		t12 = () => {
+	let t14;
+	if ($[37] !== map) {
+		t13 = () => {
 			const instance = map?.getMap();
 			if (!instance) return;
 			const onMoveStart = (event) => {
@@ -553,28 +559,28 @@ function MapRoot(t0) {
 				instance.off("movestart", onMoveStart);
 			};
 		};
-		t13 = [map];
-		$[36] = map;
-		$[37] = t12;
+		t14 = [map];
+		$[37] = map;
 		$[38] = t13;
+		$[39] = t14;
 	} else {
-		t12 = $[37];
 		t13 = $[38];
+		t14 = $[39];
 	}
-	React.useEffect(t12, t13);
-	let t14;
-	if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = {
+	React.useEffect(t13, t14);
+	let t15;
+	if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = {
 			data: "",
 			selection: ""
 		};
-		$[39] = t14;
-	} else t14 = $[39];
-	const fitted = React.useRef(t14);
-	let t15;
+		$[40] = t15;
+	} else t15 = $[40];
+	const fitted = React.useRef(t15);
 	let t16;
-	if ($[40] !== dataKey || $[41] !== map || $[42] !== selectionKey) {
-		t15 = () => {
+	let t17;
+	if ($[41] !== dataKey || $[42] !== map || $[43] !== selectionKey) {
+		t16 = () => {
 			if (!map) return;
 			const prev_0 = fitted.current;
 			fitted.current = {
@@ -592,24 +598,24 @@ function MapRoot(t0) {
 				duration: 400
 			});
 		};
-		t16 = [
+		t17 = [
 			map,
 			dataKey,
 			selectionKey
 		];
-		$[40] = dataKey;
-		$[41] = map;
-		$[42] = selectionKey;
-		$[43] = t15;
+		$[41] = dataKey;
+		$[42] = map;
+		$[43] = selectionKey;
 		$[44] = t16;
+		$[45] = t17;
 	} else {
-		t15 = $[43];
 		t16 = $[44];
+		t17 = $[45];
 	}
-	React.useEffect(t15, t16);
-	let t17;
-	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = (next_0, event_0) => {
+	React.useEffect(t16, t17);
+	let t18;
+	if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = (next_0, event_0) => {
 			const prev_1 = hovered.current;
 			const key_0 = _temp8;
 			if (key_0(prev_1) === key_0(next_0)) return;
@@ -625,13 +631,13 @@ function MapRoot(t0) {
 			hovered.current = next_0;
 			setCursor(next_0 ? "pointer" : "");
 		};
-		$[45] = t17;
-	} else t17 = $[45];
-	const setHover = t17;
-	let t18;
+		$[46] = t18;
+	} else t18 = $[46];
+	const setHover = t18;
 	let t19;
-	if ($[46] !== expanded) {
-		t18 = () => {
+	let t20;
+	if ($[47] !== expanded) {
+		t19 = () => {
 			if (!expanded) return;
 			const onKeyDown = (event_1) => {
 				if (event_1.key === "Escape" && !event_1.defaultPrevented) setExpanded(false);
@@ -639,35 +645,66 @@ function MapRoot(t0) {
 			document.addEventListener("keydown", onKeyDown);
 			return () => document.removeEventListener("keydown", onKeyDown);
 		};
-		t19 = [expanded];
-		$[46] = expanded;
-		$[47] = t18;
+		t20 = [expanded];
+		$[47] = expanded;
 		$[48] = t19;
+		$[49] = t20;
 	} else {
-		t18 = $[47];
 		t19 = $[48];
+		t20 = $[49];
 	}
-	React.useEffect(t18, t19);
-	let t20;
-	if ($[49] !== initialView) {
-		t20 = initialView && "bounds" in initialView ? {
-			bounds: initialView.bounds,
-			fitBoundsOptions: { padding: 48 }
-		} : initialView;
-		$[49] = initialView;
-		$[50] = t20;
-	} else t20 = $[50];
-	const initialViewState = t20;
+	React.useEffect(t19, t20);
 	let t21;
-	if ($[51] !== className) {
-		t21 = cx("oui-map", className);
-		$[51] = className;
+	let t22;
+	if ($[50] !== attributionCollapsed || $[51] !== element) {
+		t21 = () => {
+			if (!element || !attributionCollapsed) return;
+			const collapse = () => {
+				const attribution = element.querySelector(".maplibregl-ctrl-attrib.maplibregl-compact-show:not([data-oui-collapsed])");
+				if (!attribution) return;
+				attribution.classList.remove("maplibregl-compact-show");
+				attribution.setAttribute("data-oui-collapsed", "");
+			};
+			const observer = new MutationObserver(collapse);
+			observer.observe(element, {
+				subtree: true,
+				childList: true,
+				attributes: true,
+				attributeFilter: ["class"]
+			});
+			collapse();
+			return () => observer.disconnect();
+		};
+		t22 = [element, attributionCollapsed];
+		$[50] = attributionCollapsed;
+		$[51] = element;
 		$[52] = t21;
-	} else t21 = $[52];
-	const t22 = expanded || void 0;
+		$[53] = t22;
+	} else {
+		t21 = $[52];
+		t22 = $[53];
+	}
+	React.useEffect(t21, t22);
 	let t23;
-	if ($[53] !== baseLayers || $[54] !== children || $[55] !== colors || $[56] !== controlsPosition || $[57] !== current?.attribution || $[58] !== current?.id || $[59] !== cursor || $[60] !== element || $[61] !== empty || $[62] !== expandable || $[63] !== expanded || $[64] !== initialViewState || $[65] !== interactiveLayerIds || $[66] !== map || $[67] !== mapStyle || $[68] !== onClick || $[69] !== onMouseMove || $[70] !== onMouseOut || $[71] !== ownerOf || $[72] !== props || $[73] !== ref || $[74] !== setBaseLayer || $[75] !== text) {
-		t23 = element && /* @__PURE__ */ jsx(Map, {
+	if ($[54] !== initialView) {
+		t23 = initialView && "bounds" in initialView ? {
+			bounds: initialView.bounds,
+			fitBoundsOptions: { padding: 48 }
+		} : initialView;
+		$[54] = initialView;
+		$[55] = t23;
+	} else t23 = $[55];
+	const initialViewState = t23;
+	let t24;
+	if ($[56] !== className) {
+		t24 = cx("oui-map", className);
+		$[56] = className;
+		$[57] = t24;
+	} else t24 = $[57];
+	const t25 = expanded || void 0;
+	let t26;
+	if ($[58] !== baseLayers || $[59] !== children || $[60] !== colors || $[61] !== controlsPosition || $[62] !== current?.attribution || $[63] !== current?.id || $[64] !== cursor || $[65] !== element || $[66] !== empty || $[67] !== expandable || $[68] !== expanded || $[69] !== initialViewState || $[70] !== interactiveLayerIds || $[71] !== map || $[72] !== mapStyle || $[73] !== onClick || $[74] !== onMouseMove || $[75] !== onMouseOut || $[76] !== ownerOf || $[77] !== props || $[78] !== ref || $[79] !== setBaseLayer || $[80] !== text) {
+		t26 = element && /* @__PURE__ */ jsx(Map, {
 			...props,
 			mapLib: loadMapLib(),
 			ref: (instance_1) => {
@@ -737,47 +774,47 @@ function MapRoot(t0) {
 				]
 			})
 		});
-		$[53] = baseLayers;
-		$[54] = children;
-		$[55] = colors;
-		$[56] = controlsPosition;
-		$[57] = current?.attribution;
-		$[58] = current?.id;
-		$[59] = cursor;
-		$[60] = element;
-		$[61] = empty;
-		$[62] = expandable;
-		$[63] = expanded;
-		$[64] = initialViewState;
-		$[65] = interactiveLayerIds;
-		$[66] = map;
-		$[67] = mapStyle;
-		$[68] = onClick;
-		$[69] = onMouseMove;
-		$[70] = onMouseOut;
-		$[71] = ownerOf;
-		$[72] = props;
-		$[73] = ref;
-		$[74] = setBaseLayer;
-		$[75] = text;
-		$[76] = t23;
-	} else t23 = $[76];
-	let t24;
-	if ($[77] !== style || $[78] !== t21 || $[79] !== t22 || $[80] !== t23) {
-		t24 = /* @__PURE__ */ jsx("div", {
+		$[58] = baseLayers;
+		$[59] = children;
+		$[60] = colors;
+		$[61] = controlsPosition;
+		$[62] = current?.attribution;
+		$[63] = current?.id;
+		$[64] = cursor;
+		$[65] = element;
+		$[66] = empty;
+		$[67] = expandable;
+		$[68] = expanded;
+		$[69] = initialViewState;
+		$[70] = interactiveLayerIds;
+		$[71] = map;
+		$[72] = mapStyle;
+		$[73] = onClick;
+		$[74] = onMouseMove;
+		$[75] = onMouseOut;
+		$[76] = ownerOf;
+		$[77] = props;
+		$[78] = ref;
+		$[79] = setBaseLayer;
+		$[80] = text;
+		$[81] = t26;
+	} else t26 = $[81];
+	let t27;
+	if ($[82] !== style || $[83] !== t24 || $[84] !== t25 || $[85] !== t26) {
+		t27 = /* @__PURE__ */ jsx("div", {
 			ref: setElement,
-			className: t21,
+			className: t24,
 			style,
-			"data-expanded": t22,
-			children: t23
+			"data-expanded": t25,
+			children: t26
 		});
-		$[77] = style;
-		$[78] = t21;
-		$[79] = t22;
-		$[80] = t23;
-		$[81] = t24;
-	} else t24 = $[81];
-	return t24;
+		$[82] = style;
+		$[83] = t24;
+		$[84] = t25;
+		$[85] = t26;
+		$[86] = t27;
+	} else t27 = $[86];
+	return t27;
 }
 /** The expand button as a MapLibre control, so it stacks with the zoom buttons in the same corner. */
 function _temp9(value_0) {
@@ -1773,7 +1810,7 @@ function MapOverlay(t0) {
 * />
 */
 function MapLegend(t0) {
-	const $ = c(48);
+	const $ = c(50);
 	let className;
 	let items;
 	let onSelectedIdsChange;
@@ -1783,8 +1820,9 @@ function MapLegend(t0) {
 	let t1;
 	let t2;
 	let t3;
+	let t4;
 	if ($[0] !== t0) {
-		({items, selectionMode: t1, selectedIds: t2, onSelectedIdsChange, onVisibilityChange, showAllToggle: t3, className, ref, ...props} = t0);
+		({items, selectionMode: t1, selectedIds: t2, onSelectedIdsChange, onVisibilityChange, showAllToggle: t3, size: t4, className, ref, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = items;
@@ -1795,6 +1833,7 @@ function MapLegend(t0) {
 		$[7] = t1;
 		$[8] = t2;
 		$[9] = t3;
+		$[10] = t4;
 	} else {
 		className = $[1];
 		items = $[2];
@@ -1805,63 +1844,65 @@ function MapLegend(t0) {
 		t1 = $[7];
 		t2 = $[8];
 		t3 = $[9];
+		t4 = $[10];
 	}
 	const selectionMode = t1 === void 0 ? "none" : t1;
-	let t4;
-	if ($[10] !== t2) {
-		t4 = t2 === void 0 ? [] : t2;
-		$[10] = t2;
-		$[11] = t4;
-	} else t4 = $[11];
-	const selectedIds = t4;
+	let t5;
+	if ($[11] !== t2) {
+		t5 = t2 === void 0 ? [] : t2;
+		$[11] = t2;
+		$[12] = t5;
+	} else t5 = $[12];
+	const selectedIds = t5;
 	const showAllToggle = t3 === void 0 ? false : t3;
+	const size = t4 === void 0 ? "md" : t4;
 	const labels = React.use(MapContext)?.labels ?? defaultLabels;
-	let t5;
-	if ($[12] !== items) {
-		t5 = items.every(_temp13);
-		$[12] = items;
-		$[13] = t5;
-	} else t5 = $[13];
-	const allVisible = t5;
 	let t6;
-	if ($[14] !== onSelectedIdsChange || $[15] !== selectedIds || $[16] !== selectionMode) {
-		t6 = (id) => {
+	if ($[13] !== items) {
+		t6 = items.every(_temp13);
+		$[13] = items;
+		$[14] = t6;
+	} else t6 = $[14];
+	const allVisible = t6;
+	let t7;
+	if ($[15] !== onSelectedIdsChange || $[16] !== selectedIds || $[17] !== selectionMode) {
+		t7 = (id) => {
 			const on = selectedIds.includes(id);
 			if (selectionMode === "single") onSelectedIdsChange?.(on ? [] : [id]);
 			else onSelectedIdsChange?.(on ? selectedIds.filter((s) => s !== id) : [...selectedIds, id]);
 		};
-		$[14] = onSelectedIdsChange;
-		$[15] = selectedIds;
-		$[16] = selectionMode;
-		$[17] = t6;
-	} else t6 = $[17];
-	const toggle = t6;
-	let t7;
-	if ($[18] !== className) {
-		t7 = cx("oui-map-legend", className);
-		$[18] = className;
-		$[19] = t7;
-	} else t7 = $[19];
+		$[15] = onSelectedIdsChange;
+		$[16] = selectedIds;
+		$[17] = selectionMode;
+		$[18] = t7;
+	} else t7 = $[18];
+	const toggle = t7;
 	let t8;
-	if ($[20] !== allVisible || $[21] !== items || $[22] !== labels || $[23] !== onVisibilityChange || $[24] !== showAllToggle) {
-		t8 = onVisibilityChange && showAllToggle && /* @__PURE__ */ jsx("button", {
+	if ($[19] !== className) {
+		t8 = cx("oui-map-legend", className);
+		$[19] = className;
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== allVisible || $[22] !== items || $[23] !== labels || $[24] !== onVisibilityChange || $[25] !== showAllToggle) {
+		t9 = onVisibilityChange && showAllToggle && /* @__PURE__ */ jsx("button", {
 			type: "button",
 			className: "oui-map-legend__toggle-all",
 			onClick: () => onVisibilityChange(items.map(_temp14), !allVisible),
 			children: allVisible ? labels.hideAll : labels.showAll
 		});
-		$[20] = allVisible;
-		$[21] = items;
-		$[22] = labels;
-		$[23] = onVisibilityChange;
-		$[24] = showAllToggle;
-		$[25] = t8;
-	} else t8 = $[25];
-	let t9;
-	if ($[26] !== items || $[27] !== labels || $[28] !== onVisibilityChange || $[29] !== selectedIds || $[30] !== selectionMode || $[31] !== toggle) {
-		let t10;
-		if ($[33] !== labels || $[34] !== onVisibilityChange || $[35] !== selectedIds || $[36] !== selectionMode || $[37] !== toggle) {
-			t10 = (item_1) => {
+		$[21] = allVisible;
+		$[22] = items;
+		$[23] = labels;
+		$[24] = onVisibilityChange;
+		$[25] = showAllToggle;
+		$[26] = t9;
+	} else t9 = $[26];
+	let t10;
+	if ($[27] !== items || $[28] !== labels || $[29] !== onVisibilityChange || $[30] !== selectedIds || $[31] !== selectionMode || $[32] !== toggle) {
+		let t11;
+		if ($[34] !== labels || $[35] !== onVisibilityChange || $[36] !== selectedIds || $[37] !== selectionMode || $[38] !== toggle) {
+			t11 = (item_1) => {
 				const selected = selectedIds.includes(item_1.id);
 				const visible = item_1.visible !== false;
 				const content = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1900,49 +1941,51 @@ function MapLegend(t0) {
 					})]
 				}, item_1.id);
 			};
-			$[33] = labels;
-			$[34] = onVisibilityChange;
-			$[35] = selectedIds;
-			$[36] = selectionMode;
-			$[37] = toggle;
-			$[38] = t10;
-		} else t10 = $[38];
-		t9 = items.map(t10);
-		$[26] = items;
-		$[27] = labels;
-		$[28] = onVisibilityChange;
-		$[29] = selectedIds;
-		$[30] = selectionMode;
-		$[31] = toggle;
-		$[32] = t9;
-	} else t9 = $[32];
-	let t10;
-	if ($[39] !== t9) {
-		t10 = /* @__PURE__ */ jsx("ul", {
+			$[34] = labels;
+			$[35] = onVisibilityChange;
+			$[36] = selectedIds;
+			$[37] = selectionMode;
+			$[38] = toggle;
+			$[39] = t11;
+		} else t11 = $[39];
+		t10 = items.map(t11);
+		$[27] = items;
+		$[28] = labels;
+		$[29] = onVisibilityChange;
+		$[30] = selectedIds;
+		$[31] = selectionMode;
+		$[32] = toggle;
+		$[33] = t10;
+	} else t10 = $[33];
+	let t11;
+	if ($[40] !== t10) {
+		t11 = /* @__PURE__ */ jsx("ul", {
 			className: "oui-map-legend__list",
-			children: t9
+			children: t10
 		});
-		$[39] = t9;
 		$[40] = t10;
-	} else t10 = $[40];
-	let t11;
-	if ($[41] !== props || $[42] !== ref || $[43] !== selectionMode || $[44] !== t10 || $[45] !== t7 || $[46] !== t8) {
-		t11 = /* @__PURE__ */ jsxs("div", {
+		$[41] = t11;
+	} else t11 = $[41];
+	let t12;
+	if ($[42] !== props || $[43] !== ref || $[44] !== selectionMode || $[45] !== size || $[46] !== t11 || $[47] !== t8 || $[48] !== t9) {
+		t12 = /* @__PURE__ */ jsxs("div", {
 			ref,
-			className: t7,
+			className: t8,
 			"data-selection-mode": selectionMode,
+			"data-size": size,
 			...props,
-			children: [t8, t10]
+			children: [t9, t11]
 		});
-		$[41] = props;
-		$[42] = ref;
-		$[43] = selectionMode;
-		$[44] = t10;
-		$[45] = t7;
-		$[46] = t8;
-		$[47] = t11;
-	} else t11 = $[47];
-	return t11;
+		$[42] = props;
+		$[43] = ref;
+		$[44] = selectionMode;
+		$[45] = size;
+		$[46] = t11;
+		$[47] = t8;
+		$[48] = t9;
+		$[49] = t12;
+	} else t12 = $[49];
+	return t12;
 }
 function _temp14(item_0) {
 	return item_0.id;
@@ -1950,45 +1993,118 @@ function _temp14(item_0) {
 function _temp13(item) {
 	return item.visible !== false;
 }
-/** Segmented switch between the root's `baseLayers` (e.g. streets and satellite). Put it in a `Map.Overlay`. */
+/**
+* Switch between the root's `baseLayers` (e.g. streets and satellite): a segmented switch, or with
+* `variant="icon"` a single button that cycles them. Put it in a `Map.Overlay`.
+*/
 function MapBaseLayerSwitch(t0) {
-	const $ = c(11);
+	const $ = c(33);
+	let className;
 	let props;
 	let t1;
+	let t2;
 	if ($[0] !== t0) {
-		({size: t1, ...props} = t0);
+		({variant: t1, size: t2, className, ...props} = t0);
 		$[0] = t0;
-		$[1] = props;
-		$[2] = t1;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = t2;
 	} else {
-		props = $[1];
-		t1 = $[2];
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+		t2 = $[4];
+	}
+	const variant = t1 === void 0 ? "segmented" : t1;
+	const size = t2 === void 0 ? "sm" : t2;
+	const { baseLayers, baseLayer, setBaseLayer, labels } = useMapContext("Map.BaseLayerSwitch");
+	if (variant === "icon") {
+		let t3;
+		if ($[5] !== baseLayer || $[6] !== baseLayers) {
+			let t4;
+			if ($[8] !== baseLayer) {
+				t4 = (layer) => layer.id === baseLayer;
+				$[8] = baseLayer;
+				$[9] = t4;
+			} else t4 = $[9];
+			t3 = baseLayers.findIndex(t4);
+			$[5] = baseLayer;
+			$[6] = baseLayers;
+			$[7] = t3;
+		} else t3 = $[7];
+		const index = Math.max(0, t3);
+		const shown = baseLayers[index];
+		const name = `${labels.baseLayer}: ${typeof shown?.label === "string" ? shown.label : shown?.id ?? ""}`;
+		const t4 = typeof className === "string" && className;
+		let t5;
+		if ($[10] !== t4) {
+			t5 = cx("oui-map__layer-switch", t4);
+			$[10] = t4;
+			$[11] = t5;
+		} else t5 = $[11];
+		const t6 = baseLayers.length < 2;
+		let t7;
+		if ($[12] !== baseLayers || $[13] !== index || $[14] !== setBaseLayer) {
+			t7 = () => setBaseLayer(baseLayers[(index + 1) % baseLayers.length].id);
+			$[12] = baseLayers;
+			$[13] = index;
+			$[14] = setBaseLayer;
+			$[15] = t7;
+		} else t7 = $[15];
+		let t8;
+		if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+			t8 = /* @__PURE__ */ jsx(LayersIcon, {});
+			$[16] = t8;
+		} else t8 = $[16];
+		let t9;
+		if ($[17] !== name || $[18] !== size || $[19] !== t5 || $[20] !== t6 || $[21] !== t7) {
+			t9 = /* @__PURE__ */ jsx(IconButton, {
+				variant: "secondary",
+				size,
+				className: t5,
+				"aria-label": name,
+				title: name,
+				disabled: t6,
+				onClick: t7,
+				children: t8
+			});
+			$[17] = name;
+			$[18] = size;
+			$[19] = t5;
+			$[20] = t6;
+			$[21] = t7;
+			$[22] = t9;
+		} else t9 = $[22];
+		return t9;
 	}
-	const size = t1 === void 0 ? "sm" : t1;
-	const { baseLayers, baseLayer, setBaseLayer } = useMapContext("Map.BaseLayerSwitch");
-	let t2;
-	if ($[3] !== baseLayers) {
-		t2 = baseLayers.map(_temp15);
-		$[3] = baseLayers;
-		$[4] = t2;
-	} else t2 = $[4];
 	let t3;
-	if ($[5] !== baseLayer || $[6] !== props || $[7] !== setBaseLayer || $[8] !== size || $[9] !== t2) {
-		t3 = /* @__PURE__ */ jsx(SegmentedControl, {
+	if ($[23] !== baseLayers) {
+		t3 = baseLayers.map(_temp15);
+		$[23] = baseLayers;
+		$[24] = t3;
+	} else t3 = $[24];
+	let t4;
+	if ($[25] !== baseLayer || $[26] !== className || $[27] !== props || $[28] !== setBaseLayer || $[29] !== size || $[30] !== t3 || $[31] !== variant) {
+		t4 = /* @__PURE__ */ jsx(SegmentedControl, {
+			variant,
 			size,
-			options: t2,
+			className,
+			options: t3,
 			value: baseLayer,
 			onValueChange: setBaseLayer,
 			...props
 		});
-		$[5] = baseLayer;
-		$[6] = props;
-		$[7] = setBaseLayer;
-		$[8] = size;
-		$[9] = t2;
-		$[10] = t3;
-	} else t3 = $[10];
-	return t3;
+		$[25] = baseLayer;
+		$[26] = className;
+		$[27] = props;
+		$[28] = setBaseLayer;
+		$[29] = size;
+		$[30] = t3;
+		$[31] = variant;
+		$[32] = t4;
+	} else t4 = $[32];
+	return t4;
 }
 /**
 * Map components on MapLibre, from `@optimum-intelligence/opti-ui/map`. `Map.Root` holds the map; inside
@@ -2008,10 +2124,10 @@ function MapBaseLayerSwitch(t0) {
 *   </Map.Overlay>
 * </Map.Root>
 */
-function _temp15(layer) {
+function _temp15(layer_0) {
 	return {
-		value: layer.id,
-		label: layer.label
+		value: layer_0.id,
+		label: layer_0.label
 	};
 }
 var Map$1 = {