@sanity/google-maps-input 4.0.0 → 4.1.0

package/dist/index.js

@@ -1,305 +1,159 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lodash = require('lodash');
-var ui = require('@sanity/ui');
-var icons = require('@sanity/icons');
-var sanity = require('sanity');
-var styledComponents = require('styled-components');
-function _interopNamespaceCompat(e) {
-  if (e && typeof e === 'object' && 'default' in e) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () {
-            return e[k];
-          }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
-const callbackName = "___sanity_googleMapsApiCallback";
-const authFailureCallbackName = "gm_authFailure";
-let AuthError$1 = class AuthError extends Error {};
-function _loadGoogleMapsApi(config) {
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect, PureComponent, createRef, useCallback, useId, useRef } from "react";
+import { Card, Box, Text, Code, TextInput, Stack, Grid, Button, Dialog } from "@sanity/ui";
+import { EditIcon, TrashIcon } from "@sanity/icons";
+import { setIfMissing, set, unset, ChangeIndicator, useUserColor, getAnnotationAtPath, DiffTooltip, definePlugin } from "sanity";
+import { styled } from "styled-components";
+const callbackName = "___sanity_googleMapsApiCallback", authFailureCallbackName = "gm_authFailure";
+let AuthError$1 = class extends Error {
+};
+function _loadGoogleMapsApi(config2) {
   return new Promise((resolve, reject) => {
     window[authFailureCallbackName] = () => {
       reject(new AuthError$1("Authentication error when loading Google Maps API."));
-    };
-    window[callbackName] = () => {
+    }, window[callbackName] = () => {
       resolve(window.google.maps);
     };
     const script = document.createElement("script");
-    script.onerror = (event, source, lineno, colno, error) => reject(new Error(coeerceError(event, error)));
-    script.src = "https://maps.googleapis.com/maps/api/js?key=".concat(config.apiKey, "&libraries=places&callback=").concat(callbackName, "&language=").concat(config.locale);
-    document.getElementsByTagName("head")[0].appendChild(script);
+    script.onerror = (event, source, lineno, colno, error) => reject(new Error(coeerceError(event, error))), script.src = `https://maps.googleapis.com/maps/api/js?key=${config2.apiKey}&libraries=places&callback=${callbackName}&language=${config2.locale}`, document.getElementsByTagName("head")[0].appendChild(script);
   }).finally(() => {
-    delete window[callbackName];
-    delete window[authFailureCallbackName];
+    delete window[callbackName], delete window[authFailureCallbackName];
   });
 }
 let memo = null;
-function loadGoogleMapsApi(config) {
-  if (memo) {
-    return memo;
-  }
-  memo = _loadGoogleMapsApi(config);
-  memo.catch(() => {
+function loadGoogleMapsApi(config2) {
+  return memo || (memo = _loadGoogleMapsApi(config2), memo.catch(() => {
     memo = null;
-  });
-  return memo;
+  }), memo);
 }
 function coeerceError(event, error) {
-  if (error) {
-    return error.message;
-  }
-  if (typeof event === "string") {
-    return event;
-  }
-  return isErrorEvent(event) ? event.message : "Failed to load Google Maps API";
+  return error ? error.message : typeof event == "string" ? event : isErrorEvent(event) ? event.message : "Failed to load Google Maps API";
 }
 function isErrorEvent(event) {
-  if (typeof event !== "object" || event === null) {
-    return false;
-  }
-  if (!("message" in event)) {
-    return false;
-  }
-  return typeof event.message === "string";
+  return typeof event != "object" || event === null || !("message" in event) ? !1 : typeof event.message == "string";
 }
 function LoadError(props) {
   var _a;
-  return /* @__PURE__ */jsxRuntime.jsxs(ui.Card, {
-    tone: "critical",
-    radius: 1,
-    children: [/* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-      as: "header",
-      paddingX: 4,
-      paddingTop: 4,
-      paddingBottom: 1,
-      children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-        as: "h2",
-        weight: "bold",
-        children: "Google Maps failed to load"
-      })
-    }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-      paddingX: 4,
-      paddingTop: 4,
-      paddingBottom: 1,
-      children: props.isAuthError ? /* @__PURE__ */jsxRuntime.jsx(AuthError, {}) : /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-          as: "h3",
-          children: "Error details:"
-        }), /* @__PURE__ */jsxRuntime.jsx("pre", {
-          children: /* @__PURE__ */jsxRuntime.jsx(ui.Code, {
-            size: 1,
-            children: "error" in props && ((_a = props.error) == null ? void 0 : _a.message)
-          })
-        })]
-      })
-    })]
-  });
+  return /* @__PURE__ */ jsxs(Card, { tone: "critical", radius: 1, children: [
+    /* @__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" }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 4, paddingTop: 4, paddingBottom: 1, children: props.isAuthError ? /* @__PURE__ */ jsx(AuthError2, {}) : /* @__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 && ((_a = props.error) == null ? void 0 : _a.message) }) })
+    ] }) })
+  ] });
 }
-function AuthError() {
-  return /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
-    children: [/* @__PURE__ */jsxRuntime.jsx("p", {
-      children: "The error appears to be related to authentication"
-    }), /* @__PURE__ */jsxRuntime.jsx("p", {
-      children: "Common causes include:"
-    }), /* @__PURE__ */jsxRuntime.jsxs("ul", {
-      children: [/* @__PURE__ */jsxRuntime.jsx("li", {
-        children: "Incorrect API key"
-      }), /* @__PURE__ */jsxRuntime.jsx("li", {
-        children: "Referer not allowed"
-      }), /* @__PURE__ */jsxRuntime.jsx("li", {
-        children: "Missing authentication scope"
-      })]
-    }), /* @__PURE__ */jsxRuntime.jsx("p", {
-      children: "Check the browser developer tools for more information."
-    })]
-  });
+function AuthError2() {
+  return /* @__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." })
+  ] });
 }
-const browserLocale = typeof window !== "undefined" && window.navigator.language || "en";
-function useLoadGoogleMapsApi(config) {
-  const locale = config.defaultLocale || browserLocale || "en-US";
-  const [state, setState] = React.useState({
-    type: "loading"
-  });
-  React.useEffect(() => {
-    loadGoogleMapsApi({
-      locale,
-      apiKey: config.apiKey
-    }).then(api => setState({
-      type: "loaded",
-      api
-    }), err => setState({
-      type: "error",
-      error: {
-        type: err instanceof AuthError$1 ? "authError" : "loadError",
-        message: err.message
-      }
-    }));
-  }, [locale, config.apiKey]);
-  return state;
+const browserLocale = typeof window < "u" && window.navigator.language || "en";
+function useLoadGoogleMapsApi(config2) {
+  const locale = config2.defaultLocale || browserLocale || "en-US", [state, setState] = useState({ type: "loading" });
+  return useEffect(() => {
+    typeof window > "u" || loadGoogleMapsApi({ locale, apiKey: config2.apiKey }).then(
+      (api) => setState({ type: "loaded", api }),
+      (err) => setState({
+        type: "error",
+        error: { type: err instanceof AuthError$1 ? "authError" : "loadError", message: err.message }
+      })
+    );
+  }, [locale, config2.apiKey]), state;
 }
 function GoogleMapsLoadProxy(props) {
   const loadState = useLoadGoogleMapsApi(props.config);
   switch (loadState.type) {
     case "error":
-      return /* @__PURE__ */jsxRuntime.jsx(LoadError, {
-        error: loadState.error,
-        isAuthError: loadState.error.type === "authError"
-      });
+      return /* @__PURE__ */ jsx(LoadError, { error: loadState.error, isAuthError: loadState.error.type === "authError" });
     case "loading":
-      return /* @__PURE__ */jsxRuntime.jsx("div", {
-        children: "Loading Google Maps API"
-      });
+      return /* @__PURE__ */ jsx("div", { children: "Loading Google Maps API" });
     case "loaded":
       return props.children(loadState.api);
     default:
       return null;
   }
 }
-var __freeze$3 = Object.freeze;
-var __defProp$9 = Object.defineProperty;
-var __template$3 = (cooked, raw) => __freeze$3(__defProp$9(cooked, "raw", {
-  value: __freeze$3(raw || cooked.slice())
-}));
-var _a$3;
-const WrapperContainer = styledComponents.styled.div(_a$3 || (_a$3 = __template$3(["\n  position: absolute;\n  right: 10px;\n  top: 10px;\n  width: 220px;\n"])));
-var __defProp$8 = Object.defineProperty;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$8(obj, key, {
-  enumerable: true,
-  configurable: true,
-  writable: true,
-  value
-}) : obj[key] = value;
-var __publicField$5 = (obj, key, value) => {
-  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-class SearchInput extends React__namespace.PureComponent {
+let config;
+function getGeoConfig() {
+  return config;
+}
+function setGeoConfig(newConfig) {
+  config = newConfig;
+}
+const PreviewImage = styled.img`
+  width: 100%;
+  height: auto;
+  vertical-align: top;
+`, DialogInnerContainer = styled.div`
+  height: 40rem;
+`, WrapperContainer = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 220px;
+`;
+var __defProp$5 = Object.defineProperty, __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __publicField$3 = (obj, key, value) => __defNormalProp$5(obj, typeof key != "symbol" ? key + "" : key, value);
+class SearchInput extends PureComponent {
   constructor() {
-    super(...arguments);
-    __publicField$5(this, "searchInputRef", React__namespace.createRef());
-    __publicField$5(this, "autoComplete");
-    __publicField$5(this, "handleChange", () => {
-      if (!this.autoComplete) {
-        return;
-      }
-      this.props.onChange(this.autoComplete.getPlace());
-      if (this.searchInputRef.current) {
-        this.searchInputRef.current.value = "";
-      }
+    super(...arguments), __publicField$3(this, "searchInputRef", createRef()), __publicField$3(this, "autoComplete"), __publicField$3(this, "handleChange", () => {
+      this.autoComplete && (this.props.onChange(this.autoComplete.getPlace()), this.searchInputRef.current && (this.searchInputRef.current.value = ""));
     });
   }
   componentDidMount() {
     const input = this.searchInputRef.current;
-    if (!input) {
+    if (!input)
       return;
-    }
-    const {
-      api,
-      map
-    } = this.props;
-    const {
-      Circle,
-      places,
-      event
-    } = api;
-    const searchBounds = new Circle({
-      center: map.getCenter(),
-      radius: 100
-    }).getBounds();
+    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);
+    }), event.addListener(this.autoComplete, "place_changed", this.handleChange);
   }
   render() {
-    return /* @__PURE__ */jsxRuntime.jsx(WrapperContainer, {
-      children: /* @__PURE__ */jsxRuntime.jsx(ui.TextInput, {
+    return /* @__PURE__ */ jsx(WrapperContainer, { children: /* @__PURE__ */ jsx(
+      TextInput,
+      {
         name: "place",
         ref: this.searchInputRef,
         placeholder: "Search for place or address",
         padding: 4
-      })
-    });
+      }
+    ) });
   }
 }
 function latLngAreEqual(latLng1, latLng2) {
-  const lat1 = typeof latLng1.lat === "function" ? latLng1.lat() : latLng1.lat;
-  const lng1 = typeof latLng1.lng === "function" ? latLng1.lng() : latLng1.lng;
-  const lat2 = typeof latLng2.lat === "function" ? latLng2.lat() : latLng2.lat;
-  const lng2 = typeof latLng2.lng === "function" ? latLng2.lng() : latLng2.lng;
+  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;
 }
-var __freeze$2 = Object.freeze;
-var __defProp$7 = Object.defineProperty;
-var __template$2 = (cooked, raw) => __freeze$2(__defProp$7(cooked, "raw", {
-  value: __freeze$2(raw || cooked.slice())
-}));
-var _a$2;
-const MapContainer = styledComponents.styled.div(_a$2 || (_a$2 = __template$2(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n"])));
-var __defProp$6 = Object.defineProperty;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$6(obj, key, {
-  enumerable: true,
-  configurable: true,
-  writable: true,
-  value
-}) : obj[key] = value;
-var __publicField$4 = (obj, key, value) => {
-  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-class GoogleMap extends React__namespace.default.PureComponent {
+const MapContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+`;
+var __defProp$4 = Object.defineProperty, __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __publicField$2 = (obj, key, value) => __defNormalProp$4(obj, typeof key != "symbol" ? key + "" : key, value);
+class GoogleMap extends PureComponent {
   constructor() {
-    super(...arguments);
-    __publicField$4(this, "state", {
-      map: void 0
-    });
-    __publicField$4(this, "clickHandler");
-    __publicField$4(this, "mapRef", React__namespace.default.createRef());
-    __publicField$4(this, "mapEl", null);
-    __publicField$4(this, "attachClickHandler", () => {
+    super(...arguments), __publicField$2(this, "state", { map: void 0 }), __publicField$2(this, "clickHandler"), __publicField$2(this, "mapRef", createRef()), __publicField$2(this, "mapEl", null), __publicField$2(this, "attachClickHandler", () => {
       const map = this.state.map;
-      if (!map) {
+      if (!map)
         return;
-      }
-      const {
-        api,
-        onClick
-      } = this.props;
-      const {
-        event
-      } = api;
-      if (this.clickHandler) {
-        this.clickHandler.remove();
-      }
-      if (onClick) {
-        this.clickHandler = event.addListener(map, "click", onClick);
-      }
-    });
-    __publicField$4(this, "setMapElement", element => {
+      const { api, onClick } = this.props, { event } = api;
+      this.clickHandler && this.clickHandler.remove(), onClick && (this.clickHandler = event.addListener(map, "click", onClick));
+    }), __publicField$2(this, "setMapElement", (element) => {
       if (element && element !== this.mapEl) {
         const map = this.constructMap(element);
-        this.setState({
-          map
-        }, this.attachClickHandler);
+        this.setState({ map }, this.attachClickHandler);
       }
       this.mapEl = element;
     });
@@ -309,761 +163,447 @@ class GoogleMap extends React__namespace.default.PureComponent {
   }
   componentDidUpdate(prevProps) {
     const map = this.state.map;
-    if (!map) {
+    if (!map)
       return;
-    }
-    const {
-      onClick,
-      location,
-      bounds
-    } = this.props;
-    if (prevProps.onClick !== onClick) {
-      this.attachClickHandler();
-    }
-    if (!latLngAreEqual(prevProps.location, location)) {
-      map.panTo(this.getCenter());
-    }
-    if (bounds && (!prevProps.bounds || !bounds.equals(prevProps.bounds))) {
-      map.fitBounds(bounds);
-    }
+    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() {
-    if (this.clickHandler) {
-      this.clickHandler.remove();
-    }
+    this.clickHandler && this.clickHandler.remove();
   }
   getCenter() {
-    const {
-      location,
-      api
-    } = this.props;
+    const { location, api } = this.props;
     return new api.LatLng(location.lat, location.lng);
   }
   constructMap(el) {
-    const {
-      defaultZoom,
-      api,
-      mapTypeControl,
-      controlSize,
-      bounds,
-      scrollWheel
-    } = this.props;
-    const map = new api.Map(el, {
+    const { defaultZoom, api, mapTypeControl, controlSize, bounds, scrollWheel } = this.props, map = new api.Map(el, {
       zoom: defaultZoom,
       center: this.getCenter(),
       scrollwheel: scrollWheel,
-      streetViewControl: false,
+      streetViewControl: !1,
       mapTypeControl,
       controlSize
     });
-    if (bounds) {
-      map.fitBounds(bounds);
-    }
-    return map;
+    return bounds && map.fitBounds(bounds), map;
   }
   render() {
-    const {
-      children
-    } = this.props;
-    const {
-      map
-    } = this.state;
-    return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/* @__PURE__ */jsxRuntime.jsx(MapContainer, {
-        ref: this.setMapElement
-      }), children && map ? children(map) : null]
-    });
+    const { children } = this.props, { map } = this.state;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(MapContainer, { ref: this.setMapElement }),
+      children && map ? children(map) : null
+    ] });
   }
 }
-__publicField$4(GoogleMap, "defaultProps", {
+__publicField$2(GoogleMap, "defaultProps", {
   defaultZoom: 8,
-  scrollWheel: true
+  scrollWheel: !0
 });
-var __defProp$5 = Object.defineProperty;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$5(obj, key, {
-  enumerable: true,
-  configurable: true,
-  writable: true,
-  value
-}) : obj[key] = value;
-var __publicField$3 = (obj, key, value) => {
-  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __defProp$3 = Object.defineProperty, __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __publicField$1 = (obj, key, value) => __defNormalProp$3(obj, typeof key != "symbol" ? key + "" : key, value);
 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 React__namespace.PureComponent {
+class Marker extends PureComponent {
   constructor() {
-    super(...arguments);
-    __publicField$3(this, "marker");
-    __publicField$3(this, "eventHandlers", {});
+    super(...arguments), __publicField$1(this, "marker"), __publicField$1(this, "eventHandlers", {});
   }
   componentDidMount() {
-    const {
-      position,
-      api,
-      map,
-      onMove,
-      zIndex,
-      opacity,
-      label,
-      markerRef,
-      color
-    } = this.props;
-    const {
-      Marker: GMarker
-    } = api;
+    const { position, api, map, onMove, zIndex, opacity, label, markerRef, color } = this.props, { Marker: GMarker } = api;
     let icon;
-    if (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: Boolean(onMove),
+    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
-    });
-    if (markerRef) {
-      markerRef.current = this.marker;
-    }
-    this.attachMoveHandler();
-    this.attachClickHandler();
+    }), markerRef && (markerRef.current = this.marker), this.attachMoveHandler(), this.attachClickHandler();
   }
   componentDidUpdate(prevProps) {
-    if (!this.marker) {
+    if (!this.marker)
       return;
-    }
-    const {
-      position,
-      onMove,
-      label,
-      zIndex,
-      opacity,
-      map
-    } = this.props;
-    if (prevProps.onMove !== onMove) {
-      this.attachMoveHandler();
-    }
-    if (!latLngAreEqual(prevProps.position, position)) {
-      this.marker.setPosition(position);
-    }
-    if (prevProps.label !== label) {
-      this.marker.setLabel(label || null);
-    }
-    if (prevProps.zIndex !== zIndex) {
-      this.marker.setZIndex(zIndex || null);
-    }
-    if (prevProps.opacity !== opacity) {
-      this.marker.setOpacity(opacity || null);
-    }
-    if (prevProps.map !== map) {
-      this.marker.setMap(map);
-    }
+    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() {
-    if (this.eventHandlers.move) {
-      this.eventHandlers.move.remove();
-    }
-    if (this.marker) {
-      this.marker.setMap(null);
-    }
+    this.eventHandlers.move && this.eventHandlers.move.remove(), this.marker && this.marker.setMap(null);
   }
   attachMoveHandler() {
-    const {
-      api,
-      onMove
-    } = this.props;
-    if (this.eventHandlers.move) {
-      this.eventHandlers.move.remove();
-    }
-    if (this.marker && onMove) {
-      this.eventHandlers.move = api.event.addListener(this.marker, "dragend", onMove);
-    }
+    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;
-    if (this.eventHandlers.click) {
-      this.eventHandlers.click.remove();
-    }
-    if (this.marker && onClick) {
-      this.eventHandlers.click = api.event.addListener(this.marker, "click", onClick);
-    }
+    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));
   }
   // eslint-disable-next-line class-methods-use-this
   render() {
     return null;
   }
 }
-var __defProp$4 = Object.defineProperty;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$4(obj, key, {
-  enumerable: true,
-  configurable: true,
-  writable: true,
-  value
-}) : obj[key] = value;
-var __publicField$2 = (obj, key, value) => {
-  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-const fallbackLatLng = {
-  lat: 40.7058254,
-  lng: -74.1180863
+var __defProp$2 = Object.defineProperty, __getOwnPropSymbols$1 = Object.getOwnPropertySymbols, __hasOwnProp$1 = Object.prototype.hasOwnProperty, __propIsEnum$1 = Object.prototype.propertyIsEnumerable, __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    __hasOwnProp$1.call(b, prop) && __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b))
+      __propIsEnum$1.call(b, prop) && __defNormalProp$2(a, prop, b[prop]);
+  return a;
 };
-class GeopointSelect extends React__namespace.default.PureComponent {
-  constructor() {
-    super(...arguments);
-    __publicField$2(this, "mapRef", React__namespace.default.createRef());
-    __publicField$2(this, "handlePlaceChanged", place => {
+const fallbackLatLng = { lat: 40.7058254, lng: -74.1180863 }, GeopointSelect = ({
+  api,
+  value,
+  onChange,
+  defaultLocation = { lng: 10.74609, lat: 59.91273 },
+  defaultZoom = 8
+}) => {
+  const getCenter2 = useCallback(() => __spreadValues$1(__spreadValues$1(__spreadValues$1({}, fallbackLatLng), defaultLocation), value), [value, defaultLocation]), setValue = useCallback(
+    (geoPoint) => {
+      onChange && onChange(geoPoint);
+    },
+    [onChange]
+  ), handlePlaceChanged = useCallback(
+    (place) => {
       var _a;
-      if (!((_a = place.geometry) == null ? void 0 : _a.location)) {
-        return;
+      (_a = place.geometry) != null && _a.location && setValue(place.geometry.location);
+    },
+    [setValue]
+  ), handleMarkerDragEnd = useCallback(
+    (event) => {
+      event.latLng && setValue(event.latLng);
+    },
+    [setValue]
+  ), handleMapClick = useCallback(
+    (event) => {
+      event.latLng && setValue(event.latLng);
+    },
+    [setValue]
+  );
+  return /* @__PURE__ */ jsx(GoogleMap, { api, location: getCenter2(), onClick: handleMapClick, defaultZoom, children: (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
       }
-      this.setValue(place.geometry.location);
-    });
-    __publicField$2(this, "handleMarkerDragEnd", event => {
-      if (event.latLng) this.setValue(event.latLng);
-    });
-    __publicField$2(this, "handleMapClick", event => {
-      if (event.latLng) this.setValue(event.latLng);
-    });
-  }
-  getCenter() {
-    const {
-      value = {},
-      defaultLocation = {}
-    } = this.props;
-    const point = {
-      ...fallbackLatLng,
-      ...defaultLocation,
-      ...value
-    };
-    return point;
-  }
-  setValue(geoPoint) {
-    if (this.props.onChange) {
-      this.props.onChange(geoPoint);
-    }
-  }
-  render() {
-    const {
-      api,
-      defaultZoom,
-      value,
-      onChange
-    } = this.props;
-    return /* @__PURE__ */jsxRuntime.jsx(GoogleMap, {
-      api,
-      location: this.getCenter(),
-      onClick: this.handleMapClick,
-      defaultZoom,
-      children: map => /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/* @__PURE__ */jsxRuntime.jsx(SearchInput, {
-          api,
-          map,
-          onChange: this.handlePlaceChanged
-        }), value && /* @__PURE__ */jsxRuntime.jsx(Marker, {
-          api,
-          map,
-          position: value,
-          onMove: onChange ? this.handleMarkerDragEnd : void 0
-        })]
-      })
-    });
-  }
-}
-__publicField$2(GeopointSelect, "defaultProps", {
-  defaultZoom: 8,
-  defaultLocation: {
-    lng: 10.74609,
-    lat: 59.91273
-  }
-});
-var __freeze$1 = Object.freeze;
-var __defProp$3 = Object.defineProperty;
-var __template$1 = (cooked, raw) => __freeze$1(__defProp$3(cooked, "raw", {
-  value: __freeze$1(raw || cooked.slice())
-}));
-var _a$1, _b;
-const PreviewImage = styledComponents.styled.img(_a$1 || (_a$1 = __template$1(["\n  width: 100%;\n  height: auto;\n  vertical-align: top;\n"])));
-const DialogInnerContainer = styledComponents.styled.div(_b || (_b = __template$1(["\n  height: 40rem;\n  width: 50rem;\n"])));
-let config;
-function getGeoConfig() {
-  return config;
-}
-function setGeoConfig(newConfig) {
-  config = newConfig;
-}
-var __defProp$2 = Object.defineProperty;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$2(obj, key, {
-  enumerable: true,
-  configurable: true,
-  writable: true,
-  value
-}) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => {
-  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-const getStaticImageUrl = (value, apiKey) => {
-  const loc = "".concat(value.lat, ",").concat(value.lng);
-  const params = {
+    )
+  ] }) });
+}, EMPTY_PATH = [], getStaticImageUrl = (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,
+    zoom: "13",
+    scale: "2",
     size: "640x300"
-  };
-  const qs = Object.keys(params).reduce((res, param) => {
-    return res.concat("".concat(param, "=").concat(encodeURIComponent(params[param])));
-  }, []);
-  return "https://maps.googleapis.com/maps/api/staticmap?".concat(qs.join("&"));
+  }).toString()}`;
 };
-class GeopointInput extends React__namespace.default.PureComponent {
-  constructor(props) {
-    super(props);
-    __publicField$1(this, "_geopointInputId", lodash.uniqueId("GeopointInput"));
-    __publicField$1(this, "editButton");
-    __publicField$1(this, "setEditButton", el => {
-      this.editButton = el;
-    });
-    __publicField$1(this, "handleToggleModal", () => {
-      this.setState(prevState => ({
-        modalOpen: !prevState.modalOpen
-      }));
-    });
-    __publicField$1(this, "handleCloseModal", () => {
-      this.setState({
-        modalOpen: false
-      });
-    });
-    __publicField$1(this, "handleChange", latLng => {
-      const {
-        schemaType,
-        onChange
-      } = this.props;
-      onChange([sanity.setIfMissing({
-        _type: schemaType.name
-      }), sanity.set(latLng.lat(), ["lat"]), sanity.set(latLng.lng(), ["lng"])]);
-    });
-    __publicField$1(this, "handleClear", () => {
-      const {
-        onChange
-      } = this.props;
-      onChange(sanity.unset());
-    });
-    this.state = {
-      modalOpen: false
-    };
-  }
-  focus() {
-    if (this.editButton) {
-      this.editButton.focus();
-    }
-  }
-  render() {
-    const {
-      value,
-      readOnly,
-      geoConfig: config,
-      path,
-      changed,
-      focused
-    } = this.props;
-    const {
-      modalOpen
-    } = this.state;
-    if (!config || !config.apiKey) {
-      return /* @__PURE__ */jsxRuntime.jsxs("div", {
-        children: [/* @__PURE__ */jsxRuntime.jsxs("p", {
-          children: ["The ", /* @__PURE__ */jsxRuntime.jsx("a", {
-            href: "https://sanity.io/docs/schema-types/geopoint-type",
-            children: "Geopoint type"
-          }), " needs a Google Maps API key with access to:"]
-        }), /* @__PURE__ */jsxRuntime.jsxs("ul", {
-          children: [/* @__PURE__ */jsxRuntime.jsx("li", {
-            children: "Google Maps JavaScript API"
-          }), /* @__PURE__ */jsxRuntime.jsx("li", {
-            children: "Google Places API Web Service"
-          }), /* @__PURE__ */jsxRuntime.jsx("li", {
-            children: "Google Static Maps API"
-          })]
-        }), /* @__PURE__ */jsxRuntime.jsx("p", {
-          children: "Please enter the API key with access to these services in your googleMapsInput plugin config."
-        })]
-      });
-    }
-    return /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
-      space: 3,
-      children: [value && /* @__PURE__ */jsxRuntime.jsx(sanity.ChangeIndicator, {
-        path,
-        isChanged: changed,
-        hasFocus: !!focused,
-        children: /* @__PURE__ */jsxRuntime.jsx(PreviewImage, {
-          src: getStaticImageUrl(value, config.apiKey),
-          alt: "Map location"
-        })
-      }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-        children: /* @__PURE__ */jsxRuntime.jsxs(ui.Grid, {
-          columns: value ? 2 : 1,
-          gap: 3,
-          children: [/* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-            mode: "ghost",
-            icon: value && icons.EditIcon,
-            padding: 3,
-            ref: this.setEditButton,
-            text: value ? "Edit" : "Set location",
-            onClick: this.handleToggleModal,
-            disabled: readOnly
-          }), value && /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-            tone: "critical",
-            icon: icons.TrashIcon,
-            padding: 3,
-            mode: "ghost",
-            text: "Remove",
-            onClick: this.handleClear,
-            disabled: readOnly
-          })]
-        })
-      }), modalOpen && /* @__PURE__ */jsxRuntime.jsx(ui.Dialog, {
-        id: "".concat(this._geopointInputId, "_dialog"),
-        onClose: this.handleCloseModal,
+function GeopointInput(props) {
+  const {
+    changed,
+    elementProps,
+    focused,
+    geoConfig: config2,
+    onChange,
+    onPathFocus,
+    path,
+    readOnly,
+    schemaType,
+    value
+  } = props, {
+    id,
+    ref: inputRef,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    "aria-describedby": ariaDescribedBy
+  } = elementProps, schemaTypeName = schemaType.name, dialogId = useId(), dialogRef = useRef(null), handleFocusButton = useCallback(() => {
+    var _a;
+    return (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.focus();
+  }, [inputRef]), [modalOpen, setModalOpen] = useState(!1), handleCloseModal = useCallback(() => {
+    dialogRef.current && dialogRef.current.blur(), setModalOpen(!1), handleFocusButton();
+  }, [setModalOpen, handleFocusButton]), handleToggleModal = useCallback(
+    () => setModalOpen((currentState) => !currentState),
+    [setModalOpen]
+  ), handleChange = useCallback(
+    (latLng) => {
+      onChange([
+        setIfMissing({ _type: schemaTypeName }),
+        set(latLng.lat(), ["lat"]),
+        set(latLng.lng(), ["lng"])
+      ]);
+    },
+    [schemaTypeName, onChange]
+  ), handleClear = useCallback(() => {
+    onChange(unset());
+  }, [onChange]);
+  return useEffect(() => {
+    modalOpen && onPathFocus(EMPTY_PATH);
+  }, [modalOpen, onPathFocus]), !config2 || !config2.apiKey ? /* @__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." })
+  ] }) : /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+    value && /* @__PURE__ */ jsx(ChangeIndicator, { path, isChanged: changed, hasFocus: !!focused, children: /* @__PURE__ */ jsx(
+      PreviewImage,
+      {
+        src: getStaticImageUrl(value, config2.apiKey),
+        alt: "Map location",
+        onClick: handleFocusButton,
+        onDoubleClick: handleToggleModal
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Grid, { columns: value ? 2 : 1, gap: 3, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-describedby": ariaDescribedBy,
+          disabled: readOnly,
+          icon: value && EditIcon,
+          id,
+          mode: "ghost",
+          onClick: handleToggleModal,
+          onFocus: handleFocus,
+          padding: 3,
+          ref: inputRef,
+          text: value ? "Edit" : "Set location"
+        }
+      ),
+      value && /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: readOnly,
+          icon: TrashIcon,
+          mode: "ghost",
+          onClick: handleClear,
+          padding: 3,
+          text: "Remove",
+          tone: "critical"
+        }
+      )
+    ] }) }),
+    modalOpen && /* @__PURE__ */ jsx(
+      Dialog,
+      {
         header: "Place the marker on the map",
+        id: `${dialogId}_dialog`,
+        onBlur: handleBlur,
+        onClose: handleCloseModal,
+        ref: dialogRef,
         width: 1,
-        children: /* @__PURE__ */jsxRuntime.jsx(DialogInnerContainer, {
-          children: /* @__PURE__ */jsxRuntime.jsx(GoogleMapsLoadProxy, {
-            config: getGeoConfig(),
-            children: api => /* @__PURE__ */jsxRuntime.jsx(GeopointSelect, {
-              api,
-              value: value || void 0,
-              onChange: readOnly ? void 0 : this.handleChange,
-              defaultLocation: config.defaultLocation,
-              defaultZoom: config.defaultZoom
-            })
-          })
-        })
-      })]
-    });
-  }
+        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
+          }
+        ) }) })
+      }
+    )
+  ] });
 }
-var __defProp$1 = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, {
-  enumerable: true,
-  configurable: true,
-  writable: true,
-  value
-}) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-class Arrow extends React__namespace.PureComponent {
+var __defProp$1 = Object.defineProperty, __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __publicField = (obj, key, value) => __defNormalProp$1(obj, typeof key != "symbol" ? key + "" : key, value);
+class Arrow extends PureComponent {
   constructor() {
-    super(...arguments);
-    __publicField(this, "line");
-    __publicField(this, "eventHandlers", {});
+    super(...arguments), __publicField(this, "line"), __publicField(this, "eventHandlers", {});
   }
   componentDidMount() {
-    const {
-      from,
-      to,
-      api,
-      map,
-      zIndex,
-      onClick,
-      color,
-      arrowRef
-    } = this.props;
-    const lineSymbol = {
+    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%"
-      }],
+      icons: [{ icon: lineSymbol, offset: "50%" }],
       strokeOpacity: 0.55,
       strokeColor: color ? color.text : "black"
-    });
-    if (onClick) {
-      this.eventHandlers.click = api.event.addListener(this.line, "click", onClick);
-    }
-    if (arrowRef) {
-      arrowRef.current = this.line;
-    }
+    }), onClick && (this.eventHandlers.click = api.event.addListener(this.line, "click", onClick)), arrowRef && (arrowRef.current = this.line);
   }
   componentDidUpdate(prevProps) {
-    if (!this.line) {
+    if (!this.line)
       return;
-    }
-    const {
-      from,
-      to,
-      map
-    } = this.props;
-    if (!latLngAreEqual(prevProps.from, from) || !latLngAreEqual(prevProps.to, to)) {
-      this.line.setPath([from, to]);
-    }
-    if (prevProps.map !== map) {
-      this.line.setMap(map);
-    }
+    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() {
-    if (this.line) {
-      this.line.setMap(null);
-    }
-    if (this.eventHandlers.click) {
-      this.eventHandlers.click.remove();
-    }
+    this.line && this.line.setMap(null), this.eventHandlers.click && this.eventHandlers.click.remove();
   }
   // eslint-disable-next-line class-methods-use-this
   render() {
     return null;
   }
 }
-function GeopointMove(_ref) {
-  let {
-    diff,
-    api,
-    map,
-    label
-  } = _ref;
-  const {
-    fromValue: from,
-    toValue: to
-  } = diff;
-  const annotation = diff.isChanged ? diff.annotation : void 0;
-  const userColor = sanity.useUserColor(annotation ? annotation.author : null) || void 0;
-  const fromRef = React__namespace.useRef();
-  const toRef = React__namespace.useRef();
-  return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [from && /* @__PURE__ */jsxRuntime.jsx(Marker, {
-      api,
-      map,
-      position: from,
-      zIndex: 0,
-      opacity: 0.55,
-      markerRef: fromRef,
-      color: userColor
-    }), from && to && /* @__PURE__ */jsxRuntime.jsx(Arrow, {
-      api,
-      map,
-      from,
-      to,
-      zIndex: 1,
-      color: userColor
-    }), to && /* @__PURE__ */jsxRuntime.jsx(Marker, {
-      api,
-      map,
-      position: to,
-      zIndex: 2,
-      markerRef: toRef,
-      label,
-      color: userColor
-    })]
-  });
-}
-var __freeze = Object.freeze;
-var __defProp = Object.defineProperty;
-var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", {
-  value: __freeze(raw || cooked.slice())
-}));
-var _a;
-const RootContainer = styledComponents.styled.div(_a || (_a = __template(["\n  position: relative;\n  min-height: 200px;\n\n  &:empty {\n    background-color: var(--card-skeleton-color-from);\n    display: table;\n    width: 100%;\n  }\n\n  &:empty:after {\n    content: 'Missing/invalid data';\n    display: table-cell;\n    vertical-align: middle;\n    text-align: center;\n    position: relative;\n  }\n"])));
-const GeopointArrayDiff = _ref2 => {
-  let {
-    diff,
-    schemaType
-  } = _ref2;
-  return /* @__PURE__ */jsxRuntime.jsx(RootContainer, {
-    children: /* @__PURE__ */jsxRuntime.jsx(GoogleMapsLoadProxy, {
-      config: getGeoConfig(),
-      children: api => /* @__PURE__ */jsxRuntime.jsx(GeopointDiff$1, {
+function GeopointMove({ diff, api, map, label }) {
+  const { fromValue: from, toValue: to } = diff, annotation = diff.isChanged ? diff.annotation : void 0, userColor = useUserColor(annotation ? annotation.author : null) || void 0, fromRef = useRef(), toRef = useRef();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    from && /* @__PURE__ */ jsx(
+      Marker,
+      {
         api,
-        diff,
-        schemaType
-      })
-    })
-  });
-};
-function GeopointDiff$1(_ref3) {
-  let {
-    api,
-    diff
-  } = _ref3;
-  const fromValue = (diff.fromValue || []).filter(hasCoordinates);
-  const toValue = (diff.toValue || []).filter(hasCoordinates);
-  if (fromValue.length === 0 && toValue.length === 0) {
-    return null;
+        map,
+        position: from,
+        zIndex: 0,
+        opacity: 0.55,
+        markerRef: fromRef,
+        color: userColor
+      }
+    ),
+    from && to && /* @__PURE__ */ jsx(Arrow, { api, map, from, to, zIndex: 1, color: userColor }),
+    to && /* @__PURE__ */ jsx(
+      Marker,
+      {
+        api,
+        map,
+        position: to,
+        zIndex: 2,
+        markerRef: toRef,
+        label,
+        color: userColor
+      }
+    )
+  ] });
+}
+const RootContainer = styled.div`
+  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;
+  }
+`, GeopointArrayDiff = ({
+  diff,
+  schemaType
+}) => /* @__PURE__ */ jsx(RootContainer, { children: /* @__PURE__ */ jsx(GoogleMapsLoadProxy, { config: getGeoConfig(), children: (api) => /* @__PURE__ */ jsx(GeopointDiff$1, { api, diff, schemaType }) }) });
+function GeopointDiff$1({ api, diff }) {
+  const fromValue = (diff.fromValue || []).filter(hasCoordinates), toValue = (diff.toValue || []).filter(hasCoordinates);
+  if (fromValue.length === 0 && toValue.length === 0)
+    return null;
   const bounds = getBounds$1(fromValue, toValue, api);
-  return /* @__PURE__ */jsxRuntime.jsx(GoogleMap, {
-    api,
-    location: bounds.getCenter().toJSON(),
-    mapTypeControl: false,
-    controlSize: 20,
-    bounds,
-    children: map => /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: diff.items.map(_ref4 => {
-        let {
-          toIndex,
-          diff: pointDiff
-        } = _ref4;
-        if (!isChangeDiff(pointDiff)) {
-          return null;
-        }
-        return /* @__PURE__ */jsxRuntime.jsx(GeopointMove, {
+  return /* @__PURE__ */ jsx(
+    GoogleMap,
+    {
+      api,
+      location: bounds.getCenter().toJSON(),
+      mapTypeControl: !1,
+      controlSize: 20,
+      bounds,
+      children: (map) => /* @__PURE__ */ jsx(Fragment, { children: diff.items.map(({ toIndex, diff: pointDiff }) => isChangeDiff(pointDiff) ? /* @__PURE__ */ jsx(
+        GeopointMove,
+        {
           api,
           map,
           diff: pointDiff,
-          label: "".concat(toIndex)
-        }, toIndex);
-      })
-    })
-  });
+          label: `${toIndex}`
+        },
+        toIndex
+      ) : null) })
+    }
+  );
 }
 function isChangeDiff(diff) {
   return diff.action !== "unchanged" && diff.type === "object";
 }
 function hasCoordinates(point) {
-  return typeof point.lat === "number" && typeof point.lng === "number";
+  return typeof point.lat == "number" && typeof point.lng == "number";
 }
 function getBounds$1(fromValue, toValue, api) {
   const bounds = new api.LatLngBounds();
-  const points = [...(fromValue || []), ...(toValue || [])];
-  points.forEach(point => bounds.extend(point));
-  return bounds;
+  return [...fromValue || [], ...toValue || []].forEach((point) => bounds.extend(point)), bounds;
 }
-const GeopointFieldDiff = _ref5 => {
-  let {
-    diff,
-    schemaType
-  } = _ref5;
-  return /* @__PURE__ */jsxRuntime.jsx(RootContainer, {
-    children: /* @__PURE__ */jsxRuntime.jsx(GoogleMapsLoadProxy, {
-      config: getGeoConfig(),
-      children: api => /* @__PURE__ */jsxRuntime.jsx(GeopointDiff, {
-        api,
-        diff,
-        schemaType
-      })
-    })
-  });
-};
-function GeopointDiff(_ref6) {
-  let {
-    api,
-    diff
-  } = _ref6;
-  const {
-    fromValue,
-    toValue
-  } = diff;
-  const annotation = sanity.getAnnotationAtPath(diff, ["lat"]) || sanity.getAnnotationAtPath(diff, ["lng"]) || sanity.getAnnotationAtPath(diff, []);
-  const center = getCenter(diff, api);
-  const bounds = fromValue && toValue ? getBounds(fromValue, toValue, api) : void 0;
-  return /* @__PURE__ */jsxRuntime.jsx(sanity.DiffTooltip, {
-    annotations: annotation ? [annotation] : [],
-    description: getAction(diff),
-    children: /* @__PURE__ */jsxRuntime.jsx("div", {
-      children: /* @__PURE__ */jsxRuntime.jsx(GoogleMap, {
-        api,
-        location: center,
-        mapTypeControl: false,
-        controlSize: 20,
-        bounds,
-        scrollWheel: false,
-        children: map => /* @__PURE__ */jsxRuntime.jsx(GeopointMove, {
-          api,
-          map,
-          diff
-        })
-      })
-    })
-  });
+const GeopointFieldDiff = ({
+  diff,
+  schemaType
+}) => /* @__PURE__ */ jsx(RootContainer, { children: /* @__PURE__ */ jsx(GoogleMapsLoadProxy, { config: getGeoConfig(), children: (api) => /* @__PURE__ */ jsx(GeopointDiff, { api, diff, schemaType }) }) });
+function GeopointDiff({ api, diff }) {
+  const { fromValue, toValue } = diff, annotation = getAnnotationAtPath(diff, ["lat"]) || getAnnotationAtPath(diff, ["lng"]) || getAnnotationAtPath(diff, []), center = getCenter(diff, api), bounds = fromValue && toValue ? getBounds(fromValue, toValue, api) : void 0;
+  return /* @__PURE__ */ jsx(DiffTooltip, { annotations: annotation ? [annotation] : [], description: getAction(diff), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    GoogleMap,
+    {
+      api,
+      location: center,
+      mapTypeControl: !1,
+      controlSize: 20,
+      bounds,
+      scrollWheel: !1,
+      children: (map) => /* @__PURE__ */ jsx(GeopointMove, { api, map, diff })
+    }
+  ) }) });
 }
 function getBounds(fromValue, toValue, api) {
   return new api.LatLngBounds().extend(fromValue).extend(toValue);
 }
 function getCenter(diff, api) {
-  const {
-    fromValue,
-    toValue
-  } = diff;
-  if (fromValue && toValue) {
+  const { fromValue, toValue } = diff;
+  if (fromValue && toValue)
     return getBounds(fromValue, toValue, api).getCenter().toJSON();
-  }
-  if (fromValue) {
+  if (fromValue)
     return fromValue;
-  }
-  if (toValue) {
+  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) {
-    return "Moved";
-  } else if (fromValue) {
-    return "Removed";
-  } else if (toValue) {
-    return "Added";
-  }
-  return "Unchanged";
+  const { fromValue, toValue } = diff;
+  return fromValue && toValue ? "Moved" : fromValue ? "Removed" : toValue ? "Added" : "Unchanged";
 }
-const googleMapsInput = sanity.definePlugin(config => {
-  setGeoConfig(config);
-  return {
-    name: "google-maps-input",
-    form: {
-      components: {
-        input(props) {
-          if (isGeopoint(props.schemaType)) {
-            const castedProps = props;
-            return /* @__PURE__ */jsxRuntime.jsx(GeopointInput, {
-              ...castedProps,
-              geoConfig: config
-            });
-          }
-          return props.renderDefault(props);
-        }
+var __defProp = Object.defineProperty, __defProps = Object.defineProperties, __getOwnPropDescs = Object.getOwnPropertyDescriptors, __getOwnPropSymbols = Object.getOwnPropertySymbols, __hasOwnProp = Object.prototype.hasOwnProperty, __propIsEnum = Object.prototype.propertyIsEnumerable, __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    __hasOwnProp.call(b, prop) && __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b))
+      __propIsEnum.call(b, prop) && __defNormalProp(a, prop, b[prop]);
+  return a;
+}, __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const googleMapsInput = definePlugin((config2) => (setGeoConfig(config2), {
+  name: "google-maps-input",
+  form: {
+    components: {
+      input(props) {
+        return isGeopoint(props.schemaType) ? /* @__PURE__ */ jsx(GeopointInput, __spreadProps(__spreadValues({}, props), { geoConfig: config2 })) : props.renderDefault(props);
       }
     }
-  };
-});
+  }
+}));
 function isGeopoint(schemaType) {
   return isType("geopoint", schemaType);
 }
 function isType(name, schema) {
-  if ((schema == null ? void 0 : schema.name) === name) {
-    return true;
-  } else if (!(schema == null ? void 0 : schema.name)) {
-    return false;
-  }
-  return isType(name, schema == null ? void 0 : schema.type);
+  return (schema == null ? void 0 : schema.name) === name ? !0 : schema != null && schema.name ? isType(name, schema == null ? void 0 : schema.type) : !1;
 }
-exports.GeopointArrayDiff = GeopointArrayDiff;
-exports.GeopointFieldDiff = GeopointFieldDiff;
-exports.GeopointInput = GeopointInput;
-exports.googleMapsInput = googleMapsInput;
+export {
+  GeopointArrayDiff,
+  GeopointFieldDiff,
+  GeopointInput,
+  googleMapsInput
+};
 //# sourceMappingURL=index.js.map