utopia-ui 3.0.35 → 3.0.37

package/README.md

@@ -26,103 +26,13 @@ It is the base of [Utopia Map](https://github.com/utopia-os/utopia-map) and [Uto
 
 ## Getting Started
 
-### Basic Map
-In this tutorial we learn how we create a basic React app with a Map component using [utopia-ui](https://github.com/utopia-os/utopia-ui) library.
-
-For this tutorial we use Vite to create an empty React app called "utopia-static-map"
-
-```shell
-npm create vite@latest utopia-static-map -- --template react
-```
-
-We open our new app in the terminal and install the [utopia-ui](https://github.com/utopia-os/utopia-ui) package
-
-```shell
-cd utopia-static-map
-npm install utopia-ui
-```
-
-We open our `src/App.jsx` and we replace the content with
-
-```jsx
-import { UtopiaMap } from "utopia-ui"
-
-function App() {
-  return (
-    <UtopiaMap center={[50.6, 9.5]} zoom={5} height='100dvh' width="100dvw">
-    </UtopiaMap>
-  )
-}
-
-export default App
-
-```
-
-Then we start the development server to check out the result in our browser:
-
-```shell
-npm run dev
-```
-
-And can open our first map app in the browser 🙂
-
-### Static Layers
-
-Now we add some static content in two layer.
-
-First we put some sample data in a new file called `src/sample-data.js`
-
-```javascript
-export const places = [{
-    "id": 51,
-    "name": "Stadtgemüse",
-    "text": "Stadtgemüse Fulda ist eine Gemüsegärtnerei in Maberzell, die es sich zur Aufgabe gemacht hat, die Stadt und seine Bewohner:innen mit regionalem, frischem und natürlich angebautem Gemüse mittels Gemüsekisten zu versorgen. Es gibt also jede Woche, von Frühjahr bis Herbst, angepasst an die Saison eine Kiste mit schmackhaftem und frischem Gemüse für euch, welche ihr direkt vor Ort abholen könnt. \r\n\r\nhttps://stadtgemuese-fulda.de",
-    "position": { "type": "Point", "coordinates": [9.632435, 50.560342] },
-  },
-  {
-    "id": 166,
-    "name": "Weidendom",
-    "text": "free camping",
-    "position": { "type": "Point", "coordinates": [9.438793, 50.560112] },
-  }];
-  
-  export const events = [
-    {
-      "id": 423,
-      "name": "Hackathon",
-      "text": "still in progress",
-      "position": { "type": "Point", "coordinates": [10.5, 51.62] },
-      "start": "2022-03-25T12:00:00",
-      "end": "2022-05-12T12:00:00",
-    }
-  ]
-```
-
-We want to create two Layers. One we want to call *Places* and the other *Events*
-
-we import our sample data to the `src/App.jsx`
-
-```jsx
-import { events, places } from "./sample-data"
-```
-and than we create our two `<Layer>` inside of our `<UtopiaMap>` component
-```jsx
-    <UtopiaMap center={[50.6, 15.5]} zoom={5} height='100dvh' width="100dvw">
-      <Layer
-        name='events'
-        markerIcon='calendar'
-        markerShape='square'
-        markerDefaultColor='#700'
-        data={events} />
-      <Layer
-        name='places'
-        markerIcon='point'
-        markerShape='circle'
-        markerDefaultColor='#007'
-        data={places} />
-    </UtopiaMap>
-
-```
+1. If you want to use **Utopia UI** in your project, check out [`/exampes`](/examples) to see how to use its components.
+
+2. If you like to contribute to our library, see the [Contribution Guide](/CONTRIBUTING.md) to see how to setup a development environment on your local machine.
+
+## Components
+
+![Utopia UI Components](Components.svg)
 
 ## Map Component
 The map shows various Layers (like places, events, profiles ...) of Items at their respective position whith nice and informative Popup and Profiles.

package/dist/Components/Map/UtopiaMap.d.ts

@@ -1,4 +1,4 @@
 import type { UtopiaMapProps } from '#types/UtopiaMapProps';
 import 'react-toastify/dist/ReactToastify.css';
-declare function UtopiaMap(props: UtopiaMapProps): import("react/jsx-runtime").JSX.Element;
+declare function UtopiaMap({ height, width, center, zoom, children, geo, showFilterControl, showGratitudeControl, showLayerControl, infoText, }: UtopiaMapProps): import("react/jsx-runtime").JSX.Element;
 export { UtopiaMap };

package/dist/Components/Map/UtopiaMapInner.d.ts

@@ -1,4 +1,4 @@
 import 'leaflet/dist/leaflet.css';
 import './UtopiaMap.css';
 import type { UtopiaMapProps } from '#types/UtopiaMapProps';
-export declare function UtopiaMapInner({ height, width, center, zoom, children, geo, showFilterControl, showGratitudeControl, showLayerControl, infoText, }: UtopiaMapProps): import("react/jsx-runtime").JSX.Element;
+export declare function UtopiaMapInner({ children, geo, showFilterControl, showGratitudeControl, showLayerControl, infoText, }: UtopiaMapProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Templates/AttestationForm.d.ts

@@ -1,4 +1,4 @@
 import type { ItemsApi } from '#types/ItemsApi';
 export declare const AttestationForm: ({ api }: {
-    api?: ItemsApi<any> | undefined;
+    api?: ItemsApi<unknown> | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/Templates/EmojiPicker.d.ts

@@ -1,8 +1,10 @@
-export declare const EmojiPicker: ({ selectedEmoji, selectedColor, selectedShape, setSelectedEmoji, setSelectedColor, setSelectedShape, }: {
-    selectedEmoji: any;
-    selectedColor: any;
-    selectedShape: any;
-    setSelectedEmoji: any;
-    setSelectedColor: any;
-    setSelectedShape: any;
-}) => import("react/jsx-runtime").JSX.Element;
+interface Props {
+    selectedEmoji: string;
+    selectedColor: string;
+    selectedShape: string;
+    setSelectedEmoji: (emoji: string) => void;
+    setSelectedColor: (color: string) => void;
+    setSelectedShape: (shape: string) => void;
+}
+export declare const EmojiPicker: ({ selectedEmoji, selectedColor, selectedShape, setSelectedEmoji, setSelectedColor, setSelectedShape, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Utils/ContainsUUID.d.ts

@@ -0,0 +1 @@
+export declare function containsUUID(str: string): boolean;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import './index.css';
 export { UtopiaMap, Layer, Tags, Permissions, ItemForm, ItemView, PopupTextAreaInput, PopupStartEndInput, PopupTextInput, PopupButton, TextView, StartEndView, PopupCheckboxInput, } from './Components/Map';
 export { AppShell, Content, SideBar, Sitemap } from './Components/AppShell';
-export { AuthProvider, useAuth, LoginPage, SignupPage, RequestPasswordPage, SetNewPasswordPage, } from './Components/Auth';
+export { AuthProvider, LoginPage, SignupPage, RequestPasswordPage, SetNewPasswordPage, } from './Components/Auth';
 export { UserSettings, ProfileView, ProfileForm } from './Components/Profile';
 export { Quests, Modal } from './Components/Gaming';
 export { TitleCard, CardPage, MapOverlayPage, OverlayItemsIndexPage, MoonCalendar, SelectUser, AttestationForm, MarketView, } from './Components/Templates';

package/dist/index.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { DomEvent, divIcon, Point, control, marker, LatLng, LatLngBounds } from 'leaflet';
+import { useMap, useMapEvents, TileLayer, GeoJSON, MapContainer, Popup, Marker, Tooltip } from 'react-leaflet';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createContext, useContext, useState, useCallback, useReducer, useEffect, createRef, useRef, memo, Children, isValidElement, cloneElement, forwardRef } from 'react';
 import { useNavigate, useLocation, BrowserRouter, Link, Outlet, NavLink } from 'react-router-dom';
 import { toast, ToastContainer } from 'react-toastify';
-import { DomEvent, divIcon, Point, control, marker, LatLng, LatLngBounds } from 'leaflet';
-import { useMap, useMapEvents, MapContainer, TileLayer, GeoJSON, Popup, Marker, Tooltip } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 import MarkerClusterGroup from 'react-leaflet-cluster';
 import axios from 'axios';
@@ -21,9 +21,9 @@ import { initTE, Sidenav } from 'tw-elements';
 import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon';
 import { ChevronLeftIcon, ChevronRightIcon as ChevronRightIcon$1 } from '@heroicons/react/24/outline';
 import { startOfToday, format, parse, sub, add } from 'date-fns';
-import Lightbox from 'yet-another-react-lightbox';
-import 'yet-another-react-lightbox/styles.css';
 import { RowsPhotoAlbum } from 'react-photo-album';
+import ReactLightbox from 'yet-another-react-lightbox';
+import 'yet-another-react-lightbox/styles.css';
 import 'react-photo-album/rows.css';
 import { centerCrop, makeAspectCrop, ReactCrop } from 'react-image-crop';
 import 'react-image-crop/dist/ReactCrop.css';
@@ -1398,9 +1398,14 @@ var Wrappers = function (_a) {
     return (jsx(PermissionsProvider, __assign({ initialPermissions: [] }, { children: jsx(TagsProvider, __assign({ initialTags: [] }, { children: jsx(LayersProvider, __assign({ initialLayers: [] }, { children: jsx(FilterProvider, __assign({ initialTags: [] }, { children: jsx(ItemsProvider, __assign({ initialItems: [] }, { children: jsx(SelectPositionProvider, { children: jsx(LeafletRefsProvider, __assign({ initialLeafletRefs: {} }, { children: jsx(QueryClientProvider, __assign({ client: queryClient }, { children: jsx(AppStateProvider, { children: jsx(ClusterRefProvider, { children: jsxs(QuestsProvider, __assign({ 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' }), children] })) }) }) })) })) }) })) })) })) })) })));
 };
 
-var css_248z$1 = ".leaflet-container {\n    text-align: left;\n    background-image: url(\"data:image/svg+xml,%3Csvg width='40' height='40' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n    background-repeat: no-repeat;\n    background-attachment: fixed;\n    background-position: 50% 80%; \n  }\n  \n  input {\n    box-sizing: border-box;\n  }\n  \n  textarea {\n    box-sizing: border-box;\n  }\n  \n  .leaflet-control-attribution {\n    display: none;\n   }\n  \n  .leaflet-control-locate {\n    display: none;\n  }\n\n  .leaflet-data-marker {\n  \n    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat;\n    background-position: 6px 32px;\n  }\n  \n  .crosshair-cursor-enabled {\n    cursor: crosshair;\n  }\n  \n  .leaflet-container {\n    cursor: inherit;\n  }\n  \n  .calendar-icon {\n    position: relative;\n    top: -35px;\n    left: 10px;\n    width: 13px;\n  }\n  \n  .user-icon {\n    position: relative;\n    top: -36px;\n    left: 10px;\n    width: 13px;\n  }\n\n  .circle-icon {\n    position: relative;\n    top: -33px;\n    left: 10px;\n    width: 13px;\n  }\n\n  .fire-icon {\n    position: relative;\n    top: -36px;\n    left: 10px;\n    width: 13px;\n  }\n\n  .tree-icon {\n    position: relative;\n    top: -38px;\n    left: 4px;\n    width: 24px;\n  }\n\n  .music-icon {\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n  }\n\n  .quest-icon {\n    position: relative;\n    top: -34px;\n    left: 4px;\n    width: 24px;\n  }\n\n  .drum-icon {\n    position: relative;\n    top: -38px;\n    left: 4px;\n    width: 24px;\n  }\n\n  \n  .compass-icon {\n    position: relative;\n    top: -36.5px;\n    left: 4px;\n    width: 24px;\n  }\n\n  .group-icon {\n    position: relative;\n    top: -37px;\n    left: 4px;\n    width: 24px;\n  }\n\n  .liebevoll-jetzt-icon{\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n  }\n\n  .staff-snake-icon {\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n  }\n\n  .flower-icon {\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n  }\n  \n  .network-icon {\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n  }\n  \n  .leaflet-popup-scrolled {\n    overflow-x: hidden;\n  }\n\n  .leaflet-popup-content-wrapper, .leaflet-popup-tip{\n    background-color: var(--fallback-b1,oklch(var(--b1)/1));\n    color: var(--fallback-bc,oklch(var(--bc)/1));\n\n  }\n\n  .leaflet-tooltip {\n    background-color: var(--fallback-b1,oklch(var(--b1)/1));\n    color: var(--fallback-bc,oklch(var(--bc)/1));\n    border-width: 0px;\n    border-radius: 1em;\n    transition: opacity 500ms;\n    transition-delay: 50ms;\n  }\n\n  .leaflet-tooltip-top::before {\n    border-top-color: var(--fallback-b1,oklch(var(--b1)/1));\n  }\n\n  .marker-cluster span {\n    color: #000;\n  }";
+var css_248z$1 = ".leaflet-container {\n    text-align: left;\n    background-image: url(\"data:image/svg+xml,%3Csvg width='40' height='40' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n    background-repeat: no-repeat;\n    background-attachment: fixed;\n    background-position: 50% 80%; \n  }\n  \n  input {\n    box-sizing: border-box;\n  }\n  \n  textarea {\n    box-sizing: border-box;\n  }\n  \n  .leaflet-control-attribution {\n    display: none;\n   }\n  \n  .leaflet-control-locate {\n    display: none;\n  }\n\n  .leaflet-data-marker {\n  \n    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat;\n    background-position: 6px 32px;\n  }\n  \n  .crosshair-cursor-enabled {\n    cursor: crosshair;\n  }\n  \n  .leaflet-container {\n    cursor: inherit;\n  }\n  \n  .calendar-icon {\n    position: relative;\n    top: -35px;\n    left: 10px;\n    width: 13px;\n  }\n  \n  .user-icon {\n    position: relative;\n    top: -36px;\n    left: 10px;\n    width: 13px;\n  }\n\n  .circle-icon {\n    position: relative;\n    top: -33px;\n    left: 10px;\n    width: 13px;\n  }\n\n  .fire-icon {\n    position: relative;\n    top: -36px;\n    left: 10px;\n    width: 13px;\n  }\n\n  .tree-icon {\n    position: relative;\n    top: -38px;\n    left: 4px;\n    width: 24px;\n  }\n\n  .music-icon {\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n  }\n\n  .quest-icon {\n    position: relative;\n    top: -34px;\n    left: 4px;\n    width: 24px;\n  }\n\n  .drum-icon {\n    position: relative;\n    top: -38px;\n    left: 4px;\n    width: 24px;\n  }\n\n  \n  .compass-icon {\n    position: relative;\n    top: -36.5px;\n    left: 4px;\n    width: 24px;\n  }\n\n  .group-icon {\n    position: relative;\n    top: -37px;\n    left: 4px;\n    width: 24px;\n  }\n\n  .liebevoll-jetzt-icon{\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n  }\n\n  .staff-snake-icon {\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n  }\n\n  .flower-icon {\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n  }\n  \n  .network-icon {\n    position: relative;\n    top: -35px;\n    left: 4px;\n    width: 24px;\n  }\n\n  .shop-icon {\n    position: relative;\n    top: -34px;\n    left: 4px;\n    width: 24px;\n  }\n\n  .plant-icon {\n    position: relative;\n    top: -34px;\n    left: 4px;\n    width: 24px;\n  }\n\n  .circle-dot-icon {\n    position: relative;\n    top: -36px;\n    left: 4px;\n    width: 24px;\n  }\n  \n  .leaflet-popup-scrolled {\n    overflow-x: hidden;\n  }\n\n  .leaflet-popup-content-wrapper, .leaflet-popup-tip{\n    background-color: var(--fallback-b1,oklch(var(--b1)/1));\n    color: var(--fallback-bc,oklch(var(--bc)/1));\n\n  }\n\n  .leaflet-tooltip {\n    background-color: var(--fallback-b1,oklch(var(--b1)/1));\n    color: var(--fallback-bc,oklch(var(--bc)/1));\n    border-width: 0px;\n    border-radius: 1em;\n    transition: opacity 500ms;\n    transition-delay: 50ms;\n  }\n\n  .leaflet-tooltip-top::before {\n    border-top-color: var(--fallback-b1,oklch(var(--b1)/1));\n  }\n\n  .marker-cluster span {\n    color: #000;\n  }";
 styleInject(css_248z$1);
 
+function containsUUID(str) {
+    var uuidRegex = /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/i;
+    return uuidRegex.test(str);
+}
+
 function AddButton(_a) {
     var triggerAction = _a.triggerAction;
     var layers = useLayers();
@@ -1785,6 +1790,14 @@ var addIcon = function (icon) {
             return '<svg class="flower-icon" stroke="currentColor" fill="#fff" stroke-width="0" viewBox="0 0 256 256" height="1.5em" width="1.5em"  xmlns="http://www.w3.org/2000/svg"><path d="M210.35,129.36c-.81-.47-1.7-.92-2.62-1.36.92-.44,1.81-.89,2.62-1.36a40,40,0,1,0-40-69.28c-.81.47-1.65,1-2.48,1.59.08-1,.13-2,.13-3a40,40,0,0,0-80,0c0,.94,0,1.94.13,3-.83-.57-1.67-1.12-2.48-1.59a40,40,0,1,0-40,69.28c.81.47,1.7.92,2.62,1.36-.92.44-1.81.89-2.62,1.36a40,40,0,1,0,40,69.28c.81-.47,1.65-1,2.48-1.59-.08,1-.13,2-.13,2.95a40,40,0,0,0,80,0c0-.94-.05-1.94-.13-2.95.83.57,1.67,1.12,2.48,1.59A39.79,39.79,0,0,0,190.29,204a40.43,40.43,0,0,0,10.42-1.38,40,40,0,0,0,9.64-73.28ZM104,128a24,24,0,1,1,24,24A24,24,0,0,1,104,128Zm74.35-56.79a24,24,0,1,1,24,41.57c-6.27,3.63-18.61,6.13-35.16,7.19A40,40,0,0,0,154.53,98.1C163.73,84.28,172.08,74.84,178.35,71.21ZM128,32a24,24,0,0,1,24,24c0,7.24-4,19.19-11.36,34.06a39.81,39.81,0,0,0-25.28,0C108,75.19,104,63.24,104,56A24,24,0,0,1,128,32ZM44.86,80a24,24,0,0,1,32.79-8.79c6.27,3.63,14.62,13.07,23.82,26.89A40,40,0,0,0,88.81,120c-16.55-1.06-28.89-3.56-35.16-7.18A24,24,0,0,1,44.86,80ZM77.65,184.79a24,24,0,1,1-24-41.57c6.27-3.63,18.61-6.13,35.16-7.19a40,40,0,0,0,12.66,21.87C92.27,171.72,83.92,181.16,77.65,184.79ZM128,224a24,24,0,0,1-24-24c0-7.24,4-19.19,11.36-34.06a39.81,39.81,0,0,0,25.28,0C148,180.81,152,192.76,152,200A24,24,0,0,1,128,224Zm83.14-48a24,24,0,0,1-32.79,8.79c-6.27-3.63-14.62-13.07-23.82-26.89A40,40,0,0,0,167.19,136c16.55,1.06,28.89,3.56,35.16,7.18A24,24,0,0,1,211.14,176Z"></path></svg>';
         case 'network':
             return '<svg class="network-icon" stroke="currentColor" fill="#fff" stroke-width="0" viewBox="0 0 256 256" height="1.5em" width="1.5em" xmlns="http://www.w3.org/2000/svg"><path d="M212,200a36,36,0,1,1-69.85-12.25l-53-34.05a36,36,0,1,1,0-51.4l53-34a36.09,36.09,0,1,1,8.67,13.45l-53,34.05a36,36,0,0,1,0,24.5l53,34.05A36,36,0,0,1,212,200Z"></path></svg>';
+        case 'crosshair':
+            return '<svg class="network-icon" stroke="currentColor" fill="#fff" stroke-width="0" viewBox="0 0 512 512" height="1.5em" width="1.5em" xmlns="http://www.w3.org/2000/svg"><path d="M256 0c17.7 0 32 14.3 32 32l0 10.4c93.7 13.9 167.7 88 181.6 181.6l10.4 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-10.4 0c-13.9 93.7-88 167.7-181.6 181.6l0 10.4c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-10.4C130.3 455.7 56.3 381.7 42.4 288L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l10.4 0C56.3 130.3 130.3 56.3 224 42.4L224 32c0-17.7 14.3-32 32-32zM107.4 288c12.5 58.3 58.4 104.1 116.6 116.6l0-20.6c0-17.7 14.3-32 32-32s32 14.3 32 32l0 20.6c58.3-12.5 104.1-58.4 116.6-116.6L384 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l20.6 0C392.1 165.7 346.3 119.9 288 107.4l0 20.6c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-20.6C165.7 119.9 119.9 165.7 107.4 224l20.6 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-20.6 0zM256 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path></svg>';
+        case 'shop':
+            return '<svg class="shop-icon" stroke="currentColor" fill="#fff" stroke-width="0" viewBox="0 0 640 512" height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg"><path d="M36.8 192l566.3 0c20.3 0 36.8-16.5 36.8-36.8c0-7.3-2.2-14.4-6.2-20.4L558.2 21.4C549.3 8 534.4 0 518.3 0L121.7 0c-16 0-31 8-39.9 21.4L6.2 134.7c-4 6.1-6.2 13.2-6.2 20.4C0 175.5 16.5 192 36.8 192zM64 224l0 160 0 80c0 26.5 21.5 48 48 48l224 0c26.5 0 48-21.5 48-48l0-80 0-160-64 0 0 160-192 0 0-160-64 0zm448 0l0 256c0 17.7 14.3 32 32 32s32-14.3 32-32l0-256-64 0z"></path></svg>';
+        case 'plant':
+            return '<svg class="plant-icon" stroke="currentColor" stroke-width="0" fill="#fff" viewBox="0 0 256 256" height="1.5em" width="1.5em" xmlns="http://www.w3.org/2000/svg"><path d="M205.41,159.07a60.9,60.9,0,0,1-31.83,8.86,71.71,71.71,0,0,1-27.36-5.66A55.55,55.55,0,0,0,136,194.51V224a8,8,0,0,1-8.53,8,8.18,8.18,0,0,1-7.47-8.25V211.31L81.38,172.69A52.5,52.5,0,0,1,63.44,176a45.82,45.82,0,0,1-23.92-6.67C17.73,156.09,6,125.62,8.27,87.79a8,8,0,0,1,7.52-7.52c37.83-2.23,68.3,9.46,81.5,31.25A46,46,0,0,1,103.74,140a4,4,0,0,1-6.89,2.43l-19.2-20.1a8,8,0,0,0-11.31,11.31l53.88,55.25c.06-.78.13-1.56.21-2.33a68.56,68.56,0,0,1,18.64-39.46l50.59-53.46a8,8,0,0,0-11.31-11.32l-49,51.82a4,4,0,0,1-6.78-1.74c-4.74-17.48-2.65-34.88,6.4-49.82,17.86-29.48,59.42-45.26,111.18-42.22a8,8,0,0,1,7.52,7.52C250.67,99.65,234.89,141.21,205.41,159.07Z"></path></svg>';
+        case 'circle-dot':
+            return '<svg class="circle-dot-icon" stroke="#fff" fill="transparent" stroke-width="2.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1.55em" width="1.55em" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="1"></circle></svg>';
         default:
             return '';
     }
@@ -3153,18 +3166,19 @@ var SelectPosition = function (_a) {
                 } }, { children: jsx("p", __assign({ className: 'tw-text-center ' }, { children: "\u2715" })) })), jsx("div", __assign({ className: 'tw-alert tw-bg-base-100 tw-text-base-content' }, { children: jsx("div", { children: jsx("span", __assign({ className: 'tw-text-lg' }, { children: "Select position on the map!" })) }) }))] })));
 };
 
-var mapDivRef = createRef();
 function UtopiaMapInner(_a) {
-    var _b = _a.height, height = _b === void 0 ? '500px' : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c, _d = _a.center, center = _d === void 0 ? [50.6, 9.5] : _d, _e = _a.zoom, zoom = _e === void 0 ? 10 : _e, children = _a.children, geo = _a.geo, _f = _a.showFilterControl, showFilterControl = _f === void 0 ? false : _f, _g = _a.showGratitudeControl, showGratitudeControl = _g === void 0 ? false : _g, _h = _a.showLayerControl, showLayerControl = _h === void 0 ? true : _h, infoText = _a.infoText;
-    // Hooks that rely on contexts, called after ContextWrapper is provided
+    var children = _a.children, geo = _a.geo, _b = _a.showFilterControl, showFilterControl = _b === void 0 ? false : _b, _c = _a.showGratitudeControl, showGratitudeControl = _c === void 0 ? false : _c, _d = _a.showLayerControl, showLayerControl = _d === void 0 ? true : _d, infoText = _a.infoText;
     var selectNewItemPosition = useSelectPosition();
     var setSelectNewItemPosition = useSetSelectPosition();
     var setClusterRef = useSetClusterRef();
     var clusterRef = useClusterRef();
     var setMapClicked = useSetMapClicked();
-    var _j = useState(null), itemFormPopup = _j[0], setItemFormPopup = _j[1];
+    var _e = useState(null), itemFormPopup = _e[0], setItemFormPopup = _e[1];
     var layers = useLayers();
     var addVisibleLayer = useAddVisibleLayer();
+    var leafletRefs = useLeafletRefs();
+    var location = useLocation();
+    var map = useMap();
     useEffect(function () {
         layers.forEach(function (layer) { return addVisibleLayer(layer); });
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -3194,10 +3208,62 @@ function UtopiaMapInner(_a) {
         });
         return null;
     }
+    useMapEvents({
+        popupopen: function (e) {
+            var _a, _b;
+            var item = (_a = Object.entries(leafletRefs).find(function (r) { return r[1].popup === e.popup; })) === null || _a === void 0 ? void 0 : _a[1].item;
+            if (window.location.pathname.split('/')[1] !== (item === null || item === void 0 ? void 0 : item.id)) {
+                var params = new URLSearchParams(window.location.search);
+                if (!location.pathname.includes('/item/')) {
+                    window.history.pushState({}, '', "/".concat(item === null || item === void 0 ? void 0 : item.id) + "".concat(params.toString() !== '' ? "?".concat(params) : ''));
+                }
+                var title = '';
+                if (item === null || item === void 0 ? void 0 : item.name)
+                    title = item.name;
+                else if ((_b = item === null || item === void 0 ? void 0 : item.layer) === null || _b === void 0 ? void 0 : _b.itemNameField)
+                    title = getValue(item, item.layer.itemNameField);
+                document.title = "".concat(document.title.split('-')[0], " - ").concat(title);
+            }
+        },
+    });
+    var openPopup = function () {
+        var _a, _b, _c;
+        if (!containsUUID(window.location.pathname)) {
+            map.closePopup();
+        }
+        else {
+            if (window.location.pathname.split('/')[1]) {
+                var id = window.location.pathname.split('/')[1];
+                // eslint-disable-next-line security/detect-object-injection
+                var ref_1 = leafletRefs[id];
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                if (ref_1) {
+                    clusterRef.hasLayer(ref_1.marker) &&
+                        (clusterRef === null || clusterRef === void 0 ? void 0 : clusterRef.zoomToShowLayer(ref_1.marker, function () {
+                            ref_1.marker.openPopup();
+                        }));
+                    var title = '';
+                    if (ref_1.item.name)
+                        title = ref_1.item.name;
+                    else if ((_a = ref_1.item.layer) === null || _a === void 0 ? void 0 : _a.itemNameField)
+                        title = getValue(ref_1.item.name, ref_1.item.layer.itemNameField);
+                    document.title = "".concat(document.title.split('-')[0], " - ").concat(title);
+                    (_b = document
+                        .querySelector('meta[property="og:title"]')) === null || _b === void 0 ? void 0 : _b.setAttribute('content', ref_1.item.name);
+                    (_c = document
+                        .querySelector('meta[property="og:description"]')) === null || _c === void 0 ? void 0 : _c.setAttribute('content', ref_1.item.text);
+                }
+            }
+        }
+    };
+    useEffect(function () {
+        openPopup();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [leafletRefs, location]);
     var resetMetaTags = function () {
         var _a, _b, _c;
         var params = new URLSearchParams(window.location.search);
-        if (!window.location.pathname.includes('/item/')) {
+        if (!containsUUID(window.location.pathname)) {
             window.history.pushState({}, '', '/' + "".concat(params.toString() !== '' ? "?".concat(params) : ''));
         }
         document.title = document.title.split('-')[0];
@@ -3210,22 +3276,23 @@ function UtopiaMapInner(_a) {
             layer.bindPopup(feature.properties.name);
         }
     };
-    return (jsxs("div", __assign({ className: "tw-h-full ".concat(selectNewItemPosition != null ? 'crosshair-cursor-enabled' : undefined) }, { children: [jsxs(MapContainer, __assign({ ref: mapDivRef, style: { height: height, width: width }, center: new LatLng(center[0], center[1]), zoom: zoom, zoomControl: false, maxZoom: 19 }, { children: [jsx(Outlet, {}), jsxs(Control, __assign({ position: 'topLeft', zIndex: '1000', absolute: true }, { children: [jsx(SearchControl, {}), jsx(TagsControl, {})] })), jsxs(Control, __assign({ 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, __assign({ ref: function (r) { return setClusterRef(r); }, showCoverageOnHover: true, chunkedLoading: true, maxClusterRadius: 50, removeOutsideVisibleBounds: false }, { children: Children.toArray(children).map(function (child) {
-                            return isValidElement(child)
-                                ? cloneElement(child, { setItemFormPopup: setItemFormPopup, itemFormPopup: itemFormPopup, clusterRef: clusterRef })
-                                : child;
-                        }) })), geo && (jsx(GeoJSON, { data: geo, onEachFeature: onEachFeature, eventHandlers: {
-                            click: function (e) {
-                                if (selectNewItemPosition) {
-                                    e.layer.closePopup();
-                                    setMapClicked({ position: e.latlng, setItemFormPopup: setItemFormPopup });
-                                }
-                            },
-                        } })), jsx(MapEventListener, {})] })), jsx(AddButton, { triggerAction: setSelectNewItemPosition }), selectNewItemPosition != null && (jsx(SelectPosition, { setSelectNewItemPosition: setSelectNewItemPosition }))] })));
+    return (jsxs("div", __assign({ className: "tw-h-full ".concat(selectNewItemPosition != null ? 'crosshair-cursor-enabled' : undefined) }, { children: [jsx(Outlet, {}), jsxs(Control, __assign({ position: 'topLeft', zIndex: '1000', absolute: true }, { children: [jsx(SearchControl, {}), jsx(TagsControl, {})] })), jsxs(Control, __assign({ 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, __assign({ ref: function (r) { return setClusterRef(r); }, showCoverageOnHover: true, chunkedLoading: true, maxClusterRadius: 50, removeOutsideVisibleBounds: false }, { children: Children.toArray(children).map(function (child) {
+                    return isValidElement(child)
+                        ? cloneElement(child, { setItemFormPopup: setItemFormPopup, itemFormPopup: itemFormPopup, clusterRef: clusterRef })
+                        : child;
+                }) })), geo && (jsx(GeoJSON, { data: geo, onEachFeature: onEachFeature, eventHandlers: {
+                    click: function (e) {
+                        if (selectNewItemPosition) {
+                            e.layer.closePopup();
+                            setMapClicked({ position: e.latlng, setItemFormPopup: setItemFormPopup });
+                        }
+                    },
+                } })), jsx(MapEventListener, {}), jsx(AddButton, { triggerAction: setSelectNewItemPosition }), selectNewItemPosition != null && (jsx(SelectPosition, { setSelectNewItemPosition: setSelectNewItemPosition }))] })));
 }
 
-function UtopiaMap(props) {
-    return (jsx(ContextWrapper, { children: jsx(UtopiaMapInner, __assign({}, props)) }));
+function UtopiaMap(_a) {
+    var _b = _a.height, height = _b === void 0 ? '500px' : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c, _d = _a.center, center = _d === void 0 ? [50.6, 9.5] : _d, _e = _a.zoom, zoom = _e === void 0 ? 10 : _e, children = _a.children, geo = _a.geo, _f = _a.showFilterControl, showFilterControl = _f === void 0 ? false : _f, _g = _a.showGratitudeControl, showGratitudeControl = _g === void 0 ? false : _g, _h = _a.showLayerControl, showLayerControl = _h === void 0 ? true : _h, infoText = _a.infoText;
+    return (jsx(ContextWrapper, { children: jsx(MapContainer, __assign({ style: { height: height, width: width }, center: new LatLng(center[0], center[1]), zoom: zoom, zoomControl: false, maxZoom: 19 }, { children: jsx(UtopiaMapInner, __assign({ geo: geo, showFilterControl: showFilterControl, showGratitudeControl: showGratitudeControl, showLayerControl: showLayerControl, infoText: infoText }, { children: children })) })) }));
 }
 
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
@@ -3695,7 +3762,6 @@ var Layer = function (_a) {
     var addMarker = useAddMarker();
     var addPopup = useAddPopup();
     var leafletRefs = useLeafletRefs();
-    var location = useLocation();
     var allTagsLoaded = useAllTagsLoaded();
     var allItemsLoaded = useAllItemsLoaded();
     var setMarkerClicked = useSetMarkerClicked();
@@ -3704,7 +3770,6 @@ var Layer = function (_a) {
     var addTag = useAddTag();
     var _r = useState([]), newTagsToAdd = _r[0], setNewTagsToAdd = _r[1];
     var _s = useState(false), tagsReady = _s[0], setTagsReady = _s[1];
-    var map = useMap();
     var isLayerVisible = useIsLayerVisible();
     var isGroupTypeVisible = useIsGroupTypeVisible();
     var visibleGroupTypes = useVisibleGroupType();
@@ -3777,59 +3842,6 @@ var Layer = function (_a) {
             });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [data, api]);
-    useMapEvents({
-        popupopen: function (e) {
-            var _a, _b;
-            var item = (_a = Object.entries(leafletRefs).find(function (r) { return r[1].popup === e.popup; })) === null || _a === void 0 ? void 0 : _a[1].item;
-            if (((_b = item === null || item === void 0 ? void 0 : item.layer) === null || _b === void 0 ? void 0 : _b.name) === name && window.location.pathname.split('/')[1] !== item.id) {
-                var params = new URLSearchParams(window.location.search);
-                if (!location.pathname.includes('/item/')) {
-                    window.history.pushState({}, '', "/".concat(item.id) + "".concat(params.toString() !== '' ? "?".concat(params) : ''));
-                }
-                var title = '';
-                if (item.name)
-                    title = item.name;
-                else if (item.layer.itemNameField)
-                    title = getValue(item, item.layer.itemNameField);
-                document.title = "".concat(document.title.split('-')[0], " - ").concat(title);
-            }
-        },
-    });
-    var openPopup = function () {
-        var _a, _b, _c;
-        if (window.location.pathname.split('/').length <= 1 ||
-            window.location.pathname.split('/')[1] === '') {
-            map.closePopup();
-        }
-        else {
-            if (window.location.pathname.split('/')[1]) {
-                var id = window.location.pathname.split('/')[1];
-                // eslint-disable-next-line security/detect-object-injection
-                var ref_1 = leafletRefs[id];
-                if ((ref_1 === null || ref_1 === void 0 ? void 0 : ref_1.marker) && ((_a = ref_1.item.layer) === null || _a === void 0 ? void 0 : _a.name) === name) {
-                    ref_1.marker &&
-                        clusterRef.hasLayer(ref_1.marker) &&
-                        (clusterRef === null || clusterRef === void 0 ? void 0 : clusterRef.zoomToShowLayer(ref_1.marker, function () {
-                            ref_1.marker.openPopup();
-                        }));
-                    var title = '';
-                    if (ref_1.item.name)
-                        title = ref_1.item.name;
-                    else if (ref_1.item.layer.itemNameField)
-                        title = getValue(ref_1.item.name, ref_1.item.layer.itemNameField);
-                    document.title = "".concat(document.title.split('-')[0], " - ").concat(title);
-                    (_b = document
-                        .querySelector('meta[property="og:title"]')) === null || _b === void 0 ? void 0 : _b.setAttribute('content', ref_1.item.name);
-                    (_c = document
-                        .querySelector('meta[property="og:description"]')) === null || _c === void 0 ? void 0 : _c.setAttribute('content', ref_1.item.text);
-                }
-            }
-        }
-    };
-    useEffect(function () {
-        openPopup();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [leafletRefs, location]);
     useEffect(function () {
         if (tagsReady) {
             var processedTags_1 = {};
@@ -4523,19 +4535,7 @@ var OverlayItemsIndexPage = function (_a) {
 };
 
 var EmojiPicker = function (_a) {
-    var 
-    // eslint-disable-next-line react/prop-types
-    selectedEmoji = _a.selectedEmoji, 
-    // eslint-disable-next-line react/prop-types
-    selectedColor = _a.selectedColor, 
-    // eslint-disable-next-line react/prop-types
-    selectedShape = _a.selectedShape, 
-    // eslint-disable-next-line react/prop-types
-    setSelectedEmoji = _a.setSelectedEmoji, 
-    // eslint-disable-next-line react/prop-types
-    setSelectedColor = _a.setSelectedColor, 
-    // eslint-disable-next-line react/prop-types
-    setSelectedShape = _a.setSelectedShape;
+    var selectedEmoji = _a.selectedEmoji, selectedColor = _a.selectedColor, selectedShape = _a.selectedShape, setSelectedEmoji = _a.setSelectedEmoji, setSelectedColor = _a.setSelectedColor, setSelectedShape = _a.setSelectedShape;
     var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
     var emojis = [
         '❤️',
@@ -4631,47 +4631,48 @@ var AttestationForm = function (_a) {
     var handleChange = function (event) {
         setInputValue(event.target.value);
     };
-    var sendAttestation = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var to;
-        return __generator(this, function (_a) {
-            to = [];
-            users === null || users === void 0 ? void 0 : users.map(function (u) { var _a; return to.push({ directus_users_id: (_a = u.user_created) === null || _a === void 0 ? void 0 : _a.id }); });
-            (api === null || api === void 0 ? void 0 : api.createItem) &&
-                toast
-                    .promise(api.createItem({
-                    text: inputValue,
-                    emoji: selectedEmoji,
-                    color: selectedColor,
-                    shape: selectedShape,
-                    to: to,
-                }), {
-                    pending: 'creating attestation ...',
-                    success: 'Attestation created',
-                    error: {
-                        render: function (_a) {
-                            var data = _a.data;
-                            return "".concat(data);
-                        },
+    var sendAttestation = function () {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var to = [];
+        users === null || users === void 0 ? void 0 : users.map(function (u) { var _a; return to.push({ directus_users_id: (_a = u.user_created) === null || _a === void 0 ? void 0 : _a.id }); });
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        (api === null || api === void 0 ? void 0 : api.createItem) &&
+            toast
+                .promise(api.createItem({
+                text: inputValue,
+                emoji: selectedEmoji,
+                color: selectedColor,
+                shape: selectedShape,
+                to: to,
+            }), {
+                pending: 'creating attestation ...',
+                success: 'Attestation created',
+                error: {
+                    render: function (_a) {
+                        var data = _a.data;
+                        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+                        return "".concat(data);
                     },
-                })
-                    .then(function () {
-                    var _a;
-                    return navigate('/item/' +
-                        ((_a = items.find(function (i) {
-                            var _a, _b;
-                            return ((_a = i.user_created) === null || _a === void 0 ? void 0 : _a.id) === to[0].directus_users_id &&
-                                ((_b = i.layer) === null || _b === void 0 ? void 0 : _b.itemType.name) === 'player';
-                        })) === null || _a === void 0 ? void 0 : _a.id) +
-                        '?tab=2');
-                });
-            return [2 /*return*/];
-        });
-    }); };
+                },
+            })
+                .then(function () {
+                var _a;
+                return navigate('/item/' +
+                    (
+                    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+                    (_a = items.find(function (i) {
+                        var _a, _b;
+                        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                        return ((_a = i.user_created) === null || _a === void 0 ? void 0 : _a.id) === to[0].directus_users_id &&
+                            ((_b = i.layer) === null || _b === void 0 ? void 0 : _b.itemType.name) === 'player';
+                    })) === null || _a === void 0 ? void 0 : _a.id) +
+                    '?tab=2');
+            });
+    };
     var _d = useState('select badge'), selectedEmoji = _d[0], setSelectedEmoji = _d[1];
     var _e = useState('circle'), selectedShape = _e[0], setSelectedShape = _e[1];
     var _f = useState('#fff0d6'), selectedColor = _f[0], setSelectedColor = _f[1];
-    return (jsxs(MapOverlayPage, __assign({ backdrop: true, className: 'tw-h-fit tw-min-h-56 tw-w-96' }, { children: [jsx("div", __assign({ className: 'tw-text-center tw-text-xl tw-font-bold' }, { children: "Gratitude" })), jsx("div", __assign({ className: 'tw-text-center tw-text-base tw-text-gray-400' }, { children: "to" })), jsx("div", __assign({ className: 'tw-flex tw-flex-row tw-justify-center tw-items-center tw-flex-wrap' }, { children: users &&
-                    users.map(function (u, k) { return (jsxs("div", __assign({ className: 'tw-flex tw-items-center tw-space-x-3 tw-mx-2 tw-my-1' }, { children: [u.image ? (jsx("div", __assign({ className: 'tw-avatar' }, { children: jsx("div", __assign({ className: 'tw-mask tw-mask-circle tw-w-8 tw-h-8' }, { children: jsx("img", { src: appState.assetsApi.url + u.image + '?width=40&heigth=40', alt: 'Avatar' }) })) }))) : (jsx("div", { className: 'tw-mask tw-mask-circle tw-text-xl md:tw-text-2xl tw-bg-slate-200 tw-rounded-full tw-w-8 tw-h-8' })), jsx("div", { children: jsx("div", __assign({ className: 'tw-font-bold' }, { children: u.name })) })] }), k)); }, ', ') })), jsxs("div", __assign({ className: 'tw-w-full' }, { children: [jsx("div", __assign({ className: 'tw-flex tw-justify-center tw-items-center' }, { children: jsx("div", __assign({ className: ' tw-flex tw-justify-center tw-items-center tw-w-28 tw-h-28 tw-m-4' }, { children: jsx(EmojiPicker, { selectedEmoji: selectedEmoji, selectedColor: selectedColor, selectedShape: selectedShape, setSelectedEmoji: setSelectedEmoji, setSelectedColor: setSelectedColor, setSelectedShape: setSelectedShape }) })) })), jsx("div", __assign({ className: 'tw-flex tw-justify-center tw-items-center' }, { children: jsx("input", { ref: inputRef, value: inputValue, onChange: handleChange, type: 'text', placeholder: '... and say some words', className: 'tw-input tw-min-w-0 tw-w-fit tw-resize-none tw-overflow-hidden tw-text-center ' }) }))] })), jsx("div", __assign({ className: 'tw-w-full tw-grid tw-mt-4' }, { children: jsx("button", __assign({ onClick: sendAttestation, className: 'tw-btn tw-place-self-center tw-px-8' }, { children: "Next" })) }))] })));
+    return (jsxs(MapOverlayPage, __assign({ backdrop: true, className: 'tw-h-fit tw-min-h-56 tw-w-96' }, { children: [jsx("div", __assign({ className: 'tw-text-center tw-text-xl tw-font-bold' }, { children: "Gratitude" })), jsx("div", __assign({ className: 'tw-text-center tw-text-base tw-text-gray-400' }, { children: "to" })), jsx("div", __assign({ className: 'tw-flex tw-flex-row tw-justify-center tw-items-center tw-flex-wrap' }, { children: users === null || users === void 0 ? void 0 : users.map(function (u, k) { return (jsxs("div", __assign({ className: 'tw-flex tw-items-center tw-space-x-3 tw-mx-2 tw-my-1' }, { children: [u.image ? (jsx("div", __assign({ className: 'tw-avatar' }, { children: jsx("div", __assign({ className: 'tw-mask tw-mask-circle tw-w-8 tw-h-8' }, { children: jsx("img", { src: appState.assetsApi.url + u.image + '?width=40&heigth=40', alt: 'Avatar' }) })) }))) : (jsx("div", { className: 'tw-mask tw-mask-circle tw-text-xl md:tw-text-2xl tw-bg-slate-200 tw-rounded-full tw-w-8 tw-h-8' })), jsx("div", { children: jsx("div", __assign({ className: 'tw-font-bold' }, { children: u.name })) })] }), k)); }, ', ') })), jsxs("div", __assign({ className: 'tw-w-full' }, { children: [jsx("div", __assign({ className: 'tw-flex tw-justify-center tw-items-center' }, { children: jsx("div", __assign({ className: ' tw-flex tw-justify-center tw-items-center tw-w-28 tw-h-28 tw-m-4' }, { children: jsx(EmojiPicker, { selectedEmoji: selectedEmoji, selectedColor: selectedColor, selectedShape: selectedShape, setSelectedEmoji: setSelectedEmoji, setSelectedColor: setSelectedColor, setSelectedShape: setSelectedShape }) })) })), jsx("div", __assign({ className: 'tw-flex tw-justify-center tw-items-center' }, { children: jsx("input", { ref: inputRef, value: inputValue, onChange: handleChange, type: 'text', placeholder: '... and say some words', className: 'tw-input tw-min-w-0 tw-w-fit tw-resize-none tw-overflow-hidden tw-text-center ' }) }))] })), jsx("div", __assign({ className: 'tw-w-full tw-grid tw-mt-4' }, { children: jsx("button", __assign({ onClick: sendAttestation, className: 'tw-btn tw-place-self-center tw-px-8' }, { children: "Next" })) }))] })));
 };
 
 var TagView = function (_a) {
@@ -5030,7 +5031,7 @@ var GalleryView = function (_a) {
     return (jsxs("div", __assign({ className: 'tw-mx-6 tw-mb-6' }, { children: [jsx(RowsPhotoAlbum, { photos: images, targetRowHeight: 150, onClick: function (_a) {
                     var current = _a.index;
                     return setIndex(current);
-                } }), jsx(Lightbox, { index: index, slides: images, open: index >= 0, close: function () { return setIndex(-1); } })] })));
+                } }), jsx(ReactLightbox, { index: index, slides: images, open: index >= 0, close: function () { return setIndex(-1); } })] })));
 };
 
 var platformConfigs = {
@@ -6030,5 +6031,5 @@ function Quests() {
     return (jsx(Fragment, { children: questsOpen ? (jsx("div", __assign({ 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", __assign({ className: 'tw-card-body tw-p-4 tw-pt-0' }, { children: [jsx("div", __assign({ className: 'tw-card-actions tw-justify-end' }, { children: jsx("label", __assign({ className: 'tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-1 tw-top-1', onClick: function () { return setQuestsOpen(false); } }, { children: "\u2715" })) })), jsxs("h2", __assign({ className: 'tw-card-title tw-m-auto ' }, { children: ["Level 1", jsx("svg", __assign({ xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', strokeWidth: 1.5, stroke: '#aaa', className: 'tw-w-5 tw-h-5 tw-cursor-pointer' }, { children: jsx("path", { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z' }) }))] })), jsxs("ul", __assign({ className: 'tw-flex-row' }, { children: [jsx("li", { children: jsxs("label", __assign({ 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", __assign({ className: 'tw-text-sm tw-label-text tw-mx-2' }, { children: "Sign Up" }))] })) }), jsx("li", { children: jsxs("label", __assign({ 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 === null || profile === void 0 ? void 0 : profile.text) }), jsx("span", __assign({ className: 'tw-text-sm tw-label-text tw-mx-2' }, { children: "Fill Profile" }))] })) }), jsx("li", { children: jsxs("label", __assign({ 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 === null || profile === void 0 ? void 0 : profile.image) }), jsx("span", __assign({ 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, MoonCalendar, OverlayItemsIndexPage, Permissions, PopupButton, PopupCheckboxInput, PopupStartEndInput, PopupTextAreaInput, PopupTextInput, ProfileForm, ProfileView, Quests, RequestPasswordPage, SelectBox, SelectUser, SetNewPasswordPage, SideBar, SignupPage, Sitemap, StartEndView, Tags, TextAreaInput, TextInput, TextView, TitleCard, UserSettings, UtopiaMap, useAuth };
+export { AppShell, AttestationForm, AuthProvider, CardPage, Content, ItemForm, ItemView, Layer, LoginPage, MapOverlayPage, MarketView, Modal, MoonCalendar, OverlayItemsIndexPage, Permissions, PopupButton, PopupCheckboxInput, PopupStartEndInput, PopupTextAreaInput, PopupTextInput, ProfileForm, ProfileView, Quests, RequestPasswordPage, SelectBox, SelectUser, SetNewPasswordPage, SideBar, SignupPage, Sitemap, StartEndView, Tags, TextAreaInput, TextInput, TextView, TitleCard, UserSettings, UtopiaMap };
 //# sourceMappingURL=index.js.map