@mamrp/components 1.7.54 → 1.7.56

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import { MRT_ColumnDef, MRT_PaginationState, MRT_ColumnFiltersState, MRT_Sorting
 export { MRT_ColumnDef } from 'material-react-table';
 import * as React$1 from 'react';
 import React__default, { ReactNode, CSSProperties, Dispatch, SetStateAction } from 'react';
-import { Control, FieldValues, Path, FieldErrors, UseFormSetValue } from 'react-hook-form';
+import { Control, FieldValues, Path, FieldErrors, UseFormSetValue, FieldPath } from 'react-hook-form';
 import { DialogProps, PaperProps, SxProps, Theme } from '@mui/material';
 import { IconType } from 'react-icons';
 import { Moment } from 'moment-jalaali';
@@ -732,4 +732,28 @@ type UploadImageProps<T extends FieldValues> = {
 };
 declare const UploadImage: <T extends FieldValues>({ placeholder, name, selectedImage, setSelectedImage, control, errors, setValue, height, allowGallery, imageFit, disableCamera, }: UploadImageProps<T>) => React__default.JSX.Element;
 
-export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomDateTimePicker, CustomDialog, type CustomDialogProps, CustomTimePicker, DataTable, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage$1 as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, imgViewer as ImgViewer, LicensePlate, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, type PaletteColor, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage };
+interface SubCustomerFormFields {
+    fullName: string;
+    phoneNumber: string;
+    address: string;
+    cityId: number;
+    customerType: number;
+    remittanceDiscrepancyTolerancePercent: number | null;
+    lat: number | null;
+    long: number | null;
+}
+interface MapPickerProps {
+    control: Control<SubCustomerFormFields>;
+    nameLat: FieldPath<SubCustomerFormFields>;
+    nameLong: FieldPath<SubCustomerFormFields>;
+    nameAddress?: FieldPath<SubCustomerFormFields>;
+    isLoading?: boolean;
+    defaultLat?: number;
+    defaultLng?: number;
+    defaultZoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+}
+declare function MapLocationPicker({ control, nameLat, nameLong, nameAddress, isLoading, defaultLat, defaultLng, defaultZoom, minZoom, maxZoom, }: MapPickerProps): React$1.JSX.Element;
+
+export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomDateTimePicker, CustomDialog, type CustomDialogProps, CustomTimePicker, DataTable, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage$1 as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, imgViewer as ImgViewer, LicensePlate, MapLocationPicker, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, type PaletteColor, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { MRT_ColumnDef, MRT_PaginationState, MRT_ColumnFiltersState, MRT_Sorting
 export { MRT_ColumnDef } from 'material-react-table';
 import * as React$1 from 'react';
 import React__default, { ReactNode, CSSProperties, Dispatch, SetStateAction } from 'react';
-import { Control, FieldValues, Path, FieldErrors, UseFormSetValue } from 'react-hook-form';
+import { Control, FieldValues, Path, FieldErrors, UseFormSetValue, FieldPath } from 'react-hook-form';
 import { DialogProps, PaperProps, SxProps, Theme } from '@mui/material';
 import { IconType } from 'react-icons';
 import { Moment } from 'moment-jalaali';
@@ -732,4 +732,28 @@ type UploadImageProps<T extends FieldValues> = {
 };
 declare const UploadImage: <T extends FieldValues>({ placeholder, name, selectedImage, setSelectedImage, control, errors, setValue, height, allowGallery, imageFit, disableCamera, }: UploadImageProps<T>) => React__default.JSX.Element;
 
-export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomDateTimePicker, CustomDialog, type CustomDialogProps, CustomTimePicker, DataTable, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage$1 as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, imgViewer as ImgViewer, LicensePlate, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, type PaletteColor, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage };
+interface SubCustomerFormFields {
+    fullName: string;
+    phoneNumber: string;
+    address: string;
+    cityId: number;
+    customerType: number;
+    remittanceDiscrepancyTolerancePercent: number | null;
+    lat: number | null;
+    long: number | null;
+}
+interface MapPickerProps {
+    control: Control<SubCustomerFormFields>;
+    nameLat: FieldPath<SubCustomerFormFields>;
+    nameLong: FieldPath<SubCustomerFormFields>;
+    nameAddress?: FieldPath<SubCustomerFormFields>;
+    isLoading?: boolean;
+    defaultLat?: number;
+    defaultLng?: number;
+    defaultZoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+}
+declare function MapLocationPicker({ control, nameLat, nameLong, nameAddress, isLoading, defaultLat, defaultLng, defaultZoom, minZoom, maxZoom, }: MapPickerProps): React$1.JSX.Element;
+
+export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomDateTimePicker, CustomDialog, type CustomDialogProps, CustomTimePicker, DataTable, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage$1 as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, imgViewer as ImgViewer, LicensePlate, MapLocationPicker, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, type PaletteColor, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage };

package/dist/index.js

@@ -52,6 +52,7 @@ __export(src_exports, {
   HorizontalStepper: () => HorizontalStepper,
   ImgViewer: () => imgViewer,
   LicensePlate: () => LicensePlate,
+  MapLocationPicker: () => MapLocationPicker,
   MobileDateTimePicker: () => mobile_date_time_picker_default,
   Modal: () => ConfirmationDialog2,
   NestedSelectort: () => selector_default,
@@ -6118,6 +6119,414 @@ var UploadImage2 = ({
   );
 };
 var upload_image_default = UploadImage2;
+
+// src/map-location-picker/index.tsx
+var import_material34 = require("@mui/material");
+var import_md13 = require("react-icons/md");
+var import_react33 = require("react");
+var import_react_hot_toast2 = __toESM(require("react-hot-toast"));
+var import_react_hook_form18 = require("react-hook-form");
+function MapLocationPicker({
+  control,
+  nameLat,
+  nameLong,
+  nameAddress,
+  isLoading = false,
+  defaultLat = 36.557153,
+  defaultLng = 52.679547,
+  defaultZoom = 16,
+  minZoom = 10,
+  maxZoom = 19
+}) {
+  const theme3 = (0, import_material34.useTheme)();
+  const isDarkMode = theme3.palette.mode === "dark";
+  const { field: latField, fieldState: latState } = (0, import_react_hook_form18.useController)({
+    name: nameLat,
+    control
+  });
+  const { field: longField, fieldState: longState } = (0, import_react_hook_form18.useController)({
+    name: nameLong,
+    control
+  });
+  const addressController = nameAddress ? (0, import_react_hook_form18.useController)({ name: nameAddress, control }) : null;
+  const error = !!latState.error || !!longState.error;
+  const helperText = latState.error?.message || longState.error?.message || "";
+  const latitude = latField.value;
+  const longitude = longField.value;
+  const handleLocationChange = (lat, lng) => {
+    latField.onChange(lat);
+    longField.onChange(lng);
+  };
+  const handleAddressChange = nameAddress ? (address) => addressController?.field.onChange(address) : void 0;
+  const mapRef = (0, import_react33.useRef)(null);
+  const mapInstanceRef = (0, import_react33.useRef)(null);
+  const markerRef = (0, import_react33.useRef)(null);
+  const [isMapLoading, setIsMapLoading] = (0, import_react33.useState)(true);
+  const [isGeocoding, setIsGeocoding] = (0, import_react33.useState)(false);
+  const [isGeolocating, setIsGeolocating] = (0, import_react33.useState)(false);
+  const [showGpsDialog, setShowGpsDialog] = (0, import_react33.useState)(false);
+  const [gpsErrorType, setGpsErrorType] = (0, import_react33.useState)("other");
+  const [zoom, setZoom] = (0, import_react33.useState)(defaultZoom);
+  const hasExistingLocation = latitude !== null && longitude !== null;
+  const initialLat = hasExistingLocation ? latitude : defaultLat;
+  const initialLng = hasExistingLocation ? longitude : defaultLng;
+  const initialZoom = hasExistingLocation ? 17 : defaultZoom;
+  (0, import_react33.useEffect)(() => {
+    if (!document.getElementById("leaflet-css")) {
+      const link = document.createElement("link");
+      link.id = "leaflet-css";
+      link.rel = "stylesheet";
+      link.href = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css";
+      document.head.appendChild(link);
+    }
+    const script = document.createElement("script");
+    script.src = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js";
+    script.async = true;
+    script.onload = () => {
+      setIsMapLoading(false);
+      initializeMap();
+    };
+    document.body.appendChild(script);
+    return () => {
+      if (mapInstanceRef.current) {
+        mapInstanceRef.current.remove();
+        mapInstanceRef.current = null;
+      }
+    };
+  }, []);
+  const reverseGeocode = async (lat, lng) => {
+    try {
+      const response = await fetch(
+        `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}&accept-language=fa`
+      );
+      if (!response.ok) throw new Error("Failed to fetch address");
+      const data = await response.json();
+      const fullAddress = data.display_name || "";
+      const parts = fullAddress.split(",");
+      return parts.slice(0, 4).map((p) => p.trim()).join("\u060C ");
+    } catch {
+      return "";
+    }
+  };
+  const initializeMap = () => {
+    if (!window.L || !mapRef.current || mapInstanceRef.current) return;
+    const L = window.L;
+    const map = L.map(mapRef.current, {
+      attributionControl: false,
+      minZoom
+    }).setView([initialLat, initialLng], initialZoom);
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      attribution: "\xA9 OpenStreetMap contributors",
+      maxZoom
+    }).addTo(map);
+    map.on("zoomend", () => {
+      setZoom(map.getZoom());
+    });
+    if (hasExistingLocation) {
+      markerRef.current = L.marker([initialLat, initialLng], {
+        draggable: true
+      }).addTo(map);
+      markerRef.current.on("dragend", async (e) => {
+        const { lat, lng } = e.target.getLatLng();
+        handleLocationChange(lat, lng);
+        if (handleAddressChange) {
+          setIsGeocoding(true);
+          const address = await reverseGeocode(lat, lng);
+          handleAddressChange(address);
+          setIsGeocoding(false);
+        }
+      });
+    }
+    map.on("click", async (e) => {
+      const { lat, lng } = e.latlng;
+      if (!markerRef.current) {
+        markerRef.current = L.marker([lat, lng], { draggable: true }).addTo(
+          map
+        );
+        markerRef.current.on("dragend", async (dragEvent) => {
+          const { lat: dragLat, lng: dragLng } = dragEvent.target.getLatLng();
+          handleLocationChange(dragLat, dragLng);
+          if (handleAddressChange) {
+            setIsGeocoding(true);
+            const address = await reverseGeocode(dragLat, dragLng);
+            handleAddressChange(address);
+            setIsGeocoding(false);
+          }
+        });
+      } else {
+        markerRef.current.setLatLng([lat, lng]);
+      }
+      handleLocationChange(lat, lng);
+      if (handleAddressChange) {
+        setIsGeocoding(true);
+        const address = await reverseGeocode(lat, lng);
+        handleAddressChange(address);
+        setIsGeocoding(false);
+      }
+    });
+    mapInstanceRef.current = map;
+  };
+  (0, import_react33.useEffect)(() => {
+    if (!mapInstanceRef.current || !mapRef.current) return;
+    const L = window.L;
+    if (latitude === null || longitude === null) {
+      if (markerRef.current) {
+        markerRef.current.remove();
+        markerRef.current = null;
+      }
+      return;
+    }
+    if (!markerRef.current) {
+      markerRef.current = L.marker([latitude, longitude], {
+        draggable: true
+      }).addTo(mapInstanceRef.current);
+      markerRef.current.on("dragend", async (e) => {
+        const { lat, lng } = e.target.getLatLng();
+        handleLocationChange(lat, lng);
+        if (handleAddressChange) {
+          setIsGeocoding(true);
+          const address = await reverseGeocode(lat, lng);
+          handleAddressChange(address);
+          setIsGeocoding(false);
+        }
+      });
+    } else {
+      markerRef.current.setLatLng([latitude, longitude]);
+    }
+    mapInstanceRef.current.setView([latitude, longitude], zoom, {
+      animate: true
+    });
+  }, [latitude, longitude]);
+  const checkGeolocationSupport = () => {
+    if (!navigator.geolocation) {
+      import_react_hot_toast2.default.error("\u0645\u0631\u0648\u0631\u06AF\u0631 \u0634\u0645\u0627 \u0627\u0632 \u0645\u0648\u0642\u0639\u06CC\u062A \u0645\u06A9\u0627\u0646\u06CC \u067E\u0634\u062A\u06CC\u0628\u0627\u0646\u06CC \u0646\u0645\u06CC\u200C\u06A9\u0646\u062F.");
+      return false;
+    }
+    return true;
+  };
+  const handleCurrentLocation = async () => {
+    if (!checkGeolocationSupport() || !mapInstanceRef.current) return;
+    if (navigator.permissions) {
+      try {
+        const permissionStatus = await navigator.permissions.query({
+          name: "geolocation"
+        });
+        if (permissionStatus.state === "denied") {
+          setGpsErrorType("permission");
+          setShowGpsDialog(true);
+          return;
+        }
+      } catch {
+      }
+    }
+    setIsGeolocating(true);
+    const timeoutId = setTimeout(() => {
+      if (isGeolocating) {
+        setIsGeolocating(false);
+        setGpsErrorType("gps_off");
+        setShowGpsDialog(true);
+      }
+    }, 5e3);
+    navigator.geolocation.getCurrentPosition(
+      async (pos) => {
+        clearTimeout(timeoutId);
+        setIsGeolocating(false);
+        const { latitude: lat, longitude: lng } = pos.coords;
+        const map = mapInstanceRef.current;
+        const L = window.L;
+        handleLocationChange(lat, lng);
+        if (!markerRef.current) {
+          markerRef.current = L.marker([lat, lng], { draggable: true }).addTo(
+            map
+          );
+          markerRef.current.on("dragend", async (e) => {
+            const { lat: dragLat, lng: dragLng } = e.target.getLatLng();
+            handleLocationChange(dragLat, dragLng);
+            if (handleAddressChange) {
+              setIsGeocoding(true);
+              const address = await reverseGeocode(dragLat, dragLng);
+              handleAddressChange(address);
+              setIsGeocoding(false);
+            }
+          });
+        } else {
+          markerRef.current.setLatLng([lat, lng]);
+        }
+        map.setView([lat, lng], 17, { animate: true });
+        if (handleAddressChange) {
+          setIsGeocoding(true);
+          const address = await reverseGeocode(lat, lng);
+          handleAddressChange(address);
+          setIsGeocoding(false);
+        }
+        import_react_hot_toast2.default.success("\u0645\u0648\u0642\u0639\u06CC\u062A \u0645\u06A9\u0627\u0646\u06CC \u0628\u0627 \u0645\u0648\u0641\u0642\u06CC\u062A \u062F\u0631\u06CC\u0627\u0641\u062A \u0634\u062F");
+      },
+      (error2) => {
+        clearTimeout(timeoutId);
+        setIsGeolocating(false);
+        switch (error2.code) {
+          case error2.PERMISSION_DENIED:
+            setGpsErrorType("permission");
+            break;
+          case error2.POSITION_UNAVAILABLE:
+          case error2.TIMEOUT:
+            setGpsErrorType("gps_off");
+            break;
+          default:
+            setGpsErrorType("other");
+            break;
+        }
+        setShowGpsDialog(true);
+      },
+      {
+        enableHighAccuracy: true,
+        timeout: 8e3,
+        maximumAge: 0
+      }
+    );
+  };
+  const handleClearLocation = () => {
+    if (markerRef.current) {
+      markerRef.current.remove();
+      markerRef.current = null;
+    }
+    handleLocationChange(null, null);
+    if (handleAddressChange) handleAddressChange("");
+  };
+  const handleGpsDialogClose = () => setShowGpsDialog(false);
+  const handleRetryLocation = () => {
+    setShowGpsDialog(false);
+    setTimeout(handleCurrentLocation, 500);
+  };
+  const handleOpenSettings = () => {
+    setShowGpsDialog(false);
+    (0, import_react_hot_toast2.default)(
+      /* @__PURE__ */ React.createElement("div", { dir: "rtl", style: { textAlign: "right" } }, /* @__PURE__ */ React.createElement(import_material34.Typography, { variant: "body2", sx: { mb: 1 } }, "\u0644\u0637\u0641\u0627\u064B \u0645\u0631\u0627\u062D\u0644 \u0632\u06CC\u0631 \u0631\u0627 \u0627\u0646\u062C\u0627\u0645 \u062F\u0647\u06CC\u062F:"), /* @__PURE__ */ React.createElement(import_material34.Typography, { variant: "caption", component: "div" }, "\u06F1. \u062A\u0646\u0638\u06CC\u0645\u0627\u062A \u062F\u0633\u062A\u06AF\u0627\u0647"), /* @__PURE__ */ React.createElement(import_material34.Typography, { variant: "caption", component: "div" }, "\u06F2. \u0645\u0648\u0642\u0639\u06CC\u062A \u0645\u06A9\u0627\u0646\u06CC"), /* @__PURE__ */ React.createElement(import_material34.Typography, { variant: "caption", component: "div" }, "\u06F3. \u0641\u0639\u0627\u0644 \u06A9\u0631\u062F\u0646 GPS")),
+      { duration: 8e3 }
+    );
+  };
+  return /* @__PURE__ */ React.createElement(import_material34.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React.createElement(import_react_hot_toast2.Toaster, { position: "top-center" }), /* @__PURE__ */ React.createElement(import_material34.Dialog, { open: showGpsDialog, onClose: handleGpsDialogClose }, /* @__PURE__ */ React.createElement(import_material34.DialogTitle, null, "\u0645\u0634\u06A9\u0644 \u062F\u0631 \u062F\u0631\u06CC\u0627\u0641\u062A \u0645\u0648\u0642\u0639\u06CC\u062A \u0645\u06A9\u0627\u0646\u06CC"), /* @__PURE__ */ React.createElement(import_material34.DialogContent, null, gpsErrorType === "permission" ? /* @__PURE__ */ React.createElement(import_material34.Typography, null, "\u062F\u0633\u062A\u0631\u0633\u06CC \u0628\u0647 \u0645\u0648\u0642\u0639\u06CC\u062A \u0645\u06A9\u0627\u0646\u06CC \u0631\u062F \u0634\u062F\u0647 \u0627\u0633\u062A.", /* @__PURE__ */ React.createElement("br", null), "\u06F1. \u0631\u0648\u06CC \u0622\u06CC\u06A9\u0648\u0646 \u0642\u0641\u0644 \u062F\u0631 \u0646\u0648\u0627\u0631 \u0622\u062F\u0631\u0633 \u06A9\u0644\u06CC\u06A9 \u06A9\u0646\u06CC\u062F", /* @__PURE__ */ React.createElement("br", null), "\u06F2. \u0645\u0648\u0642\u0639\u06CC\u062A \u0645\u06A9\u0627\u0646\u06CC \u2192 \u0627\u062C\u0627\u0632\u0647 \u062F\u0647\u06CC\u062F") : gpsErrorType === "gps_off" ? /* @__PURE__ */ React.createElement(import_material34.Typography, null, "GPS \u062E\u0627\u0645\u0648\u0634 \u0627\u0633\u062A. \u0644\u0637\u0641\u0627\u064B \u0641\u0639\u0627\u0644 \u06A9\u0646\u06CC\u062F.") : /* @__PURE__ */ React.createElement(import_material34.Typography, null, "\u062E\u0637\u0627\u06CC\u06CC \u0631\u062E \u062F\u0627\u062F\u0647 \u0627\u0633\u062A. \u062F\u0648\u0628\u0627\u0631\u0647 \u062A\u0644\u0627\u0634 \u06A9\u0646\u06CC\u062F.")), /* @__PURE__ */ React.createElement(import_material34.DialogActions, { sx: { pb: 2, pr: 2 } }, /* @__PURE__ */ React.createElement(import_material34.Button, { onClick: handleGpsDialogClose }, "\u0627\u0646\u0635\u0631\u0627\u0641"), gpsErrorType === "permission" ? /* @__PURE__ */ React.createElement(
+    import_material34.Button,
+    {
+      onClick: handleRetryLocation,
+      variant: "contained",
+      color: "primary"
+    },
+    "\u062A\u0644\u0627\u0634 \u0645\u062C\u062F\u062F"
+  ) : /* @__PURE__ */ React.createElement(
+    import_material34.Button,
+    {
+      onClick: handleOpenSettings,
+      variant: "contained",
+      color: "primary"
+    },
+    "\u0631\u0627\u0647\u0646\u0645\u0627"
+  ))), /* @__PURE__ */ React.createElement(import_material34.Box, { sx: { position: "relative", height: "370px", width: "100%" } }, /* @__PURE__ */ React.createElement(
+    import_material34.Paper,
+    {
+      sx: {
+        height: "100%",
+        position: "relative",
+        overflow: "hidden",
+        borderRadius: 2,
+        border: error ? 2 : 0,
+        borderColor: error ? "error.main" : "transparent"
+      }
+    },
+    (isMapLoading || isGeocoding || isGeolocating || isLoading) && /* @__PURE__ */ React.createElement(
+      import_material34.Box,
+      {
+        sx: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: isDarkMode ? "rgba(18,18,18,0.9)" : "rgba(255,255,255,0.8)",
+          zIndex: 1e3,
+          flexDirection: "column",
+          gap: 1
+        }
+      },
+      /* @__PURE__ */ React.createElement(import_material34.CircularProgress, null),
+      /* @__PURE__ */ React.createElement(import_material34.Typography, null, isMapLoading ? "\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0630\u0627\u0631\u06CC \u0646\u0642\u0634\u0647..." : isLoading ? "\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0630\u0627\u0631\u06CC \u0627\u0637\u0644\u0627\u0639\u0627\u062A \u0645\u0648\u0642\u0639\u06CC\u062A..." : isGeocoding ? "\u062F\u0631 \u062D\u0627\u0644 \u062F\u0631\u06CC\u0627\u0641\u062A \u0622\u062F\u0631\u0633..." : "\u062F\u0631 \u062D\u0627\u0644 \u062F\u0631\u06CC\u0627\u0641\u062A \u0645\u0648\u0642\u0639\u06CC\u062A \u0641\u0639\u0644\u06CC...")
+    ),
+    /* @__PURE__ */ React.createElement("div", { ref: mapRef, style: { height: "100%", width: "100%" } }),
+    /* @__PURE__ */ React.createElement(
+      import_material34.Box,
+      {
+        sx: {
+          position: "absolute",
+          bottom: 16,
+          right: 16,
+          display: "flex",
+          flexDirection: "column",
+          gap: 1,
+          zIndex: 1e3
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        import_material34.IconButton,
+        {
+          onClick: handleCurrentLocation,
+          disabled: isGeolocating,
+          sx: {
+            backgroundColor: isDarkMode ? "#1e1e1e" : "white",
+            boxShadow: 2,
+            "&:hover": {
+              backgroundColor: isDarkMode ? "#2a2a2a" : "#f5f5f5"
+            }
+          },
+          title: "\u0645\u0648\u0642\u0639\u06CC\u062A \u0641\u0639\u0644\u06CC"
+        },
+        /* @__PURE__ */ React.createElement(import_md13.MdMyLocation, null)
+      ),
+      hasExistingLocation && /* @__PURE__ */ React.createElement(
+        import_material34.IconButton,
+        {
+          onClick: handleClearLocation,
+          sx: {
+            backgroundColor: isDarkMode ? "#1e1e1e" : "white",
+            color: theme3.palette.error.main,
+            boxShadow: 2,
+            "&:hover": {
+              backgroundColor: isDarkMode ? "#2a2a2a" : "#f5f5f5"
+            }
+          },
+          title: "\u067E\u0627\u06A9 \u06A9\u0631\u062F\u0646 \u0645\u0648\u0642\u0639\u06CC\u062A"
+        },
+        /* @__PURE__ */ React.createElement(import_md13.MdOutlineClear, null)
+      )
+    )
+  )), /* @__PURE__ */ React.createElement(
+    import_material34.Box,
+    {
+      sx: {
+        mt: 1,
+        p: 1.5,
+        backgroundColor: isDarkMode ? "#1e1e1e" : "#f5f5f5",
+        borderRadius: 1,
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
+      }
+    },
+    /* @__PURE__ */ React.createElement(import_material34.Typography, { variant: "body2", sx: { fontFamily: "monospace" } }, /* @__PURE__ */ React.createElement("strong", null, "\u0639\u0631\u0636 \u062C\u063A\u0631\u0627\u0641\u06CC\u0627\u06CC\u06CC:"), " ", typeof latitude === "number" ? latitude.toFixed(6) : "\u2014"),
+    /* @__PURE__ */ React.createElement(import_material34.Typography, { variant: "body2", sx: { fontFamily: "monospace" } }, /* @__PURE__ */ React.createElement("strong", null, "\u0637\u0648\u0644 \u062C\u063A\u0631\u0627\u0641\u06CC\u0627\u06CC\u06CC:"), " ", typeof longitude === "number" ? longitude.toFixed(6) : "\u2014")
+  ), error && helperText && /* @__PURE__ */ React.createElement(
+    import_material34.Typography,
+    {
+      variant: "caption",
+      sx: {
+        color: "error.main",
+        mt: 0.5,
+        display: "block",
+        px: 1.5
+      }
+    },
+    helperText
+  ));
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -6142,6 +6551,7 @@ var upload_image_default = UploadImage2;
   HorizontalStepper,
   ImgViewer,
   LicensePlate,
+  MapLocationPicker,
   MobileDateTimePicker,
   Modal,
   NestedSelectort,