@powerportalspro/react-maps 0.0.0-stage → 13.0.0

package/dist/index.js

@@ -0,0 +1,3603 @@
+import { ensureMapStyles, ensureStyleSheet, AZURE_MAPS_ENDPOINT, azureMapsHeaders } from './chunk-7HDK44TQ.js';
+export { setMapLibreWorkerUrl } from './chunk-7HDK44TQ.js';
+import { boundsOfItems, isValidPosition, approximateBounds, padBounds, boundsContain, toBoundingBox, nominatimGeocoder, esriGeocoder, azureMapsGeocoder } from './chunk-G723VLPV.js';
+import { makeStyles, tokens, shorthands, Button, Spinner, MessageBar, MessageBarBody, Text, mergeClasses, Card, Link, Subtitle2, Popover, PopoverTrigger, Tooltip, PopoverSurface, Label, Field, Dropdown, Option, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions } from '@fluentui/react-components';
+import { usePrefixedT, useLocale, usePowerPortalsPro, useRecordPages, useViewMetadata, useTableMetadata, useT } from '@powerportalspro/react';
+import { SharedTooltip, MapPrintButton, useSavedViews, useMultiTableViews, EVERY_TABLE_VIEW_ID, useMultiTableTableSet, useSavedViewSession, ViewToolbar, ViewFilterMenu, ViewRefreshButton, ViewPicker, MultiTableFilterDialog, SavedViewDialogs, AddressMapServiceContext, GridMapRendererContext, GridNearSearchContext } from '@powerportalspro/react-fluent';
+import { forwardRef, useRef, useState, useMemo, useEffect, useImperativeHandle, useLayoutEffect } from 'react';
+import { Dismiss16Regular, Location24Filled, Location24Regular, MyLocation20Regular } from '@fluentui/react-icons';
+import { ColumnType, resolveColumnDisplayValue, getRecordReferenceId, readColumnRawValue, findRecordPage, recordPageUrl, savedViewControl, SavedViewControlKind, MultiTableViewSchema, MultiTableUses, defaultViewId, isViewHidden, shownViewTables } from '@powerportalspro/core';
+import Supercluster from 'supercluster';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/core/registry.ts
+var REGISTRY = /* @__PURE__ */ Symbol.for("powerportalspro.maps.providers");
+function registry() {
+  const global = globalThis;
+  return global[REGISTRY] ??= /* @__PURE__ */ new Map();
+}
+function registerMapProvider(provider) {
+  registry().set(provider.name, provider);
+}
+var BUILT_IN = {
+  azureMaps: () => import(
+    /* webpackChunkName: "maplibre" */
+    './maplibre-J3XSEXEJ.js'
+  ).then((module) => module.mapLibreProvider("azureMaps")),
+  esri: () => import(
+    /* webpackChunkName: "maplibre" */
+    './maplibre-J3XSEXEJ.js'
+  ).then((module) => module.mapLibreProvider("esri")),
+  openStreetMap: () => import(
+    /* webpackChunkName: "maplibre" */
+    './maplibre-J3XSEXEJ.js'
+  ).then((module) => module.mapLibreProvider("openStreetMap")),
+  mapLibre: () => import(
+    /* webpackChunkName: "maplibre" */
+    './maplibre-J3XSEXEJ.js'
+  ).then((module) => module.mapLibreProvider("mapLibre")),
+  google: () => import(
+    /* webpackChunkName: "google" */
+    './google-6EZOUTYI.js'
+  ).then((module) => module.googleProvider)
+};
+async function findMapProvider(name) {
+  const registered = registry().get(name);
+  if (registered) return registered;
+  const load = BUILT_IN[name];
+  return load ? await load() : void 0;
+}
+var BUILT_IN_MAP_PROVIDERS = Object.freeze(Object.keys(BUILT_IN));
+
+// src/core/portal-settings.ts
+var TOKEN_RENEWAL_LEAD = 5 * 6e4;
+var PortalMapSettingsCache = class {
+  entries = /* @__PURE__ */ new Map();
+  /** The settings for `provider`, or the portal's own provider's, from `load` when none are held. */
+  get(provider, load) {
+    const key = provider ?? "";
+    const held = this.entries.get(key);
+    if (held && Date.now() < held.renewAfter) return held.settings;
+    const settings = load(provider);
+    const entry = { settings, renewAfter: Number.POSITIVE_INFINITY };
+    this.entries.set(key, entry);
+    settings.then(
+      (answer) => {
+        if (answer.token) entry.renewAfter = Date.parse(answer.token.expiresOn) - TOKEN_RENEWAL_LEAD;
+        if (provider === void 0 && !this.entries.has(answer.provider)) this.entries.set(answer.provider, entry);
+      },
+      () => {
+        for (const [name, held2] of this.entries) if (held2 === entry) this.entries.delete(name);
+      }
+    );
+    return settings;
+  }
+};
+async function resolveProviderSettings(page, load) {
+  const asked = page?.name;
+  const name = asked === void 0 ? void 0 : BUILT_IN_MAP_PROVIDERS.find((p) => p.toLowerCase() === asked.toLowerCase()) ?? asked;
+  if (!load || name !== void 0 && !BUILT_IN_MAP_PROVIDERS.includes(name)) return page && name ? { ...page, name } : { name: "openStreetMap" };
+  const { provider, token, apiKey, ...portal } = await load(name);
+  const settings = { ...defined(portal), ...defined(page ?? {}), name: name ?? provider };
+  if (apiKey) settings.apiKey = apiKey;
+  if (token) {
+    const providerName = settings.name;
+    settings.getToken = async () => {
+      const answer = await load(providerName);
+      if (!answer.token) throw new Error("The portal didn't issue an Azure Maps token.");
+      return answer.token;
+    };
+  }
+  return settings;
+}
+function defined(values) {
+  return Object.fromEntries(Object.entries(values).filter(([, value]) => value !== null && value !== void 0));
+}
+
+// src/core/address-search.ts
+var MIN_SUGGEST_LENGTH = 3;
+var SUGGEST_DELAY = 250;
+var SEARCH_ICON = '<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><path fill="currentColor" d="M8.5 3a5.5 5.5 0 0 1 4.23 9.02l4.12 4.13a.5.5 0 0 1-.63.76l-.07-.06-4.13-4.12A5.5 5.5 0 1 1 8.5 3Zm0 1a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z"/></svg>';
+var DISMISS_ICON = '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"><path fill="currentColor" d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"/></svg>';
+var nextId = 0;
+var AddressSearchBox = class {
+  constructor(document, host, labels) {
+    this.host = host;
+    this.labels = labels;
+    this.element = document.createElement("div");
+    this.element.className = "ppp-map-search";
+    const field = document.createElement("div");
+    field.className = "ppp-map-search-field";
+    const icon = document.createElement("span");
+    icon.className = "ppp-map-search-icon";
+    icon.innerHTML = SEARCH_ICON;
+    this.input = document.createElement("input");
+    this.input.type = "text";
+    this.input.className = "ppp-map-search-input";
+    this.input.autocomplete = "off";
+    this.input.spellcheck = false;
+    this.input.setAttribute("role", "combobox");
+    this.input.setAttribute("aria-autocomplete", "list");
+    this.input.setAttribute("aria-expanded", "false");
+    this.input.setAttribute("aria-controls", this.listId);
+    this.clearButton = document.createElement("button");
+    this.clearButton.type = "button";
+    this.clearButton.className = "ppp-map-search-clear";
+    this.clearButton.innerHTML = DISMISS_ICON;
+    this.clearButton.hidden = true;
+    field.append(icon, this.input, this.clearButton);
+    this.panel = document.createElement("div");
+    this.panel.className = "ppp-map-search-panel";
+    this.panel.hidden = true;
+    this.list = document.createElement("ul");
+    this.list.className = "ppp-map-search-list";
+    this.list.id = this.listId;
+    this.list.setAttribute("role", "listbox");
+    this.status = document.createElement("div");
+    this.status.className = "ppp-map-search-status";
+    this.status.setAttribute("role", "status");
+    this.panel.append(this.list, this.status);
+    this.element.append(field, this.panel);
+    this.setLabels(labels);
+    this.input.addEventListener("input", () => this.typed());
+    this.input.addEventListener("keydown", (event) => this.keyDown(event));
+    this.input.addEventListener("focus", () => {
+      if (this.suggestions.length && this.suggestedFor === this.text) this.open();
+    });
+    this.element.addEventListener("focusout", (event) => {
+      if (!this.element.contains(event.relatedTarget)) this.close();
+    });
+    this.clearButton.addEventListener("click", () => {
+      this.clear();
+      this.input.focus();
+    });
+    this.list.addEventListener("mousedown", (event) => event.preventDefault());
+    this.list.addEventListener("click", (event) => {
+      const option = event.target.closest('[role="option"]');
+      const index = option ? Number(option.getAttribute("data-index")) : -1;
+      if (index >= 0) void this.choose(index);
+    });
+  }
+  host;
+  labels;
+  element;
+  input;
+  clearButton;
+  panel;
+  list;
+  status;
+  listId = `ppp-map-search-${++nextId}`;
+  suggestions = [];
+  // The text the suggestions are for: Enter on it goes to the first, rather than searching again.
+  suggestedFor = null;
+  active = -1;
+  request = null;
+  timer;
+  disposed = false;
+  /** The text in the box. */
+  get text() {
+    return this.input.value.trim();
+  }
+  setLabels(labels) {
+    this.labels = labels;
+    this.input.placeholder = labels.placeholder;
+    this.input.setAttribute("aria-label", labels.placeholder);
+    this.list.setAttribute("aria-label", labels.placeholder);
+    this.clearButton.setAttribute("aria-label", labels.clear);
+    this.clearButton.dataset.pppTooltip = labels.clear;
+  }
+  /**
+   * Shows a place the map went to from code, as though it had been chosen here: its label in the box,
+   * which Enter goes back to and the clear button takes off the map.
+   */
+  showChosen(label) {
+    this.cancel();
+    this.input.value = label;
+    this.clearButton.hidden = false;
+    this.suggestions = [];
+    this.suggestedFor = null;
+    this.close();
+  }
+  /** Forgets the places listed, which a geocoder that replaced the one that found them can't go to. */
+  forgetSuggestions() {
+    this.cancel();
+    this.suggestions = [];
+    this.suggestedFor = null;
+    this.close();
+  }
+  /** Empties the box and takes the place found off the map. */
+  clear() {
+    this.cancel();
+    this.input.value = "";
+    this.clearButton.hidden = true;
+    this.suggestions = [];
+    this.suggestedFor = null;
+    this.close();
+    this.host.clear();
+  }
+  dispose() {
+    this.disposed = true;
+    this.cancel();
+    this.element.remove();
+  }
+  typed() {
+    this.clearButton.hidden = !this.input.value;
+    this.cancel();
+    this.active = -1;
+    if (!this.host.suggestsAsYouType() || this.text.length < MIN_SUGGEST_LENGTH) {
+      this.suggestions = [];
+      this.suggestedFor = null;
+      this.close();
+      return;
+    }
+    const text = this.text;
+    this.timer = setTimeout(() => void this.run(text, false), SUGGEST_DELAY);
+  }
+  keyDown(event) {
+    const count = this.suggestions.length;
+    switch (event.key) {
+      case "ArrowDown":
+        if (!count) return;
+        event.preventDefault();
+        this.open();
+        this.setActive((this.active + 1) % count);
+        break;
+      case "ArrowUp":
+        if (!count) return;
+        event.preventDefault();
+        this.open();
+        this.setActive(this.active <= 0 ? count - 1 : this.active - 1);
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (!this.panel.hidden && this.active >= 0) void this.choose(this.active);
+        else void this.submit();
+        break;
+      case "Escape":
+        if (!this.panel.hidden) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.close();
+        } else if (this.input.value) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.clear();
+        }
+        break;
+    }
+  }
+  // Enter with no suggestion picked: the first place found for the text, searched for if it hasn't been.
+  async submit() {
+    const text = this.text;
+    if (!text) return false;
+    this.cancel();
+    const found = this.suggestedFor === text && this.suggestions.length ? this.suggestions : await this.run(text, true);
+    if (!found?.length) return false;
+    return this.choose(0);
+  }
+  // The places for `text`: listed as they come, or, asked for with Enter, with a note while they come.
+  async run(text, submitted) {
+    this.cancel();
+    const request = new AbortController();
+    this.request = request;
+    if (submitted) this.showStatus(this.labels.searching);
+    let found;
+    try {
+      found = await this.host.suggest(text, request.signal);
+    } catch (error) {
+      if (request.signal.aborted || this.disposed) return null;
+      this.suggestions = [];
+      this.suggestedFor = null;
+      this.renderList();
+      this.showStatus(this.labels.failed);
+      console.warn("The map's address search failed.", error);
+      return null;
+    }
+    if (request.signal.aborted || this.disposed) return null;
+    this.request = null;
+    this.suggestions = found;
+    this.suggestedFor = text;
+    this.active = -1;
+    this.renderList();
+    if (found.length) {
+      this.status.textContent = "";
+      if (!submitted) this.open();
+    } else {
+      this.showStatus(this.labels.noResults);
+    }
+    return found;
+  }
+  async choose(index) {
+    const suggestion = this.suggestions[index];
+    if (!suggestion) return false;
+    this.cancel();
+    this.input.value = suggestion.detail ? `${suggestion.text}, ${suggestion.detail}` : suggestion.text;
+    this.clearButton.hidden = false;
+    this.suggestions = [suggestion];
+    this.suggestedFor = this.text;
+    this.close();
+    try {
+      if (await this.host.choose(suggestion)) return true;
+      if (!this.disposed) this.showStatus(this.labels.noResults);
+    } catch (error) {
+      if (this.disposed) return false;
+      this.showStatus(this.labels.failed);
+      console.warn("The map's address search couldn't find the place chosen.", error);
+    }
+    return false;
+  }
+  cancel() {
+    clearTimeout(this.timer);
+    this.request?.abort();
+    this.request = null;
+  }
+  renderList() {
+    const document = this.element.ownerDocument;
+    this.list.replaceChildren(
+      ...this.suggestions.map((suggestion, index) => {
+        const option = document.createElement("li");
+        option.id = `${this.listId}-${index}`;
+        option.className = "ppp-map-search-option";
+        option.setAttribute("role", "option");
+        option.setAttribute("aria-selected", "false");
+        option.setAttribute("data-index", `${index}`);
+        const text = document.createElement("span");
+        text.className = "ppp-map-search-text";
+        text.textContent = suggestion.text;
+        option.append(text);
+        if (suggestion.detail) {
+          const detail = document.createElement("span");
+          detail.className = "ppp-map-search-detail";
+          detail.textContent = suggestion.detail;
+          option.append(detail);
+        }
+        return option;
+      })
+    );
+    this.list.hidden = this.suggestions.length === 0;
+    this.setActive(-1);
+  }
+  setActive(index) {
+    this.active = index;
+    this.list.querySelectorAll('[role="option"]').forEach((option, i) => {
+      option.setAttribute("aria-selected", `${i === index}`);
+      option.toggleAttribute("data-active", i === index);
+    });
+    if (index >= 0) {
+      this.input.setAttribute("aria-activedescendant", `${this.listId}-${index}`);
+      this.list.children[index]?.scrollIntoView?.({ block: "nearest" });
+    } else {
+      this.input.removeAttribute("aria-activedescendant");
+    }
+  }
+  showStatus(text) {
+    this.status.textContent = text;
+    this.status.hidden = false;
+    this.list.hidden = true;
+    this.panel.hidden = false;
+    this.input.setAttribute("aria-expanded", "false");
+  }
+  open() {
+    if (!this.suggestions.length) return;
+    this.list.hidden = false;
+    this.status.textContent = "";
+    this.status.hidden = true;
+    this.panel.hidden = false;
+    this.input.setAttribute("aria-expanded", "true");
+  }
+  close() {
+    this.panel.hidden = true;
+    this.status.textContent = "";
+    this.input.setAttribute("aria-expanded", "false");
+    this.setActive(-1);
+  }
+};
+
+// src/core/theme.ts
+var DEFAULT_ITEM_COLOR = "var(--colorBrandBackground, #0f6cbd)";
+function resolveColor(value, scope) {
+  const probe = scope.ownerDocument.createElement("span");
+  probe.style.color = value;
+  if (!probe.style.color) return null;
+  probe.style.display = "none";
+  scope.appendChild(probe);
+  try {
+    const color = getComputedStyle(probe).color;
+    return color && !color.includes("var(") ? color : null;
+  } finally {
+    probe.remove();
+  }
+}
+function channels(color) {
+  const match = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/.exec(color.trim());
+  return match ? [Number(match[1]), Number(match[2]), Number(match[3])] : null;
+}
+function isDarkTheme(element) {
+  const background = getComputedStyle(element).getPropertyValue("--colorNeutralBackground1").trim();
+  if (!background) return false;
+  const rgb = channels(resolveColor(background, element) ?? "");
+  if (!rgb) return false;
+  const [r, g, b] = rgb.map((channel) => {
+    const value = channel / 255;
+    return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b < 0.2;
+}
+function watchTheme(element, onChange) {
+  let pending = false;
+  const notify = () => {
+    if (pending) return;
+    pending = true;
+    requestAnimationFrame(() => {
+      pending = false;
+      onChange();
+    });
+  };
+  const observer = new MutationObserver(notify);
+  for (let ancestor = element.parentElement; ancestor; ancestor = ancestor.parentElement) {
+    observer.observe(ancestor, { attributes: true });
+  }
+  const scheme = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
+  scheme?.addEventListener("change", notify);
+  return () => {
+    observer.disconnect();
+    scheme?.removeEventListener("change", notify);
+  };
+}
+
+// src/core/markers.ts
+var CLUSTER_RADIUS = 60;
+var CLUSTER_EXTENT = 256;
+var CLUSTER_MAX_ZOOM = 17;
+var PIN_PATH = "M12 1C5.9 1 1 5.9 1 12c0 8.3 11 19 11 19s11-10.7 11-19C23 5.9 18.1 1 12 1z";
+var PIN_SVG = `<svg viewBox="0 0 24 32" width="24" height="32" aria-hidden="true" focusable="false"><path d="${PIN_PATH}" class="ppp-map-marker-pin"/><circle cx="12" cy="12" r="4.25" class="ppp-map-marker-dot"/></svg>`;
+var MarkerLayer = class {
+  constructor(surface, document, options) {
+    this.surface = surface;
+    this.document = document;
+    this.options = options;
+  }
+  surface;
+  document;
+  options;
+  markers = [];
+  index = null;
+  shown = /* @__PURE__ */ new Map();
+  selectedId = null;
+  /** Replaces the markers, clustered or not. */
+  setMarkers(markers, cluster) {
+    this.markers = markers.filter((marker) => isValidPosition(marker.position));
+    this.index = cluster ? new Supercluster({
+      radius: CLUSTER_RADIUS,
+      extent: CLUSTER_EXTENT,
+      maxZoom: CLUSTER_MAX_ZOOM,
+      // A cluster of one kind of marker — a view's rows, drawn in their color — is drawn in it too.
+      map: (properties) => ({ color: this.markers[properties.index]?.color ?? "" }),
+      reduce: (cluster2, properties) => {
+        if (cluster2.color !== properties.color) cluster2.color = null;
+      }
+    }).load(
+      this.markers.map((marker, index) => ({
+        type: "Feature",
+        properties: { index },
+        geometry: { type: "Point", coordinates: [marker.position.longitude, marker.position.latitude] }
+      }))
+    ) : null;
+    this.clear();
+    this.refresh();
+  }
+  /** Draws on a new surface: the same provider's map drawn again. */
+  moveTo(surface) {
+    this.clear();
+    this.surface = surface;
+    this.refresh();
+  }
+  /** Shows what the current view holds. */
+  refresh() {
+    const view = this.surface.getView();
+    const wanted = /* @__PURE__ */ new Map();
+    const marks = /* @__PURE__ */ new Map();
+    for (const entry of this.visible(view)) {
+      wanted.set(entry.key, entry.create);
+      marks.set(entry.key, entry.mark);
+    }
+    for (const [key, shown] of this.shown) {
+      if (!wanted.has(key)) {
+        shown.overlay.remove();
+        this.shown.delete(key);
+      }
+    }
+    for (const [key, create] of wanted) {
+      if (this.shown.has(key)) continue;
+      const element = create();
+      const mark = marks.get(key);
+      const anchor = mark.kind === "cluster" ? "center" : "bottom";
+      this.shown.set(key, { element, mark, overlay: this.surface.addOverlay(element, mark.position, anchor) });
+    }
+  }
+  /** The pins and clusters on the map now, as its image draws them. */
+  marks() {
+    return [...this.shown.values()].map((shown) => shown.mark);
+  }
+  /** Marks the marker of that id as the one whose popup is open; null for none. */
+  setSelected(id) {
+    this.selectedId = id;
+    for (const [key, shown] of this.shown) {
+      if (key.startsWith("m:")) shown.element.toggleAttribute("data-selected", key === `m:${id}`);
+    }
+  }
+  /** The element of the marker of that id, when it is shown on its own — not in a cluster. */
+  elementOf(id) {
+    return this.shown.get(`m:${id}`)?.element ?? null;
+  }
+  dispose() {
+    this.clear();
+    this.markers = [];
+    this.index = null;
+  }
+  clear() {
+    for (const shown of this.shown.values()) shown.overlay.remove();
+    this.shown.clear();
+  }
+  // What to show for the view: clusters and lone markers from the index, or, without one, every
+  // marker near the view. A little beyond it either way, so a short pan finds them already there.
+  *visible(view) {
+    const area = padBounds(view.bounds, 0.25);
+    if (!this.index) {
+      for (const marker of this.markers) {
+        if (boundsContain(area, marker.position)) {
+          yield { key: `m:${marker.id}`, mark: markerMark(marker), create: () => this.markerElement(marker) };
+        }
+      }
+      return;
+    }
+    const [west, south, east, north] = toBoundingBox(area);
+    const zoom = Math.max(0, Math.floor(view.zoom));
+    const boxes = west <= east ? [[west, south, east, north]] : [[west, south, 180, north], [-180, south, east, north]];
+    for (const box of boxes) {
+      for (const feature of this.index.getClusters(box, zoom)) {
+        const [longitude, latitude] = feature.geometry.coordinates;
+        const position = { latitude, longitude };
+        const properties = feature.properties;
+        if ("cluster" in properties && properties.cluster) {
+          const id = properties.cluster_id;
+          const count = properties.point_count;
+          yield {
+            key: `c:${id}`,
+            mark: {
+              kind: "cluster",
+              position,
+              color: properties.color || DEFAULT_ITEM_COLOR,
+              text: clusterText(count),
+              size: clusterSize(count)
+            },
+            create: () => this.clusterElement(id, count, position, properties.color)
+          };
+        } else {
+          const marker = this.markers[properties.index];
+          yield { key: `m:${marker.id}`, mark: markerMark(marker), create: () => this.markerElement(marker) };
+        }
+      }
+    }
+  }
+  markerElement(marker) {
+    const element = this.document.createElement("button");
+    element.type = "button";
+    element.className = "ppp-map-marker";
+    element.innerHTML = PIN_SVG;
+    element.style.setProperty("--ppp-map-item-color", marker.color || DEFAULT_ITEM_COLOR);
+    const label = markerLabel(marker);
+    if (label) {
+      const text = this.document.createElement("span");
+      text.className = "ppp-map-marker-label";
+      text.dataset.length = String(Math.min(label.length, 5));
+      text.textContent = label;
+      element.appendChild(text);
+      element.toggleAttribute("data-labeled", true);
+    }
+    if (marker.title) {
+      element.dataset.pppTooltip = marker.title;
+      element.setAttribute("aria-label", marker.title);
+    }
+    element.toggleAttribute("data-selected", marker.id === this.selectedId);
+    element.addEventListener("click", (event) => {
+      event.stopPropagation();
+      this.options.onMarkerClick(marker);
+    });
+    return element;
+  }
+  clusterElement(clusterId, count, position, color) {
+    const element = this.document.createElement("button");
+    element.type = "button";
+    element.className = "ppp-map-cluster";
+    element.textContent = clusterText(count);
+    element.dataset.size = clusterSize(count);
+    if (color) element.style.setProperty("--ppp-map-item-color", color);
+    const label = this.options.clusterLabel(count);
+    element.dataset.pppTooltip = label;
+    element.setAttribute("aria-label", label);
+    element.addEventListener("click", (event) => {
+      event.stopPropagation();
+      this.clusterClicked(clusterId, position);
+    });
+    return element;
+  }
+  clusterClicked(clusterId, position) {
+    if (!this.index) return;
+    const zoom = this.index.getClusterExpansionZoom(clusterId);
+    const leaves = this.index.getLeaves(clusterId, Infinity).map((leaf) => this.markers[leaf.properties.index]);
+    const first = leaves[0]?.position;
+    const together = leaves.every(
+      (marker) => marker.position.latitude === first?.latitude && marker.position.longitude === first?.longitude
+    );
+    this.options.onClusterClick(together && first ? first : position, together ? null : zoom, leaves);
+  }
+};
+var clusterText = (count) => count > 999 ? `${Math.floor(count / 1e3)}k` : String(count);
+var clusterSize = (count) => count < 10 ? "small" : count < 100 ? "medium" : "large";
+function markerLabel(marker) {
+  return marker.label?.trim() || void 0;
+}
+function markerMark(marker) {
+  const label = markerLabel(marker);
+  return { kind: "marker", position: marker.position, color: marker.color || DEFAULT_ITEM_COLOR, ...label && { label } };
+}
+
+// src/core/popup-content.ts
+var BLOCKS = /* @__PURE__ */ new Set([
+  "address",
+  "article",
+  "blockquote",
+  "dd",
+  "div",
+  "dl",
+  "dt",
+  "figcaption",
+  "figure",
+  "footer",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "header",
+  "li",
+  "ol",
+  "p",
+  "section",
+  "table",
+  "tr",
+  "ul"
+]);
+var BLOCK_DISPLAYS = /* @__PURE__ */ new Set(["block", "flex", "grid", "list-item", "table", "table-row", "flow-root"]);
+var SKIPPED = /* @__PURE__ */ new Set(["button", "fluent-button", "img", "picture", "script", "style", "svg", "template"]);
+var UNREAD_INPUTS = /* @__PURE__ */ new Set(["button", "checkbox", "file", "hidden", "image", "password", "radio", "reset", "submit"]);
+var clean = (text) => text.replace(/\s+/g, " ").trim();
+var displayOf = (element) => {
+  const view = element.ownerDocument.defaultView;
+  return view?.getComputedStyle ? view.getComputedStyle(element) : null;
+};
+function readPopupContent(element) {
+  const lines = [];
+  const details = [];
+  let title;
+  let line = "";
+  let label;
+  const endLine = (into) => {
+    const text = clean(line);
+    line = "";
+    if (!text) return;
+    if (into === lines && title === void 0 && lines.length === 0 && details.length === 0) title = text;
+    else into.push(text);
+  };
+  const linesOf = (node) => {
+    const own = [];
+    const before = line;
+    line = "";
+    walk(node, own);
+    const text = clean(line);
+    if (text) own.push(text);
+    line = before;
+    return own;
+  };
+  const walk = (node, into) => {
+    for (const child of Array.from(node.childNodes)) {
+      if (child.nodeType === child.TEXT_NODE) {
+        line += child.textContent ?? "";
+        continue;
+      }
+      if (child.nodeType !== child.ELEMENT_NODE) continue;
+      const element2 = child;
+      const tag = element2.tagName.toLowerCase();
+      if (SKIPPED.has(tag) || element2.getAttribute("role") === "button" || element2.hasAttribute("hidden") || element2.getAttribute("aria-hidden") === "true")
+        continue;
+      const style = displayOf(element2);
+      if (style && (style.display === "none" || style.visibility === "hidden")) continue;
+      if (tag === "select") {
+        line += ` ${Array.from(element2.selectedOptions, (option) => option.text).join(", ")} `;
+      } else if (tag === "textarea" || tag === "input" && !UNREAD_INPUTS.has(element2.type)) {
+        line += ` ${element2.value} `;
+      } else if (tag === "br") {
+        endLine(into);
+      } else if (tag === "dt") {
+        endLine(into);
+        label = linesOf(element2).join(" ");
+      } else if (tag === "dd") {
+        endLine(into);
+        const value = linesOf(element2).join(" \xB7 ");
+        if (value) details.push({ label: label ?? "", value });
+        label = void 0;
+      } else if (BLOCKS.has(tag) || style !== null && BLOCK_DISPLAYS.has(style.display)) {
+        endLine(into);
+        walk(element2, into);
+        endLine(into);
+      } else {
+        walk(element2, into);
+      }
+    }
+  };
+  walk(element, lines);
+  endLine(lines);
+  return { ...title && { title }, ...lines.length && { lines }, ...details.length && { details } };
+}
+
+// src/core/popup-snapshot.ts
+var MARGIN = 24;
+var LEFT_OUT = ".ppp-map-popup-close";
+var XHTML = "http://www.w3.org/1999/xhtml";
+var INHERITED = /* @__PURE__ */ new Set([
+  "color",
+  "cursor",
+  "direction",
+  "fill",
+  "font-family",
+  "font-feature-settings",
+  "font-kerning",
+  "font-size",
+  "font-stretch",
+  "font-style",
+  "font-variant",
+  "font-variation-settings",
+  "font-weight",
+  "hyphens",
+  "letter-spacing",
+  "line-height",
+  "list-style-position",
+  "list-style-type",
+  "overflow-wrap",
+  "quotes",
+  "stroke",
+  "tab-size",
+  "text-align",
+  "text-indent",
+  "text-rendering",
+  "text-shadow",
+  "text-transform",
+  "visibility",
+  "white-space",
+  "word-break",
+  "word-spacing",
+  "writing-mode",
+  "-webkit-font-smoothing"
+]);
+var IMAGE_PROPERTIES = ["background-image", "mask-image", "-webkit-mask-image", "list-style-image", "border-image-source"];
+async function snapshotElement(element, frame, ratio) {
+  const view = element.ownerDocument.defaultView;
+  if (!view || !("decode" in view.HTMLImageElement.prototype)) return null;
+  const box = element.getBoundingClientRect();
+  if (!box.width || !box.height) return null;
+  try {
+    if (loadsWhatAPictureCant(element, view)) return null;
+    const scale = frame.scale || 1;
+    const size = { width: box.width / scale, height: box.height / scale };
+    const width = size.width + 2 * MARGIN;
+    const height = size.height + 2 * MARGIN;
+    const image = new view.Image();
+    image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(snapshotMarkup(element, size, ratio))}`;
+    await image.decode();
+    if (!readable(image, element.ownerDocument)) return null;
+    return {
+      image,
+      left: (box.left - frame.left) / scale - MARGIN,
+      top: (box.top - frame.top) / scale - MARGIN,
+      width,
+      height
+    };
+  } catch {
+    return null;
+  }
+}
+function snapshotMarkup(element, size, ratio) {
+  const view = element.ownerDocument.defaultView;
+  const copy = copyWithStyles(element, view, null);
+  if (copy instanceof view.Element) {
+    const style = copy.style;
+    for (const name of ["position", "left", "top", "right", "bottom", "transform", "translate", "margin"])
+      style.removeProperty(name);
+    style.setProperty("width", `${size.width}px`);
+    style.setProperty("height", `${size.height}px`);
+    style.setProperty("box-sizing", "border-box");
+  }
+  const width = size.width + 2 * MARGIN;
+  const height = size.height + 2 * MARGIN;
+  const frame = element.ownerDocument.createElementNS(XHTML, "div");
+  frame.setAttribute("style", `padding: ${MARGIN}px;`);
+  frame.appendChild(copy);
+  const markup = new view.XMLSerializer().serializeToString(frame);
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width * ratio}" height="${height * ratio}" viewBox="0 0 ${width} ${height}"><foreignObject x="0" y="0" width="${width}" height="${height}">${markup}</foreignObject></svg>`;
+}
+function copyWithStyles(source, view, parent) {
+  if (source.nodeType === source.TEXT_NODE) return source.cloneNode();
+  if (!(source instanceof view.Element)) return source.ownerDocument.createTextNode("");
+  const tag = source.tagName.toLowerCase();
+  if (tag === "script" || tag === "style" || tag === "template") return source.ownerDocument.createTextNode("");
+  const style = view.getComputedStyle(source);
+  const copy = tag === "canvas" ? imageOf(source) : source.cloneNode(false);
+  copy.setAttribute("style", cssText(style, parent));
+  copy.removeAttribute("class");
+  copy.removeAttribute("id");
+  if (source.matches(LEFT_OUT)) {
+    copy.style.setProperty("visibility", "hidden");
+    return copy;
+  }
+  if (source instanceof view.HTMLImageElement) copy.setAttribute("src", dataUrlOf(source) ?? "");
+  if (source instanceof view.HTMLInputElement) {
+    copy.setAttribute("value", source.value);
+    if (source.checked) copy.setAttribute("checked", "");
+    else copy.removeAttribute("checked");
+  }
+  if (source instanceof view.HTMLTextAreaElement) copy.textContent = source.value;
+  if (tag === "canvas" || source instanceof view.HTMLTextAreaElement) return copy;
+  const before = pseudoElement(source, "::before", view, style);
+  if (before) copy.appendChild(before);
+  for (const child of shownChildren(source, view)) copy.appendChild(copyWithStyles(child, view, style));
+  const after = pseudoElement(source, "::after", view, style);
+  if (after) copy.appendChild(after);
+  if (source instanceof view.HTMLSelectElement) {
+    const copied = copy.querySelectorAll("option");
+    Array.from(source.options).forEach((option, index) => {
+      if (option.selected) copied[index]?.setAttribute("selected", "");
+      else copied[index]?.removeAttribute("selected");
+    });
+  }
+  return copy;
+}
+function shownChildren(element, view) {
+  const own = element.shadowRoot ? Array.from(element.shadowRoot.childNodes) : Array.from(element.childNodes);
+  return own.flatMap((child) => {
+    if (!(child instanceof view.HTMLSlotElement)) return [child];
+    const assigned = child.assignedNodes({ flatten: true });
+    return assigned.length ? assigned : Array.from(child.childNodes);
+  });
+}
+function pseudoElement(element, which, view, parent) {
+  const style = view.getComputedStyle(element, which);
+  const content = style.getPropertyValue("content");
+  if (!content || content === "none" || content === "normal") return null;
+  const span = element.ownerDocument.createElementNS(XHTML, "span");
+  span.setAttribute("style", cssText(style, parent));
+  const text = /^(["'])(.*)\1$/.exec(content.trim());
+  if (text) span.textContent = text[2].replace(/\\(.)/g, "$1");
+  return span;
+}
+function cssText(style, parent) {
+  let text = "";
+  for (let index = 0; index < style.length; index++) {
+    const name = style[index];
+    const value = style.getPropertyValue(name);
+    if (parent && INHERITED.has(name) && parent.getPropertyValue(name) === value) continue;
+    text += `${name}: ${value};`;
+  }
+  return text;
+}
+function loadsWhatAPictureCant(element, view) {
+  const fonts = element.ownerDocument.fonts;
+  const webFonts = /* @__PURE__ */ new Set();
+  fonts?.forEach((face) => {
+    if (face.status !== "error") webFonts.add(face.family.replace(/["']/g, "").trim().toLowerCase());
+  });
+  const loads = (node) => {
+    const style = view.getComputedStyle(node);
+    if (style.display === "none") return false;
+    if (IMAGE_PROPERTIES.some((name) => style.getPropertyValue(name).includes("url("))) return true;
+    const family = style.fontFamily.split(",")[0]?.replace(/["']/g, "").trim().toLowerCase();
+    if (family && webFonts.has(family)) return true;
+    return shownChildren(node, view).some((child) => child instanceof view.Element && !child.matches(LEFT_OUT) && loads(child));
+  };
+  return loads(element);
+}
+function imageOf(canvas) {
+  const image = canvas.ownerDocument.createElementNS(XHTML, "img");
+  try {
+    image.setAttribute("src", canvas.toDataURL());
+  } catch {
+  }
+  return image;
+}
+function dataUrlOf(image) {
+  if (!image.complete || !image.naturalWidth) return null;
+  try {
+    const canvas = image.ownerDocument.createElement("canvas");
+    canvas.width = image.naturalWidth;
+    canvas.height = image.naturalHeight;
+    canvas.getContext("2d")?.drawImage(image, 0, 0);
+    return canvas.toDataURL();
+  } catch {
+    return null;
+  }
+}
+function readable(image, document) {
+  try {
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    const context = canvas.getContext("2d");
+    if (!context) return false;
+    context.drawImage(image, 0, 0, 1, 1);
+    context.getImageData(0, 0, 1, 1);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/core/print.ts
+var PIN_WIDTH = 24;
+var PIN_HEIGHT = 32;
+var PIN_HEAD = { x: 12, y: 12, radius: 4.25 };
+var CLUSTER_DIAMETER = { small: 32, medium: 38, large: 44 };
+var LABEL_FONT_SIZE = [11, 11, 11, 9, 7.5, 6];
+var CORNER_MARGIN = 8;
+function drawMapImage(parts) {
+  const canvas = parts.map.ownerDocument.createElement("canvas");
+  canvas.width = parts.map.width;
+  canvas.height = parts.map.height;
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("The browser can't draw the map's image.");
+  context.drawImage(parts.map, 0, 0);
+  const ratio = parts.width > 0 ? parts.map.width / parts.width : 1;
+  context.scale(ratio, ratio);
+  for (const mark of parts.marks) {
+    if (mark.kind === "cluster") drawCluster(context, mark, parts, ratio);
+    else drawPin(context, mark.point, mark.color, parts, ratio, mark.label);
+  }
+  if (parts.place) drawPin(context, parts.place, parts.colors.place, parts, ratio);
+  if (parts.legend?.length) drawLegend(context, parts.legend, parts);
+  if (parts.attribution) drawAttribution(context, parts.attribution, parts);
+  if (parts.popup) drawPopup(context, parts.popup, parts, ratio);
+  return canvas;
+}
+function withShadow(context, ratio, blur, draw) {
+  context.save();
+  context.shadowColor = "rgba(0, 0, 0, 0.35)";
+  context.shadowBlur = blur * ratio;
+  context.shadowOffsetY = ratio;
+  draw();
+  context.restore();
+}
+function drawPin(context, point, color, parts, ratio, label) {
+  context.save();
+  context.translate(point.x - PIN_WIDTH / 2, point.y - PIN_HEIGHT);
+  const path = new Path2D(PIN_PATH);
+  withShadow(context, ratio, 2, () => {
+    context.fillStyle = color;
+    context.fill(path);
+  });
+  context.lineWidth = 1.5;
+  context.strokeStyle = parts.colors.background;
+  context.stroke(path);
+  if (label) {
+    const size = LABEL_FONT_SIZE[Math.min(label.length, LABEL_FONT_SIZE.length - 1)];
+    context.font = `700 ${size}px ${parts.font}`;
+    context.fillStyle = parts.colors.onColor;
+    context.textAlign = "center";
+    context.textBaseline = "middle";
+    context.fillText(label, PIN_HEAD.x, PIN_HEAD.y + 0.5, PIN_WIDTH - 4);
+  } else {
+    context.beginPath();
+    context.arc(PIN_HEAD.x, PIN_HEAD.y, PIN_HEAD.radius, 0, Math.PI * 2);
+    context.fillStyle = parts.colors.background;
+    context.fill();
+  }
+  context.restore();
+}
+function drawCluster(context, mark, parts, ratio) {
+  const height = CLUSTER_DIAMETER[mark.size];
+  context.save();
+  context.font = `600 ${mark.size === "large" ? 14 : 12}px ${parts.font}`;
+  const width = Math.max(height, context.measureText(mark.text).width + 16);
+  const left = mark.point.x - width / 2;
+  const top = mark.point.y - height / 2;
+  context.beginPath();
+  context.roundRect(left, top, width, height, height / 2);
+  withShadow(context, ratio, 2, () => {
+    context.fillStyle = mark.color;
+    context.fill();
+  });
+  context.lineWidth = 2;
+  context.strokeStyle = parts.colors.background;
+  context.stroke();
+  context.fillStyle = parts.colors.onColor;
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  context.fillText(mark.text, mark.point.x, mark.point.y + 0.5);
+  context.restore();
+}
+function drawLegend(context, legend, parts) {
+  const dot = 10;
+  const gap = 4;
+  const itemGap = 12;
+  const lineHeight = 16;
+  const padding = { x: 8, y: 4 };
+  const maxWidth = parts.width - 2 * CORNER_MARGIN - 2 * padding.x;
+  context.save();
+  context.font = `400 12px ${parts.font}`;
+  const lines = [[]];
+  let lineWidth = 0;
+  for (const entry of legend) {
+    const width = dot + gap + context.measureText(entry.label).width;
+    const line = lines.at(-1);
+    if (line.length && lineWidth + itemGap + width > maxWidth) {
+      lines.push([]);
+      lineWidth = 0;
+    }
+    lines.at(-1).push({ ...entry, width });
+    lineWidth += (lines.at(-1).length > 1 ? itemGap : 0) + width;
+  }
+  const widest = Math.max(...lines.map((line) => line.reduce((sum, item, index) => sum + item.width + (index ? itemGap : 0), 0)));
+  const boxWidth = Math.min(widest, maxWidth) + 2 * padding.x;
+  const boxHeight = lines.length * lineHeight + 2 * padding.y;
+  const left = CORNER_MARGIN;
+  const top = parts.height - CORNER_MARGIN - boxHeight;
+  context.beginPath();
+  context.roundRect(left, top, boxWidth, boxHeight, 4);
+  context.fillStyle = parts.colors.background;
+  context.fill();
+  context.textBaseline = "middle";
+  lines.forEach((line, row) => {
+    let x = left + padding.x;
+    const y = top + padding.y + row * lineHeight + lineHeight / 2;
+    for (const item of line) {
+      context.beginPath();
+      context.arc(x + dot / 2, y, dot / 2, 0, Math.PI * 2);
+      context.fillStyle = item.color;
+      context.fill();
+      context.fillStyle = parts.colors.foreground;
+      context.fillText(item.label, x + dot + gap, y + 0.5, Math.max(0, left + boxWidth - padding.x - (x + dot + gap)));
+      x += item.width + itemGap;
+    }
+  });
+  context.restore();
+}
+function drawAttribution(context, text, parts) {
+  const padding = { x: 5, y: 2 };
+  const lineHeight = 13;
+  context.save();
+  context.font = `400 10px ${parts.font}`;
+  const maxWidth = parts.width - 2 * CORNER_MARGIN - 2 * padding.x;
+  const lines = [];
+  for (const word of text.split(/\s+/).filter(Boolean)) {
+    const last = lines.at(-1);
+    if (last !== void 0 && context.measureText(`${last} ${word}`).width <= maxWidth) lines[lines.length - 1] = `${last} ${word}`;
+    else lines.push(word);
+  }
+  const width = Math.min(maxWidth, Math.max(...lines.map((line) => context.measureText(line).width))) + 2 * padding.x;
+  const height = lines.length * lineHeight + 2 * padding.y;
+  const left = parts.width - CORNER_MARGIN / 2 - width;
+  const top = parts.height - CORNER_MARGIN / 2 - height;
+  context.globalAlpha = 0.85;
+  context.fillStyle = parts.colors.background;
+  context.fillRect(left, top, width, height);
+  context.globalAlpha = 1;
+  context.fillStyle = parts.colors.foreground;
+  context.textAlign = "right";
+  context.textBaseline = "middle";
+  lines.forEach(
+    (line, index) => context.fillText(line, left + width - padding.x, top + padding.y + index * lineHeight + lineHeight / 2, maxWidth)
+  );
+  context.restore();
+}
+var POPUP = { minWidth: 200, maxWidth: 340, maxHeight: 360, padding: { x: 16, y: 12 }, radius: 12, gap: 8, columnGap: 12 };
+var POPUP_TITLE = { size: 14, lineHeight: 20, maxLines: 3 };
+var POPUP_FIELD = { size: 12, lineHeight: 16, maxLines: 3 };
+var POPUP_ITEM = { size: 13, lineHeight: 24 };
+function drawPopup(context, popup, parts, ratio) {
+  if (popup.snapshot) {
+    const { image, left: left2, top: top2, width: width2, height: height2 } = popup.snapshot;
+    context.drawImage(image, left2, top2, width2, height2);
+    return;
+  }
+  const { content } = popup;
+  const inner = POPUP.maxWidth - 2 * POPUP.padding.x;
+  const fonts = {
+    title: `600 ${POPUP_TITLE.size}px ${parts.font}`,
+    field: `400 ${POPUP_FIELD.size}px ${parts.font}`,
+    item: `400 ${POPUP_ITEM.size}px ${parts.font}`
+  };
+  context.save();
+  context.font = fonts.title;
+  const title = content.title ? wrapText(context, content.title, inner, POPUP_TITLE.maxLines) : [];
+  let used = Math.max(0, ...title.map((line) => context.measureText(line).width));
+  context.font = fonts.field;
+  let text = (content.lines ?? []).filter((line) => line.trim()).flatMap((line) => wrapText(context, line, inner, POPUP_FIELD.maxLines));
+  if (text.length) used = Math.max(used, ...text.map((line) => context.measureText(line).width));
+  const details = (content.details ?? []).filter((detail) => detail.value.trim());
+  const labelWidth = Math.min(inner * 0.4, Math.max(0, ...details.map((detail) => context.measureText(detail.label).width)));
+  const valueWidth = inner - labelWidth - POPUP.columnGap;
+  const rows = details.map((detail) => ({
+    label: fitText(context, detail.label, labelWidth),
+    lines: wrapText(context, detail.value, valueWidth, POPUP_FIELD.maxLines)
+  }));
+  if (rows.length) {
+    const widest = Math.max(...rows.flatMap((row) => row.lines.map((line) => context.measureText(line).width)));
+    used = Math.max(used, labelWidth + POPUP.columnGap + widest);
+  }
+  context.font = fonts.item;
+  let items = (content.items ?? []).map((item) => fitText(context, item, inner));
+  if (items.length) used = Math.max(used, ...items.map((item) => context.measureText(item).width));
+  let room = POPUP.maxHeight - 2 * POPUP.padding.y - title.length * POPUP_TITLE.lineHeight;
+  context.font = fonts.field;
+  let cut = false;
+  if (text.length && title.length) room -= POPUP.gap;
+  const textFit = Math.max(0, Math.floor(room / POPUP_FIELD.lineHeight));
+  if (text.length > textFit) {
+    cut = true;
+    text = text.slice(0, textFit);
+    if (text.length) text[text.length - 1] = fitText(context, text.at(-1), inner, true);
+  }
+  room -= text.length * POPUP_FIELD.lineHeight;
+  if (cut) rows.length = 0;
+  if (rows.length && (title.length || text.length)) room -= POPUP.gap;
+  for (let index = 0; index < rows.length && !cut; index++) {
+    const row = rows[index];
+    const fit = Math.min(row.lines.length, Math.floor(room / POPUP_FIELD.lineHeight));
+    if (fit < row.lines.length) {
+      cut = true;
+      row.lines = row.lines.slice(0, fit);
+      rows.length = fit > 0 ? index + 1 : index;
+    }
+    room -= fit * POPUP_FIELD.lineHeight;
+  }
+  if (cut) {
+    const last = rows.at(-1);
+    if (last) last.lines[last.lines.length - 1] = fitText(context, last.lines.at(-1), valueWidth, true);
+    items = [];
+  }
+  if (items.length && (title.length || text.length || rows.length)) room -= POPUP.gap;
+  const itemsFit = Math.max(0, Math.floor(room / POPUP_ITEM.lineHeight));
+  if (items.length > itemsFit) items = itemsFit > 0 ? [...items.slice(0, itemsFit - 1), "\u2026"] : [];
+  const sections = [title.length, text.length, rows.length, items.length].filter(Boolean).length;
+  if (sections === 0) {
+    context.restore();
+    return;
+  }
+  const width = Math.min(POPUP.maxWidth, Math.max(POPUP.minWidth, used + 2 * POPUP.padding.x));
+  const height = 2 * POPUP.padding.y + title.length * POPUP_TITLE.lineHeight + text.length * POPUP_FIELD.lineHeight + rows.reduce((sum, row) => sum + row.lines.length * POPUP_FIELD.lineHeight, 0) + items.length * POPUP_ITEM.lineHeight + (sections - 1) * POPUP.gap;
+  const left = Math.max(CORNER_MARGIN, Math.min(parts.width - CORNER_MARGIN - width, popup.point.x - width / 2));
+  const top = Math.max(CORNER_MARGIN, popup.point.y - popup.offset - height);
+  context.beginPath();
+  context.roundRect(left, top, width, height, POPUP.radius);
+  withShadow(context, ratio, 10, () => {
+    context.fillStyle = parts.colors.background;
+    context.fill();
+  });
+  context.lineWidth = 1;
+  context.strokeStyle = parts.colors.stroke;
+  context.stroke();
+  context.textBaseline = "middle";
+  const x = left + POPUP.padding.x;
+  let y = top + POPUP.padding.y;
+  context.fillStyle = parts.colors.foreground;
+  context.font = fonts.title;
+  for (const line of title) {
+    context.fillText(line, x, y + POPUP_TITLE.lineHeight / 2);
+    y += POPUP_TITLE.lineHeight;
+  }
+  if (title.length && (text.length || rows.length || items.length)) y += POPUP.gap;
+  context.font = fonts.field;
+  for (const line of text) {
+    context.fillText(line, x, y + POPUP_FIELD.lineHeight / 2);
+    y += POPUP_FIELD.lineHeight;
+  }
+  if (text.length && (rows.length || items.length)) y += POPUP.gap;
+  for (const row of rows) {
+    context.fillStyle = parts.colors.secondary;
+    context.fillText(row.label, x, y + POPUP_FIELD.lineHeight / 2);
+    context.fillStyle = parts.colors.foreground;
+    for (const line of row.lines) {
+      context.fillText(line, x + labelWidth + POPUP.columnGap, y + POPUP_FIELD.lineHeight / 2);
+      y += POPUP_FIELD.lineHeight;
+    }
+  }
+  if (rows.length && items.length) y += POPUP.gap;
+  context.font = fonts.item;
+  context.fillStyle = parts.colors.foreground;
+  for (const item of items) {
+    context.fillText(item, x, y + POPUP_ITEM.lineHeight / 2);
+    y += POPUP_ITEM.lineHeight;
+  }
+  context.restore();
+}
+function wrapText(context, text, maxWidth, maxLines) {
+  const lines = [];
+  const runsOn = /* @__PURE__ */ new Set();
+  let line = "";
+  for (const word of text.split(/\s+/).filter(Boolean)) {
+    const joined = line ? `${line} ${word}` : word;
+    if (context.measureText(joined).width <= maxWidth) {
+      line = joined;
+      continue;
+    }
+    if (line) lines.push(line);
+    let rest = word;
+    while (rest.length > 1 && context.measureText(rest).width > maxWidth) {
+      let end = rest.length - 1;
+      while (end > 1 && context.measureText(rest.slice(0, end)).width > maxWidth) end--;
+      lines.push(rest.slice(0, end));
+      runsOn.add(lines.length - 1);
+      rest = rest.slice(end);
+    }
+    line = rest;
+  }
+  if (line) lines.push(line);
+  if (lines.length <= maxLines) return lines;
+  const kept = lines.slice(0, maxLines);
+  const joiner = runsOn.has(maxLines - 1) ? "" : " ";
+  kept[maxLines - 1] = fitText(context, `${kept[maxLines - 1]}${joiner}${lines[maxLines]}`, maxWidth, true);
+  return kept;
+}
+function fitText(context, text, maxWidth, cut = false) {
+  if (!cut && context.measureText(text).width <= maxWidth) return text;
+  let end = text.length;
+  while (end > 0 && context.measureText(`${text.slice(0, end).trimEnd()}\u2026`).width > maxWidth) end--;
+  return `${text.slice(0, end).trimEnd()}\u2026`;
+}
+async function saveCanvas(canvas, fileName) {
+  const blob = await canvasBlob(canvas);
+  const document = canvas.ownerDocument;
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = fileName;
+  link.style.display = "none";
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 6e4);
+}
+function canvasBlob(canvas) {
+  return new Promise(
+    (resolve, reject) => canvas.toBlob((blob) => blob ? resolve(blob) : reject(new Error("The map's image couldn't be made.")), "image/png")
+  );
+}
+var PRINT_SHEET_CSS = `
+.ppp-map-print-sheet { color-scheme: light; color: CanvasText; font-size: 10pt; line-height: 1.35; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
+.ppp-map-print-title { margin: 0 0 8pt; font-size: 15pt; font-weight: 600; }
+.ppp-map-print-image { display: block; width: 100%; height: auto; break-inside: avoid; }
+.ppp-map-print-entries { list-style: none; margin: 10pt 0 0; padding: 0; columns: 2 220pt; column-gap: 18pt; }
+.ppp-map-print-entry { display: flex; gap: 8pt; padding: 4pt 0; border-bottom: 0.5pt solid GrayText; break-inside: avoid; }
+.ppp-map-print-badge {
+  flex: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
+  min-width: 18pt; height: 18pt; padding: 0 4pt; border-radius: 9pt; font-size: 8pt; font-weight: 700;
+}
+.ppp-map-print-bullet { flex: none; width: 8pt; height: 8pt; margin-top: 3pt; border-radius: 4pt; }
+.ppp-map-print-name { font-weight: 600; overflow-wrap: anywhere; }
+.ppp-map-print-details { display: grid; grid-template-columns: auto 1fr; column-gap: 6pt; margin: 1pt 0 0; font-size: 8.5pt; }
+.ppp-map-print-details dt { color: GrayText; }
+.ppp-map-print-details dd { margin: 0; overflow-wrap: anywhere; }
+`;
+function titleElement(document, sheet) {
+  if (!sheet.title?.trim()) return null;
+  const heading = document.createElement("h1");
+  heading.className = "ppp-map-print-title";
+  heading.textContent = sheet.title.trim();
+  return heading;
+}
+function entriesElement(document, sheet) {
+  if (!sheet.entries?.length) return null;
+  const list = document.createElement("ol");
+  list.className = "ppp-map-print-entries";
+  for (const entry of sheet.entries) {
+    const item = document.createElement("li");
+    item.className = "ppp-map-print-entry";
+    const badge = document.createElement("span");
+    badge.style.backgroundColor = entry.color || sheet.badgeColor;
+    if (entry.label) {
+      badge.className = "ppp-map-print-badge";
+      badge.style.color = sheet.onColor;
+      badge.textContent = entry.label;
+    } else {
+      badge.className = "ppp-map-print-bullet";
+    }
+    item.appendChild(badge);
+    const body = document.createElement("div");
+    const name = document.createElement("div");
+    name.className = "ppp-map-print-name";
+    name.textContent = entry.title;
+    body.appendChild(name);
+    const details = (entry.details ?? []).filter((detail) => detail.value.trim());
+    if (details.length) {
+      const list2 = document.createElement("dl");
+      list2.className = "ppp-map-print-details";
+      for (const detail of details) {
+        const term = document.createElement("dt");
+        term.textContent = detail.label;
+        const value = document.createElement("dd");
+        value.textContent = detail.value;
+        list2.append(term, value);
+      }
+      body.appendChild(list2);
+    }
+    item.appendChild(body);
+    list.appendChild(item);
+  }
+  return list;
+}
+async function printImage(ownerDocument, image, sheet) {
+  for (const old of ownerDocument.querySelectorAll("iframe.ppp-map-print-frame")) removeFrame(old);
+  const frame = ownerDocument.createElement("iframe");
+  frame.className = "ppp-map-print-frame";
+  frame.setAttribute("aria-hidden", "true");
+  frame.tabIndex = -1;
+  frame.style.cssText = "position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0;";
+  const url = URL.createObjectURL(image);
+  frame.dataset.url = url;
+  ownerDocument.body.appendChild(frame);
+  const window = frame.contentWindow;
+  const document = frame.contentDocument;
+  if (!window || !document) {
+    removeFrame(frame);
+    throw new Error("The map couldn't be printed.");
+  }
+  document.documentElement.lang = sheet.language;
+  if (ownerDocument.documentElement.dir) document.documentElement.dir = ownerDocument.documentElement.dir;
+  document.title = sheet.title?.trim() || ownerDocument.title;
+  const style = document.createElement("style");
+  style.textContent = `@page { margin: 12mm; } body { margin: 0; font-family: ${sheet.font}; }${PRINT_SHEET_CSS}`;
+  document.head.appendChild(style);
+  const body = document.createElement("div");
+  body.className = "ppp-map-print-sheet";
+  const heading = titleElement(document, sheet);
+  if (heading) body.appendChild(heading);
+  const img = document.createElement("img");
+  img.className = "ppp-map-print-image";
+  img.alt = sheet.title?.trim() ?? "";
+  img.src = url;
+  body.appendChild(img);
+  const entries = entriesElement(document, sheet);
+  if (entries) body.appendChild(entries);
+  document.body.appendChild(body);
+  if (typeof img.decode === "function") await img.decode().catch(() => void 0);
+  window.addEventListener("afterprint", () => removeFrame(frame), { once: true });
+  window.focus();
+  window.print();
+}
+function removeFrame(frame) {
+  if (frame.dataset.url) URL.revokeObjectURL(frame.dataset.url);
+  frame.remove();
+}
+var PAPER_WIDTH = 680;
+function printPage(target, sheet) {
+  const document = target.ownerDocument;
+  const window = document.defaultView;
+  if (!window) throw new Error("The map couldn't be printed.");
+  ensureStyleSheet(document, "ppp-map-print-styles", `@media print { ${PRINT_SHEET_CSS} }`);
+  const path = [];
+  for (let element = target.parentElement; element && element !== document.documentElement; element = element.parentElement) {
+    element.setAttribute("data-ppp-map-print-path", "");
+    path.push(element);
+  }
+  const { width, height } = target.getBoundingClientRect();
+  const style = { width: target.style.width, height: target.style.height };
+  const scale = width > PAPER_WIDTH ? PAPER_WIDTH / width : 1;
+  target.style.width = `${width}px`;
+  target.style.height = `${height}px`;
+  target.classList.add("ppp-map-print-target");
+  const printStyle = document.createElement("style");
+  printStyle.textContent = `@media print { html.ppp-map-printing .ppp-map-print-target { transform: scale(${scale}); transform-origin: top left; margin-bottom: ${height * (scale - 1)}px !important; } }`;
+  document.head.appendChild(printStyle);
+  const sheets = [];
+  const heading = titleElement(document, sheet);
+  if (heading) sheets.push(wrapSheet(document, heading, (element) => target.before(element)));
+  const entries = entriesElement(document, sheet);
+  if (entries) sheets.push(wrapSheet(document, entries, (element) => target.after(element)));
+  document.documentElement.classList.add("ppp-map-printing");
+  const restore = () => {
+    document.documentElement.classList.remove("ppp-map-printing");
+    for (const element of path) element.removeAttribute("data-ppp-map-print-path");
+    for (const element of sheets) element.remove();
+    printStyle.remove();
+    target.classList.remove("ppp-map-print-target");
+    target.style.width = style.width;
+    target.style.height = style.height;
+  };
+  window.addEventListener("afterprint", restore, { once: true });
+  window.print();
+}
+function wrapSheet(document, content, place) {
+  const sheet = document.createElement("div");
+  sheet.className = "ppp-map-print-sheet";
+  sheet.setAttribute("aria-hidden", "true");
+  sheet.appendChild(content);
+  place(sheet);
+  return sheet;
+}
+
+// src/core/map-controller.ts
+var WORLD_CAMERA = { center: { latitude: 20, longitude: 0 }, zoom: 1.5 };
+var FIT_MAX_ZOOM = 15;
+var FIT_PADDING = 48;
+var PLACE_ZOOM = 16;
+var PLACE_MAX_ZOOM = 17;
+var IMAGE_PIXEL_RATIO = 2;
+var IMAGE_MAX_SIZE = 4096;
+var PLACE_COLOR = "var(--colorPaletteRedBackground3, #d13438)";
+var MARKER_POPUP_OFFSET = 38;
+var SHAPE_POPUP_OFFSET = 8;
+var MapController = class _MapController {
+  constructor(container, surfaceElement, options, events) {
+    this.container = container;
+    this.surfaceElement = surfaceElement;
+    this.options = options;
+    this.events = events;
+    this.dark = options.usePortalTheme && isDarkTheme(container);
+    this.stopWatching = watchTheme(container, () => this.themeChanged());
+    this.resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => this.resized());
+    this.resizeObserver?.observe(container);
+    this.popupObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => this.requestKeepInView());
+  }
+  container;
+  surfaceElement;
+  options;
+  events;
+  surface = null;
+  markers = null;
+  items = [];
+  shapes = [];
+  popup = null;
+  dark = false;
+  disposed = false;
+  // A fit asked for while the map had no size — drawn in a tab not yet shown — made when it gets one.
+  fitPending = false;
+  fitPendingIds;
+  // Counts draws, so one overtaken by another — the theme flipping again while Google's map is
+  // being made again — throws its map away rather than leaving two.
+  drawGeneration = 0;
+  // The shapes and their colors as last handed to the surface: a theme check that changed neither
+  // costs nothing.
+  drawnShapes = null;
+  stopWatching;
+  resizeObserver;
+  // The open popup's size: content that comes after it opens — figures replacing a spinner — can
+  // grow it past the map's edge, so it is kept in view again whenever it changes.
+  popupObserver;
+  // Whether the map is moving — a pan keeping the popup in view among others — and whether the popup
+  // is to be checked again once it stops: measured mid-move, it would be panned for twice over.
+  moving = false;
+  keepInViewPending = false;
+  search = null;
+  // The geocoder the box's suggestions came from: one drawn in its place can't go to them.
+  searchGeocoder = null;
+  // The place the address search went to, pinned until the search is cleared — or the place of the
+  // address the options name, until they name none.
+  place = null;
+  // Finding the address the options name; given up when it changes.
+  addressRequest = null;
+  // Where the address the options name was found: pinned again once a search's place in its stead
+  // is cleared.
+  addressPlace = null;
+  /**
+   * Draws a map into `container`, which it fills: an element of the host's, positioned and sized.
+   * Resolves once the provider's map is up; a provider that fails reports through `events.error`
+   * and leaves the container empty.
+   */
+  static async create(container, options, items, events) {
+    ensureMapStyles(container.ownerDocument);
+    const surfaceElement = container.ownerDocument.createElement("div");
+    surfaceElement.className = "ppp-map-surface";
+    container.prepend(surfaceElement);
+    const controller = new _MapController(container, surfaceElement, options, events);
+    controller.items = [...items];
+    await controller.draw(options.camera ?? null);
+    void controller.showAddress(false);
+    return controller;
+  }
+  /** The provider's own map object, once drawn. */
+  get native() {
+    return this.surface?.native ?? null;
+  }
+  /** Replaces the items. `fit` moves the view to show them all. */
+  setItems(items, fit) {
+    this.items = [...items];
+    this.applyItems();
+    if (fit) this.fitToItems();
+  }
+  /** Applies changed options. A new provider draws the map again; anything else changes it in place. */
+  async setOptions(options) {
+    const previous = this.options;
+    this.options = options;
+    const addressChanged = (previous.address?.trim() ?? "") !== (options.address?.trim() ?? "");
+    if (JSON.stringify(previous.provider ?? null) !== JSON.stringify(options.provider ?? null) || JSON.stringify(previous.nativeOptions ?? null) !== JSON.stringify(options.nativeOptions ?? null) || previous.language !== options.language) {
+      const searching = this.addressRequest !== null;
+      this.addressRequest?.abort();
+      this.addressRequest = null;
+      await this.redraw();
+      if (addressChanged || searching) void this.showAddress(true);
+      return;
+    }
+    if (addressChanged) void this.showAddress(true);
+    if (previous.cluster !== options.cluster) this.applyItems();
+    this.applySearch();
+    if (options.gestureHelp && JSON.stringify(previous.gestureHelp ?? null) !== JSON.stringify(options.gestureHelp)) {
+      this.surface?.setGestureHelp?.(options.gestureHelp);
+    }
+    const dark = options.usePortalTheme && isDarkTheme(this.container);
+    if (previous.style !== options.style || dark !== this.dark) {
+      this.dark = dark;
+      if (this.surface && !this.surface.setStyle(options.style, dark)) await this.redraw();
+    }
+  }
+  getView() {
+    return this.surface?.getView() ?? null;
+  }
+  setCamera(camera, animate = true) {
+    this.fitPending = false;
+    this.surface?.setCamera(camera, animate);
+  }
+  /**
+   * Moves the view to show every item — or, given `ids` (not empty), the items of those ids — or to
+   * the whole world without any.
+   */
+  fitToItems(ids) {
+    if (!this.surface) return;
+    if (!this.container.clientWidth || !this.container.clientHeight) {
+      this.fitPending = true;
+      this.fitPendingIds = ids;
+      return;
+    }
+    this.fitPending = false;
+    this.fitPendingIds = void 0;
+    const wanted = ids?.length ? new Set(ids) : null;
+    const bounds = boundsOfItems(wanted ? this.items.filter((item) => wanted.has(item.id)) : this.items);
+    if (!bounds) {
+      this.surface.setCamera(WORLD_CAMERA, false);
+    } else if (bounds.north === bounds.south && bounds.east === bounds.west) {
+      this.surface.setCamera({ center: { latitude: bounds.north, longitude: bounds.east }, zoom: FIT_MAX_ZOOM }, false);
+    } else {
+      this.surface.fitBounds(bounds, FIT_PADDING, FIT_MAX_ZOOM);
+    }
+  }
+  /** The place the address search last went to; null before one, or once it is cleared. */
+  get foundPlace() {
+    return this.place?.place ?? null;
+  }
+  /**
+   * Finds `text` with the provider's search and goes there, as the address search does with Enter:
+   * the first place found, pinned, shown in the search box and reported as the box reports one. Null
+   * when nothing is found, or the provider has no search.
+   */
+  async goToAddress(text, signal) {
+    const place = await this.findAddress(text, signal);
+    if (!place || this.disposed) return place;
+    this.showPlace(place, { animate: true, fromAddress: false });
+    this.search?.showChosen(place.label);
+    this.events.addressSelected?.(place);
+    return place;
+  }
+  /** Takes the place found off the map. */
+  clearPlace() {
+    this.place?.overlay?.remove();
+    this.place = null;
+  }
+  /** Empties the address search and takes the place it found off the map, as its clear button does. */
+  clearAddress() {
+    if (this.search) {
+      this.search.clear();
+      return;
+    }
+    this.clearSearchPlace();
+  }
+  // Takes the place the address search went to off the map, and says so. The address the options
+  // name is the page's, not the search's: it stays.
+  clearSearchPlace() {
+    if (!this.place || this.place.fromAddress) return;
+    this.clearPlace();
+    if (this.addressPlace) this.showPlace(this.addressPlace, { move: false, fromAddress: true });
+    this.events.addressSelected?.(null);
+  }
+  /**
+   * Whether the map can be made into an image — saved, or printed as one: its provider's map can be
+   * copied. Google's can't; it is printed as it is on the page.
+   */
+  get canSaveImage() {
+    return typeof this.surface?.capture === "function";
+  }
+  /**
+   * The map as an image, as it shows now: the provider's map once its tiles are in, the pins and
+   * clusters over it, the place found, `legend` in the bottom left corner, the provider's attribution
+   * in the bottom right and, while a popup is open, `popup` where it is. Null before the map is
+   * drawn, or when its provider's map can't be copied (`canSaveImage`).
+   */
+  async toImage(legend, popup) {
+    const surface = this.surface;
+    if (!surface?.capture || !this.markers) return null;
+    const width = this.container.clientWidth;
+    const height = this.container.clientHeight;
+    if (!width || !height) return null;
+    const pixelRatio = Math.min(
+      Math.max(IMAGE_PIXEL_RATIO, globalThis.devicePixelRatio || 1),
+      IMAGE_MAX_SIZE / Math.max(width, height)
+    );
+    const map = await surface.capture(pixelRatio);
+    if (this.disposed || this.surface !== surface || !this.markers) return null;
+    const color = this.colorResolver();
+    const colors = this.imageColors(color);
+    return drawMapImage({
+      map,
+      width,
+      height,
+      marks: this.markers.marks().map((mark) => ({
+        ...mark,
+        color: color(mark.color) ?? color(DEFAULT_ITEM_COLOR) ?? "#0f6cbd",
+        point: surface.project(mark.position)
+      })),
+      place: this.place?.overlay && isValidPosition(this.place.place.position) ? surface.project(this.place.place.position) : null,
+      legend: (legend ?? []).map((entry) => ({ label: entry.label, color: color(entry.color) ?? colors.foreground })),
+      attribution: surface.attributionText?.() ?? "",
+      popup: await this.printedPopup(popup, width, height, pixelRatio),
+      colors,
+      font: this.font()
+    });
+  }
+  /**
+   * Saves the map's image (`toImage`) as a PNG file of that name. False when the map can't be made
+   * into one.
+   */
+  async saveImage(fileName = "map", legend, popup) {
+    const image = await this.toImage(legend, popup);
+    if (!image) return false;
+    await saveCanvas(image, pngFileName(fileName));
+    return true;
+  }
+  /**
+   * Prints the map with `options.title` above it and `options.entries` listed under it: its image
+   * (`toImage`), with the legend, in a frame of its own — or, for a provider whose map can't be
+   * copied, the map as it is on the page, the rest of the page left out.
+   */
+  async print(options = {}) {
+    if (!this.surface) return;
+    const color = this.colorResolver();
+    const sheet = {
+      ...options,
+      ...options.entries && {
+        entries: options.entries.map((entry) => ({ ...entry, ...entry.color && { color: color(entry.color) ?? entry.color } }))
+      },
+      language: this.options.language,
+      font: this.font(),
+      onColor: this.imageColors(color).onColor,
+      badgeColor: color(DEFAULT_ITEM_COLOR) ?? "#0f6cbd"
+    };
+    const image = await this.toImage(options.legend, options.popup);
+    if (this.disposed) return;
+    if (image) {
+      await printImage(this.container.ownerDocument, await canvasBlob(image), sheet);
+    } else {
+      printPage(this.container.parentElement ?? this.container, sheet);
+    }
+  }
+  // The popup open on the map, as the image draws it: none once its point is panned off the map,
+  // where the page shows none either. A picture of it as the page shows it, where the browser can make
+  // one; else a card of what it says — the page's own content read from the popup as it is now.
+  async printedPopup(content, width, height, ratio) {
+    const open = this.popup;
+    if (!content || !open || !this.surface) return null;
+    const point = this.surface.project(open.position);
+    if (point.x < 0 || point.y < 0 || point.x > width || point.y > height) return null;
+    const card = open.element.querySelector(".ppp-map-popup") ?? open.element;
+    const snapshot = await snapshotElement(card, this.snapshotFrame(), ratio);
+    if (this.disposed || this.popup !== open) return null;
+    const shown = content.fromPage ? readPopupContent(open.element) : content;
+    return { content: shown, point, offset: open.offset, ...snapshot && { snapshot } };
+  }
+  // Where the map's own pixels start on the page — inside its border — and how much the page scales
+  // them: the image is drawn in the map's own pixels, as the pins are projected.
+  snapshotFrame() {
+    const box = this.container.getBoundingClientRect();
+    const scale = this.container.offsetWidth ? box.width / this.container.offsetWidth : 1;
+    return { left: box.left + this.container.clientLeft * scale, top: box.top + this.container.clientTop * scale, scale };
+  }
+  // Each color resolved where the map is, once however many marks share it.
+  colorResolver() {
+    const resolved = /* @__PURE__ */ new Map();
+    return (value) => {
+      if (!resolved.has(value)) resolved.set(value, resolveColor(value, this.container));
+      return resolved.get(value);
+    };
+  }
+  imageColors(color) {
+    return {
+      background: color("var(--colorNeutralBackground1, #ffffff)") ?? "#ffffff",
+      foreground: color("var(--colorNeutralForeground1, #242424)") ?? "#242424",
+      secondary: color("var(--colorNeutralForeground3, #616161)") ?? "#616161",
+      stroke: color("var(--colorNeutralStroke2, #e0e0e0)") ?? "#e0e0e0",
+      onColor: color("var(--colorNeutralForegroundOnBrand, #ffffff)") ?? "#ffffff",
+      place: color(PLACE_COLOR) ?? "#d13438"
+    };
+  }
+  font() {
+    return getComputedStyle(this.container).fontFamily || "'Segoe UI', sans-serif";
+  }
+  /** Marks the marker of that id as the one whose popup is open; null for none. */
+  select(id) {
+    this.markers?.setSelected(id);
+  }
+  /**
+   * Keeps the host's popup element above `position` as the map moves — above the pin for a marker,
+   * just above the point for anything else — and pans the map so it is all in view.
+   */
+  showPopup(element, position, kind) {
+    if (!isValidPosition(position)) return;
+    this.popup = { element, position, offset: kind === "marker" ? MARKER_POPUP_OFFSET : SHAPE_POPUP_OFFSET };
+    element.hidden = false;
+    this.placePopup();
+    this.keepInViewPending = false;
+    this.popupObserver?.disconnect();
+    if (this.popupObserver) {
+      this.popupObserver.observe(element);
+    } else {
+      requestAnimationFrame(() => {
+        if (this.popup?.element === element) this.keepPopupInView();
+      });
+    }
+  }
+  hidePopup() {
+    if (this.popup) this.popup.element.hidden = true;
+    this.popup = null;
+    this.popupObserver?.disconnect();
+  }
+  /** Puts keyboard focus on the marker of that id, when it is shown on its own. */
+  focusMarker(id) {
+    this.markers?.elementOf(id)?.focus();
+  }
+  dispose() {
+    this.disposed = true;
+    this.addressRequest?.abort();
+    this.addressRequest = null;
+    this.search?.dispose();
+    this.search = null;
+    this.clearPlace();
+    this.stopWatching();
+    this.resizeObserver?.disconnect();
+    this.popupObserver?.disconnect();
+    this.markers?.dispose();
+    this.surface?.dispose();
+    this.surface = null;
+    this.surfaceElement.remove();
+  }
+  async draw(camera) {
+    const generation = ++this.drawGeneration;
+    const overtaken = () => this.disposed || generation !== this.drawGeneration;
+    let settings;
+    let provider;
+    try {
+      settings = await resolveProviderSettings(this.options.provider, this.options.portalSettings);
+      if (overtaken()) return;
+      provider = await findMapProvider(settings.name);
+    } catch (error) {
+      if (!overtaken()) this.events.error?.("failed", error instanceof Error ? error.message : String(error));
+      return;
+    }
+    if (overtaken()) return;
+    if (!provider) {
+      this.events.error?.("unknown-provider", settings.name);
+      return;
+    }
+    const events = {
+      click: (position) => this.events.mapClick?.({ position }),
+      shapeClick: (id, position) => this.events.itemClick?.({ id, position }),
+      viewChanging: () => {
+        this.moving = true;
+        this.placePopup();
+      },
+      redrawn: () => this.placePopup(),
+      viewChanged: () => {
+        this.moving = false;
+        this.markers?.refresh();
+        this.placePopup();
+        if (this.keepInViewPending) {
+          this.keepInViewPending = false;
+          this.keepPopupInView();
+        }
+        const view = this.surface?.getView();
+        if (view) this.events.viewChanged?.(view);
+      },
+      error: (message) => this.events.error?.("failed", message)
+    };
+    const element = this.container.ownerDocument.createElement("div");
+    element.style.width = "100%";
+    element.style.height = "100%";
+    this.surfaceElement.replaceChildren(element);
+    let surface;
+    try {
+      surface = await provider.create({
+        container: element,
+        settings,
+        style: this.options.style,
+        dark: this.dark,
+        language: this.options.language,
+        camera: camera ?? WORLD_CAMERA,
+        ...this.options.nativeOptions ? { nativeOptions: this.options.nativeOptions } : {},
+        ...this.options.gestureHelp ? { gestureHelp: this.options.gestureHelp } : {},
+        events
+      });
+    } catch (error) {
+      if (!overtaken()) this.events.error?.("failed", error instanceof Error ? error.message : String(error));
+      return;
+    }
+    if (overtaken()) {
+      surface.dispose();
+      return;
+    }
+    this.surface = surface;
+    this.drawnShapes = null;
+    if (this.place) this.showPlace(this.place.place, { move: false, fromAddress: this.place.fromAddress });
+    this.applySearch();
+    if (this.markers) {
+      this.markers.moveTo(surface);
+    } else {
+      this.markers = new MarkerLayer(surface, this.container.ownerDocument, {
+        clusterLabel: (count) => this.options.clusterLabel(count),
+        onMarkerClick: (marker) => this.events.itemClick?.({ id: marker.id, position: marker.position }),
+        onClusterClick: (position, zoom, markers) => this.clusterClicked(position, zoom, markers)
+      });
+    }
+    this.applyItems();
+    if (!camera) this.fitToItems();
+  }
+  // The address search: shown while asked for and the provider has a search, its words kept current.
+  // Taken away, it takes its place off the map with it; while the map is being drawn again it waits,
+  // its text kept, for the map it searches.
+  applySearch() {
+    if (!this.surface) return;
+    const options = this.options.addressSearch;
+    const geocoder = this.surface.geocoder ?? null;
+    if (!options || !geocoder) {
+      this.search?.dispose();
+      this.search = null;
+      this.searchGeocoder = null;
+      this.clearSearchPlace();
+      return;
+    }
+    if (this.search) {
+      this.search.setLabels(options);
+      if (geocoder !== this.searchGeocoder) this.search.forgetSuggestions();
+      this.searchGeocoder = geocoder;
+      return;
+    }
+    this.searchGeocoder = geocoder;
+    this.search = new AddressSearchBox(
+      this.container.ownerDocument,
+      {
+        suggestsAsYouType: () => this.surface?.geocoder?.suggestsAsYouType ?? false,
+        suggest: (text, signal) => this.suggestAddresses(text, signal),
+        choose: (suggestion) => this.chooseAddress(suggestion),
+        clear: () => this.clearSearchPlace()
+      },
+      options
+    );
+    this.container.append(this.search.element);
+  }
+  addressQuery(view) {
+    return { view, countries: this.options.addressSearch?.countries ?? [], language: this.options.language };
+  }
+  async suggestAddresses(text, signal) {
+    const geocoder = this.surface?.geocoder;
+    const view = this.surface?.getView();
+    if (!geocoder || !view) return [];
+    return geocoder.suggest({ ...this.addressQuery(view), text, signal });
+  }
+  async chooseAddress(suggestion) {
+    const place = await this.surface?.geocoder?.resolve(suggestion);
+    if (!place || this.disposed) return false;
+    this.showPlace(place, { animate: true, fromAddress: false });
+    this.events.addressSelected?.(place);
+    return true;
+  }
+  // The first place the provider's search finds for `text`. Null when it finds none, or there is
+  // no search.
+  async findAddress(text, signal) {
+    const geocoder = this.surface?.geocoder;
+    if (!geocoder || !text.trim()) return null;
+    const view = this.surface?.getView() ?? {
+      ...WORLD_CAMERA,
+      bounds: approximateBounds(WORLD_CAMERA.center, WORLD_CAMERA.zoom, this.container.clientWidth || 800, this.container.clientHeight || 600)
+    };
+    const [first] = await geocoder.suggest({ ...this.addressQuery(view), text: text.trim(), ...signal ? { signal } : {} });
+    return first ? await geocoder.resolve(first, signal) : null;
+  }
+  // Finds the address the options name and pins it, the search before it given up; the place it
+  // pinned goes when the address does, or when the new one isn't found. `animate` moves the view
+  // there gradually — not as the map is first drawn, when it starts out looking at the world.
+  async showAddress(animate) {
+    this.addressRequest?.abort();
+    this.addressRequest = null;
+    if (!this.surface || this.disposed) return;
+    const text = this.options.address?.trim();
+    this.addressPlace = null;
+    if (!text) {
+      if (this.place?.fromAddress) this.clearPlace();
+      return;
+    }
+    const request = new AbortController();
+    this.addressRequest = request;
+    this.events.addressStatus?.("searching");
+    let status;
+    try {
+      const place = this.surface.geocoder ? await this.findAddress(text, request.signal) : null;
+      if (request.signal.aborted || this.disposed) return;
+      if (place) {
+        this.addressPlace = place;
+        this.showPlace(place, { animate, fromAddress: true });
+      } else if (this.place?.fromAddress) {
+        this.clearPlace();
+      }
+      status = place ? "found" : this.surface?.geocoder ? "not-found" : "failed";
+    } catch {
+      if (request.signal.aborted || this.disposed) return;
+      if (this.place?.fromAddress) this.clearPlace();
+      status = "failed";
+    } finally {
+      if (this.addressRequest === request) this.addressRequest = null;
+    }
+    this.events.addressStatus?.(status);
+  }
+  // Pins the place found — the one place, replacing any before it — and, unless `move` is false,
+  // brings it into view: its area fitted, or the streets around a point.
+  showPlace(place, { move = true, animate = false, fromAddress }) {
+    this.place?.overlay?.remove();
+    this.place = { place, overlay: null, fromAddress };
+    if (!this.surface || !isValidPosition(place.position)) return;
+    const element = this.container.ownerDocument.createElement("div");
+    element.className = "ppp-map-place";
+    element.innerHTML = PIN_SVG;
+    element.setAttribute("role", "img");
+    element.setAttribute("aria-label", place.label);
+    element.dataset.pppTooltip = place.label;
+    this.place.overlay = this.surface.addOverlay(element, place.position, "bottom");
+    if (!move) return;
+    this.fitPending = false;
+    if (place.bounds) this.surface.fitBounds(place.bounds, FIT_PADDING, PLACE_MAX_ZOOM);
+    else this.surface.setCamera({ center: place.position, zoom: PLACE_ZOOM }, animate);
+  }
+  // The same provider's map drawn again where it was looking — for a change it can't make in place.
+  async redraw() {
+    const camera = this.surface?.getView() ?? this.options.camera ?? null;
+    this.place?.overlay?.remove();
+    if (this.place) this.place.overlay = null;
+    this.surface?.dispose();
+    this.surface = null;
+    this.dark = this.options.usePortalTheme && isDarkTheme(this.container);
+    await this.draw(camera ? { center: camera.center, zoom: camera.zoom } : null);
+  }
+  applyItems() {
+    if (!this.surface || !this.markers) return;
+    const markers = [];
+    this.shapes = [];
+    for (const item of this.items) {
+      if (item.kind === "marker") markers.push(item);
+      else this.shapes.push(item);
+    }
+    this.markers.setMarkers(markers, this.options.cluster);
+    this.drawnShapes = null;
+    this.drawShapes();
+  }
+  // A surface draws on a canvas or with the provider's own shapes, which take a color, not a CSS
+  // variable: each is resolved where the map is, and again when the theme changes.
+  drawShapes() {
+    if (!this.surface) return;
+    const resolved = /* @__PURE__ */ new Map();
+    const resolve = (color) => {
+      if (!resolved.has(color)) resolved.set(color, resolveColor(color, this.container));
+      return resolved.get(color);
+    };
+    const fallback = resolve(DEFAULT_ITEM_COLOR) ?? "#0f6cbd";
+    const colors = this.shapes.map((shape) => shape.color && resolve(shape.color) || fallback);
+    const key = colors.join("|");
+    if (this.drawnShapes?.shapes === this.shapes && this.drawnShapes.colors === key) return;
+    this.drawnShapes = { shapes: this.shapes, colors: key };
+    this.surface.setShapes(this.shapes.map((shape, index) => ({ ...shape, color: colors[index] })));
+  }
+  clusterClicked(position, zoom, markers) {
+    if (zoom !== null && this.surface) {
+      this.surface.setCamera({ center: position, zoom }, true);
+      return;
+    }
+    this.events.clusterClick?.({ ids: markers.map((marker) => marker.id), position });
+  }
+  resized() {
+    this.surface?.resize();
+    if (this.fitPending) this.fitToItems(this.fitPendingIds);
+  }
+  themeChanged() {
+    if (this.disposed) return;
+    this.drawShapes();
+    const dark = this.options.usePortalTheme && isDarkTheme(this.container);
+    if (dark === this.dark || !this.surface) return;
+    this.dark = dark;
+    if (!this.surface.setStyle(this.options.style, dark)) void this.redraw();
+  }
+  placePopup() {
+    if (!this.popup || !this.surface) return;
+    const point = this.surface.project(this.popup.position);
+    const style = this.popup.element.style;
+    style.left = `${point.x}px`;
+    style.top = `${point.y - this.popup.offset}px`;
+    style.transform = "translate(-50%, -100%)";
+  }
+  // Keeps the popup in view now, or once the map stops moving.
+  requestKeepInView() {
+    if (this.moving) this.keepInViewPending = true;
+    else this.keepPopupInView();
+  }
+  keepPopupInView() {
+    if (!this.popup || !this.surface) return;
+    const margin = 12;
+    const popup = this.popup.element.getBoundingClientRect();
+    const map = this.container.getBoundingClientRect();
+    let x = 0;
+    let y = 0;
+    if (popup.top < map.top + margin) y = popup.top - map.top - margin;
+    if (popup.left < map.left + margin) x = popup.left - map.left - margin;
+    else if (popup.right > map.right - margin) x = popup.right - map.right + margin;
+    if (x !== 0 || y !== 0) this.surface.panBy(x, y);
+  }
+};
+function pngFileName(name) {
+  const cleaned = name.replace(/[\\/:*?"<>|\u0000-\u001f]+/g, " ").replace(/\s+/g, " ").trim().replace(/\.png$/i, "") || "map";
+  return `${cleaned}.png`;
+}
+
+// src/core/near.ts
+var DistanceUnits = { Miles: 0, Kilometers: 1 };
+var DEFAULT_NEAR_DISTANCES = Object.freeze([1, 5, 10, 25, 50, 100]);
+var DEFAULT_NEAR_DISTANCE = 25;
+function metersPer(unit) {
+  return unit === DistanceUnits.Kilometers ? 1e3 : 1609.344;
+}
+function formatDistance(value, language) {
+  return value.toLocaleString(language, { maximumFractionDigits: value < 10 ? 1 : 0 });
+}
+var WORLD_VIEW = {
+  center: { latitude: 0, longitude: 0 },
+  zoom: 1,
+  bounds: { north: 85, south: -85, east: 180, west: -180 }
+};
+async function placeFinder(settings, language, document) {
+  switch (settings.name) {
+    case "azureMaps": {
+      const getToken = settings.getToken;
+      if (!getToken) return null;
+      let token = null;
+      const signIn = async () => {
+        const expiresOn = token ? Date.parse(token.expiresOn) : Number.NaN;
+        if (!token || Number.isFinite(expiresOn) && expiresOn - Date.now() < 5 * 6e4) token = await getToken();
+      };
+      const search = azureMapsGeocoder(AZURE_MAPS_ENDPOINT, () => azureMapsHeaders(token), settings.view);
+      return {
+        suggestsAsYouType: search.suggestsAsYouType,
+        suggest: async (query) => {
+          await signIn();
+          return search.suggest(query);
+        },
+        resolve: async (suggestion, signal) => {
+          await signIn();
+          return search.resolve(suggestion, signal);
+        }
+      };
+    }
+    case "esri":
+      return esriGeocoder(settings.apiKey ?? "");
+    case "google": {
+      const { googlePlaceFinder } = await import(
+        /* webpackChunkName: "google" */
+        './google-6EZOUTYI.js'
+      );
+      return googlePlaceFinder(settings.apiKey ?? "", language, document);
+    }
+    case "openStreetMap":
+    case "mapLibre":
+      return nominatimGeocoder(settings.geocoderUrl || void 0);
+    default:
+      return null;
+  }
+}
+function locate(navigator = globalThis.navigator) {
+  return new Promise((resolve, reject) => {
+    if (!navigator?.geolocation) {
+      reject(new Error("The browser can't tell where it is."));
+      return;
+    }
+    navigator.geolocation.getCurrentPosition(
+      ({ coords }) => resolve({ latitude: coords.latitude, longitude: coords.longitude }),
+      (error) => reject(new Error(error.message)),
+      { enableHighAccuracy: false, timeout: 15e3, maximumAge: 6e4 }
+    );
+  });
+}
+var NEAR_CSS = `
+.ppp-near-place-search.ppp-map-search { position: relative; top: auto; left: auto; z-index: auto; width: 100%; }
+.ppp-near-place-search .ppp-map-search-field { box-shadow: none; }
+.ppp-near-place-search .ppp-map-search-panel { position: absolute; left: 0; right: 0; z-index: 1; }
+`;
+function mountPlaceSearch(container, options) {
+  const document = container.ownerDocument;
+  ensureMapStyles(document);
+  ensureStyleSheet(document, "ppp-near-styles", NEAR_CSS);
+  const { finder } = options;
+  const box = new AddressSearchBox(
+    document,
+    {
+      suggestsAsYouType: () => finder?.suggestsAsYouType ?? false,
+      suggest: (text, signal) => finder ? finder.suggest({ text, view: WORLD_VIEW, countries: options.countries ?? [], language: options.language, signal }) : Promise.resolve([]),
+      choose: async (suggestion) => {
+        const place = finder ? await finder.resolve(suggestion) : null;
+        if (!place) return false;
+        options.chosen(place);
+        return true;
+      },
+      clear: () => options.cleared?.()
+    },
+    options.labels
+  );
+  box.element.classList.add("ppp-near-place-search");
+  container.appendChild(box.element);
+  return box;
+}
+
+// src/portal-settings-cache.ts
+var portalSettingsCaches = /* @__PURE__ */ new WeakMap();
+function portalSettingsCache(ppp) {
+  let cache = portalSettingsCaches.get(ppp);
+  if (!cache) portalSettingsCaches.set(ppp, cache = new PortalMapSettingsCache());
+  return cache;
+}
+var useStyles = makeStyles({
+  surface: {
+    display: "flex",
+    flexDirection: "column",
+    rowGap: tokens.spacingVerticalM,
+    width: `min(340px, calc(100vw - ${tokens.spacingHorizontalXXXL}))`,
+    boxSizing: "border-box"
+  },
+  location: {
+    display: "flex",
+    alignItems: "center",
+    columnGap: tokens.spacingHorizontalS,
+    flexWrap: "wrap"
+  },
+  failure: {
+    color: tokens.colorPaletteRedForeground1
+  },
+  measures: {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
+    columnGap: tokens.spacingHorizontalM
+  },
+  dropdown: {
+    minWidth: 0
+  },
+  actions: {
+    display: "flex",
+    justifyContent: "flex-end"
+  }
+});
+var NEAR_CIRCLE_ID = "ppp-near-circle";
+function nearCircleId(near) {
+  return `${NEAR_CIRCLE_ID}:${near.latitude},${near.longitude},${near.distance},${near.unit}`;
+}
+var NEAR_COLOR = "var(--colorPaletteRedBackground3, #d13438)";
+function nearPlaceItems(near) {
+  const center = { latitude: near.latitude, longitude: near.longitude };
+  return [
+    { kind: "circle", id: nearCircleId(near), center, radius: near.distance * metersPer(near.unit), color: NEAR_COLOR },
+    { kind: "marker", id: "ppp-near-place", position: center, title: near.label, color: NEAR_COLOR }
+  ];
+}
+var finders = /* @__PURE__ */ new Map();
+function NearSearch({ value, onChange, distances, defaultDistance, defaultUnit, provider, countries, className }) {
+  const styles = useStyles();
+  const t = usePrefixedT("app.components.map");
+  const { ppp } = usePowerPortalsPro();
+  const { locale } = useLocale();
+  const offered = distances && distances.length > 0 ? distances : DEFAULT_NEAR_DISTANCES;
+  const startDistance = defaultDistance ?? (offered.includes(DEFAULT_NEAR_DISTANCE) ? DEFAULT_NEAR_DISTANCE : offered[0]);
+  const [open, setOpen] = useState(false);
+  const [distance, setDistance] = useState(value?.distance ?? startDistance);
+  const [unit, setUnit] = useState(value?.unit ?? defaultUnit ?? DistanceUnits.Miles);
+  useEffect(() => {
+    if (value) {
+      setDistance(value.distance);
+      setUnit(value.unit);
+    }
+  }, [value]);
+  const [locating, setLocating] = useState(false);
+  const [locationFailed, setLocationFailed] = useState(false);
+  const distanceText = (miles, inUnit) => t(inUnit === DistanceUnits.Kilometers ? "distance-kilometers" : "distance-miles", [formatDistance(miles, locale)]);
+  const choices = offered.includes(distance) ? offered : [...offered, distance].sort((a, b) => a - b);
+  const latest = useRef({ distance, unit, onChange });
+  latest.current = { distance, unit, onChange };
+  const boxHost = useRef(null);
+  const providerKey = provider ? JSON.stringify(provider) : "";
+  const countriesKey = (countries ?? []).join(",");
+  const label = value?.label ?? null;
+  useEffect(() => {
+    const host = boxHost.current;
+    if (!open || !host) return;
+    let finder = finders.get(providerKey);
+    if (!finder) {
+      finder = resolveProviderSettings(provider, (name) => portalSettingsCache(ppp).get(name, (asked) => ppp.getMapSettingsAsync(asked))).then((settings) => placeFinder(settings, locale, host.ownerDocument)).catch((error) => {
+        finders.delete(providerKey);
+        console.warn("[NearSearch] The map provider's address search couldn't be set up.", error);
+        return null;
+      });
+      finders.set(providerKey, finder);
+    }
+    let box = null;
+    let gone = false;
+    void finder.then((found) => {
+      if (gone) return;
+      box = mountPlaceSearch(host, {
+        finder: found,
+        language: locale,
+        countries: countriesKey ? countriesKey.split(",") : [],
+        labels: {
+          placeholder: t("search-placeholder"),
+          clear: t("search-clear"),
+          searching: t("searching"),
+          noResults: t("search-no-results"),
+          failed: t("search-failed")
+        },
+        chosen: (place) => {
+          const { distance: chosenDistance, unit: chosenUnit, onChange: change } = latest.current;
+          change({
+            label: place.label,
+            latitude: place.position.latitude,
+            longitude: place.position.longitude,
+            distance: chosenDistance,
+            unit: chosenUnit
+          });
+          setOpen(false);
+        }
+      });
+      if (label) box.showChosen(label);
+    });
+    return () => {
+      gone = true;
+      box?.dispose();
+    };
+  }, [open, ppp, providerKey, countriesKey, locale]);
+  const findMyLocation = () => {
+    setLocating(true);
+    setLocationFailed(false);
+    locate().then(
+      (position) => {
+        setLocating(false);
+        onChange({ label: t("near-my-place"), ...position, distance, unit });
+        setOpen(false);
+      },
+      () => {
+        setLocating(false);
+        setLocationFailed(true);
+      }
+    );
+  };
+  const measure = (nextDistance, nextUnit) => {
+    setDistance(nextDistance);
+    setUnit(nextUnit);
+    if (value) onChange({ ...value, distance: nextDistance, unit: nextUnit });
+  };
+  const tooltip = value ? t("near-active", [distanceText(value.distance, value.unit), value.label]) : t("near-title");
+  return /* @__PURE__ */ jsxs(Popover, { positioning: "below-end", withArrow: true, trapFocus: true, open, onOpenChange: (_, data) => setOpen(data.open), children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(Tooltip, { content: tooltip, relationship: "label", withArrow: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: mergeClasses("ppp-near-search", className),
+        appearance: value ? "primary" : "subtle",
+        icon: value ? /* @__PURE__ */ jsx(Location24Filled, {}) : /* @__PURE__ */ jsx(Location24Regular, {}),
+        children: value ? distanceText(value.distance, value.unit) : void 0
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs(PopoverSurface, { className: mergeClasses("ppp-near-search-panel", styles.surface), "aria-label": t("near-title"), children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Label, { children: t("near-place") }),
+        /* @__PURE__ */ jsx("div", { ref: boxHost, className: "ppp-near-search-place" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.location, children: [
+        /* @__PURE__ */ jsx(Button, { appearance: "subtle", icon: /* @__PURE__ */ jsx(MyLocation20Regular, {}), disabled: locating, onClick: findMyLocation, children: t("near-my-location") }),
+        locating && /* @__PURE__ */ jsx(Spinner, { size: "extra-tiny", label: t("near-locating") })
+      ] }),
+      locationFailed && /* @__PURE__ */ jsx(Text, { size: 200, className: styles.failure, role: "alert", children: t("near-location-failed") }),
+      /* @__PURE__ */ jsxs("div", { className: styles.measures, children: [
+        /* @__PURE__ */ jsx(Field, { label: t("near-distance"), children: /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            className: mergeClasses("ppp-near-search-distance", styles.dropdown),
+            value: distanceText(distance, unit),
+            selectedOptions: [String(distance)],
+            onOptionSelect: (_, data) => data.optionValue && measure(Number(data.optionValue), unit),
+            children: choices.map((choice) => /* @__PURE__ */ jsx(Option, { value: String(choice), children: distanceText(choice, unit) }, choice))
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Field, { label: t("near-unit"), children: /* @__PURE__ */ jsxs(
+          Dropdown,
+          {
+            className: mergeClasses("ppp-near-search-unit", styles.dropdown),
+            value: unit === DistanceUnits.Kilometers ? t("near-kilometers") : t("near-miles"),
+            selectedOptions: [String(unit)],
+            onOptionSelect: (_, data) => data.optionValue && measure(distance, Number(data.optionValue)),
+            children: [
+              /* @__PURE__ */ jsx(Option, { value: String(DistanceUnits.Miles), children: t("near-miles") }),
+              /* @__PURE__ */ jsx(Option, { value: String(DistanceUnits.Kilometers), children: t("near-kilometers") })
+            ]
+          }
+        ) })
+      ] }),
+      value && /* @__PURE__ */ jsx("div", { className: styles.actions, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "ppp-near-search-clear",
+          icon: /* @__PURE__ */ jsx(Dismiss16Regular, {}),
+          onClick: () => {
+            onChange(null);
+            setOpen(false);
+          },
+          children: t("near-clear")
+        }
+      ) })
+    ] })
+  ] });
+}
+var OPTION_COLORS = [
+  "var(--colorPaletteBerryBackground3, #c239b3)",
+  "var(--colorPaletteTealBackground3, #038387)",
+  "var(--colorPaletteDarkOrangeBackground3, #da3b01)",
+  "var(--colorPaletteCornflowerBackground3, #4f6bed)",
+  "var(--colorPaletteGreenBackground3, #107c10)",
+  "var(--colorPaletteMarigoldBackground3, #eaa300)",
+  "var(--colorPaletteGrapeBackground3, #881798)",
+  "var(--colorPaletteRedBackground3, #d13438)",
+  "var(--colorPaletteSteelBackground3, #005b70)",
+  "var(--colorPaletteLightGreenBackground3, #13a10e)"
+];
+var NO_VALUE_COLOR = "var(--colorNeutralForeground4, #707070)";
+var COLORING_COLUMNS = /* @__PURE__ */ new Set([ColumnType.Boolean, ColumnType.Choice, ColumnType.State, ColumnType.Status]);
+function colorOptions(column) {
+  if (!column || !COLORING_COLUMNS.has(column.$type ?? -1) || !("choices" in column) || !column.choices) return null;
+  return column.choices.map((choice) => ({ value: Number(choice.value), ...choice.color ? { color: choice.color } : {} }));
+}
+function optionValue(record, column) {
+  const value = readColumnRawValue(record, column);
+  if (typeof value === "boolean") return value ? 1 : 0;
+  const number = typeof value === "string" && value !== "" ? Number(value) : value;
+  return typeof number === "number" && Number.isFinite(number) ? number : null;
+}
+function optionColor(options, value) {
+  if (value === null) return NO_VALUE_COLOR;
+  const index = options.findIndex((option) => option.value === value);
+  if (index < 0) return OPTION_COLORS[Math.abs(value) % OPTION_COLORS.length];
+  return options[index].color ?? OPTION_COLORS[index % OPTION_COLORS.length];
+}
+function optionOrder(options, value) {
+  if (value === null) return [2, 0];
+  const index = options.findIndex((option) => option.value === value);
+  return index < 0 ? [1, value] : [0, index];
+}
+var DEFAULT_LATITUDE_COLUMN = "address1_latitude";
+var DEFAULT_LONGITUDE_COLUMN = "address1_longitude";
+var DEFAULT_MAX_ROWS = 1e3;
+function toNumber(value) {
+  const number = typeof value === "string" ? Number(value) : value;
+  return typeof number === "number" && Number.isFinite(number) ? number : null;
+}
+function recordMarkers(response, options) {
+  const columns = response.columns ?? [];
+  const markers = [];
+  for (const record of response.tableRecords ?? []) {
+    const latitude = toNumber(readColumnRawValue(record, options.latitudeColumn));
+    const longitude = toNumber(readColumnRawValue(record, options.longitudeColumn));
+    if (latitude === null || longitude === null) continue;
+    const title = options.titleColumn ? resolveColumnDisplayValue(record, options.titleColumn) : null;
+    const color = options.color(record);
+    const url = options.url(record);
+    markers.push({
+      kind: "marker",
+      id: getRecordReferenceId(record) ?? `${markers.length}`,
+      position: { latitude, longitude },
+      ...title ? { title } : {},
+      ...color ? { color } : {},
+      ...url ? { url } : {},
+      data: { record, columns }
+    });
+  }
+  return markers;
+}
+function recordUrl(url, record) {
+  if (typeof url === "function") return url(record);
+  const id = getRecordReferenceId(record);
+  return url && id ? url.replaceAll("{0}", id).replaceAll("{1}", record.tableName) : void 0;
+}
+function coordinatesFilterXml(latitudeColumn, longitudeColumn) {
+  const condition = (column) => `<condition attribute="${column.replace(/"/g, "&quot;")}" operator="not-null" />`;
+  return `<filter type="and">${condition(latitudeColumn)}${condition(longitudeColumn)}</filter>`;
+}
+function fetchXmlTable(fetchXml) {
+  return /<entity\s+[^>]*name\s*=\s*["']([^"']+)["']/i.exec(fetchXml)?.[1] ?? null;
+}
+var TABLE_COLORS = ["var(--colorBrandBackground, #0f6cbd)", ...OPTION_COLORS];
+var EMPTY = { places: [] };
+var NO_PLACES = [];
+function useMapTables(options) {
+  const { enabled, tables, defaultTables, defaultViewId: defaultViewId$1, viewIds, regarding, allowFiltering, allowSavedViews, savedViewsKey, signInUrl, title, toolbarActions } = options;
+  const [near, setNear] = useState(null);
+  const viewIdsKey = viewIds?.join(",") ?? null;
+  const t = usePrefixedT("app.components.map");
+  const { ppp, authState } = usePowerPortalsPro();
+  const control = useMemo(
+    () => savedViewControl(SavedViewControlKind.Map, allowSavedViews ? savedViewsKey : void 0),
+    [allowSavedViews, savedViewsKey]
+  );
+  const saved = useSavedViews({ enabled: enabled && allowSavedViews, tableName: MultiTableViewSchema.table, control });
+  const multiSaved = useMultiTableViews({ enabled: enabled && allowSavedViews && saved.available, control });
+  const awaitsSavedViews = allowSavedViews && (authState.status === "loading" || saved.loading || multiSaved.loading);
+  const [chosen, setChosen] = useState(null);
+  const [opened, setOpened] = useState(EVERY_TABLE_VIEW_ID);
+  const tableSetViewId = chosen ?? opened;
+  const tableSet = useMultiTableTableSet({ use: MultiTableUses.Map, viewId: tableSetViewId, tables, defaultTables: defaultTables ?? [] });
+  const registered = tableSet.registered;
+  useEffect(() => {
+    if (enabled && !registered) void tableSet.registeredAsync().catch(() => void 0);
+  }, [enabled, registered]);
+  const findSavedView = (id) => multiSaved.views.find((x) => x.id.toLowerCase() === id.toLowerCase());
+  const offered = allowSavedViews && saved.available;
+  const { views, allViews } = useMemo(() => {
+    if (!registered) return { views: [], allViews: [] };
+    const everyTable = { id: EVERY_TABLE_VIEW_ID, name: t("every-table"), multiTableViewId: null, tables: null };
+    const registeredView = (view) => ({
+      id: view.id,
+      name: view.name,
+      multiTableViewId: view.id,
+      tables: null
+    });
+    const named = viewIdsKey === null ? null : viewIdsKey.split(",").map((id) => registered.views.find((view) => view.id.toLowerCase() === id.toLowerCase())).filter((view) => view !== void 0).map(registeredView);
+    const listed = named === null ? [everyTable, ...registered.views.map(registeredView)] : named.length > 0 ? named : [everyTable];
+    if (offered) for (const own of multiSaved.views) listed.push({ id: own.id, name: own.name, multiTableViewId: null, tables: [...own.tables] });
+    const first = offered ? defaultViewId(saved.settings, listed.map((x) => x.id), control) : void 0;
+    const ordered = first ? [...listed.filter((x) => x.id === first), ...listed.filter((x) => x.id !== first)] : listed;
+    const shownOnes = ordered.filter((x) => x.id === chosen || !offered || !isViewHidden(saved.settings, x.id, control));
+    return { views: shownOnes.length > 0 ? shownOnes : ordered, allViews: listed };
+  }, [registered, offered, multiSaved.views, saved.settings, control, chosen, viewIdsKey]);
+  const userDefault = offered ? defaultViewId(saved.settings, views.map((x) => x.id), control) : void 0;
+  const shownView = views.find((x) => x.id === chosen) ?? views.find((x) => x.id === userDefault) ?? views.find((x) => x.id === defaultViewId$1) ?? views[0] ?? null;
+  useEffect(() => {
+    if (!chosen && shownView && shownView.id !== opened) setOpened(shownView.id);
+  });
+  const known = registered && shownView && shownView.id === tableSetViewId ? tableSet.tablesOf(shownView.tables, shownView.multiTableViewId) : null;
+  useEffect(() => {
+    if (known && known.join(",") !== tableSet.known.join(",")) tableSet.setKnown(tableSetViewId, known);
+  });
+  const filter = tableSet.filter;
+  const shownTables = tableSet.shown;
+  const [refreshes, setRefreshes] = useState(0);
+  const [read, setRead] = useState(null);
+  const [failed, setFailed] = useState(false);
+  const request = enabled && shownView && known && known.join(",") === tableSet.known.join(",") && !awaitsSavedViews ? {
+    viewId: filter ? null : shownView.multiTableViewId,
+    tables: filter ? [...filter.tables] : shownView.tables ? [...shownView.tables] : null,
+    includeTables: [...shownTables],
+    regarding: regarding ? { tableName: regarding.tableName, id: regarding.id } : null,
+    near: near ? { latitude: near.latitude, longitude: near.longitude, distance: near.distance, unit: near.unit } : null
+  } : null;
+  const requestKey = request ? JSON.stringify([request, refreshes]) : null;
+  const latestRequest = useRef(request);
+  latestRequest.current = request;
+  useEffect(() => {
+    const asked = latestRequest.current;
+    if (!asked || !requestKey) return;
+    setFailed(false);
+    if ((asked.includeTables ?? []).length === 0) {
+      setRead({ key: requestKey, response: EMPTY });
+      return;
+    }
+    const controller = new AbortController();
+    ppp.loadMultiTablePlacesAsync(asked, controller.signal).then(
+      (response2) => {
+        if (!controller.signal.aborted) setRead({ key: requestKey, response: response2 });
+      },
+      (error) => {
+        if (controller.signal.aborted) return;
+        console.warn("[Map] The map's tables could not be read.", error);
+        setFailed(true);
+        setRead({ key: requestKey, response: EMPTY });
+      }
+    );
+    return () => controller.abort();
+  }, [ppp, requestKey]);
+  const response = read?.key === requestKey ? read.response : null;
+  const loading = enabled && !response && !failed;
+  const tableLabel = (table) => tableSet.tableLabel(table);
+  const tableColor = (table) => {
+    const color = tableSet.infoOf(table)?.definition?.color;
+    if (color) return color;
+    const index = Math.max(0, tableSet.known.findIndex((x) => x.toLowerCase() === table.toLowerCase()));
+    return TABLE_COLORS[index % TABLE_COLORS.length];
+  };
+  const failedTables = new Set((response?.failures ?? []).map((x) => x.table.toLowerCase()));
+  const truncated = new Set((response?.truncated ?? []).map((x) => x.toLowerCase()));
+  const legend = !enabled || shownTables.length < 2 && failedTables.size === 0 && truncated.size === 0 ? [] : shownTables.map((table) => ({
+    table,
+    label: tableLabel(table),
+    color: tableColor(table),
+    note: failedTables.has(table.toLowerCase()) ? t("table-failed") : truncated.has(table.toLowerCase()) ? t("table-truncated") : null
+  }));
+  const viewTables = () => {
+    if (!shownView) return [];
+    if (shownView.tables) return [...shownView.tables];
+    if (shownView.multiTableViewId) return [...registered?.views.find((x) => x.id === shownView.multiTableViewId)?.tables ?? []];
+    return tableSet.known.map((table) => ({ table }));
+  };
+  const showsFilterButton = allowFiltering && viewTables().length > 0;
+  const openFilter = async () => {
+    const view = shownView;
+    const tablesOfIt = viewTables();
+    if (!view || tablesOfIt.length === 0) return;
+    try {
+      tableSet.openFilter(view.id, await tableSet.filterQueries(tablesOfIt), tableSet.known, tableLabel);
+    } catch (error) {
+      console.warn("[Map] The filters of the view shown could not be read.", error);
+    }
+  };
+  const currentTables = () => shownView ? shownViewTables(filter ? filter.tables : viewTables(), tableSet.known, tableSet.shown, (table) => !!tableSet.infoOf(table)?.isActivity) : [];
+  const viewChanged = !!filter || tableSet.tablesChanged;
+  const shownSaved = shownView ? findSavedView(shownView.id) : void 0;
+  const choose = (id) => {
+    setChosen(id);
+    tableSet.reset();
+  };
+  const viewName = (id) => allViews.find((x) => x.id.toLowerCase() === id.toLowerCase())?.name ?? findSavedView(id)?.name ?? t("every-table");
+  const session = useSavedViewSession({
+    saved,
+    signInUrl,
+    operations: {
+      shownViewId: shownView?.id,
+      savedViewName: (id) => findSavedView(id)?.name,
+      managedViewName: viewName,
+      managedViews: () => allViews.map((view) => ({
+        id: view.id,
+        name: view.name,
+        isSaved: !!findSavedView(view.id),
+        isDefault: defaultViewId(saved.settings, allViews.map((x) => x.id), control) === view.id,
+        isHidden: isViewHidden(saved.settings, view.id, control),
+        isShown: view.id === shownView?.id
+      })),
+      save: async () => {
+        const tablesNow = currentTables();
+        if (!shownSaved || tablesNow.length === 0) return;
+        await multiSaved.update(shownSaved.id, { tables: tablesNow });
+        choose(shownSaved.id);
+      },
+      saveAs: async (name) => {
+        const tablesNow = currentTables();
+        if (tablesNow.length === 0) return;
+        const view = await multiSaved.create(name, tablesNow, {});
+        choose(view.id);
+      },
+      clone: async (id, name) => {
+        const view = allViews.find((x) => x.id === id);
+        const tablesOfIt = findSavedView(id)?.tables ?? (view?.multiTableViewId ? registered?.views.find((x) => x.id === view.multiTableViewId)?.tables : null) ?? (view ? (registered?.tables ?? []).filter((x) => !tableSet.allowed || tableSet.allowed.has(x.table.toLowerCase())).map((x) => ({ table: x.table })) : []);
+        if (tablesOfIt.length === 0) return;
+        await multiSaved.create(name, tablesOfIt, {});
+      },
+      rename: async (id, name) => void await multiSaved.update(id, { name }),
+      remove: async (id) => {
+        await multiSaved.remove(id);
+        await saved.reloadSettings();
+        if (shownView?.id === id) choose(null);
+      },
+      openView: (id) => {
+        if (id !== shownView?.id) choose(id);
+      }
+    }
+  });
+  const toolbar = enabled ? /* @__PURE__ */ jsxs(
+    ViewToolbar,
+    {
+      className: "ppp-map-header",
+      ariaLabel: t("toolbar"),
+      start: (
+        // A choice of one where the user saves views: the picker is how they reach theirs.
+        views.length > (session.showsMenu ? 0 : 1) ? /* @__PURE__ */ jsx(
+          ViewPicker,
+          {
+            className: "ppp-map-view-picker",
+            options: views.map((view) => ({ id: view.id, label: view.name })),
+            value: shownView?.id,
+            onChange: choose,
+            isUserView: (id) => !!findSavedView(id)
+          }
+        ) : title ? /* @__PURE__ */ jsx(Subtitle2, { as: "h2", children: title }) : null
+      ),
+      children: [
+        options.allowNearSearch && /* @__PURE__ */ jsx(
+          NearSearch,
+          {
+            value: near,
+            onChange: setNear,
+            distances: options.nearDistances,
+            defaultDistance: options.nearDistance,
+            defaultUnit: options.nearDistanceUnit,
+            provider: options.provider,
+            countries: options.addressSearchCountries
+          }
+        ),
+        toolbarActions,
+        /* @__PURE__ */ jsx(
+          ViewFilterMenu,
+          {
+            changed: viewChanged,
+            onEditFilters: showsFilterButton ? () => void openFilter() : void 0,
+            tables: tableSet.menuTables(tableLabel),
+            onTableShownChange: tableSet.showTable,
+            savedViews: session.menu({
+              canSave: !!shownSaved && viewChanged,
+              canSaveAs: currentTables().length > 0 && viewChanged,
+              canSetDefault: !!shownView && userDefault !== shownView.id
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ViewRefreshButton,
+          {
+            onClick: () => {
+              tableSet.forget();
+              setRefreshes((x) => x + 1);
+            }
+          }
+        )
+      ]
+    }
+  ) : null;
+  const dialogs = enabled ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      MultiTableFilterDialog,
+      {
+        open: tableSet.filterDialog !== null,
+        tabs: tableSet.filterDialog?.tabs ?? [],
+        viewTabs: tableSet.filterDialog?.viewTabs,
+        onApply: (criteria, restoreView) => void tableSet.applyFilter(criteria, restoreView),
+        onCancel: tableSet.closeFilter
+      }
+    ),
+    /* @__PURE__ */ jsx(SavedViewDialogs, { session })
+  ] }) : null;
+  return {
+    places: response?.places ?? NO_PLACES,
+    loading,
+    failed,
+    // A new place to be near, or distance, is a new extent too.
+    fitKey: `${shownView?.id ?? ""}|${regarding?.id ?? ""}|${JSON.stringify(filter?.tables ?? null)}|${near ? JSON.stringify([near.latitude, near.longitude, near.distance, near.unit]) : ""}`,
+    colors: Object.fromEntries(tableSet.known.map((table) => [table, tableColor(table)])),
+    legend,
+    near: enabled ? near : null,
+    toolbar,
+    dialogs
+  };
+}
+function MapTablesBar({ onState, ...options }) {
+  const tables = useMapTables({ ...options, enabled: true });
+  const { places, loading, failed, fitKey, colors, legend, near } = tables;
+  const key = JSON.stringify([loading, failed, fitKey, colors, legend, near]);
+  const latest = useRef(onState);
+  latest.current = onState;
+  useEffect(() => {
+    latest.current({ places, loading, failed, fitKey, colors, legend, near });
+  }, [places, key]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    tables.toolbar,
+    tables.dialogs
+  ] });
+}
+var STRINGS_PREFIX = "app.components.map";
+function itemClick(item, position) {
+  let prevented = false;
+  return {
+    item,
+    position,
+    preventDefault: () => {
+      prevented = true;
+    },
+    get defaultPrevented() {
+      return prevented;
+    }
+  };
+}
+var useStyles2 = makeStyles({
+  root: {
+    position: "relative",
+    // Lets the map shrink inside a flex or grid parent, as the Chart's wrapper does.
+    minWidth: 0,
+    overflow: "hidden",
+    borderRadius: tokens.borderRadiusMedium,
+    backgroundColor: tokens.colorNeutralBackground3
+  },
+  overlay: {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 3,
+    pointerEvents: "none"
+  },
+  message: {
+    position: "absolute",
+    top: tokens.spacingVerticalS,
+    left: tokens.spacingHorizontalS,
+    right: tokens.spacingHorizontalS,
+    zIndex: 3
+  },
+  printButton: {
+    boxShadow: tokens.shadow4
+  },
+  // The legend and the note over the bottom left corner, clear of a provider's logo there.
+  corner: {
+    position: "absolute",
+    left: tokens.spacingHorizontalS,
+    bottom: `calc(${tokens.spacingVerticalXXL} + ${tokens.spacingVerticalS})`,
+    zIndex: 1,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: tokens.spacingVerticalXS,
+    maxWidth: `calc(100% - 2 * ${tokens.spacingHorizontalS})`,
+    pointerEvents: "none"
+  },
+  note: {
+    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
+    borderRadius: tokens.borderRadiusMedium,
+    backgroundColor: tokens.colorNeutralBackground1,
+    boxShadow: tokens.shadow4
+  },
+  legend: {
+    display: "flex",
+    flexWrap: "wrap",
+    columnGap: tokens.spacingHorizontalM,
+    rowGap: tokens.spacingVerticalXXS,
+    margin: 0,
+    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
+    listStyleType: "none",
+    borderRadius: tokens.borderRadiusMedium,
+    backgroundColor: tokens.colorNeutralBackground1,
+    boxShadow: tokens.shadow4
+  },
+  legendItem: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: tokens.spacingHorizontalXS
+  },
+  legendNote: {
+    color: tokens.colorNeutralForeground3
+  },
+  frame: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingVerticalS,
+    minWidth: 0
+  },
+  legendDot: {
+    flexShrink: 0,
+    width: "10px",
+    height: "10px",
+    borderRadius: tokens.borderRadiusCircular
+  },
+  // A card that stands off the map in either theme: room inside, rounder corners, and a hairline
+  // border as well as the shadow, which a dark map swallows.
+  popup: {
+    ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalL),
+    ...shorthands.border(tokens.strokeWidthThin, "solid", tokens.colorNeutralStroke2),
+    // Fluent's 2XLarge radius, which this version of its React theme doesn't define yet.
+    borderRadius: "var(--borderRadius2XLarge, 12px)",
+    width: "max-content",
+    maxWidth: "340px",
+    minWidth: "200px",
+    maxHeight: "360px",
+    overflowY: "auto",
+    boxShadow: tokens.shadow28
+  },
+  popupHeader: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: tokens.spacingHorizontalS
+  },
+  popupTitle: {
+    flexGrow: 1,
+    minWidth: 0,
+    overflowWrap: "anywhere"
+  },
+  popupBody: {
+    flexGrow: 1,
+    minWidth: 0,
+    overflowWrap: "anywhere"
+  },
+  fields: {
+    display: "grid",
+    gridTemplateColumns: "auto 1fr",
+    columnGap: tokens.spacingHorizontalM,
+    rowGap: tokens.spacingVerticalXXS,
+    margin: 0
+  },
+  fieldName: {
+    color: tokens.colorNeutralForeground3
+  },
+  fieldValue: {
+    margin: 0,
+    overflowWrap: "anywhere"
+  },
+  list: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    gap: tokens.spacingVerticalXXS,
+    margin: 0,
+    padding: 0,
+    listStyleType: "none"
+  },
+  listButton: {
+    justifyContent: "flex-start",
+    width: "100%"
+  }
+});
+var NO_TABLES = { places: [], loading: false, failed: false, fitKey: "", colors: {}, legend: [], near: null };
+var TABLES_LOADING = { ...NO_TABLES, loading: true };
+var cssLength = (value) => typeof value === "number" ? `${value}px` : value;
+function itemKind(item) {
+  return item.kind === "marker" ? "marker" : "shape";
+}
+function isRecord(data) {
+  return !!data && typeof data === "object" && "record" in data && "columns" in data;
+}
+function MapImpl({
+  provider,
+  items,
+  viewId,
+  fetchXml,
+  filters,
+  latitudeColumn = DEFAULT_LATITUDE_COLUMN,
+  longitudeColumn = DEFAULT_LONGITUDE_COLUMN,
+  titleColumn,
+  recordColor,
+  colorColumn,
+  showLegend = true,
+  recordUrl: recordUrl2,
+  showRecordLinks = true,
+  onNavigate,
+  showAddressSearch = false,
+  addressSearchCountries,
+  address,
+  fitItemIds,
+  multiTable = false,
+  tables,
+  defaultTables,
+  defaultViewId,
+  viewIds,
+  regarding,
+  allowFiltering = false,
+  allowSavedViews = false,
+  savedViewsKey,
+  signInUrl = "Account/Login",
+  title,
+  allowNearSearch = false,
+  nearDistances,
+  nearDistance,
+  nearDistanceUnit,
+  maxRows = DEFAULT_MAX_ROWS,
+  mapStyle = "road",
+  center,
+  zoom,
+  cluster = true,
+  showPrintButton = false,
+  printTitle,
+  printEntries,
+  onPrintChange,
+  usePortalTheme = true,
+  showPopups = true,
+  renderPopup,
+  nativeOptions,
+  height = "400px",
+  width = "100%",
+  className,
+  style,
+  onMapClick,
+  onItemClick,
+  onAddressSelected,
+  onViewChanged,
+  onError
+}, ref) {
+  const styles = useStyles2();
+  const t = usePrefixedT(STRINGS_PREFIX);
+  const { locale } = useLocale();
+  const { ppp } = usePowerPortalsPro();
+  const hostRef = useRef(null);
+  const popupRef = useRef(null);
+  const rootRef = useRef(null);
+  const controllerRef = useRef(null);
+  const [ready, setReady] = useState(false);
+  const [failure, setFailure] = useState(null);
+  const [addressStatus, setAddressStatus] = useState(null);
+  const [popup, setPopup] = useState(null);
+  const [canSaveImage, setCanSaveImage] = useState(false);
+  const [printing, setPrinting] = useState(false);
+  const usesRecordPages = showRecordLinks && !recordUrl2;
+  const recordPages = useRecordPages({ enabled: usesRecordPages && (multiTable || !!viewId || !!fetchXml) });
+  const recordPageOf = (row) => {
+    const id = row.place?.id ?? row.record.id;
+    const page = usesRecordPages && id ? findRecordPage(recordPages, row.place?.table ?? row.record.tableName) : void 0;
+    return page && id ? recordPageUrl(page, id) : void 0;
+  };
+  const latest = useRef({ onMapClick, onItemClick, onAddressSelected, onViewChanged, onError, onNavigate, showPopups, t });
+  latest.current = { onMapClick, onItemClick, onAddressSelected, onViewChanged, onError, onNavigate, showPopups, t };
+  const viewMetadata = useViewMetadata(viewId ?? "", { enabled: !!viewId });
+  const table = viewId ? viewMetadata.data?.tableName : fetchXml ? fetchXmlTable(fetchXml) ?? void 0 : void 0;
+  const tableMetadata = useTableMetadata(table ?? "", { enabled: !!table && (!titleColumn || !!colorColumn) });
+  const recordTitleColumn = titleColumn ?? tableMetadata.data?.primaryNameColumn;
+  const colorChoices = useMemo(() => {
+    if (!colorColumn) return null;
+    const column = tableMetadata.data?.columns.find((c) => c.columnName.toLowerCase() === colorColumn.toLowerCase());
+    return colorOptions(column);
+  }, [colorColumn, tableMetadata.data]);
+  const titleSettled = !!titleColumn || !!viewId && !!viewMetadata.error || (table ? tableMetadata.data !== void 0 || tableMetadata.error !== void 0 : !viewId);
+  const request = useMemo(() => {
+    if (!viewId && !fetchXml || !titleSettled) return null;
+    return {
+      ...viewId ? { viewId } : { fetchXml },
+      pageSize: Math.max(1, Math.min(maxRows, 5e3)),
+      filters: [
+        ...filters ?? [],
+        { $type: "FetchXmlFilter", filterXml: coordinatesFilterXml(latitudeColumn, longitudeColumn) }
+      ],
+      additionalColumns: [
+        latitudeColumn,
+        longitudeColumn,
+        ...recordTitleColumn ? [recordTitleColumn] : [],
+        ...colorColumn ? [colorColumn] : []
+      ]
+    };
+  }, [viewId, fetchXml, filters, maxRows, latitudeColumn, longitudeColumn, recordTitleColumn, colorColumn, titleSettled]);
+  const requestKey = request ? JSON.stringify(request) : null;
+  const [rows, setRows] = useState(null);
+  const [rowsFailed, setRowsFailed] = useState(false);
+  useEffect(() => {
+    if (!request || !requestKey) {
+      setRows(null);
+      setRowsFailed(false);
+      return;
+    }
+    const controller = new AbortController();
+    setRowsFailed(false);
+    ppp.loadQueryAsync(request, controller.signal).then(
+      (response) => {
+        if (!controller.signal.aborted) setRows({ key: requestKey, response });
+      },
+      (error) => {
+        if (controller.signal.aborted) return;
+        setRowsFailed(true);
+        latest.current.onError?.(error instanceof Error ? error.message : String(error));
+      }
+    );
+    return () => controller.abort();
+  }, [ppp, requestKey]);
+  const currentRows = rows?.key === requestKey ? rows : null;
+  const colorOf = (record) => colorColumn && colorChoices ? optionColor(colorChoices, optionValue(record, colorColumn)) : typeof recordColor === "function" ? recordColor(record) : recordColor;
+  const rowRecords = currentRows?.response.tableRecords ?? [];
+  const colorsKey = typeof recordColor === "function" && !(colorColumn && colorChoices) ? rowRecords.map((r) => colorOf(r) ?? "").join("\n") : null;
+  const urlsKey = typeof recordUrl2 === "function" ? rowRecords.map((r) => recordUrl(recordUrl2, r) ?? "").join("\n") : null;
+  const rowFunctions = useRef({ colorOf, recordUrl: recordUrl2 });
+  rowFunctions.current = { colorOf, recordUrl: recordUrl2 };
+  const recordItems = useMemo(
+    () => currentRows ? recordMarkers(currentRows.response, {
+      latitudeColumn,
+      longitudeColumn,
+      titleColumn: recordTitleColumn,
+      color: (record) => rowFunctions.current.colorOf(record),
+      url: (record) => recordUrl(rowFunctions.current.recordUrl, record)
+    }) : [],
+    [
+      currentRows,
+      latitudeColumn,
+      longitudeColumn,
+      recordTitleColumn,
+      typeof recordColor === "function" ? colorsKey : recordColor,
+      colorColumn,
+      colorChoices,
+      typeof recordUrl2 === "function" ? urlsKey : recordUrl2
+    ]
+  );
+  const legend = useMemo(() => {
+    if (!colorColumn || !colorChoices || !showLegend) return [];
+    const entries = new globalThis.Map();
+    for (const marker of recordItems) {
+      const record = marker.data.record;
+      const value = optionValue(record, colorColumn);
+      if (entries.has(value)) continue;
+      const label = value === null ? t("no-value") : resolveColumnDisplayValue(record, colorColumn) || `${value}`;
+      entries.set(value, { label, color: optionColor(colorChoices, value) });
+    }
+    return [...entries].sort(([a], [b]) => {
+      const [x, y] = [optionOrder(colorChoices, a), optionOrder(colorChoices, b)];
+      return x[0] - y[0] || x[1] - y[1];
+    }).map(([value, entry]) => ({ value, ...entry }));
+  }, [colorColumn, colorChoices, showLegend, recordItems, t]);
+  const [tablesRead, setTablesRead] = useState(null);
+  const mapTables = multiTable ? tablesRead ?? TABLES_LOADING : NO_TABLES;
+  const tableColorOf = (table2) => mapTables.colors[table2] ?? mapTables.colors[table2.toLowerCase()] ?? void 0;
+  const placeColorsKey = JSON.stringify(mapTables.colors);
+  const placeItems = useMemo(
+    () => mapTables.places.map((place) => {
+      const color = (typeof recordColor === "function" ? recordColor(place.record) : void 0) ?? tableColorOf(place.table);
+      const url = recordUrl(recordUrl2, place.record);
+      return {
+        kind: "marker",
+        id: `${place.table}:${place.id}`,
+        position: { latitude: Number(place.latitude), longitude: Number(place.longitude) },
+        ...place.title.value ? { title: place.title.value } : {},
+        ...color ? { color } : {},
+        ...url ? { url } : {},
+        data: { record: place.record, columns: [], place }
+      };
+    }),
+    // The colors are in their key; a row function's answers change with the rows.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [mapTables.places, placeColorsKey, typeof recordColor === "function" ? colorsKey : null, typeof recordUrl2 === "function" ? urlsKey : recordUrl2]
+  );
+  const nearKey = mapTables.near ? JSON.stringify(mapTables.near) : null;
+  const nearItems = useMemo(
+    () => mapTables.near ? nearPlaceItems(mapTables.near) : [],
+    // The place is in its key.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [nearKey]
+  );
+  const allItems = useMemo(
+    () => [...items ?? [], ...recordItems, ...placeItems, ...nearItems],
+    [items, recordItems, placeItems, nearItems]
+  );
+  const itemsById = useMemo(() => new globalThis.Map(allItems.map((item) => [item.id, item])), [allItems]);
+  const itemsRef = useRef(itemsById);
+  itemsRef.current = itemsById;
+  const allItemsRef = useRef(allItems);
+  allItemsRef.current = allItems;
+  const camera = center ? { center, zoom: zoom ?? 12 } : void 0;
+  const options = {
+    provider,
+    // The provider's keys and the settings the page leaves unset come from the portal.
+    portalSettings: (name) => portalSettingsCache(ppp).get(name, (asked) => ppp.getMapSettingsAsync(asked)),
+    style: mapStyle,
+    camera,
+    cluster,
+    usePortalTheme,
+    language: locale,
+    nativeOptions,
+    clusterLabel: (count) => latest.current.t("cluster", [count]),
+    gestureHelp: { windows: t("scroll-zoom"), mac: t("scroll-zoom-mac"), mobile: t("touch-pan") },
+    addressSearch: showAddressSearch ? {
+      placeholder: t("search-placeholder"),
+      clear: t("search-clear"),
+      searching: t("searching"),
+      noResults: t("search-no-results"),
+      failed: t("search-failed"),
+      countries: addressSearchCountries
+    } : null,
+    address
+  };
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const openItem = (id, position) => {
+    const item = itemsRef.current.get(id);
+    if (!item) return;
+    setPopup({ kind: "item", item, position: (item.kind === "marker" ? item.position : popupPosition(item)) });
+  };
+  const optionsKey = JSON.stringify([
+    provider ?? null,
+    mapStyle,
+    cluster,
+    usePortalTheme,
+    locale,
+    nativeOptions ?? null,
+    // Its words too, which can come after the map is drawn, as the strings load.
+    options.addressSearch,
+    options.gestureHelp,
+    address?.trim() ?? ""
+  ]);
+  const optionsKeyRef = useRef(optionsKey);
+  optionsKeyRef.current = optionsKey;
+  const appliedOptions = useRef(null);
+  useEffect(() => {
+    const container = hostRef.current;
+    if (!container) return;
+    let disposed = false;
+    let created = null;
+    appliedOptions.current = optionsKeyRef.current;
+    void MapController.create(container, optionsRef.current, allItemsRef.current, {
+      mapClick: (event) => {
+        setPopup(null);
+        latest.current.onMapClick?.(event);
+      },
+      itemClick: ({ id, position }) => {
+        if (id.startsWith(NEAR_CIRCLE_ID)) {
+          setPopup(null);
+          latest.current.onMapClick?.({ position });
+          return;
+        }
+        const item = itemsRef.current.get(id);
+        if (!item) return;
+        const event = itemClick(item, position);
+        latest.current.onItemClick?.(event);
+        if (latest.current.showPopups && !event.defaultPrevented) setPopup({ kind: "item", item, position });
+      },
+      // Listed even with popups off: markers at one place can be told apart no other way.
+      clusterClick: ({ ids, position }) => {
+        const listed = ids.map((id) => itemsRef.current.get(id)).filter((item) => item !== void 0);
+        if (listed.length) setPopup({ kind: "list", items: listed, position });
+      },
+      viewChanged: (view) => latest.current.onViewChanged?.(view),
+      addressSelected: (place) => latest.current.onAddressSelected?.(place),
+      addressStatus: setAddressStatus,
+      error: (kind, message) => {
+        setFailure({ kind, message });
+        latest.current.onError?.(message);
+      }
+    }).then(
+      (controller) => {
+        created = controller;
+        if (disposed) {
+          controller.dispose();
+          return;
+        }
+        controllerRef.current = controller;
+        setCanSaveImage(controller.canSaveImage);
+        setReady(true);
+      },
+      (error) => {
+        if (disposed) return;
+        const message = error instanceof Error ? error.message : String(error);
+        setFailure({ kind: "failed", message });
+        latest.current.onError?.(message);
+      }
+    );
+    return () => {
+      disposed = true;
+      created?.dispose();
+      controllerRef.current = null;
+      setReady(false);
+    };
+  }, []);
+  const fittedSource = useRef(null);
+  const rowsSettled = (!requestKey || !!currentRows || rowsFailed) && (!multiTable || !mapTables.loading);
+  const fitKey = fitItemIds ? fitItemIds.join(",") : null;
+  const fitItemIdsRef = useRef(fitItemIds);
+  fitItemIdsRef.current = fitItemIds;
+  const fittedKey = useRef(null);
+  const fittedAmong = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    const controller = controllerRef.current;
+    if (!controller) return;
+    if (fitItemIdsRef.current) {
+      controller.setItems(allItems, false);
+      const gone = fittedAmong.current.size === 0 || [...fittedAmong.current].some((id) => !itemsById.has(id));
+      if (gone) {
+        controller.fitToItems(fitItemIdsRef.current);
+        fittedKey.current = fitKey;
+        fittedAmong.current = new Set(itemsById.keys());
+      }
+    } else {
+      const source = rowsSettled ? `${requestKey ?? ""}|${multiTable ? mapTables.fitKey : ""}|${allItems.length > 0}` : null;
+      const fit = (!center || !!mapTables.near) && allItems.length > 0 && source !== null && fittedSource.current !== source;
+      if (fit) fittedSource.current = source;
+      controller.setItems(allItems, fit);
+    }
+    setPopup((open) => {
+      if (open?.kind === "item") return itemsById.has(open.item.id) ? open : null;
+      if (open?.kind === "list") return open.items.every((item) => itemsById.has(item.id)) ? open : null;
+      return open;
+    });
+  }, [ready, allItems, itemsById, requestKey, rowsSettled]);
+  useEffect(() => {
+    if (!ready || fitKey === null || fitKey === fittedKey.current) return;
+    fittedKey.current = fitKey;
+    fittedAmong.current = new Set(itemsRef.current.keys());
+    controllerRef.current?.fitToItems(fitItemIdsRef.current);
+  }, [ready, fitKey]);
+  useEffect(() => {
+    if (!ready || optionsKey === appliedOptions.current) return;
+    appliedOptions.current = optionsKey;
+    setFailure(null);
+    const controller = controllerRef.current;
+    const update = () => controller && setCanSaveImage(controller.canSaveImage);
+    void controller?.setOptions(optionsRef.current).then(update, update);
+  }, [ready, optionsKey]);
+  const cameraKey = camera ? JSON.stringify(camera) : null;
+  const shownCamera = useRef(cameraKey);
+  useEffect(() => {
+    if (!ready || !camera || cameraKey === shownCamera.current) return;
+    shownCamera.current = cameraKey;
+    controllerRef.current?.setCamera(camera, true);
+  }, [ready, cameraKey]);
+  const printLegend = [
+    ...mapTables.legend.map((entry) => ({ label: entry.label, color: entry.color })),
+    ...legend.map((entry) => ({ label: entry.label, color: entry.color }))
+  ];
+  const printRef = useRef({ legend: printLegend, title: printTitle ?? title, entries: printEntries, onError });
+  printRef.current = { legend: printLegend, title: printTitle ?? title, entries: printEntries, onError };
+  const printPopupRef = useRef(() => void 0);
+  const printingRef = useRef(false);
+  const runPrintJob = async (job) => {
+    const controller = controllerRef.current;
+    if (!controller || printingRef.current) return void 0;
+    printingRef.current = true;
+    setPrinting(true);
+    try {
+      return await job(controller);
+    } catch (error) {
+      printRef.current.onError?.(error instanceof Error ? error.message : String(error));
+      return void 0;
+    } finally {
+      printingRef.current = false;
+      setPrinting(false);
+    }
+  };
+  const printMap = () => runPrintJob((controller) => {
+    const { legend: shown, title: heading, entries: listed } = printRef.current;
+    const entries = typeof listed === "function" ? listed() : listed;
+    const popup2 = printPopupRef.current();
+    return controller.print({
+      ...heading && { title: heading },
+      ...shown.length && { legend: shown },
+      ...entries?.length && { entries },
+      ...popup2 && { popup: popup2 }
+    });
+  }).then(() => void 0);
+  const saveMapImage = async (fileName) => await runPrintJob(
+    (controller) => controller.saveImage(fileName ?? printRef.current.title ?? "map", printRef.current.legend, printPopupRef.current())
+  ) ?? false;
+  const printable = ready && !failure;
+  const onPrintChangeRef = useRef(onPrintChange);
+  onPrintChangeRef.current = onPrintChange;
+  const reportsPrint = !!onPrintChange;
+  useEffect(() => {
+    onPrintChangeRef.current?.(
+      printable ? { canSaveImage, printing, print: () => void printMap(), saveImage: () => void saveMapImage() } : null
+    );
+  }, [printable, canSaveImage, printing, reportsPrint]);
+  useEffect(() => () => onPrintChangeRef.current?.(null), []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      setCamera: (target, animate = true) => controllerRef.current?.setCamera(target, animate),
+      fitToItems: (ids) => controllerRef.current?.fitToItems(ids),
+      openPopup: (id) => openItem(id),
+      closePopup: () => setPopup(null),
+      goToAddress: async (text) => await controllerRef.current?.goToAddress(text) ?? null,
+      clearAddress: () => controllerRef.current?.clearAddress(),
+      getView: () => controllerRef.current?.getView() ?? null,
+      print: printMap,
+      saveImage: saveMapImage,
+      get native() {
+        return controllerRef.current?.native ?? null;
+      }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const closePopup = () => {
+    const id = popup?.kind === "item" ? popup.item.id : null;
+    setPopup(null);
+    if (id) controllerRef.current?.focusMarker(id);
+  };
+  const onPopupKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      closePopup();
+    }
+  };
+  const popupContent = (() => {
+    if (!popup) return null;
+    if (popup.kind === "list") {
+      return /* @__PURE__ */ jsx(PopupCard, { title: t("cluster-list", [popup.items.length]), closeLabel: t("close"), onClose: closePopup, children: /* @__PURE__ */ jsx("ul", { className: styles.list, children: popup.items.map((item2) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "subtle",
+          size: "small",
+          className: styles.listButton,
+          onClick: () => {
+            const event = itemClick(item2, popup.position);
+            latest.current.onItemClick?.(event);
+            setPopup(latest.current.showPopups && !event.defaultPrevented ? { kind: "item", item: item2, position: popup.position } : null);
+          },
+          children: item2.title || t("untitled")
+        }
+      ) }, item2.id)) }) });
+    }
+    const item = popup.item;
+    const custom = renderPopup?.(item);
+    if (renderPopup && (custom === null || custom === void 0 || custom === false)) return null;
+    if (custom !== void 0 && custom !== null) {
+      return /* @__PURE__ */ jsx(PopupCard, { label: item.title, closeLabel: t("close"), onClose: closePopup, children: custom });
+    }
+    const href = item.url ?? (isRecord(item.data) ? recordPageOf(item.data) : void 0);
+    const link = href ? { href, onNavigate: (url) => latest.current.onNavigate?.(url), navigates: !!onNavigate } : void 0;
+    if (isRecord(item.data)) {
+      return /* @__PURE__ */ jsx(PopupCard, { title: item.title || t("untitled"), link, closeLabel: t("close"), onClose: closePopup, children: /* @__PURE__ */ jsx(
+        PopupFields,
+        {
+          fields: popupFields(item.data, recordTitleColumn),
+          distance: item.data.place?.distance != null && mapTables.near ? t("distance-away", [
+            t(mapTables.near.unit === DistanceUnits.Kilometers ? "distance-kilometers" : "distance-miles", [
+              formatDistance(Number(item.data.place.distance), locale)
+            ])
+          ]) : void 0
+        }
+      ) });
+    }
+    return item.title ? /* @__PURE__ */ jsx(PopupCard, { title: item.title, link, closeLabel: t("close"), onClose: closePopup }) : null;
+  })();
+  const shownPopup = popup && popupContent ? popup : null;
+  printPopupRef.current = () => {
+    if (!shownPopup) return void 0;
+    if (shownPopup.kind === "list") {
+      return { title: t("cluster-list", [shownPopup.items.length]), items: shownPopup.items.map((item2) => item2.title || t("untitled")) };
+    }
+    const item = shownPopup.item;
+    if (renderPopup) return { fromPage: true };
+    if (isRecord(item.data)) {
+      const details = popupFields(item.data, recordTitleColumn).map(({ label, value }) => ({ label, value }));
+      return { title: item.title || t("untitled"), ...details.length && { details } };
+    }
+    return item.title ? { title: item.title } : void 0;
+  };
+  useLayoutEffect(() => {
+    const controller = controllerRef.current;
+    const element = popupRef.current;
+    if (!controller || !element) return;
+    if (!shownPopup) {
+      controller.hidePopup();
+      controller.select(null);
+      return;
+    }
+    const kind = shownPopup.kind === "item" ? itemKind(shownPopup.item) : "marker";
+    controller.showPopup(element, shownPopup.position, kind);
+    controller.select(shownPopup.kind === "item" ? shownPopup.item.id : null);
+  }, [shownPopup, ready]);
+  const truncated = currentRows?.response.pagingInfo?.moreRecords === true;
+  const failureText = failure ? failure.kind === "unknown-provider" ? t("unknown-provider", [failure.message]) : t("failed") : null;
+  const shownAddressStatus = address?.trim() ? addressStatus : null;
+  const printButton = (inToolbar) => showPrintButton && printable && /* @__PURE__ */ jsx(
+    MapPrintButton,
+    {
+      inToolbar,
+      ...!inToolbar && { className: styles.printButton },
+      canSaveImage,
+      disabled: printing,
+      onPrint: () => void printMap(),
+      onSaveImage: () => void saveMapImage()
+    }
+  );
+  const printsOverMap = showPrintButton && !multiTable;
+  const mapElement = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: mergeClasses("ppp-map", printsOverMap && "ppp-map-printable", styles.root, className),
+      style: { height: cssLength(height), width: cssLength(width), ...style },
+      children: [
+        /* @__PURE__ */ jsx(SharedTooltip, { containerRef: rootRef }),
+        /* @__PURE__ */ jsx("div", { ref: hostRef, className: "ppp-map-host" }),
+        printsOverMap && printable && /* @__PURE__ */ jsx("div", { className: "ppp-map-print", children: printButton(false) }),
+        /* @__PURE__ */ jsx("div", { className: "ppp-map-popup-layer", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: popupRef,
+            className: "ppp-map-popup-anchor",
+            hidden: !popupContent,
+            onKeyDown: onPopupKeyDown,
+            onClick: (event) => event.stopPropagation(),
+            children: popupContent
+          }
+        ) }),
+        (!ready || shownAddressStatus === "searching") && !failure && /* @__PURE__ */ jsx("div", { className: styles.overlay, children: /* @__PURE__ */ jsx(Spinner, { size: "small", label: ready ? t("finding-address") : t("loading") }) }),
+        failureText || rowsFailed || mapTables.failed ? /* @__PURE__ */ jsx("div", { className: styles.message, children: /* @__PURE__ */ jsx(MessageBar, { intent: "error", children: /* @__PURE__ */ jsx(MessageBarBody, { children: failureText ?? t("rows-failed") }) }) }) : (shownAddressStatus === "not-found" || shownAddressStatus === "failed") && /* @__PURE__ */ jsx("div", { className: styles.message, children: /* @__PURE__ */ jsx(MessageBar, { intent: shownAddressStatus === "failed" ? "error" : "warning", children: /* @__PURE__ */ jsx(MessageBarBody, { children: t(shownAddressStatus === "failed" ? "address-failed" : "address-not-found") }) }) }),
+        (legend.length > 0 || mapTables.legend.length > 0 || truncated) && /* @__PURE__ */ jsxs("div", { className: styles.corner, children: [
+          mapTables.legend.length > 0 && /* @__PURE__ */ jsx("ul", { className: mergeClasses("ppp-map-legend", styles.legend), "aria-label": t("legend"), children: mapTables.legend.map((entry) => /* @__PURE__ */ jsxs("li", { className: styles.legendItem, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.legendDot, style: { backgroundColor: entry.color } }),
+            /* @__PURE__ */ jsx(Text, { size: 200, children: entry.label }),
+            entry.note && /* @__PURE__ */ jsx(Text, { size: 200, className: styles.legendNote, children: entry.note })
+          ] }, entry.table)) }),
+          legend.length > 0 && /* @__PURE__ */ jsx("ul", { className: mergeClasses("ppp-map-legend", styles.legend), "aria-label": t("legend"), children: legend.map((entry) => /* @__PURE__ */ jsxs("li", { className: styles.legendItem, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.legendDot, style: { backgroundColor: entry.color } }),
+            /* @__PURE__ */ jsx(Text, { size: 200, children: entry.label })
+          ] }, entry.value ?? "none")) }),
+          truncated && /* @__PURE__ */ jsx(Text, { size: 200, className: styles.note, children: t("rows-truncated", [recordItems.length]) })
+        ] })
+      ]
+    }
+  );
+  if (!multiTable) return mapElement;
+  return /* @__PURE__ */ jsxs("div", { className: mergeClasses("ppp-map-frame", styles.frame), children: [
+    /* @__PURE__ */ jsx(
+      MapTablesBar,
+      {
+        tables,
+        defaultTables,
+        defaultViewId,
+        viewIds,
+        regarding,
+        allowFiltering,
+        allowSavedViews,
+        savedViewsKey,
+        signInUrl,
+        title,
+        allowNearSearch,
+        nearDistances,
+        nearDistance,
+        nearDistanceUnit,
+        provider,
+        addressSearchCountries,
+        toolbarActions: printButton(true),
+        onState: setTablesRead
+      }
+    ),
+    mapElement
+  ] });
+}
+function popupPosition(item) {
+  if (item.kind === "circle") return item.center;
+  if (item.kind === "marker") return item.position;
+  const path = item.path;
+  const latitude = path.reduce((sum, position) => sum + position.latitude, 0) / Math.max(1, path.length);
+  const longitude = path.reduce((sum, position) => sum + position.longitude, 0) / Math.max(1, path.length);
+  return { latitude, longitude };
+}
+function PopupCard({
+  title,
+  link,
+  label,
+  closeLabel,
+  onClose,
+  children
+}) {
+  const styles = useStyles2();
+  const onLinkClick = (event) => {
+    if (!link?.navigates || event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    event.preventDefault();
+    link.onNavigate(link.href);
+  };
+  return /* @__PURE__ */ jsxs(Card, { className: mergeClasses("ppp-map-popup", styles.popup), size: "small", role: "dialog", "aria-label": title ?? label, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.popupHeader, children: [
+      title ? /* @__PURE__ */ jsx("div", { className: styles.popupTitle, children: link ? /* @__PURE__ */ jsx(Link, { href: link.href, onClick: onLinkClick, children: /* @__PURE__ */ jsx(Text, { weight: "semibold", children: title }) }) : /* @__PURE__ */ jsx(Text, { weight: "semibold", children: title }) }) : /* @__PURE__ */ jsx("div", { className: styles.popupBody, children }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "ppp-map-popup-close",
+          appearance: "subtle",
+          size: "small",
+          icon: /* @__PURE__ */ jsx(Dismiss16Regular, {}),
+          "aria-label": closeLabel,
+          "data-ppp-tooltip": closeLabel,
+          onClick: onClose
+        }
+      )
+    ] }),
+    title ? children : null
+  ] });
+}
+function popupFields(record, titleColumn) {
+  const fields = record.place ? (record.place.details ?? []).map((field) => ({ key: field.column, label: field.label, value: field.value })) : record.columns.filter((column) => column.columnName !== titleColumn).map((column) => ({
+    key: column.columnName,
+    label: column.displayName,
+    value: resolveColumnDisplayValue(record.record, column.columnName)
+  }));
+  return fields.filter((field) => !!field.value?.trim()).slice(0, 8);
+}
+function PopupFields({ fields, distance }) {
+  const styles = useStyles2();
+  if (!fields.length && !distance) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    distance && /* @__PURE__ */ jsx(Text, { size: 200, className: mergeClasses("ppp-map-popup-distance", styles.fieldName), children: distance }),
+    fields.length > 0 && /* @__PURE__ */ jsx("dl", { className: styles.fields, children: fields.map((field) => /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
+      /* @__PURE__ */ jsx("dt", { className: styles.fieldName, children: /* @__PURE__ */ jsx(Text, { size: 200, children: field.label }) }),
+      /* @__PURE__ */ jsx("dd", { className: styles.fieldValue, children: /* @__PURE__ */ jsx(Text, { size: 200, children: field.value }) })
+    ] }, field.key)) })
+  ] });
+}
+var Map2 = forwardRef(MapImpl);
+var PLACE_PIN_COLOR = "var(--colorPaletteRedBackground3, #d13438)";
+function GridMap({ pins, focusedIds, onPinClick, onNavigate, onPrintChange, printTitle, printEntries, near, onViewChange }) {
+  const focusKey = focusedIds.join(",");
+  const pinsKey = JSON.stringify(pins);
+  const nearKey = near ? JSON.stringify(near) : "";
+  const items = useMemo(() => {
+    const focused = new Set(focusedIds);
+    const markers = pins.map((pin) => ({
+      kind: "marker",
+      id: pin.id,
+      position: { latitude: pin.latitude, longitude: pin.longitude },
+      ...pin.title && { title: pin.title },
+      ...pin.url && { url: pin.url },
+      ...pin.label && { label: pin.label },
+      ...focused.has(pin.id) && { color: PLACE_PIN_COLOR }
+    }));
+    return near ? [...markers, ...nearPlaceItems(near)] : markers;
+  }, [pinsKey, focusKey, nearKey]);
+  const fitItemIds = useMemo(
+    () => focusedIds.length > 0 ? [...focusedIds] : near ? [nearCircleId(near)] : [],
+    [focusKey, nearKey]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  return /* @__PURE__ */ jsx(
+    Map2,
+    {
+      className: "ppp-grid-map",
+      items,
+      fitItemIds,
+      height: "100%",
+      onItemClick: (event) => onPinClick(event.item.id),
+      ...onNavigate && { onNavigate },
+      ...onPrintChange && { onPrintChange },
+      ...printTitle && { printTitle },
+      ...printEntries && { printEntries },
+      ...onViewChange && { onViewChanged: (view) => onViewChange(view.bounds) }
+    }
+  );
+}
+var useStyles3 = makeStyles({
+  surface: {
+    width: `min(800px, calc(100vw - ${tokens.spacingHorizontalXXXL}))`,
+    maxWidth: "none"
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    rowGap: tokens.spacingVerticalS
+  },
+  address: {
+    color: tokens.colorNeutralForeground2
+  }
+});
+function MapsProvider({ children }) {
+  const [request, setRequest] = useState(null);
+  const service = useMemo(() => ({ show: setRequest }), []);
+  return /* @__PURE__ */ jsx(AddressMapServiceContext.Provider, { value: service, children: /* @__PURE__ */ jsx(GridMapRendererContext.Provider, { value: GridMap, children: /* @__PURE__ */ jsxs(GridNearSearchContext.Provider, { value: NearSearch, children: [
+    children,
+    request && /* @__PURE__ */ jsx(AddressMapDialog, { request, onClose: () => setRequest(null) })
+  ] }) }) });
+}
+function AddressMapDialog({ request, onClose }) {
+  const styles = useStyles3();
+  const t = useT();
+  const oneLine = request.lines.join(", ");
+  const { position } = request;
+  const items = useMemo(
+    () => position ? [{ kind: "marker", id: "address", position, title: oneLine || request.query, color: PLACE_PIN_COLOR }] : [],
+    [position, oneLine, request.query]
+  );
+  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange: (_, data) => data.open ? void 0 : onClose(), children: /* @__PURE__ */ jsx(DialogSurface, { className: `ppp-address-map-dialog ${styles.surface}`, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+    /* @__PURE__ */ jsx(DialogTitle, { children: request.title }),
+    /* @__PURE__ */ jsxs(DialogContent, { className: styles.content, children: [
+      oneLine && /* @__PURE__ */ jsx(Text, { className: styles.address, children: oneLine }),
+      /* @__PURE__ */ jsx(Map2, { items, ...position ? {} : { address: request.query }, height: "min(60vh, 480px)" })
+    ] }),
+    /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, { appearance: "primary", onClick: onClose, children: t("app.buttons.close.label") }) })
+  ] }) }) });
+}
+
+export { BUILT_IN_MAP_PROVIDERS, DEFAULT_LATITUDE_COLUMN, DEFAULT_LONGITUDE_COLUMN, DEFAULT_MAX_ROWS, DEFAULT_NEAR_DISTANCE, DEFAULT_NEAR_DISTANCES, DistanceUnits, Map2 as Map, MapsProvider, NearSearch, registerMapProvider };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map