@sanity/google-maps-input 4.0.0 → 4.1.0

package/README.md

@@ -50,9 +50,9 @@ export default defineConfig({
 
 Ensure that the key has access to:
 
-- Google Maps JavaScript API
-- Google Places API Web Service
-- Google Static Maps API
+- Google Maps JavaScript API (for the interactive map)
+- Google Places API Web Service (for the search feature)
+- Google Static Maps API (for previewing a location)
 
 And that the key allows web-access from the Studio URL(s) you are using the plugin in.
 
@@ -70,6 +70,8 @@ MIT-licensed. See LICENSE.
 
 ## Develop & test
 
+Add a Google Maps API key to `.env.local` (see `.env.example` for example format).
+
 This plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)
 with default configuration for build & watch scripts.
 

package/dist/index.cjs

@@ -0,0 +1,604 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var jsxRuntime = require("react/jsx-runtime"), react = require("react"), ui = require("@sanity/ui"), icons = require("@sanity/icons"), sanity = require("sanity"), styledComponents = require("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] = () => {
+      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=${config2.apiKey}&libraries=places&callback=${callbackName}&language=${config2.locale}`, document.getElementsByTagName("head")[0].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 error ? error.message : typeof event == "string" ? event : isErrorEvent(event) ? event.message : "Failed to load Google Maps API";
+}
+function isErrorEvent(event) {
+  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(AuthError2, {}) : /* @__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) }) })
+    ] }) })
+  ] });
+}
+function AuthError2() {
+  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." })
+  ] });
+}
+const browserLocale = typeof window < "u" && window.navigator.language || "en";
+function useLoadGoogleMapsApi(config2) {
+  const locale = config2.defaultLocale || browserLocale || "en-US", [state, setState] = react.useState({ type: "loading" });
+  return react.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" });
+    case "loading":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading Google Maps API" });
+    case "loaded":
+      return props.children(loadState.api);
+    default:
+      return null;
+  }
+}
+let config;
+function getGeoConfig() {
+  return config;
+}
+function setGeoConfig(newConfig) {
+  config = newConfig;
+}
+const PreviewImage = styledComponents.styled.img`
+  width: 100%;
+  height: auto;
+  vertical-align: top;
+`, DialogInnerContainer = styledComponents.styled.div`
+  height: 40rem;
+`, WrapperContainer = styledComponents.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 react.PureComponent {
+  constructor() {
+    super(...arguments), __publicField$3(this, "searchInputRef", react.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)
+      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__ */ jsxRuntime.jsx(WrapperContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      ui.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, 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;
+}
+const MapContainer = styledComponents.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 react.PureComponent {
+  constructor() {
+    super(...arguments), __publicField$2(this, "state", { map: void 0 }), __publicField$2(this, "clickHandler"), __publicField$2(this, "mapRef", react.createRef()), __publicField$2(this, "mapEl", null), __publicField$2(this, "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));
+    }), __publicField$2(this, "setMapElement", (element) => {
+      if (element && element !== this.mapEl) {
+        const map = this.constructMap(element);
+        this.setState({ map }, this.attachClickHandler);
+      }
+      this.mapEl = element;
+    });
+  }
+  componentDidMount() {
+    this.attachClickHandler();
+  }
+  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) {
+    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
+    });
+    return bounds && map.fitBounds(bounds), map;
+  }
+  render() {
+    const { children } = this.props, { map } = this.state;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(MapContainer, { ref: this.setMapElement }),
+      children && map ? children(map) : null
+    ] });
+  }
+}
+__publicField$2(GoogleMap, "defaultProps", {
+  defaultZoom: 8,
+  scrollWheel: !0
+});
+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.PureComponent {
+  constructor() {
+    super(...arguments), __publicField$1(this, "marker"), __publicField$1(this, "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));
+  }
+  // eslint-disable-next-line class-methods-use-this
+  render() {
+    return null;
+  }
+}
+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;
+};
+const fallbackLatLng = { lat: 40.7058254, lng: -74.1180863 }, GeopointSelect = ({
+  api,
+  value,
+  onChange,
+  defaultLocation = { lng: 10.74609, lat: 59.91273 },
+  defaultZoom = 8
+}) => {
+  const getCenter2 = react.useCallback(() => __spreadValues$1(__spreadValues$1(__spreadValues$1({}, fallbackLatLng), defaultLocation), value), [value, defaultLocation]), setValue = react.useCallback(
+    (geoPoint) => {
+      onChange && onChange(geoPoint);
+    },
+    [onChange]
+  ), handlePlaceChanged = react.useCallback(
+    (place) => {
+      var _a;
+      (_a = place.geometry) != null && _a.location && setValue(place.geometry.location);
+    },
+    [setValue]
+  ), handleMarkerDragEnd = react.useCallback(
+    (event) => {
+      event.latLng && setValue(event.latLng);
+    },
+    [setValue]
+  ), handleMapClick = react.useCallback(
+    (event) => {
+      event.latLng && setValue(event.latLng);
+    },
+    [setValue]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(GoogleMap, { api, location: getCenter2(), onClick: handleMapClick, defaultZoom, children: (map) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { api, map, onChange: handlePlaceChanged }),
+    value && /* @__PURE__ */ jsxRuntime.jsx(
+      Marker,
+      {
+        api,
+        map,
+        position: value,
+        onMove: onChange ? handleMarkerDragEnd : void 0
+      }
+    )
+  ] }) });
+}, 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",
+    size: "640x300"
+  }).toString()}`;
+};
+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 = react.useId(), dialogRef = react.useRef(null), handleFocusButton = react.useCallback(() => {
+    var _a;
+    return (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.focus();
+  }, [inputRef]), [modalOpen, setModalOpen] = react.useState(!1), handleCloseModal = react.useCallback(() => {
+    dialogRef.current && dialogRef.current.blur(), setModalOpen(!1), handleFocusButton();
+  }, [setModalOpen, handleFocusButton]), handleToggleModal = react.useCallback(
+    () => setModalOpen((currentState) => !currentState),
+    [setModalOpen]
+  ), handleChange = react.useCallback(
+    (latLng) => {
+      onChange([
+        sanity.setIfMissing({ _type: schemaTypeName }),
+        sanity.set(latLng.lat(), ["lat"]),
+        sanity.set(latLng.lng(), ["lng"])
+      ]);
+    },
+    [schemaTypeName, onChange]
+  ), handleClear = react.useCallback(() => {
+    onChange(sanity.unset());
+  }, [onChange]);
+  return react.useEffect(() => {
+    modalOpen && onPathFocus(EMPTY_PATH);
+  }, [modalOpen, onPathFocus]), !config2 || !config2.apiKey ? /* @__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." })
+  ] }) : /* @__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, config2.apiKey),
+        alt: "Map location",
+        onClick: handleFocusButton,
+        onDoubleClick: handleToggleModal
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { columns: value ? 2 : 1, gap: 3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          "aria-describedby": ariaDescribedBy,
+          disabled: readOnly,
+          icon: value && icons.EditIcon,
+          id,
+          mode: "ghost",
+          onClick: handleToggleModal,
+          onFocus: handleFocus,
+          padding: 3,
+          ref: inputRef,
+          text: value ? "Edit" : "Set location"
+        }
+      ),
+      value && /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          disabled: readOnly,
+          icon: icons.TrashIcon,
+          mode: "ghost",
+          onClick: handleClear,
+          padding: 3,
+          text: "Remove",
+          tone: "critical"
+        }
+      )
+    ] }) }),
+    modalOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      ui.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 : handleChange,
+            defaultLocation: config2.defaultLocation,
+            defaultZoom: config2.defaultZoom
+          }
+        ) }) })
+      }
+    )
+  ] });
+}
+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 react.PureComponent {
+  constructor() {
+    super(...arguments), __publicField(this, "line"), __publicField(this, "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();
+  }
+  // eslint-disable-next-line class-methods-use-this
+  render() {
+    return null;
+  }
+}
+function GeopointMove({ diff, api, map, label }) {
+  const { fromValue: from, toValue: to } = diff, annotation = diff.isChanged ? diff.annotation : void 0, userColor = sanity.useUserColor(annotation ? annotation.author : null) || void 0, fromRef = react.useRef(), toRef = react.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
+      }
+    )
+  ] });
+}
+const RootContainer = styledComponents.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__ */ jsxRuntime.jsx(RootContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(GoogleMapsLoadProxy, { config: getGeoConfig(), children: (api) => /* @__PURE__ */ jsxRuntime.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: !1,
+      controlSize: 20,
+      bounds,
+      children: (map) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: diff.items.map(({ toIndex, diff: pointDiff }) => isChangeDiff(pointDiff) ? /* @__PURE__ */ jsxRuntime.jsx(
+        GeopointMove,
+        {
+          api,
+          map,
+          diff: pointDiff,
+          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";
+}
+function getBounds$1(fromValue, toValue, api) {
+  const bounds = new api.LatLngBounds();
+  return [...fromValue || [], ...toValue || []].forEach((point) => bounds.extend(point)), bounds;
+}
+const GeopointFieldDiff = ({
+  diff,
+  schemaType
+}) => /* @__PURE__ */ jsxRuntime.jsx(RootContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(GoogleMapsLoadProxy, { config: getGeoConfig(), children: (api) => /* @__PURE__ */ jsxRuntime.jsx(GeopointDiff, { api, diff, schemaType }) }) });
+function GeopointDiff({ api, diff }) {
+  const { fromValue, toValue } = diff, annotation = sanity.getAnnotationAtPath(diff, ["lat"]) || sanity.getAnnotationAtPath(diff, ["lng"]) || sanity.getAnnotationAtPath(diff, []), center = getCenter(diff, api), 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: !1,
+      controlSize: 20,
+      bounds,
+      scrollWheel: !1,
+      children: (map) => /* @__PURE__ */ jsxRuntime.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)
+    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;
+  return fromValue && toValue ? "Moved" : fromValue ? "Removed" : toValue ? "Added" : "Unchanged";
+}
+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 = sanity.definePlugin((config2) => (setGeoConfig(config2), {
+  name: "google-maps-input",
+  form: {
+    components: {
+      input(props) {
+        return isGeopoint(props.schemaType) ? /* @__PURE__ */ jsxRuntime.jsx(GeopointInput, __spreadProps(__spreadValues({}, props), { geoConfig: config2 })) : props.renderDefault(props);
+      }
+    }
+  }
+}));
+function isGeopoint(schemaType) {
+  return isType("geopoint", schemaType);
+}
+function isType(name, schema) {
+  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;
+//# sourceMappingURL=index.cjs.map