@12-apps/ui 5.0.0 → 5.0.1

package/dist/form/AddressAutocomplete.js

@@ -0,0 +1,882 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/form/AddressAutocomplete/AddressAutocomplete.tsx
+import LocationIcon2 from "@mui/icons-material/LocationOn";
+
+// src/components/form/AddressAutocomplete/AddressAutocomplete.helpers.ts
+var MIN_QUERY_LENGTH = 2;
+var ADDRESS_AUTOCOMPLETE_DEFAULTS = {
+  variant: "outlined",
+  label: "Address",
+  placeholder: "Enter an address",
+  floating: false,
+  error: false,
+  disabled: false,
+  required: false,
+  fullWidth: true,
+  defaultValue: "",
+  getCurrentLocation: false
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveAddressProps = (props) => ({ ...ADDRESS_AUTOCOMPLETE_DEFAULTS, ...definedProps(props) });
+var addressOptionLabel = (option) => {
+  if (typeof option === "string") return option;
+  return option.description || "";
+};
+var isSameAddressOption = (option, value) => {
+  if (typeof option === "string" || typeof value === "string") return option === value;
+  return option.place_id === value.place_id;
+};
+
+// src/components/form/AddressAutocomplete/AddressAutocomplete.hooks.ts
+import { useCallback as useCallback4, useState as useState3 } from "react";
+
+// src/components/form/AddressAutocomplete/useAddressPredictions.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+// src/components/form/AddressAutocomplete/mockPlaces.ts
+var MOCK_ADDRESSES = [
+  {
+    place_id: "mock_1",
+    description: "123 Main Street, San Francisco, CA 94105, USA",
+    structured_formatting: {
+      main_text: "123 Main Street",
+      secondary_text: "San Francisco, CA 94105, USA"
+    },
+    matched_substrings: [],
+    terms: [],
+    types: ["street_address"]
+  },
+  {
+    place_id: "mock_2",
+    description: "456 Oak Avenue, New York, NY 10001, USA",
+    structured_formatting: {
+      main_text: "456 Oak Avenue",
+      secondary_text: "New York, NY 10001, USA"
+    },
+    matched_substrings: [],
+    terms: [],
+    types: ["street_address"]
+  },
+  {
+    place_id: "mock_3",
+    description: "789 Pine Boulevard, Los Angeles, CA 90001, USA",
+    structured_formatting: {
+      main_text: "789 Pine Boulevard",
+      secondary_text: "Los Angeles, CA 90001, USA"
+    },
+    matched_substrings: [],
+    terms: [],
+    types: ["street_address"]
+  },
+  {
+    place_id: "mock_4",
+    description: "321 Elm Street, Chicago, IL 60601, USA",
+    structured_formatting: {
+      main_text: "321 Elm Street",
+      secondary_text: "Chicago, IL 60601, USA"
+    },
+    matched_substrings: [],
+    terms: [],
+    types: ["street_address"]
+  },
+  {
+    place_id: "mock_5",
+    description: "654 Maple Drive, Austin, TX 78701, USA",
+    structured_formatting: {
+      main_text: "654 Maple Drive",
+      secondary_text: "Austin, TX 78701, USA"
+    },
+    matched_substrings: [],
+    terms: [],
+    types: ["street_address"]
+  }
+];
+var MOCK_PLACE_DETAILS = {
+  mock_1: {
+    formatted_address: "123 Main Street, San Francisco, CA 94105, USA",
+    address_components: [
+      { long_name: "123", types: ["street_number"] },
+      { long_name: "Main Street", types: ["route"] },
+      { long_name: "San Francisco", types: ["locality"] },
+      { long_name: "California", types: ["administrative_area_level_1"] },
+      { long_name: "United States", types: ["country"] },
+      { long_name: "94105", types: ["postal_code"] }
+    ],
+    geometry: { location: { lat: () => 37.7749, lng: () => -122.4194 } }
+  },
+  mock_2: {
+    formatted_address: "456 Oak Avenue, New York, NY 10001, USA",
+    address_components: [
+      { long_name: "456", types: ["street_number"] },
+      { long_name: "Oak Avenue", types: ["route"] },
+      { long_name: "New York", types: ["locality"] },
+      { long_name: "New York", types: ["administrative_area_level_1"] },
+      { long_name: "United States", types: ["country"] },
+      { long_name: "10001", types: ["postal_code"] }
+    ],
+    geometry: { location: { lat: () => 40.7128, lng: () => -74.006 } }
+  },
+  mock_3: {
+    formatted_address: "789 Pine Boulevard, Los Angeles, CA 90001, USA",
+    address_components: [
+      { long_name: "789", types: ["street_number"] },
+      { long_name: "Pine Boulevard", types: ["route"] },
+      { long_name: "Los Angeles", types: ["locality"] },
+      { long_name: "California", types: ["administrative_area_level_1"] },
+      { long_name: "United States", types: ["country"] },
+      { long_name: "90001", types: ["postal_code"] }
+    ],
+    geometry: { location: { lat: () => 34.0522, lng: () => -118.2437 } }
+  },
+  mock_4: {
+    formatted_address: "321 Elm Street, Chicago, IL 60601, USA",
+    address_components: [
+      { long_name: "321", types: ["street_number"] },
+      { long_name: "Elm Street", types: ["route"] },
+      { long_name: "Chicago", types: ["locality"] },
+      { long_name: "Illinois", types: ["administrative_area_level_1"] },
+      { long_name: "United States", types: ["country"] },
+      { long_name: "60601", types: ["postal_code"] }
+    ],
+    geometry: { location: { lat: () => 41.8781, lng: () => -87.6298 } }
+  },
+  mock_5: {
+    formatted_address: "654 Maple Drive, Austin, TX 78701, USA",
+    address_components: [
+      { long_name: "654", types: ["street_number"] },
+      { long_name: "Maple Drive", types: ["route"] },
+      { long_name: "Austin", types: ["locality"] },
+      { long_name: "Texas", types: ["administrative_area_level_1"] },
+      { long_name: "United States", types: ["country"] },
+      { long_name: "78701", types: ["postal_code"] }
+    ],
+    geometry: { location: { lat: () => 30.2672, lng: () => -97.7431 } }
+  },
+  mock_6: {
+    formatted_address: "1000 Broadway, New York, NY 10001, USA",
+    address_components: [
+      { long_name: "1000", types: ["street_number"] },
+      { long_name: "Broadway", types: ["route"] },
+      { long_name: "New York", types: ["locality"] },
+      { long_name: "New York", types: ["administrative_area_level_1"] },
+      { long_name: "United States", types: ["country"] },
+      { long_name: "10001", types: ["postal_code"] }
+    ],
+    geometry: { location: { lat: () => 40.7589, lng: () => -73.9851 } }
+  },
+  mock_7: {
+    formatted_address: "250 Market Street, San Francisco, CA 94102, USA",
+    address_components: [
+      { long_name: "250", types: ["street_number"] },
+      { long_name: "Market Street", types: ["route"] },
+      { long_name: "San Francisco", types: ["locality"] },
+      { long_name: "California", types: ["administrative_area_level_1"] },
+      { long_name: "United States", types: ["country"] },
+      { long_name: "94102", types: ["postal_code"] }
+    ],
+    geometry: { location: { lat: () => 37.7879, lng: () => -122.4075 } }
+  }
+};
+var matchesAllWords = (address, searchTerm) => {
+  const description = address.description.toLowerCase();
+  const mainText = address.structured_formatting.main_text.toLowerCase();
+  const secondaryText = address.structured_formatting.secondary_text?.toLowerCase() || "";
+  return searchTerm.split(" ").every(
+    (word) => description.includes(word) || mainText.includes(word) || secondaryText.includes(word)
+  );
+};
+var byRelevance = (searchTerm) => (a, b) => {
+  const aMain = a.structured_formatting.main_text.toLowerCase();
+  const bMain = b.structured_formatting.main_text.toLowerCase();
+  if (aMain.startsWith(searchTerm) && !bMain.startsWith(searchTerm)) return -1;
+  if (!aMain.startsWith(searchTerm) && bMain.startsWith(searchTerm)) return 1;
+  return aMain.localeCompare(bMain);
+};
+var searchMockAddresses = (input) => {
+  const searchTerm = input.toLowerCase().trim();
+  return MOCK_ADDRESSES.filter((address) => matchesAllWords(address, searchTerm)).sort(
+    byRelevance(searchTerm)
+  );
+};
+
+// src/components/form/AddressAutocomplete/useAddressPredictions.ts
+var DEBOUNCE_MS = 300;
+var MOCK_PREDICTION_DELAY_MS = 100;
+var predictionRequest = (input, restrictions) => ({
+  input: input.trim(),
+  componentRestrictions: restrictions?.country ? { country: restrictions.country } : void 0,
+  types: restrictions?.types || []
+});
+var fetchMockPredictions = (input, sink) => {
+  window.setTimeout(() => {
+    sink.setLoading(false);
+    sink.setOptions(searchMockAddresses(input));
+    sink.setApiError(null);
+  }, MOCK_PREDICTION_DELAY_MS);
+};
+var fetchLivePredictions = (service, input, restrictions, sink) => {
+  service.getPlacePredictions(predictionRequest(input, restrictions), (predictions, status) => {
+    sink.setLoading(false);
+    if (status === google.maps.places.PlacesServiceStatus.OK && predictions) {
+      sink.setOptions(predictions);
+      sink.setApiError(null);
+      return;
+    }
+    sink.setOptions([]);
+    sink.setApiError(
+      status === google.maps.places.PlacesServiceStatus.ZERO_RESULTS ? null : "Failed to fetch address suggestions"
+    );
+  });
+};
+var useAddressPredictions = ({
+  isLoaded,
+  services,
+  restrictions,
+  useMockData,
+  setInputValue,
+  setLoading,
+  setApiError
+}) => {
+  const [options, setOptions] = useState([]);
+  const debounceTimeoutRef = useRef(void 0);
+  const sink = useMemo(
+    () => ({ setOptions, setLoading, setApiError }),
+    [setLoading, setApiError]
+  );
+  const debouncedAutocomplete = useCallback(
+    (input) => {
+      window.clearTimeout(debounceTimeoutRef.current);
+      debounceTimeoutRef.current = window.setTimeout(() => {
+        if (!input.trim() || !isLoaded) {
+          setOptions([]);
+          setLoading(false);
+          return;
+        }
+        if (useMockData) {
+          fetchMockPredictions(input, sink);
+          return;
+        }
+        if (!services.autocompleteService) {
+          setOptions([]);
+          setLoading(false);
+          return;
+        }
+        fetchLivePredictions(services.autocompleteService, input, restrictions, sink);
+      }, DEBOUNCE_MS);
+    },
+    [isLoaded, services, restrictions, useMockData, sink, setLoading]
+  );
+  useEffect(() => () => window.clearTimeout(debounceTimeoutRef.current), []);
+  const handleInputChange = useCallback(
+    (_event, value) => {
+      setInputValue(value);
+      setApiError(null);
+      if (value.length > MIN_QUERY_LENGTH) {
+        setLoading(true);
+        debouncedAutocomplete(value);
+        return;
+      }
+      setOptions([]);
+      setLoading(false);
+    },
+    [debouncedAutocomplete, setInputValue, setApiError, setLoading]
+  );
+  return { options, handleInputChange };
+};
+
+// src/components/form/AddressAutocomplete/useAddressSelection.ts
+import { useCallback as useCallback2 } from "react";
+
+// src/components/form/AddressAutocomplete/AddressAutocomplete.mapper.ts
+var componentReader = (components) => (type) => components.find((component) => component.types.includes(type))?.long_name || "";
+var coordinatesOf = (geometry) => ({
+  lat: geometry?.location?.lat() || 0,
+  lng: geometry?.location?.lng() || 0
+});
+var toAddressDetails = ({
+  components,
+  formatted,
+  coordinates
+}) => {
+  const read = componentReader(components);
+  const street = `${read("street_number")} ${read("route")}`.trim();
+  return {
+    formatted,
+    // A street number on its own is not an address; fall back to the route name.
+    street: street || read("route"),
+    city: read("locality") || read("administrative_area_level_2"),
+    state: read("administrative_area_level_1"),
+    country: read("country"),
+    postalCode: read("postal_code"),
+    coordinates
+  };
+};
+var freeSoloAddress = (value) => toAddressDetails({ components: [], formatted: value, coordinates: { lat: 0, lng: 0 } });
+
+// src/components/form/AddressAutocomplete/useAddressSelection.ts
+var MOCK_DETAILS_DELAY_MS = 50;
+var PLACE_DETAIL_FIELDS = ["formatted_address", "address_components", "geometry"];
+var resolveMockPlace = (value, sink) => {
+  window.setTimeout(() => {
+    sink.setLoading(false);
+    const place = MOCK_PLACE_DETAILS[value.place_id];
+    if (!place) {
+      sink.setApiError("Address details not found");
+      return;
+    }
+    sink.applyAddress(
+      toAddressDetails({
+        components: place.address_components,
+        formatted: place.formatted_address || value.description,
+        coordinates: coordinatesOf(place.geometry)
+      })
+    );
+  }, MOCK_DETAILS_DELAY_MS);
+};
+var resolveLivePlace = (service, value, sink) => {
+  const request = {
+    placeId: value.place_id,
+    fields: PLACE_DETAIL_FIELDS
+  };
+  service.getDetails(request, (place, status) => {
+    sink.setLoading(false);
+    if (status !== google.maps.places.PlacesServiceStatus.OK || !place) {
+      sink.setApiError("Failed to get address details");
+      return;
+    }
+    sink.applyAddress(
+      toAddressDetails({
+        components: place.address_components ?? [],
+        formatted: place.formatted_address || value.description,
+        coordinates: coordinatesOf(place.geometry)
+      })
+    );
+  });
+};
+var useAddressSelection = ({
+  services,
+  useMockData,
+  setLoading,
+  setApiError,
+  onSelect,
+  applyAddress
+}) => useCallback2(
+  (_event, value) => {
+    if (typeof value === "string") {
+      onSelect(freeSoloAddress(value));
+      return;
+    }
+    if (!value) return;
+    setLoading(true);
+    const sink = { setLoading, setApiError, applyAddress };
+    if (useMockData && "place_id" in value) {
+      resolveMockPlace(value, sink);
+      return;
+    }
+    if (!services.placesService) {
+      setLoading(false);
+      return;
+    }
+    resolveLivePlace(services.placesService, value, sink);
+  },
+  [services, useMockData, setLoading, setApiError, onSelect, applyAddress]
+);
+
+// src/components/form/AddressAutocomplete/useCurrentLocation.ts
+import { useCallback as useCallback3 } from "react";
+var MOCK_GEOLOCATION_DELAY_MS = 500;
+var GEOLOCATION_OPTIONS = {
+  enableHighAccuracy: true,
+  timeout: 1e4,
+  maximumAge: 6e5
+  // 10 minutes
+};
+var resolveMockLocation = (sink) => {
+  window.setTimeout(() => {
+    sink.setLoading(false);
+    const mockLocation = MOCK_ADDRESSES[0];
+    if (!mockLocation) {
+      sink.setApiError("No mock location available");
+      return;
+    }
+    const mockDetails = MOCK_PLACE_DETAILS[mockLocation.place_id];
+    if (!mockDetails) {
+      sink.setApiError("Mock location details not found");
+      return;
+    }
+    sink.applyAddress(
+      toAddressDetails({
+        components: mockDetails.address_components,
+        formatted: mockDetails.formatted_address,
+        coordinates: coordinatesOf(mockDetails.geometry)
+      })
+    );
+  }, MOCK_GEOLOCATION_DELAY_MS);
+};
+var geocodePosition = (geocoder, sink) => (position) => {
+  const { latitude, longitude } = position.coords;
+  const location = new google.maps.LatLng(latitude, longitude);
+  geocoder.geocode({ location }, (results, status) => {
+    sink.setLoading(false);
+    const place = status === "OK" ? results?.[0] : void 0;
+    if (!place) {
+      sink.setApiError("Unable to retrieve address for current location");
+      return;
+    }
+    sink.applyAddress(
+      toAddressDetails({
+        components: place.address_components,
+        formatted: place.formatted_address,
+        // The device's own fix is more precise than the geocoded place's.
+        coordinates: { lat: latitude, lng: longitude }
+      })
+    );
+  });
+};
+var useCurrentLocation = ({
+  services,
+  useMockData,
+  setLoading,
+  setApiError,
+  applyAddress
+}) => useCallback3(() => {
+  if (!navigator.geolocation) {
+    setApiError("Geolocation is not supported by this browser");
+    return;
+  }
+  const sink = { setLoading, setApiError, applyAddress };
+  if (useMockData) {
+    setLoading(true);
+    resolveMockLocation(sink);
+    return;
+  }
+  if (!services.geocoder) {
+    setApiError("Geocoding service not available");
+    return;
+  }
+  setLoading(true);
+  navigator.geolocation.getCurrentPosition(
+    geocodePosition(services.geocoder, sink),
+    () => {
+      setLoading(false);
+      setApiError("Unable to retrieve your location");
+    },
+    GEOLOCATION_OPTIONS
+  );
+}, [services, useMockData, setLoading, setApiError, applyAddress]);
+
+// src/components/form/AddressAutocomplete/useGoogleMapsAPI.ts
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+var useGoogleMapsAPI = (apiKey) => {
+  const [isLoaded, setIsLoaded] = useState2(false);
+  const [error, setError] = useState2(null);
+  const [useMockData, setUseMockData] = useState2(false);
+  const serviceRef = useRef2({
+    autocompleteService: null,
+    placesService: null,
+    geocoder: null
+  });
+  useEffect2(() => {
+    if (!apiKey || apiKey === "demo-key" || apiKey === "test-key") {
+      setUseMockData(true);
+      setIsLoaded(true);
+      setError(null);
+      return;
+    }
+    if (window.google && window.google.maps && window.google.maps.places) {
+      initializeServices();
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`;
+    script.async = true;
+    script.defer = true;
+    script.onload = () => {
+      initializeServices();
+    };
+    script.onerror = () => {
+      setError("Failed to load Google Maps API");
+    };
+    document.head.appendChild(script);
+    return () => {
+      if (document.head.contains(script)) {
+        document.head.removeChild(script);
+      }
+    };
+  }, [apiKey]);
+  const initializeServices = () => {
+    try {
+      if (window.google && window.google.maps && window.google.maps.places) {
+        serviceRef.current = {
+          autocompleteService: new window.google.maps.places.AutocompleteService(),
+          placesService: new window.google.maps.places.PlacesService(document.createElement("div")),
+          geocoder: new window.google.maps.Geocoder()
+        };
+        setIsLoaded(true);
+        setError(null);
+      }
+    } catch {
+      setError("Failed to initialize Google Maps services");
+    }
+  };
+  return { isLoaded, error, services: serviceRef.current, useMockData };
+};
+
+// src/components/form/AddressAutocomplete/AddressAutocomplete.hooks.ts
+var useAddressAutocomplete = ({
+  defaultValue,
+  googleMapsApiKey,
+  restrictions,
+  onSelect
+}) => {
+  const [inputValue, setInputValue] = useState3(defaultValue);
+  const [loading, setLoading] = useState3(false);
+  const [apiError, setApiError] = useState3(null);
+  const { isLoaded, error: mapsError, services, useMockData } = useGoogleMapsAPI(googleMapsApiKey);
+  const applyAddress = useCallback4(
+    (address) => {
+      onSelect(address);
+      setInputValue(address.formatted);
+    },
+    [onSelect]
+  );
+  const { options, handleInputChange } = useAddressPredictions({
+    isLoaded,
+    services,
+    restrictions,
+    useMockData,
+    setInputValue,
+    setLoading,
+    setApiError
+  });
+  const handleSelect = useAddressSelection({
+    services,
+    useMockData,
+    setLoading,
+    setApiError,
+    onSelect,
+    applyAddress
+  });
+  const handleGetCurrentLocation = useCurrentLocation({
+    services,
+    useMockData,
+    setLoading,
+    setApiError,
+    applyAddress
+  });
+  return {
+    inputValue,
+    options,
+    loading,
+    apiError,
+    mapsError,
+    isLoaded,
+    handleInputChange,
+    handleSelect,
+    handleGetCurrentLocation
+  };
+};
+
+// src/components/form/AddressAutocomplete/AddressAutocompleteField.tsx
+import { Alert, Autocomplete, Box as Box2 } from "@mui/material";
+
+// src/components/form/AddressAutocomplete/AddressInputField.tsx
+import CurrentLocationIcon from "@mui/icons-material/MyLocation";
+import { CircularProgress, IconButton, InputAdornment } from "@mui/material";
+
+// src/components/form/AddressAutocomplete/AddressTextField.tsx
+import { alpha, styled, TextField } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var GlassTextField = styled(TextField)(({ theme }) => ({
+  "& .MuiOutlinedInput-root": {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
+    backdropFilter: "blur(10px)",
+    WebkitBackdropFilter: "blur(10px)",
+    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+    transition: theme.transitions.create(["border-color", "box-shadow", "background"]),
+    "&:hover": {
+      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.7)} 100%)`,
+      borderColor: theme.palette.primary.main
+    },
+    "&.Mui-focused": {
+      background: theme.palette.background.paper,
+      boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.25)}`
+    },
+    "& fieldset": {
+      border: "none"
+    }
+  }
+}));
+var AddressTextField = ({ addressVariant, ...props }) => addressVariant === "glass" ? /* @__PURE__ */ jsx(GlassTextField, { variant: "outlined", ...props }) : /* @__PURE__ */ jsx(TextField, { variant: addressVariant, ...props });
+
+// src/components/form/AddressAutocomplete/AddressInputField.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var CurrentLocationButton = ({
+  disabled,
+  onClick
+}) => /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx2(
+  IconButton,
+  {
+    edge: "end",
+    onClick,
+    size: "small",
+    title: "Use current location",
+    disabled,
+    "data-testid": "address-current-location-button",
+    children: /* @__PURE__ */ jsx2(CurrentLocationIcon, {})
+  }
+) });
+var AddressInputField = ({
+  params,
+  addressVariant,
+  label,
+  placeholder,
+  icon,
+  error,
+  helperText,
+  required,
+  disabled,
+  loading,
+  showCurrentLocation,
+  onGetCurrentLocation
+}) => /* @__PURE__ */ jsx2(
+  AddressTextField,
+  {
+    ...params,
+    addressVariant,
+    label,
+    placeholder,
+    error,
+    helperText,
+    required,
+    InputProps: {
+      ...params.InputProps,
+      startAdornment: icon && /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: icon }),
+      endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+        loading && /* @__PURE__ */ jsx2(CircularProgress, { color: "inherit", size: 20, "data-testid": "address-loading" }),
+        showCurrentLocation && /* @__PURE__ */ jsx2(CurrentLocationButton, { disabled, onClick: onGetCurrentLocation }),
+        params.InputProps.endAdornment
+      ] })
+    },
+    inputProps: { ...params.inputProps, "data-testid": "address-input" }
+  }
+);
+
+// src/components/form/AddressAutocomplete/AddressOption.tsx
+import LocationIcon from "@mui/icons-material/LocationOn";
+import { alpha as alpha2, Box, styled as styled2 } from "@mui/material";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SuggestionItem = styled2(Box)(({ theme }) => ({
+  padding: theme.spacing(1.5),
+  display: "flex",
+  alignItems: "flex-start",
+  gap: theme.spacing(1.5),
+  cursor: "pointer",
+  transition: theme.transitions.create(["background-color"]),
+  "&:hover": {
+    backgroundColor: alpha2(theme.palette.primary.main, 0.08)
+  }
+}));
+var LocationIconWrapper = styled2(Box)(({ theme }) => ({
+  marginTop: theme.spacing(0.5),
+  color: theme.palette.text.secondary
+}));
+var AddressText = styled2(Box)(({ theme }) => ({
+  flex: 1,
+  "& .primary": {
+    fontSize: "0.9rem",
+    fontWeight: 500,
+    color: theme.palette.text.primary,
+    marginBottom: theme.spacing(0.25)
+  },
+  "& .secondary": {
+    fontSize: "0.8rem",
+    color: theme.palette.text.secondary
+  }
+}));
+var optionText = (option) => {
+  if (typeof option === "string") {
+    return {
+      testId: "address-suggestion-text",
+      primary: option.split(",")[0],
+      secondary: option.split(",").slice(1).join(",")
+    };
+  }
+  return {
+    testId: "address-prediction-text",
+    primary: option.structured_formatting?.main_text || option.description?.split(",")[0],
+    secondary: option.structured_formatting?.secondary_text || option.description?.split(",").slice(1).join(",")
+  };
+};
+var AddressOption = ({ optionProps, option, index }) => {
+  const { testId, primary, secondary } = optionText(option);
+  return /* @__PURE__ */ jsx3("li", { ...optionProps, "data-testid": `address-suggestion-${index}`, children: /* @__PURE__ */ jsxs2(SuggestionItem, { children: [
+    /* @__PURE__ */ jsx3(LocationIconWrapper, { children: /* @__PURE__ */ jsx3(LocationIcon, { fontSize: "small" }) }),
+    /* @__PURE__ */ jsxs2(AddressText, { "data-testid": testId, children: [
+      /* @__PURE__ */ jsx3("div", { className: "primary", children: primary }),
+      /* @__PURE__ */ jsx3("div", { className: "secondary", children: secondary })
+    ] })
+  ] }) });
+};
+
+// src/components/form/AddressAutocomplete/AddressSuggestionsPaper.tsx
+import { alpha as alpha3, Paper, useTheme } from "@mui/material";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var AddressSuggestionsPaper = (props) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx4(
+    Paper,
+    {
+      ...props,
+      elevation: 8,
+      "data-testid": "address-suggestions-dropdown",
+      sx: {
+        mt: 1,
+        background: `linear-gradient(135deg, ${alpha3(theme.palette.background.paper, 0.98)} 0%, ${alpha3(theme.palette.background.paper, 0.95)} 100%)`,
+        backdropFilter: "blur(20px)",
+        WebkitBackdropFilter: "blur(20px)",
+        border: `1px solid ${alpha3(theme.palette.divider, 0.18)}`
+      }
+    }
+  );
+};
+
+// src/components/form/AddressAutocomplete/AddressAutocompleteField.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var AddressAutocompleteField = ({
+  variant,
+  label,
+  placeholder,
+  icon,
+  floating,
+  error,
+  helperText,
+  disabled,
+  required,
+  fullWidth,
+  getCurrentLocation,
+  inputValue,
+  options,
+  loading,
+  apiError,
+  handleInputChange,
+  handleSelect,
+  handleGetCurrentLocation
+}) => /* @__PURE__ */ jsxs3(Box2, { "data-testid": "address-autocomplete-container", children: [
+  /* @__PURE__ */ jsx5(
+    Autocomplete,
+    {
+      freeSolo: true,
+      options,
+      inputValue,
+      onInputChange: handleInputChange,
+      onChange: handleSelect,
+      loading,
+      disabled,
+      fullWidth,
+      getOptionLabel: addressOptionLabel,
+      isOptionEqualToValue: isSameAddressOption,
+      PaperComponent: AddressSuggestionsPaper,
+      noOptionsText: inputValue.length <= MIN_QUERY_LENGTH ? "Type at least 3 characters" : "No addresses found",
+      renderOption: ({ key, ...optionProps }, option, state) => /* @__PURE__ */ jsx5(
+        AddressOption,
+        {
+          optionProps,
+          option,
+          index: state.index
+        },
+        key
+      ),
+      renderInput: (params) => /* @__PURE__ */ jsx5(
+        AddressInputField,
+        {
+          params,
+          addressVariant: variant,
+          label: floating ? void 0 : label,
+          placeholder,
+          icon,
+          error: error || !!apiError,
+          helperText: apiError || helperText,
+          required,
+          disabled,
+          loading,
+          showCurrentLocation: getCurrentLocation && !loading,
+          onGetCurrentLocation: handleGetCurrentLocation
+        }
+      )
+    }
+  ),
+  apiError && /* @__PURE__ */ jsx5(Alert, { severity: "warning", sx: { mt: 1 }, children: apiError })
+] });
+
+// src/components/form/AddressAutocomplete/AddressFallbackField.tsx
+import { Alert as Alert2, Box as Box3, CircularProgress as CircularProgress2, InputAdornment as InputAdornment2 } from "@mui/material";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var AddressFallbackField = ({
+  variant,
+  label,
+  placeholder,
+  icon,
+  floating,
+  fullWidth,
+  mapsError
+}) => {
+  const startAdornment = icon ? /* @__PURE__ */ jsx6(InputAdornment2, { position: "start", children: icon }) : void 0;
+  if (!mapsError) {
+    return /* @__PURE__ */ jsx6(
+      AddressTextField,
+      {
+        addressVariant: variant,
+        label: floating ? void 0 : label,
+        placeholder: "Loading Google Maps...",
+        disabled: true,
+        fullWidth,
+        InputProps: {
+          startAdornment,
+          endAdornment: /* @__PURE__ */ jsx6(CircularProgress2, { color: "inherit", size: 20 })
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs4(Box3, { children: [
+    /* @__PURE__ */ jsx6(
+      AddressTextField,
+      {
+        addressVariant: variant,
+        label: floating ? void 0 : label,
+        placeholder,
+        error: true,
+        disabled: true,
+        fullWidth,
+        helperText: mapsError,
+        InputProps: { startAdornment }
+      }
+    ),
+    /* @__PURE__ */ jsx6(Alert2, { severity: "error", sx: { mt: 1 }, children: "Google Maps API failed to load. Please check your API key and internet connection." })
+  ] });
+};
+
+// src/components/form/AddressAutocomplete/AddressAutocomplete.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var AddressAutocomplete = (componentProps) => {
+  const resolved = resolveAddressProps(componentProps);
+  const { defaultValue, googleMapsApiKey, restrictions, onSelect, icon = /* @__PURE__ */ jsx7(LocationIcon2, {}) } = resolved;
+  const fieldProps = { ...resolved, icon };
+  const state = useAddressAutocomplete({
+    defaultValue,
+    googleMapsApiKey,
+    restrictions,
+    onSelect
+  });
+  if (!state.isLoaded || state.mapsError) {
+    return /* @__PURE__ */ jsx7(AddressFallbackField, { ...fieldProps, mapsError: state.mapsError });
+  }
+  return /* @__PURE__ */ jsx7(AddressAutocompleteField, { ...fieldProps, ...state });
+};
+export {
+  AddressAutocomplete
+};
+//# sourceMappingURL=AddressAutocomplete.js.map