@sanity/google-maps-input 5.0.2 → 6.0.0

package/dist/index.js

@@ -1,319 +1,268 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { EditIcon, TrashIcon } from "@sanity/icons";
-import { Card, Box, Text, Code, TextInput, Stack, Button, Grid, Dialog, Label } from "@sanity/ui";
-import { useState, useEffect, PureComponent, createRef, useId, useRef } from "react";
-import { ChangeIndicator, setIfMissing, set, unset, useUserColor, getAnnotationAtPath, DiffTooltip, definePlugin } from "sanity";
+import { DiffFromTo, setIfMissing, set, unset, ChangeIndicator, definePlugin } from "sanity";
+import { ImageIcon, WarningOutlineIcon, ErrorOutlineIcon, EditIcon, TrashIcon } from "@sanity/icons";
+import { Flex, Text, Card, Box, Stack, Code, Spinner, Button, Grid, Dialog, Label, TextInput } from "@sanity/ui";
+import { createContext, useState, use, useId, useRef, useEffect } from "react";
+import { createStaticMapsUrl, useApiLoadingStatus, APILoadingStatus, useMapsLibrary, useMap, Map, MapControl, ControlPosition, AdvancedMarker, StaticMap, APIProvider, Circle } from "@vis.gl/react-google-maps";
 import { styled } from "styled-components";
-let config;
-function getGeoConfig() {
-  return config;
+const DEFAULT_WIDTH = 640, DEFAULT_HEIGHT = 300, METERS_PER_DEGREE = 111e3, MIN_LATITUDE_COSINE = 0.01, CIRCLE_OUTLINE = "0x4285F4", CIRCLE_FILL = "0x4285F480";
+function lngMetersPerDegree(lat) {
+  return METERS_PER_DEGREE * Math.max(Math.cos(lat * Math.PI / 180), MIN_LATITUDE_COSINE);
+}
+function getGeopointStaticMapUrl(value, apiKey, {
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT
+} = {}) {
+  const center = {
+    lat: value.lat,
+    lng: value.lng
+  };
+  return createStaticMapsUrl({
+    apiKey,
+    width,
+    height,
+    scale: 2,
+    zoom: 13,
+    center,
+    markers: [{
+      location: center
+    }]
+  });
 }
-function setGeoConfig(newConfig) {
-  config = newConfig;
+function generateCirclePoints(lat, lng, radius) {
+  const points = [], latRatio = radius / METERS_PER_DEGREE, lngRatio = radius / lngMetersPerDegree(lat);
+  for (let i = 0; i <= 64; i++) {
+    const angle = i / 64 * 2 * Math.PI;
+    points.push({
+      lat: lat + latRatio * Math.cos(angle),
+      lng: lng + lngRatio * Math.sin(angle)
+    });
+  }
+  return points;
 }
-function LoadError(props) {
-  const $ = c(3);
-  let t0;
-  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx(Box, { as: "header", paddingX: 4, paddingTop: 4, paddingBottom: 1, children: /* @__PURE__ */ jsx(Text, { as: "h2", weight: "bold", children: "Google Maps failed to load" }) }), $[0] = t0) : t0 = $[0];
+const BOUNDS_PADDING = 1.15;
+function getCircleBounds(lat, lng, radius) {
+  const padded = radius * BOUNDS_PADDING, latDelta = padded / METERS_PER_DEGREE, lngDelta = padded / lngMetersPerDegree(lat);
+  return [{
+    lat: lat + latDelta,
+    lng
+  }, {
+    lat: lat - latDelta,
+    lng
+  }, {
+    lat,
+    lng: lng + lngDelta
+  }, {
+    lat,
+    lng: lng - lngDelta
+  }];
+}
+function getGeopointRadiusStaticMapUrl(value, apiKey, {
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT
+} = {}) {
+  return value.radius ? createStaticMapsUrl({
+    apiKey,
+    width,
+    height,
+    scale: 2,
+    markers: [{
+      location: {
+        lat: value.lat,
+        lng: value.lng
+      }
+    }],
+    paths: [{
+      coordinates: generateCirclePoints(value.lat, value.lng, value.radius),
+      color: CIRCLE_OUTLINE,
+      weight: 2,
+      fillcolor: CIRCLE_FILL
+    }],
+    visible: getCircleBounds(value.lat, value.lng, value.radius)
+  }) : getGeopointStaticMapUrl(value, apiKey, {
+    width,
+    height
+  });
+}
+const GoogleMapsInputContext = createContext(null);
+GoogleMapsInputContext.displayName = "GoogleMapsInputContext";
+const MapDiffImage = styled.div.withConfig({
+  displayName: "MapDiffImage",
+  componentId: "sc-1uvj7r6-0"
+})`& img{display:block;width:100%;height:auto;object-fit:contain;vertical-align:top;}`, MapDiffPlaceholder = styled.div.withConfig({
+  displayName: "MapDiffPlaceholder",
+  componentId: "sc-1uvj7r6-1"
+})`width:100%;min-height:80px;display:flex;align-items:center;justify-content:center;`;
+function hasRadius(value) {
+  return typeof value.radius == "number";
+}
+function StaticMapDiffPreview(t0) {
+  const $ = c(7), {
+    value
+  } = t0, [failed, setFailed] = useState(!1), apiKey = use(GoogleMapsInputContext)?.apiKey;
+  if (!value || typeof value.lat != "number" || typeof value.lng != "number" || !apiKey)
+    return null;
+  if (failed) {
+    let t12;
+    return $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsx(MapDiffPlaceholder, { children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, justify: "center", padding: 3, children: [
+      /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsx(ImageIcon, {}) }),
+      /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: "Map preview unavailable" })
+    ] }) }), $[0] = t12) : t12 = $[0], t12;
+  }
   let t1;
-  return $[1] !== props ? (t1 = /* @__PURE__ */ jsxs(Card, { tone: "critical", radius: 1, children: [
-    t0,
-    /* @__PURE__ */ jsx(Box, { paddingX: 4, paddingTop: 4, paddingBottom: 1, children: props.isAuthError ? /* @__PURE__ */ jsx(AuthError$1, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Text, { as: "h3", children: "Error details:" }),
-      /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx(Code, { size: 1, children: "error" in props && props.error?.message }) })
-    ] }) })
-  ] }), $[1] = props, $[2] = t1) : t1 = $[2], t1;
+  $[1] !== apiKey || $[2] !== value ? (t1 = hasRadius(value) ? getGeopointRadiusStaticMapUrl(value, apiKey, {
+    width: 500,
+    height: 280
+  }) : getGeopointStaticMapUrl(value, apiKey, {
+    width: 500,
+    height: 280
+  }), $[1] = apiKey, $[2] = value, $[3] = t1) : t1 = $[3];
+  const url = t1;
+  let t2;
+  $[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = () => setFailed(!0), $[4] = t2) : t2 = $[4];
+  let t3;
+  return $[5] !== url ? (t3 = /* @__PURE__ */ jsx(MapDiffImage, { children: /* @__PURE__ */ jsx("img", { alt: "", src: url, onError: t2, height: 280, width: 500 }) }), $[5] = url, $[6] = t3) : t3 = $[6], t3;
 }
-function AuthError$1() {
+function GeopointDiff(t0) {
+  const $ = c(3), {
+    diff,
+    schemaType
+  } = t0;
+  let t1;
+  return $[0] !== diff || $[1] !== schemaType ? (t1 = /* @__PURE__ */ jsx(DiffFromTo, { diff, schemaType, previewComponent: StaticMapDiffPreview, layout: "grid" }), $[0] = diff, $[1] = schemaType, $[2] = t1) : t1 = $[2], t1;
+}
+const GET_API_KEY_URL = "https://developers.google.com/maps/documentation/javascript/get-api-key", DEMO_KEY_URL = "https://developers.google.com/maps/documentation/javascript/demo-key", REQUIRED_APIS = ["Google Maps JavaScript API", "Google Static Maps API", "Google Places API (New)"];
+function RequiredApis() {
   const $ = c(1);
   let t0;
-  return $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsxs(Text, { children: [
-    /* @__PURE__ */ jsx("p", { children: "The error appears to be related to authentication" }),
-    /* @__PURE__ */ jsx("p", { children: "Common causes include:" }),
-    /* @__PURE__ */ jsxs("ul", { children: [
-      /* @__PURE__ */ jsx("li", { children: "Incorrect API key" }),
-      /* @__PURE__ */ jsx("li", { children: "Referer not allowed" }),
-      /* @__PURE__ */ jsx("li", { children: "Missing authentication scope" })
-    ] }),
-    /* @__PURE__ */ jsx("p", { children: "Check the browser developer tools for more information." })
-  ] }), $[0] = t0) : t0 = $[0], t0;
+  return $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx(Box, { paddingLeft: 3, children: /* @__PURE__ */ jsx(Stack, { as: "ul", gap: 2, children: REQUIRED_APIS.map(_temp$2) }) }), $[0] = t0) : t0 = $[0], t0;
 }
-const callbackName = "___sanity_googleMapsApiCallback", authFailureCallbackName = "gm_authFailure";
-class AuthError extends Error {
+function _temp$2(api) {
+  return /* @__PURE__ */ jsx(Text, { as: "li", size: 1, muted: !0, children: api }, api);
 }
-function _loadGoogleMapsApi(config2) {
-  return new Promise((resolve, reject) => {
-    window[authFailureCallbackName] = () => {
-      reject(new AuthError("Authentication error when loading Google Maps API."));
-    }, window[callbackName] = () => {
-      resolve(window.google.maps);
-    };
-    const script = document.createElement("script");
-    script.addEventListener("error", (event) => reject(new Error(coeerceError(event)))), script.src = `https://maps.googleapis.com/maps/api/js?key=${config2.apiKey}&libraries=places&callback=${callbackName}&language=${config2.locale}`, document.head.appendChild(script);
-  }).finally(() => {
-    delete window[callbackName], delete window[authFailureCallbackName];
-  });
-}
-let memo = null;
-function loadGoogleMapsApi(config2) {
-  return memo || (memo = _loadGoogleMapsApi(config2), memo.catch(() => {
-    memo = null;
-  }), memo);
-}
-function coeerceError(event, error) {
-  return typeof event == "string" ? event : isErrorEvent(event) ? event.message : "Failed to load Google Maps API";
+function MessageCard(t0) {
+  const $ = c(13), {
+    tone,
+    icon,
+    title,
+    children
+  } = t0;
+  let t1;
+  $[0] !== icon ? (t1 = /* @__PURE__ */ jsx(Box, { flex: "none", children: /* @__PURE__ */ jsx(Text, { size: 3, children: icon }) }), $[0] = icon, $[1] = t1) : t1 = $[1];
+  let t2;
+  $[2] !== title ? (t2 = /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: title }), $[2] = title, $[3] = t2) : t2 = $[3];
+  let t3;
+  $[4] !== children || $[5] !== t2 ? (t3 = /* @__PURE__ */ jsxs(Stack, { flex: 1, gap: 4, children: [
+    t2,
+    children
+  ] }), $[4] = children, $[5] = t2, $[6] = t3) : t3 = $[6];
+  let t4;
+  $[7] !== t1 || $[8] !== t3 ? (t4 = /* @__PURE__ */ jsxs(Flex, { gap: 3, children: [
+    t1,
+    t3
+  ] }), $[7] = t1, $[8] = t3, $[9] = t4) : t4 = $[9];
+  let t5;
+  return $[10] !== t4 || $[11] !== tone ? (t5 = /* @__PURE__ */ jsx(Card, { padding: 4, radius: 2, tone, border: !0, children: t4 }), $[10] = t4, $[11] = tone, $[12] = t5) : t5 = $[12], t5;
 }
-function isErrorEvent(event) {
-  return typeof event != "object" || event === null || !("message" in event) ? !1 : typeof event.message == "string";
+function MissingApiKeyCard(t0) {
+  const $ = c(10), {
+    typeTitle
+  } = t0;
+  let t1;
+  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsx(WarningOutlineIcon, {}), $[0] = t1) : t1 = $[0];
+  let t2;
+  $[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = /* @__PURE__ */ jsx("code", { children: "googleMapsInput" }), $[1] = t2) : t2 = $[1];
+  let t3;
+  $[2] !== typeTitle ? (t3 = /* @__PURE__ */ jsxs(Text, { size: 1, muted: !0, children: [
+    "The ",
+    typeTitle,
+    " field uses Google Maps and needs an API key. Add one to the",
+    " ",
+    t2,
+    " plugin configuration:"
+  ] }), $[2] = typeTitle, $[3] = t3) : t3 = $[3];
+  let t4;
+  $[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t4 = /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "transparent", border: !0, overflow: "auto", children: /* @__PURE__ */ jsx(Code, { size: 1, children: "googleMapsInput({apiKey: 'your-api-key'})" }) }), $[4] = t4) : t4 = $[4];
+  let t5;
+  $[5] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t5 = /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+    /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: "The key needs these APIs enabled:" }),
+    /* @__PURE__ */ jsx(RequiredApis, {})
+  ] }), $[5] = t5) : t5 = $[5];
+  let t6;
+  $[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t6 = /* @__PURE__ */ jsx("a", { href: GET_API_KEY_URL, target: "_blank", rel: "noopener noreferrer", children: "Get an API key" }), $[6] = t6) : t6 = $[6];
+  let t7;
+  $[7] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t7 = /* @__PURE__ */ jsxs(Text, { size: 1, muted: !0, children: [
+    t6,
+    " \xB7 ",
+    /* @__PURE__ */ jsx("a", { href: DEMO_KEY_URL, target: "_blank", rel: "noopener noreferrer", children: "use a demo key to test" })
+  ] }), $[7] = t7) : t7 = $[7];
+  let t8;
+  return $[8] !== t3 ? (t8 = /* @__PURE__ */ jsxs(MessageCard, { tone: "caution", icon: t1, title: "Google Maps API key required", children: [
+    t3,
+    t4,
+    t5,
+    t7
+  ] }), $[8] = t3, $[9] = t8) : t8 = $[9], t8;
 }
-const browserLocale = typeof window < "u" && window.navigator.language || "en";
-function useLoadGoogleMapsApi(config2) {
-  const $ = c(5), locale = config2.defaultLocale || browserLocale;
+function InvalidApiKeyCard() {
+  const $ = c(2);
   let t0;
-  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = {
-    type: "loading"
-  }, $[0] = t0) : t0 = $[0];
-  const [state, setState] = useState(t0);
-  let t1, t2;
-  return $[1] !== config2.apiKey || $[2] !== locale ? (t1 = () => {
-    typeof window > "u" || loadGoogleMapsApi({
-      locale,
-      apiKey: config2.apiKey
-    }).then((api) => setState({
-      type: "loaded",
-      api
-    }), (err) => setState({
-      type: "error",
-      error: {
-        type: err instanceof AuthError ? "authError" : "loadError",
-        message: err.message
-      }
-    }));
-  }, t2 = [locale, config2.apiKey], $[1] = config2.apiKey, $[2] = locale, $[3] = t1, $[4] = t2) : (t1 = $[3], t2 = $[4]), useEffect(t1, t2), state;
+  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx(ErrorOutlineIcon, {}), $[0] = t0) : t0 = $[0];
+  let t1;
+  return $[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsxs(MessageCard, { tone: "critical", icon: t0, title: "Map preview couldn\u2019t load", children: [
+    /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: "The Google Maps API key was rejected. Check that it is a valid key \u2014 not a demo or placeholder key \u2014 that it is not restricted in a way that blocks this Studio\u2019s URL, and that it has these APIs enabled:" }),
+    /* @__PURE__ */ jsx(RequiredApis, {})
+  ] }), $[1] = t1) : t1 = $[1], t1;
 }
-function GoogleMapsLoadProxy(props) {
-  const $ = c(7), loadState = useLoadGoogleMapsApi(props.config);
-  switch (loadState.type) {
-    case "error": {
-      const t0 = loadState.error.type === "authError";
-      let t1;
-      return $[0] !== loadState.error || $[1] !== t0 ? (t1 = /* @__PURE__ */ jsx(LoadError, { error: loadState.error, isAuthError: t0 }), $[0] = loadState.error, $[1] = t0, $[2] = t1) : t1 = $[2], t1;
-    }
-    case "loading": {
-      let t0;
-      return $[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx("div", { children: "Loading Google Maps API" }), $[3] = t0) : t0 = $[3], t0;
-    }
-    case "loaded": {
-      let t0;
-      return $[4] !== loadState.api || $[5] !== props.children ? (t0 = props.children(loadState.api), $[4] = loadState.api, $[5] = props.children, $[6] = t0) : t0 = $[6], t0;
-    }
-    default:
-      return null;
+function MapApiGate(t0) {
+  const $ = c(4), {
+    children
+  } = t0, status = useApiLoadingStatus();
+  if (status === APILoadingStatus.AUTH_FAILURE || status === APILoadingStatus.FAILED) {
+    let t12;
+    return $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsx(InvalidApiKeyCard, {}), $[0] = t12) : t12 = $[0], t12;
+  }
+  if (status !== APILoadingStatus.LOADED) {
+    let t12;
+    return $[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", height: "fill", padding: 4, children: /* @__PURE__ */ jsx(Spinner, { muted: !0 }) }), $[1] = t12) : t12 = $[1], t12;
   }
+  let t1;
+  return $[2] !== children ? (t1 = /* @__PURE__ */ jsx(Fragment, { children }), $[2] = children, $[3] = t1) : t1 = $[3], t1;
 }
-const PreviewImage = styled.img.withConfig({
-  displayName: "PreviewImage",
+const StaticMapContainer = styled.div.withConfig({
+  displayName: "StaticMapContainer",
   componentId: "sc-10h92ni-0"
-})`width:100%;height:auto;vertical-align:top;`, DialogInnerContainer = styled.div.withConfig({
+})`cursor:pointer;& img{width:100%;height:auto;display:block;vertical-align:top;}`, DialogInnerContainer = styled.div.withConfig({
   displayName: "DialogInnerContainer",
   componentId: "sc-10h92ni-1"
-})`height:40rem;`, MapContainer = styled.div.withConfig({
-  displayName: "MapContainer",
-  componentId: "sc-gcrwqq-0"
-})`position:absolute;top:0;left:0;height:100%;width:100%;box-sizing:border-box;`;
-function latLngAreEqual(latLng1, latLng2) {
-  const lat1 = typeof latLng1.lat == "function" ? latLng1.lat() : latLng1.lat, lng1 = typeof latLng1.lng == "function" ? latLng1.lng() : latLng1.lng, lat2 = typeof latLng2.lat == "function" ? latLng2.lat() : latLng2.lat, lng2 = typeof latLng2.lng == "function" ? latLng2.lng() : latLng2.lng;
-  return lat1 === lat2 && lng1 === lng2;
-}
-class GoogleMap extends PureComponent {
-  static defaultProps = {
-    defaultZoom: 8,
-    scrollWheel: !0
-  };
-  state = {
-    map: void 0
-  };
-  mapRef = createRef();
-  mapEl = null;
-  componentDidMount() {
-    this.attachClickHandler();
-  }
-  attachClickHandler = () => {
-    const map = this.state.map;
-    if (!map)
-      return;
-    const {
-      api,
-      onClick
-    } = this.props, {
-      event
-    } = api;
-    this.clickHandler && this.clickHandler.remove(), onClick && (this.clickHandler = event.addListener(map, "click", onClick));
-  };
-  componentDidUpdate(prevProps) {
-    const map = this.state.map;
-    if (!map)
-      return;
-    const {
-      onClick,
-      location,
-      bounds
-    } = this.props;
-    prevProps.onClick !== onClick && this.attachClickHandler(), latLngAreEqual(prevProps.location, location) || map.panTo(this.getCenter()), bounds && (!prevProps.bounds || !bounds.equals(prevProps.bounds)) && map.fitBounds(bounds);
-  }
-  componentWillUnmount() {
-    this.clickHandler && this.clickHandler.remove();
-  }
-  getCenter() {
-    const {
-      location,
-      api
-    } = this.props;
-    return new api.LatLng(location.lat, location.lng);
-  }
-  constructMap(el) {
+})`height:40rem;`, MAP_ID = "DEMO_MAP_ID", SearchInputContainer = styled.div.withConfig({
+  displayName: "SearchInputContainer",
+  componentId: "sc-n3m9ut-0"
+})`margin:10px;width:240px;& gmp-place-autocomplete{width:100%;}`;
+function SearchInput(t0) {
+  const $ = c(3), {
+    onSelect
+  } = t0, places = useMapsLibrary("places"), map = useMap();
+  if (!places)
+    return null;
+  let t1;
+  return $[0] !== map || $[1] !== onSelect ? (t1 = /* @__PURE__ */ jsx(SearchInputContainer, { children: /* @__PURE__ */ jsx("gmp-place-autocomplete", { "ongmp-select": async (t2) => {
     const {
-      defaultZoom,
-      api,
-      mapTypeControl,
-      controlSize,
-      bounds,
-      scrollWheel
-    } = this.props, map = new api.Map(el, {
-      zoom: defaultZoom,
-      center: this.getCenter(),
-      scrollwheel: scrollWheel,
-      streetViewControl: !1,
-      mapTypeControl,
-      controlSize
+      placePrediction
+    } = t2, place = placePrediction.toPlace();
+    await place.fetchFields({
+      fields: ["location"]
     });
-    return bounds && map.fitBounds(bounds), map;
-  }
-  setMapElement = (element) => {
-    if (element && element !== this.mapEl) {
-      const map = this.constructMap(element);
-      this.setState({
-        map
-      }, this.attachClickHandler);
-    }
-    this.mapEl = element;
-  };
-  render() {
-    const {
-      children
-    } = this.props, {
-      map
-    } = this.state;
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(MapContainer, { ref: this.setMapElement }),
-      children && map ? children(map) : null
-    ] });
-  }
-}
-const markerPath = "M 3.052 3.7 C 1.56 5.293 0.626 7.612 0.663 9.793 C 0.738 14.352 2.793 16.077 6.078 22.351 C 7.263 25.111 8.497 28.032 9.672 32.871 C 9.835 33.584 9.994 34.246 10.069 34.305 C 10.143 34.362 10.301 33.697 10.465 32.983 C 11.639 28.145 12.875 25.226 14.059 22.466 C 17.344 16.192 19.398 14.466 19.474 9.908 C 19.511 7.727 18.574 5.405 17.083 3.814 C 15.379 1.994 12.809 0.649 10.069 0.593 C 7.328 0.536 4.756 1.882 3.052 3.7 Z";
-class Marker extends PureComponent {
-  eventHandlers = {};
-  componentDidMount() {
-    const {
-      position,
-      api,
-      map,
-      onMove,
-      zIndex,
-      opacity,
-      label,
-      markerRef,
-      color
-    } = this.props, {
-      Marker: GMarker
-    } = api;
-    let icon;
-    color && (icon = {
-      path: markerPath,
-      fillOpacity: 1,
-      fillColor: color.background,
-      strokeColor: color.border,
-      strokeWeight: 2,
-      anchor: new api.Point(10, 35),
-      labelOrigin: new api.Point(10, 11)
-    }), this.marker = new GMarker({
-      draggable: !!onMove,
-      position,
-      map,
-      zIndex,
-      opacity,
-      label,
-      icon
-    }), markerRef && (markerRef.current = this.marker), this.attachMoveHandler(), this.attachClickHandler();
-  }
-  componentDidUpdate(prevProps) {
-    if (!this.marker)
-      return;
-    const {
-      position,
-      onMove,
-      label,
-      zIndex,
-      opacity,
-      map
-    } = this.props;
-    prevProps.onMove !== onMove && this.attachMoveHandler(), latLngAreEqual(prevProps.position, position) || this.marker.setPosition(position), prevProps.label !== label && this.marker.setLabel(label || null), prevProps.zIndex !== zIndex && this.marker.setZIndex(zIndex || null), prevProps.opacity !== opacity && this.marker.setOpacity(opacity || null), prevProps.map !== map && this.marker.setMap(map);
-  }
-  componentWillUnmount() {
-    this.eventHandlers.move && this.eventHandlers.move.remove(), this.marker && this.marker.setMap(null);
-  }
-  attachMoveHandler() {
-    const {
-      api,
-      onMove
-    } = this.props;
-    this.eventHandlers.move && this.eventHandlers.move.remove(), this.marker && onMove && (this.eventHandlers.move = api.event.addListener(this.marker, "dragend", onMove));
-  }
-  attachClickHandler() {
-    const {
-      api,
-      onClick
-    } = this.props;
-    this.eventHandlers.click && this.eventHandlers.click.remove(), this.marker && onClick && (this.eventHandlers.click = api.event.addListener(this.marker, "click", onClick));
-  }
-  render() {
-    return null;
-  }
-}
-const WrapperContainer = styled.div.withConfig({
-  displayName: "WrapperContainer",
-  componentId: "sc-n3m9ut-0"
-})`position:absolute;right:10px;top:10px;width:220px;`;
-class SearchInput extends PureComponent {
-  searchInputRef = createRef();
-  handleChange = () => {
-    this.autoComplete && (this.props.onChange(this.autoComplete.getPlace()), this.searchInputRef.current && (this.searchInputRef.current.value = ""));
-  };
-  componentDidMount() {
-    const input = this.searchInputRef.current;
-    if (!input)
+    const location = place.location;
+    if (!location)
       return;
-    const {
-      api,
-      map
-    } = this.props, {
-      Circle,
-      places,
-      event
-    } = api, searchBounds = new Circle({
-      center: map.getCenter(),
-      radius: 100
-    }).getBounds();
-    this.autoComplete = new places.Autocomplete(input, {
-      bounds: searchBounds,
-      types: []
-      // return all kinds of places
-    }), event.addListener(this.autoComplete, "place_changed", this.handleChange);
-  }
-  render() {
-    return /* @__PURE__ */ jsx(WrapperContainer, { children: /* @__PURE__ */ jsx(TextInput, { name: "place", ref: this.searchInputRef, placeholder: "Search for place or address", padding: 4 }) });
-  }
+    const latLng = {
+      lat: location.lat(),
+      lng: location.lng()
+    };
+    onSelect(latLng), map?.panTo(latLng);
+  } }) }), $[0] = map, $[1] = onSelect, $[2] = t1) : t1 = $[2], t1;
 }
 const fallbackLatLng$1 = {
   lat: 40.7058254,
@@ -321,67 +270,86 @@ const fallbackLatLng$1 = {
 }, defaultMapLocation$1 = {
   lng: 10.74609,
   lat: 59.91273
-}, GeopointSelect = (t0) => {
-  const $ = c(25), {
-    api,
+};
+function GeopointSelect(t0) {
+  const $ = c(24), {
     value,
     onChange,
     defaultLocation: t1,
     defaultZoom: t2
   } = t0, defaultLocation = t1 === void 0 ? defaultMapLocation$1 : t1, defaultZoom = t2 === void 0 ? 8 : t2;
   let t3;
-  $[0] !== defaultLocation || $[1] !== value ? (t3 = () => ({
+  $[0] !== value ? (t3 = value ? {
+    lat: value.lat,
+    lng: value.lng
+  } : {}, $[0] = value, $[1] = t3) : t3 = $[1];
+  let t4;
+  $[2] !== defaultLocation || $[3] !== t3 ? (t4 = {
     ...fallbackLatLng$1,
     ...defaultLocation,
-    ...value
-  }), $[0] = defaultLocation, $[1] = value, $[2] = t3) : t3 = $[2];
-  const getCenter2 = t3;
-  let t4;
-  $[3] !== onChange ? (t4 = (geoPoint) => {
-    onChange && onChange(geoPoint);
-  }, $[3] = onChange, $[4] = t4) : t4 = $[4];
-  const setValue = t4;
+    ...t3
+  }, $[2] = defaultLocation, $[3] = t3, $[4] = t4) : t4 = $[4];
+  const center = t4;
   let t5;
-  $[5] !== setValue ? (t5 = (place) => {
-    place.geometry?.location && setValue(place.geometry.location);
-  }, $[5] = setValue, $[6] = t5) : t5 = $[6];
-  const handlePlaceChanged = t5;
+  $[5] !== onChange ? (t5 = (event) => {
+    event.detail.latLng && onChange && onChange(event.detail.latLng);
+  }, $[5] = onChange, $[6] = t5) : t5 = $[6];
+  const handleMapClick = t5;
   let t6;
-  $[7] !== setValue ? (t6 = (event) => {
-    event.latLng && setValue(event.latLng);
-  }, $[7] = setValue, $[8] = t6) : t6 = $[8];
+  $[7] !== onChange ? (t6 = (event_0) => {
+    event_0.latLng && onChange && onChange({
+      lat: event_0.latLng.lat(),
+      lng: event_0.latLng.lng()
+    });
+  }, $[7] = onChange, $[8] = t6) : t6 = $[8];
   const handleMarkerDragEnd = t6;
   let t7;
-  $[9] !== setValue ? (t7 = (event_0) => {
-    event_0.latLng && setValue(event_0.latLng);
-  }, $[9] = setValue, $[10] = t7) : t7 = $[10];
-  const handleMapClick = t7;
+  $[9] !== onChange ? (t7 = (location) => {
+    onChange?.(location);
+  }, $[9] = onChange, $[10] = t7) : t7 = $[10];
+  const handleSelect = t7;
   let t8;
-  $[11] !== getCenter2 ? (t8 = getCenter2(), $[11] = getCenter2, $[12] = t8) : t8 = $[12];
+  $[11] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t8 = {
+    width: "100%",
+    height: "100%"
+  }, $[11] = t8) : t8 = $[11];
   let t9;
-  $[13] !== api || $[14] !== handleMarkerDragEnd || $[15] !== handlePlaceChanged || $[16] !== onChange || $[17] !== value ? (t9 = (map) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(SearchInput, { api, map, onChange: handlePlaceChanged }),
-    value && /* @__PURE__ */ jsx(Marker, { api, map, position: value, onMove: onChange ? handleMarkerDragEnd : void 0 })
-  ] }), $[13] = api, $[14] = handleMarkerDragEnd, $[15] = handlePlaceChanged, $[16] = onChange, $[17] = value, $[18] = t9) : t9 = $[18];
+  $[12] !== handleSelect ? (t9 = /* @__PURE__ */ jsx(MapControl, { position: ControlPosition.TOP_RIGHT, children: /* @__PURE__ */ jsx(SearchInput, { onSelect: handleSelect }) }), $[12] = handleSelect, $[13] = t9) : t9 = $[13];
   let t10;
-  return $[19] !== api || $[20] !== defaultZoom || $[21] !== handleMapClick || $[22] !== t8 || $[23] !== t9 ? (t10 = /* @__PURE__ */ jsx(GoogleMap, { api, location: t8, onClick: handleMapClick, defaultZoom, children: t9 }), $[19] = api, $[20] = defaultZoom, $[21] = handleMapClick, $[22] = t8, $[23] = t9, $[24] = t10) : t10 = $[24], t10;
-}, EMPTY_PATH$1 = [], getStaticImageUrl$1 = (value, apiKey) => {
-  const loc = `${value.lat},${value.lng}`;
-  return `https://maps.googleapis.com/maps/api/staticmap?${new URLSearchParams({
-    key: apiKey,
-    center: loc,
-    markers: loc,
-    zoom: "13",
-    scale: "2",
-    size: "640x300"
-  }).toString()}`;
-};
+  $[14] !== handleMarkerDragEnd || $[15] !== onChange || $[16] !== value ? (t10 = value && /* @__PURE__ */ jsx(AdvancedMarker, { position: {
+    lat: value.lat,
+    lng: value.lng
+  }, draggable: !!onChange, onDragEnd: handleMarkerDragEnd }), $[14] = handleMarkerDragEnd, $[15] = onChange, $[16] = value, $[17] = t10) : t10 = $[17];
+  let t11;
+  return $[18] !== center || $[19] !== defaultZoom || $[20] !== handleMapClick || $[21] !== t10 || $[22] !== t9 ? (t11 = /* @__PURE__ */ jsxs(Map, { mapId: MAP_ID, defaultCenter: center, defaultZoom, onClick: handleMapClick, gestureHandling: "greedy", streetViewControl: !1, mapTypeControl: !1, style: t8, children: [
+    t9,
+    t10
+  ] }), $[18] = center, $[19] = defaultZoom, $[20] = handleMapClick, $[21] = t10, $[22] = t9, $[23] = t11) : t11 = $[23], t11;
+}
+function StaticMapPreview(t0) {
+  const $ = c(8), {
+    url,
+    onClick,
+    onDoubleClick
+  } = t0, [failed, setFailed] = useState(!1);
+  if (failed) {
+    let t12;
+    return $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsx(InvalidApiKeyCard, {}), $[0] = t12) : t12 = $[0], t12;
+  }
+  let t1;
+  $[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t1 = () => setFailed(!0), $[1] = t1) : t1 = $[1];
+  let t2;
+  $[2] !== url ? (t2 = /* @__PURE__ */ jsx(StaticMap, { url }), $[2] = url, $[3] = t2) : t2 = $[3];
+  let t3;
+  return $[4] !== onClick || $[5] !== onDoubleClick || $[6] !== t2 ? (t3 = /* @__PURE__ */ jsx(StaticMapContainer, { onClick, onDoubleClick, onErrorCapture: t1, children: t2 }), $[4] = onClick, $[5] = onDoubleClick, $[6] = t2, $[7] = t3) : t3 = $[7], t3;
+}
+const EMPTY_PATH$1 = [];
 function GeopointInput(props) {
-  const $ = c(51), {
+  const $ = c(54), {
     changed,
     elementProps,
     focused,
-    geoConfig: config2,
+    geoConfig: config,
     onChange,
     onPathFocus,
     path,
@@ -410,7 +378,7 @@ function GeopointInput(props) {
   $[5] !== onChange || $[6] !== schemaTypeName ? (t3 = (latLng) => {
     onChange([setIfMissing({
       _type: schemaTypeName
-    }), set(latLng.lat(), ["lat"]), set(latLng.lng(), ["lng"])]);
+    }), set(latLng.lat, ["lat"]), set(latLng.lng, ["lng"])]);
   }, $[5] = onChange, $[6] = schemaTypeName, $[7] = t3) : t3 = $[7];
   const handleChange = t3;
   let t4;
@@ -421,42 +389,33 @@ function GeopointInput(props) {
   let t5, t6;
   if ($[10] !== modalOpen || $[11] !== onPathFocus ? (t5 = () => {
     modalOpen && onPathFocus(EMPTY_PATH$1);
-  }, t6 = [modalOpen, onPathFocus], $[10] = modalOpen, $[11] = onPathFocus, $[12] = t5, $[13] = t6) : (t5 = $[12], t6 = $[13]), useEffect(t5, t6), !config2 || !config2.apiKey) {
+  }, t6 = [modalOpen, onPathFocus], $[10] = modalOpen, $[11] = onPathFocus, $[12] = t5, $[13] = t6) : (t5 = $[12], t6 = $[13]), useEffect(t5, t6), !config || !config.apiKey) {
     let t72;
-    return $[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t72 = /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("p", { children: [
-        "The ",
-        /* @__PURE__ */ jsx("a", { href: "https://sanity.io/docs/schema-types/geopoint-type", children: "Geopoint type" }),
-        " needs a Google Maps API key with access to:"
-      ] }),
-      /* @__PURE__ */ jsxs("ul", { children: [
-        /* @__PURE__ */ jsx("li", { children: "Google Maps JavaScript API" }),
-        /* @__PURE__ */ jsx("li", { children: "Google Places API Web Service" }),
-        /* @__PURE__ */ jsx("li", { children: "Google Static Maps API" })
-      ] }),
-      /* @__PURE__ */ jsx("p", { children: "Please enter the API key with access to these services in your googleMapsInput plugin config." })
-    ] }), $[14] = t72) : t72 = $[14], t72;
+    return $[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t72 = /* @__PURE__ */ jsx(MissingApiKeyCard, { typeTitle: "Geopoint" }), $[14] = t72) : t72 = $[14], t72;
   }
   let t7;
-  $[15] !== changed || $[16] !== config2 || $[17] !== focused || $[18] !== handleFocusButton || $[19] !== path || $[20] !== value ? (t7 = value && /* @__PURE__ */ jsx(ChangeIndicator, { path, isChanged: changed, hasFocus: !!focused, children: /* @__PURE__ */ jsx(PreviewImage, { src: getStaticImageUrl$1(value, config2.apiKey), alt: "Map location", onClick: handleFocusButton, onDoubleClick: handleToggleModal }) }), $[15] = changed, $[16] = config2, $[17] = focused, $[18] = handleFocusButton, $[19] = path, $[20] = value, $[21] = t7) : t7 = $[21];
-  const t8 = value ? 2 : 1, t9 = value && EditIcon, t10 = value ? "Edit" : "Set location";
-  let t11;
-  $[22] !== ariaDescribedBy || $[23] !== handleFocus || $[24] !== id || $[25] !== inputRef || $[26] !== readOnly || $[27] !== t10 || $[28] !== t9 ? (t11 = /* @__PURE__ */ jsx(Button, { "aria-describedby": ariaDescribedBy, disabled: readOnly, icon: t9, id, mode: "ghost", onClick: handleToggleModal, onFocus: handleFocus, padding: 3, ref: inputRef, text: t10 }), $[22] = ariaDescribedBy, $[23] = handleFocus, $[24] = id, $[25] = inputRef, $[26] = readOnly, $[27] = t10, $[28] = t9, $[29] = t11) : t11 = $[29];
+  $[15] !== config || $[16] !== value ? (t7 = value ? getGeopointStaticMapUrl(value, config.apiKey) : null, $[15] = config, $[16] = value, $[17] = t7) : t7 = $[17];
+  const staticImageUrl = t7;
+  let t8;
+  $[18] !== changed || $[19] !== focused || $[20] !== handleFocusButton || $[21] !== path || $[22] !== staticImageUrl || $[23] !== value ? (t8 = value && staticImageUrl && /* @__PURE__ */ jsx(ChangeIndicator, { path, isChanged: changed, hasFocus: !!focused, children: /* @__PURE__ */ jsx(StaticMapPreview, { url: staticImageUrl, onClick: handleFocusButton, onDoubleClick: handleToggleModal }) }), $[18] = changed, $[19] = focused, $[20] = handleFocusButton, $[21] = path, $[22] = staticImageUrl, $[23] = value, $[24] = t8) : t8 = $[24];
+  const t9 = value ? 2 : 1, t10 = value && EditIcon, t11 = value ? "Edit" : "Set location";
   let t12;
-  $[30] !== handleClear || $[31] !== readOnly || $[32] !== value ? (t12 = value && /* @__PURE__ */ jsx(Button, { disabled: readOnly, icon: TrashIcon, mode: "ghost", onClick: handleClear, padding: 3, text: "Remove", tone: "critical" }), $[30] = handleClear, $[31] = readOnly, $[32] = value, $[33] = t12) : t12 = $[33];
+  $[25] !== ariaDescribedBy || $[26] !== handleFocus || $[27] !== id || $[28] !== inputRef || $[29] !== readOnly || $[30] !== t10 || $[31] !== t11 ? (t12 = /* @__PURE__ */ jsx(Button, { "aria-describedby": ariaDescribedBy, disabled: readOnly, icon: t10, id, mode: "ghost", onClick: handleToggleModal, onFocus: handleFocus, padding: 3, ref: inputRef, text: t11 }), $[25] = ariaDescribedBy, $[26] = handleFocus, $[27] = id, $[28] = inputRef, $[29] = readOnly, $[30] = t10, $[31] = t11, $[32] = t12) : t12 = $[32];
   let t13;
-  $[34] !== t11 || $[35] !== t12 || $[36] !== t8 ? (t13 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Grid, { columns: t8, gap: 3, children: [
-    t11,
-    t12
-  ] }) }), $[34] = t11, $[35] = t12, $[36] = t8, $[37] = t13) : t13 = $[37];
+  $[33] !== handleClear || $[34] !== readOnly || $[35] !== value ? (t13 = value && /* @__PURE__ */ jsx(Button, { disabled: readOnly, icon: TrashIcon, mode: "ghost", onClick: handleClear, padding: 3, text: "Remove", tone: "critical" }), $[33] = handleClear, $[34] = readOnly, $[35] = value, $[36] = t13) : t13 = $[36];
   let t14;
-  $[38] !== config2 || $[39] !== dialogId || $[40] !== handleBlur || $[41] !== handleChange || $[42] !== handleCloseModal || $[43] !== modalOpen || $[44] !== readOnly || $[45] !== value ? (t14 = modalOpen && /* @__PURE__ */ jsx(Dialog, { header: "Place the marker on the map", id: `${dialogId}_dialog`, onBlur: handleBlur, onClose: handleCloseModal, ref: dialogRef, width: 1, children: /* @__PURE__ */ jsx(DialogInnerContainer, { children: /* @__PURE__ */ jsx(GoogleMapsLoadProxy, { config: getGeoConfig(), children: (api) => /* @__PURE__ */ jsx(GeopointSelect, { api, value: value || void 0, onChange: readOnly ? void 0 : handleChange, defaultLocation: config2.defaultLocation, defaultZoom: config2.defaultZoom }) }) }) }), $[38] = config2, $[39] = dialogId, $[40] = handleBlur, $[41] = handleChange, $[42] = handleCloseModal, $[43] = modalOpen, $[44] = readOnly, $[45] = value, $[46] = t14) : t14 = $[46];
+  $[37] !== t12 || $[38] !== t13 || $[39] !== t9 ? (t14 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Grid, { gridTemplateColumns: t9, gap: 3, children: [
+    t12,
+    t13
+  ] }) }), $[37] = t12, $[38] = t13, $[39] = t9, $[40] = t14) : t14 = $[40];
   let t15;
-  return $[47] !== t13 || $[48] !== t14 || $[49] !== t7 ? (t15 = /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
-    t7,
-    t13,
-    t14
-  ] }), $[47] = t13, $[48] = t14, $[49] = t7, $[50] = t15) : t15 = $[50], t15;
+  $[41] !== config || $[42] !== dialogId || $[43] !== handleBlur || $[44] !== handleChange || $[45] !== handleCloseModal || $[46] !== modalOpen || $[47] !== readOnly || $[48] !== value ? (t15 = modalOpen && /* @__PURE__ */ jsx(Dialog, { header: "Place the marker on the map", id: `${dialogId}_dialog`, onBlur: handleBlur, onClose: handleCloseModal, ref: dialogRef, width: 1, children: /* @__PURE__ */ jsx(DialogInnerContainer, { children: /* @__PURE__ */ jsx(APIProvider, { apiKey: config.apiKey, children: /* @__PURE__ */ jsx(MapApiGate, { children: /* @__PURE__ */ jsx(GeopointSelect, { value: value || void 0, onChange: readOnly ? void 0 : handleChange, defaultLocation: config.defaultLocation, defaultZoom: config.defaultZoom }) }) }) }) }), $[41] = config, $[42] = dialogId, $[43] = handleBlur, $[44] = handleChange, $[45] = handleCloseModal, $[46] = modalOpen, $[47] = readOnly, $[48] = value, $[49] = t15) : t15 = $[49];
+  let t16;
+  return $[50] !== t14 || $[51] !== t15 || $[52] !== t8 ? (t16 = /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+    t8,
+    t14,
+    t15
+  ] }), $[50] = t14, $[51] = t15, $[52] = t8, $[53] = t16) : t16 = $[53], t16;
 }
 function _temp$1(currentState) {
   return !currentState;
@@ -467,147 +426,95 @@ const fallbackLatLng = {
 }, defaultMapLocation = {
   lng: 10.74609,
   lat: 59.91273
-}, MarkerDragSync = (t0) => {
-  const $ = c(9), {
-    api,
-    marker,
-    circleRef,
-    isMarkerDragging
-  } = t0;
-  let t1;
-  $[0] !== api.event || $[1] !== isMarkerDragging || $[2] !== marker ? (t1 = () => {
-    const handleDrag = () => {
-      isMarkerDragging.current = !0;
-    }, handleDragEnd = () => {
-      isMarkerDragging.current = !1;
-    }, dragListener = api.event.addListener(marker, "drag", handleDrag), dragEndListener = api.event.addListener(marker, "dragend", handleDragEnd);
-    return () => {
-      api.event.removeListener(dragListener), api.event.removeListener(dragEndListener);
-    };
-  }, $[0] = api.event, $[1] = isMarkerDragging, $[2] = marker, $[3] = t1) : t1 = $[3];
-  let t2;
-  return $[4] !== api || $[5] !== circleRef || $[6] !== isMarkerDragging || $[7] !== marker ? (t2 = [api, marker, circleRef, isMarkerDragging], $[4] = api, $[5] = circleRef, $[6] = isMarkerDragging, $[7] = marker, $[8] = t2) : t2 = $[8], useEffect(t1, t2), null;
-}, GeopointRadiusSelect = (t0) => {
-  const $ = c(35), {
-    api,
+};
+function GeopointRadiusSelect(t0) {
+  const $ = c(37), {
     value,
     onChange,
     defaultLocation: t1,
     defaultRadiusZoom: t2,
     defaultRadius: t3
-  } = t0, defaultLocation = t1 === void 0 ? defaultMapLocation : t1, defaultRadiusZoom = t2 === void 0 ? 12 : t2, defaultRadius = t3 === void 0 ? 1e3 : t3, circleRef = useRef(null), markerRef = useRef(void 0), isMarkerDragging = useRef(!1);
+  } = t0, defaultLocation = t1 === void 0 ? defaultMapLocation : t1, defaultRadiusZoom = t2 === void 0 ? 12 : t2, defaultRadius = t3 === void 0 ? 1e3 : t3;
   let t4;
-  $[0] !== defaultLocation || $[1] !== value ? (t4 = () => ({
+  $[0] !== value ? (t4 = value ? {
+    lat: value.lat,
+    lng: value.lng
+  } : {}, $[0] = value, $[1] = t4) : t4 = $[1];
+  let t5;
+  $[2] !== defaultLocation || $[3] !== t4 ? (t5 = {
     ...fallbackLatLng,
     ...defaultLocation,
-    ...value
-  }), $[0] = defaultLocation, $[1] = value, $[2] = t4) : t4 = $[2];
-  const getCenter2 = t4;
-  let t5;
-  $[3] !== onChange ? (t5 = (geoPoint, radius) => {
-    if (onChange) {
-      const roundedRadius = radius ? Math.round(radius) : void 0;
-      onChange(geoPoint, roundedRadius);
-    }
-  }, $[3] = onChange, $[4] = t5) : t5 = $[4];
-  const setValue = t5;
+    ...t4
+  }, $[2] = defaultLocation, $[3] = t4, $[4] = t5) : t5 = $[4];
+  const center = t5, currentRadius = value?.radius ?? defaultRadius;
   let t6;
-  $[5] !== defaultRadius || $[6] !== setValue || $[7] !== value?.radius ? (t6 = (place) => {
-    place.geometry?.location && setValue(place.geometry.location, value?.radius || defaultRadius);
-  }, $[5] = defaultRadius, $[6] = setValue, $[7] = value?.radius, $[8] = t6) : t6 = $[8];
-  const handlePlaceChanged = t6;
+  $[5] !== onChange ? (t6 = (latLng, radius) => {
+    onChange?.(latLng, radius == null ? void 0 : Math.round(radius));
+  }, $[5] = onChange, $[6] = t6) : t6 = $[6];
+  const setValue = t6;
   let t7;
-  $[9] !== defaultRadius || $[10] !== setValue || $[11] !== value?.radius ? (t7 = (event) => {
-    event.latLng && (circleRef.current && circleRef.current.setCenter(event.latLng), setValue(event.latLng, value?.radius || defaultRadius));
-  }, $[9] = defaultRadius, $[10] = setValue, $[11] = value?.radius, $[12] = t7) : t7 = $[12];
-  const handleMarkerDragEnd = t7;
+  $[7] !== currentRadius || $[8] !== setValue ? (t7 = (event) => {
+    event.detail.latLng && setValue(event.detail.latLng, currentRadius);
+  }, $[7] = currentRadius, $[8] = setValue, $[9] = t7) : t7 = $[9];
+  const handleMapClick = t7;
   let t8;
-  $[13] !== defaultRadius || $[14] !== setValue || $[15] !== value?.radius ? (t8 = (event_0) => {
-    event_0.latLng && setValue(event_0.latLng, value?.radius || defaultRadius);
-  }, $[13] = defaultRadius, $[14] = setValue, $[15] = value?.radius, $[16] = t8) : t8 = $[16];
-  const handleMapClick = t8;
-  let t10, t9;
-  $[17] !== value ? (t9 = () => {
-    value && circleRef.current && (circleRef.current.setCenter({
+  $[10] !== currentRadius || $[11] !== setValue ? (t8 = (event_0) => {
+    event_0.latLng && setValue({
+      lat: event_0.latLng.lat(),
+      lng: event_0.latLng.lng()
+    }, currentRadius);
+  }, $[10] = currentRadius, $[11] = setValue, $[12] = t8) : t8 = $[12];
+  const handleMarkerDragEnd = t8;
+  let t9;
+  $[13] !== currentRadius || $[14] !== setValue ? (t9 = (location) => setValue(location, currentRadius), $[13] = currentRadius, $[14] = setValue, $[15] = t9) : t9 = $[15];
+  const handleSelect = t9;
+  let t10;
+  $[16] !== setValue || $[17] !== value ? (t10 = (radius_0) => {
+    value && setValue({
       lat: value.lat,
       lng: value.lng
-    }), circleRef.current.setRadius(value.radius));
-  }, t10 = [value], $[17] = value, $[18] = t10, $[19] = t9) : (t10 = $[18], t9 = $[19]), useEffect(t9, t10);
+    }, radius_0);
+  }, $[16] = setValue, $[17] = value, $[18] = t10) : t10 = $[18];
+  const handleCircleRadiusChanged = t10;
   let t11;
-  $[20] !== getCenter2 ? (t11 = getCenter2(), $[20] = getCenter2, $[21] = t11) : t11 = $[21];
+  $[19] !== currentRadius || $[20] !== setValue ? (t11 = (event_1) => {
+    event_1.latLng && setValue({
+      lat: event_1.latLng.lat(),
+      lng: event_1.latLng.lng()
+    }, currentRadius);
+  }, $[19] = currentRadius, $[20] = setValue, $[21] = t11) : t11 = $[21];
+  const handleCircleDragEnd = t11;
   let t12;
-  $[22] !== api || $[23] !== handleMarkerDragEnd || $[24] !== handlePlaceChanged || $[25] !== onChange || $[26] !== setValue || $[27] !== value ? (t12 = (map) => (value && !circleRef.current && (circleRef.current = new api.Circle({
-    map,
-    center: {
+  $[22] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t12 = {
+    width: "100%",
+    height: "100%"
+  }, $[22] = t12) : t12 = $[22];
+  let t13;
+  $[23] !== handleSelect ? (t13 = /* @__PURE__ */ jsx(MapControl, { position: ControlPosition.TOP_RIGHT, children: /* @__PURE__ */ jsx(SearchInput, { onSelect: handleSelect }) }), $[23] = handleSelect, $[24] = t13) : t13 = $[24];
+  let t14;
+  $[25] !== handleCircleDragEnd || $[26] !== handleCircleRadiusChanged || $[27] !== handleMarkerDragEnd || $[28] !== onChange || $[29] !== value ? (t14 = value && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AdvancedMarker, { position: {
       lat: value.lat,
       lng: value.lng
-    },
-    radius: value.radius,
-    fillColor: "#4285F4",
-    fillOpacity: 0.2,
-    strokeColor: "#4285F4",
-    strokeOpacity: 0.8,
-    strokeWeight: 2,
-    editable: !0
-  }), circleRef.current.addListener("center_changed", () => {
-    if (circleRef.current && markerRef.current && !isMarkerDragging.current) {
-      const circleCenter = circleRef.current.getCenter();
-      circleCenter && markerRef.current.setPosition(circleCenter);
-    }
-  }), circleRef.current.addListener("radius_changed", () => {
-    if (circleRef.current) {
-      const center = circleRef.current.getCenter(), radius_0 = circleRef.current.getRadius();
-      center && setValue(center, Math.round(radius_0));
-    }
-  }), circleRef.current.addListener("dragend", () => {
-    if (circleRef.current) {
-      const center_0 = circleRef.current.getCenter(), radius_1 = circleRef.current.getRadius();
-      center_0 && setValue(center_0, Math.round(radius_1));
-    }
-  })), /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(SearchInput, { api, map, onChange: handlePlaceChanged }),
-    value && /* @__PURE__ */ jsx(Marker, { api, map, position: value, onMove: onChange ? handleMarkerDragEnd : void 0, markerRef }),
-    value && markerRef.current && /* @__PURE__ */ jsx(MarkerDragSync, { api, marker: markerRef.current, circleRef, isMarkerDragging })
-  ] })), $[22] = api, $[23] = handleMarkerDragEnd, $[24] = handlePlaceChanged, $[25] = onChange, $[26] = setValue, $[27] = value, $[28] = t12) : t12 = $[28];
-  let t13;
-  return $[29] !== api || $[30] !== defaultRadiusZoom || $[31] !== handleMapClick || $[32] !== t11 || $[33] !== t12 ? (t13 = /* @__PURE__ */ jsx(GoogleMap, { api, location: t11, onClick: handleMapClick, defaultZoom: defaultRadiusZoom, children: t12 }), $[29] = api, $[30] = defaultRadiusZoom, $[31] = handleMapClick, $[32] = t11, $[33] = t12, $[34] = t13) : t13 = $[34], t13;
-}, EMPTY_PATH = [], generateCirclePoints = (lat, lng, radius) => {
-  const points = [];
-  for (let i = 0; i <= 32; i++) {
-    const angle = i / 32 * 2 * Math.PI, latOffset = radius / 111e3 * Math.cos(angle), lngOffset = radius / (111e3 * Math.cos(lat * Math.PI / 180)) * Math.sin(angle);
-    points.push({
-      lat: lat + latOffset,
-      lng: lng + lngOffset
-    });
-  }
-  return points;
-}, getStaticImageUrl = (value, apiKey) => {
-  const loc = `${value.lat},${value.lng}`;
-  let zoom = 13;
-  if (value.radius) {
-    const scale = (value.radius + value.radius / 2) / 500, calculatedZoom = 16 - Math.log(scale) / Math.log(2);
-    zoom = Math.max(8, Math.min(16, Math.round(calculatedZoom - 0.4)));
-  }
-  const qs = new URLSearchParams({
-    key: apiKey,
-    center: loc,
-    markers: loc,
-    zoom: zoom.toString(),
-    scale: "2",
-    size: "640x300"
-  });
-  if (value.radius) {
-    const path = generateCirclePoints(value.lat, value.lng, value.radius).map((p) => `${p.lat},${p.lng}`).join("|");
-    qs.append("path", `fillcolor:0x4285F480|color:0x4285F4|weight:2|${path}`);
-  }
-  return `https://maps.googleapis.com/maps/api/staticmap?${qs.toString()}`;
-};
+    }, draggable: !!onChange, onDragEnd: handleMarkerDragEnd }),
+    /* @__PURE__ */ jsx(Circle, { center: {
+      lat: value.lat,
+      lng: value.lng
+    }, radius: value.radius, editable: !!onChange, draggable: !!onChange, fillColor: "#4285F4", fillOpacity: 0.2, strokeColor: "#4285F4", strokeOpacity: 0.8, strokeWeight: 2, onRadiusChanged: handleCircleRadiusChanged, onDragEnd: handleCircleDragEnd })
+  ] }), $[25] = handleCircleDragEnd, $[26] = handleCircleRadiusChanged, $[27] = handleMarkerDragEnd, $[28] = onChange, $[29] = value, $[30] = t14) : t14 = $[30];
+  let t15;
+  return $[31] !== center || $[32] !== defaultRadiusZoom || $[33] !== handleMapClick || $[34] !== t13 || $[35] !== t14 ? (t15 = /* @__PURE__ */ jsxs(Map, { mapId: MAP_ID, defaultCenter: center, defaultZoom: defaultRadiusZoom, onClick: handleMapClick, gestureHandling: "greedy", streetViewControl: !1, mapTypeControl: !1, style: t12, children: [
+    t13,
+    t14
+  ] }), $[31] = center, $[32] = defaultRadiusZoom, $[33] = handleMapClick, $[34] = t13, $[35] = t14, $[36] = t15) : t15 = $[36], t15;
+}
+const EMPTY_PATH = [];
 function GeopointRadiusInput(props) {
-  const $ = c(64), {
+  const $ = c(68), {
     changed,
     elementProps,
     focused,
-    geoConfig: config2,
+    geoConfig: config,
     onChange,
     onPathFocus,
     path,
@@ -633,12 +540,12 @@ function GeopointRadiusInput(props) {
   $[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = () => setModalOpen(_temp), $[4] = t2) : t2 = $[4];
   const handleToggleModal = t2;
   let t3;
-  $[5] !== config2.defaultRadius || $[6] !== onChange || $[7] !== schemaTypeName || $[8] !== value?.radius ? (t3 = (latLng, radius) => {
-    const currentRadius = radius ?? value?.radius ?? config2.defaultRadius ?? 1e3;
+  $[5] !== config.defaultRadius || $[6] !== onChange || $[7] !== schemaTypeName || $[8] !== value?.radius ? (t3 = (latLng, radius) => {
+    const currentRadius = radius ?? value?.radius ?? config.defaultRadius ?? 1e3;
     onChange([setIfMissing({
       _type: schemaTypeName
-    }), set(latLng.lat(), ["lat"]), set(latLng.lng(), ["lng"]), set(currentRadius, ["radius"])]);
-  }, $[5] = config2.defaultRadius, $[6] = onChange, $[7] = schemaTypeName, $[8] = value?.radius, $[9] = t3) : t3 = $[9];
+    }), set(latLng.lat, ["lat"]), set(latLng.lng, ["lng"]), set(currentRadius, ["radius"])]);
+  }, $[5] = config.defaultRadius, $[6] = onChange, $[7] = schemaTypeName, $[8] = value?.radius, $[9] = t3) : t3 = $[9];
   const handleChange = t3;
   let t4;
   $[10] !== onChange || $[11] !== value ? (t4 = (event) => {
@@ -653,389 +560,64 @@ function GeopointRadiusInput(props) {
   let t6, t7;
   if ($[15] !== modalOpen || $[16] !== onPathFocus ? (t6 = () => {
     modalOpen && onPathFocus(EMPTY_PATH);
-  }, t7 = [modalOpen, onPathFocus], $[15] = modalOpen, $[16] = onPathFocus, $[17] = t6, $[18] = t7) : (t6 = $[17], t7 = $[18]), useEffect(t6, t7), !config2 || !config2.apiKey) {
+  }, t7 = [modalOpen, onPathFocus], $[15] = modalOpen, $[16] = onPathFocus, $[17] = t6, $[18] = t7) : (t6 = $[17], t7 = $[18]), useEffect(t6, t7), !config || !config.apiKey) {
     let t82;
-    return $[19] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t82 = /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("p", { children: [
-        "The ",
-        /* @__PURE__ */ jsx("a", { href: "https://sanity.io/docs/schema-types/geopoint-type", children: "Geopoint Radius type" }),
-        " ",
-        "needs a Google Maps API key with access to:"
-      ] }),
-      /* @__PURE__ */ jsxs("ul", { children: [
-        /* @__PURE__ */ jsx("li", { children: "Google Maps JavaScript API" }),
-        /* @__PURE__ */ jsx("li", { children: "Google Places API Web Service" }),
-        /* @__PURE__ */ jsx("li", { children: "Google Static Maps API" })
-      ] }),
-      /* @__PURE__ */ jsx("p", { children: "Please enter the API key with access to these services in your googleMapsInput plugin config." })
-    ] }), $[19] = t82) : t82 = $[19], t82;
+    return $[19] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t82 = /* @__PURE__ */ jsx(MissingApiKeyCard, { typeTitle: "Geopoint Radius" }), $[19] = t82) : t82 = $[19], t82;
   }
   let t8;
-  $[20] !== changed || $[21] !== config2.apiKey || $[22] !== focused || $[23] !== handleFocusButton || $[24] !== path || $[25] !== value ? (t8 = value && /* @__PURE__ */ jsx(ChangeIndicator, { path, isChanged: changed, hasFocus: !!focused, children: /* @__PURE__ */ jsx(PreviewImage, { src: getStaticImageUrl(value, config2.apiKey), alt: "Map location with radius", onClick: handleFocusButton, onDoubleClick: handleToggleModal }) }), $[20] = changed, $[21] = config2.apiKey, $[22] = focused, $[23] = handleFocusButton, $[24] = path, $[25] = value, $[26] = t8) : t8 = $[26];
+  $[20] !== config.apiKey || $[21] !== value ? (t8 = value ? getGeopointRadiusStaticMapUrl(value, config.apiKey) : null, $[20] = config.apiKey, $[21] = value, $[22] = t8) : t8 = $[22];
+  const staticImageUrl = t8;
   let t9;
-  $[27] !== config2.defaultRadius || $[28] !== handleRadiusChange || $[29] !== readOnly || $[30] !== value ? (t9 = value && /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+  $[23] !== changed || $[24] !== focused || $[25] !== handleFocusButton || $[26] !== path || $[27] !== staticImageUrl || $[28] !== value ? (t9 = value && staticImageUrl && /* @__PURE__ */ jsx(ChangeIndicator, { path, isChanged: changed, hasFocus: !!focused, children: /* @__PURE__ */ jsx(StaticMapPreview, { url: staticImageUrl, onClick: handleFocusButton, onDoubleClick: handleToggleModal }) }), $[23] = changed, $[24] = focused, $[25] = handleFocusButton, $[26] = path, $[27] = staticImageUrl, $[28] = value, $[29] = t9) : t9 = $[29];
+  let t10;
+  $[30] !== config.defaultRadius || $[31] !== handleRadiusChange || $[32] !== readOnly || $[33] !== value ? (t10 = value && /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
     /* @__PURE__ */ jsx(Label, { children: "Radius (meters)" }),
-    /* @__PURE__ */ jsx(TextInput, { type: "number", value: Math.round(value.radius || config2.defaultRadius || 1e3), onChange: handleRadiusChange, disabled: readOnly, min: 1, max: 5e4, step: 1 })
-  ] }), $[27] = config2.defaultRadius, $[28] = handleRadiusChange, $[29] = readOnly, $[30] = value, $[31] = t9) : t9 = $[31];
-  const t10 = value ? 2 : 1, t11 = value && EditIcon, t12 = value ? "Edit" : "Set location and radius";
-  let t13;
-  $[32] !== ariaDescribedBy || $[33] !== handleFocus || $[34] !== id || $[35] !== inputRef || $[36] !== readOnly || $[37] !== t11 || $[38] !== t12 ? (t13 = /* @__PURE__ */ jsx(Button, { "aria-describedby": ariaDescribedBy, disabled: readOnly, icon: t11, id, mode: "ghost", onClick: handleToggleModal, onFocus: handleFocus, padding: 3, ref: inputRef, text: t12 }), $[32] = ariaDescribedBy, $[33] = handleFocus, $[34] = id, $[35] = inputRef, $[36] = readOnly, $[37] = t11, $[38] = t12, $[39] = t13) : t13 = $[39];
+    /* @__PURE__ */ jsx(TextInput, { type: "number", value: Math.round(value.radius || config.defaultRadius || 1e3), onChange: handleRadiusChange, disabled: readOnly, min: 1, max: 5e4, step: 1 })
+  ] }), $[30] = config.defaultRadius, $[31] = handleRadiusChange, $[32] = readOnly, $[33] = value, $[34] = t10) : t10 = $[34];
+  const t11 = value ? 2 : 1, t12 = value && EditIcon, t13 = value ? "Edit" : "Set location and radius";
   let t14;
-  $[40] !== handleClear || $[41] !== readOnly || $[42] !== value ? (t14 = value && /* @__PURE__ */ jsx(Button, { disabled: readOnly, icon: TrashIcon, mode: "ghost", onClick: handleClear, padding: 3, text: "Remove", tone: "critical" }), $[40] = handleClear, $[41] = readOnly, $[42] = value, $[43] = t14) : t14 = $[43];
+  $[35] !== ariaDescribedBy || $[36] !== handleFocus || $[37] !== id || $[38] !== inputRef || $[39] !== readOnly || $[40] !== t12 || $[41] !== t13 ? (t14 = /* @__PURE__ */ jsx(Button, { "aria-describedby": ariaDescribedBy, disabled: readOnly, icon: t12, id, mode: "ghost", onClick: handleToggleModal, onFocus: handleFocus, padding: 3, ref: inputRef, text: t13 }), $[35] = ariaDescribedBy, $[36] = handleFocus, $[37] = id, $[38] = inputRef, $[39] = readOnly, $[40] = t12, $[41] = t13, $[42] = t14) : t14 = $[42];
   let t15;
-  $[44] !== t10 || $[45] !== t13 || $[46] !== t14 ? (t15 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Grid, { columns: t10, gap: 3, children: [
-    t13,
-    t14
-  ] }) }), $[44] = t10, $[45] = t13, $[46] = t14, $[47] = t15) : t15 = $[47];
+  $[43] !== handleClear || $[44] !== readOnly || $[45] !== value ? (t15 = value && /* @__PURE__ */ jsx(Button, { disabled: readOnly, icon: TrashIcon, mode: "ghost", onClick: handleClear, padding: 3, text: "Remove", tone: "critical" }), $[43] = handleClear, $[44] = readOnly, $[45] = value, $[46] = t15) : t15 = $[46];
   let t16;
-  $[48] !== config2.defaultLocation || $[49] !== config2.defaultRadius || $[50] !== config2.defaultRadiusZoom || $[51] !== dialogId || $[52] !== handleBlur || $[53] !== handleChange || $[54] !== handleCloseModal || $[55] !== modalOpen || $[56] !== readOnly || $[57] !== value ? (t16 = modalOpen && /* @__PURE__ */ jsx(Dialog, { header: "Place the marker and set radius on the map", id: `${dialogId}_dialog`, onBlur: handleBlur, onClose: handleCloseModal, ref: dialogRef, width: 1, children: /* @__PURE__ */ jsx(DialogInnerContainer, { children: /* @__PURE__ */ jsx(GoogleMapsLoadProxy, { config: getGeoConfig(), children: (api) => /* @__PURE__ */ jsx(GeopointRadiusSelect, { api, value: value || void 0, onChange: readOnly ? void 0 : handleChange, defaultLocation: config2.defaultLocation, defaultRadiusZoom: config2.defaultRadiusZoom, defaultRadius: config2.defaultRadius }) }) }) }), $[48] = config2.defaultLocation, $[49] = config2.defaultRadius, $[50] = config2.defaultRadiusZoom, $[51] = dialogId, $[52] = handleBlur, $[53] = handleChange, $[54] = handleCloseModal, $[55] = modalOpen, $[56] = readOnly, $[57] = value, $[58] = t16) : t16 = $[58];
+  $[47] !== t11 || $[48] !== t14 || $[49] !== t15 ? (t16 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Grid, { gridTemplateColumns: t11, gap: 3, children: [
+    t14,
+    t15
+  ] }) }), $[47] = t11, $[48] = t14, $[49] = t15, $[50] = t16) : t16 = $[50];
   let t17;
-  return $[59] !== t15 || $[60] !== t16 || $[61] !== t8 || $[62] !== t9 ? (t17 = /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
-    t8,
+  $[51] !== config.apiKey || $[52] !== config.defaultLocation || $[53] !== config.defaultRadius || $[54] !== config.defaultRadiusZoom || $[55] !== dialogId || $[56] !== handleBlur || $[57] !== handleChange || $[58] !== handleCloseModal || $[59] !== modalOpen || $[60] !== readOnly || $[61] !== value ? (t17 = modalOpen && /* @__PURE__ */ jsx(Dialog, { header: "Place the marker and set radius on the map", id: `${dialogId}_dialog`, onBlur: handleBlur, onClose: handleCloseModal, ref: dialogRef, width: 1, children: /* @__PURE__ */ jsx(DialogInnerContainer, { children: /* @__PURE__ */ jsx(APIProvider, { apiKey: config.apiKey, children: /* @__PURE__ */ jsx(MapApiGate, { children: /* @__PURE__ */ jsx(GeopointRadiusSelect, { value: value || void 0, onChange: readOnly ? void 0 : handleChange, defaultLocation: config.defaultLocation, defaultRadiusZoom: config.defaultRadiusZoom, defaultRadius: config.defaultRadius }) }) }) }) }), $[51] = config.apiKey, $[52] = config.defaultLocation, $[53] = config.defaultRadius, $[54] = config.defaultRadiusZoom, $[55] = dialogId, $[56] = handleBlur, $[57] = handleChange, $[58] = handleCloseModal, $[59] = modalOpen, $[60] = readOnly, $[61] = value, $[62] = t17) : t17 = $[62];
+  let t18;
+  return $[63] !== t10 || $[64] !== t16 || $[65] !== t17 || $[66] !== t9 ? (t18 = /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
     t9,
-    t15,
-    t16
-  ] }), $[59] = t15, $[60] = t16, $[61] = t8, $[62] = t9, $[63] = t17) : t17 = $[63], t17;
+    t10,
+    t16,
+    t17
+  ] }), $[63] = t10, $[64] = t16, $[65] = t17, $[66] = t9, $[67] = t18) : t18 = $[67], t18;
 }
 function _temp(currentState) {
   return !currentState;
 }
-const RootContainer = styled.div.withConfig({
-  displayName: "RootContainer",
-  componentId: "sc-sa7btb-0"
-})`position:relative;min-height:200px;&:empty{background-color:var(--card-skeleton-color-from);display:table;width:100%;}&:empty:after{content:'Missing/invalid data';display:table-cell;vertical-align:middle;text-align:center;position:relative;}`;
-class Arrow extends PureComponent {
-  eventHandlers = {};
-  componentDidMount() {
-    const {
-      from,
-      to,
-      api,
-      map,
-      zIndex,
-      onClick,
-      color,
-      arrowRef
-    } = this.props, lineSymbol = {
-      path: api.SymbolPath.FORWARD_OPEN_ARROW
-    };
-    this.line = new api.Polyline({
-      map,
-      zIndex,
-      path: [from, to],
-      icons: [{
-        icon: lineSymbol,
-        offset: "50%"
-      }],
-      strokeOpacity: 0.55,
-      strokeColor: color ? color.text : "black"
-    }), onClick && (this.eventHandlers.click = api.event.addListener(this.line, "click", onClick)), arrowRef && (arrowRef.current = this.line);
-  }
-  componentDidUpdate(prevProps) {
-    if (!this.line)
-      return;
-    const {
-      from,
-      to,
-      map
-    } = this.props;
-    (!latLngAreEqual(prevProps.from, from) || !latLngAreEqual(prevProps.to, to)) && this.line.setPath([from, to]), prevProps.map !== map && this.line.setMap(map);
-  }
-  componentWillUnmount() {
-    this.line && this.line.setMap(null), this.eventHandlers.click && this.eventHandlers.click.remove();
-  }
-  render() {
-    return null;
-  }
-}
-function GeopointMove(t0) {
-  const $ = c(21), {
-    diff,
-    api,
-    map,
-    label
-  } = t0, {
-    fromValue: from,
-    toValue: to
-  } = diff, annotation = diff.isChanged ? diff.annotation : void 0, userColor = useUserColor(annotation ? annotation.author : null) || void 0, fromRef = useRef(void 0), toRef = useRef(void 0);
-  let t1;
-  $[0] !== api || $[1] !== from || $[2] !== map || $[3] !== userColor ? (t1 = from && /* @__PURE__ */ jsx(Marker, { api, map, position: from, zIndex: 0, opacity: 0.55, markerRef: fromRef, color: userColor }), $[0] = api, $[1] = from, $[2] = map, $[3] = userColor, $[4] = t1) : t1 = $[4];
-  let t2;
-  $[5] !== api || $[6] !== from || $[7] !== map || $[8] !== to || $[9] !== userColor ? (t2 = from && to && /* @__PURE__ */ jsx(Arrow, { api, map, from, to, zIndex: 1, color: userColor }), $[5] = api, $[6] = from, $[7] = map, $[8] = to, $[9] = userColor, $[10] = t2) : t2 = $[10];
-  let t3;
-  $[11] !== api || $[12] !== label || $[13] !== map || $[14] !== to || $[15] !== userColor ? (t3 = to && /* @__PURE__ */ jsx(Marker, { api, map, position: to, zIndex: 2, markerRef: toRef, label, color: userColor }), $[11] = api, $[12] = label, $[13] = map, $[14] = to, $[15] = userColor, $[16] = t3) : t3 = $[16];
-  let t4;
-  return $[17] !== t1 || $[18] !== t2 || $[19] !== t3 ? (t4 = /* @__PURE__ */ jsxs(Fragment, { children: [
-    t1,
-    t2,
-    t3
-  ] }), $[17] = t1, $[18] = t2, $[19] = t3, $[20] = t4) : t4 = $[20], t4;
-}
-const GeopointArrayDiff = (t0) => {
-  const $ = c(4), {
-    diff,
-    schemaType
-  } = t0;
-  let t1;
-  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t1 = getGeoConfig(), $[0] = t1) : t1 = $[0];
-  let t2;
-  return $[1] !== diff || $[2] !== schemaType ? (t2 = /* @__PURE__ */ jsx(RootContainer, { children: /* @__PURE__ */ jsx(GoogleMapsLoadProxy, { config: t1, children: (api) => /* @__PURE__ */ jsx(GeopointDiff$1, { api, diff, schemaType }) }) }), $[1] = diff, $[2] = schemaType, $[3] = t2) : t2 = $[3], t2;
-};
-function GeopointDiff$1(t0) {
-  const $ = c(17), {
-    api,
-    diff
-  } = t0;
-  let T0, bounds, t1, t2, t3;
-  if ($[0] !== api || $[1] !== diff.fromValue || $[2] !== diff.toValue) {
-    t3 = /* @__PURE__ */ Symbol.for("react.early_return_sentinel");
-    bb0: {
-      const fromValue = (diff.fromValue || []).filter(hasCoordinates), toValue = (diff.toValue || []).filter(hasCoordinates);
-      if (fromValue.length === 0 && toValue.length === 0) {
-        t3 = null;
-        break bb0;
+const googleMapsInput = definePlugin((config) => ({
+  name: "google-maps-input",
+  studio: {
+    components: {
+      // Make the config (API key) available to diff components, which are
+      // resolved outside of the form and so can't receive it as a prop.
+      activeToolLayout: function(props) {
+        return /* @__PURE__ */ jsx(GoogleMapsInputContext, { value: config, children: props.renderDefault(props) });
       }
-      bounds = getBounds$2(fromValue, toValue, api), T0 = GoogleMap, t1 = api, t2 = bounds.getCenter().toJSON();
     }
-    $[0] = api, $[1] = diff.fromValue, $[2] = diff.toValue, $[3] = T0, $[4] = bounds, $[5] = t1, $[6] = t2, $[7] = t3;
-  } else
-    T0 = $[3], bounds = $[4], t1 = $[5], t2 = $[6], t3 = $[7];
-  if (t3 !== /* @__PURE__ */ Symbol.for("react.early_return_sentinel"))
-    return t3;
-  let t4;
-  $[8] !== api || $[9] !== diff.items ? (t4 = (map) => /* @__PURE__ */ jsx(Fragment, { children: diff.items.map((t52) => {
-    const {
-      toIndex,
-      diff: pointDiff
-    } = t52;
-    return isChangeDiff(pointDiff) ? /* @__PURE__ */ jsx(GeopointMove, { api, map, diff: pointDiff, label: `${toIndex}` }, toIndex) : null;
-  }) }), $[8] = api, $[9] = diff.items, $[10] = t4) : t4 = $[10];
-  let t5;
-  return $[11] !== T0 || $[12] !== bounds || $[13] !== t1 || $[14] !== t2 || $[15] !== t4 ? (t5 = /* @__PURE__ */ jsx(T0, { api: t1, location: t2, mapTypeControl: !1, controlSize: 20, bounds, children: t4 }), $[11] = T0, $[12] = bounds, $[13] = t1, $[14] = t2, $[15] = t4, $[16] = t5) : t5 = $[16], t5;
-}
-function isChangeDiff(diff) {
-  return diff.action !== "unchanged" && diff.type === "object";
-}
-function hasCoordinates(point) {
-  return typeof point.lat == "number" && typeof point.lng == "number";
-}
-function getBounds$2(fromValue, toValue, api) {
-  const bounds = new api.LatLngBounds();
-  return [...fromValue || [], ...toValue || []].forEach((point) => bounds.extend(point)), bounds;
-}
-const GeopointFieldDiff = (t0) => {
-  const $ = c(4), {
-    diff,
-    schemaType
-  } = t0;
-  let t1;
-  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t1 = getGeoConfig(), $[0] = t1) : t1 = $[0];
-  let t2;
-  return $[1] !== diff || $[2] !== schemaType ? (t2 = /* @__PURE__ */ jsx(RootContainer, { children: /* @__PURE__ */ jsx(GoogleMapsLoadProxy, { config: t1, children: (api) => /* @__PURE__ */ jsx(GeopointDiff, { api, diff, schemaType }) }) }), $[1] = diff, $[2] = schemaType, $[3] = t2) : t2 = $[3], t2;
-};
-function GeopointDiff(t0) {
-  const $ = c(25), {
-    api,
-    diff
-  } = t0, {
-    fromValue,
-    toValue
-  } = diff;
-  let t1;
-  $[0] !== diff ? (t1 = getAnnotationAtPath(diff, ["lat"]) || getAnnotationAtPath(diff, ["lng"]) || getAnnotationAtPath(diff, []), $[0] = diff, $[1] = t1) : t1 = $[1];
-  const annotation = t1;
-  let t2;
-  $[2] !== api || $[3] !== diff ? (t2 = getCenter$1(diff, api), $[2] = api, $[3] = diff, $[4] = t2) : t2 = $[4];
-  const center = t2;
-  let t3;
-  $[5] !== api || $[6] !== fromValue || $[7] !== toValue ? (t3 = fromValue && toValue ? getBounds$1(fromValue, toValue, api) : void 0, $[5] = api, $[6] = fromValue, $[7] = toValue, $[8] = t3) : t3 = $[8];
-  const bounds = t3;
-  let t4;
-  $[9] !== annotation ? (t4 = annotation ? [annotation] : [], $[9] = annotation, $[10] = t4) : t4 = $[10];
-  let t5;
-  $[11] !== diff ? (t5 = getAction$1(diff), $[11] = diff, $[12] = t5) : t5 = $[12];
-  let t6;
-  $[13] !== api || $[14] !== diff ? (t6 = (map) => /* @__PURE__ */ jsx(GeopointMove, { api, map, diff }), $[13] = api, $[14] = diff, $[15] = t6) : t6 = $[15];
-  let t7;
-  $[16] !== api || $[17] !== bounds || $[18] !== center || $[19] !== t6 ? (t7 = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(GoogleMap, { api, location: center, mapTypeControl: !1, controlSize: 20, bounds, scrollWheel: !1, children: t6 }) }), $[16] = api, $[17] = bounds, $[18] = center, $[19] = t6, $[20] = t7) : t7 = $[20];
-  let t8;
-  return $[21] !== t4 || $[22] !== t5 || $[23] !== t7 ? (t8 = /* @__PURE__ */ jsx(DiffTooltip, { annotations: t4, description: t5, children: t7 }), $[21] = t4, $[22] = t5, $[23] = t7, $[24] = t8) : t8 = $[24], t8;
-}
-function getBounds$1(fromValue, toValue, api) {
-  return new api.LatLngBounds().extend(fromValue).extend(toValue);
-}
-function getCenter$1(diff, api) {
-  const {
-    fromValue,
-    toValue
-  } = diff;
-  if (fromValue && toValue)
-    return getBounds$1(fromValue, toValue, api).getCenter().toJSON();
-  if (fromValue)
-    return fromValue;
-  if (toValue)
-    return toValue;
-  throw new Error("Neither a from or a to value present");
-}
-function getAction$1(diff) {
-  const {
-    fromValue,
-    toValue
-  } = diff;
-  return fromValue && toValue ? "Moved" : fromValue ? "Removed" : toValue ? "Added" : "Unchanged";
-}
-function GeopointRadiusMove(t0) {
-  const $ = c(33), {
-    diff,
-    api,
-    map,
-    label
-  } = t0, {
-    fromValue: from,
-    toValue: to
-  } = diff, annotation = diff.isChanged ? diff.annotation : void 0, userColor = useUserColor(annotation ? annotation.author : null) || void 0, fromRef = useRef(void 0), toRef = useRef(void 0), fromCircleRef = useRef(void 0), toCircleRef = useRef(void 0);
-  let t1;
-  $[0] !== api || $[1] !== from || $[2] !== map || $[3] !== to || $[4] !== userColor?.background ? (t1 = () => {
-    const color = userColor?.background || "#4285F4";
-    return from && from.radius && (fromCircleRef.current = new api.Circle({
-      map,
-      center: {
-        lat: from.lat,
-        lng: from.lng
-      },
-      radius: from.radius,
-      fillColor: color,
-      fillOpacity: 0.1,
-      strokeColor: color,
-      strokeOpacity: 0.3,
-      strokeWeight: 1,
-      zIndex: 0
-    })), to && to.radius && (toCircleRef.current = new api.Circle({
-      map,
-      center: {
-        lat: to.lat,
-        lng: to.lng
-      },
-      radius: to.radius,
-      fillColor: color,
-      fillOpacity: 0.2,
-      strokeColor: color,
-      strokeOpacity: 0.8,
-      strokeWeight: 2,
-      zIndex: 2
-    })), () => {
-      fromCircleRef.current && fromCircleRef.current.setMap(null), toCircleRef.current && toCircleRef.current.setMap(null);
-    };
-  }, $[0] = api, $[1] = from, $[2] = map, $[3] = to, $[4] = userColor?.background, $[5] = t1) : t1 = $[5];
-  let t2;
-  $[6] !== api || $[7] !== from || $[8] !== map || $[9] !== to || $[10] !== userColor ? (t2 = [api, map, from, to, userColor], $[6] = api, $[7] = from, $[8] = map, $[9] = to, $[10] = userColor, $[11] = t2) : t2 = $[11], useEffect(t1, t2);
-  let t3;
-  $[12] !== api || $[13] !== from || $[14] !== map || $[15] !== userColor ? (t3 = from && /* @__PURE__ */ jsx(Marker, { api, map, position: from, zIndex: 0, opacity: 0.55, markerRef: fromRef, color: userColor }), $[12] = api, $[13] = from, $[14] = map, $[15] = userColor, $[16] = t3) : t3 = $[16];
-  let t4;
-  $[17] !== api || $[18] !== from || $[19] !== map || $[20] !== to || $[21] !== userColor ? (t4 = from && to && /* @__PURE__ */ jsx(Arrow, { api, map, from, to, zIndex: 1, color: userColor }), $[17] = api, $[18] = from, $[19] = map, $[20] = to, $[21] = userColor, $[22] = t4) : t4 = $[22];
-  let t5;
-  $[23] !== api || $[24] !== label || $[25] !== map || $[26] !== to || $[27] !== userColor ? (t5 = to && /* @__PURE__ */ jsx(Marker, { api, map, position: to, zIndex: 2, markerRef: toRef, label, color: userColor }), $[23] = api, $[24] = label, $[25] = map, $[26] = to, $[27] = userColor, $[28] = t5) : t5 = $[28];
-  let t6;
-  return $[29] !== t3 || $[30] !== t4 || $[31] !== t5 ? (t6 = /* @__PURE__ */ jsxs(Fragment, { children: [
-    t3,
-    t4,
-    t5
-  ] }), $[29] = t3, $[30] = t4, $[31] = t5, $[32] = t6) : t6 = $[32], t6;
-}
-const GeopointRadiusFieldDiff = (t0) => {
-  const $ = c(4), {
-    diff,
-    schemaType
-  } = t0;
-  let t1;
-  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t1 = getGeoConfig(), $[0] = t1) : t1 = $[0];
-  let t2;
-  return $[1] !== diff || $[2] !== schemaType ? (t2 = /* @__PURE__ */ jsx(RootContainer, { children: /* @__PURE__ */ jsx(GoogleMapsLoadProxy, { config: t1, children: (api) => /* @__PURE__ */ jsx(GeopointRadiusDiff, { api, diff, schemaType }) }) }), $[1] = diff, $[2] = schemaType, $[3] = t2) : t2 = $[3], t2;
-};
-function GeopointRadiusDiff(t0) {
-  const $ = c(25), {
-    api,
-    diff
-  } = t0, {
-    fromValue,
-    toValue
-  } = diff;
-  let t1;
-  $[0] !== diff ? (t1 = getAnnotationAtPath(diff, ["lat"]) || getAnnotationAtPath(diff, ["lng"]) || getAnnotationAtPath(diff, ["radius"]) || getAnnotationAtPath(diff, []), $[0] = diff, $[1] = t1) : t1 = $[1];
-  const annotation = t1;
-  let t2;
-  $[2] !== api || $[3] !== diff ? (t2 = getCenter(diff, api), $[2] = api, $[3] = diff, $[4] = t2) : t2 = $[4];
-  const center = t2;
-  let t3;
-  $[5] !== api || $[6] !== fromValue || $[7] !== toValue ? (t3 = fromValue && toValue ? getBounds(fromValue, toValue, api) : void 0, $[5] = api, $[6] = fromValue, $[7] = toValue, $[8] = t3) : t3 = $[8];
-  const bounds = t3;
-  let t4;
-  $[9] !== annotation ? (t4 = annotation ? [annotation] : [], $[9] = annotation, $[10] = t4) : t4 = $[10];
-  let t5;
-  $[11] !== diff ? (t5 = getAction(diff), $[11] = diff, $[12] = t5) : t5 = $[12];
-  let t6;
-  $[13] !== api || $[14] !== diff ? (t6 = (map) => /* @__PURE__ */ jsx(GeopointRadiusMove, { api, map, diff }), $[13] = api, $[14] = diff, $[15] = t6) : t6 = $[15];
-  let t7;
-  $[16] !== api || $[17] !== bounds || $[18] !== center || $[19] !== t6 ? (t7 = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(GoogleMap, { api, location: center, mapTypeControl: !1, controlSize: 20, bounds, scrollWheel: !1, children: t6 }) }), $[16] = api, $[17] = bounds, $[18] = center, $[19] = t6, $[20] = t7) : t7 = $[20];
-  let t8;
-  return $[21] !== t4 || $[22] !== t5 || $[23] !== t7 ? (t8 = /* @__PURE__ */ jsx(DiffTooltip, { annotations: t4, description: t5, children: t7 }), $[21] = t4, $[22] = t5, $[23] = t7, $[24] = t8) : t8 = $[24], t8;
-}
-function getBounds(fromValue, toValue, api) {
-  const bounds = new api.LatLngBounds().extend(fromValue).extend(toValue), fromRadius = fromValue.radius || 0, toRadius = toValue.radius || 0, maxRadius = Math.max(fromRadius, toRadius);
-  if (maxRadius > 0) {
-    const radiusInDegrees = maxRadius / 111e3;
-    bounds.extend({
-      lat: fromValue.lat + radiusInDegrees,
-      lng: fromValue.lng + radiusInDegrees
-    }), bounds.extend({
-      lat: fromValue.lat - radiusInDegrees,
-      lng: fromValue.lng - radiusInDegrees
-    }), bounds.extend({
-      lat: toValue.lat + radiusInDegrees,
-      lng: toValue.lng + radiusInDegrees
-    }), bounds.extend({
-      lat: toValue.lat - radiusInDegrees,
-      lng: toValue.lng - radiusInDegrees
-    });
-  }
-  return bounds;
-}
-function getCenter(diff, api) {
-  const {
-    fromValue,
-    toValue
-  } = diff;
-  if (fromValue && toValue)
-    return getBounds(fromValue, toValue, api).getCenter().toJSON();
-  if (fromValue)
-    return fromValue;
-  if (toValue)
-    return toValue;
-  throw new Error("Neither a from or a to value present");
-}
-function getAction(diff) {
-  const {
-    fromValue,
-    toValue
-  } = diff;
-  if (fromValue && toValue) {
-    const latChanged = fromValue.lat !== toValue.lat || fromValue.lng !== toValue.lng, radiusChanged = fromValue.radius !== toValue.radius;
-    return latChanged && radiusChanged ? "Moved and radius changed" : latChanged ? "Moved" : radiusChanged ? "Radius changed" : "Unchanged";
-  } else {
-    if (fromValue)
-      return "Removed";
-    if (toValue)
-      return "Added";
-  }
-  return "Unchanged";
-}
-const googleMapsInput = definePlugin((config2) => (setGeoConfig(config2), {
-  name: "google-maps-input",
+  },
   schema: {
     types: [{
       name: "geopointRadius",
       title: "Geopoint with Radius",
       type: "object",
+      // Only attach the map diff when there's a key to render it with;
+      // otherwise fall back to the default per-field (lat/lng/radius) diff.
+      components: config.apiKey ? {
+        diff: GeopointDiff
+      } : void 0,
       fields: [{
         name: "lat",
         title: "Latitude",
@@ -1078,7 +660,7 @@ const googleMapsInput = definePlugin((config2) => (setGeoConfig(config2), {
   form: {
     components: {
       input(props) {
-        return isGeopoint(props.schemaType) ? /* @__PURE__ */ jsx(GeopointInput, { ...props, geoConfig: config2 }) : isGeopointRadius(props.schemaType) ? /* @__PURE__ */ jsx(GeopointRadiusInput, { ...props, geoConfig: config2 }) : props.renderDefault(props);
+        return isGeopoint(props.schemaType) ? /* @__PURE__ */ jsx(GeopointInput, { ...props, geoConfig: config }) : isGeopointRadius(props.schemaType) ? /* @__PURE__ */ jsx(GeopointRadiusInput, { ...props, geoConfig: config }) : props.renderDefault(props);
       }
     }
   }
@@ -1093,10 +675,8 @@ function isType(name, schema) {
   return schema?.name === name ? !0 : schema?.name ? isType(name, schema?.type) : !1;
 }
 export {
-  GeopointArrayDiff,
-  GeopointFieldDiff,
+  GeopointDiff,
   GeopointInput,
-  GeopointRadiusFieldDiff,
   GeopointRadiusInput,
   googleMapsInput
 };