ublo-lib 1.4.2 → 1.5.0

package/es/common/components/carousel.js

@@ -31,8 +31,8 @@ function useInterval(callback, delay, current, dragging) {
     }
 
     if (!dragging && delay !== null && delay !== 0) {
-      let id = setInterval(tick, delay);
-      return () => clearInterval(id);
+      const interval = setInterval(tick, delay);
+      return () => clearInterval(interval);
     }
   }, [current, delay, dragging]);
 }
@@ -46,19 +46,63 @@ const Dots = ({
   return _jsx("div", {
     className: "carousel__dots",
     children: length.map((_, i) => {
-      const dotClassnames = classnames("carousel__dot", {
+      const updateCurrent = e => {
+        e.stopPropagation();
+        setCurrent(i);
+      };
+
+      const classes = classnames("carousel__dot", {
         "carousel__dot--current": i === current
       });
+      return _jsx("button", {
+        className: classes,
+        onClick: updateCurrent,
+        "aria-label": i
+      }, i);
+    })
+  });
+};
+
+const Thumbnails = ({
+  carouselRef,
+  count,
+  current,
+  setCurrent
+}) => {
+  const [thumbnails, setThumbnails] = React.useState([]);
+  React.useEffect(() => {
+    const carousel = carouselRef.current;
+
+    if (carousel) {
+      const sections = carousel.querySelectorAll("section[data-class]");
 
-      const onClick = e => {
+      if (sections.length) {
+        const images = Array.from(sections).reduce((acc, section) => {
+          const image = section.querySelector("img");
+          if (!image?.src) return acc;
+          return [...acc, image.src];
+        }, []);
+        setThumbnails(images);
+      }
+    }
+  }, [carouselRef, count]);
+  if (!count || !thumbnails.length) return null;
+  return _jsx("div", {
+    className: "carousel__thumbnails",
+    children: thumbnails.map((thumbnail, i) => {
+      const updateCurrent = e => {
         e.stopPropagation();
         setCurrent(i);
       };
 
-      return _jsx("button", {
-        className: dotClassnames,
-        onClick: onClick,
-        "aria-label": i
+      const classes = classnames("carousel__thumbnail", {
+        "carousel__thumbnail--current": i === current
+      });
+      return _jsx("input", {
+        type: "image",
+        className: classes,
+        src: thumbnail,
+        onClick: updateCurrent
       }, i);
     })
   });
@@ -69,6 +113,7 @@ const Carousel = ({
   fade = false,
   controls,
   dots,
+  thumbnails,
   alwaysShowControls,
   allowDragOnDesktop,
   children
@@ -184,7 +229,7 @@ const Carousel = ({
     const deltaX = Math.abs(startX - endX);
     const deltaY = Math.abs(startY - endY);
 
-    if (deltaX < 80 || deltaX < deltaY) {
+    if (deltaX < 80 && deltaX < deltaY) {
       inner.style.transform = `translateX(${-current * 100}%)`;
       inner.style.removeProperty("transition");
       setTouchStartPosition(undefined);
@@ -196,19 +241,19 @@ const Carousel = ({
     setTouchStartPosition(undefined);
   };
 
-  const onSectionCreated = React.useCallback(() => {
+  const updateSectionCount = React.useCallback(() => {
     const carousel = carouselRef.current;
-    const sections = Array.from(carousel.querySelectorAll("section"));
-    setCount(sections.length);
+    const sections = carousel.querySelectorAll("section");
+    setCount(sections?.length || 0);
   }, []);
   React.useEffect(() => {
     const zone = carouselRef.current?.querySelector(".cms");
 
     if (zone) {
-      zone.addEventListener("ubloSectionCreated", onSectionCreated);
-      return () => zone.removeEventListener("ubloSectionCreated", onSectionCreated);
+      zone.addEventListener("ubloSectionCreated", updateSectionCount);
+      return () => zone.removeEventListener("ubloSectionCreated", updateSectionCount);
     }
-  }, [onSectionCreated]);
+  }, [updateSectionCount]);
   React.useEffect(() => {
     const carousel = carouselRef.current;
     const inner = carousel.firstElementChild;
@@ -270,7 +315,7 @@ const Carousel = ({
     } else {
       undraggableElements.forEach(element => setTimeout(() => element.removeEventListener("click", onUndraggableElementClick), 100));
     }
-  }, [dragging]);
+  }, [dragging, onUndraggableElementClick]);
   useInterval(() => {
     if (!editing) next();
   }, delay, current, dragging);
@@ -309,6 +354,11 @@ const Carousel = ({
       count: count,
       current: current,
       setCurrent: setCurrent
+    }), thumbnails && _jsx(Thumbnails, {
+      carouselRef: carouselRef,
+      count: count,
+      current: current,
+      setCurrent: setCurrent
     })]
   });
 };

package/es/common/components/editable-map/edit-form.js

@@ -0,0 +1,98 @@
+import * as React from "react";
+import Input from "dt-design-system/es/input";
+import Textarea from "dt-design-system/es/textarea";
+import Button from "dt-design-system/es/button";
+import * as Icons from "dt-design-system/es/icons";
+import IconPicker from "./icon-picker";
+import css from "./edit-form.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const EditForm = ({
+  popupRef,
+  marker,
+  setMarkers
+}) => {
+  const {
+    id,
+    icon,
+    title,
+    description,
+    url,
+    label
+  } = marker;
+
+  const removeMarker = e => {
+    e.stopPropagation();
+    setMarkers(currents => currents.filter(marker => marker.id !== id));
+  };
+
+  const closeMarker = () => {
+    popupRef.current.close();
+  };
+
+  const updateMarker = field => value => {
+    setMarkers(currents => {
+      return currents.map(marker => {
+        if (marker.id === id) {
+          return { ...marker,
+            [field]: value
+          };
+        }
+
+        return marker;
+      });
+    });
+  };
+
+  return _jsxs("div", {
+    className: css.form,
+    children: [_jsxs("div", {
+      className: css.row,
+      children: [_jsx(IconPicker, {
+        callback: updateMarker("icon"),
+        selectedIcon: icon
+      }), _jsx(Input, {
+        label: "Titre",
+        value: title,
+        className: css.title,
+        onValueChange: updateMarker("title"),
+        compact: true
+      })]
+    }), _jsx(Textarea, {
+      label: "Description",
+      value: description,
+      className: css.description,
+      onValueChange: updateMarker("description"),
+      compact: true
+    }), _jsxs("div", {
+      className: css.row,
+      children: [_jsx(Input, {
+        label: "Lien bouton",
+        value: url,
+        onValueChange: updateMarker("url"),
+        compact: true
+      }), _jsx(Input, {
+        label: "Libell\xE9 bouton",
+        value: label,
+        onValueChange: updateMarker("label"),
+        compact: true
+      })]
+    }), _jsxs("div", {
+      className: css.buttons,
+      children: [_jsxs(Button, {
+        variant: "danger",
+        onClick: removeMarker,
+        compact: true,
+        children: [_jsx(Icons.Bin, {}), "Supprimer ce point"]
+      }), _jsx(Button, {
+        variant: "success",
+        onClick: closeMarker,
+        compact: true,
+        children: _jsx(Icons.Check, {})
+      })]
+    })]
+  });
+};
+
+export default EditForm;

package/es/common/components/editable-map/edit-form.module.css

@@ -0,0 +1,28 @@
+.form {
+  position: relative;
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.row {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.title {
+  flex: 1 1 100%;
+}
+
+.description textarea {
+  height: 80px;
+  resize: none !important;
+}
+
+.buttons {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 6px;
+}

package/es/common/components/editable-map/editable-map.js

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { MapContainer, TileLayer } from "react-leaflet";
+import { useUbloContext } from "ublo/with-ublo";
+import Markers from "./markers";
+import Helper from "./helper";
+import css from "./editable-map.module.css";
+import "leaflet/dist/leaflet.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const FRANCE_CENTER = [46.807934, 3.645097];
+const DEFAULT_ZOOM = 6;
+
+const EditableMap = ({
+  format
+}) => {
+  const ref = React.useRef();
+  const {
+    cmsMode
+  } = useUbloContext();
+  const {
+    element,
+    presets,
+    isInDialog
+  } = format;
+  const [center, setCenter] = React.useState(presets?.center || FRANCE_CENTER);
+  const [zoom, setZoom] = React.useState(presets?.zoom ?? DEFAULT_ZOOM);
+  const [markers, setMarkers] = React.useState(presets?.markers ?? []);
+  const mustRenderMap = !cmsMode || cmsMode === "editing";
+  const refreshSize = React.useCallback(() => {
+    if (!mustRenderMap) return;
+    ref.current.invalidateSize();
+  }, [mustRenderMap]);
+  React.useEffect(() => {
+    if (isInDialog) {
+      window.refreshDialogMapSize = refreshSize;
+    }
+  }, [isInDialog, refreshSize]);
+  React.useEffect(() => {
+    if (cmsMode === "editing") {
+      const newPresets = {
+        markers,
+        zoom,
+        center
+      };
+      element.setAttribute("data-presets", JSON.stringify(newPresets));
+    }
+  }, [center, cmsMode, element, markers, zoom]);
+  const map = React.useMemo(() => _jsxs(MapContainer, {
+    ref: ref,
+    center: center,
+    zoom: zoom,
+    scrollWheelZoom: true,
+    className: css.map,
+    attributionControl: false,
+    children: [_jsx(TileLayer, {
+      attribution: "\xA9 <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
+      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    }), _jsx(Markers, {
+      mapRef: ref,
+      markers: markers,
+      setMarkers: setMarkers,
+      setZoom: setZoom,
+      setCenter: setCenter
+    })]
+  }), [markers, center, zoom]);
+  return _jsx("div", {
+    className: css.container,
+    children: mustRenderMap && _jsxs(_Fragment, {
+      children: [map, cmsMode === "editing" && _jsx(Helper, {})]
+    })
+  });
+};
+
+export default EditableMap;

package/es/common/components/editable-map/editable-map.module.css

@@ -0,0 +1,43 @@
+.container,
+.map {
+  width: 100%;
+  height: 100%;
+}
+
+.container {
+  position: relative;
+}
+
+:global(:is(.cms--connected, .cms--info)) .container:empty::after {
+  content: "Activez le mode édition pour modifier la carte, déconnectez-vous pour la consulter.";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 400px;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: hsl(var(--grey-600));
+  font-size: 17px;
+  letter-spacing: 1px;
+  text-align: center;
+  transform: translate(-50%, -50%);
+}
+
+@media (max-width: 992px) {
+  .map :global(.leaflet-tooltip) {
+    display: none !important;
+  }
+}
+
+.map :global(.leaflet-popup-tip-container),
+.map :global(.leaflet-tooltip::before) {
+  content: none;
+  display: none;
+}
+
+.map :global(.leaflet-tile-pane) {
+  filter: sepia(10%) grayscale(70%);
+}

package/es/common/components/editable-map/helper.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as Icons from "dt-design-system/es/icons";
+import css from "./helper.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Helper = () => {
+  return _jsxs("div", {
+    className: css.helper,
+    children: [_jsx(Icons.Question, {
+      className: css.helperIcon
+    }), _jsx("div", {
+      children: "Cliquez n'importe o\xF9 sur la carte pour ajouter un point d'int\xE9r\xEAt. Vous pouvez d\xE9placer ces derniers gr\xE2ce au \"glisser-d\xE9poser\". Cliquez sur un point d'int\xE9r\xEAt existant pour modifier ses informations."
+    }), _jsxs("div", {
+      children: [_jsx("b", {
+        children: "Attention"
+      }), ", la carte sera affich\xE9e \xE0 vos client exactement dans l'\xE9tat dans laquelle vous l'enregistrez (niveau de zoom, points d'int\xE9r\xEAts, centrage)."]
+    })]
+  });
+};
+
+export default Helper;

package/es/common/components/editable-map/helper.module.css

@@ -0,0 +1,34 @@
+.helper {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  width: 350px;
+  max-width: 90%;
+  display: flex;
+  flex-direction: column;
+  color: var(--ds-grey-000, #ffffff);
+  font-size: 12px;
+  font-family: "Open Sans", sans-serif;
+  background: var(
+    --cms-blue-gradient,
+    linear-gradient(
+      175deg,
+      var(--cms-blue-400, #4177f6),
+      var(--cms-blue-500, #004cc2)
+    )
+  );
+  padding: 5px 10px;
+  border-radius: var(--ds-radius-200, 10px);
+  overflow: hidden;
+  z-index: 10000;
+}
+
+.helperIcon {
+  position: absolute;
+  bottom: -10px;
+  right: -10px;
+  width: 70px;
+  height: 70px;
+  fill: var(--ds-grey-000, #ffffff);
+  opacity: 0.25;
+}

package/es/common/components/editable-map/icon-picker.js

@@ -0,0 +1,65 @@
+import * as React from "react";
+import Button from "dt-design-system/es/button";
+import * as DSIcons from "dt-design-system/es/icons";
+import * as Icons from "./icons";
+import css from "./icon-picker.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const IconPicker = ({
+  selectedIcon,
+  callback
+}) => {
+  const [opened, setOpened] = React.useState(false);
+  const Icon = Icons[selectedIcon];
+  const keys = Object.keys(Icons);
+
+  const togglePicker = () => {
+    setOpened(!opened);
+  };
+
+  const closePicker = e => {
+    e.stopPropagation();
+    setOpened(false);
+  };
+
+  return _jsxs("div", {
+    className: css.picker,
+    children: [_jsx(Button, {
+      onClick: togglePicker,
+      children: _jsx(Icon, {
+        className: css.selectedIcon
+      })
+    }), opened && _jsxs("div", {
+      className: css.list,
+      children: [_jsxs(Button, {
+        variant: "link",
+        className: css.back,
+        onClick: closePicker,
+        compact: true,
+        children: [_jsx(DSIcons.ArrowLeft, {}), "Retour"]
+      }), keys.map(key => {
+        const updateSelected = e => {
+          e.stopPropagation();
+          callback(key);
+          setOpened(false);
+        };
+
+        const Icon = Icons[key];
+        return _jsx(Button, {
+          className: css.iconButton,
+          variant: "secondary",
+          onClick: updateSelected,
+          children: _jsx(Icon, {
+            className: css.icon
+          })
+        }, key);
+      }), _jsx("div", {
+        className: css.helper,
+        children: "Cliquez sur une ic\xF4ne pour la s\xE9lectioner"
+      })]
+    })]
+  });
+};
+
+export default IconPicker;

package/es/common/components/editable-map/icon-picker.module.css

@@ -0,0 +1,50 @@
+.selectedIcon {
+  width: 24px;
+  height: 24px;
+  fill: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+  z-index: initial !important;
+}
+
+.list {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+  grid-template-rows: max-content;
+  justify-items: start;
+  gap: 10px;
+  background-color: var(--ds-grey-000, #fff);
+  overflow: auto;
+  z-index: 1;
+}
+
+.back {
+  grid-column: 1 / -1;
+}
+
+.helper {
+  grid-column: 1 / -1;
+  width: 100%;
+  margin-top: auto;
+  text-align: center;
+  font-weight: 700;
+  font-family: var(--ds-sans-serif-font, "Open Sans", sans-serif);
+  font-size: 12px;
+}
+
+.iconButton {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  margin: 0 auto;
+}
+
+.icon {
+  flex: 0 0 24px !important;
+  width: 24px !important;
+  height: 24px !important;
+  fill: var(--ds-secondary, var(--ds-blue-400, #4177f6)) !important;
+}

package/es/common/components/editable-map/icons.js

@@ -0,0 +1,235 @@
+import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Icon = ({
+  width = 24,
+  height = 24,
+  ...props
+}) => _jsx("svg", {
+  viewBox: `0 0 ${width} ${height}`,
+  width: width,
+  height: height,
+  ...props,
+  children: props.children
+});
+
+export const Location = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "M12 12q.825 0 1.413-.588Q14 10.825 14 10t-.587-1.413Q12.825 8 12 8q-.825 0-1.412.587Q10 9.175 10 10q0 .825.588 1.412Q11.175 12 12 12Zm0 9.625q-.2 0-.4-.075t-.35-.2Q7.6 18.125 5.8 15.363 4 12.6 4 10.2q0-3.75 2.413-5.975Q8.825 2 12 2t5.587 2.225Q20 6.45 20 10.2q0 2.4-1.8 5.163-1.8 2.762-5.45 5.987-.15.125-.35.2-.2.075-.4.075Z"
+  })
+});
+export const ESFOffice = props => _jsxs(Icon, { ...props,
+  children: [_jsx("path", {
+    d: "M7.233 11.517c.031 0 .063-.034.063-.086l.015.017c.032-.224-.094-.414-.36-.414a.651.651 0 0 0-.58.363v.034c0 .052.03.086.078.086h.784ZM17.444 12.553a.082.082 0 0 1 .015-.001h-.015v.001Z"
+  }), _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.735 22.296c.49.47 1.078.704 1.765.704h5v-6h5v6h5c.688 0 1.276-.235 1.766-.704.49-.47.734-1.036.734-1.696V9.8c0-.38-.088-.74-.265-1.08A2.333 2.333 0 0 0 21 7.88l-7.5-5.4A2.547 2.547 0 0 0 12 2a2.547 2.547 0 0 0-1.5.48L3 7.88c-.313.22-.557.5-.734.84C2.09 9.06 2 9.42 2 9.8v10.8c0 .66.245 1.225.735 1.696Zm6.239-9.986H6.135v-.034c-.031 0-.063.017-.094.069-.078.293-.094.586.314.586a.58.58 0 0 0 .259-.065.639.639 0 0 0 .211-.176.16.16 0 0 1 .056-.051.145.145 0 0 1 .07-.018h1.772c.047 0 .078.051.078.086l-.015.052c-.612.827-1.804 1.207-2.745 1.207-1.333 0-2.368-.604-1.945-1.914C4.504 10.793 5.837 10 7.202 10c1.474 0 2.4.828 1.929 2.19a.173.173 0 0 1-.06.09.147.147 0 0 1-.097.03Zm-.141 1.276c0 .035.031.07.063.07v.034c.69.19 1.584.31 2.383.31 1.475 0 3.09-.448 3.357-1.345.188-.638-.486-.948-1.506-1.069l-.533-.069c-.188-.017-.486-.051-.455-.19.047-.155.377-.206.596-.206.486 0 .894.12 1.255.258h.063c.047 0 .11-.051.11-.051l.784-.793v-.07a.097.097 0 0 0-.047-.086c-.58-.19-1.224-.276-1.945-.276-1.475 0-3.106.5-3.357 1.38-.172.586.565.914 1.506 1l.502.051c.037.007.08.012.122.017.19.024.4.05.348.19-.047.173-.69.207-.69.207-.58 0-1.066-.138-1.458-.345h-.016l-.063-.017a.162.162 0 0 0-.11.052l-.878.88-.031.068Zm8.563-.983c0-.028.022-.045.047-.05v.016h1.553a.147.147 0 0 0 .094-.024.169.169 0 0 0 .063-.08l.204-.724v-.034c0-.052-.031-.086-.063-.086h-1.521c-.047 0-.079-.035-.079-.087V11.5l.063-.207c0-.034.031-.052.063-.052h1.804a.148.148 0 0 0 .087-.036.173.173 0 0 0 .054-.084l.235-.793v-.035c0-.034-.031-.086-.078-.086h-4.11a.147.147 0 0 0-.097.03.173.173 0 0 0-.06.09L14.7 13.69v.034c0 .035.031.086.078.086h2.149a.147.147 0 0 0 .097-.03.172.172 0 0 0 .06-.09l.313-1.087Z"
+  })]
+});
+export const Bear = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "M5.544 14.53c.191-.954.827-1.908 1.463-2.544.382.446.763.764 1.209 1.082l-.827 1.717c-.446-.19-1.018-.255-1.463-.255h-.382Zm10.368-1.462c.508-.318.89-.7 1.272-1.082.572.636 1.272 1.59 1.463 2.544a4.962 4.962 0 0 0-1.909.255 5.399 5.399 0 0 0-.826-1.717Zm-.335 2.236.017.053v-.063a1.44 1.44 0 0 0-.017.01Zm-.747-1.6c.248.37.555.982.747 1.6a4.834 4.834 0 0 0-1.892 2.152c-.19.51-.318 1.018-.318 1.527a3.371 3.371 0 0 0 .764 2.29 9.076 9.076 0 0 1-4.135 0c.546-.637.84-1.452.827-2.29 0-.509-.127-1.018-.318-1.527-.445-.89-1.081-1.59-1.908-2.162a7.44 7.44 0 0 1 .7-1.59 6.68 6.68 0 0 0 5.533 0Zm3.558-11.515A2.321 2.321 0 0 0 17.502 2a2.29 2.29 0 0 0-2.1 1.273 5.406 5.406 0 0 0-6.678 0 2.29 2.29 0 1 0-2.099 3.37h.128a5.406 5.406 0 1 0 10.685 0 2.322 2.322 0 0 0 .95-4.454Zm-8.075 5.219a.827.827 0 0 1-.317.062v-.063a.795.795 0 1 1 0-1.59.827.827 0 0 1 .317 1.59Zm4.38-.17a.795.795 0 1 1-1.124-1.125.795.795 0 0 1 1.124 1.125Zm-.69 2.395c0 .7-.89 1.272-1.971 1.272-1.082 0-1.972-.572-1.972-1.272 0-.7.89-1.272 2.035-1.272 1.018 0 1.909.572 1.909 1.272ZM21 18.538c0 1.444-1.45 2.607-3.244 2.607-1.793 0-3.244-1.163-3.244-2.607 0-1.438 1.45-2.608 3.244-2.608C19.55 15.93 21 17.1 21 18.538ZM9.488 18.6c0 1.444-1.45 2.608-3.244 2.608C4.45 21.21 3 20.045 3 18.601c0-1.437 1.45-2.607 3.244-2.607 1.793 0 3.244 1.17 3.244 2.607Z"
+  })
+});
+export const EastDirection = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "m12.7 15.3 2.6-2.6a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7l-2.625-2.625a.893.893 0 0 0-.687-.263.98.98 0 0 0-.688.288.948.948 0 0 0-.275.7c0 .283.092.517.275.7l.9.9H8.975a.928.928 0 0 0-.7.287A.993.993 0 0 0 8 12c0 .283.096.52.288.712A.965.965 0 0 0 9 13h3.2l-.925.925a.894.894 0 0 0-.263.688.979.979 0 0 0 .288.687.948.948 0 0 0 .7.275.948.948 0 0 0 .7-.275ZM12 22a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12c0-1.383.263-2.683.788-3.9a10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2c1.383 0 2.683.262 3.9.787a10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22Z"
+  })
+});
+export const WestDirection = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "m11.3 8.7-2.6 2.6a.948.948 0 0 0-.275.7c0 .283.092.517.275.7l2.625 2.625a.893.893 0 0 0 .687.263.98.98 0 0 0 .688-.288.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7l-.9-.9h3.225a.928.928 0 0 0 .7-.287A.993.993 0 0 0 16 12a.965.965 0 0 0-.288-.712A.965.965 0 0 0 15 11h-3.2l.925-.925a.894.894 0 0 0 .263-.688.979.979 0 0 0-.288-.687.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275ZM12 2c1.383 0 2.683.263 3.9.788a10.091 10.091 0 0 1 3.175 2.137c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.138A9.743 9.743 0 0 1 12 22a9.742 9.742 0 0 1-3.9-.787 10.105 10.105 0 0 1-3.175-2.138c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12c0-1.383.263-2.683.788-3.9a10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.732 9.732 0 0 1 12 2Z"
+  })
+});
+export const NorthDirection = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "m15.3 11.3-2.6-2.6a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275l-2.625 2.625a.893.893 0 0 0-.263.687.98.98 0 0 0 .288.688.948.948 0 0 0 .7.275.948.948 0 0 0 .7-.275l.9-.9v3.225c0 .283.096.517.287.7.192.183.43.275.713.275s.52-.096.712-.288A.965.965 0 0 0 13 15v-3.2l.925.925a.894.894 0 0 0 .688.263.979.979 0 0 0 .687-.288.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7Zm6.7.7a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.613-1.958-2.138-3.175A9.743 9.743 0 0 1 2 12c0-1.383.262-2.683.787-3.9a10.105 10.105 0 0 1 2.138-3.175c.9-.9 1.958-1.612 3.175-2.137A9.732 9.732 0 0 1 12 2c1.383 0 2.683.263 3.9.788a10.091 10.091 0 0 1 3.175 2.137c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12Z"
+  })
+});
+export const SouthDirection = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "m8.7 12.7 2.6 2.6a.948.948 0 0 0 .7.275.948.948 0 0 0 .7-.275l2.625-2.625a.893.893 0 0 0 .263-.687.98.98 0 0 0-.288-.688.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275l-.9.9V8.975a.928.928 0 0 0-.287-.7A.993.993 0 0 0 12 8a.965.965 0 0 0-.712.288A.965.965 0 0 0 11 9v3.2l-.925-.925a.894.894 0 0 0-.688-.263.979.979 0 0 0-.687.288.948.948 0 0 0-.275.7c0 .283.092.517.275.7ZM2 12c0-1.383.263-2.683.788-3.9a10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.732 9.732 0 0 1 12 2c1.383 0 2.683.263 3.9.788a10.091 10.091 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.138 3.175A9.742 9.742 0 0 1 22 12a9.743 9.743 0 0 1-.787 3.9 10.105 10.105 0 0 1-2.138 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12Z"
+  })
+});
+export const NorthEastDirection = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "M14.828 13.838v-3.676c0-.26-.1-.49-.3-.69-.2-.2-.43-.3-.69-.3h-3.712c-.26 0-.483.1-.672.3a.98.98 0 0 0-.283.69c0 .259.1.489.3.689.201.2.43.3.69.3h1.273l-2.28 2.28c-.2.201-.298.434-.293.699.007.265.11.498.31.698.2.2.436.3.707.3.271 0 .507-.1.707-.3l2.263-2.262v1.308c0 .26.1.483.3.672.201.188.43.282.69.282.26 0 .49-.1.69-.3.2-.2.3-.43.3-.69Zm4.243 5.233a9.733 9.733 0 0 1-3.315 2.2c-1.232.49-2.484.735-3.756.735-1.273 0-2.525-.245-3.757-.734a9.734 9.734 0 0 1-3.315-2.2 9.733 9.733 0 0 1-2.2-3.316A10.092 10.092 0 0 1 1.994 12c0-1.273.244-2.525.733-3.757A9.743 9.743 0 0 1 4.928 4.93a9.743 9.743 0 0 1 3.315-2.201A10.106 10.106 0 0 1 12 1.994c1.272 0 2.524.245 3.756.734a9.731 9.731 0 0 1 3.315 2.2 9.731 9.731 0 0 1 2.2 3.316A10.09 10.09 0 0 1 22.005 12a10.09 10.09 0 0 1-.734 3.756 9.732 9.732 0 0 1-2.2 3.315Z"
+  })
+});
+export const NorthWestDirection = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "M13.838 9.172h-3.676c-.26 0-.49.1-.69.3-.2.2-.3.43-.3.69v3.712c0 .26.1.483.3.672.2.188.43.282.69.282.259 0 .489-.1.689-.3.2-.2.3-.43.3-.69v-1.272l2.28 2.28c.201.2.434.298.699.292a.993.993 0 0 0 .698-.31c.2-.2.3-.436.3-.707 0-.27-.1-.506-.3-.707l-2.262-2.262h1.308c.26 0 .483-.1.672-.301.188-.2.282-.43.282-.69 0-.259-.1-.489-.3-.689-.2-.2-.43-.3-.69-.3Zm5.233-4.243a9.734 9.734 0 0 1 2.2 3.315c.49 1.231.735 2.483.735 3.756 0 1.273-.245 2.525-.734 3.756a9.735 9.735 0 0 1-2.2 3.315 9.733 9.733 0 0 1-3.316 2.2c-1.231.49-2.483.735-3.756.735-1.273 0-2.525-.245-3.757-.734a9.744 9.744 0 0 1-3.314-2.2 9.743 9.743 0 0 1-2.201-3.315A10.106 10.106 0 0 1 1.994 12c0-1.273.245-2.525.734-3.756a9.732 9.732 0 0 1 2.2-3.315 9.732 9.732 0 0 1 3.316-2.2A10.092 10.092 0 0 1 12 1.993c1.273 0 2.525.245 3.756.734a9.733 9.733 0 0 1 3.315 2.201Z"
+  })
+});
+export const SouthWestDirection = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "M10.162 14.828h3.676c.26 0 .49-.1.69-.3.2-.2.3-.43.3-.69v-3.712c0-.26-.1-.483-.3-.672a.98.98 0 0 0-.69-.282c-.259 0-.489.1-.689.3-.2.2-.3.43-.3.69v1.272l-2.28-2.28a.927.927 0 0 0-.699-.292.993.993 0 0 0-.698.31c-.2.2-.3.436-.3.707 0 .27.1.506.3.707l2.262 2.262h-1.308c-.26 0-.483.1-.672.301a.979.979 0 0 0-.282.69c0 .259.1.489.3.689.2.2.43.3.69.3Zm-5.233 4.243a9.733 9.733 0 0 1-2.2-3.315A10.091 10.091 0 0 1 1.993 12c0-1.273.245-2.525.734-3.756a9.732 9.732 0 0 1 2.2-3.315 9.732 9.732 0 0 1 3.316-2.2A10.092 10.092 0 0 1 12 1.993c1.273 0 2.525.245 3.757.734a9.743 9.743 0 0 1 3.314 2.2 9.743 9.743 0 0 1 2.201 3.315c.49 1.232.734 2.484.734 3.757 0 1.273-.245 2.525-.734 3.756a9.734 9.734 0 0 1-2.2 3.315 9.735 9.735 0 0 1-3.316 2.2c-1.231.49-2.483.735-3.756.735-1.273 0-2.525-.245-3.756-.734a9.734 9.734 0 0 1-3.315-2.2Z"
+  })
+});
+export const SouthEastDirection = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "M9.172 10.162v3.676c0 .26.1.49.3.69.2.2.43.3.69.3h3.712c.26 0 .483-.1.672-.3a.98.98 0 0 0 .283-.69c0-.259-.1-.489-.3-.689-.201-.2-.43-.3-.69-.3h-1.273l2.28-2.28c.2-.201.298-.434.293-.699a.993.993 0 0 0-.31-.698c-.2-.2-.436-.3-.707-.3-.271 0-.507.1-.707.3l-2.263 2.262v-1.308c0-.26-.1-.483-.3-.672a.979.979 0 0 0-.69-.282c-.26 0-.49.1-.69.3-.2.2-.3.43-.3.69ZM4.929 4.929a9.732 9.732 0 0 1 3.315-2.2A10.091 10.091 0 0 1 12 1.993c1.273 0 2.525.245 3.757.734a9.732 9.732 0 0 1 3.315 2.2 9.731 9.731 0 0 1 2.2 3.316c.49 1.231.734 2.483.734 3.756 0 1.273-.244 2.525-.733 3.757a9.742 9.742 0 0 1-2.201 3.314 9.744 9.744 0 0 1-3.315 2.201 10.107 10.107 0 0 1-3.757.734c-1.272 0-2.524-.245-3.756-.734a9.734 9.734 0 0 1-3.315-2.2 9.733 9.733 0 0 1-2.2-3.316A10.092 10.092 0 0 1 1.995 12c0-1.273.245-2.525.734-3.756a9.732 9.732 0 0 1 2.2-3.315Z"
+  })
+});
+export const ClubPiouPiou = props => _jsxs(Icon, { ...props,
+  children: [_jsx("path", {
+    d: "M11.5 13.61c-.222.06-.421.212-.578.217a9.165 9.165 0 0 1-1.345-.245c.022.054.044.11.067.162l-.067-.162c-.654-.158-1.25-.443-1.89-.542-.017.015-.501-.121-.316-.015-.398-.062-.534.018-.923.057.038.044.076.089.116.13a2.96 2.96 0 0 1-.116-.13 3.05 3.05 0 0 0-1.254.396l.028.086c-.391.22-1.05 1.44-1.077 1.6-.027.16 1.605-.136 1.605-.136l.071.148c.153.007.307.014.463.024.715.043 1.45.21 2.16.196.505-.009.994-.158 1.458-.28.014-.036-.394.144-.381.107-.013.037.395-.143.381-.107.793-.208 1.5-.633 2.036-1.453a.532.532 0 0 0-.438-.053Z",
+    fill: "#EE770D"
+  }), _jsx("path", {
+    d: "M8.718 16.454c.593-.26.95-.743 1.184-1.338-.469.122-.964.256-1.476.264-.703.011-1.432-.137-2.142-.18.276 1.018 1.481 1.53 2.434 1.255Z",
+    fill: "#EE770D"
+  }), _jsx("path", {
+    d: "M6.223 9.551c-.532 1.112-.565 2.572.224 3.531.14-.014.288-.029.44-.038a6.167 6.167 0 0 1-.664-3.493Z",
+    fill: "#D0EBF8"
+  }), _jsx("path", {
+    d: "M7.686 13.064c1.182-1.198.92-3.125-.126-4.222-.26-.12-.764.026-1.015.163a3.445 3.445 0 0 0-.321.547 6.167 6.167 0 0 0 .663 3.492c.269-.017.545-.02.799.02ZM11.498 13.61c1.031-1.178 1.557-2.813.925-4.301-.137-.25-.273-.5-.533-.618-.64-.105-1.05-.147-1.553.126a3.087 3.087 0 0 0-.405.36c-.456 1.593-.315 3.317.62 4.605.123.017.245.034.368.045.158-.006.357-.157.579-.217Z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M9.934 9.176c-1.125 1.187-.95 2.956-.358 4.406.326.08.651.15.977.2-.935-1.288-1.075-3.012-.62-4.606Z",
+    fill: "#D0EBF8"
+  }), _jsx("path", {
+    d: "M15.908 10.463c.01.255-.105.642.027.765.634.351.976-.741.858-1.265-.37-.18-.777.268-.885.5Z",
+    fill: "#B7C2D7"
+  }), _jsx("path", {
+    d: "M6.538 2.82c-1.043.494-1.74 2.097-1.115 2.803C7 4.173 8.861 2.98 10.413 1.453A7.08 7.08 0 0 0 6.537 2.82Z",
+    fill: "#B7D3E0"
+  }), _jsx("path", {
+    d: "M10.412 1.452C8.862 2.98 7 4.173 5.424 5.623l.002.003c1.493.75 3.152-.52 4.117-2.085.123-.132.87-.668.883-.286.051.347.138.678.258.979.81-.78 1.618-1.566 2.428-2.34a6.83 6.83 0 0 0-2.7-.442Z",
+    fill: "#E9F6FC"
+  }), _jsx("path", {
+    d: "M14.132 2.376a7.08 7.08 0 0 0-1.02-.481c-.81.773-1.618 1.56-2.427 2.339.195.484.477.89.836 1.152.463.339 1.015.4 1.622.378.551-.018 1.154-.09 1.695-.365.123-.133.241-.392.365-.524.22-1.028-.347-1.765-1.071-2.499Z",
+    fill: "#B7D3E0"
+  }), _jsx("path", {
+    d: "M15.234 5.766c.397-.424.544-.89.536-1.37l-.075-.048.075.048c-.01-.545-.223-1.11-.512-1.655a3.257 3.257 0 0 0-.278-.138c-1.714-2.078-5.584-1.449-7.944-.52-2.359.927-3.012 3.23-1.86 4.258l-.04.098c1.9.999 3.592-.67 5.08-1.9-.106.64.168 1.142.563 1.51.91.48 2.065.694 3.075.404.335-.096.725-.194 1.02-.363-.048-.016-.094-.035-.142-.05.049.015.095.034.141.05a.987.987 0 0 0 .36-.324Zm-4.809-2.51c-.012-.383-.759.153-.882.285-.91 1.475-2.714 2.803-3.948 2.09-.086-.05-.278-.102-.256-.228-.387-.64.155-2.088 1.2-2.583 2.195-1.595 5.378-1.779 7.524-.475.156.096.306.258.431.392.501.537.885 1.315.71 2.138-.124.132-.242.39-.366.524-.557.284-1.159.34-1.74.367-.615.028-1.204.01-1.66-.334-.43-.324-.473-.937-.644-1.585-.053-.205-.336-.377-.369-.592Z",
+    fill: "#FFD931"
+  }), _jsx("path", {
+    d: "M17.482 5.753c-.148-.818-.88-2.273-2.224-3.012.288.544.5 1.11.511 1.655.615.407 1.088 1.04 1.728 1.37l-.015-.013ZM14.874 6.09c-.296.168-.686.267-1.02.362-1.01.29-2.164.076-3.074-.403-.396-.369-.67-.87-.563-1.511-.11.091-.277.059-.375.166-1.109 1.225-2.945 2.66-4.706 1.734a10.494 10.494 0 0 0-.66 2.541c2.07-3.16 7.024-3.256 9.682-1.134 1.055.985-.03 2.808.406 4.324.21.727 1.117.638 1.79.238l-.028-.012c.613-1.17 1.31-3.587 1.353-3.747a.406.406 0 0 1 .034-.097c-.658-1.08-1.609-2.017-2.84-2.461Zm1.918 3.873c.118.524-.224 1.617-.857 1.265-.133-.123.061-.473.053-.729.107-.234.436-.716.804-.536Z",
+    fill: "#E4051F"
+  }), _jsx("path", {
+    d: "M17.805 8.612c.067.093.303-1.382.277-1.669-.027-.284-.009-.662-.585-1.177-.64-.33-1.179-1.05-1.793-1.458.008.48-.073 1.033-.47 1.458a.984.984 0 0 1-.36.324c1.23.443 2.182 1.381 2.839 2.462.023-.037.046-.006.092.06Z",
+    fill: "#925F1A"
+  }), _jsx("path", {
+    d: "M6.11 15.992c-.304-.708-.166-.621-.292-.888.152.006.308.014.463.023.275 1.018 1.482 1.53 2.434 1.255.593-.261 1.027-.613 1.26-1.209.793-.209 1.423-.763 1.96-1.583a.527.527 0 0 0-.438-.052c1.03-1.18 1.556-2.814.923-4.303-.136-.25-.272-.5-.531-.618-.642-.105-1.05-.098-1.55.175-1.564 1.164-1.42 3.112-.765 4.716-.654-.159-1.306-.35-1.947-.45.558-.565.74-1.282.738-2.023-.004-.83-.256-1.688-.807-2.266-.261-.119-.766.027-1.016.163-.82 1.132-1.024 2.952-.096 4.077-.428.043-.846.161-1.255.398l-.1-.326s-.028-.014-.083-.019c-.324-1.689-.052-3.458.979-4.484.863-.86 2.813-1.583 4.71-1.193.77.1 1.406.077 2.056.438.387.115.911.479.92.733.423 1.583-.861 4.995 1.645 4.816a.4.4 0 0 0-.071.104c.167-.047.189-.094.327-.024-1.267 2.045-2.154 3.19-4.388 3.598-.833.275-3.663.976-4.658-.367a8.142 8.142 0 0 1-.418-.691Z",
+    fill: "#FFD931"
+  }), _jsx("path", {
+    d: "M16.354 12.407c-.673.4-1.58.49-1.79-.238-.435-1.516.649-3.34-.406-4.324C11.5 5.723 6.546 5.818 4.477 8.979c-.201 1.5-.066 2.764.188 3.088l-.017.007c.194.297.257.672.334 1.058l.028.002c-.327-1.709-.025-3.417.98-4.493 1.044-1.122 2.833-1.57 4.71-1.185.768.1 1.406.077 2.056.438.386.115.91.479.919.734.317 1.186-.497 3.5.219 4.458.239.318.8.401 1.427.357.071-.08.239-.048.35-.088.336-.116.72-.203.889-.546a.129.129 0 0 1 0-.088c.043-.093-.005-.226-.206-.314Z",
+    fill: "#E4051F"
+  }), _jsx("path", {
+    d: "M14.463 13.424s.607.083 1.037.044c-.12.487-1.32 2.286-1.599 2.478-.279.19-2.16.952-2.328.984.628-.645 2.005-1.604 2.89-3.506Z",
+    fill: "#925F1A"
+  }), _jsx("path", {
+    d: "m14.4 16.581-.025-.041-.072.09a1.96 1.96 0 0 1 .098-.049Z",
+    fill: "#BA101C"
+  }), _jsx("path", {
+    d: "M14.255 16.297c-.04.031-.079.062-.118.098.039-.037.078-.067.118-.098a2.127 2.127 0 0 1-.097-.305c-.041-.19-1.986.887-3.766 1.245-1.78.358-3.733.006-3.733.006-.04.607.35.737.35.737l-.01.025c1.04.186 2.12.25 3.122.315-1.08.366-2.268.36-3.464.462.016.357.171.95.103 1.59-.543 1.863.033 1.673.239 2.065.204.393.822.902.831.882 0-.002.095-.06.254-.156.946-.906 1.791-1.89 2.745-2.827.62-.531 1.239-1.063 1.985-1.599-.764.027-1.388.43-2.157.329 1.208-.784 2.668-1.22 3.645-2.436l-.03.014c.01-.006.02-.01.03-.014l.072-.091a1.657 1.657 0 0 1-.12-.242Z",
+    fill: "#E4051F"
+  }), _jsx("path", {
+    d: "M7 18.005a1.99 1.99 0 0 1-.287.491c-.049.058-.061.158-.056.286 1.196-.101 2.383-.096 3.464-.462-1.002-.066-2.081-.13-3.122-.315ZM14.514 16.694a.35.35 0 0 1-.113-.113 1.88 1.88 0 0 0-.098.05c-.977 1.215-2.437 1.651-3.644 2.436.768.1 1.392-.302 2.157-.33-.747.536-1.366 1.069-1.986 1.6-.953.936-1.798 1.92-2.745 2.826.844-.514 3.526-2.155 4.1-2.893.683-.876 1.971-2.851 2.325-3.16.357-.308.164-.336.004-.416Z",
+    fill: "#BA101C"
+  }), _jsx("path", {
+    d: "m14.38 16.59.02.023c.199.206.278.308.278.308s.07.108.278.272c1.062.195 2.131.353 3.294.078-1.255-.453-2.644-1.26-3.87-.68Z",
+    fill: "#BA101C"
+  }), _jsx("path", {
+    d: "M16.735 15.961a1.12 1.12 0 0 0 .085-.044c-.947-.146-1.915-.174-2.623.426.039.066.092.144.158.219.013-.017.028-.032.04-.05-.012.018-.027.033-.04.05l.024.028c1.226-.58 2.615.229 3.87.681-1.163.275-2.233.117-3.294-.078.2.158.528.37 1.046.587 1.619.7 2.907-.062 3.17-.523-.05-.29-1.433-1.13-2.436-1.296ZM18.025 14.083s-1.819.383-2.64.85a3.654 3.654 0 0 0-1.008.873c1.14-.368 2.273-.984 3.477-1.306.109-.244.171-.417.171-.417Z",
+    fill: "#E4051F"
+  }), _jsx("path", {
+    d: "M14.377 15.806a3.176 3.176 0 0 0-.263.366s.028.073.085.171c.708-.6 1.675-.572 2.622-.426.457-.271.83-.966 1.034-1.417-1.205.322-2.338.938-3.478 1.306Z",
+    fill: "#BA101C"
+  }), _jsx("path", {
+    d: "M8.323 15.608c-.426 0-1.133-.142-1.756-.27-.46-.092-.893-.18-1.075-.18-.203 0-.517.084-.77.15-.383.1-.599.15-.688.03a.179.179 0 0 1-.027-.156c.334-1.446 1.562-2.386 3.127-2.386.483 0 .969.098 1.404.28 1.177.496 1.604.667 2.003.667.137 0 .28-.02.488-.069.097-.09.386-.34.646-.34.147 0 .266.077.338.216.068.132.082.246.042.346-.059.15-.217.207-.355.257a.825.825 0 0 0-.167.072c-.56 1.092-2.244 1.281-2.967 1.364l-.081.01a1.272 1.272 0 0 1-.162.01Zm-2.834-.734c.213 0 .64.085 1.134.186.683.138 1.47.3 1.827.256l.086-.01c.683-.077 2.28-.258 2.757-1.235l.035-.044c.078-.07.18-.105.277-.14.065-.024.174-.063.187-.095.004-.01.002-.045-.032-.112-.028-.054-.057-.058-.084-.058-.13 0-.356.165-.475.284l-.028.028-.04.01c-.25.06-.421.085-.592.085-.454 0-.898-.178-2.113-.689a3.362 3.362 0 0 0-1.294-.258c-1.052 0-2.397.536-2.815 2.031.092-.018.214-.05.331-.08.282-.074.602-.16.84-.16Z",
+    fill: "#1D1A1E"
+  }), _jsx("path", {
+    d: "M8.105 16.605c-1.418 0-1.935-1.4-1.94-1.417l.268-.096c.022.062.554 1.49 2.085 1.187a1.564 1.564 0 0 0 1.246-1.104l.279.06c-.01.043-.25 1.083-1.47 1.324a2.49 2.49 0 0 1-.468.046ZM6.44 13.103c-.034-.025-.83-.622-.65-2.274.176-1.594.919-2.256 1.534-2.198.59.056 1.206 1.207 1.081 2.553-.123 1.32-.547 1.811-.565 1.83l-.213-.188c.003-.003.381-.455.494-1.67.116-1.26-.466-2.207-.825-2.241-.402-.04-1.059.447-1.223 1.945-.162 1.474.506 1.99.534 2.012l-.167.23ZM10.584 14.035l-.055-.28c.01-.002.942-.21 1.674-1.64.506-.988.327-2.064.022-2.683-.185-.375-.43-.622-.66-.664-.473-.087-1.634-.075-2.219 1.91-.473 1.606.303 2.696.464 2.898l-.22.181c-.18-.225-1.03-1.418-.517-3.16.67-2.27 2.115-2.188 2.543-2.11.322.06.637.358.864.818.336.68.53 1.858-.023 2.939-.8 1.564-1.83 1.783-1.873 1.79Z",
+    fill: "#1D1A1E"
+  }), _jsx("path", {
+    d: "M7.634 11.802c.016.289-.113.53-.287.54-.175.009-.331-.215-.349-.502-.016-.288.112-.53.288-.539.175-.01.331.214.348.501Z",
+    fill: "#1D1A1E"
+  }), _jsx("path", {
+    d: "M7.517 11.9c.017.088-.022.169-.083.181-.063.012-.127-.05-.143-.138-.016-.088.021-.17.083-.182.062-.01.127.052.143.139Z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M11.371 12.017c-.029.299-.2.526-.383.507-.182-.017-.306-.274-.277-.573.03-.3.202-.527.384-.508.182.02.306.275.276.574Z",
+    fill: "#1D1A1E"
+  }), _jsx("path", {
+    d: "M11.236 12.099c.002.093-.05.17-.116.172-.066.002-.121-.072-.125-.166-.001-.093.05-.17.116-.172.066-.002.121.074.124.166Z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "m7.289 14.02-.172-.226c.214-.162.488-.237.772-.21l-.025.283a.828.828 0 0 0-.575.154Z",
+    fill: "#1D1A1E"
+  }), _jsx("path", {
+    d: "M14.964 13.671c-.436 0-.812-.16-1.092-.471-.683-.752-.425-2.31-.237-3.448.031-.188.06-.363.082-.516.127-.909-.917-1.238-1.837-1.527l-.047-.015c-.595-.188-3.267-.54-5.05.458-.771.43-1.266 1.058-1.47 1.87-.343 1.358-.17 2.645.038 3.485l-.278.068a7.396 7.396 0 0 1-.079-.356c-.074-.154-.947-2.031-.757-3.583.187-1.522 1.644-2.752 3.712-3.134 1.831-.34 4.23.044 5.554.576 1.37.551 1.379 1.524 1.258 2.646-.032.29-.074.553-.115.806-.116.734-.2 1.265.085 1.668.182.26.427.342.6.364.272.038.515-.045.6-.115.158-.13.53-.281.707-.12.127.117.1.309-.082.573-.28.407-.899.73-1.472.768-.039.002-.08.004-.12.004ZM9.89 7.199c.945 0 1.732.132 2.03.225l.046.015c.977.307 2.193.69 2.033 1.837-.023.158-.052.333-.083.524-.169 1.02-.423 2.561.166 3.21.312.344.707.394.986.375.55-.037 1.058-.36 1.255-.645a.685.685 0 0 0 .105-.198.623.623 0 0 0-.314.127c-.144.12-.463.226-.82.178a1.136 1.136 0 0 1-.795-.481c-.35-.5-.254-1.108-.132-1.878.039-.25.08-.508.111-.793.117-1.074.108-1.871-1.08-2.349-1.306-.525-3.681-.877-5.395-.56C6.088 7.14 4.689 8.3 4.52 9.674c-.097.787.107 1.686.325 2.367a7.024 7.024 0 0 1 .191-2.087c.225-.89.765-1.578 1.608-2.05.976-.547 2.206-.706 3.245-.706ZM7.231 17.42c-.05-.036-1.234-.893-1.62-2.332l.275-.073c.358 1.338 1.5 2.165 1.51 2.174l-.165.232Z",
+    fill: "#1D1A1E"
+  }), _jsx("path", {
+    d: "m16.312 12.509-.227-.173c.012-.015 1.118-1.483 1.424-3.91l.283.035c-.317 2.51-1.434 3.987-1.48 4.048ZM17.443 5.945c-.229-1.131-1.05-2.701-2.615-3.4l.116-.26c1.663.743 2.536 2.406 2.778 3.602l-.279.058ZM4.613 9.16l-.285-.012c.002-.048.057-1.188.696-2.873l.267.1c-.622 1.64-.678 2.773-.678 2.786Z",
+    fill: "#1D1A1E"
+  }), _jsx("path", {
+    d: "M6.414 6.801c-.064 0-.128 0-.193-.004-.654-.029-1.133-.258-1.427-.68-.348-.5-.399-1.253-.138-2.067C5.323 1.97 9.07 1 11.393 1c.487 0 .918.043 1.247.124 2.023.5 2.953 1.457 3.21 3.303.072.504-.048.936-.354 1.287-.732.841-2.266.907-2.72.907-.298 0-.594-.022-.851-.066-.804-.133-1.413-.444-1.712-.877a1.032 1.032 0 0 1-.182-.798c.033-.163.01-.234 0-.247-.037.006-.232.105-.492.543-.445.75-1.53 1.625-3.125 1.625Zm4.979-5.516c-2.327 0-5.868.99-6.465 2.852-.234.73-.197 1.39.1 1.817.239.345.646.533 1.206.56 1.468.064 2.602-.711 3.06-1.483.256-.43.528-.677.748-.677.084 0 .16.035.212.099.082.101.101.264.058.483a.742.742 0 0 0 .136.579c.255.37.796.64 1.524.759.242.04.52.062.805.062 1.128 0 2.064-.303 2.505-.81.25-.287.346-.643.287-1.06-.243-1.733-1.083-2.592-2.998-3.066a5.165 5.165 0 0 0-1.178-.115Z",
+    fill: "#1D1A1E"
+  }), _jsx("path", {
+    d: "M6.23 5.988c-.425 0-.753-.117-.948-.338-.163-.186-.227-.428-.191-.723.237-1.916 1.94-3.059 5.207-3.494 1.806-.241 3.363.231 4.306 1.291.532.6.82 1.344.748 1.946-.121 1.04-1.318 1.16-2.205 1.16-.305 0-.603-.016-.867-.03l-.17-.008c-1.285-.065-1.388-1.36-1.439-1.981-.026-.332-.274-.45-.496-.45-.275 0-.666.178-.861.678-.453 1.166-1.96 1.95-3.085 1.95Zm4.995-4.335c-.286 0-.585.021-.889.062-4.638.618-4.881 2.597-4.962 3.248-.027.209.015.377.12.497.141.158.395.242.735.242 1.009 0 2.415-.724 2.819-1.765.248-.637.762-.861 1.127-.861.432 0 .746.286.781.711.064.808.214 1.672 1.17 1.72l.169.009c.26.014.555.03.853.03 1.238 0 1.85-.29 1.922-.91.061-.514-.206-1.189-.678-1.721-.724-.814-1.848-1.262-3.167-1.262ZM17.839 8.81a.168.168 0 0 1-.048-.007c-.11-.03-.163-.139-.242-.306a1.946 1.946 0 0 0-.246-.414 8.48 8.48 0 0 0-2.363-1.929l.139-.25a8.745 8.745 0 0 1 2.44 1.993c.128.149.213.323.28.464.077-.53.137-1.777.096-1.937-.081-.15-1.206-1.09-2.243-1.905l.176-.224c1.035.813 2.28 1.83 2.341 2.058.006.017.028 2.255-.225 2.424a.182.182 0 0 1-.105.033Z",
+    fill: "#1D1A1E"
+  }), _jsx("path", {
+    d: "M16.139 10.321c.268-.511.628-.462.708-.26.08.2.08.546-.298.962-.376.417-.937.303-.41-.702Z",
+    fill: "#B7D3E0"
+  }), _jsx("path", {
+    d: "M16.141 11.393a.338.338 0 0 1-.296-.161c-.123-.2-.065-.53.17-.976.226-.434.503-.48.611-.48.159 0 .299.09.356.232.062.157.157.58-.324 1.111-.157.172-.35.274-.517.274Zm.484-1.333c-.09 0-.232.086-.359.328-.27.516-.189.68-.179.696.006.009.015.025.054.025.066 0 .185-.048.305-.18.373-.412.314-.707.27-.815-.014-.034-.047-.054-.09-.054ZM6.095 8.774a.14.14 0 0 1-.102-.043.142.142 0 0 1 .002-.2c.776-.765 1.798-.352 1.84-.333.073.03.107.113.077.186a.143.143 0 0 1-.186.077c-.036-.015-.893-.358-1.531.272a.142.142 0 0 1-.1.041ZM12.821 9.201a.144.144 0 0 1-.143-.138c-.02-.692-.224-1.152-.602-1.368-.82-.469-2.228.294-2.241.302a.145.145 0 0 1-.195-.058.142.142 0 0 1 .057-.193c.063-.034 1.56-.845 2.52-.3.47.27.722.811.746 1.608a.142.142 0 0 1-.138.147h-.004ZM10.193 17.375l-.045-.28c1.131-.185 1.788-.702 1.795-.708 1.58-1.089 2.48-2.983 2.489-3.003l.258.121c-.039.082-.942 1.983-2.577 3.111-.02.017-.715.564-1.92.76ZM13.407 16.401l-.157-.238c.576-.38 1.194-1.177 1.2-1.185.336-.45.92-1.536.926-1.547l.25.135c-.023.044-.6 1.114-.95 1.585-.026.036-.653.845-1.269 1.25Z",
+    fill: "#1D1A1E"
+  }), _jsx("path", {
+    d: "M8.116 21.62a.24.24 0 0 1 .036-.016c.002-.051.019-.094.092-.106-.073.013-.09.055-.092.106 1.129-.509.298-1.128.589-1.866.047-.173.284-.424.509-.605l-.067-.08c-.2.037-.6.107-.727.229-1.007.816-1.125 2.227-.304 2.378-.001-.019-.002-.039 0-.056a.24.24 0 0 0-.036.015Z",
+    fill: "#0084C7"
+  }), _jsx("path", {
+    d: "m9.256 19.138.288.344c-.106-.125-.211-.252-.288-.344a.048.048 0 0 0-.006-.006c-.224.181-.434.404-.48.577-.292.737.51 1.386-.618 1.894a.515.515 0 0 0 0 .057.862.862 0 0 0 .236.009c1.072-.092 1.7-2.085.868-2.53Z",
+    fill: "#E4051F"
+  }), _jsx("path", {
+    d: "M9.073 19.244c.961.108.217 2.341-.642 2.337-1.412-.009-.495-2.346.642-2.337.163.001.163-.252 0-.254-1.445-.01-2.432 2.616-.642 2.845 1.164.149 1.997-2.693.642-2.845-.162-.018-.16.235 0 .254Z",
+    fill: "#B7D3E0"
+  }), _jsx("path", {
+    d: "M9.26 19.098c-.291.184-.52.44-.64.766-.229.63.319 1.183-.433 1.62-.14.08-.014.3.128.216.385-.222.573-.495.564-.945-.006-.28-.067-.545-.015-.825.049-.252.316-.483.525-.614.138-.086.01-.305-.128-.218Z",
+    fill: "#B7D3E0"
+  }), _jsx("path", {
+    d: "m7.981 20.5.307-.07c.1-.021.22-.022.266-.13.098-.236.085-.558-.233-.57-.27-.012-.447.365-.506.576-.077.271.022.563.34.56.164-.002.164-.254 0-.253-.245.002-.042-.4.024-.5.015-.023.17-.196.18-.109.01.076-.02.16-.05.23l.089-.088-.484.11c-.158.037-.092.28.067.244ZM9.33 19.58c-.328.052-.481.37-.451.674.008.078.07.809.333.63.134-.09.007-.309-.128-.218-.018.012.117-.02.142.021-.014-.022-.018-.051-.027-.076a1.903 1.903 0 0 1-.074-.475.311.311 0 0 1 .271-.311c.161-.026.093-.27-.067-.245Z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "m9.04 20.375.358-.087c.158-.04.091-.283-.067-.243-.12.028-.239.057-.358.087-.158.04-.09.283.067.243Z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M7.832 23.463a.14.14 0 0 1-.11-.052c-.023-.028-.094-.089-.17-.153-.438-.375-1.466-1.256-1.052-2.365.34-.908.223-1.453.128-1.892a3.723 3.723 0 0 1-.07-.385c-.025-.232.166-.418.295-.515l-.064-.147a.141.141 0 0 1-.013-.067.695.695 0 0 1-.19-.205.706.706 0 0 1-.064-.477.141.141 0 0 1 .16-.103c4.264.659 7.351-1.361 7.382-1.383a.148.148 0 0 1 .136-.012c.044.019.076.06.084.108.045.287.123.582.174.664l.027.004c.175.029.414.066.454.244.037.162-.126.273-.18.311-.88.69-1.372 1.524-1.846 2.33-.488.83-.95 1.611-1.788 2.145a73.168 73.168 0 0 1-3.224 1.931.156.156 0 0 1-.07.019Zm-.661-5.344a.142.142 0 0 1-.068.158c-.112.065-.272.207-.261.308.01.112.037.231.064.356.102.475.23 1.066-.139 2.052-.345.922.544 1.683.971 2.048.045.039.084.072.115.101a73.538 73.538 0 0 0 3.12-1.87c.78-.497 1.223-1.25 1.694-2.049.487-.83.993-1.686 1.923-2.415a.068.068 0 0 0 .016-.012c-.058-.015-.132-.027-.167-.033-.027-.004-.05-.007-.067-.011-.064-.013-.207-.043-.334-.687-.727.42-3.543 1.86-7.244 1.339.006.043.02.094.047.15.064.128.851.755 3.041.635.077-.009.146.055.15.134a.142.142 0 0 1-.134.15c-1.36.077-2.222-.124-2.727-.354Z",
+    fill: "#1D1A1E"
+  }), _jsx("path", {
+    d: "M11.126 18.982a.143.143 0 0 1-.13-.08.143.143 0 0 1 .07-.19c1.566-.738 3.131-2.142 3.146-2.158a.142.142 0 0 1 .201.012.142.142 0 0 1-.01.201c-.015.015-1.613 1.445-3.217 2.203a.155.155 0 0 1-.06.012Z",
+    fill: "#1D1A1E"
+  }), _jsx("path", {
+    d: "M17.56 18.224c-1.46 0-2.986-1.215-3.055-1.27l.18-.221c.016.013 1.739 1.38 3.163 1.187.458-.062.84-.282 1.138-.654a3.787 3.787 0 0 0-4.64-.897l-.142-.247c.028-.015 2.765-1.531 5.074 1.04l.076.086-.066.093c-.356.494-.829.785-1.403.861a2.336 2.336 0 0 1-.325.022Z",
+    fill: "#1D1A1E"
+  }), _jsx("path", {
+    d: "m14.277 16.07-.239-.156c.045-.068 1.118-1.672 3.973-1.972l.2-.021-.048.197c-.224.905-.572 1.338-1.176 1.865l-.188-.214c.524-.457.827-.818 1.034-1.52-2.557.341-3.546 1.807-3.556 1.821Z",
+    fill: "#1D1A1E"
+  })]
+});
+export const Chairlift = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "M10.2 0h-.75v12.3l.75-.225V0Zm11.175 15.975-.675.225c.225.525-.075 1.05-.6 1.2L3.75 23.025l.225.6 16.275-5.55a1.65 1.65 0 0 0 1.05-2.1h.075ZM7.8 18.075l.975-.15 2.1-.675c1.125-.3.675-1.65-.375-1.35l-2.025.6-.675.075c-.75 0-1.5-.45-1.8-1.05l-1.5-3.15c-.525-.975-1.8-.3-1.275.75l1.5 3a3.525 3.525 0 0 0 3.15 1.95H7.8Zm-3.3-7.05L6.6 15a1.5 1.5 0 0 0 1.8.75l3.675-1.05v3.6c0 1.275 1.875 1.275 1.875 0v-4.95c0-.75-.825-1.425-1.425-1.2L9 13.125 7.125 9.6c-.9-1.65-3.45-.3-2.55 1.5l-.075-.075ZM5.175 8.7A1.725 1.725 0 1 0 4.2 5.4a1.731 1.731 0 1 0 1.05 3.3h-.075Z"
+  })
+});
+export const CableCar = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "M12.725 10.834V6.838l-.96.278v3.718H5.178a1.766 1.766 0 0 0-1.306.503 1.806 1.806 0 0 0-.547 1.302v6.944c0 .972.824 1.736 1.853 1.736h14.065c.96 0 1.853-.764 1.853-1.736V12.64c0-.972-.892-1.805-1.853-1.805h-6.518Zm9.94-8.153L1.051 9.555l.352.932 21.544-6.944-.284-.862Zm-3.147 13.847c0 .486-.412.833-.961.833h-2.47c-.48 0-.892-.347-.892-.833v-3.264c0-.486.412-.902.892-.902h2.47c.549 0 .96.416.96.902v3.264Zm-5.283 0c0 .486-.412.833-.961.833h-2.401c-.55 0-.96-.347-.96-.833v-3.264c0-.486.41-.902.96-.902h2.401c.549 0 .96.416.96.902v3.264Zm-5.283 0c0 .486-.412.833-.892.833H5.59c-.55 0-.96-.347-.96-.833v-3.264c0-.486.41-.902.96-.902H7.99c.48 0 .892.416.892.902v3.264h.069Z"
+  })
+});
+export const MeetingPoint = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "m20.832 19.334-2.845-2.846.974-.974a.524.524 0 0 0-.375-.898h-3.442c-.3 0-.524.224-.524.524v3.445a.524.524 0 0 0 .898.374l.973-.973 2.844 2.845c.15.225.524.225.748 0l.749-.748c.224-.225.224-.6 0-.75ZM8.857 14.616H5.414a.524.524 0 0 0-.374.898l.972.974-2.844 2.846c-.224.15-.224.524 0 .749l.749.748c.224.225.599.225.748 0l2.844-2.845.973.973a.523.523 0 0 0 .898-.374V15.14c0-.3-.224-.524-.523-.524ZM12 9.373a2.619 2.619 0 0 0-2.42 3.625A2.622 2.622 0 0 0 12 14.616a2.62 2.62 0 0 0 2.62-2.622A2.622 2.622 0 0 0 12 9.374Zm8.832-5.467-.749-.749a.524.524 0 0 0-.748 0L16.49 6.003l-.973-.973a.524.524 0 0 0-.899.374V8.85c0 .3.225.524.524.524h3.443a.523.523 0 0 0 .375-.898l-.973-.974 2.844-2.846c.224-.15.224-.524 0-.749ZM9.006 4.88a.524.524 0 0 0-.524.15l-.973.973-2.844-2.846a.524.524 0 0 0-.748 0l-.749.75c-.224.224-.224.598 0 .748l2.844 2.846-.972.974a.524.524 0 0 0 .374.898h3.443c.299 0 .523-.224.523-.524V5.404c0-.225-.15-.45-.299-.524h-.075Z"
+  })
+});
+export const CrossCountry = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "M23.406 20.07h.562s-.157.869-.788.93H9.553v-.538H23.15c.106 0 .256-.385.256-.385v-.007Zm-5.178-.17 5.065-10.57.503.215-5.02 10.356h-.556.008ZM3.782 11.284l7.7 7.895c.075.077.45-.085.45-.085l.39.408s-.705.5-1.193.084l-8.105-8.303H.248L0 10.768l2.521-.007-1.02-1.046.375-.384 1.396 1.43 8.224-.023.03.56-7.736-.014h-.008ZM18.31 19.37a.894.894 0 0 1-.387.559.856.856 0 0 1-.66.114.875.875 0 0 1-.545-.397.913.913 0 0 1-.111-.676l.848-3.851-2.086-2.076-1.794 2.045s-.285.369-1.05.338l-3.64.008a.857.857 0 0 1-.556-.187.905.905 0 0 1-.138-1.27.865.865 0 0 1 .701-.319h3.122l4.623-5.481-1.2-.008-2.102 2.483a.66.66 0 0 1-.755.216.678.678 0 0 1-.326-.258.704.704 0 0 1-.12-.404.708.708 0 0 1 .225-.515l2.26-2.668a.678.678 0 0 1 .524-.253h3.28c.232 0 .45.092.615.253l2.086 2.138 1.726-1.769a.687.687 0 0 1 .942.036.723.723 0 0 1 .049.964l-2.079 2.152c-.638.654-1.148.108-1.148.108L19.338 9.33l-2.003 2.375 1.83 1.876s.39.37.173 1.1l-1.028 4.69ZM19.85 7.216a1.573 1.573 0 0 1-.57-.269 1.615 1.615 0 0 1-.423-.472 1.656 1.656 0 0 1-.182-1.245c.052-.21.143-.406.27-.579.127-.173.286-.318.468-.427a1.565 1.565 0 0 1 1.217-.168c.404.111.748.38.96.75.21.369.272.809.17 1.224-.103.415-.36.772-.718.994-.358.222-.786.29-1.192.192Z"
+  })
+});
+export const AlpineSki = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "M20.385 4.245a1.892 1.892 0 0 0-.982-1.068 1.908 1.908 0 0 0-2.528.915 1.886 1.886 0 0 0-.063 1.448c.173.472.526.856.983 1.068.457.213.98.235 1.454.063a1.898 1.898 0 0 0 1.249-1.696 1.887 1.887 0 0 0-.113-.73ZM18.39 19.271c.294.141.577.4.441.698a1.784 1.784 0 0 1-1.013.924 1.799 1.799 0 0 1-1.372-.063l-12.1-5.571a.6.6 0 0 1 .05-1.104.598.598 0 0 1 .459.022l5.835 2.702 2.374-2.578-3.07-2.759a1.166 1.166 0 0 1-.25-.855c.035-.322.198-.603.453-.805l-1.583-.699c-.419.225-.78.254-1.08.096l.283-.518-.283-.124c-.3-.14-.452-.4-.351-.562.102-.17.34-.282.639-.141l.3.14.243-.49c.322.079.514.36.588.845.543.253.639.35 1.51.754a9.88 9.88 0 0 1 .887-.754C12.706 7.37 14.753 5.85 14.9 5.794c.271-.101.622-.023 1.035.366.147.135.384.433.707.895L17.66 8.3l.39 3.113 1.3.732c.509.282.678.873.435 1.233-.35.507-.797.603-1.402.327.017 0-.803-.366-2.448-1.12-1.68-.822-2.545-1.245-2.578-1.273l-.3.231 2.307 2.01a1.163 1.163 0 0 1 .147 1.233l-2.855 3 4.297 1.971a.592.592 0 0 0 .791-.287c.141-.298.34-.332.639-.191l.006-.006Zm-4.41-8.484 2.126 1.024-.379-2.364-1.742 1.34h-.005Z"
+  })
+});

package/es/common/components/editable-map/index.js

@@ -0,0 +1,37 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import dynamic from "next/dynamic";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Map = dynamic(() => import("./editable-map"), {
+  ssr: false
+});
+
+const EditableMap = () => {
+  const [formats, setFormats] = React.useState([]);
+  React.useEffect(() => {
+    setTimeout(() => {
+      const elements = document.querySelectorAll("section.open-street-map");
+
+      if (elements.length) {
+        const formats = Array.from(elements).map(element => {
+          const isInDialog = Boolean(element?.closest("dialog"));
+          const storedPresets = element.dataset.presets;
+          const presets = storedPresets ? JSON.parse(storedPresets) : {};
+          element.innerHTML = "";
+          return {
+            element,
+            isInDialog,
+            presets
+          };
+        });
+        setFormats(formats);
+      }
+    }, 200);
+  }, []);
+  if (!formats.length) return null;
+  return formats.map(format => ReactDOM.createPortal(_jsx(Map, {
+    format: format
+  }), format.element));
+};
+
+export default EditableMap;

package/es/common/components/editable-map/markers.js

@@ -0,0 +1,129 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom/server";
+import * as L from "leaflet";
+import { Marker, Popup, Tooltip, useMapEvents } from "react-leaflet";
+import { useUbloContext } from "ublo/with-ublo";
+import Button from "dt-design-system/es/button";
+import EditForm from "./edit-form";
+import * as Icons from "./icons";
+import css from "./markers.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_MARKER_DATA = {
+  icon: "Location",
+  title: "Nouveau point d'intérêt",
+  description: "Description du point d'intérêt",
+  url: "",
+  label: ""
+};
+
+const Markers = ({
+  mapRef,
+  markers,
+  setMarkers,
+  setCenter,
+  setZoom
+}) => {
+  const {
+    cmsMode
+  } = useUbloContext();
+  const ids = markers.map(m => m.id);
+  const newId = ids.length ? Math.max(...ids) + 1 : 1;
+
+  const addMarker = e => {
+    const hasAnOpenedPopup = Boolean(mapRef.current?.getContainer().querySelector(".leaflet-popup"));
+    if (cmsMode !== "editing" || hasAnOpenedPopup) return;
+    setMarkers([...markers, {
+      id: newId,
+      ...DEFAULT_MARKER_DATA,
+      position: e.latlng
+    }]);
+  };
+
+  useMapEvents({
+    dragend(e) {
+      setCenter(e.target.getCenter());
+    },
+
+    zoomend(e) {
+      setZoom(e.target.getZoom());
+    },
+
+    click(e) {
+      addMarker(e);
+    }
+
+  });
+  return markers.map(marker => {
+    const popupRef = React.createRef();
+    const {
+      id,
+      icon,
+      title,
+      description,
+      url,
+      label,
+      position
+    } = marker;
+    const Icon = Icons[icon];
+
+    const updatePosition = e => {
+      setMarkers(currents => {
+        return currents.map(marker => {
+          if (marker.id === id) {
+            return { ...marker,
+              position: e.target.getLatLng()
+            };
+          }
+
+          return marker;
+        });
+      });
+    };
+
+    const formatedDescription = description.replace(/\n/g, "<br />");
+    return _jsxs(Marker, {
+      draggable: cmsMode === "editing",
+      eventHandlers: {
+        dragend(e) {
+          updatePosition(e);
+        }
+
+      },
+      position: position,
+      icon: L.divIcon({
+        className: css.markerIcon,
+        html: ReactDOM.renderToString(_jsx(Icon, {}))
+      }),
+      children: [cmsMode !== "editing" && _jsx(Tooltip, {
+        sticky: true,
+        children: title
+      }), _jsx(Popup, {
+        ref: popupRef,
+        children: cmsMode === "editing" ? _jsx(EditForm, {
+          popupRef: popupRef,
+          marker: marker,
+          setMarkers: setMarkers
+        }) : _jsxs("div", {
+          className: css.data,
+          children: [_jsx("div", {
+            className: css.title,
+            children: title
+          }), formatedDescription && _jsx("div", {
+            className: css.description,
+            dangerouslySetInnerHTML: {
+              __html: formatedDescription
+            }
+          }), url?.trim() && _jsx(Button, {
+            tag: "a",
+            href: url.trim(),
+            className: css.link,
+            children: label || "En savoir plus"
+          })]
+        })
+      })]
+    }, id);
+  });
+};
+
+export default Markers;

package/es/common/components/editable-map/markers.module.css

@@ -0,0 +1,34 @@
+.markerIcon > svg {
+  width: 34px;
+  height: 34px;
+  fill: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+  transform: translate(-35%, -65%);
+}
+
+.data {
+  max-width: 280px;
+  max-height: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-family: var(--ds-sans-serif-font, "Open Sans", sans-serif);
+  overflow: auto;
+}
+
+.title {
+  position: sticky;
+  top: 0;
+  padding: 4px 0;
+  font-size: 17px;
+  font-weight: 700;
+  background-color: var(--ds-grey-000, #fff);
+}
+
+.description {
+  font-size: 15px;
+}
+
+.link {
+  margin-top: 6px;
+  color: var(--ds-grey-000, #fff) !important;
+}

package/es/esf/hooks/use-booking-links.js

@@ -4,7 +4,7 @@ import { loadJS } from "../../common/utils/load-js";
 import * as Plausible from "../../common/components/plausible";
 
 const closeAllDialogs = e => {
-  const cart = e.target.closest("[onclick~='openBoutiqueESF']");
+  const cart = e.target.closest("[onclick^='openBoutiqueESF(']");
   if (!cart) return;
   const dialogs = document.querySelectorAll("dialog");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "peerDependencies": {
     "dt-design-system": "^2.1.0",
     "next": "^12.0.0",