utopia-ui 3.0.90 → 3.0.91

package/dist/index.esm.js

@@ -7,7 +7,7 @@ import { DomEvent, divIcon, Point, control, marker, LatLng, LatLngBounds } from
 import { useMap, useMapEvents, TileLayer, GeoJSON, MapContainer, Popup, Marker, Tooltip } from 'react-leaflet';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as React from 'react';
-import { createContext, useContext, useState, useCallback, useReducer, useEffect, createRef, useRef, memo, Children, cloneElement, isValidElement, forwardRef } from 'react';
+import { createContext, useContext, useState, useCallback, useReducer, useEffect, createRef, useRef, memo, cloneElement, forwardRef, useMemo } from 'react';
 import { useNavigate, useInRouterContext, BrowserRouter, useLocation, Outlet, Link, NavLink } from 'react-router-dom';
 import { toast, ToastContainer } from 'react-toastify';
 import MarkerClusterGroup from 'react-leaflet-cluster';
@@ -120,7 +120,7 @@ const useSetClusterRef = () => {
     return setClusterRef;
 };
 
-const LayerContext = createContext({
+const LayerContext$1 = createContext({
     layers: [],
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     addLayer: () => { },
@@ -148,13 +148,13 @@ function useLayerManager(initialLayers) {
     }, []);
     return { layers, addLayer };
 }
-const LayersProvider = ({ initialLayers, children }) => (jsx(LayerContext.Provider, { value: useLayerManager(initialLayers), children: children }));
+const LayersProvider = ({ initialLayers, children }) => (jsx(LayerContext$1.Provider, { value: useLayerManager(initialLayers), children: children }));
 const useLayers = () => {
-    const { layers } = useContext(LayerContext);
+    const { layers } = useContext(LayerContext$1);
     return layers;
 };
 const useAddLayer = () => {
-    const { addLayer } = useContext(LayerContext);
+    const { addLayer } = useContext(LayerContext$1);
     return addLayer;
 };
 
@@ -409,7 +409,7 @@ const useVisibleGroupType = () => {
     return visibleGroupTypes;
 };
 
-const ItemContext = createContext({
+const ItemContext$1 = createContext({
     items: [],
     addItem: () => { },
     updateItem: () => { },
@@ -509,33 +509,33 @@ function useItemsManager(initialItems) {
         allItemsLoaded,
     };
 }
-const ItemsProvider = ({ initialItems, children }) => (jsx(ItemContext.Provider, { value: useItemsManager(initialItems), children: children }));
+const ItemsProvider = ({ initialItems, children }) => (jsx(ItemContext$1.Provider, { value: useItemsManager(initialItems), children: children }));
 const useItems = () => {
-    const { items } = useContext(ItemContext);
+    const { items } = useContext(ItemContext$1);
     return items;
 };
 const useAddItem = () => {
-    const { addItem } = useContext(ItemContext);
+    const { addItem } = useContext(ItemContext$1);
     return addItem;
 };
 const useUpdateItem = () => {
-    const { updateItem } = useContext(ItemContext);
+    const { updateItem } = useContext(ItemContext$1);
     return updateItem;
 };
 const useRemoveItem = () => {
-    const { removeItem } = useContext(ItemContext);
+    const { removeItem } = useContext(ItemContext$1);
     return removeItem;
 };
 const useSetItemsApi = () => {
-    const { setItemsApi } = useContext(ItemContext);
+    const { setItemsApi } = useContext(ItemContext$1);
     return setItemsApi;
 };
 const useSetItemsData = () => {
-    const { setItemsData } = useContext(ItemContext);
+    const { setItemsData } = useContext(ItemContext$1);
     return setItemsData;
 };
 const useAllItemsLoaded = () => {
-    const { allItemsLoaded } = useContext(ItemContext);
+    const { allItemsLoaded } = useContext(ItemContext$1);
     return allItemsLoaded;
 };
 
@@ -819,6 +819,22 @@ const useSetAdminRole = () => {
     return setAdminRole;
 };
 
+const PoupFormContext = createContext({
+    popupForm: {},
+    setPopupForm: () => {
+        /* empty function */
+    },
+});
+function usePopupFormManager() {
+    const [popupForm, setPopupForm] = useState(null);
+    return { popupForm, setPopupForm };
+}
+const PopupFormProvider = ({ children }) => (jsx(PoupFormContext.Provider, { value: usePopupFormManager(), children: children }));
+const usePopupForm = () => {
+    const { popupForm, setPopupForm } = useContext(PoupFormContext);
+    return { popupForm, setPopupForm };
+};
+
 const SelectPositionContext = createContext({
     selectPosition: null,
     setSelectPosition: () => { },
@@ -842,7 +858,9 @@ function useSelectPositionManager() {
     }, [markerClicked]);
     useEffect(() => {
         if (selectPosition != null) {
+            // selectPosition can be null, Layer or Item
             if ('menuIcon' in selectPosition) {
+                // if selectPosition is a Layer
                 mapClicked &&
                     mapClicked.setItemFormPopup({
                         layer: selectPosition,
@@ -851,6 +869,7 @@ function useSelectPositionManager() {
                 setSelectPosition(null);
             }
             if ('text' in selectPosition) {
+                // if selectPosition is an Item
                 const position = mapClicked?.position.lng &&
                     {
                         type: 'Point',
@@ -1115,7 +1134,7 @@ const ContextWrapper = ({ children }) => {
 // eslint-disable-next-line react/prop-types
 const Wrappers = ({ children }) => {
     const queryClient = new QueryClient();
-    return (jsx(PermissionsProvider, { initialPermissions: [], children: jsx(TagsProvider, { initialTags: [], children: jsx(LayersProvider, { initialLayers: [], children: jsx(FilterProvider, { initialTags: [], children: jsx(ItemsProvider, { initialItems: [], children: jsx(SelectPositionProvider, { children: jsx(LeafletRefsProvider, { initialLeafletRefs: {}, children: jsx(QueryClientProvider, { client: queryClient, children: jsx(AppStateProvider, { children: jsx(ClusterRefProvider, { children: jsxs(QuestsProvider, { initialOpen: true, children: [jsx(ToastContainer, { position: 'top-right', autoClose: 2000, hideProgressBar: true, newestOnTop: false, closeOnClick: true, rtl: false, pauseOnFocusLoss: true, draggable: true, pauseOnHover: true, theme: 'light', closeButton: CloseButton }), children] }) }) }) }) }) }) }) }) }) }) }));
+    return (jsx(PermissionsProvider, { initialPermissions: [], children: jsx(TagsProvider, { initialTags: [], children: jsx(LayersProvider, { initialLayers: [], children: jsx(FilterProvider, { initialTags: [], children: jsx(ItemsProvider, { initialItems: [], children: jsx(SelectPositionProvider, { children: jsx(LeafletRefsProvider, { initialLeafletRefs: {}, children: jsx(QueryClientProvider, { client: queryClient, children: jsx(AppStateProvider, { children: jsx(ClusterRefProvider, { children: jsx(PopupFormProvider, { children: jsxs(QuestsProvider, { initialOpen: true, children: [jsx(ToastContainer, { position: 'top-right', autoClose: 2000, hideProgressBar: true, newestOnTop: false, closeOnClick: true, rtl: false, pauseOnFocusLoss: true, draggable: true, pauseOnHover: true, theme: 'light', closeButton: CloseButton }), children] }) }) }) }) }) }) }) }) }) }) }) }));
 };
 
 const useTheme = (defaultTheme = 'default') => {
@@ -2584,7 +2603,7 @@ function fixUrls(message) {
 /**
  * @category Map
  */
-const TextView = ({ item, itemId, text, truncate = false, rawText, itemTextField, }) => {
+const TextView$1 = ({ item, itemId, text, truncate = false, rawText, itemTextField, }) => {
     if (item) {
         text = item.text;
         itemId = item.id;
@@ -2660,8 +2679,6 @@ const TextView = ({ item, itemId, text, truncate = false, rawText, itemTextField
                     return jsx(MemoizedVideoEmbed, { url: href });
                 }
                 if (href?.startsWith('#')) {
-                    console.log(href.slice(1).toLowerCase());
-                    console.log(tags);
                     const tag = tags.find((t) => t.name.toLowerCase() === decodeURI(href).slice(1).toLowerCase());
                     if (tag)
                         return (jsx(CustomHashTagLink, { tag: tag, itemId: itemId, children: children }));
@@ -2729,13 +2746,13 @@ function UtopiaMapInner({ children, geo, showFilterControl = false, showGratitud
     const setClusterRef = useSetClusterRef();
     const clusterRef = useClusterRef();
     const setMapClicked = useSetMapClicked();
-    const [itemFormPopup, setItemFormPopup] = useState(null);
-    useTheme(defaultTheme);
+    const { setPopupForm } = usePopupForm();
     const layers = useLayers();
     const addVisibleLayer = useAddVisibleLayer();
     const leafletRefs = useLeafletRefs();
     const location = useLocation();
     const map = useMap();
+    useTheme(defaultTheme);
     useEffect(() => {
         layers.forEach((layer) => addVisibleLayer(layer));
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2749,7 +2766,7 @@ function UtopiaMapInner({ children, geo, showFilterControl = false, showGratitud
         if (!init.current) {
             donationWidget &&
                 setTimeout(() => {
-                    toast(jsxs(Fragment, { children: [jsx(TextView, { itemId: '', rawText: '## Do you like this Map?' }), jsxs("div", { children: [jsx(TextView, { itemId: '', rawText: 'Support us building free opensource maps for communities and help us grow 🌱☀️' }), jsx("a", { href: 'https://opencollective.com/utopia-project', children: jsx("div", { className: 'tw:btn  tw:btn-sm tw:float-right tw:btn-primary', children: "Donate" }) })] })] }), { autoClose: false });
+                    toast(jsxs(Fragment, { children: [jsx(TextView$1, { itemId: '', rawText: '## Do you like this Map?' }), jsxs("div", { children: [jsx(TextView$1, { itemId: '', rawText: 'Support us building free opensource maps for communities and help us grow 🌱☀️' }), jsx("a", { href: 'https://opencollective.com/utopia-project', children: jsx("div", { className: 'tw:btn  tw:btn-sm tw:float-right tw:btn-primary', children: "Donate" }) })] })] }), { autoClose: false });
                 }, 600000);
             init.current = true;
         }
@@ -2762,7 +2779,7 @@ function UtopiaMapInner({ children, geo, showFilterControl = false, showGratitud
                 // eslint-disable-next-line no-console
                 console.log(e.latlng.lat + ',' + e.latlng.lng);
                 if (selectNewItemPosition) {
-                    setMapClicked({ position: e.latlng, setItemFormPopup });
+                    setMapClicked({ position: e.latlng, setItemFormPopup: setPopupForm });
                 }
             },
             moveend: () => { },
@@ -2833,13 +2850,11 @@ function UtopiaMapInner({ children, geo, showFilterControl = false, showGratitud
             layer.bindPopup(feature.properties.name);
         }
     };
-    return (jsxs("div", { className: `tw:h-full ${selectNewItemPosition != null ? 'crosshair-cursor-enabled' : ''}`, children: [jsx(Outlet, {}), jsxs(Control, { position: 'topLeft', zIndex: '1000', absolute: true, children: [jsx(SearchControl, {}), jsx(TagsControl, {})] }), jsxs(Control, { position: 'bottomLeft', zIndex: '999', absolute: true, children: [showFilterControl && jsx(FilterControl, {}), showLayerControl && jsx(LayerControl, {}), showGratitudeControl && jsx(GratitudeControl, {})] }), jsx(TileLayer, { maxZoom: 19, attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', url: 'https://tile.osmand.net/hd/{z}/{x}/{y}.png' }), jsx(MarkerClusterGroup, { ref: (r) => setClusterRef(r), showCoverageOnHover: true, chunkedLoading: true, maxClusterRadius: 50, removeOutsideVisibleBounds: false, children: Children.toArray(children).map((child) => isValidElement(child)
-                    ? cloneElement(child, { setItemFormPopup, itemFormPopup, clusterRef })
-                    : child) }), geo && (jsx(GeoJSON, { data: geo, onEachFeature: onEachFeature, eventHandlers: {
+    return (jsxs("div", { className: `tw:h-full ${selectNewItemPosition != null ? 'crosshair-cursor-enabled' : ''}`, children: [jsx(Outlet, {}), jsxs(Control, { position: 'topLeft', zIndex: '1000', absolute: true, children: [jsx(SearchControl, {}), jsx(TagsControl, {})] }), jsxs(Control, { position: 'bottomLeft', zIndex: '999', absolute: true, children: [showFilterControl && jsx(FilterControl, {}), showLayerControl && jsx(LayerControl, {}), showGratitudeControl && jsx(GratitudeControl, {})] }), jsx(TileLayer, { maxZoom: 19, attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', url: 'https://tile.osmand.net/hd/{z}/{x}/{y}.png' }), jsx(MarkerClusterGroup, { ref: (r) => setClusterRef(r), showCoverageOnHover: true, chunkedLoading: true, maxClusterRadius: 50, removeOutsideVisibleBounds: false, children: children }), geo && (jsx(GeoJSON, { data: geo, onEachFeature: onEachFeature, eventHandlers: {
                     click: (e) => {
                         if (selectNewItemPosition) {
                             e.layer.closePopup();
-                            setMapClicked({ position: e.latlng, setItemFormPopup });
+                            setMapClicked({ position: e.latlng, setItemFormPopup: setPopupForm });
                         }
                     },
                 } })), jsx(MapEventListener, {}), jsx(AddButton, { triggerAction: setSelectNewItemPosition }), selectNewItemPosition != null && (jsx(SelectPosition, { setSelectNewItemPosition: setSelectNewItemPosition }))] }));
@@ -2883,653 +2898,143 @@ function UtopiaMap({ height = '500px', width = '100%', center = [50.6, 9.5], zoo
     return (jsx(ContextWrapper, { children: jsx(MapContainer, { style: { height, width }, center: new LatLng(center[0], center[1]), zoom: zoom, zoomControl: showZoomControl, maxZoom: 19, children: jsx(UtopiaMapInner, { geo: geo, showFilterControl: showFilterControl, showGratitudeControl: showGratitudeControl, showLayerControl: showLayerControl, donationWidget: donationWidget, showThemeControl: showThemeControl, defaultTheme: defaultTheme, children: children }) }) }));
 }
 
-const goldenRatioConjugate = 0.618033988749895;
-const randomColor = () => {
-    return hsvToHex((Math.random() + goldenRatioConjugate) % 1, 0.8, 0.7);
-};
-function hsvToHex(h, s, v) {
-    let r, g, b;
-    const i = Math.floor(h * 6);
-    const f = h * 6 - i;
-    const p = v * (1 - s);
-    const q = v * (1 - f * s);
-    const t = v * (1 - (1 - f) * s);
-    switch (i % 6) {
-        case 0:
-            r = v;
-            g = t;
-            b = p;
-            break;
-        case 1:
-            r = q;
-            g = v;
-            b = p;
-            break;
-        case 2:
-            r = p;
-            g = v;
-            b = t;
-            break;
-        case 3:
-            r = p;
-            g = q;
-            b = v;
-            break;
-        case 4:
-            r = t;
-            g = p;
-            b = v;
-            break;
-        case 5:
-            r = v;
-            g = p;
-            b = q;
-            break;
-    }
-    return rgbToHex(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255));
-}
-const rgbToHex = (r, g, b) => '#' +
-    [r, g, b]
-        .map((x) => {
-        const hex = x.toString(16);
-        return hex.length === 1 ? `0${hex}` : hex;
-    })
-        .join('');
+const LayerContext = createContext({
+    name: '',
+    markerDefaultColor: '',
+    markerDefaultColor2: '',
+    markerShape: '',
+    menuText: '',
+});
 
 /**
- * @category Input
+ * @category Map
  */
-function TextAreaInput({ labelTitle, dataField, labelStyle, containerStyle, inputStyle, defaultValue, placeholder, required = true, updateFormValue, }) {
-    const ref = useRef(null);
-    const [inputValue, setInputValue] = useState(defaultValue);
+const Layer = ({ data, children, name = 'places', menuIcon = 'MapPinIcon', menuText = 'add new place', menuColor = '#2E7D32', markerIcon, markerShape = 'circle', markerDefaultColor = '#777', markerDefaultColor2 = 'RGBA(35, 31, 32, 0.2)', api, itemType, userProfileLayer = false, customEditLink, customEditParameter, 
+// eslint-disable-next-line camelcase
+public_edit_items, listed = true, }) => {
+    const setItemsApi = useSetItemsApi();
+    const setItemsData = useSetItemsData();
+    const addTag = useAddTag();
+    const [newTagsToAdd] = useState([]);
+    const [tagsReady] = useState(false);
     useEffect(() => {
-        setInputValue(defaultValue);
-    }, [defaultValue]);
-    const handleChange = (e) => {
-        const newValue = e.target.value;
-        setInputValue(newValue);
-        if (updateFormValue) {
-            updateFormValue(newValue);
+        data &&
+            setItemsData({
+                data,
+                children,
+                name,
+                menuIcon,
+                menuText,
+                menuColor,
+                markerIcon,
+                markerShape,
+                markerDefaultColor,
+                markerDefaultColor2,
+                api,
+                itemType,
+                userProfileLayer,
+                // Can we just use editCallback for all cases?
+                customEditLink,
+                customEditParameter,
+                // eslint-disable-next-line camelcase
+                public_edit_items,
+                listed,
+            });
+        api &&
+            setItemsApi({
+                data,
+                children,
+                name,
+                menuIcon,
+                menuText,
+                menuColor,
+                markerIcon,
+                markerShape,
+                markerDefaultColor,
+                markerDefaultColor2,
+                api,
+                itemType,
+                userProfileLayer,
+                customEditLink,
+                customEditParameter,
+                // eslint-disable-next-line camelcase
+                public_edit_items,
+                listed,
+            });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data, api]);
+    useEffect(() => {
+        if (tagsReady) {
+            const processedTags = {};
+            newTagsToAdd.map((newtag) => {
+                if (!processedTags[newtag.name]) {
+                    processedTags[newtag.name] = true;
+                    addTag(newtag);
+                }
+                return null;
+            });
         }
-    };
-    return (jsxs("div", { className: `tw:form-control tw:w-full ${containerStyle ?? ''}`, children: [labelTitle ? (jsx("label", { className: 'tw:label', children: jsx("span", { className: `tw:label-text tw:text-base-content ${labelStyle ?? ''}`, children: labelTitle }) })) : null, jsx("textarea", { required: required, ref: ref, value: inputValue, name: dataField, className: `tw:textarea tw:textarea-bordered tw:w-full tw:leading-5 ${inputStyle ?? ''}`, placeholder: placeholder ?? '', onChange: handleChange })] }));
-}
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tagsReady]);
+    return (jsx(LayerContext.Provider, { value: {
+            name,
+            markerDefaultColor,
+            markerDefaultColor2,
+            markerShape,
+            markerIcon,
+            menuText,
+        }, children: children }));
+};
 
 /**
- * @category Input
+ * This Components injects Tags comming from an {@link ItemsApi | `API`}
+ * ```tsx
+ * <Tags api={tagsApi} />
+ * ```
+ * or from on {@link Tag| `Array`}
+ * ```tsx
+ * <Tags data={tags} />
+ * ```
+ * Can be child of {@link AppShell | `AppShell`}
+ * ```tsx
+ * <AppShell>
+ *     ...
+ *     <Tags api={tagsApi} />
+ * </AppShell>
+ *  ```
+ * Or child of {@link UtopiaMap | `UtopiaMap`}
+ * ```tsx
+ * <UtopiaMap>
+ *     ...
+ *     <Tags api={tagsApi} />
+ * </UtopiaMap>
+ * ```
+ * @category Map
  */
-function TextInput({ labelTitle, labelStyle, type, dataField, containerStyle, inputStyle, defaultValue, placeholder, autocomplete, pattern, required = true, updateFormValue, }) {
-    const [inputValue, setInputValue] = useState(defaultValue ?? '');
+function Tags({ data, api }) {
+    const setTagData = useSetTagData();
+    const setTagApi = useSetTagApi();
     useEffect(() => {
-        setInputValue(defaultValue ?? '');
-    }, [defaultValue]);
-    const handleChange = (e) => {
-        const newValue = e.target.value;
-        setInputValue(newValue);
-        if (updateFormValue) {
-            updateFormValue(newValue);
-        }
-    };
-    return (jsxs("div", { className: `tw:form-control ${containerStyle ?? ''}`, children: [labelTitle ? (jsx("label", { className: 'tw:label', children: jsx("span", { className: `tw:label-text tw:text-base-content ${labelStyle ?? ''}`, children: labelTitle }) })) : null, jsx("input", { required: required, pattern: pattern, type: type ?? 'text', name: dataField, value: inputValue, placeholder: placeholder ?? '', autoComplete: autocomplete, onChange: handleChange, className: `tw:input tw:input-bordered tw:w-full ${inputStyle ?? ''}` })] }));
-}
-
-function ItemFormPopup(props) {
-    const [spinner, setSpinner] = useState(false);
-    const [popupTitle, setPopupTitle] = useState('');
-    const formRef = useRef(null);
-    const map = useMap();
-    const addItem = useAddItem();
-    const updateItem = useUpdateItem();
-    const items = useItems();
-    useRemoveItem();
-    const tags = useTags();
-    const addTag = useAddTag();
+        data && setTagData(data);
+        api && setTagApi(api);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [api, data]);
+    const location = useLocation();
+    const addFilterTag = useAddFilterTag();
     const resetFilterTags = useResetFilterTags();
-    const { user } = useAuth();
-    const handleSubmit = async (evt) => {
-        const formItem = {};
-        Array.from(evt.target).forEach((input) => {
-            if (input.name) {
-                formItem[input.name] = input.value;
-            }
-        });
-        formItem.position = { type: 'Point', coordinates: [props.position.lng, props.position.lat] };
-        evt.preventDefault();
-        const name = formItem.name ? formItem.name : user?.first_name;
-        if (!name) {
-            toast.error('Name is must be defined');
-            return;
-        }
-        setSpinner(true);
-        formItem.text &&
-            formItem.text
-                .toLocaleLowerCase()
-                .match(hashTagRegex)
-                ?.map((tag) => {
-                if (!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
-                    addTag({ id: crypto.randomUUID(), name: tag.slice(1), color: randomColor() });
-                }
-                return null;
-            });
-        if (props.item) {
-            let success = false;
-            try {
-                await props.layer.api?.updateItem({ ...formItem, id: props.item.id });
-                success = true;
-                // eslint-disable-next-line no-catch-all/no-catch-all
-            }
-            catch (error) {
-                toast.error(error.toString());
-            }
-            if (success) {
-                updateItem({ ...props.item, ...formItem });
-                toast.success('Item updated');
-            }
-            setSpinner(false);
-            map.closePopup();
-        }
-        else {
-            const item = items.find((i) => i.user_created?.id === user?.id && i.layer === props.layer);
-            const uuid = crypto.randomUUID();
-            let success = false;
-            try {
-                props.layer.userProfileLayer &&
-                    item &&
-                    (await props.layer.api?.updateItem({ ...formItem, id: item.id }));
-                (!props.layer.userProfileLayer || !item) &&
-                    (await props.layer.api?.createItem({
-                        ...formItem,
-                        name,
-                        id: uuid,
-                    }));
-                success = true;
-                // eslint-disable-next-line no-catch-all/no-catch-all
-            }
-            catch (error) {
-                toast.error(error.toString());
-            }
-            if (success) {
-                if (props.layer.userProfileLayer && item)
-                    updateItem({ ...item, ...formItem });
-                if (!props.layer.userProfileLayer || !item) {
-                    addItem({
-                        ...formItem,
-                        name: (formItem.name ? formItem.name : user?.first_name) ?? '',
-                        user_created: user ?? undefined,
-                        id: uuid,
-                        layer: props.layer,
-                        public_edit: !user,
-                    });
-                }
-                toast.success('New item created');
-                resetFilterTags();
-            }
-            setSpinner(false);
-            map.closePopup();
-        }
-        props.setItemFormPopup(null);
-    };
-    const resetPopup = () => {
-        if (formRef.current) {
-            formRef.current.reset();
-        }
-    };
-    useEffect(() => {
-        resetPopup();
-    }, [props.position]);
-    return (jsx(Popup, { minWidth: 275, maxWidth: 275, autoPanPadding: [20, 80], eventHandlers: {
-            remove: () => {
-                setTimeout(function () {
-                    resetPopup();
-                }, 100);
-            },
-        }, position: props.position, children: jsxs("form", { ref: formRef, onReset: resetPopup, autoComplete: 'off', onSubmit: (e) => handleSubmit(e), children: [props.item ? (jsx("div", { className: 'tw:h-3' })) : (jsx("div", { className: 'tw:flex tw:justify-center', children: jsx("b", { className: 'tw:text-xl tw:text-center tw:font-bold', children: props.layer.menuText }) })), props.children ? (Children.toArray(props.children).map((child) => isValidElement(child)
-                    ? cloneElement(child, {
-                        item: props.item,
-                        key: props.position.toString(),
-                        setPopupTitle,
-                    })
-                    : '')) : (jsxs(Fragment, { children: [jsx(TextInput, { type: 'text', placeholder: 'Name', dataField: 'name', defaultValue: props.item ? props.item.name : '', inputStyle: '' }), jsx(TextAreaInput, { placeholder: 'Text', dataField: 'text', defaultValue: props.item?.text ?? '', inputStyle: 'tw:h-40 tw:mt-5' }, props.position.toString())] })), jsx("div", { className: 'tw:flex tw:justify-center', children: jsx("button", { className: spinner
-                            ? 'tw:btn tw:btn-disabled tw:mt-5 tw:place-self-center'
-                            : 'tw:btn tw:mt-5 tw:place-self-center', type: 'submit', children: spinner ? jsx("span", { className: 'tw:loading tw:loading-spinner' }) : 'Save' }) })] }) }));
-}
-
-// in miliseconds
-const units = [
-    { label: 'year', seconds: 31536000 },
-    { label: 'month', seconds: 2592000 },
-    { label: 'week', seconds: 604800 },
-    { label: 'day', seconds: 86400 },
-    { label: 'hour', seconds: 3600 },
-    { label: 'minute', seconds: 60 },
-    { label: 'second', seconds: 1 },
-];
-const timeAgo = (date) => {
-    const time = Math.floor((new Date().valueOf() - new Date(date).valueOf()) / 1000);
-    const { interval, unit } = calculateTimeDifference(time);
-    const suffix = interval === 1 ? '' : 's';
-    return `${interval} ${unit}${suffix} ago`;
-};
-const calculateTimeDifference = (time) => {
-    for (const { label, seconds } of units) {
-        const interval = Math.floor(time / seconds);
-        if (interval >= 1) {
-            return {
-                interval,
-                unit: label,
-            };
-        }
-    }
-    return {
-        interval: 0,
-        unit: '',
-    };
-};
-
-function EllipsisVerticalIcon({
-  title,
-  titleId,
-  ...props
-}, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 16 16",
-    fill: "currentColor",
-    "aria-hidden": "true",
-    "data-slot": "icon",
-    ref: svgRef,
-    "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
-    id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
-    d: "M8 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM8 6.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM9.5 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
-  }));
-}
-const ForwardRef$9 = /*#__PURE__*/ React.forwardRef(EllipsisVerticalIcon);
-
-function PencilIcon({
-  title,
-  titleId,
-  ...props
-}, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    "aria-hidden": "true",
-    "data-slot": "icon",
-    ref: svgRef,
-    "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
-    id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
-    d: "M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z"
-  }));
-}
-const ForwardRef$8 = /*#__PURE__*/ React.forwardRef(PencilIcon);
-
-function TrashIcon({
-  title,
-  titleId,
-  ...props
-}, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    "aria-hidden": "true",
-    "data-slot": "icon",
-    ref: svgRef,
-    "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
-    id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z",
-    clipRule: "evenodd"
-  }));
-}
-const ForwardRef$7 = /*#__PURE__*/ React.forwardRef(TrashIcon);
-
-var TargetDotSVG = 'data:image/svg+xml;base64,PHN2ZwogICAgICAgICAgICAgICAgICAgICAgICAgICAgc3Ryb2tlPSdjdXJyZW50Q29sb3InCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBmaWxsPSdjdXJyZW50Q29sb3InCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBzdHJva2VXaWR0aD0nMCcKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHZpZXdCb3g9JzAgMCA1MTIgNTEyJwogICAgICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPSd3LTUgaC01JwogICAgICAgICAgICAgICAgICAgICAgICAgICAgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJwogICAgICAgICAgICAgICAgICAgICAgICAgID4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9J00yNTYgMGMxNy43IDAgMzIgMTQuMyAzMiAzMlY0Mi40YzkzLjcgMTMuOSAxNjcuNyA4OCAxODEuNiAxODEuNkg0ODBjMTcuNyAwIDMyIDE0LjMgMzIgMzJzLTE0LjMgMzItMzIgMzJINDY5LjZjLTEzLjkgOTMuNy04OCAxNjcuNy0xODEuNiAxODEuNlY0ODBjMCAxNy43LTE0LjMgMzItMzIgMzJzLTMyLTE0LjMtMzItMzJWNDY5LjZDMTMwLjMgNDU1LjcgNTYuMyAzODEuNyA0Mi40IDI4OEgzMmMtMTcuNyAwLTMyLTE0LjMtMzItMzJzMTQuMy0zMiAzMi0zMkg0Mi40QzU2LjMgMTMwLjMgMTMwLjMgNTYuMyAyMjQgNDIuNFYzMmMwLTE3LjcgMTQuMy0zMiAzMi0zMnpNMTA3LjQgMjg4YzEyLjUgNTguMyA1OC40IDEwNC4xIDExNi42IDExNi42VjM4NGMwLTE3LjcgMTQuMy0zMiAzMi0zMnMzMiAxNC4zIDMyIDMydjIwLjZjNTguMy0xMi41IDEwNC4xLTU4LjQgMTE2LjYtMTE2LjZIMzg0Yy0xNy43IDAtMzItMTQuMy0zMi0zMnMxNC4zLTMyIDMyLTMyaDIwLjZDMzkyLjEgMTY1LjcgMzQ2LjMgMTE5LjkgMjg4IDEwNy40VjEyOGMwIDE3LjctMTQuMyAzMi0zMiAzMnMtMzItMTQuMy0zMi0zMlYxMDcuNEMxNjUuNyAxMTkuOSAxMTkuOSAxNjUuNyAxMDcuNCAyMjRIMTI4YzE3LjcgMCAzMiAxNC4zIDMyIDMycy0xNC4zIDMyLTMyIDMySDEwNy40ek0yNTYgMjI0YTMyIDMyIDAgMSAxIDAgNjQgMzIgMzIgMCAxIDEgMC02NHonPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=';
-
-const isClickInsideRectangle = (e, element) => {
-    const r = element.getBoundingClientRect();
-    return e.clientX > r.left && e.clientX < r.right && e.clientY > r.top && e.clientY < r.bottom;
-};
-const DialogModal = ({ title, isOpened, onClose, children, showCloseButton = true, closeOnClickOutside = true, className, }) => {
-    const ref = useRef(null);
-    useEffect(() => {
-        if (isOpened) {
-            ref.current?.showModal();
-            ref.current?.classList.remove('tw:hidden');
-            document.body.classList.add('modal-open'); // prevent bg scroll
-        }
-        else {
-            ref.current?.close();
-            ref.current?.classList.add('tw:hidden');
-            document.body.classList.remove('modal-open');
-        }
-    }, [isOpened]);
-    if (isOpened) {
-        return (jsx("dialog", { className: `${className ?? ''} card tw:shadow-xl tw:absolute tw:right-0 tw:top-0 tw:bottom-0 tw:left-0 tw:m-auto tw:transition-opacity tw:duration-300 tw:p-4 tw:max-w-xl tw:bg-base-100`, ref: ref, onCancel: onClose, onClick: (e) => ref.current && !isClickInsideRectangle(e, ref.current) && closeOnClickOutside && onClose(), children: jsxs("div", { className: 'card-body tw:p-2', children: [jsx("h2", { className: 'tw:text-2xl tw:font-semibold tw:mb-2 tw:text-center', children: title }), children, showCloseButton && (jsx("button", { className: 'btn btn-sm btn-circle btn-ghost tw:absolute tw:right-2 tw:top-2', onClick: onClose, children: "\u2715" }))] }) }));
-    }
-    else
-        return jsx(Fragment, {});
-};
-
-function HeaderView({ item, api, editCallback, deleteCallback, setPositionCallback, loading, hideMenu = false, big = false, truncateSubname = true, hideSubname = false, showAddress = false, }) {
-    const [modalOpen, setModalOpen] = useState(false);
-    const hasUserPermission = useHasUserPermission();
-    const navigate = useNavigate();
-    const appState = useAppState();
-    const [imageLoaded, setImageLoaded] = useState(false);
-    const avatar = item.image && appState.assetsApi.url + item.image + '?width=160&heigth=160';
-    const title = item.name;
-    const subtitle = item.subname;
-    const [address] = useState('');
-    const params = new URLSearchParams(window.location.search);
-    const openDeleteModal = async (event) => {
-        setModalOpen(true);
-        event.stopPropagation();
-    };
-    return (jsxs(Fragment, { children: [jsxs("div", { className: 'tw:flex tw:flex-row', children: [jsx("div", { className: 'tw:grow tw:max-w-[calc(100%-60px)] }', children: jsxs("div", { className: 'flex items-center', children: [avatar && (jsx("div", { className: 'tw:avatar', children: jsxs("div", { className: `${big ? 'tw:w-20' : 'tw:w-10'} tw:inline tw:items-center tw:justify-center overflow-hidden`, children: [jsx("img", { className: 'tw:w-full tw:h-full tw:object-cover tw:rounded-full', src: avatar, alt: item.name + ' logo', onLoad: () => setImageLoaded(true), onError: () => setImageLoaded(false), style: { display: imageLoaded ? 'block' : 'none' } }), !imageLoaded && (jsx("div", { className: 'tw:w-full tw:h-full tw:bg-gray-200 tw:rounded-full' }))] }) })), jsxs("div", { className: `${avatar ? 'tw:ml-2' : ''} tw:overflow-hidden`, children: [jsx("div", { className: `${big ? 'tw:xl:text-3xl tw:text-2xl' : 'tw:text-xl'} tw:font-semibold tw:truncate`, title: title, children: title }), showAddress && address && !hideSubname && (jsx("div", { className: `tw:text-xs  tw:text-gray-500 ${truncateSubname && 'tw:truncate'}`, children: address })), subtitle && !hideSubname && (jsx("div", { className: `tw:text-xs  tw:opacity-50 ${truncateSubname && 'tw:truncate'}`, children: subtitle }))] })] }) }), jsx("div", { onClick: (e) => e.stopPropagation(), className: `${big ? 'tw:mt-5' : 'tw:mt-1'}`, children: (api?.deleteItem || item.layer?.api?.updateItem) &&
-                            (hasUserPermission(api?.collectionName, 'delete', item) ||
-                                hasUserPermission(api?.collectionName, 'update', item)) &&
-                            !hideMenu && (jsxs("div", { className: 'tw:dropdown tw:dropdown-bottom', children: [jsx("label", { tabIndex: 0, className: 'tw:bg-base-100 tw:btn tw:m-1 tw:leading-3 tw:border-none tw:min-h-0 tw:h-6', children: jsx(ForwardRef$9, { className: 'tw:h-5 tw:w-5' }) }), jsxs("ul", { tabIndex: 0, className: 'tw:dropdown-content tw:menu tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:z-1000', children: [api?.updateItem &&
-                                            hasUserPermission(api.collectionName, 'update', item) &&
-                                            editCallback && (jsx("li", { children: jsx("a", { className: 'tw:text-base-content! tw:cursor-pointer', onClick: (e) => item.layer?.customEditLink
-                                                    ? navigate(`${item.layer.customEditLink}${item.layer.customEditParameter ? `/${item.id}${params && '?' + params}` : ''} `)
-                                                    : editCallback(e), children: jsx(ForwardRef$8, { className: 'tw:h-5 tw:w-5' }) }) })), api?.updateItem &&
-                                            hasUserPermission(api.collectionName, 'update', item) &&
-                                            setPositionCallback && (jsx("li", { children: jsx("a", { className: 'tw:text-base-content! tw:cursor-pointer', onClick: setPositionCallback, children: jsx(SVG, { src: TargetDotSVG, className: 'tw:w-5 tw:h-5' }) }) })), api?.deleteItem &&
-                                            hasUserPermission(api.collectionName, 'delete', item) &&
-                                            deleteCallback && (jsx("li", { children: jsx("a", { className: 'tw:cursor-pointer tw:text-error!', onClick: openDeleteModal, children: loading ? (jsx("span", { className: 'tw:loading tw:loading-spinner tw:loading-sm' })) : (jsx(ForwardRef$7, { className: 'tw:h-5 tw:w-5' })) }) }))] })] })) })] }), jsx(DialogModal, { isOpened: modalOpen, title: 'Are you sure?', showCloseButton: false, onClose: () => setModalOpen(false), children: jsxs("div", { onClick: (e) => e.stopPropagation(), children: [jsxs("span", { children: ["Do you want to delete ", jsx("b", { children: item.name }), "?"] }), jsx("div", { className: 'tw:grid', children: jsxs("div", { className: 'tw:flex tw:justify-between', children: [jsx("label", { className: 'tw:btn tw:mt-4 tw:btn-error', onClick: (e) => {
-                                            deleteCallback(e);
-                                            setModalOpen(false);
-                                        }, children: "Yes" }), jsx("label", { className: 'tw:btn tw:mt-4', onClick: () => setModalOpen(false), children: "No" })] }) })] }) })] }));
-}
-
-// eslint-disable-next-line react/display-name
-const ItemViewPopup = forwardRef((props, ref) => {
-    const map = useMap();
-    const [loading, setLoading] = useState(false);
-    const removeItem = useRemoveItem();
-    const updadateItem = useUpdateItem();
-    const navigate = useNavigate();
-    const setSelectPosition = useSetSelectPosition();
-    const [infoExpanded, setInfoExpanded] = useState(false);
-    const handleEdit = (event) => {
-        event.stopPropagation();
-        map.closePopup();
-        props.setItemFormPopup &&
-            props.setItemFormPopup({
-                position: new LatLng(props.item.position?.coordinates[1], props.item.position?.coordinates[0]),
-                layer: props.item.layer,
-                item: props.item,
-                setItemFormPopup: props.setItemFormPopup,
-            });
-    };
-    const handleDelete = async (event) => {
-        event.stopPropagation();
-        setLoading(true);
-        let success = false;
-        try {
-            !props.item.layer?.userProfileLayer &&
-                (await props.item.layer?.api?.deleteItem(props.item.id));
-            props.item.layer?.userProfileLayer &&
-                (await props.item.layer.api?.updateItem({ id: props.item.id, position: null }));
-            success = true;
-            // eslint-disable-next-line no-catch-all/no-catch-all
-        }
-        catch (error) {
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-            toast.error(error.toString());
-        }
-        if (success) {
-            !props.item.layer?.userProfileLayer && removeItem(props.item);
-            props.item.layer?.userProfileLayer && updadateItem({ ...props.item, position: undefined });
-            toast.success('Item deleted');
-        }
-        setLoading(false);
-        map.closePopup();
-        const params = new URLSearchParams(window.location.search);
-        window.history.pushState({}, '', '/' + `${params ? `?${params}` : ''}`);
-        navigate('/');
-    };
-    return (jsx(Popup, { ref: ref, maxHeight: 377, minWidth: 275, maxWidth: 275, autoPanPadding: [20, 80], children: jsxs("div", { className: 'tw:bg-base-100 tw:text-base-content', children: [jsx(HeaderView, { api: props.item.layer?.api, item: props.item, editCallback: handleEdit, deleteCallback: handleDelete, setPositionCallback: () => {
-                        map.closePopup();
-                        setSelectPosition(props.item);
-                        navigate('/');
-                    }, loading: loading }), jsx("div", { className: 'tw:overflow-y-auto tw:overflow-x-hidden tw:max-h-64 fade', children: props.children ? (Children.toArray(props.children).map((child) => isValidElement(child)
-                        ? cloneElement(child, { item: props.item })
-                        : '')) : (jsx(TextView, { text: props.item.text, itemId: props.item.id })) }), jsxs("div", { className: 'tw:flex tw:-mb-1 tw:flex-row tw:mr-2 tw:mt-1', children: [infoExpanded ? (jsx("p", { className: 'tw:italic tw:min-h-[21px] tw:my-0! tw:opacity-50', children: `${props.item.date_updated && props.item.date_updated !== props.item.date_created ? 'updated' : 'posted'} ${props.item && props.item.user_created && props.item.user_created.first_name ? `by ${props.item.user_created.first_name}` : ''} ${props.item.date_updated ? timeAgo(props.item.date_updated) : timeAgo(props.item.date_created)}` })) : (jsx("p", { className: 'tw:my-0! tw:min-h-[21px] tw:font-bold tw:cursor-pointer tw:text-gray-500', onClick: () => setInfoExpanded(true), children: "\u24D8" })), jsx("div", { className: 'tw:grow' })] })] }) }));
-});
-
-/**
- * @category Map
- */
-const Layer = ({ data, children, name = 'places', menuIcon = 'MapPinIcon', menuText = 'add new place', menuColor = '#2E7D32', markerIcon, markerShape = 'circle', markerDefaultColor = '#777', markerDefaultColor2 = 'RGBA(35, 31, 32, 0.2)', api, itemType, userProfileLayer = false, customEditLink, customEditParameter, 
-// eslint-disable-next-line camelcase
-public_edit_items, listed = true, setItemFormPopup, itemFormPopup, clusterRef, }) => {
-    const filterTags = useFilterTags();
-    const items = useItems();
-    const setItemsApi = useSetItemsApi();
-    const setItemsData = useSetItemsData();
-    const getItemTags = useGetItemTags();
-    const addMarker = useAddMarker();
-    const addPopup = useAddPopup();
-    const leafletRefs = useLeafletRefs();
-    const allTagsLoaded = useAllTagsLoaded();
-    const allItemsLoaded = useAllItemsLoaded();
-    const setMarkerClicked = useSetMarkerClicked();
-    const selectPosition = useSelectPosition();
-    const tags = useTags();
-    const addTag = useAddTag();
-    const [newTagsToAdd, setNewTagsToAdd] = useState([]);
-    const [tagsReady, setTagsReady] = useState(false);
-    const isLayerVisible = useIsLayerVisible();
-    const isGroupTypeVisible = useIsGroupTypeVisible();
-    const visibleGroupTypes = useVisibleGroupType();
-    const appState = useAppState();
-    useEffect(() => {
-        data &&
-            setItemsData({
-                data,
-                children,
-                name,
-                menuIcon,
-                menuText,
-                menuColor,
-                markerIcon,
-                markerShape,
-                markerDefaultColor,
-                markerDefaultColor2,
-                api,
-                itemType,
-                userProfileLayer,
-                // Can we just use editCallback for all cases?
-                customEditLink,
-                customEditParameter,
-                // eslint-disable-next-line camelcase
-                public_edit_items,
-                listed,
-                setItemFormPopup,
-                itemFormPopup,
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                clusterRef,
-            });
-        api &&
-            setItemsApi({
-                data,
-                children,
-                name,
-                menuIcon,
-                menuText,
-                menuColor,
-                markerIcon,
-                markerShape,
-                markerDefaultColor,
-                markerDefaultColor2,
-                api,
-                itemType,
-                userProfileLayer,
-                customEditLink,
-                customEditParameter,
-                // eslint-disable-next-line camelcase
-                public_edit_items,
-                listed,
-                setItemFormPopup,
-                itemFormPopup,
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                clusterRef,
-            });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [data, api]);
-    useEffect(() => {
-        if (tagsReady) {
-            const processedTags = {};
-            newTagsToAdd.map((newtag) => {
-                if (!processedTags[newtag.name]) {
-                    processedTags[newtag.name] = true;
-                    addTag(newtag);
-                }
-                return null;
-            });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [tagsReady]);
-    return (jsxs(Fragment, { children: [items &&
-                items
-                    .filter((item) => item.layer?.name === name)
-                    .filter((item) => filterTags.length === 0
-                    ? item
-                    : filterTags.some((tag) => getItemTags(item).some((filterTag) => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))
-                    .filter((item) => item.layer && isLayerVisible(item.layer))
-                    .filter((item) => (item.group_type && isGroupTypeVisible(item.group_type)) ||
-                    visibleGroupTypes.length === 0)
-                    .map((item) => {
-                    if (item.position?.coordinates[0] && item.position?.coordinates[1]) {
-                        if (item.tags) {
-                            item.text += '\n\n';
-                            item.tags.map((tag) => {
-                                if (!item.text?.includes(`#${encodeTag(tag)}`)) {
-                                    item.text += `#${encodeTag(tag)}`;
-                                }
-                                return item.text;
-                            });
-                        }
-                        if (allTagsLoaded && allItemsLoaded) {
-                            item.text?.match(hashTagRegex)?.map((tag) => {
-                                if (!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase()) &&
-                                    !newTagsToAdd.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
-                                    const newTag = {
-                                        id: crypto.randomUUID(),
-                                        name: tag.slice(1),
-                                        color: randomColor(),
-                                    };
-                                    setNewTagsToAdd((current) => [...current, newTag]);
-                                }
-                                return null;
-                            });
-                            !tagsReady && setTagsReady(true);
-                        }
-                        const itemTags = getItemTags(item);
-                        const latitude = item.position.coordinates[1];
-                        const longitude = item.position.coordinates[0];
-                        let color1 = markerDefaultColor;
-                        let color2 = markerDefaultColor2;
-                        if (item.color) {
-                            color1 = item.color;
-                        }
-                        else if (itemTags[0]) {
-                            color1 = itemTags[0].color;
-                        }
-                        if (itemTags[0] && item.color) {
-                            color2 = itemTags[0].color;
-                        }
-                        else if (itemTags[1]) {
-                            color2 = itemTags[1].color;
-                        }
-                        return (jsxs(Marker, { ref: (r) => {
-                                if (!(item.id in leafletRefs && leafletRefs[item.id].marker === r)) {
-                                    r && addMarker(item, r);
-                                }
-                            }, eventHandlers: {
-                                click: () => {
-                                    selectPosition && setMarkerClicked(item);
-                                },
-                            }, icon: MarkerIconFactory(markerShape, color1, color2, item.markerIcon ? item.markerIcon : markerIcon, appState.assetsApi.url), position: [latitude, longitude], children: [children &&
-                                    Children.toArray(children).some((child) => isComponentWithType(child) && child.type.__TYPE === 'ItemView') ? (Children.toArray(children).map((child) => isComponentWithType(child) && child.type.__TYPE === 'ItemView' ? (jsx(ItemViewPopup, { ref: (r) => {
-                                        if (!(item.id in leafletRefs && leafletRefs[item.id].popup === r)) {
-                                            r && addPopup(item, r);
-                                        }
-                                    }, item: item, setItemFormPopup: setItemFormPopup, children: child }, item.id + item.name)) : null)) : (jsx(Fragment, { children: jsx(ItemViewPopup, { ref: (r) => {
-                                            if (!(item.id in leafletRefs && leafletRefs[item.id].popup === r)) {
-                                                r && addPopup(item, r);
-                                            }
-                                        }, item: item, setItemFormPopup: setItemFormPopup }, item.id + item.name) })), jsx(Tooltip, { offset: [0, -38], direction: 'top', children: item.name })] }, item.id));
-                    }
-                    else
-                        return null;
-                }), itemFormPopup &&
-                itemFormPopup.layer.name === name &&
-                (children &&
-                    Children.toArray(children).some((child) => isComponentWithType(child) && child.type.__TYPE === 'ItemForm') ? (Children.toArray(children).map((child) => isComponentWithType(child) && child.type.__TYPE === 'ItemForm' ? (jsx(ItemFormPopup, { position: itemFormPopup.position, layer: itemFormPopup.layer, setItemFormPopup: setItemFormPopup, item: itemFormPopup.item, children: child }, setItemFormPopup?.name)) : (''))) : (jsx(Fragment, { children: jsx(ItemFormPopup, { position: itemFormPopup.position, layer: itemFormPopup.layer, setItemFormPopup: setItemFormPopup, item: itemFormPopup.item }) })))] }));
-};
-function isComponentWithType(node) {
-    return isValidElement(node) && typeof node.type !== 'string' && '__TYPE' in node.type;
-}
-
-/**
- * This Components injects Tags comming from an {@link ItemsApi | `API`}
- * ```tsx
- * <Tags api={tagsApi} />
- * ```
- * or from on {@link Tag| `Array`}
- * ```tsx
- * <Tags data={tags} />
- * ```
- * Can be child of {@link AppShell | `AppShell`}
- * ```tsx
- * <AppShell>
- *     ...
- *     <Tags api={tagsApi} />
- * </AppShell>
- *  ```
- * Or child of {@link UtopiaMap | `UtopiaMap`}
- * ```tsx
- * <UtopiaMap>
- *     ...
- *     <Tags api={tagsApi} />
- * </UtopiaMap>
- * ```
- * @category Map
- */
-function Tags({ data, api }) {
-    const setTagData = useSetTagData();
-    const setTagApi = useSetTagApi();
-    useEffect(() => {
-        data && setTagData(data);
-        api && setTagApi(api);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [api, data]);
-    const location = useLocation();
-    const addFilterTag = useAddFilterTag();
-    const resetFilterTags = useResetFilterTags();
-    const tags = useTags();
-    const filterTags = useFilterTags();
-    useEffect(() => {
-        const params = new URLSearchParams(location.search);
-        const urlTags = params.get('tags');
-        const decodedTags = urlTags ? decodeURIComponent(urlTags) : '';
-        const decodedTagsArray = decodedTags.split(';');
-        if (decodedTagsArray.some((ut) => !filterTags.find((ft) => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase())) ||
-            filterTags.some((ft) => !decodedTagsArray.find((ut) => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase()))) {
-            resetFilterTags();
-            decodedTagsArray.map((urlTag) => {
-                const tag = tags.find((t) => t.name.toLocaleLowerCase() === urlTag.toLocaleLowerCase());
-                tag && addFilterTag(tag);
+    const tags = useTags();
+    const filterTags = useFilterTags();
+    useEffect(() => {
+        const params = new URLSearchParams(location.search);
+        const urlTags = params.get('tags');
+        const decodedTags = urlTags ? decodeURIComponent(urlTags) : '';
+        const decodedTagsArray = decodedTags.split(';');
+        if (decodedTagsArray.some((ut) => !filterTags.find((ft) => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase())) ||
+            filterTags.some((ft) => !decodedTagsArray.find((ut) => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase()))) {
+            resetFilterTags();
+            decodedTagsArray.map((urlTag) => {
+                const tag = tags.find((t) => t.name.toLocaleLowerCase() === urlTag.toLocaleLowerCase());
+                tag && addFilterTag(tag);
                 return null;
             });
         }
@@ -3569,110 +3074,13 @@ function Permissions({ data, api, adminRole, }) {
     const setAdminRole = useSetAdminRole();
     const { user } = useAuth();
     useEffect(() => {
-        adminRole && setAdminRole(adminRole);
-        data && setPermissionData(data);
-        api && setPermissionApi(api);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [api, data, adminRole, user]);
-    return jsx(Fragment, {});
-}
-
-/**
- * @category Map
- */
-const ItemForm = ({ children, item, title, setPopupTitle, }) => {
-    useEffect(() => {
-        setPopupTitle && title && setPopupTitle(title);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [title]);
-    return (jsx("div", { children: children
-            ? Children.toArray(children).map((child) => isValidElement(child)
-                ? cloneElement(child, { item, test: 'test' })
-                : '')
-            : '' }));
-};
-ItemForm.__TYPE = 'ItemForm';
-
-/**
- * @category Map
- */
-const ItemView = ({ children, item }) => {
-    return (jsx("div", { children: children
-            ? Children.toArray(children).map((child) => isValidElement(child) ? cloneElement(child, { item }) : null)
-            : null }));
-};
-ItemView.__TYPE = 'ItemView';
-
-/**
- * @category Map
- */
-const PopupTextAreaInput = ({ dataField, placeholder, style, item, }) => {
-    return (jsx(TextAreaInput, { defaultValue: item?.text ? item.text : '', dataField: dataField, placeholder: placeholder, inputStyle: style }));
-};
-
-/**
- * @category Map
- */
-const PopupStartEndInput = ({ item, showLabels = true, updateStartValue, updateEndValue, }) => {
-    return (jsxs("div", { className: 'tw:grid tw:grid-cols-2 tw:gap-2', children: [jsx(TextInput, { type: 'date', placeholder: 'start', dataField: 'start', inputStyle: 'tw:text-sm tw:px-2', labelTitle: showLabels ? 'start' : '', defaultValue: item && item.start ? item.start.substring(0, 10) : '', autocomplete: 'one-time-code', updateFormValue: updateStartValue }), jsx(TextInput, { type: 'date', placeholder: 'end', dataField: 'end', inputStyle: 'tw:text-sm tw:px-2', labelTitle: showLabels ? 'end' : '', defaultValue: item && item.end ? item.end.substring(0, 10) : '', autocomplete: 'one-time-code', updateFormValue: updateEndValue })] }));
-};
-
-/**
- * @category Map
- */
-const PopupTextInput = ({ dataField, placeholder, style, item, }) => {
-    return (jsx(TextInput, { defaultValue: item?.name ? item.name : '', dataField: dataField, placeholder: placeholder, inputStyle: style, type: 'text', containerStyle: 'tw:mt-4' }));
-};
-
-/**
- * @category Map
- */
-const PopupCheckboxInput = ({ dataField, label, item, }) => {
-    return (jsxs("label", { htmlFor: item?.id, className: 'tw:label tw:justify-normal tw:pt-1 tw:pb-1', children: [jsx("input", { id: item?.id, type: 'checkbox', name: dataField, className: 'tw:checkbox tw:checkbox-xs tw:checkbox-success', checked: item?.public_edit }), jsx("span", { className: 'tw:text-sm tw:label-text tw:mx-2 tw:cursor-pointer', children: label })] }));
-};
-
-function CalendarDaysIcon({
-  title,
-  titleId,
-  ...props
-}, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    "aria-hidden": "true",
-    "data-slot": "icon",
-    ref: svgRef,
-    "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
-    id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
-    d: "M12.75 12.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM7.5 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM8.25 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM9.75 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM10.5 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM12.75 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM14.25 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM15 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM16.5 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM15 12.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM16.5 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z",
-    clipRule: "evenodd"
-  }));
-}
-const ForwardRef$6 = /*#__PURE__*/ React.forwardRef(CalendarDaysIcon);
-
-/**
- * @category Map
- */
-const StartEndView = ({ item }) => {
-    return (jsxs("div", { className: 'tw:flex tw:flex-row tw:mb-4 tw:mt-1', children: [jsxs("div", { className: 'tw:basis-2/5 tw:flex tw:flex-row', children: [jsx(ForwardRef$6, { className: 'tw:h-4 tw:w-4 tw:mr-2' }), jsx("time", { className: 'tw:align-middle', dateTime: item && item.start ? item.start.substring(0, 10) : '', children: item && item.start ? new Date(item.start).toLocaleDateString() : '' })] }), jsx("div", { className: 'tw:basis-1/5 tw:place-content-center', children: jsx("span", { children: "-" }) }), jsxs("div", { className: 'tw:basis-2/5 tw:flex tw:flex-row', children: [jsx(ForwardRef$6, { className: 'tw:h-4 tw:w-4 tw:mr-2' }), jsx("time", { className: 'tw:align-middle', dateTime: item && item.end ? item.end.substring(0, 10) : '', children: item && item.end ? new Date(item.end).toLocaleDateString() : '' })] })] }));
-};
-
-/**
- * @category Map
- */
-const PopupButton = ({ url, parameterField, text, item, }) => {
-    const params = new URLSearchParams(window.location.search);
-    const getItemTags = useGetItemTags();
-    return (jsx(Link, { to: `${url}/${parameterField ? item?.id : ''}?${params}`, children: jsx("button", { style: {
-                backgroundColor: `${item?.color ?? (item && (getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : (item?.layer?.markerDefaultColor ?? '#000')))}`,
-            }, className: 'tw:btn tw:text-white tw:btn-sm tw:float-right tw:mt-1', children: text }) }));
-};
+        adminRole && setAdminRole(adminRole);
+        data && setPermissionData(data);
+        api && setPermissionApi(api);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [api, data, adminRole, user]);
+    return jsx(Fragment, {});
+}
 
 const themes = [
     'default',
@@ -3702,6 +3110,27 @@ const ThemeControl = () => {
     return (jsxs("div", { className: 'tw:dropdown tw:mr-2', children: [jsxs("div", { tabIndex: 0, role: 'button', className: 'tw:btn tw:m-1', children: ["Theme", jsx("svg", { width: '12px', height: '12px', className: 'tw:inline-block tw:h-2 tw:w-2 tw:fill-current tw:opacity-60', xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 2048 2048', children: jsx("path", { d: 'M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z' }) })] }), jsx("ul", { tabIndex: 0, className: 'tw:dropdown-content tw:bg-base-200 tw:rounded-box tw:z-1 tw:w-36 tw:p-2 tw:shadow-2xl', children: themes.map((t) => (jsx("li", { children: jsx("input", { className: `tw:btn ${theme === t ? 'tw:bg-base-300' : ''} tw:btn-sm tw:btn-block tw:btn-ghost tw:justify-start`, type: 'radio', name: 'theme', value: t, checked: theme === t, onChange: () => setTheme(t), "aria-label": t.toLowerCase() }) }, t))) })] }));
 };
 
+function EllipsisVerticalIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    d: "M8 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM8 6.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM9.5 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
+  }));
+}
+const ForwardRef$9 = /*#__PURE__*/ React.forwardRef(EllipsisVerticalIcon);
+
 const UserControl = () => {
     const { isAuthenticated, user, logout } = useAuth();
     const appState = useAppState();
@@ -4019,6 +3448,43 @@ function SetNewPasswordPage() {
                     onClick: () => onReset(), children: loading ? jsx("span", { className: 'tw:loading tw:loading-spinner' }) : 'Set' }) })] }));
 }
 
+/**
+ * @category Input
+ */
+function TextAreaInput({ labelTitle, dataField, labelStyle, containerStyle, inputStyle, defaultValue, placeholder, required = true, updateFormValue, }) {
+    const ref = useRef(null);
+    const [inputValue, setInputValue] = useState(defaultValue);
+    useEffect(() => {
+        setInputValue(defaultValue);
+    }, [defaultValue]);
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        if (updateFormValue) {
+            updateFormValue(newValue);
+        }
+    };
+    return (jsxs("div", { className: `tw:form-control tw:w-full ${containerStyle ?? ''}`, children: [labelTitle ? (jsx("label", { className: 'tw:label', children: jsx("span", { className: `tw:label-text tw:text-base-content ${labelStyle ?? ''}`, children: labelTitle }) })) : null, jsx("textarea", { required: required, ref: ref, value: inputValue, name: dataField, className: `tw:textarea tw:textarea-bordered tw:w-full tw:leading-5 ${inputStyle ?? ''}`, placeholder: placeholder ?? '', onChange: handleChange })] }));
+}
+
+/**
+ * @category Input
+ */
+function TextInput({ labelTitle, labelStyle, type, dataField, containerStyle, inputStyle, defaultValue, placeholder, autocomplete, pattern, required = true, updateFormValue, }) {
+    const [inputValue, setInputValue] = useState(defaultValue ?? '');
+    useEffect(() => {
+        setInputValue(defaultValue ?? '');
+    }, [defaultValue]);
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        if (updateFormValue) {
+            updateFormValue(newValue);
+        }
+    };
+    return (jsxs("div", { className: `tw:form-control ${containerStyle ?? ''}`, children: [labelTitle ? (jsx("label", { className: 'tw:label', children: jsx("span", { className: `tw:label-text tw:text-base-content ${labelStyle ?? ''}`, children: labelTitle }) })) : null, jsx("input", { required: required, pattern: pattern, type: type ?? 'text', name: dataField, value: inputValue, placeholder: placeholder ?? '', autoComplete: autocomplete, onChange: handleChange, className: `tw:input tw:input-bordered tw:w-full ${inputStyle ?? ''}` })] }));
+}
+
 function Subtitle({ styleClass, children }) {
     return jsx("div", { className: `tw:text-xl tw:font-semibold ${styleClass}`, children: children });
 }
@@ -4053,6 +3519,77 @@ const SelectUser = () => {
                         }) }) }) }), jsx("div", { className: 'tw:w-full tw:grid tw:mt-4', children: jsx(Link, { className: 'tw:place-self-center ', to: '/attestation-form' + '?to=' + selectedUsers.map((u) => u, ','), children: jsx("button", { className: 'tw:btn tw:px-8', children: "Next" }) }) })] }));
 };
 
+/**
+ * @category Map
+ */
+const PopupTextAreaInput$1 = ({ dataField, placeholder, style, item, }) => {
+    return (jsx(TextAreaInput, { defaultValue: item?.text ? item.text : '', dataField: dataField, placeholder: placeholder, inputStyle: style }));
+};
+
+/**
+ * @category Map
+ */
+const PopupStartEndInput$1 = ({ item, showLabels = true, updateStartValue, updateEndValue, }) => {
+    return (jsxs("div", { className: 'tw:grid tw:grid-cols-2 tw:gap-2', children: [jsx(TextInput, { type: 'date', placeholder: 'start', dataField: 'start', inputStyle: 'tw:text-sm tw:px-2', labelTitle: showLabels ? 'start' : '', defaultValue: item && item.start ? item.start.substring(0, 10) : '', autocomplete: 'one-time-code', updateFormValue: updateStartValue }), jsx(TextInput, { type: 'date', placeholder: 'end', dataField: 'end', inputStyle: 'tw:text-sm tw:px-2', labelTitle: showLabels ? 'end' : '', defaultValue: item && item.end ? item.end.substring(0, 10) : '', autocomplete: 'one-time-code', updateFormValue: updateEndValue })] }));
+};
+
+/**
+ * @category Map
+ */
+const PopupTextInput$1 = ({ dataField, placeholder, style, item, }) => {
+    return (jsx(TextInput, { defaultValue: item?.name ? item.name : '', dataField: dataField, placeholder: placeholder, inputStyle: style, type: 'text', containerStyle: 'tw:mt-4' }));
+};
+
+/**
+ * @category Map
+ */
+const PopupCheckboxInput$1 = ({ dataField, label, item, }) => {
+    return (jsxs("label", { htmlFor: item?.id, className: 'tw:label tw:justify-normal tw:pt-1 tw:pb-1', children: [jsx("input", { id: item?.id, type: 'checkbox', name: dataField, className: 'tw:checkbox tw:checkbox-xs tw:checkbox-success', checked: item?.public_edit }), jsx("span", { className: 'tw:text-sm tw:label-text tw:mx-2 tw:cursor-pointer', children: label })] }));
+};
+
+function CalendarDaysIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    d: "M12.75 12.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM7.5 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM8.25 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM9.75 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM10.5 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM12.75 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM14.25 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM15 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM16.5 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM15 12.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM16.5 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z",
+    clipRule: "evenodd"
+  }));
+}
+const ForwardRef$8 = /*#__PURE__*/ React.forwardRef(CalendarDaysIcon);
+
+/**
+ * @category Map
+ */
+const StartEndView$1 = ({ item }) => {
+    return (jsxs("div", { className: 'tw:flex tw:flex-row tw:mb-4 tw:mt-1', children: [jsxs("div", { className: 'tw:basis-2/5 tw:flex tw:flex-row', children: [jsx(ForwardRef$8, { className: 'tw:h-4 tw:w-4 tw:mr-2' }), jsx("time", { className: 'tw:align-middle', dateTime: item && item.start ? item.start.substring(0, 10) : '', children: item && item.start ? new Date(item.start).toLocaleDateString() : '' })] }), jsx("div", { className: 'tw:basis-1/5 tw:place-content-center', children: jsx("span", { children: "-" }) }), jsxs("div", { className: 'tw:basis-2/5 tw:flex tw:flex-row', children: [jsx(ForwardRef$8, { className: 'tw:h-4 tw:w-4 tw:mr-2' }), jsx("time", { className: 'tw:align-middle', dateTime: item && item.end ? item.end.substring(0, 10) : '', children: item && item.end ? new Date(item.end).toLocaleDateString() : '' })] })] }));
+};
+
+/**
+ * @category Map
+ */
+const PopupButton$1 = ({ url, parameterField, text, item, }) => {
+    const params = new URLSearchParams(window.location.search);
+    const getItemTags = useGetItemTags();
+    return (jsx(Link, { to: `${url}/${parameterField ? item?.id : ''}?${params}`, children: jsx("button", { style: {
+                backgroundColor: `${item?.color ?? (item && (getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : (item?.layer?.markerDefaultColor ?? '#000')))}`,
+            }, className: 'tw:btn tw:text-white tw:btn-sm tw:float-right tw:mt-1', children: text }) }));
+};
+
 function PlusIcon({
   title,
   titleId,
@@ -4076,15 +3613,203 @@ function PlusIcon({
     d: "M12 4.5v15m7.5-7.5h-15"
   }));
 }
-const ForwardRef$5 = /*#__PURE__*/ React.forwardRef(PlusIcon);
+const ForwardRef$7 = /*#__PURE__*/ React.forwardRef(PlusIcon);
 
 function PlusButton({ layer, triggerAction, color, collection = 'items', }) {
     const hasUserPermission = useHasUserPermission();
-    return (jsx(Fragment, { children: hasUserPermission(collection, 'create', undefined, layer) && (jsx("div", { className: 'tw:dropdown tw:dropdown-top tw:dropdown-end tw:dropdown-hover tw:z-3000 tw:absolute tw:right-4 tw:bottom-4', children: jsx("button", { tabIndex: 0, className: 'tw:z-500 tw:btn tw:btn-circle tw:shadow', onClick: () => {
-                    triggerAction();
-                }, style: { backgroundColor: color, color: '#fff' }, children: jsx(ForwardRef$5, { className: 'tw:w-5 tw:h-5 tw:stroke-[2.5]' }) }) })) }));
+    return (jsx(Fragment, { children: hasUserPermission(collection, 'create', undefined, layer) && (jsx("div", { className: 'tw:dropdown tw:dropdown-top tw:dropdown-end tw:dropdown-hover tw:z-3000 tw:absolute tw:right-4 tw:bottom-4', children: jsx("button", { tabIndex: 0, className: 'tw:z-500 tw:btn tw:btn-circle tw:shadow', onClick: () => {
+                    triggerAction();
+                }, style: { backgroundColor: color, color: '#fff' }, children: jsx(ForwardRef$7, { className: 'tw:w-5 tw:h-5 tw:stroke-[2.5]' }) }) })) }));
+}
+
+const goldenRatioConjugate = 0.618033988749895;
+const randomColor = () => {
+    return hsvToHex((Math.random() + goldenRatioConjugate) % 1, 0.8, 0.7);
+};
+function hsvToHex(h, s, v) {
+    let r, g, b;
+    const i = Math.floor(h * 6);
+    const f = h * 6 - i;
+    const p = v * (1 - s);
+    const q = v * (1 - f * s);
+    const t = v * (1 - (1 - f) * s);
+    switch (i % 6) {
+        case 0:
+            r = v;
+            g = t;
+            b = p;
+            break;
+        case 1:
+            r = q;
+            g = v;
+            b = p;
+            break;
+        case 2:
+            r = p;
+            g = v;
+            b = t;
+            break;
+        case 3:
+            r = p;
+            g = q;
+            b = v;
+            break;
+        case 4:
+            r = t;
+            g = p;
+            b = v;
+            break;
+        case 5:
+            r = v;
+            g = p;
+            b = q;
+            break;
+    }
+    return rgbToHex(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255));
+}
+const rgbToHex = (r, g, b) => '#' +
+    [r, g, b]
+        .map((x) => {
+        const hex = x.toString(16);
+        return hex.length === 1 ? `0${hex}` : hex;
+    })
+        .join('');
+
+function PencilIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    d: "M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z"
+  }));
+}
+const ForwardRef$6 = /*#__PURE__*/ React.forwardRef(PencilIcon);
+
+function TrashIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z",
+    clipRule: "evenodd"
+  }));
+}
+const ForwardRef$5 = /*#__PURE__*/ React.forwardRef(TrashIcon);
+
+var TargetDotSVG = 'data:image/svg+xml;base64,PHN2ZwogICAgICAgICAgICAgICAgICAgICAgICAgICAgc3Ryb2tlPSdjdXJyZW50Q29sb3InCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBmaWxsPSdjdXJyZW50Q29sb3InCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBzdHJva2VXaWR0aD0nMCcKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHZpZXdCb3g9JzAgMCA1MTIgNTEyJwogICAgICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPSd3LTUgaC01JwogICAgICAgICAgICAgICAgICAgICAgICAgICAgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJwogICAgICAgICAgICAgICAgICAgICAgICAgID4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9J00yNTYgMGMxNy43IDAgMzIgMTQuMyAzMiAzMlY0Mi40YzkzLjcgMTMuOSAxNjcuNyA4OCAxODEuNiAxODEuNkg0ODBjMTcuNyAwIDMyIDE0LjMgMzIgMzJzLTE0LjMgMzItMzIgMzJINDY5LjZjLTEzLjkgOTMuNy04OCAxNjcuNy0xODEuNiAxODEuNlY0ODBjMCAxNy43LTE0LjMgMzItMzIgMzJzLTMyLTE0LjMtMzItMzJWNDY5LjZDMTMwLjMgNDU1LjcgNTYuMyAzODEuNyA0Mi40IDI4OEgzMmMtMTcuNyAwLTMyLTE0LjMtMzItMzJzMTQuMy0zMiAzMi0zMkg0Mi40QzU2LjMgMTMwLjMgMTMwLjMgNTYuMyAyMjQgNDIuNFYzMmMwLTE3LjcgMTQuMy0zMiAzMi0zMnpNMTA3LjQgMjg4YzEyLjUgNTguMyA1OC40IDEwNC4xIDExNi42IDExNi42VjM4NGMwLTE3LjcgMTQuMy0zMiAzMi0zMnMzMiAxNC4zIDMyIDMydjIwLjZjNTguMy0xMi41IDEwNC4xLTU4LjQgMTE2LjYtMTE2LjZIMzg0Yy0xNy43IDAtMzItMTQuMy0zMi0zMnMxNC4zLTMyIDMyLTMyaDIwLjZDMzkyLjEgMTY1LjcgMzQ2LjMgMTE5LjkgMjg4IDEwNy40VjEyOGMwIDE3LjctMTQuMyAzMi0zMiAzMnMtMzItMTQuMy0zMi0zMlYxMDcuNEMxNjUuNyAxMTkuOSAxMTkuOSAxNjUuNyAxMDcuNCAyMjRIMTI4YzE3LjcgMCAzMiAxNC4zIDMyIDMycy0xNC4zIDMyLTMyIDMySDEwNy40ek0yNTYgMjI0YTMyIDMyIDAgMSAxIDAgNjQgMzIgMzIgMCAxIDEgMC02NHonPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=';
+
+const isClickInsideRectangle = (e, element) => {
+    const r = element.getBoundingClientRect();
+    return e.clientX > r.left && e.clientX < r.right && e.clientY > r.top && e.clientY < r.bottom;
+};
+const DialogModal = ({ title, isOpened, onClose, children, showCloseButton = true, closeOnClickOutside = true, className, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (isOpened) {
+            ref.current?.showModal();
+            ref.current?.classList.remove('tw:hidden');
+            document.body.classList.add('modal-open'); // prevent bg scroll
+        }
+        else {
+            ref.current?.close();
+            ref.current?.classList.add('tw:hidden');
+            document.body.classList.remove('modal-open');
+        }
+    }, [isOpened]);
+    if (isOpened) {
+        return (jsx("dialog", { className: `${className ?? ''} card tw:shadow-xl tw:absolute tw:right-0 tw:top-0 tw:bottom-0 tw:left-0 tw:m-auto tw:transition-opacity tw:duration-300 tw:p-4 tw:max-w-xl tw:bg-base-100`, ref: ref, onCancel: onClose, onClick: (e) => ref.current && !isClickInsideRectangle(e, ref.current) && closeOnClickOutside && onClose(), children: jsxs("div", { className: 'card-body tw:p-2', children: [jsx("h2", { className: 'tw:text-2xl tw:font-semibold tw:mb-2 tw:text-center', children: title }), children, showCloseButton && (jsx("button", { className: 'btn btn-sm btn-circle btn-ghost tw:absolute tw:right-2 tw:top-2', onClick: onClose, children: "\u2715" }))] }) }));
+    }
+    else
+        return jsx(Fragment, {});
+};
+
+function HeaderView({ item, api, editCallback, deleteCallback, setPositionCallback, loading, hideMenu = false, big = false, truncateSubname = true, hideSubname = false, showAddress = false, }) {
+    const [modalOpen, setModalOpen] = useState(false);
+    const hasUserPermission = useHasUserPermission();
+    const navigate = useNavigate();
+    const appState = useAppState();
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const avatar = item.image && appState.assetsApi.url + item.image + '?width=160&heigth=160';
+    const title = item.name;
+    const subtitle = item.subname;
+    const [address] = useState('');
+    const params = new URLSearchParams(window.location.search);
+    const openDeleteModal = async (event) => {
+        setModalOpen(true);
+        event.stopPropagation();
+    };
+    return (jsxs(Fragment, { children: [jsxs("div", { className: 'tw:flex tw:flex-row', children: [jsx("div", { className: 'tw:grow tw:max-w-[calc(100%-60px)] }', children: jsxs("div", { className: 'flex items-center', children: [avatar && (jsx("div", { className: 'tw:avatar', children: jsxs("div", { className: `${big ? 'tw:w-20' : 'tw:w-10'} tw:inline tw:items-center tw:justify-center overflow-hidden`, children: [jsx("img", { className: 'tw:w-full tw:h-full tw:object-cover tw:rounded-full', src: avatar, alt: item.name + ' logo', onLoad: () => setImageLoaded(true), onError: () => setImageLoaded(false), style: { display: imageLoaded ? 'block' : 'none' } }), !imageLoaded && (jsx("div", { className: 'tw:w-full tw:h-full tw:bg-gray-200 tw:rounded-full' }))] }) })), jsxs("div", { className: `${avatar ? 'tw:ml-2' : ''} tw:overflow-hidden`, children: [jsx("div", { className: `${big ? 'tw:xl:text-3xl tw:text-2xl' : 'tw:text-xl'} tw:font-semibold tw:truncate`, title: title, children: title }), showAddress && address && !hideSubname && (jsx("div", { className: `tw:text-xs  tw:text-gray-500 ${truncateSubname && 'tw:truncate'}`, children: address })), subtitle && !hideSubname && (jsx("div", { className: `tw:text-xs  tw:opacity-50 ${truncateSubname && 'tw:truncate'}`, children: subtitle }))] })] }) }), jsx("div", { onClick: (e) => e.stopPropagation(), className: `${big ? 'tw:mt-5' : 'tw:mt-1'}`, children: (api?.deleteItem || item.layer?.api?.updateItem) &&
+                            (hasUserPermission(api?.collectionName, 'delete', item) ||
+                                hasUserPermission(api?.collectionName, 'update', item)) &&
+                            !hideMenu && (jsxs("div", { className: 'tw:dropdown tw:dropdown-bottom', children: [jsx("label", { tabIndex: 0, className: 'tw:bg-base-100 tw:btn tw:m-1 tw:leading-3 tw:border-none tw:min-h-0 tw:h-6', children: jsx(ForwardRef$9, { className: 'tw:h-5 tw:w-5' }) }), jsxs("ul", { tabIndex: 0, className: 'tw:dropdown-content tw:menu tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:z-1000', children: [api?.updateItem &&
+                                            hasUserPermission(api.collectionName, 'update', item) &&
+                                            editCallback && (jsx("li", { children: jsx("a", { className: 'tw:text-base-content! tw:cursor-pointer', onClick: (e) => item.layer?.customEditLink
+                                                    ? navigate(`${item.layer.customEditLink}${item.layer.customEditParameter ? `/${item.id}${params && '?' + params}` : ''} `)
+                                                    : editCallback(e), children: jsx(ForwardRef$6, { className: 'tw:h-5 tw:w-5' }) }) })), api?.updateItem &&
+                                            hasUserPermission(api.collectionName, 'update', item) &&
+                                            setPositionCallback && (jsx("li", { children: jsx("a", { className: 'tw:text-base-content! tw:cursor-pointer', onClick: setPositionCallback, children: jsx(SVG, { src: TargetDotSVG, className: 'tw:w-5 tw:h-5' }) }) })), api?.deleteItem &&
+                                            hasUserPermission(api.collectionName, 'delete', item) &&
+                                            deleteCallback && (jsx("li", { children: jsx("a", { className: 'tw:cursor-pointer tw:text-error!', onClick: openDeleteModal, children: loading ? (jsx("span", { className: 'tw:loading tw:loading-spinner tw:loading-sm' })) : (jsx(ForwardRef$5, { className: 'tw:h-5 tw:w-5' })) }) }))] })] })) })] }), jsx(DialogModal, { isOpened: modalOpen, title: 'Are you sure?', showCloseButton: false, onClose: () => setModalOpen(false), children: jsxs("div", { onClick: (e) => e.stopPropagation(), children: [jsxs("span", { children: ["Do you want to delete ", jsx("b", { children: item.name }), "?"] }), jsx("div", { className: 'tw:grid', children: jsxs("div", { className: 'tw:flex tw:justify-between', children: [jsx("label", { className: 'tw:btn tw:mt-4 tw:btn-error', onClick: (e) => {
+                                            deleteCallback(e);
+                                            setModalOpen(false);
+                                        }, children: "Yes" }), jsx("label", { className: 'tw:btn tw:mt-4', onClick: () => setModalOpen(false), children: "No" })] }) })] }) })] }));
 }
 
+// in miliseconds
+const units = [
+    { label: 'year', seconds: 31536000 },
+    { label: 'month', seconds: 2592000 },
+    { label: 'week', seconds: 604800 },
+    { label: 'day', seconds: 86400 },
+    { label: 'hour', seconds: 3600 },
+    { label: 'minute', seconds: 60 },
+    { label: 'second', seconds: 1 },
+];
+const timeAgo = (date) => {
+    const time = Math.floor((new Date().valueOf() - new Date(date).valueOf()) / 1000);
+    const { interval, unit } = calculateTimeDifference(time);
+    const suffix = interval === 1 ? '' : 's';
+    return `${interval} ${unit}${suffix} ago`;
+};
+const calculateTimeDifference = (time) => {
+    for (const { label, seconds } of units) {
+        const interval = Math.floor(time / seconds);
+        if (interval >= 1) {
+            return {
+                interval,
+                unit: label,
+            };
+        }
+    }
+    return {
+        interval: 0,
+        unit: '',
+    };
+};
+
 const DateUserInfo = ({ item }) => {
     const [infoExpanded, setInfoExpanded] = useState(false);
     return (jsxs("div", { className: 'tw:flex tw:-mb-1 tw:flex-row tw:mr-2 tw:-mt-2', onClick: (e) => e.stopPropagation(), children: [infoExpanded ? (jsx("p", { className: 'tw:italic tw:min-h-[21px] tw:my-0! tw:text-gray-500', onClick: () => setInfoExpanded(false), children: `${item.date_updated && item.date_updated !== item.date_created ? 'updated' : 'posted'} ${item.user_created?.first_name ? `by ${item.user_created.first_name}` : ''} ${item.date_updated ? timeAgo(item.date_updated) : timeAgo(item.date_created)}` })) : (jsx("p", { className: 'tw:my-0! tw:min-h-[21px] tw:font-bold tw:cursor-pointer tw:text-gray-500', onClick: () => setInfoExpanded(true), children: "\u24D8" })), jsx("div", { className: 'tw:grow ' })] }));
@@ -4100,7 +3825,7 @@ const ItemCard = ({ i, loading, url, deleteCallback, }) => {
                 navigate('/' + i.id + `${params.size > 0 ? `?${params.toString()}` : ''}`);
             else
                 navigate(url + i.id + `${params.size > 0 ? `?${params.toString()}` : ''}`);
-        }, children: [jsx(HeaderView, { loading: loading, item: i, api: i.layer?.api, editCallback: () => navigate('/edit-item/' + i.id), deleteCallback: () => deleteCallback(i) }), jsxs("div", { className: 'tw:overflow-y-auto tw:overflow-x-hidden tw:max-h-64 fade', children: [i.layer?.itemType.show_start_end && jsx(StartEndView, { item: i }), i.layer?.itemType.show_text && jsx(TextView, { truncate: true, text: i.text, itemId: i.id })] }), jsx(DateUserInfo, { item: i })] }));
+        }, children: [jsx(HeaderView, { loading: loading, item: i, api: i.layer?.api, editCallback: () => navigate('/edit-item/' + i.id), deleteCallback: () => deleteCallback(i) }), jsxs("div", { className: 'tw:overflow-y-auto tw:overflow-x-hidden tw:max-h-64 fade', children: [i.layer?.itemType.show_start_end && jsx(StartEndView$1, { item: i }), i.layer?.itemType.show_text && jsx(TextView$1, { truncate: true, text: i.text, itemId: i.id })] }), jsx(DateUserInfo, { item: i })] }));
 };
 
 /**
@@ -4202,7 +3927,7 @@ const OverlayItemsIndexPage = ({ url, layerName, parameterField, plusButton = tr
                                                 : 0;
                                         return dateB - dateA; // Subtracts milliseconds which are numbers
                                     })
-                                        .map((i, k) => (jsx("div", { className: 'tw:break-inside-avoid tw:mb-6', children: jsx(ItemCard, { i: i, loading: loading, url: url, deleteCallback: () => deleteItem(i) }) }, k))), addItemPopupType === 'place' && (jsx("form", { ref: tabRef, autoComplete: 'off', onSubmit: (e) => submitNewItem(e), children: jsxs("div", { className: 'tw:cursor-pointer tw:break-inside-avoid card tw:border-[1px] tw:border-base-300 card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:p-6 tw:mb-10', children: [jsx("label", { className: 'btn btn-sm tw:rounded-2xl btn-circle btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600', onClick: () => setAddItemPopupType(''), children: jsx("p", { className: 'tw:text-center', children: "\u2715" }) }), jsx(TextInput, { type: 'text', placeholder: 'Name', dataField: 'name', defaultValue: '', inputStyle: '' }), layer?.itemType.show_start_end_input && jsx(PopupStartEndInput, {}), jsx(TextAreaInput, { placeholder: 'Text', dataField: 'text', defaultValue: '', inputStyle: 'tw:h-40 tw:mt-5' }), jsx("div", { className: 'tw:flex tw:justify-center', children: jsx("button", { className: loading
+                                        .map((i, k) => (jsx("div", { className: 'tw:break-inside-avoid tw:mb-6', children: jsx(ItemCard, { i: i, loading: loading, url: url, deleteCallback: () => deleteItem(i) }) }, k))), addItemPopupType === 'place' && (jsx("form", { ref: tabRef, autoComplete: 'off', onSubmit: (e) => submitNewItem(e), children: jsxs("div", { className: 'tw:cursor-pointer tw:break-inside-avoid card tw:border-[1px] tw:border-base-300 card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:p-6 tw:mb-10', children: [jsx("label", { className: 'btn btn-sm tw:rounded-2xl btn-circle btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600', onClick: () => setAddItemPopupType(''), children: jsx("p", { className: 'tw:text-center', children: "\u2715" }) }), jsx(TextInput, { type: 'text', placeholder: 'Name', dataField: 'name', defaultValue: '', inputStyle: '' }), layer?.itemType.show_start_end_input && jsx(PopupStartEndInput$1, {}), jsx(TextAreaInput, { placeholder: 'Text', dataField: 'text', defaultValue: '', inputStyle: 'tw:h-40 tw:mt-5' }), jsx("div", { className: 'tw:flex tw:justify-center', children: jsx("button", { className: loading
                                                             ? 'btn btn-disabled tw:mt-5 tw:place-self-center'
                                                             : 'btn tw:mt-5 tw:place-self-center', type: 'submit', children: loading ? jsx("span", { className: 'loading loading-spinner' }) : 'Save' }) })] }) }))] }) })] }) }), plusButton && (jsx(PlusButton, { layer: layer, triggerAction: () => {
                     setAddItemPopupType('place');
@@ -4891,7 +4616,7 @@ const GroupSubHeaderView = ({ item, shareBaseUrl, platforms, }) => (jsxs("div",
                     : window.location.protocol + '//' + window.location.host + '/item/' + item.id, title: item.name, platforms: platforms }) })] }));
 
 const ProfileStartEndView = ({ item }) => {
-    return (jsx("div", { className: 'tw:mt-2 tw:px-6 tw:max-w-xs', children: jsx(StartEndView, { item: item }) }));
+    return (jsx("div", { className: 'tw:mt-2 tw:px-6 tw:max-w-xs', children: jsx(StartEndView$1, { item: item }) }));
 };
 
 const get = (value, path, defaultValue) => {
@@ -4915,7 +4640,7 @@ const get = (value, path, defaultValue) => {
 const ProfileTextView = ({ item, dataField = 'text', heading, hideWhenEmpty, }) => {
     const text = get(item, dataField);
     const parsedText = typeof text !== 'string' ? '' : text;
-    return (jsxs("div", { className: 'tw:my-10 tw:mt-2 tw:px-6', children: [!(text === '' && hideWhenEmpty) && (jsx("h2", { className: 'tw:text-lg tw:font-semibold', children: heading })), jsx("div", { className: 'tw:mt-2 tw:text-sm', children: jsx(TextView, { itemId: item.id, rawText: parsedText }) })] }));
+    return (jsxs("div", { className: 'tw:my-10 tw:mt-2 tw:px-6', children: [!(text === '' && hideWhenEmpty) && (jsx("h2", { className: 'tw:text-lg tw:font-semibold', children: heading })), jsx("div", { className: 'tw:mt-2 tw:text-sm', children: jsx(TextView$1, { itemId: item.id, rawText: parsedText }) })] }));
 };
 
 const componentMap$1 = {
@@ -4937,11 +4662,11 @@ const FlexView = ({ item }) => {
 };
 
 const OnepagerView = ({ item }) => {
-    return (jsxs("div", { className: 'tw:h-full tw:overflow-y-auto fade', children: [jsx(GroupSubHeaderView, { item: item, shareBaseUrl: `https://www.wuerdekompass.org/aktivitaeten/gruppensuche/#/gruppe/${item.slug}` }), item.user_created?.first_name && jsx(ContactInfoView, { heading: 'Du hast Fragen?', item: item }), jsx("div", { className: 'tw:my-10 tw:mt-2 tw:px-6 tw:text-sm ', children: jsx(TextView, { itemId: item.id, rawText: item.text ?? 'Keine Beschreibung vorhanden' }) }), item.next_appointment && (jsxs("div", { className: 'tw:my-10 tw:px-6', children: [jsx("h2", { className: 'tw:text-lg tw:font-semibold', children: "N\u00E4chste Termine" }), jsx("div", { className: 'tw:mt-2 tw:text-sm', children: jsx(TextView, { itemId: item.id, rawText: item.next_appointment }) })] })), ";"] }));
+    return (jsxs("div", { className: 'tw:h-full tw:overflow-y-auto fade', children: [jsx(GroupSubHeaderView, { item: item, shareBaseUrl: `https://www.wuerdekompass.org/aktivitaeten/gruppensuche/#/gruppe/${item.slug}` }), item.user_created?.first_name && jsx(ContactInfoView, { heading: 'Du hast Fragen?', item: item }), jsx("div", { className: 'tw:my-10 tw:mt-2 tw:px-6 tw:text-sm ', children: jsx(TextView$1, { itemId: item.id, rawText: item.text ?? 'Keine Beschreibung vorhanden' }) }), item.next_appointment && (jsxs("div", { className: 'tw:my-10 tw:px-6', children: [jsx("h2", { className: 'tw:text-lg tw:font-semibold', children: "N\u00E4chste Termine" }), jsx("div", { className: 'tw:mt-2 tw:text-sm', children: jsx(TextView$1, { itemId: item.id, rawText: item.next_appointment }) })] })), ";"] }));
 };
 
 const SimpleView = ({ item }) => {
-    return (jsx("div", { className: 'tw:mt-8 tw:h-full tw:overflow-y-auto fade tw:px-6', children: jsx(TextView, { text: item.text, itemId: item.id }) }));
+    return (jsx("div", { className: 'tw:mt-8 tw:h-full tw:overflow-y-auto fade tw:px-6', children: jsx(TextView$1, { text: item.text, itemId: item.id }) }));
 };
 
 function LinkIcon({
@@ -4993,7 +4718,7 @@ function ActionButton({ item, triggerAddButton, triggerItemSelected, existingRel
                             }, style: {
                                 backgroundColor,
                                 color: '#fff',
-                            }, children: jsx(ForwardRef$5, { className: 'tw:w-5 tw:h-5 tw:stroke-[2.5]' }) }))] }), jsxs(DialogModal, { title: 'Select', isOpened: modalOpen, onClose: () => setModalOpen(false), className: 'tw:w-xl tw:sm:w-2xl tw:min-h-80 tw:bg-base-200', children: [jsx(TextInput, { defaultValue: '', placeholder: '\uD83D\uDD0D Search', containerStyle: 'lg:col-span-2 tw:m-4 ', updateFormValue: (val) => {
+                            }, children: jsx(ForwardRef$7, { className: 'tw:w-5 tw:h-5 tw:stroke-[2.5]' }) }))] }), jsxs(DialogModal, { title: 'Select', isOpened: modalOpen, onClose: () => setModalOpen(false), className: 'tw:w-xl tw:sm:w-2xl tw:min-h-80 tw:bg-base-200', children: [jsx(TextInput, { defaultValue: '', placeholder: '\uD83D\uDD0D Search', containerStyle: 'lg:col-span-2 tw:m-4 ', updateFormValue: (val) => {
                                 setSearch(val);
                             } }), jsx("div", { className: 'tw:grid tw:grid-cols-1 tw:sm:grid-cols-2', children: filterdItems
                                 .filter((item) => {
@@ -5073,7 +4798,7 @@ const TabsView = ({ attestations, item, offers, needs, relations, updatePermissi
         setActiveTab(urlTab ? Number(urlTab) : 1);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [location.search]);
-    return (jsxs("div", { role: 'tablist', className: 'tw:tabs tw:tabs-lift tw:mt-2 tw:mb-2 tw:px-6', children: [jsx("input", { type: 'radio', name: 'my_tabs_2', role: 'tab', className: 'tw:tab tw:font-bold tw:ps-2! tw:pe-2! ', "aria-label": `${item.layer?.itemType.icon_as_labels && activeTab !== 1 ? '📝' : '📝\u00A0Info'}`, checked: activeTab === 1 && true, onChange: () => updateActiveTab(1) }), jsxs("div", { role: 'tabpanel', className: 'tw:tab-content tw:bg-base-100 tw:rounded-box tw:!h-[calc(100dvh-280px)] tw:overflow-y-auto fade tw:pt-2 tw:pb-4 tw:mb-4 tw:overflow-x-hidden', children: [item.layer?.itemType.show_start_end && (jsx("div", { className: 'tw:max-w-xs', children: jsx(StartEndView, { item: item }) })), jsx(TextView, { text: item.text, itemId: item.id }), jsx("div", { className: 'tw:h-4' }), jsx(TextView, { text: item.contact, itemId: item.id })] }), item.layer?.itemType.questlog && (jsxs(Fragment, { children: [jsx("input", { type: 'radio', name: 'my_tabs_2', role: 'tab', className: 'tw:tab tw:font-bold tw:ps-2! tw:pe-2!', "aria-label": `${item.layer.itemType.icon_as_labels && activeTab !== 2 ? '❤️' : '❤️\u00A0Trust'}`, checked: activeTab === 2 && true, onChange: () => updateActiveTab(2) }), jsx("div", { role: 'tabpanel', className: 'tw:tab-content tw:bg-base-100 tw:rounded-box tw:!h-[calc(100dvh-280px)] tw:overflow-y-auto fade tw:pt-2 tw:pb-4 tw:mb-4 tw:overflow-x-hidden', children: jsx("table", { className: 'sm:tw:table-sm md:tw:table-md tw:w-full', children: jsx("tbody", { children: attestations
+    return (jsxs("div", { role: 'tablist', className: 'tw:tabs tw:tabs-lift tw:mt-2 tw:mb-2 tw:px-6', children: [jsx("input", { type: 'radio', name: 'my_tabs_2', role: 'tab', className: 'tw:tab tw:font-bold tw:ps-2! tw:pe-2! ', "aria-label": `${item.layer?.itemType.icon_as_labels && activeTab !== 1 ? '📝' : '📝\u00A0Info'}`, checked: activeTab === 1 && true, onChange: () => updateActiveTab(1) }), jsxs("div", { role: 'tabpanel', className: 'tw:tab-content tw:bg-base-100 tw:rounded-box tw:!h-[calc(100dvh-280px)] tw:overflow-y-auto fade tw:pt-2 tw:pb-4 tw:mb-4 tw:overflow-x-hidden', children: [item.layer?.itemType.show_start_end && (jsx("div", { className: 'tw:max-w-xs', children: jsx(StartEndView$1, { item: item }) })), jsx(TextView$1, { text: item.text, itemId: item.id }), jsx("div", { className: 'tw:h-4' }), jsx(TextView$1, { text: item.contact, itemId: item.id })] }), item.layer?.itemType.questlog && (jsxs(Fragment, { children: [jsx("input", { type: 'radio', name: 'my_tabs_2', role: 'tab', className: 'tw:tab tw:font-bold tw:ps-2! tw:pe-2!', "aria-label": `${item.layer.itemType.icon_as_labels && activeTab !== 2 ? '❤️' : '❤️\u00A0Trust'}`, checked: activeTab === 2 && true, onChange: () => updateActiveTab(2) }), jsx("div", { role: 'tabpanel', className: 'tw:tab-content tw:bg-base-100 tw:rounded-box tw:!h-[calc(100dvh-280px)] tw:overflow-y-auto fade tw:pt-2 tw:pb-4 tw:mb-4 tw:overflow-x-hidden', children: jsx("table", { className: 'sm:tw:table-sm md:tw:table-md tw:w-full', children: jsx("tbody", { children: attestations
                                     .filter((a) => a.to.some((t) => t.directus_users_id === item.user_created?.id))
                                     .sort((a, b) => new Date(b.date_created).getTime() - new Date(a.date_created).getTime())
                                     .map((a, i) => (jsxs("tr", { children: [jsx("td", { children: jsx("div", { className: `tw:cursor-pointer tw:text-3xl tw:mask ${a.shape === 'squircle' ? 'tw:mask-squircle' : a.shape === 'circle' ? 'tw:mask-circle' : 'tw:mask-hexagon-2'} tw:p-2 tw:my-2 tw:mr-2 tw:shadow-xl`, 
@@ -5083,7 +4808,7 @@ const TabsView = ({ attestations, item, offers, needs, relations, updatePermissi
                                                                             a.user_created.first_name, ' '] }), jsx("div", { className: 'tw:text-xs opacity-50 tw:text-zinc-500', children: timeAgo(a.date_created) })] })] }) })) : (jsxs("div", { children: [jsxs("div", { className: 'font-bold', children: [a.user_created.first_name, " "] }), jsx("div", { className: 'tw:text-xs opacity-50 tw:text-zinc-500', children: timeAgo(a.date_created) })] })) })] }, i))) }) }) })] })), item.layer?.itemType.offers_and_needs && (jsxs(Fragment, { children: [jsx("input", { type: 'radio', name: 'my_tabs_2', role: 'tab', className: `tw:tab tw:font-bold tw:ps-2! tw:pe-2! ${!(item.layer.itemType.icon_as_labels && activeTab !== 3) && 'tw:min-w-[10.4em]'} `, "aria-label": `${item.layer.itemType.icon_as_labels && activeTab !== 3 ? '♻️' : '♻️\u00A0Offers & Needs'}`, checked: activeTab === 3 && true, onChange: () => updateActiveTab(3) }), jsx("div", { role: 'tabpanel', className: 'tw:tab-content tw:bg-base-100  tw:rounded-box tw:h-[calc(100dvh-268px)] tw:overflow-y-auto fade tw:pt-4 tw:pb-1', children: jsx("div", { className: 'tw:h-full', children: jsxs("div", { className: 'tw:grid tw:grid-cols-1', children: [offers.length > 0 ? (jsxs("div", { className: 'tw:col-span-1', children: [jsx("h3", { className: 'tw:-mb-2', children: "Offers" }), jsx("div", { className: 'tw:flex tw:flex-wrap tw:mb-4', children: offers.map((o) => (jsx(TagView, { tag: o, onClick: () => {
                                                         addFilterTag(o);
                                                     } }, o.id))) })] })) : (''), needs.length > 0 ? (jsxs("div", { className: 'tw:col-span-1', children: [jsx("h3", { className: 'tw:-mb-2 tw:col-span-1', children: "Needs" }), jsx("div", { className: 'tw:flex tw:flex-wrap  tw:mb-4', children: needs.map((n) => (jsx(TagView, { tag: n, onClick: () => addFilterTag(n) }, n.id))) })] })) : ('')] }) }) })] })), item.layer?.itemType.relations && (jsxs(Fragment, { children: [jsx("input", { type: 'radio', name: 'my_tabs_2', role: 'tab', className: 'tw:tab tw:font-bold tw:ps-2! tw:pe-2! ', "aria-label": `${item.layer.itemType.icon_as_labels && activeTab !== 7 ? '🔗' : '🔗\u00A0Links'}`, checked: activeTab === 7 && true, onChange: () => updateActiveTab(7) }), jsx("div", { role: 'tabpanel', className: 'tw:tab-content tw:bg-base-100  tw:rounded-box tw:!h-[calc(100dvh-280px)] tw:overflow-y-auto tw:pt-4 tw:pb-1 tw:-mr-4 tw:-mb-4 tw:overflow-x-hidden', children: jsx("div", { className: 'tw:h-full', children: jsxs("div", { className: 'tw:grid tw:grid-cols-1 tw:sm:grid-cols-2 tw:md:grid-cols-1 tw:lg:grid-cols-1 tw:xl:grid-cols-1 tw:2xl:grid-cols-2 tw:pb-4', children: [relations &&
-                                        relations.map((i) => (jsxs("div", { className: 'tw:cursor-pointer tw:card tw:bg-base-200 tw:border-[1px] tw:border-base-300 tw:card-body tw:shadow-xl tw:text-base-content tw:p-6 tw:mr-4 tw:mb-4', onClick: () => navigate('/item/' + i.id), children: [jsx(LinkedItemsHeaderView, { unlinkPermission: updatePermission, item: i, unlinkCallback: unlinkItem, loading: loading }), jsx("div", { className: 'tw:overflow-y-auto tw:overflow-x-hidden tw:max-h-64 fade', children: jsx(TextView, { truncate: true, text: i.text, itemId: item.id }) })] }, i.id))), updatePermission && (jsx(ActionButton, { collection: 'items', item: item, existingRelations: relations, triggerItemSelected: linkItem }))] }) }) })] }))] }));
+                                        relations.map((i) => (jsxs("div", { className: 'tw:cursor-pointer tw:card tw:bg-base-200 tw:border-[1px] tw:border-base-300 tw:card-body tw:shadow-xl tw:text-base-content tw:p-6 tw:mr-4 tw:mb-4', onClick: () => navigate('/item/' + i.id), children: [jsx(LinkedItemsHeaderView, { unlinkPermission: updatePermission, item: i, unlinkCallback: unlinkItem, loading: loading }), jsx("div", { className: 'tw:overflow-y-auto tw:overflow-x-hidden tw:max-h-64 fade', children: jsx(TextView$1, { truncate: true, text: i.text, itemId: item.id }) })] }, i.id))), updatePermission && (jsx(ActionButton, { collection: 'items', item: item, existingRelations: relations, triggerItemSelected: linkItem }))] }) }) })] }))] }));
 };
 
 /**
@@ -5471,7 +5196,7 @@ const GroupSubheaderForm = ({ state, setState, groupStates, groupTypes, }) => {
 };
 
 const ProfileStartEndForm = ({ item, setState, }) => {
-    return (jsx(PopupStartEndInput, { item: item, showLabels: false, updateEndValue: (e) => setState((prevState) => ({
+    return (jsx(PopupStartEndInput$1, { item: item, showLabels: false, updateEndValue: (e) => setState((prevState) => ({
             ...prevState,
             end: e,
         })), updateStartValue: (s) => setState((prevState) => ({
@@ -5689,7 +5414,7 @@ const TabsForm = ({ item, state, setState, updatePermission, linkItem, unlinkIte
         setActiveTab(urlTab ? Number(urlTab) : 1);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [location.search]);
-    return (jsx("div", { className: 'tw:grow', children: jsxs("div", { role: 'tablist', className: 'tw:tabs tw:h-full tw:tabs-lift tw:mt-3', children: [jsx("input", { type: 'radio', name: 'my_tabs_2', role: 'tab', className: 'tw:tab  ', "aria-label": 'Info', checked: activeTab === 1 && true, onChange: () => updateActiveTab(1) }), jsx("div", { role: 'tabpanel', className: 'tw:tab-content tw:bg-base-100 tw:border-(--fallback-bc,oklch(var(--bc)/0.2)) tw:rounded-box tw:!h-[calc(100%-48px)] tw:min-h-56 tw:border-none', children: jsxs("div", { className: `tw:flex tw:flex-col tw:h-full ${item.layer.itemType.show_start_end_input && 'tw:pt-4'}`, children: [item.layer.itemType.show_start_end_input && (jsx(PopupStartEndInput, { item: item, showLabels: false, updateEndValue: (e) => setState((prevState) => ({
+    return (jsx("div", { className: 'tw:grow', children: jsxs("div", { role: 'tablist', className: 'tw:tabs tw:h-full tw:tabs-lift tw:mt-3', children: [jsx("input", { type: 'radio', name: 'my_tabs_2', role: 'tab', className: 'tw:tab  ', "aria-label": 'Info', checked: activeTab === 1 && true, onChange: () => updateActiveTab(1) }), jsx("div", { role: 'tabpanel', className: 'tw:tab-content tw:bg-base-100 tw:border-(--fallback-bc,oklch(var(--bc)/0.2)) tw:rounded-box tw:!h-[calc(100%-48px)] tw:min-h-56 tw:border-none', children: jsxs("div", { className: `tw:flex tw:flex-col tw:h-full ${item.layer.itemType.show_start_end_input && 'tw:pt-4'}`, children: [item.layer.itemType.show_start_end_input && (jsx(PopupStartEndInput$1, { item: item, showLabels: false, updateEndValue: (e) => setState((prevState) => ({
                                     ...prevState,
                                     end: e,
                                 })), updateStartValue: (s) => setState((prevState) => ({
@@ -5708,7 +5433,7 @@ const TabsForm = ({ item, state, setState, updatePermission, linkItem, unlinkIte
                                                 ...prevState,
                                                 needs: v,
                                             })), placeholder: 'enter your needs', containerStyle: 'tw:bg-transparent tw:w-full tw:h-full tw:mt-3 tw:text-xs tw:h-[calc(100%-1rem)] tw:min-h-[5em] tw:pb-2 tw:overflow-auto' }) })] }) })] })), item.layer?.itemType.relations && (jsxs(Fragment, { children: [jsx("input", { type: 'radio', name: 'my_tabs_2', role: 'tab', className: 'tw:tab  ', "aria-label": 'Links', checked: activeTab === 7 && true, onChange: () => updateActiveTab(7) }), jsx("div", { role: 'tabpanel', className: 'tw:tab-content tw:rounded-box tw:!h-[calc(100%-48px)] tw:overflow-y-auto tw:pt-4 tw:overflow-x-hidden fade', children: jsx("div", { className: 'tw:h-full', children: jsxs("div", { className: 'tw:grid tw:grid-cols-1 tw:sm:grid-cols-2 tw:md:grid-cols-1 tw:lg:grid-cols-1 tw:xl:grid-cols-1 tw:2xl:grid-cols-2 tw:mb-4', children: [state.relations &&
-                                            state.relations.map((i) => (jsxs("div", { className: 'tw:cursor-pointer tw:card tw:bg-base-200 tw:border-[1px] tw:border-base-300 tw:card-body tw:shadow-xl tw:text-base-content tw:mx-4 tw:p-6 tw:mb-4', onClick: () => navigate('/item/' + i.id), children: [jsx(LinkedItemsHeaderView, { unlinkPermission: updatePermission, item: i, unlinkCallback: (id) => unlinkItem(id, item, updateItem), loading: loading }), jsx("div", { className: 'tw:overflow-y-auto tw:overflow-x-hidden tw:max-h-64 fade', children: jsx(TextView, { truncate: true, itemId: item.id }) })] }, i.id))), updatePermission && (jsx(ActionButton, { customStyle: 'tw:bottom-24!', collection: 'items', item: item, existingRelations: state.relations, triggerItemSelected: (id) => linkItem(id, item, updateItem) }))] }) }) })] }))] }) }));
+                                            state.relations.map((i) => (jsxs("div", { className: 'tw:cursor-pointer tw:card tw:bg-base-200 tw:border-[1px] tw:border-base-300 tw:card-body tw:shadow-xl tw:text-base-content tw:mx-4 tw:p-6 tw:mb-4', onClick: () => navigate('/item/' + i.id), children: [jsx(LinkedItemsHeaderView, { unlinkPermission: updatePermission, item: i, unlinkCallback: (id) => unlinkItem(id, item, updateItem), loading: loading }), jsx("div", { className: 'tw:overflow-y-auto tw:overflow-x-hidden tw:max-h-64 fade', children: jsx(TextView$1, { truncate: true, itemId: item.id }) })] }, i.id))), updatePermission && (jsx(ActionButton, { customStyle: 'tw:bottom-24!', collection: 'items', item: item, existingRelations: state.relations, triggerItemSelected: (id) => linkItem(id, item, updateItem) }))] }) }) })] }))] }) }));
 };
 
 /**
@@ -5875,5 +5600,308 @@ function Quests() {
     return (jsx(Fragment, { children: questsOpen ? (jsx("div", { className: 'tw:card tw:w-48 tw:bg-base-100 tw:shadow-xl tw:absolute tw:bottom-4 tw:left-4 tw:z-2000', children: jsxs("div", { className: 'tw:card-body tw:p-4 tw:pt-0', children: [jsx("div", { className: 'tw:card-actions tw:justify-end', children: jsx("label", { className: 'tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-1 tw:top-1', onClick: () => setQuestsOpen(false), children: "\u2715" }) }), jsxs("h2", { className: 'tw:card-title tw:m-auto ', children: ["Level 1", jsx(QuestionMarkIcon, {})] }), jsxs("ul", { className: 'tw:flex-row', children: [jsx("li", { children: jsxs("label", { className: 'tw:label tw:justify-normal tw:pt-1 tw:pb-0', children: [jsx("input", { type: 'checkbox', readOnly: true, className: 'tw:checkbox tw:checkbox-xs tw:checkbox-success', checked: isAuthenticated || false }), jsx("span", { className: 'tw:text-sm tw:label-text tw:mx-2', children: "Sign Up" })] }) }), jsx("li", { children: jsxs("label", { className: 'tw:label tw:justify-normal tw:pt-1 tw:pb-0', children: [jsx("input", { type: 'checkbox', readOnly: true, className: 'tw:checkbox tw:checkbox-xs tw:checkbox-success', checked: !!profile?.text }), jsx("span", { className: 'tw:text-sm tw:label-text tw:mx-2', children: "Fill Profile" })] }) }), jsx("li", { children: jsxs("label", { className: 'tw:label tw:justify-normal tw:pt-1 tw:pb-0', children: [jsx("input", { type: 'checkbox', readOnly: true, className: 'tw:checkbox tw:checkbox-xs tw:checkbox-success', checked: !!profile?.image }), jsx("span", { className: 'tw:text-sm tw:label-text tw:mx-2', children: "Upload Avatar" })] }) })] }), ' '] }) })) : ('') }));
 }
 
-export { AppShell, AttestationForm, AuthProvider, CardPage, Content, ItemForm, ItemView, Layer, LoginPage, MapOverlayPage, MarketView, Modal, OverlayItemsIndexPage, Permissions, PopupButton, PopupCheckboxInput, PopupStartEndInput, PopupTextAreaInput, PopupTextInput, ProfileForm, ProfileView, Quests, RequestPasswordPage, SelectUser, SetNewPasswordPage, SideBar, SignupPage, StartEndView, Tags, TextAreaInput, TextInput, TextView, TitleCard, UserSettings, UtopiaMap };
+const ItemContext = createContext(undefined);
+
+function templateify(Component) {
+    const TemplateComponent = (props) => {
+        const item = useContext(ItemContext);
+        return jsx(Component, { ...props, item: item });
+    };
+    return TemplateComponent;
+}
+
+function ItemFormPopup(props) {
+    const layerContext = useContext(LayerContext);
+    const { menuText, name: activeLayerName } = layerContext;
+    const { popupForm, setPopupForm } = usePopupForm();
+    const [spinner, setSpinner] = useState(false);
+    const formRef = useRef(null);
+    const map = useMap();
+    const addItem = useAddItem();
+    const updateItem = useUpdateItem();
+    const items = useItems();
+    const tags = useTags();
+    const addTag = useAddTag();
+    const resetFilterTags = useResetFilterTags();
+    const { user } = useAuth();
+    const handleSubmit = async (evt) => {
+        if (!popupForm) {
+            throw new Error('Popup form is not defined');
+        }
+        const formItem = {};
+        Array.from(evt.target).forEach((input) => {
+            if (input.name) {
+                formItem[input.name] = input.value;
+            }
+        });
+        formItem.position = {
+            type: 'Point',
+            coordinates: [popupForm.position.lng, popupForm.position.lat],
+        };
+        evt.preventDefault();
+        const name = formItem.name ? formItem.name : user?.first_name;
+        if (!name) {
+            toast.error('Name is must be defined');
+            return;
+        }
+        setSpinner(true);
+        formItem.text &&
+            formItem.text
+                .toLocaleLowerCase()
+                .match(hashTagRegex)
+                ?.map((tag) => {
+                if (!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
+                    addTag({ id: crypto.randomUUID(), name: tag.slice(1), color: randomColor() });
+                }
+                return null;
+            });
+        if (popupForm.item) {
+            let success = false;
+            try {
+                await popupForm.layer.api?.updateItem({ ...formItem, id: popupForm.item.id });
+                success = true;
+                // eslint-disable-next-line no-catch-all/no-catch-all
+            }
+            catch (error) {
+                toast.error(error.toString());
+            }
+            if (success) {
+                updateItem({ ...popupForm.item, ...formItem });
+                toast.success('Item updated');
+            }
+            setSpinner(false);
+            map.closePopup();
+        }
+        else {
+            const item = items.find((i) => i.user_created?.id === user?.id && i.layer?.id === popupForm.layer.id);
+            const uuid = crypto.randomUUID();
+            let success = false;
+            try {
+                popupForm.layer.userProfileLayer &&
+                    item &&
+                    (await popupForm.layer.api?.updateItem({ ...formItem, id: item.id }));
+                (!popupForm.layer.userProfileLayer || !item) &&
+                    (await popupForm.layer.api?.createItem({
+                        ...formItem,
+                        name,
+                        id: uuid,
+                    }));
+                success = true;
+                // eslint-disable-next-line no-catch-all/no-catch-all
+            }
+            catch (error) {
+                toast.error(error.toString());
+            }
+            if (success) {
+                if (popupForm.layer.userProfileLayer && item)
+                    updateItem({ ...item, ...formItem });
+                if (!popupForm.layer.userProfileLayer || !item) {
+                    addItem({
+                        ...formItem,
+                        name: (formItem.name ? formItem.name : user?.first_name) ?? '',
+                        user_created: user ?? undefined,
+                        id: uuid,
+                        layer: popupForm.layer,
+                        public_edit: !user,
+                    });
+                }
+                toast.success('New item created');
+                resetFilterTags();
+            }
+            setSpinner(false);
+            map.closePopup();
+        }
+        setPopupForm(null);
+    };
+    const resetPopup = () => {
+        if (formRef.current) {
+            formRef.current.reset();
+        }
+    };
+    useEffect(() => {
+        resetPopup();
+    }, [popupForm?.position]);
+    return (popupForm &&
+        popupForm.layer.name === activeLayerName && (jsx(Popup, { minWidth: 275, maxWidth: 275, autoPanPadding: [20, 80], eventHandlers: {
+            remove: () => {
+                setTimeout(function () {
+                    resetPopup();
+                }, 100);
+            },
+        }, position: popupForm.position, children: jsxs("form", { ref: formRef, onReset: resetPopup, autoComplete: 'off', onSubmit: (e) => handleSubmit(e), children: [popupForm.item ? (jsx("div", { className: 'tw:h-3' })) : (jsx("div", { className: 'tw:flex tw:justify-center', children: jsx("b", { className: 'tw:text-xl tw:text-center tw:font-bold', children: menuText }) })), props.children ? (jsx(ItemContext.Provider, { value: popupForm.item, children: props.children })) : (jsxs(Fragment, { children: [jsx(TextInput, { type: 'text', placeholder: 'Name', dataField: 'name', defaultValue: popupForm.item ? popupForm.item.name : '', inputStyle: '' }), jsx(TextAreaInput, { placeholder: 'Text', dataField: 'text', defaultValue: popupForm.item?.text ?? '', inputStyle: 'tw:h-40 tw:mt-5' }, popupForm.position.toString())] })), jsx("div", { className: 'tw:flex tw:justify-center', children: jsx("button", { className: spinner
+                            ? 'tw:btn tw:btn-disabled tw:mt-5 tw:place-self-center'
+                            : 'tw:btn tw:mt-5 tw:place-self-center', type: 'submit', children: spinner ? jsx("span", { className: 'tw:loading tw:loading-spinner' }) : 'Save' }) })] }) })));
+}
+
+/**
+ * @category Item
+ */
+const PopupForm = ({ children }) => {
+    return jsx(ItemFormPopup, { children: children });
+};
+
+// eslint-disable-next-line react/display-name
+const ItemViewPopup = forwardRef((props, ref) => {
+    const map = useMap();
+    const [loading, setLoading] = useState(false);
+    const removeItem = useRemoveItem();
+    const updadateItem = useUpdateItem();
+    const navigate = useNavigate();
+    const setSelectPosition = useSetSelectPosition();
+    const { setPopupForm } = usePopupForm();
+    const [infoExpanded, setInfoExpanded] = useState(false);
+    const handleEdit = (event) => {
+        event.stopPropagation();
+        map.closePopup();
+        if (!props.item.layer) {
+            throw new Error('Layer is not defined');
+        }
+        setPopupForm({
+            position: new LatLng(props.item.position?.coordinates[1], props.item.position?.coordinates[0]),
+            layer: props.item.layer,
+            item: props.item,
+        });
+    };
+    const handleDelete = async (event) => {
+        event.stopPropagation();
+        setLoading(true);
+        let success = false;
+        try {
+            !props.item.layer?.userProfileLayer &&
+                (await props.item.layer?.api?.deleteItem(props.item.id));
+            props.item.layer?.userProfileLayer &&
+                (await props.item.layer.api?.updateItem({ id: props.item.id, position: null }));
+            success = true;
+            // eslint-disable-next-line no-catch-all/no-catch-all
+        }
+        catch (error) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            toast.error(error.toString());
+        }
+        if (success) {
+            !props.item.layer?.userProfileLayer && removeItem(props.item);
+            props.item.layer?.userProfileLayer && updadateItem({ ...props.item, position: undefined });
+            toast.success('Item deleted');
+        }
+        setLoading(false);
+        map.closePopup();
+        const params = new URLSearchParams(window.location.search);
+        window.history.pushState({}, '', '/' + `${params ? `?${params}` : ''}`);
+        navigate('/');
+    };
+    return (jsx(Popup, { ref: ref, maxHeight: 377, minWidth: 275, maxWidth: 275, autoPanPadding: [20, 80], children: jsxs("div", { className: 'tw:bg-base-100 tw:text-base-content', children: [jsx(HeaderView, { api: props.item.layer?.api, item: props.item, editCallback: handleEdit, deleteCallback: handleDelete, setPositionCallback: () => {
+                        map.closePopup();
+                        setSelectPosition(props.item);
+                        navigate('/');
+                    }, loading: loading }), jsx("div", { className: 'tw:overflow-y-auto tw:overflow-x-hidden tw:max-h-64 fade', children: props.children ?? jsx(TextView$1, { text: props.item.text, itemId: props.item.id }) }), jsxs("div", { className: 'tw:flex tw:-mb-1 tw:flex-row tw:mr-2 tw:mt-1', children: [infoExpanded ? (jsx("p", { className: 'tw:italic tw:min-h-[21px] tw:my-0! tw:opacity-50', children: `${props.item.date_updated && props.item.date_updated !== props.item.date_created ? 'updated' : 'posted'} ${props.item && props.item.user_created && props.item.user_created.first_name ? `by ${props.item.user_created.first_name}` : ''} ${props.item.date_updated ? timeAgo(props.item.date_updated) : timeAgo(props.item.date_created)}` })) : (jsx("p", { className: 'tw:my-0! tw:min-h-[21px] tw:font-bold tw:cursor-pointer tw:text-gray-500', onClick: () => setInfoExpanded(true), children: "\u24D8" })), jsx("div", { className: 'tw:grow' })] })] }) }));
+});
+
+/**
+ * @category Item
+ */
+const PopupView = ({ children }) => {
+    const layerContext = useContext(LayerContext);
+    const { name, markerDefaultColor, markerDefaultColor2, markerShape, markerIcon } = layerContext;
+    const filterTags = useFilterTags();
+    const appState = useAppState();
+    const items = useItems();
+    const getItemTags = useGetItemTags();
+    const addMarker = useAddMarker();
+    const addPopup = useAddPopup();
+    const leafletRefs = useLeafletRefs();
+    const allTagsLoaded = useAllTagsLoaded();
+    const allItemsLoaded = useAllItemsLoaded();
+    const setMarkerClicked = useSetMarkerClicked();
+    const selectPosition = useSelectPosition();
+    const tags = useTags();
+    const [newTagsToAdd, setNewTagsToAdd] = useState([]);
+    const [tagsReady, setTagsReady] = useState(false);
+    const isLayerVisible = useIsLayerVisible();
+    const isGroupTypeVisible = useIsGroupTypeVisible();
+    const visibleGroupTypes = useVisibleGroupType();
+    const visibleItems = useMemo(() => items
+        .filter((item) => item.layer?.name === name)
+        .filter((item) => filterTags.length === 0
+        ? item
+        : filterTags.some((tag) => getItemTags(item).some((filterTag) => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))
+        .filter((item) => item.layer && isLayerVisible(item.layer))
+        .filter((item) => (item.group_type && isGroupTypeVisible(item.group_type)) ||
+        visibleGroupTypes.length === 0), [
+        filterTags,
+        getItemTags,
+        isGroupTypeVisible,
+        isLayerVisible,
+        items,
+        name,
+        visibleGroupTypes.length,
+    ]);
+    return visibleItems.map((item) => {
+        if (!(item.position?.coordinates[0] && item.position.coordinates[1]))
+            return null;
+        if (item.tags) {
+            item.text += '\n\n';
+            item.tags.map((tag) => {
+                if (!item.text?.includes(`#${encodeTag(tag)}`)) {
+                    item.text += `#${encodeTag(tag)}`;
+                }
+                return item.text;
+            });
+        }
+        if (allTagsLoaded && allItemsLoaded) {
+            item.text?.match(hashTagRegex)?.map((tag) => {
+                if (!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase()) &&
+                    !newTagsToAdd.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
+                    const newTag = {
+                        id: crypto.randomUUID(),
+                        name: tag.slice(1),
+                        color: randomColor(),
+                    };
+                    setNewTagsToAdd((current) => [...current, newTag]);
+                }
+                return null;
+            });
+            !tagsReady && setTagsReady(true);
+        }
+        const itemTags = getItemTags(item);
+        const latitude = item.position.coordinates[1];
+        const longitude = item.position.coordinates[0];
+        let color1 = markerDefaultColor;
+        let color2 = markerDefaultColor2;
+        if (item.color) {
+            color1 = item.color;
+        }
+        else if (itemTags[0]) {
+            color1 = itemTags[0].color;
+        }
+        if (itemTags[0] && item.color) {
+            color2 = itemTags[0].color;
+        }
+        else if (itemTags[1]) {
+            color2 = itemTags[1].color;
+        }
+        return (jsx(ItemContext.Provider, { value: item, children: jsxs(Marker, { ref: (r) => {
+                    if (!(item.id in leafletRefs && leafletRefs[item.id].marker === r)) {
+                        r && addMarker(item, r);
+                    }
+                }, eventHandlers: {
+                    click: () => {
+                        selectPosition && setMarkerClicked(item);
+                    },
+                }, icon: MarkerIconFactory(markerShape, color1, color2, item.markerIcon ?? markerIcon, appState.assetsApi.url), position: [latitude, longitude], children: [jsx(ItemViewPopup, { ref: (r) => {
+                            if (!(item.id in leafletRefs && leafletRefs[item.id].popup === r)) {
+                                r && addPopup(item, r);
+                            }
+                        }, item: item, children: children }), jsx(Tooltip, { offset: [0, -38], direction: 'top', children: item.name })] }) }, item.id));
+    });
+};
+
+const TextView = templateify(TextView$1);
+const StartEndView = templateify(StartEndView$1);
+const PopupTextInput = templateify(PopupTextInput$1);
+const PopupButton = templateify(PopupButton$1);
+const PopupCheckboxInput = templateify(PopupCheckboxInput$1);
+const PopupTextAreaInput = templateify(PopupTextAreaInput$1);
+const PopupStartEndInput = templateify(PopupStartEndInput$1);
+
+export { AppShell, AttestationForm, AuthProvider, CardPage, Content, Layer, LoginPage, MapOverlayPage, MarketView, Modal, OverlayItemsIndexPage, Permissions, PopupButton, PopupCheckboxInput, PopupForm, PopupStartEndInput, PopupTextAreaInput, PopupTextInput, PopupView, ProfileForm, ProfileView, Quests, RequestPasswordPage, SelectUser, SetNewPasswordPage, SideBar, SignupPage, StartEndView, Tags, TextAreaInput, TextInput, TextView, TitleCard, UserSettings, UtopiaMap };
 //# sourceMappingURL=index.esm.js.map