@sanity/google-maps-input 4.2.1 → 5.0.1

package/dist/index.cjs

@@ -1,1014 +0,0 @@
-"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) {
-  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 && props.error?.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, [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;
-`;
-class SearchInput extends react.PureComponent {
-  searchInputRef = react.createRef();
-  autoComplete;
-  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;
-`;
-class GoogleMap extends react.PureComponent {
-  static defaultProps = {
-    defaultZoom: 8,
-    scrollWheel: !0
-  };
-  state = { map: void 0 };
-  clickHandler;
-  mapRef = react.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) {
-    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;
-  }
-  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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.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 react.PureComponent {
-  marker;
-  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;
-  }
-}
-const fallbackLatLng$1 = { lat: 40.7058254, lng: -74.1180863 }, GeopointSelect = ({
-  api,
-  value,
-  onChange,
-  defaultLocation = { lng: 10.74609, lat: 59.91273 },
-  defaultZoom = 8
-}) => {
-  const getCenter2 = react.useCallback(() => ({ ...fallbackLatLng$1, ...defaultLocation, ...value }), [value, defaultLocation]), setValue = react.useCallback(
-    (geoPoint) => {
-      onChange && onChange(geoPoint);
-    },
-    [onChange]
-  ), handlePlaceChanged = react.useCallback(
-    (place) => {
-      place.geometry?.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$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()}`;
-};
-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(() => inputRef?.current?.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$1);
-  }, [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$1(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
-          }
-        ) }) })
-      }
-    )
-  ] });
-}
-const fallbackLatLng = { lat: 40.7058254, lng: -74.1180863 }, MarkerDragSync = ({ api, marker, circleRef, isMarkerDragging }) => (react.useEffect(() => {
-  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);
-  };
-}, [api, marker, circleRef, isMarkerDragging]), null), GeopointRadiusSelect = ({
-  api,
-  value,
-  onChange,
-  defaultLocation = { lng: 10.74609, lat: 59.91273 },
-  defaultRadiusZoom = 12,
-  defaultRadius = 1e3
-}) => {
-  const circleRef = react.useRef(null), markerRef = react.useRef(void 0), isMarkerDragging = react.useRef(!1), getCenter2 = react.useCallback(() => ({ ...fallbackLatLng, ...defaultLocation, ...value }), [value, defaultLocation]), setValue = react.useCallback(
-    (geoPoint, radius) => {
-      if (onChange) {
-        const roundedRadius = radius ? Math.round(radius) : void 0;
-        onChange(geoPoint, roundedRadius);
-      }
-    },
-    [onChange]
-  ), handlePlaceChanged = react.useCallback(
-    (place) => {
-      place.geometry?.location && setValue(place.geometry.location, value?.radius || defaultRadius);
-    },
-    [setValue, value?.radius, defaultRadius]
-  ), handleMarkerDragEnd = react.useCallback(
-    (event) => {
-      event.latLng && (circleRef.current && circleRef.current.setCenter(event.latLng), setValue(event.latLng, value?.radius || defaultRadius));
-    },
-    [setValue, value?.radius, defaultRadius]
-  ), handleMapClick = react.useCallback(
-    (event) => {
-      event.latLng && setValue(event.latLng, value?.radius || defaultRadius);
-    },
-    [setValue, value?.radius, defaultRadius]
-  );
-  return react.useEffect(() => {
-    value && circleRef.current && (circleRef.current.setCenter({ lat: value.lat, lng: value.lng }), circleRef.current.setRadius(value.radius));
-  }, [value]), /* @__PURE__ */ jsxRuntime.jsx(
-    GoogleMap,
-    {
-      api,
-      location: getCenter2(),
-      onClick: handleMapClick,
-      defaultZoom: defaultRadiusZoom,
-      children: (map) => (value && !circleRef.current && (circleRef.current = new api.Circle({
-        map,
-        center: { 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 = circleRef.current.getRadius();
-          center && setValue(center, Math.round(radius));
-        }
-      }), circleRef.current.addListener("dragend", () => {
-        if (circleRef.current) {
-          const center = circleRef.current.getCenter(), radius = circleRef.current.getRadius();
-          center && setValue(center, Math.round(radius));
-        }
-      })), /* @__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,
-            markerRef
-          }
-        ),
-        value && markerRef.current && /* @__PURE__ */ jsxRuntime.jsx(
-          MarkerDragSync,
-          {
-            api,
-            marker: markerRef.current,
-            circleRef,
-            isMarkerDragging
-          }
-        )
-      ] }))
-    }
-  );
-}, 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()}`;
-};
-function GeopointRadiusInput(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(() => inputRef?.current?.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, radius) => {
-      const currentRadius = radius ?? value?.radius ?? config2.defaultRadius ?? 1e3;
-      onChange([
-        sanity.setIfMissing({ _type: schemaTypeName }),
-        sanity.set(latLng.lat(), ["lat"]),
-        sanity.set(latLng.lng(), ["lng"]),
-        sanity.set(currentRadius, ["radius"])
-      ]);
-    },
-    [schemaTypeName, onChange, value?.radius, config2.defaultRadius]
-  ), handleRadiusChange = react.useCallback(
-    (event) => {
-      value && onChange([sanity.set(Math.round(Number(event.currentTarget.value)), ["radius"])]);
-    },
-    [onChange, value]
-  ), 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 Radius 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 with radius",
-        onClick: handleFocusButton,
-        onDoubleClick: handleToggleModal
-      }
-    ) }),
-    value && /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Radius (meters)" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.TextInput,
-        {
-          type: "number",
-          value: Math.round(value.radius || config2.defaultRadius || 1e3),
-          onChange: handleRadiusChange,
-          disabled: readOnly,
-          min: 1,
-          max: 5e4,
-          step: 1
-        }
-      )
-    ] }),
-    /* @__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 and radius"
-        }
-      ),
-      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 and set radius 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(
-          GeopointRadiusSelect,
-          {
-            api,
-            value: value || void 0,
-            onChange: readOnly ? void 0 : handleChange,
-            defaultLocation: config2.defaultLocation,
-            defaultRadiusZoom: config2.defaultRadiusZoom,
-            defaultRadius: config2.defaultRadius
-          }
-        ) }) })
-      }
-    )
-  ] });
-}
-class Arrow extends react.PureComponent {
-  line;
-  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(void 0), toRef = react.useRef(void 0);
-  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$2(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$2(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$1(diff, api), bounds = fromValue && toValue ? getBounds$1(fromValue, toValue, api) : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(sanity.DiffTooltip, { annotations: annotation ? [annotation] : [], description: getAction$1(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$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({ 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(void 0), toRef = react.useRef(void 0), fromCircleRef = react.useRef(void 0), toCircleRef = react.useRef(void 0);
-  return react.useEffect(() => {
-    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);
-    };
-  }, [api, map, from, to, userColor]), /* @__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 GeopointRadiusFieldDiff = ({
-  diff,
-  schemaType
-}) => /* @__PURE__ */ jsxRuntime.jsx(RootContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(GoogleMapsLoadProxy, { config: getGeoConfig(), children: (api) => /* @__PURE__ */ jsxRuntime.jsx(GeopointRadiusDiff, { api, diff, schemaType }) }) });
-function GeopointRadiusDiff({ api, diff }) {
-  const { fromValue, toValue } = diff, annotation = sanity.getAnnotationAtPath(diff, ["lat"]) || sanity.getAnnotationAtPath(diff, ["lng"]) || sanity.getAnnotationAtPath(diff, ["radius"]) || 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(GeopointRadiusMove, { api, map, diff })
-    }
-  ) }) });
-}
-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 = sanity.definePlugin((config2) => (setGeoConfig(config2), {
-  name: "google-maps-input",
-  schema: {
-    types: [
-      {
-        name: "geopointRadius",
-        title: "Geopoint with Radius",
-        type: "object",
-        fields: [
-          {
-            name: "lat",
-            title: "Latitude",
-            type: "number",
-            validation: (Rule) => Rule.required().min(-90).max(90)
-          },
-          {
-            name: "lng",
-            title: "Longitude",
-            type: "number",
-            validation: (Rule) => Rule.required().min(-180).max(180)
-          },
-          {
-            name: "alt",
-            title: "Altitude",
-            type: "number"
-          },
-          {
-            name: "radius",
-            title: "Radius (meters)",
-            type: "number",
-            validation: (Rule) => Rule.required().min(1).max(5e4)
-          }
-        ],
-        preview: {
-          select: {
-            lat: "lat",
-            lng: "lng",
-            radius: "radius"
-          },
-          prepare({ lat, lng, radius }) {
-            return {
-              title: `${lat.toFixed(6)}, ${lng.toFixed(6)}`,
-              subtitle: radius ? `Radius: ${radius}m` : "No radius set"
-            };
-          }
-        }
-      }
-    ]
-  },
-  form: {
-    components: {
-      input(props) {
-        return isGeopoint(props.schemaType) ? /* @__PURE__ */ jsxRuntime.jsx(GeopointInput, { ...props, geoConfig: config2 }) : isGeopointRadius(props.schemaType) ? /* @__PURE__ */ jsxRuntime.jsx(GeopointRadiusInput, { ...props, geoConfig: config2 }) : props.renderDefault(props);
-      }
-    }
-  }
-}));
-function isGeopoint(schemaType) {
-  return isType("geopoint", schemaType);
-}
-function isGeopointRadius(schemaType) {
-  return isType("geopointRadius", schemaType);
-}
-function isType(name, schema) {
-  return schema?.name === name ? !0 : schema?.name ? isType(name, schema?.type) : !1;
-}
-exports.GeopointArrayDiff = GeopointArrayDiff;
-exports.GeopointFieldDiff = GeopointFieldDiff;
-exports.GeopointInput = GeopointInput;
-exports.GeopointRadiusFieldDiff = GeopointRadiusFieldDiff;
-exports.GeopointRadiusInput = GeopointRadiusInput;
-exports.googleMapsInput = googleMapsInput;
-//# sourceMappingURL=index.cjs.map