{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "map",
  "type": "registry:ui",
  "title": "Map",
  "author": "Hin",
  "description": "A map component.",
  "dependencies": [
    "leaflet",
    "leaflet-draw",
    "leaflet.markercluster",
    "leaflet.fullscreen",
    "react-leaflet",
    "react-leaflet-markercluster",
    "next-themes"
  ],
  "devDependencies": [
    "@types/leaflet",
    "@types/leaflet-draw",
    "@types/leaflet.markercluster"
  ],
  "registryDependencies": [
    "button",
    "button-group",
    "dropdown-menu",
    "https://shadcn-place-autocomplete.vercel.app/r/place-autocomplete.json"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/ui/map.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { ButtonGroup } from \"@/registry/new-york-v4/ui/button-group\"\nimport {\n    DropdownMenu,\n    DropdownMenuCheckboxItem,\n    DropdownMenuContent,\n    DropdownMenuLabel,\n    DropdownMenuRadioGroup,\n    DropdownMenuRadioItem,\n    DropdownMenuSeparator,\n    DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n    PlaceAutocomplete,\n    type PlaceAutocompleteProps,\n} from \"@/registry/new-york-v4/ui/place-autocomplete\"\nimport type {\n    Circle,\n    CircleMarker,\n    DivIconOptions,\n    Draw,\n    DrawEvents,\n    DrawMap,\n    DrawOptions,\n    EditToolbar,\n    ErrorEvent,\n    FeatureGroup,\n    LatLngExpression,\n    LayerGroup,\n    Map as LeafletMap,\n    LocateOptions,\n    LocationEvent,\n    Marker,\n    MarkerCluster,\n    PointExpression,\n    Polygon,\n    Polyline,\n    Popup,\n    Rectangle,\n    TileLayer,\n    Tooltip,\n} from \"leaflet\"\nimport \"leaflet-draw/dist/leaflet.draw.css\"\nimport \"leaflet.fullscreen/dist/Control.FullScreen.css\"\nimport type {} from \"leaflet.markercluster\"\nimport \"leaflet.markercluster/dist/MarkerCluster.css\"\nimport \"leaflet.markercluster/dist/MarkerCluster.Default.css\"\nimport \"leaflet/dist/leaflet.css\"\nimport {\n    CircleIcon,\n    LayersIcon,\n    LoaderCircleIcon,\n    MapPinIcon,\n    MaximizeIcon,\n    MinimizeIcon,\n    MinusIcon,\n    NavigationIcon,\n    PenLineIcon,\n    PentagonIcon,\n    PlusIcon,\n    SquareIcon,\n    Trash2Icon,\n    Undo2Icon,\n    WaypointsIcon,\n} from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\nimport React, {\n    Suspense,\n    createContext,\n    lazy,\n    useContext,\n    useEffect,\n    useRef,\n    useState,\n    type ComponentType,\n    type ReactNode,\n    type Ref,\n} from \"react\"\nimport { renderToString } from \"react-dom/server\"\nimport {\n    useMap,\n    useMapEvents,\n    type CircleMarkerProps,\n    type CircleProps,\n    type LayerGroupProps,\n    type MapContainerProps,\n    type MarkerProps,\n    type PolygonProps,\n    type PolylineProps,\n    type PopupProps,\n    type RectangleProps,\n    type TileLayerProps,\n    type TooltipProps,\n} from \"react-leaflet\"\nimport type { MarkerClusterGroupProps } from \"react-leaflet-markercluster\"\n\nfunction createLazyComponent<T extends ComponentType<any>>(\n    factory: () => Promise<{ default: T }>\n) {\n    const LazyComponent = lazy(factory)\n\n    return (props: React.ComponentProps<T>) => {\n        const [isMounted, setIsMounted] = useState(false)\n\n        useEffect(() => {\n            setIsMounted(true)\n        }, [])\n\n        if (!isMounted) {\n            return null\n        }\n\n        return (\n            <Suspense>\n                <LazyComponent {...props} />\n            </Suspense>\n        )\n    }\n}\n\nconst LeafletMapContainer = createLazyComponent(() =>\n    import(\"react-leaflet\").then((mod) => ({\n        default: mod.MapContainer,\n    }))\n)\nconst LeafletTileLayer = createLazyComponent(() =>\n    import(\"react-leaflet\").then((mod) => ({\n        default: mod.TileLayer,\n    }))\n)\nconst LeafletMarker = createLazyComponent(() =>\n    import(\"react-leaflet\").then((mod) => ({\n        default: mod.Marker,\n    }))\n)\nconst LeafletPopup = createLazyComponent(() =>\n    import(\"react-leaflet\").then((mod) => ({\n        default: mod.Popup,\n    }))\n)\nconst LeafletTooltip = createLazyComponent(() =>\n    import(\"react-leaflet\").then((mod) => ({\n        default: mod.Tooltip,\n    }))\n)\nconst LeafletCircle = createLazyComponent(() =>\n    import(\"react-leaflet\").then((mod) => ({\n        default: mod.Circle,\n    }))\n)\nconst LeafletCircleMarker = createLazyComponent(() =>\n    import(\"react-leaflet\").then((mod) => ({\n        default: mod.CircleMarker,\n    }))\n)\nconst LeafletPolyline = createLazyComponent(() =>\n    import(\"react-leaflet\").then((mod) => ({\n        default: mod.Polyline,\n    }))\n)\nconst LeafletPolygon = createLazyComponent(() =>\n    import(\"react-leaflet\").then((mod) => ({\n        default: mod.Polygon,\n    }))\n)\nconst LeafletRectangle = createLazyComponent(() =>\n    import(\"react-leaflet\").then((mod) => ({\n        default: mod.Rectangle,\n    }))\n)\nconst LeafletLayerGroup = createLazyComponent(() =>\n    import(\"react-leaflet\").then((mod) => ({\n        default: mod.LayerGroup,\n    }))\n)\nconst LeafletFeatureGroup = createLazyComponent(() =>\n    import(\"react-leaflet\").then((mod) => ({\n        default: mod.FeatureGroup,\n    }))\n)\nconst LeafletMarkerClusterGroup = createLazyComponent(async () =>\n    import(\"react-leaflet-markercluster\").then((mod) => ({\n        default: mod.default,\n    }))\n)\n\nfunction Map({\n    zoom = 15,\n    maxZoom = 18,\n    className,\n    ...props\n}: Omit<MapContainerProps, \"zoomControl\"> & {\n    center: LatLngExpression\n    ref?: Ref<LeafletMap>\n}) {\n    return (\n        <LeafletMapContainer\n            zoom={zoom}\n            maxZoom={maxZoom}\n            attributionControl={false}\n            zoomControl={false}\n            className={cn(\n                \"z-50 size-full min-h-96 flex-1 rounded-md\",\n                className\n            )}\n            {...props}\n        />\n    )\n}\n\ninterface MapTileLayerOption {\n    name: string\n    url: string\n    attribution?: string\n}\n\ninterface MapLayerGroupOption\n    extends Pick<\n        React.ComponentProps<typeof DropdownMenuCheckboxItem>,\n        \"disabled\"\n    > {\n    name: string\n}\n\ninterface MapLayersContextType {\n    registerTileLayer: (layer: MapTileLayerOption) => void\n    tileLayers: MapTileLayerOption[]\n    selectedTileLayer: string\n    setSelectedTileLayer: (name: string) => void\n    registerLayerGroup: (layer: MapLayerGroupOption) => void\n    layerGroups: MapLayerGroupOption[]\n    activeLayerGroups: string[]\n    setActiveLayerGroups: (names: string[]) => void\n}\n\nconst MapLayersContext = createContext<MapLayersContextType | null>(null)\n\nfunction useMapLayersContext() {\n    return useContext(MapLayersContext)\n}\n\nfunction MapTileLayer({\n    name = \"Default\",\n    url,\n    attribution,\n    darkUrl,\n    darkAttribution,\n    ...props\n}: Partial<TileLayerProps> & {\n    name?: string\n    darkUrl?: string\n    darkAttribution?: string\n    ref?: Ref<TileLayer>\n}) {\n    const map = useMap()\n    if (map.attributionControl) {\n        map.attributionControl.setPrefix(\"\")\n    }\n\n    const context = useContext(MapLayersContext)\n    const DEFAULT_URL =\n        \"https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png\"\n    const DEFAULT_DARK_URL =\n        \"https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png\"\n\n    const { resolvedTheme } = useTheme()\n    const resolvedUrl =\n        resolvedTheme === \"dark\"\n            ? (darkUrl ?? url ?? DEFAULT_DARK_URL)\n            : (url ?? DEFAULT_URL)\n    const resolvedAttribution =\n        resolvedTheme === \"dark\" && darkAttribution\n            ? darkAttribution\n            : (attribution ??\n              '&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>, &copy; <a href=\"https://carto.com/attributions\">CARTO</a>')\n\n    useEffect(() => {\n        if (context) {\n            context.registerTileLayer({\n                name,\n                url: resolvedUrl,\n                attribution: resolvedAttribution,\n            })\n        }\n    }, [context, name, url, attribution])\n\n    if (context && context.selectedTileLayer !== name) {\n        return null\n    }\n\n    return (\n        <LeafletTileLayer\n            url={resolvedUrl}\n            attribution={resolvedAttribution}\n            {...props}\n        />\n    )\n}\n\nfunction MapLayerGroup({\n    name,\n    disabled,\n    ...props\n}: LayerGroupProps & MapLayerGroupOption & { ref?: Ref<LayerGroup> }) {\n    const context = useMapLayersContext()\n\n    useEffect(() => {\n        if (context) {\n            context.registerLayerGroup({\n                name,\n                disabled,\n            })\n        }\n    }, [context, name, disabled])\n\n    if (context && !context.activeLayerGroups.includes(name)) {\n        return null\n    }\n\n    return <LeafletLayerGroup {...props} />\n}\n\nfunction MapFeatureGroup({\n    name,\n    disabled,\n    ...props\n}: LayerGroupProps & MapLayerGroupOption & { ref?: Ref<FeatureGroup> }) {\n    const context = useMapLayersContext()\n\n    useEffect(() => {\n        if (context) {\n            context.registerLayerGroup({\n                name,\n                disabled,\n            })\n        }\n    }, [context, name, disabled])\n\n    if (context && !context.activeLayerGroups.includes(name)) {\n        return null\n    }\n\n    return <LeafletFeatureGroup {...props} />\n}\n\nfunction MapLayers({\n    defaultTileLayer,\n    defaultLayerGroups = [],\n    ...props\n}: Omit<React.ComponentProps<typeof MapLayersContext.Provider>, \"value\"> & {\n    defaultTileLayer?: string\n    defaultLayerGroups?: string[]\n}) {\n    const [tileLayers, setTileLayers] = useState<MapTileLayerOption[]>([])\n    const [selectedTileLayer, setSelectedTileLayer] = useState<string>(\n        defaultTileLayer || \"\"\n    )\n    const [layerGroups, setLayerGroups] = useState<MapLayerGroupOption[]>([])\n    const [activeLayerGroups, setActiveLayerGroups] =\n        useState<string[]>(defaultLayerGroups)\n\n    function registerTileLayer(tileLayer: MapTileLayerOption) {\n        setTileLayers((prevTileLayers) => {\n            if (prevTileLayers.some((layer) => layer.name === tileLayer.name)) {\n                return prevTileLayers\n            }\n            return [...prevTileLayers, tileLayer]\n        })\n    }\n\n    function registerLayerGroup(layerGroup: MapLayerGroupOption) {\n        setLayerGroups((prevLayerGroups) => {\n            if (\n                prevLayerGroups.some((group) => group.name === layerGroup.name)\n            ) {\n                return prevLayerGroups\n            }\n            return [...prevLayerGroups, layerGroup]\n        })\n    }\n\n    useEffect(() => {\n        // Error: Invalid defaultValue\n        if (\n            defaultTileLayer &&\n            tileLayers.length > 0 &&\n            !tileLayers.some((tileLayer) => tileLayer.name === defaultTileLayer)\n        ) {\n            throw new Error(\n                `Invalid defaultTileLayer \"${defaultTileLayer}\" provided to MapLayers. It must match a MapTileLayer's name prop.`\n            )\n        }\n\n        // Set initial selected tile layer\n        if (tileLayers.length > 0 && !selectedTileLayer) {\n            const validDefaultValue =\n                defaultTileLayer &&\n                tileLayers.some((layer) => layer.name === defaultTileLayer)\n                    ? defaultTileLayer\n                    : tileLayers[0].name\n            setSelectedTileLayer(validDefaultValue)\n        }\n\n        // Error: Invalid defaultActiveLayerGroups\n        if (\n            defaultLayerGroups.length > 0 &&\n            layerGroups.length > 0 &&\n            defaultLayerGroups.some(\n                (name) => !layerGroups.some((group) => group.name === name)\n            )\n        ) {\n            throw new Error(\n                `Invalid defaultLayerGroups value provided to MapLayers. All names must match a MapLayerGroup's name prop.`\n            )\n        }\n    }, [\n        tileLayers,\n        defaultTileLayer,\n        selectedTileLayer,\n        layerGroups,\n        defaultLayerGroups,\n    ])\n\n    return (\n        <MapLayersContext.Provider\n            value={{\n                registerTileLayer,\n                tileLayers,\n                selectedTileLayer,\n                setSelectedTileLayer,\n                registerLayerGroup,\n                layerGroups,\n                activeLayerGroups,\n                setActiveLayerGroups,\n            }}\n            {...props}\n        />\n    )\n}\n\nfunction MapLayersControl({\n    tileLayersLabel = \"Map Type\",\n    layerGroupsLabel = \"Layers\",\n    position = \"top-1 right-1\",\n    className,\n    ...props\n}: React.ComponentProps<\"button\"> & {\n    tileLayersLabel?: string\n    layerGroupsLabel?: string\n    position?: string\n}) {\n    const map = useMap()\n    const layersContext = useMapLayersContext()\n    if (!layersContext) {\n        throw new Error(\"MapLayersControl must be used within MapLayers\")\n    }\n\n    const {\n        tileLayers,\n        selectedTileLayer,\n        setSelectedTileLayer,\n        layerGroups,\n        activeLayerGroups,\n        setActiveLayerGroups,\n    } = layersContext\n\n    if (tileLayers.length === 0 && layerGroups.length === 0) {\n        return null\n    }\n\n    function handleLayerGroupToggle(name: string, checked: boolean) {\n        setActiveLayerGroups(\n            checked\n                ? [...activeLayerGroups, name]\n                : activeLayerGroups.filter((groupName) => groupName !== name)\n        )\n    }\n\n    const showTileLayersDropdown = tileLayers.length > 1\n    const showLayerGroupsDropdown = layerGroups.length > 0\n\n    if (!showTileLayersDropdown && !showLayerGroupsDropdown) {\n        return null\n    }\n\n    return (\n        <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n                <Button\n                    type=\"button\"\n                    variant=\"secondary\"\n                    size=\"icon-sm\"\n                    aria-label=\"Select layers\"\n                    title=\"Select layers\"\n                    className={cn(\n                        \"absolute z-1000 border\",\n                        position,\n                        className\n                    )}\n                    {...props}>\n                    <LayersIcon />\n                </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n                align=\"end\"\n                className=\"z-1000\"\n                container={map.getContainer()}>\n                {showTileLayersDropdown && (\n                    <>\n                        <DropdownMenuLabel>{tileLayersLabel}</DropdownMenuLabel>\n                        <DropdownMenuRadioGroup\n                            value={selectedTileLayer}\n                            onValueChange={setSelectedTileLayer}>\n                            {tileLayers.map((tileLayer) => (\n                                <DropdownMenuRadioItem\n                                    key={tileLayer.name}\n                                    value={tileLayer.name}>\n                                    {tileLayer.name}\n                                </DropdownMenuRadioItem>\n                            ))}\n                        </DropdownMenuRadioGroup>\n                    </>\n                )}\n                {showTileLayersDropdown && showLayerGroupsDropdown && (\n                    <DropdownMenuSeparator />\n                )}\n                {showLayerGroupsDropdown && (\n                    <>\n                        <DropdownMenuLabel>\n                            {layerGroupsLabel}\n                        </DropdownMenuLabel>\n                        {layerGroups.map((layerGroup) => (\n                            <DropdownMenuCheckboxItem\n                                key={layerGroup.name}\n                                checked={activeLayerGroups.includes(\n                                    layerGroup.name\n                                )}\n                                disabled={layerGroup.disabled}\n                                onCheckedChange={(checked) =>\n                                    handleLayerGroupToggle(\n                                        layerGroup.name,\n                                        checked\n                                    )\n                                }>\n                                {layerGroup.name}\n                            </DropdownMenuCheckboxItem>\n                        ))}\n                    </>\n                )}\n            </DropdownMenuContent>\n        </DropdownMenu>\n    )\n}\n\nfunction MapMarker({\n    icon = <MapPinIcon className=\"size-6\" />,\n    iconAnchor = [12, 12],\n    bgPos,\n    popupAnchor,\n    tooltipAnchor,\n    ...props\n}: Omit<MarkerProps, \"icon\"> &\n    Pick<\n        DivIconOptions,\n        \"iconAnchor\" | \"bgPos\" | \"popupAnchor\" | \"tooltipAnchor\"\n    > & {\n        icon?: ReactNode\n        ref?: Ref<Marker>\n    }) {\n    const { L } = useLeaflet()\n    if (!L) return null\n\n    return (\n        <LeafletMarker\n            icon={L.divIcon({\n                html: renderToString(icon),\n                iconAnchor,\n                ...(bgPos ? { bgPos } : {}),\n                ...(popupAnchor ? { popupAnchor } : {}),\n                ...(tooltipAnchor ? { tooltipAnchor } : {}),\n            })}\n            riseOnHover\n            {...props}\n        />\n    )\n}\n\nfunction MapMarkerClusterGroup({\n    polygonOptions = {\n        className: \"fill-foreground stroke-foreground stroke-2\",\n    },\n    spiderLegPolylineOptions = {\n        className: \"fill-foreground stroke-foreground stroke-2\",\n    },\n    icon,\n    ...props\n}: Omit<MarkerClusterGroupProps, \"iconCreateFunction\"> & {\n    children: ReactNode\n    icon?: (markerCount: number) => ReactNode\n}) {\n    const { L } = useLeaflet()\n    if (!L) return null\n\n    const iconCreateFunction = icon\n        ? (cluster: MarkerCluster) => {\n              const markerCount = cluster.getChildCount()\n              const iconNode = icon(markerCount)\n              return L.divIcon({\n                  html: renderToString(iconNode),\n              })\n          }\n        : undefined\n\n    return (\n        <LeafletMarkerClusterGroup\n            polygonOptions={polygonOptions}\n            spiderLegPolylineOptions={spiderLegPolylineOptions}\n            iconCreateFunction={iconCreateFunction}\n            {...props}\n        />\n    )\n}\n\nfunction MapCircle({\n    className,\n    ...props\n}: CircleProps & { ref?: Ref<Circle> }) {\n    return (\n        <LeafletCircle\n            className={cn(\n                \"fill-foreground stroke-foreground stroke-2\",\n                className\n            )}\n            {...props}\n        />\n    )\n}\n\nfunction MapCircleMarker({\n    className,\n    ...props\n}: CircleMarkerProps & { ref?: Ref<CircleMarker> }) {\n    return (\n        <LeafletCircleMarker\n            className={cn(\n                \"fill-foreground stroke-foreground stroke-2\",\n                className\n            )}\n            {...props}\n        />\n    )\n}\n\nfunction MapPolyline({\n    className,\n    ...props\n}: PolylineProps & { ref?: Ref<Polyline> }) {\n    return (\n        <LeafletPolyline\n            className={cn(\n                \"fill-foreground stroke-foreground stroke-2\",\n                className\n            )}\n            {...props}\n        />\n    )\n}\n\nfunction MapPolygon({\n    className,\n    ...props\n}: PolygonProps & { ref?: Ref<Polygon> }) {\n    return (\n        <LeafletPolygon\n            className={cn(\n                \"fill-foreground stroke-foreground stroke-2\",\n                className\n            )}\n            {...props}\n        />\n    )\n}\n\nfunction MapRectangle({\n    className,\n    ...props\n}: RectangleProps & { ref?: Ref<Rectangle> }) {\n    return (\n        <LeafletRectangle\n            className={cn(\n                \"fill-foreground stroke-foreground stroke-2\",\n                className\n            )}\n            {...props}\n        />\n    )\n}\n\nfunction MapPopup({\n    className,\n    ...props\n}: Omit<PopupProps, \"content\"> & { ref?: Ref<Popup> }) {\n    return (\n        <LeafletPopup\n            className={cn(\n                \"bg-popover text-popover-foreground animate-in fade-out-0 fade-in-0 zoom-out-95 zoom-in-95 slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 font-sans shadow-md outline-hidden\",\n                className\n            )}\n            {...props}\n        />\n    )\n}\n\nfunction MapTooltip({\n    className,\n    children,\n    side = \"top\",\n    sideOffset = 15,\n    ...props\n}: Omit<TooltipProps, \"offset\"> & {\n    side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n    sideOffset?: number\n    ref?: Ref<Tooltip>\n}) {\n    const ARROW_POSITION_CLASSES = {\n        top: \"bottom-0.5 left-1/2 -translate-x-1/2 translate-y-1/2\",\n        bottom: \"top-0.5 left-1/2 -translate-x-1/2 -translate-y-1/2\",\n        left: \"right-0.5 top-1/2 translate-x-1/2 -translate-y-1/2\",\n        right: \"left-0.5 top-1/2 -translate-x-1/2 -translate-y-1/2\",\n    }\n    const DEFAULT_OFFSET = {\n        top: [0, -sideOffset] satisfies PointExpression,\n        bottom: [0, sideOffset] satisfies PointExpression,\n        left: [-sideOffset, 0] satisfies PointExpression,\n        right: [sideOffset, 0] satisfies PointExpression,\n    }\n\n    return (\n        <LeafletTooltip\n            className={cn(\n                \"animate-in fade-in-0 zoom-in-95 fade-out-0 zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 w-fit text-xs text-balance transition-opacity\",\n                className\n            )}\n            data-side={side}\n            direction={side}\n            offset={DEFAULT_OFFSET[side]}\n            opacity={1}\n            {...props}>\n            {children}\n            <div\n                className={cn(\n                    \"bg-foreground fill-foreground absolute z-50 size-2.5 rotate-45 rounded-[2px]\",\n                    ARROW_POSITION_CLASSES[side]\n                )}\n            />\n        </LeafletTooltip>\n    )\n}\n\nfunction MapZoomControl({\n    position = \"top-1 left-1\",\n    className,\n    ...props\n}: React.ComponentProps<\"div\"> & { position?: string }) {\n    const map = useMap()\n    const [zoomLevel, setZoomLevel] = useState(map.getZoom())\n\n    useMapEvents({\n        zoomend: () => {\n            setZoomLevel(map.getZoom())\n        },\n    })\n\n    return (\n        <MapControlContainer className={cn(position, className)}>\n            <ButtonGroup\n                orientation=\"vertical\"\n                aria-label=\"Zoom controls\"\n                {...props}>\n                <Button\n                    type=\"button\"\n                    size=\"icon-sm\"\n                    variant=\"secondary\"\n                    aria-label=\"Zoom in\"\n                    title=\"Zoom in\"\n                    className=\"border\"\n                    disabled={zoomLevel >= map.getMaxZoom()}\n                    onClick={() => map.zoomIn()}>\n                    <PlusIcon />\n                </Button>\n                <Button\n                    type=\"button\"\n                    size=\"icon-sm\"\n                    variant=\"secondary\"\n                    aria-label=\"Zoom out\"\n                    title=\"Zoom out\"\n                    className=\"border\"\n                    disabled={zoomLevel <= map.getMinZoom()}\n                    onClick={() => map.zoomOut()}>\n                    <MinusIcon />\n                </Button>\n            </ButtonGroup>\n        </MapControlContainer>\n    )\n}\n\nfunction MapFullscreenControl({\n    position = \"top-1 right-1\",\n    className,\n    ...props\n}: React.ComponentProps<\"button\"> & { position?: string }) {\n    const map = useMap()\n    const [isFullscreen, setIsFullscreen] = useState(false)\n\n    const { L } = useLeaflet()\n\n    useEffect(() => {\n        if (!L) return\n\n        const fullscreenControl = new L.Control.FullScreen()\n        fullscreenControl.addTo(map)\n\n        const container = fullscreenControl.getContainer()\n        if (container) {\n            container.style.display = \"none\"\n        }\n\n        const handleEnter = () => setIsFullscreen(true)\n        const handleExit = () => setIsFullscreen(false)\n\n        map.on(\"enterFullscreen\", handleEnter)\n        map.on(\"exitFullscreen\", handleExit)\n\n        return () => {\n            fullscreenControl.remove()\n            map.off(\"enterFullscreen\", handleEnter)\n            map.off(\"exitFullscreen\", handleExit)\n        }\n    }, [L, map])\n\n    return (\n        <MapControlContainer className={cn(position, className)}>\n            <Button\n                type=\"button\"\n                size=\"icon-sm\"\n                variant=\"secondary\"\n                onClick={() => map.toggleFullscreen()}\n                aria-label={\n                    isFullscreen ? \"Exit fullscreen\" : \"Enter fullscreen\"\n                }\n                title={isFullscreen ? \"Exit fullscreen\" : \"Enter fullscreen\"}\n                className=\"border\"\n                {...props}>\n                {isFullscreen ? <MinimizeIcon /> : <MaximizeIcon />}\n            </Button>\n        </MapControlContainer>\n    )\n}\n\nfunction MapLocatePulseIcon() {\n    return (\n        <div className=\"absolute -top-1 -right-1 flex size-3 rounded-full\">\n            <div className=\"bg-primary absolute inline-flex size-full animate-ping rounded-full opacity-75\" />\n            <div className=\"bg-primary relative inline-flex size-3 rounded-full\" />\n        </div>\n    )\n}\n\nfunction MapLocateControl({\n    watch = false,\n    onLocationFound,\n    onLocationError,\n    position = \"right-1 bottom-1\",\n    className,\n    ...props\n}: React.ComponentProps<\"button\"> &\n    Pick<LocateOptions, \"watch\"> & {\n        onLocationFound?: (location: LocationEvent) => void\n        onLocationError?: (error: ErrorEvent) => void\n    } & { position?: string }) {\n    const map = useMap()\n    const [isLocating, setIsLocating] = useDebounceLoadingState(200)\n    const [location, setLocation] = useState<LatLngExpression | null>(null)\n\n    function startLocating() {\n        setIsLocating(true)\n        map.locate({ setView: true, maxZoom: map.getMaxZoom(), watch })\n        map.on(\"locationfound\", (location: LocationEvent) => {\n            setLocation(location.latlng)\n            setIsLocating(false)\n            onLocationFound?.(location)\n        })\n        map.on(\"locationerror\", (error: ErrorEvent) => {\n            setLocation(null)\n            setIsLocating(false)\n            onLocationError?.(error)\n        })\n    }\n\n    function stopLocating() {\n        map.stopLocate()\n        map.off(\"locationfound\")\n        map.off(\"locationerror\")\n        setLocation(null)\n        setIsLocating(false)\n    }\n\n    useEffect(() => () => stopLocating(), [])\n\n    return (\n        <MapControlContainer className={cn(position, className)}>\n            <Button\n                type=\"button\"\n                size=\"icon-sm\"\n                variant={location ? \"default\" : \"secondary\"}\n                onClick={location ? stopLocating : startLocating}\n                disabled={isLocating}\n                title={\n                    isLocating\n                        ? \"Locating...\"\n                        : location\n                          ? \"Stop tracking\"\n                          : \"Track location\"\n                }\n                aria-label={\n                    isLocating\n                        ? \"Locating...\"\n                        : location\n                          ? \"Stop location tracking\"\n                          : \"Start location tracking\"\n                }\n                className=\"border\"\n                {...props}>\n                {isLocating ? (\n                    <LoaderCircleIcon className=\"animate-spin\" />\n                ) : (\n                    <NavigationIcon />\n                )}\n            </Button>\n            {location && (\n                <MapMarker position={location} icon={<MapLocatePulseIcon />} />\n            )}\n        </MapControlContainer>\n    )\n}\n\nfunction MapSearchControl({\n    position = \"top-1 left-1\",\n    className,\n    ...props\n}: PlaceAutocompleteProps & { position?: string }) {\n    return (\n        <MapControlContainer className={cn(\"z-1001 w-60\", position, className)}>\n            <PlaceAutocomplete {...props} />\n        </MapControlContainer>\n    )\n}\n\ntype MapDrawShape = \"marker\" | \"polyline\" | \"circle\" | \"rectangle\" | \"polygon\"\ntype MapDrawAction = \"edit\" | \"delete\"\ntype MapDrawMode = MapDrawShape | MapDrawAction | null\ninterface MapDrawContextType {\n    readonly featureGroup: L.FeatureGroup | null\n    activeMode: MapDrawMode\n    setActiveMode: (mode: MapDrawMode) => void\n    readonly editControlRef: React.RefObject<EditToolbar.Edit | null>\n    readonly deleteControlRef: React.RefObject<EditToolbar.Delete | null>\n    readonly layersCount: number\n}\n\nconst MapDrawContext = createContext<MapDrawContextType | null>(null)\n\nfunction useMapDrawContext() {\n    return useContext(MapDrawContext)\n}\n\nfunction MapDrawControl({\n    onLayersChange,\n    position = \"bottom-1 left-1\",\n    className,\n    ...props\n}: React.ComponentProps<\"div\"> & {\n    onLayersChange?: (layers: L.FeatureGroup) => void\n    position?: string\n}) {\n    const { L, LeafletDraw } = useLeaflet()\n    const map = useMap()\n    const featureGroupRef = useRef<L.FeatureGroup | null>(null)\n    const editControlRef = useRef<EditToolbar.Edit | null>(null)\n    const deleteControlRef = useRef<EditToolbar.Delete | null>(null)\n    const [activeMode, setActiveMode] = useState<MapDrawMode>(null)\n    const [layersCount, setLayersCount] = useState(0)\n\n    function updateLayersCount() {\n        if (featureGroupRef.current) {\n            setLayersCount(featureGroupRef.current.getLayers().length)\n        }\n    }\n\n    function handleDrawCreated(event: DrawEvents.Created) {\n        if (!featureGroupRef.current) return\n        const { layer } = event\n        featureGroupRef.current.addLayer(layer)\n        onLayersChange?.(featureGroupRef.current)\n        updateLayersCount()\n        setActiveMode(null)\n    }\n\n    function handleDrawEditedOrDeleted() {\n        if (!featureGroupRef.current) return\n        onLayersChange?.(featureGroupRef.current)\n        updateLayersCount()\n        setActiveMode(null)\n    }\n\n    useEffect(() => {\n        if (!L || !LeafletDraw || !map) return\n\n        map.on(\n            L.Draw.Event.CREATED,\n            handleDrawCreated as L.LeafletEventHandlerFn\n        )\n        map.on(L.Draw.Event.EDITED, handleDrawEditedOrDeleted)\n        map.on(L.Draw.Event.DELETED, handleDrawEditedOrDeleted)\n\n        return () => {\n            map.off(\n                L.Draw.Event.CREATED,\n                handleDrawCreated as L.LeafletEventHandlerFn\n            )\n            map.off(L.Draw.Event.EDITED, handleDrawEditedOrDeleted)\n            map.off(L.Draw.Event.DELETED, handleDrawEditedOrDeleted)\n        }\n    }, [L, LeafletDraw, map, onLayersChange])\n\n    return (\n        <MapDrawContext.Provider\n            value={{\n                featureGroup: featureGroupRef.current,\n                activeMode,\n                setActiveMode,\n                editControlRef,\n                deleteControlRef,\n                layersCount,\n            }}>\n            <LeafletFeatureGroup ref={featureGroupRef} />\n            <MapControlContainer className={cn(position, className)}>\n                <ButtonGroup orientation=\"vertical\" {...props} />\n            </MapControlContainer>\n        </MapDrawContext.Provider>\n    )\n}\n\nfunction MapDrawShapeButton<T extends Draw.Feature>({\n    drawMode,\n    createDrawTool,\n    className,\n    ...props\n}: React.ComponentProps<\"button\"> & {\n    drawMode: MapDrawShape\n    createDrawTool: (L: typeof import(\"leaflet\"), map: DrawMap) => T\n}) {\n    const drawContext = useMapDrawContext()\n    if (!drawContext) {\n        throw new Error(\"MapDrawShapeButton must be used within MapDrawControl\")\n    }\n    const { L } = useLeaflet()\n    const map = useMap()\n    const controlRef = useRef<T | null>(null)\n    const { activeMode, setActiveMode } = drawContext\n    const isActive = activeMode === drawMode\n\n    useEffect(() => {\n        if (!L || !isActive) {\n            controlRef.current?.disable()\n            controlRef.current = null\n            return\n        }\n        const control = createDrawTool(L, map as DrawMap)\n        control.enable()\n        controlRef.current = control\n        return () => {\n            control.disable()\n            controlRef.current = null\n        }\n    }, [L, map, isActive, createDrawTool])\n\n    function handleClick() {\n        setActiveMode(isActive ? null : drawMode)\n    }\n\n    return (\n        <Button\n            type=\"button\"\n            size=\"icon-sm\"\n            aria-label={`Draw ${drawMode}`}\n            title={`Draw ${drawMode}`}\n            className={cn(\"border\", className)}\n            variant={isActive ? \"default\" : \"secondary\"}\n            disabled={activeMode === \"edit\" || activeMode === \"delete\"}\n            onClick={handleClick}\n            {...props}\n        />\n    )\n}\n\nfunction MapDrawMarker({ ...props }: DrawOptions.MarkerOptions) {\n    return (\n        <MapDrawShapeButton\n            drawMode=\"marker\"\n            createDrawTool={(L, map) =>\n                new L.Draw.Marker(map, {\n                    icon: L.divIcon({\n                        className: \"\", // For fixing the moving bug when going in and out the edit mode\n                        iconAnchor: [12, 12],\n                        html: renderToString(<MapPinIcon className=\"size-6\" />),\n                    }),\n                    ...props,\n                })\n            }>\n            <MapPinIcon />\n        </MapDrawShapeButton>\n    )\n}\n\nfunction MapDrawPolyline({\n    showLength = false,\n    drawError = {\n        color: \"var(--color-destructive)\",\n    },\n    shapeOptions = {\n        color: \"var(--color-primary)\",\n        opacity: 1,\n        weight: 2,\n    },\n    ...props\n}: DrawOptions.PolylineOptions) {\n    const mapDrawHandleIcon = useMapDrawHandleIcon()\n\n    return (\n        <MapDrawShapeButton\n            drawMode=\"polyline\"\n            createDrawTool={(L, map) =>\n                new L.Draw.Polyline(map, {\n                    ...(mapDrawHandleIcon\n                        ? {\n                              icon: mapDrawHandleIcon,\n                              touchIcon: mapDrawHandleIcon,\n                          }\n                        : {}),\n                    showLength,\n                    drawError,\n                    shapeOptions,\n                    ...props,\n                })\n            }>\n            <WaypointsIcon />\n        </MapDrawShapeButton>\n    )\n}\n\nfunction MapDrawCircle({\n    showRadius = false,\n    shapeOptions = {\n        color: \"var(--color-primary)\",\n        opacity: 1,\n        weight: 2,\n    },\n    ...props\n}: DrawOptions.CircleOptions) {\n    return (\n        <MapDrawShapeButton\n            drawMode=\"circle\"\n            createDrawTool={(L, map) =>\n                new L.Draw.Circle(map, {\n                    showRadius,\n                    shapeOptions,\n                    ...props,\n                })\n            }>\n            <CircleIcon />\n        </MapDrawShapeButton>\n    )\n}\n\nfunction MapDrawRectangle({\n    showArea = false,\n    shapeOptions = {\n        color: \"var(--color-primary)\",\n        opacity: 1,\n        weight: 2,\n    },\n    ...props\n}: DrawOptions.RectangleOptions) {\n    return (\n        <MapDrawShapeButton\n            drawMode=\"rectangle\"\n            createDrawTool={(L, map) =>\n                new L.Draw.Rectangle(map, {\n                    showArea,\n                    shapeOptions,\n                    ...props,\n                })\n            }>\n            <SquareIcon />\n        </MapDrawShapeButton>\n    )\n}\n\nfunction MapDrawPolygon({\n    drawError = {\n        color: \"var(--color-destructive)\",\n    },\n    shapeOptions = {\n        color: \"var(--color-primary)\",\n        opacity: 1,\n        weight: 2,\n    },\n    ...props\n}: DrawOptions.PolygonOptions) {\n    const mapDrawHandleIcon = useMapDrawHandleIcon()\n\n    return (\n        <MapDrawShapeButton\n            drawMode=\"polygon\"\n            createDrawTool={(L, map) =>\n                new L.Draw.Polygon(map, {\n                    ...(mapDrawHandleIcon\n                        ? {\n                              icon: mapDrawHandleIcon,\n                              touchIcon: mapDrawHandleIcon,\n                          }\n                        : {}),\n                    drawError,\n                    shapeOptions,\n                    ...props,\n                })\n            }>\n            <PentagonIcon />\n        </MapDrawShapeButton>\n    )\n}\n\nfunction MapDrawActionButton<T extends EditToolbar.Edit | EditToolbar.Delete>({\n    drawAction,\n    createDrawTool,\n    controlRef,\n    className,\n    ...props\n}: React.ComponentProps<\"button\"> & {\n    drawAction: MapDrawAction\n    createDrawTool: (\n        L: typeof import(\"leaflet\"),\n        map: DrawMap,\n        featureGroup: L.FeatureGroup\n    ) => T\n    controlRef: React.RefObject<T | null>\n}) {\n    const drawContext = useMapDrawContext()\n    if (!drawContext)\n        throw new Error(\n            \"MapDrawActionButton must be used within MapDrawControl\"\n        )\n\n    const { L } = useLeaflet()\n    const map = useMap()\n    const { featureGroup, activeMode, setActiveMode, layersCount } = drawContext\n    const isActive = activeMode === drawAction\n    const hasFeatures = layersCount > 0\n\n    useEffect(() => {\n        if (!L || !featureGroup || !isActive) {\n            controlRef.current?.disable?.()\n            controlRef.current = null\n            return\n        }\n        const control = createDrawTool(L, map as DrawMap, featureGroup)\n        control.enable?.()\n        controlRef.current = control\n        return () => {\n            control.disable?.()\n            controlRef.current = null\n        }\n    }, [L, map, isActive, featureGroup, createDrawTool])\n\n    function handleClick() {\n        controlRef.current?.save()\n        setActiveMode(isActive ? null : drawAction)\n    }\n\n    return (\n        <Button\n            type=\"button\"\n            size=\"icon-sm\"\n            aria-label={`${drawAction === \"edit\" ? \"Edit\" : \"Remove\"} shapes`}\n            title={`${drawAction === \"edit\" ? \"Edit\" : \"Remove\"} shapes`}\n            variant={isActive ? \"default\" : \"secondary\"}\n            disabled={!hasFeatures}\n            onClick={handleClick}\n            className={cn(\"border\", className)}\n            {...props}\n        />\n    )\n}\n\nfunction MapDrawEdit({\n    selectedPathOptions = {\n        color: \"var(--color-primary)\",\n        fillColor: \"var(--color-primary)\",\n        weight: 2,\n    },\n    ...props\n}: Omit<EditToolbar.EditHandlerOptions, \"featureGroup\">) {\n    const { L } = useLeaflet()\n    const mapDrawHandleIcon = useMapDrawHandleIcon()\n    const drawContext = useMapDrawContext()\n    if (!drawContext) {\n        throw new Error(\"MapDrawEdit must be used within MapDrawControl\")\n    }\n\n    useEffect(() => {\n        if (!L || !mapDrawHandleIcon) return\n\n        L.Edit.PolyVerticesEdit.mergeOptions({\n            icon: mapDrawHandleIcon,\n            touchIcon: mapDrawHandleIcon,\n            drawError: {\n                color: \"var(--color-destructive)\",\n            },\n        })\n        L.Edit.SimpleShape.mergeOptions({\n            moveIcon: mapDrawHandleIcon,\n            resizeIcon: mapDrawHandleIcon,\n            touchMoveIcon: mapDrawHandleIcon,\n            touchResizeIcon: mapDrawHandleIcon,\n        })\n        L.drawLocal.edit.handlers.edit.tooltip = {\n            text: \"Drag handles or markers to edit.\",\n            subtext: \"\",\n        }\n        L.drawLocal.edit.handlers.remove.tooltip = {\n            text: \"Click on a shape to remove.\",\n        }\n    }, [mapDrawHandleIcon])\n\n    return (\n        <MapDrawActionButton\n            drawAction=\"edit\"\n            controlRef={drawContext.editControlRef}\n            createDrawTool={(L, map, featureGroup) =>\n                new L.EditToolbar.Edit(map, {\n                    featureGroup,\n                    selectedPathOptions,\n                    ...props,\n                })\n            }>\n            <PenLineIcon />\n        </MapDrawActionButton>\n    )\n}\n\nfunction MapDrawDelete() {\n    const drawContext = useMapDrawContext()\n    if (!drawContext) {\n        throw new Error(\"MapDrawDelete must be used within MapDrawControl\")\n    }\n\n    return (\n        <MapDrawActionButton\n            drawAction=\"delete\"\n            controlRef={drawContext.deleteControlRef}\n            createDrawTool={(L, map, featureGroup) =>\n                new L.EditToolbar.Delete(map, { featureGroup })\n            }>\n            <Trash2Icon />\n        </MapDrawActionButton>\n    )\n}\n\nfunction MapDrawUndo({ className, ...props }: React.ComponentProps<\"button\">) {\n    const drawContext = useMapDrawContext()\n    if (!drawContext)\n        throw new Error(\"MapDrawUndo must be used within MapDrawControl\")\n\n    const {\n        activeMode,\n        setActiveMode,\n        editControlRef,\n        deleteControlRef,\n        layersCount,\n    } = drawContext\n    const isInEditMode = activeMode === \"edit\"\n    const isInDeleteMode = activeMode === \"delete\"\n    const isActive = (isInEditMode || isInDeleteMode) && layersCount > 0\n\n    function handleUndo() {\n        if (isInEditMode) {\n            editControlRef.current?.revertLayers()\n        } else if (isInDeleteMode) {\n            deleteControlRef.current?.revertLayers()\n        }\n        setActiveMode(null)\n    }\n\n    return (\n        <Button\n            type=\"button\"\n            size=\"icon-sm\"\n            variant=\"secondary\"\n            aria-label={`Undo ${activeMode}`}\n            title={`Undo ${activeMode}`}\n            onClick={handleUndo}\n            disabled={!isActive}\n            className={cn(\"border\", className)}\n            {...props}>\n            <Undo2Icon />\n        </Button>\n    )\n}\n\nfunction MapControlContainer({\n    className,\n    ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n    const { L } = useLeaflet()\n    const containerRef = useRef<HTMLDivElement>(null)\n\n    useEffect(() => {\n        if (!L) return\n        const element = containerRef.current\n        if (!element) return\n        L.DomEvent.disableClickPropagation(element)\n        L.DomEvent.disableScrollPropagation(element)\n    }, [L])\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(\"absolute z-1000 size-fit cursor-default\", className)}\n            {...props}\n        />\n    )\n}\n\nfunction useMapDrawHandleIcon() {\n    const { L } = useLeaflet()\n    if (!L) return null\n\n    return L.divIcon({\n        iconAnchor: [8, 8],\n        html: renderToString(\n            <CircleIcon className=\"fill-primary stroke-primary size-4 transition-transform hover:scale-110\" />\n        ),\n    })\n}\n\nfunction useLeaflet() {\n    const [L, setL] = useState<typeof import(\"leaflet\") | null>(null)\n    const [LeafletDraw, setLeafletDraw] = useState<\n        typeof import(\"leaflet-draw\") | null\n    >(null)\n\n    useEffect(() => {\n        async function loadLeaflet() {\n            const leaflet = await import(\"leaflet\")\n            const leafletFullscreen = await import(\"leaflet.fullscreen\")\n            const leafletDraw = await import(\"leaflet-draw\")\n\n            const L_object = leaflet.default\n            if (L_object.Control && !L_object.Control.FullScreen) {\n                L_object.Control.FullScreen =\n                    leafletFullscreen.default || leafletFullscreen\n            }\n\n            setLeafletDraw(leafletDraw)\n            setL(L_object)\n        }\n\n        if (L && LeafletDraw) return\n        if (typeof window === \"undefined\") return\n\n        loadLeaflet()\n    }, [L, LeafletDraw])\n\n    return { L, LeafletDraw }\n}\n\nfunction useDebounceLoadingState(delay = 200) {\n    const [isLoading, setIsLoading] = useState(false)\n    const [showLoading, setShowLoading] = useState(false)\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n    useEffect(() => {\n        if (isLoading) {\n            timeoutRef.current = setTimeout(() => {\n                setShowLoading(true)\n            }, delay)\n        } else {\n            if (timeoutRef.current) {\n                clearTimeout(timeoutRef.current)\n                timeoutRef.current = null\n            }\n            setShowLoading(false)\n        }\n\n        return () => {\n            if (timeoutRef.current) {\n                clearTimeout(timeoutRef.current)\n            }\n        }\n    }, [isLoading, delay])\n\n    return [showLoading, setIsLoading] as const\n}\n\nexport {\n    Map,\n    MapCircle,\n    MapCircleMarker,\n    MapControlContainer,\n    MapDrawCircle,\n    MapDrawControl,\n    MapDrawDelete,\n    MapDrawEdit,\n    MapDrawMarker,\n    MapDrawPolygon,\n    MapDrawPolyline,\n    MapDrawRectangle,\n    MapDrawUndo,\n    MapFeatureGroup,\n    MapFullscreenControl,\n    MapLayerGroup,\n    MapLayers,\n    MapLayersControl,\n    MapLocateControl,\n    MapMarker,\n    MapMarkerClusterGroup,\n    MapPolygon,\n    MapPolyline,\n    MapPopup,\n    MapRectangle,\n    MapSearchControl,\n    MapTileLayer,\n    MapTooltip,\n    MapZoomControl,\n    useLeaflet,\n}\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    "@layer base": {
      ".leaflet-container": {
        "@apply !bg-card !font-[inherit]": {}
      },
      ".leaflet-container a": {
        "@apply !text-inherit": {}
      },
      ".leaflet-div-icon": {
        "@apply !bg-transparent !border-none": {}
      },
      ".leaflet-popup-content-wrapper, .leaflet-popup-content, .leaflet-popup-content p": {
        "@apply ![all:unset]": {}
      },
      ".leaflet-popup": {
        "@apply !animate-none": {}
      },
      ".leaflet-popup-close-button": {
        "@apply ring-offset-background focus:ring-ring bg-secondary rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:outline-hidden": {}
      },
      ".leaflet-tooltip, .leaflet-draw-tooltip": {
        "@apply !bg-foreground !text-background !animate-none !rounded-md !border-none !p-0 !px-3 !py-1.5 !shadow-none": {}
      },
      ".leaflet-draw-tooltip:before": {
        "@apply bg-foreground !top-1/2 !right-0.5 size-2.5 translate-x-1/2 -translate-y-1/2 rotate-45 rounded-[2px] !border-none": {}
      },
      ".leaflet-error-draw-tooltip": {
        "@apply !bg-destructive !text-white": {}
      },
      ".leaflet-error-draw-tooltip:before": {
        "@apply bg-destructive": {}
      },
      ".leaflet-draw-tooltip-subtext": {
        "@apply !text-background": {}
      },
      ".leaflet-popup-tip-container, .leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before, .leaflet-tooltip-left:before, .leaflet-tooltip-right:before": {
        "@apply hidden": {}
      },
      ".leaflet-control-attribution": {
        "@apply !bg-muted rounded-md !px-[4px] !py-[2px] text-[10px] !leading-none !text-inherit": {}
      },
      ".leaflet-draw-guide-dash": {
        "@apply rounded-full": {}
      },
      ".leaflet-edit-marker-selected": {
        "@apply !border-transparent !bg-transparent": {}
      },
      ".marker-cluster div": {
        "@apply font-[inherit]": {}
      }
    }
  }
}