@multiplatform.one/forms 7.7.6 → 7.8.0

package/dist/cjs/fields/Geolocation/index.cjs

@@ -23,7 +23,13 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var Geolocation_exports = {};
 __export(Geolocation_exports, {
   Geolocation: () => Geolocation,
-  preflightGeolocation: () => preflightGeolocation
+  clampLat: () => import_geocoder2.clampLat,
+  clampLng: () => import_geocoder2.clampLng,
+  formatCoordPair: () => import_geocoder2.formatCoordPair,
+  formatPlace: () => import_geocoder2.formatPlace,
+  parseLatLngPair: () => import_geocoder2.parseLatLngPair,
+  preflightGeolocation: () => preflightGeolocation,
+  resolveGeocoder: () => import_geocoder2.resolveGeocoder
 });
 module.exports = __toCommonJS(Geolocation_exports);
 var import_theme = require("@multiplatform.one/theme");
@@ -34,15 +40,30 @@ var import_AdaptivePopup = require("../../AdaptivePopup/index.cjs");
 var import_Button = require("../../Button/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
-var import_GeolocationMap = require("./GeolocationMap.cjs");
-var import_geoValue = require("./geoValue.cjs");
 var import_InputParts = require("../../InputParts/index.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
+var import_GeolocationMap = require("./GeolocationMap.cjs");
+var import_nativeSearchFocus = require("./nativeSearchFocus.cjs");
+var import_geoValue = require("./geoValue.cjs");
 var import_capabilityPreflight = require("../../shared/capabilityPreflight.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_t = require("../../shared/t.cjs");
+var import_pressSlopProps = require("../../shared/pressSlopProps.cjs");
+var import_tableCellContext = require("../../shared/tableCellContext.cjs");
+var import_zIndex = require("../../shared/zIndex.cjs");
 var import_utils = require("../../shared/utils.cjs");
+var import_geocoder = require("./geocoder.cjs");
+var import_geocoder2 = require("./geocoder.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+function coordinateKey({
+  lat,
+  lng
+}) {
+  return `${lat},${lng}`;
+}
+const SEARCH_DEBOUNCE_MS = 300;
+const COORD_LINE_HEIGHT = 28;
+const RESULTS_PANEL_SHADOW = "0px 8px 28px rgba(0,0,0,0.12), 0px 2px 6px rgba(0,0,0,0.04)";
 async function preflightGeolocation() {
   if (typeof navigator === "undefined" || !navigator.geolocation) {
     const insecure = typeof window !== "undefined" && window.isSecureContext === false;
@@ -75,15 +96,6 @@ function mapGeolocationError(err) {
   }
   return err.message || (0, import_t.t)("Failed to get location");
 }
-function clampLat(val) {
-  return Math.max(-90, Math.min(90, val));
-}
-function clampLng(val) {
-  return Math.max(-180, Math.min(180, val));
-}
-function formatCoordChip(lat, lng) {
-  return `${lat.toFixed(4)}, ${lng.toFixed(4)}`;
-}
 function tryParseCoord(text, clamp) {
   const trimmed = text.trim();
   if (trimmed === "" || trimmed === "-" || trimmed === "." || trimmed === "-.") return void 0;
@@ -130,8 +142,8 @@ function CoordinatesPanel({
   const flushDraft = (0, import_react2.useCallback)(() => {
     const rawLat = Number.parseFloat(latTextRef.current);
     const rawLng = Number.parseFloat(lngTextRef.current);
-    const nextLat = Number.isNaN(rawLat) ? committedRef.current.lat : clampLat(rawLat);
-    const nextLng = Number.isNaN(rawLng) ? committedRef.current.lng : clampLng(rawLng);
+    const nextLat = Number.isNaN(rawLat) ? committedRef.current.lat : (0, import_geocoder.clampLat)(rawLat);
+    const nextLng = Number.isNaN(rawLng) ? committedRef.current.lng : (0, import_geocoder.clampLng)(rawLng);
     commitPair(nextLat, nextLng);
   }, [commitPair]);
   (0, import_react2.useEffect)(() => {
@@ -143,7 +155,7 @@ function CoordinatesPanel({
   const handleLatChange = text => {
     setLatText(text);
     latTextRef.current = text;
-    const parsed = tryParseCoord(text, clampLat);
+    const parsed = tryParseCoord(text, import_geocoder.clampLat);
     if (parsed !== void 0) {
       commitPair(parsed, committedRef.current.lng);
     }
@@ -151,7 +163,7 @@ function CoordinatesPanel({
   const handleLngChange = text => {
     setLngText(text);
     lngTextRef.current = text;
-    const parsed = tryParseCoord(text, clampLng);
+    const parsed = tryParseCoord(text, import_geocoder.clampLng);
     if (parsed !== void 0) {
       commitPair(committedRef.current.lat, parsed);
     }
@@ -238,8 +250,132 @@ function ExpandedMapView({
   });
 }
 const overlayFocusRing = (0, import_theme.ensureFocusVisibleRing)({
-  outlineOffset: -2
+  outlineOffset: 0
 });
+function ResultRow({
+  testID,
+  label,
+  description,
+  onPress,
+  disabled
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    testID,
+    role: "option",
+    "aria-selected": false,
+    "aria-disabled": disabled || void 0,
+    ...(import_tamagui.isWeb ? {
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: event => {
+        if (disabled) return;
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onPress();
+        } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          const rows = [...(event.currentTarget.parentElement?.querySelectorAll("[role='option']:not([aria-disabled='true'])") ?? [])];
+          const index = rows.indexOf(event.currentTarget);
+          rows[(index + (event.key === "ArrowDown" ? 1 : -1) + rows.length) % rows.length]?.focus();
+        }
+      }
+    } : {}),
+    minHeight: description ? 62 : 44,
+    justifyContent: "center",
+    paddingHorizontal: "$3",
+    paddingVertical: description ? "$2" : 0,
+    cursor: disabled ? "not-allowed" : "pointer",
+    hoverStyle: disabled ? void 0 : {
+      backgroundColor: "$color3"
+    },
+    pressStyle: disabled ? void 0 : {
+      backgroundColor: "$color3"
+    },
+    onPress: disabled ? void 0 : onPress,
+    opacity: disabled ? 0.5 : 1,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: "$4",
+      lineHeight: 25,
+      color: "$color12",
+      children: label
+    }), description ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: "$3",
+      lineHeight: 24,
+      color: import_colorRamps.formCommonColors.muted,
+      children: description
+    }) : null]
+  });
+}
+function StatusRow({
+  children,
+  testID
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+    testID,
+    minHeight: 44,
+    alignItems: "center",
+    paddingHorizontal: "$3",
+    role: "status",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: "$4",
+      lineHeight: 25,
+      color: import_colorRamps.formCommonColors.muted,
+      children
+    })
+  });
+}
+function SearchResultsList({
+  listId,
+  status,
+  query,
+  results,
+  pair,
+  onLocate,
+  onPick,
+  onPickPair,
+  locateDisabled
+}) {
+  const showLocate = status === "idle" || status === "results" || pair != null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    testID: "geolocation-results",
+    id: listId,
+    overflow: "hidden",
+    ...(import_tamagui.isWeb ?
+    // role="listbox" is a valid ARIA role but outside RN's `Role` union;
+    // this web-only bag forwards it to the DOM node (house Record cast).
+    {
+      role: "listbox"
+    } : void 0),
+    children: [showLocate ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ResultRow, {
+      testID: "geolocation-use-location",
+      label: (0, import_t.t)("Use my current location"),
+      onPress: onLocate,
+      disabled: locateDisabled
+    }) : null, status === "searching" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(StatusRow, {
+      testID: "geolocation-search-status",
+      children: (0, import_t.t)("Searching\u2026")
+    }) : null, status === "error" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(StatusRow, {
+      testID: "geolocation-search-status",
+      children: (0, import_t.t)("Search is unavailable \u2014 check your connection")
+    }) : null, status === "empty" && !pair ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(StatusRow, {
+      testID: "geolocation-search-status",
+      children: (0, import_t.t)('No places match "{{query}}"', {
+        query
+      })
+    }) : null, pair ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ResultRow, {
+      testID: "geolocation-coord-result",
+      label: (0, import_t.t)("Go to {{pair}}", {
+        pair: (0, import_geocoder.formatCoordPair)(pair.lat, pair.lng)
+      }),
+      description: (0, import_t.t)("Exact coordinates \u2014 no address"),
+      onPress: () => onPickPair(pair.lat, pair.lng)
+    }) : null, status === "results" ? results.map((result, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(ResultRow, {
+      testID: `geolocation-result-${index}`,
+      label: result.label,
+      description: result.description,
+      onPress: () => onPick(result)
+    }, `${result.lat},${result.lng},${index}`)) : null]
+  });
+}
 function GeoMapSurface({
   id,
   coordinates,
@@ -279,7 +415,7 @@ function GeoMapSurface({
   };
   const handleMapKeyDown = event => {
     if (!interactive) return;
-    if (event.key === "Enter") {
+    if (event.key === "Enter" && hasValue) {
       event.preventDefault();
       setCoordsOpen(true);
       return;
@@ -288,7 +424,7 @@ function GeoMapSurface({
     const step = event.shiftKey ? 0.01 : 1e-3;
     let nextLat = coordinates.lat;
     let nextLng = coordinates.lng;
-    if (event.key === "ArrowUp") nextLat = clampLat(nextLat + step);else if (event.key === "ArrowDown") nextLat = clampLat(nextLat - step);else if (event.key === "ArrowLeft") nextLng = clampLng(nextLng - step);else if (event.key === "ArrowRight") nextLng = clampLng(nextLng + step);else return;
+    if (event.key === "ArrowUp") nextLat = (0, import_geocoder.clampLat)(nextLat + step);else if (event.key === "ArrowDown") nextLat = (0, import_geocoder.clampLat)(nextLat - step);else if (event.key === "ArrowLeft") nextLng = (0, import_geocoder.clampLng)(nextLng - step);else if (event.key === "ArrowRight") nextLng = (0, import_geocoder.clampLng)(nextLng + step);else return;
     event.preventDefault();
     onMapChange(nextLat, nextLng);
   };
@@ -299,7 +435,68 @@ function GeoMapSurface({
     disabled,
     knobProps
   }) : null;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+  const coordLine = readOnly || disabled ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+    testID: "geolocation-coordline",
+    alignItems: "center",
+    minHeight: COORD_LINE_HEIGHT,
+    paddingHorizontal: "$2",
+    hitSlop: (0, import_theme.pressTargetHitSlop)(COORD_LINE_HEIGHT),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontFamily: "$mono",
+      fontSize: 12,
+      lineHeight: 22,
+      color: import_colorRamps.formCommonColors.muted,
+      children: hasValue ? (0, import_geocoder.formatCoordPair)(mapLat, mapLng) : (0, import_t.t)("Enter coordinates")
+    })
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
+    open: coordsOpen,
+    onOpenChange: handleCoordsOpenChange,
+    disabled,
+    fitContent: false,
+    sizing: "fill",
+    contentPadding: "none",
+    trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      testID: "geolocation-coordline",
+      alignItems: "center",
+      minHeight: COORD_LINE_HEIGHT,
+      paddingHorizontal: "$2",
+      cursor: "pointer",
+      ...(0, import_pressSlopProps.pressSlopProps)(COORD_LINE_HEIGHT, true),
+      hoverStyle: {
+        backgroundColor: "$color3"
+      },
+      focusVisibleStyle: overlayFocusRing,
+      ...(import_tamagui.isWeb ? {
+        tabIndex: 0,
+        role: "button",
+        "aria-label": (0, import_t.t)("Edit coordinates"),
+        onKeyDown: event => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            setCoordsOpen(true);
+          }
+        }
+      } : {}),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontFamily: "$mono",
+        fontSize: 12,
+        lineHeight: 22,
+        color: import_colorRamps.formCommonColors.muted,
+        children: hasValue ? (0, import_geocoder.formatCoordPair)(mapLat, mapLng) : (0, import_t.t)("Enter coordinates")
+      })
+    }),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(CoordinatesPanel, {
+      lat: mapLat,
+      lng: mapLng,
+      knobProps,
+      required,
+      hasError,
+      flushRef: coordsFlushRef,
+      onCommit: onCommitCoordinates
+    })
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$2",
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
       testID: "geolocation-map",
       id,
@@ -321,7 +518,7 @@ function GeoMapSurface({
         tabIndex: 0,
         role: "application",
         "aria-label": (0, import_t.t)("Location map"),
-        "aria-valuetext": hasValue ? formatCoordChip(mapLat, mapLng) : (0, import_t.t)("No location set"),
+        "aria-valuetext": hasValue ? (0, import_geocoder.formatCoordPair)(mapLat, mapLng) : (0, import_t.t)("No location set"),
         onKeyDown: handleMapKeyDown
       } : {}),
       children: [customMap ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_GeolocationMap.GeolocationMap, {
@@ -332,59 +529,34 @@ function GeoMapSurface({
         disabled,
         readOnly,
         hasValue
-      }), readOnly ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      }), !hasValue && !locateErrorOpen ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        testID: "geolocation-empty",
         position: "absolute",
-        top: "$2",
-        insetInlineStart: "$2",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
         zIndex: 2,
-        backgroundColor: "$background",
-        opacity: 0.92,
-        paddingHorizontal: "$2",
-        paddingVertical: "$1",
-        ...knobProps.borderRadius,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          testID: "geolocation-coords-chip",
-          fontSize: "$1",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "$2",
+        pointerEvents: "box-none",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
           ...knobProps.body,
           color: import_colorRamps.formCommonColors.muted,
-          children: hasValue ? formatCoordChip(mapLat, mapLng) : (0, import_t.t)("No location set")
-        })
-      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        position: "absolute",
-        top: "$2",
-        insetInlineStart: "$2",
-        zIndex: 2,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
-          open: coordsOpen,
-          onOpenChange: handleCoordsOpenChange,
-          disabled,
-          fitContent: true,
-          sizing: "fill",
-          contentPadding: "none",
-          trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-            size: "$2",
-            disabled,
-            backgroundColor: "$background",
-            opacity: 0.92,
-            testID: "geolocation-coords-chip",
-            "aria-label": (0, import_t.t)("Edit coordinates"),
-            focusVisibleStyle: overlayFocusRing,
-            onPress: import_tamagui.isWeb && !disabled ? () => setCoordsOpen(true) : void 0,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
-              children: hasValue ? formatCoordChip(mapLat, mapLng) : (0, import_t.t)("Set location")
-            })
-          }),
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(CoordinatesPanel, {
-            lat: mapLat,
-            lng: mapLng,
-            knobProps,
-            required,
-            hasError,
-            flushRef: coordsFlushRef,
-            onCommit: onCommitCoordinates
+          pointerEvents: "none",
+          children: (0, import_t.t)("No location set")
+        }), !readOnly && !disabled ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+          size: "$4",
+          onPress: onUseMyLocation,
+          disabled: locating,
+          testID: "geolocation-empty-locate",
+          "aria-label": (0, import_t.t)("Use my current location"),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
+            children: (0, import_t.t)("Use my current location")
           })
-        })
-      }), handleExpand && expandIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        }) : null]
+      }) : null, handleExpand && expandIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         position: "absolute",
         top: "$2",
         insetInlineEnd: "$2",
@@ -395,9 +567,9 @@ function GeoMapSurface({
           disabled,
           onPress: handleExpand,
           backgroundColor: "$background",
-          opacity: 0.92,
           "aria-label": (0, import_t.t)("Expand map"),
           focusVisibleStyle: overlayFocusRing,
+          hitSlop: (0, import_theme.pressTargetHitSlop)(32),
           children: expandIcon
         })
       }), !readOnly && !locateErrorOpen && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
@@ -411,12 +583,12 @@ function GeoMapSurface({
           disabled: disabled || locating,
           onPress: onUseMyLocation,
           backgroundColor: "$background",
-          opacity: 0.92,
           icon: locating ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {
             size: "small"
           }) : locationIcon,
           "aria-label": locating ? (0, import_t.t)("Locating") : (0, import_t.t)("Locate"),
-          focusVisibleStyle: overlayFocusRing
+          focusVisibleStyle: overlayFocusRing,
+          hitSlop: (0, import_theme.pressTargetHitSlop)(32)
         })
       }), locateErrorOpen && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
         testID: "geolocation-locate-panel",
@@ -451,7 +623,7 @@ function GeoMapSurface({
           })]
         })]
       })]
-    }), expandIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_AdaptivePopup.AdaptivePopup, {
+    }), coordLine, expandIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_AdaptivePopup.AdaptivePopup, {
       open: expanded,
       onOpenChange: setExpanded,
       title: (0, import_t.t)("Select Location"),
@@ -467,9 +639,45 @@ function GeoMapSurface({
     })]
   });
 }
-const defaultLocationIcon = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.NavigationArrowIcon, {
-  size: 16
-});
+function CellFace({
+  address,
+  coordinates,
+  onOpen
+}) {
+  const glyphColor = (0, import_theme.useGlyphColor)();
+  const text = address ? address : coordinates ? (0, import_geocoder.formatCoordPair)(coordinates.lat, coordinates.lng) : (0, import_t.t)("No location set");
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    testID: "geolocation-cell-face",
+    ...(import_tamagui.isWeb && onOpen ? {
+      tabIndex: 0,
+      role: "button",
+      "aria-label": (0, import_t.t)("Edit location"),
+      onKeyDown: event => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onOpen();
+        }
+      }
+    } : {}),
+    alignItems: "center",
+    gap: "$2",
+    minHeight: 44,
+    minWidth: 0,
+    flex: 1,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MapPinIcon, {
+      size: 14,
+      color: glyphColor
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: "$3",
+      lineHeight: 24,
+      color: "$color12",
+      numberOfLines: 1,
+      flex: 1,
+      minWidth: 0,
+      children: text
+    })]
+  });
+}
 function Geolocation({
   name,
   form: formProp,
@@ -487,11 +695,14 @@ function Geolocation({
   onBlur,
   disabled,
   readOnly,
-  locationIcon = defaultLocationIcon,
+  locationIcon,
   expandIcon,
   renderMap,
   skeleton,
-  compact
+  compact,
+  geocode: geocodeProp,
+  reverseGeocode: reverseGeocodeProp,
+  geocoder
 }) {
   const {
     resolvedForm,
@@ -503,13 +714,81 @@ function Geolocation({
     compact
   });
   const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  const glyphColor = (0, import_theme.useGlyphColor)();
+  const resolvedLocationIcon = locationIcon === void 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.NavigationArrowIcon, {
+    size: 16,
+    color: glyphColor
+  }) : locationIcon;
+  const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  const viewportGtSm = (0, import_FloatingPanel.useViewportGtSm)();
+  const shouldUseSheet = !import_tamagui.isWeb || !viewportGtSm;
+  const {
+    geocode,
+    reverseGeocode
+  } = (0, import_geocoder.resolveGeocoder)({
+    geocode: geocodeProp,
+    reverseGeocode: reverseGeocodeProp,
+    geocoder
+  });
+  const searchEnabled = Boolean(geocode) && !disabled && !readOnly;
+  const listId = (0, import_react2.useId)();
   const [locatePhase, setLocatePhase] = (0, import_react2.useState)("idle");
   const [locateError, setLocateError] = (0, import_react2.useState)(null);
   const [preflightError, setPreflightError] = (0, import_react2.useState)();
+  const [address, setAddress] = (0, import_react2.useState)(null);
+  const [query, setQuery] = (0, import_react2.useState)("");
+  const [resultsOpen, setResultsOpen] = (0, import_react2.useState)(false);
+  const [searchStatus, setSearchStatus] = (0, import_react2.useState)("idle");
+  const [results, setResults] = (0, import_react2.useState)([]);
+  const [cellOpen, setCellOpen] = (0, import_react2.useState)(false);
   const preflightingRef = (0, import_react2.useRef)(false);
   const onValueChangeRef = (0, import_react2.useRef)(() => {});
   const currentValueRef = (0, import_react2.useRef)("");
+  const searchGenRef = (0, import_react2.useRef)(0);
+  const reverseGenRef = (0, import_react2.useRef)(0);
+  const searchRootRef = (0, import_react2.useRef)(null);
+  const searchInputRef = (0, import_react2.useRef)(null);
+  const sheetSearchInputRef = (0, import_react2.useRef)(null);
+  const closingSearchRef = (0, import_react2.useRef)(false);
+  const [nativeSearchFocus] = (0, import_react2.useState)(import_nativeSearchFocus.createNativeSearchFocus);
+  const skipResultsReturnFocusRef = (0, import_react2.useRef)(true);
+  const closeSearch = (0, import_react2.useCallback)((restoreFocus = true) => {
+    if (!import_tamagui.isWeb) nativeSearchFocus.dismiss();
+    closingSearchRef.current = true;
+    setResultsOpen(false);
+    if (import_tamagui.isWeb && restoreFocus) searchInputRef.current?.focus({
+      preventScroll: true
+    });
+    closingSearchRef.current = false;
+  }, [nativeSearchFocus]);
+  const queryIsAddressRef = (0, import_react2.useRef)(true);
+  const selectedPlaceRef = (0, import_react2.useRef)(null);
+  const locateGenRef = (0, import_react2.useRef)(0);
+  const interactiveRef = (0, import_react2.useRef)(!disabled && !readOnly);
+  interactiveRef.current = !disabled && !readOnly;
+  const cancelLocate = (0, import_react2.useCallback)(() => {
+    ++locateGenRef.current;
+    setLocatePhase("idle");
+    setLocateError(null);
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (disabled || readOnly) cancelLocate();
+  }, [disabled, readOnly, cancelLocate]);
+  (0, import_react2.useEffect)(() => () => {
+    ++locateGenRef.current;
+    ++reverseGenRef.current;
+    ++searchGenRef.current;
+  }, []);
+  const applyAddress = (0, import_react2.useCallback)((next, intoQuery) => {
+    setAddress(next);
+    if (intoQuery) {
+      queryIsAddressRef.current = true;
+      setQuery(next?.label ?? "");
+    }
+  }, []);
   const requestPosition = (0, import_react2.useCallback)(() => {
+    if (!interactiveRef.current) return;
+    const gen = ++locateGenRef.current;
     if (!navigator?.geolocation) {
       setLocateError((0, import_t.t)("Geolocation unavailable: not supported in this browser."));
       setLocatePhase("error");
@@ -518,8 +797,11 @@ function Geolocation({
     setLocatePhase("locating");
     setLocateError(null);
     navigator.geolocation.getCurrentPosition(position => {
-      const lat = clampLat(position.coords.latitude);
-      const lng = clampLng(position.coords.longitude);
+      if (gen !== locateGenRef.current || !interactiveRef.current) return;
+      selectedPlaceRef.current = null;
+      queryIsAddressRef.current = true;
+      const lat = (0, import_geocoder.clampLat)(position.coords.latitude);
+      const lng = (0, import_geocoder.clampLng)(position.coords.longitude);
       const previous = currentValueRef.current;
       onValueChangeRef.current((0, import_geoValue.formatGeoValue)({
         lat,
@@ -527,20 +809,25 @@ function Geolocation({
       }, (0, import_geoValue.detectGeoShape)(previous), previous));
       setLocatePhase("idle");
       setLocateError(null);
+      closeSearch();
+      setCellOpen(false);
     }, err => {
+      if (gen !== locateGenRef.current || !interactiveRef.current) return;
       setLocateError(mapGeolocationError(err));
       setLocatePhase("error");
     }, {
       enableHighAccuracy: true,
       timeout: 1e4
     });
-  }, []);
+  }, [closeSearch]);
   const startLocate = (0, import_react2.useCallback)(async () => {
     if (disabled || readOnly) return;
     if (preflightingRef.current || locatePhase === "locating") return;
     preflightingRef.current = true;
+    const gen = ++locateGenRef.current;
     try {
       const result = await preflightGeolocation();
+      if (gen !== locateGenRef.current || !interactiveRef.current) return;
       if (result.ok) {
         setPreflightError(void 0);
         requestPosition();
@@ -553,64 +840,403 @@ function Geolocation({
       preflightingRef.current = false;
     }
   }, [disabled, readOnly, locatePhase, requestPosition]);
+  const runReverse = (0, import_react2.useCallback)(async (lat, lng) => {
+    const gen = ++reverseGenRef.current;
+    if (lat === void 0 || lng === void 0) {
+      selectedPlaceRef.current = null;
+      applyAddress(null, queryIsAddressRef.current);
+      return;
+    }
+    const key = coordinateKey({
+      lat,
+      lng
+    });
+    const selected = selectedPlaceRef.current;
+    if (selected?.key === key) {
+      applyAddress({
+        key,
+        label: (0, import_geocoder.formatPlace)(selected.place)
+      }, queryIsAddressRef.current);
+      return;
+    }
+    applyAddress(null, queryIsAddressRef.current);
+    if (!reverseGeocode) {
+      return;
+    }
+    try {
+      const result = await reverseGeocode({
+        lat,
+        lng
+      });
+      if (gen !== reverseGenRef.current) return;
+      applyAddress(result ? {
+        key,
+        label: (0, import_geocoder.formatPlace)(result)
+      } : null, queryIsAddressRef.current);
+    } catch {
+      if (gen !== reverseGenRef.current) return;
+      applyAddress(null, queryIsAddressRef.current);
+    }
+  }, [reverseGeocode, applyAddress]);
+  const runSearch = (0, import_react2.useCallback)(async text => {
+    if (!geocode) return;
+    const gen = ++searchGenRef.current;
+    setSearchStatus("searching");
+    try {
+      const next = await geocode({
+        query: text
+      });
+      if (gen !== searchGenRef.current) return;
+      setResults(next);
+      setSearchStatus(next.length > 0 ? "results" : "empty");
+    } catch {
+      if (gen !== searchGenRef.current) return;
+      setResults([]);
+      setSearchStatus("error");
+    }
+  }, [geocode]);
+  (0, import_react2.useEffect)(() => {
+    ++searchGenRef.current;
+    if (!searchEnabled || !resultsOpen) return;
+    const trimmed = query.trim();
+    if (queryIsAddressRef.current) return;
+    if (!trimmed) {
+      setSearchStatus("idle");
+      setResults([]);
+      return;
+    }
+    if ((0, import_geocoder.parseLatLngPair)(trimmed)) {
+      setSearchStatus("idle");
+      setResults([]);
+      return;
+    }
+    const handle = setTimeout(() => {
+      void runSearch(trimmed);
+    }, SEARCH_DEBOUNCE_MS);
+    return () => {
+      clearTimeout(handle);
+      ++searchGenRef.current;
+    };
+  }, [query, resultsOpen, searchEnabled, runSearch]);
+  (0, import_react2.useEffect)(() => {
+    if (!resultsOpen || shouldUseSheet) return;
+    const onDoc = event => {
+      const root = searchRootRef.current;
+      if (root && event.target instanceof Node && root.contains(event.target)) return;
+      closeSearch(false);
+    };
+    const onKey = event => {
+      if (event.key === "Escape") closeSearch();
+    };
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [resultsOpen, shouldUseSheet, closeSearch]);
   const makeHandlers = (0, import_react2.useCallback)((currentValue, onValueChange) => {
     onValueChangeRef.current = onValueChange;
     currentValueRef.current = currentValue;
     const coordinates = (0, import_geoValue.parseGeoValue)(currentValue);
     const shape = (0, import_geoValue.detectGeoShape)(currentValue);
     const write = (lat, lng) => {
+      cancelLocate();
       onValueChange((0, import_geoValue.formatGeoValue)({
-        lat: clampLat(lat),
-        lng: clampLng(lng)
+        lat: (0, import_geocoder.clampLat)(lat),
+        lng: (0, import_geocoder.clampLng)(lng)
       }, shape, currentValue));
     };
     return {
       coordinates,
-      onCommitCoordinates: write,
-      onMapChange: write,
+      onCommitCoordinates: (lat, lng) => {
+        write(lat, lng);
+        selectedPlaceRef.current = null;
+        queryIsAddressRef.current = true;
+      },
+      onMapChange: (lat, lng) => {
+        write(lat, lng);
+        selectedPlaceRef.current = null;
+        queryIsAddressRef.current = true;
+      },
       onUseMyLocation: () => {
         void startLocate();
       },
       onRetryLocate: () => {
         requestPosition();
       },
-      onCloseLocate: () => {
-        setLocatePhase("idle");
-        setLocateError(null);
+      onCloseLocate: cancelLocate,
+      onPick: result => {
+        ++reverseGenRef.current;
+        const place = {
+          ...result,
+          lat: (0, import_geocoder.clampLat)(result.lat),
+          lng: (0, import_geocoder.clampLng)(result.lng)
+        };
+        selectedPlaceRef.current = {
+          key: coordinateKey(place),
+          place
+        };
+        write(result.lat, result.lng);
+        queryIsAddressRef.current = true;
+        setQuery((0, import_geocoder.formatPlace)(result));
+        closeSearch();
+        setCellOpen(false);
+        setSearchStatus("idle");
+      },
+      onPickPair: (lat, lng) => {
+        write(lat, lng);
+        selectedPlaceRef.current = null;
+        queryIsAddressRef.current = true;
+        closeSearch();
+        setCellOpen(false);
+        setSearchStatus("idle");
+      },
+      onClear: () => {
+        cancelLocate();
+        ++searchGenRef.current;
+        ++reverseGenRef.current;
+        selectedPlaceRef.current = null;
+        onValueChange("");
+        applyAddress(null, true);
+        setQuery("");
+        setResults([]);
+        setSearchStatus("idle");
       }
     };
-  }, [startLocate, requestPosition]);
+  }, [startLocate, requestPosition, cancelLocate, applyAddress, closeSearch]);
   const mapHeight = (0, import_utils.getFieldHeight)(size ?? knobProps.sizeToken, compact ? 4 : 5);
-  if (skeleton) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
-      id,
-      label,
-      size,
-      knobProps,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-        variant: "rounded",
-        width: "100%",
-        height: mapHeight
+  const displayError = error || preflightError;
+  const renderSearch = (handlers, opts = {}) => {
+    const showClear = Boolean(query) && !disabled && !readOnly;
+    const inputRef = opts.sheetHeader ? sheetSearchInputRef : searchInputRef;
+    const activateNativeSearch = (focusInput = false) => {
+      nativeSearchFocus.activate();
+      if (!searchEnabled || opts.editingCell) return;
+      const nativeInput = inputRef.current;
+      if (nativeInput?.isFocused?.()) setResultsOpen(true);else if (focusInput) nativeInput?.focus();
+    };
+    const clearSearch = () => {
+      handlers.onClear();
+      closingSearchRef.current = true;
+      if (import_tamagui.isWeb) inputRef.current?.focus({
+        preventScroll: true
+      });
+      closingSearchRef.current = false;
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+      size: size || knobProps.sizeToken,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+        disabled: disabled || !searchEnabled,
+        style: {
+          overflow: "visible"
+        },
+        ...(opts.sheetHeader ? {
+          borderWidth: 0,
+          borderBottomWidth: 1,
+          borderRadius: 0
+        } : {}),
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+            adornment: "leading",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MagnifyingGlassIcon, {
+              size: 16
+            })
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+            ref: inputRef,
+            value: query,
+            disabled: disabled || !searchEnabled,
+            placeholder: (0, import_t.t)("Search address or place"),
+            "aria-label": (0, import_t.t)("Search for a location"),
+            role: "combobox",
+            "aria-haspopup": "listbox",
+            "aria-expanded": resultsOpen,
+            "aria-controls": listId,
+            "aria-autocomplete": "list",
+            "data-testid": "geolocation-search",
+            onChangeText: text => {
+              if (!import_tamagui.isWeb) nativeSearchFocus.activate();
+              ++searchGenRef.current;
+              queryIsAddressRef.current = false;
+              setResults([]);
+              setSearchStatus("idle");
+              setQuery(text);
+              if (searchEnabled) setResultsOpen(true);
+            },
+            onKeyDown: event => {
+              if (event.key === "ArrowDown") {
+                if (searchEnabled) setResultsOpen(true);
+                event.preventDefault();
+                document.getElementById(listId)?.querySelector("[role='option']:not([aria-disabled='true'])")?.focus();
+              }
+            },
+            onClick: () => {
+              if (searchEnabled) setResultsOpen(true);
+            },
+            ...(!import_tamagui.isWeb ? {
+              onPressIn: () => activateNativeSearch(),
+              onAccessibilityTap: () => activateNativeSearch(true),
+              onBlur: () => nativeSearchFocus.blur(!!opts.sheetHeader, resultsOpen)
+            } : {}),
+            onFocus: () => {
+              if (searchEnabled && !opts.editingCell && !closingSearchRef.current && (import_tamagui.isWeb || nativeSearchFocus.canOpen(!!opts.sheetHeader))) setResultsOpen(true);
+            }
+          })
+        }), showClear ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
+            glyphRing: true,
+            onPress: clearSearch,
+            onKeyDown: event => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                event.stopPropagation();
+                clearSearch();
+              }
+            },
+            "aria-label": (0, import_t.t)("Clear location"),
+            testID: "geolocation-search-clear",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+                size: 14
+              })
+            })
+          })
+        }) : null]
       })
     });
-  }
-  const displayError = error || preflightError;
-  if (!resolvedForm || !name) {
-    const handlers = makeHandlers(value || "", v => onChange?.(v));
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
-      id,
-      label,
-      labelProps,
-      error: displayError,
-      helperText,
-      required,
-      size,
-      knobProps,
-      onBlur,
-      disabled,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(GeoMapSurface, {
+  };
+  const renderResults = handlers => /* @__PURE__ */(0, import_jsx_runtime.jsx)(SearchResultsList, {
+    listId,
+    status: searchStatus,
+    query: query.trim(),
+    results,
+    pair: (0, import_geocoder.parseLatLngPair)(query),
+    onLocate: handlers.onUseMyLocation,
+    onPick: handlers.onPick,
+    onPickPair: handlers.onPickPair,
+    locateDisabled: disabled || locatePhase === "locating"
+  });
+  const renderFormBody = (currentValue, onValueChange, editingCell = false, resolvedError = displayError) => {
+    const handlers = makeHandlers(currentValue, onValueChange);
+    const coordinates = handlers.coordinates;
+    const key = coordinates ? coordinateKey(coordinates) : null;
+    const selected = selectedPlaceRef.current;
+    const displayAddress = (selected?.key === key ? (0, import_geocoder.formatPlace)(selected.place) : null) ?? (address?.key === key ? address.label : null) ?? (coordinates ? (0, import_geocoder.formatCoordPair)(coordinates.lat, coordinates.lng) : null);
+    if (inTableCell && !editingCell) {
+      const face = /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellFace, {
+        address: displayAddress,
+        coordinates,
+        onOpen: !disabled && !readOnly ? () => setCellOpen(true) : void 0
+      });
+      if (readOnly || disabled) return face;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
+        open: cellOpen,
+        onOpenChange: setCellOpen,
+        disabled,
+        fitContent: false,
+        contentPadding: "none",
+        trigger: face,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          minWidth: 260,
+          maxWidth: 420,
+          children: renderFormBody(currentValue, onValueChange, true, resolvedError)
+        })
+      });
+    }
+    if (readOnly) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          testID: "geolocation-readonly-address",
+          alignItems: "center",
+          gap: "$2",
+          minHeight: 25,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MapPinIcon, {
+            size: 14,
+            color: glyphColor
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: "$4",
+            lineHeight: 25,
+            color: "$color12",
+            children: displayAddress ?? (0, import_t.t)("No location set")
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(GeoMapSurface, {
+          id,
+          coordinates,
+          onCommitCoordinates: handlers.onCommitCoordinates,
+          onUseMyLocation: handlers.onUseMyLocation,
+          onRetryLocate: handlers.onRetryLocate,
+          onCloseLocate: handlers.onCloseLocate,
+          onMapChange: handlers.onMapChange,
+          disabled: !!disabled,
+          readOnly: true,
+          locatePhase,
+          locateError,
+          knobProps,
+          locationIcon: resolvedLocationIcon,
+          expandIcon,
+          renderMap,
+          required,
+          hasError: !!resolvedError,
+          mapHeight
+        })]
+      });
+    }
+    const resultsPanel = resultsOpen && searchEnabled ? shouldUseSheet ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
+      open: resultsOpen,
+      onOpenChange: open => open ? setResultsOpen(true) : closeSearch(),
+      onNativeShow: () => sheetSearchInputRef.current?.focus(),
+      skipReturnFocusRef: skipResultsReturnFocusRef,
+      sheet: true,
+      sheetFill: true,
+      scrollable: true,
+      contentPadding: "none",
+      header: renderSearch(handlers, {
+        sheetHeader: true
+      }),
+      trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        testID: "geolocation-sheet-trigger",
+        height: 1,
+        width: "100%"
+      }),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        testID: "geolocation-results-sheet",
+        children: renderResults(handlers)
+      })
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      position: "absolute",
+      top: "100%",
+      left: 0,
+      right: 0,
+      zIndex: import_zIndex.zIndex.dropdown,
+      backgroundColor: "$color1",
+      borderWidth: 1,
+      borderColor: import_colorRamps.formInputColors.border.base,
+      borderRadius: knobProps.borderRadius.borderRadius,
+      overflow: "hidden",
+      style: {
+        boxShadow: RESULTS_PANEL_SHADOW
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+        maxHeight: mapHeight * 1.5,
+        children: renderResults(handlers)
+      })
+    }) : null;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        ref: searchRootRef,
+        position: "relative",
+        testID: "geolocation-search-anchor",
+        "data-sheet": shouldUseSheet ? "true" : "false",
+        children: [renderSearch(handlers, {
+          editingCell
+        }), resultsPanel]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(GeoMapSurface, {
         id,
-        coordinates: handlers.coordinates,
+        coordinates,
         onCommitCoordinates: handlers.onCommitCoordinates,
         onUseMyLocation: handlers.onUseMyLocation,
         onRetryLocate: handlers.onRetryLocate,
@@ -621,15 +1247,58 @@ function Geolocation({
         locatePhase,
         locateError,
         knobProps,
-        locationIcon,
+        locationIcon: resolvedLocationIcon,
         expandIcon,
         renderMap,
         required,
-        hasError: !!displayError,
+        hasError: !!resolvedError,
         mapHeight
+      })]
+    });
+  };
+  if (skeleton) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      size,
+      knobProps,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+          variant: "rounded",
+          width: "100%",
+          height: 44
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+          variant: "rounded",
+          width: "100%",
+          height: mapHeight
+        })]
       })
     });
   }
+  const wrap = (currentValue, onValueChange, resolvedError, fieldBlur) => {
+    const coordinates = (0, import_geoValue.parseGeoValue)(currentValue);
+    const taughtHelper = helperText ?? (!coordinates && !readOnly ? (0, import_t.t)("Search, tap the map, or use your location.") : void 0);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error: resolvedError ?? displayError,
+      helperText: inTableCell ? void 0 : taughtHelper,
+      required,
+      size,
+      knobProps,
+      onBlur: fieldBlur ?? onBlur,
+      disabled,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(GeolocationValueSync, {
+        value: currentValue,
+        runReverse
+      }), renderFormBody(currentValue, onValueChange, false, resolvedError)]
+    });
+  };
+  if (!resolvedForm || !name) {
+    return wrap(value || "", v => onChange?.(v));
+  }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
     form: resolvedForm,
     name,
@@ -637,42 +1306,22 @@ function Geolocation({
     validators: resolvedValidators,
     children: field => {
       const resolvedError = (0, import_utils.getFieldError)(field, displayError);
-      const handlers = makeHandlers(field.state.value || "", v => {
+      return wrap(field.state.value || "", v => {
         field.handleChange(v);
         onChange?.(v);
-      });
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
-        id,
-        label,
-        labelProps,
-        error: resolvedError,
-        helperText,
-        required,
-        size,
-        knobProps,
-        onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
-        disabled,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(GeoMapSurface, {
-          id,
-          coordinates: handlers.coordinates,
-          onCommitCoordinates: handlers.onCommitCoordinates,
-          onUseMyLocation: handlers.onUseMyLocation,
-          onRetryLocate: handlers.onRetryLocate,
-          onCloseLocate: handlers.onCloseLocate,
-          onMapChange: handlers.onMapChange,
-          disabled: !!disabled,
-          readOnly: !!readOnly,
-          locatePhase,
-          locateError,
-          knobProps,
-          locationIcon,
-          expandIcon,
-          renderMap,
-          required,
-          hasError: !!resolvedError,
-          mapHeight
-        })
-      });
+      }, resolvedError, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur));
     }
   });
+}
+function GeolocationValueSync({
+  value,
+  runReverse
+}) {
+  const coords = (0, import_geoValue.parseGeoValue)(value);
+  const key = coords ? coordinateKey(coords) : "";
+  (0, import_react2.useEffect)(() => {
+    const next = (0, import_geoValue.parseGeoValue)(value);
+    void runReverse(next?.lat, next?.lng);
+  }, [key, value, runReverse]);
+  return null;
 }