@blateral/b.kit 2.3.2-beta.1.0 → 2.4.0

package/esm/sections_pois.js

@@ -1,719 +0,0 @@
-import { a as __makeTemplateObject, _ as __assign, L as LocationPin, s as CurrentLocation, t as MyLocation, C as Cross, f as __awaiter, g as __generator } from './ClockFilled-6bae80dc.js';
-import React__default, { useMemo, useState, useCallback, useEffect } from 'react';
-import styled, { css } from 'styled-components';
-import { S as Section, m as mapToBgMode, W as Wrapper } from './Wrapper-1cac758b.js';
-import { I as Image } from './Image-301c4433.js';
-import { H as Heading, C as Copy } from './Copy-bca0854c.js';
-import { s as spacings, m as mq, w as withRange, g as getColors, e as getSVGDataImg } from './styles-c387bdc6.js';
-import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-acf2e2bb.js';
-import { G as Grid } from './Grid-172051a9.js';
-import { I as InfoList } from './InfoList-762f2b14.js';
-import { P as POIFacts, a as POICard } from './POICard-584a229c.js';
-import { i as isValidArray } from './arrays-65b644ef.js';
-import { F as FilterField } from './FilterField-5f76c113.js';
-import { u as useUpdateEffect } from './useUpdateEffect-824c0c84.js';
-import { e as escapeRegExp } from './escape-cbff9c25.js';
-import { u as useMounted } from './useMounted-1e4cc87b.js';
-import { g as getUrlParams, s as setUrlParam, d as deleteUrlParam } from './urlParams-9cfdaf71.js';
-import { u as useLeafletMap } from './useLeafletMap-6dea7a8e.js';
-import { g as generateNavbarIdent, a as getFullNavbarHeights } from './Navigation-03339030.js';
-import { u as useGeolocation } from './useGeolocation-f9f073cc.js';
-import './concat-ab3c66f2.js';
-import './clamp-12d37b65.js';
-import 'react-dom/server';
-import './useLazyInput-e66fc5be.js';
-import './useMediaQuery-388bd65e.js';
-import './navigation-a2998143.js';
-import './Link-bccdb082.js';
-import './LanguageSwitcher-57c4a924.js';
-
-var StyledImage = styled(Image).withConfig({
-  displayName: "PointOfInterestDetail__StyledImage",
-  componentId: "sc-hksryh-0"
-})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n"], ["\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n"])), spacings.spacer);
-var Facts = styled(POIFacts).withConfig({
-  displayName: "PointOfInterestDetail__Facts",
-  componentId: "sc-hksryh-1"
-})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n    max-width: 880px;\n"], ["\n    max-width: 880px;\n"])));
-var PoiTitle = styled(Heading).withConfig({
-  displayName: "PointOfInterestDetail__PoiTitle",
-  componentId: "sc-hksryh-2"
-})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    max-width: 880px;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* number of lines to show */\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"], ["\n    max-width: 880px;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* number of lines to show */\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge * 3);
-var PoiText = styled(Copy).withConfig({
-  displayName: "PointOfInterestDetail__PoiText",
-  componentId: "sc-hksryh-3"
-})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n    max-width: 880px;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"], ["\n    max-width: 880px;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge * 3);
-
-var PointOfInterestDetail = function (_a) {
-  var anchorId = _a.anchorId,
-      image = _a.image,
-      title = _a.title,
-      intro = _a.intro,
-      text = _a.text,
-      facts = _a.facts,
-      infos = _a.infos,
-      bgMode = _a.bgMode,
-      customFact = _a.customFact;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-  var hasBg = bgMode === 'full';
-  var hasInfos = useMemo(function () {
-    return isValidArray(infos === null || infos === void 0 ? void 0 : infos.filter(function (info) {
-      return isValidArray(info.items, false);
-    }), false);
-  }, [infos]);
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : hasBg ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode, true)
-  }, React__default.createElement(Wrapper, {
-    addWhitespace: true
-  }, (image === null || image === void 0 ? void 0 : image.small) && React__default.createElement(StyledImage, __assign({}, image, {
-    coverSpace: true,
-    allowEdgeRadius: true,
-    isInverted: isInverted
-  })), React__default.createElement(Grid.Row, {
-    gutter: spacings.nudge * 5,
-    semilarge: {
-      gutter: spacings.spacer
-    }
-  }, React__default.createElement(Grid.Col, {
-    semilarge: {
-      span: hasInfos ? 5.7 / 8 : 1
-    }
-  }, title && React__default.createElement(PoiTitle, {
-    size: "heading-2",
-    isInverted: isInverted
-  }, title), isValidArray(facts, false) && React__default.createElement(Facts, {
-    isInverted: isInverted,
-    facts: facts,
-    customFact: customFact
-  }), intro && React__default.createElement(PoiText, {
-    size: "medium",
-    type: "copy-b",
-    isInverted: isInverted,
-    innerHTML: intro
-  }), text && React__default.createElement(PoiText, {
-    size: "medium",
-    isInverted: isInverted,
-    innerHTML: text
-  })), hasInfos && React__default.createElement(Grid.Col, {
-    semilarge: {
-      span: 2.3 / 8
-    }
-  }, React__default.createElement(InfoList, {
-    isInverted: isInverted,
-    items: infos
-  })))));
-};
-var PointOfInterestDetail$1 = withLibTheme(PointOfInterestDetail);
-var templateObject_1$2, templateObject_2$2, templateObject_3$1, templateObject_4$1;
-
-var Content = styled.div.withConfig({
-  displayName: "PointOfInterestOverview__Content",
-  componentId: "sc-epctuk-0"
-})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * + * {\n            margin-top: ", "px;\n        }\n    }\n"], ["\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * + * {\n            margin-top: ", "px;\n        }\n    }\n"])), spacings.nudge * 5, mq.large, spacings.nudge * 3);
-var Filter = styled(FilterField).withConfig({
-  displayName: "PointOfInterestOverview__Filter",
-  componentId: "sc-epctuk-1"
-})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    // margin to show prevent section overflow outline\n    margin-top: 2px;\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n"], ["\n    // margin to show prevent section overflow outline\n    margin-top: 2px;\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n"])), spacings.nudge * 5);
-
-var poiExactNameFilter = function (filterQuery) {
-  return function (value) {
-    var regex = new RegExp(filterQuery);
-    return regex.test(value.name);
-  };
-};
-
-var poiSoftNameFilter = function (filterQuery) {
-  return function (value) {
-    var preparedQuery = filterQuery.toLowerCase().replace(/\s/g, '');
-    var preparedName = value.name.toLowerCase().replace(/\s/g, '');
-    var regex = new RegExp(preparedQuery);
-    return regex.test(preparedName);
-  };
-};
-
-var poiFactFilter = function (filterQuery) {
-  return function (value) {
-    if (!isValidArray(value.facts, false)) return false;
-    var preparedQuery = filterQuery.toLowerCase().replace(/\s/g, '');
-    var regex = new RegExp(preparedQuery);
-    var result = value.facts.find(function (fact) {
-      var preparedFact = fact.toLowerCase().replace(/\s/g, '');
-      return regex.test(preparedFact);
-    });
-    return !!result;
-  };
-};
-
-var poiInfoFilter = function (filterQuery) {
-  return function (value) {
-    if (!isValidArray(value === null || value === void 0 ? void 0 : value.infos, false)) return false;
-    var preparedQuery = filterQuery.toLowerCase().replace(/\s/g, '');
-    var regex = new RegExp(preparedQuery);
-    return !!value.infos.find(function (info) {
-      if (!info.text) return false;
-      var preparedText = info.text.toLowerCase().replace(/\s/g, '');
-      return regex.test(preparedText);
-    });
-  };
-};
-
-var poiDescriptionFilter = function (filterQuery) {
-  return function (value) {
-    if (!value.shortDescription) return false;
-    var preparedQuery = filterQuery.toLowerCase().replace(/\s/g, '');
-    var preparedDesc = value.shortDescription.toLowerCase().replace(/\s/g, '');
-    var regex = new RegExp(preparedQuery);
-    return regex.test(preparedDesc);
-  };
-};
-
-var removeMatchIntersections = function (array, item) {
-  if (!item) return [];
-  return item === null || item === void 0 ? void 0 : item.filter(function (m) {
-    return !array.find(function (prioItem) {
-      return prioItem.item.id === m.id;
-    });
-  });
-};
-
-var filterPois = function (filterQuery, pois) {
-  var prioList = [];
-
-  if (!isValidArray(pois === null || pois === void 0 ? void 0 : pois.filter(function (poi) {
-    return poi.id !== undefined;
-  }), false)) {
-    return prioList;
-  } // PRIO 1 Filter: Exact name
-
-
-  var exactNameMatches = pois === null || pois === void 0 ? void 0 : pois.filter(poiExactNameFilter(filterQuery));
-
-  if (isValidArray(exactNameMatches, false)) {
-    prioList.push.apply(prioList, exactNameMatches.map(function (match) {
-      return {
-        item: match,
-        priority: 1
-      };
-    }));
-  } // PRIO 2 Filter: Name
-
-
-  var nameMatches = removeMatchIntersections(prioList, pois === null || pois === void 0 ? void 0 : pois.filter(poiSoftNameFilter(filterQuery)));
-
-  if (isValidArray(nameMatches, false)) {
-    prioList.push.apply(prioList, nameMatches.map(function (match) {
-      return {
-        item: match,
-        priority: 2
-      };
-    }));
-  } // PRIO 3 Filter: Facts
-
-
-  var factMatches = removeMatchIntersections(prioList, pois === null || pois === void 0 ? void 0 : pois.filter(poiFactFilter(filterQuery)));
-
-  if (isValidArray(factMatches, false)) {
-    prioList.push.apply(prioList, factMatches.map(function (match) {
-      return {
-        item: match,
-        priority: 3
-      };
-    }));
-  } // PRIO 4 Filter: Description
-
-
-  var infoMatches = removeMatchIntersections(prioList, pois === null || pois === void 0 ? void 0 : pois.filter(poiInfoFilter(filterQuery)));
-
-  if (isValidArray(infoMatches, false)) {
-    prioList.push.apply(prioList, infoMatches.map(function (match) {
-      return {
-        item: match,
-        priority: 4
-      };
-    }));
-  } // PRIO 5 Filter: Description
-
-
-  var descMatches = removeMatchIntersections(prioList, pois === null || pois === void 0 ? void 0 : pois.filter(poiDescriptionFilter(filterQuery)));
-
-  if (isValidArray(descMatches, false)) {
-    prioList.push.apply(prioList, descMatches.map(function (match) {
-      return {
-        item: match,
-        priority: 5
-      };
-    }));
-  }
-
-  return prioList;
-};
-
-var PointOfInterestOverview = function (_a) {
-  var _b;
-
-  var anchorId = _a.anchorId,
-      bgMode = _a.bgMode,
-      pois = _a.pois,
-      enableFiltering = _a.enableFiltering,
-      initialFilterQuery = _a.initialFilterQuery,
-      _c = _a.filterPlaceholder,
-      filterPlaceholder = _c === void 0 ? 'Filter' : _c,
-      filterSubmitIcon = _a.filterSubmitIcon,
-      filterClearIcon = _a.filterClearIcon;
-
-  var _d = useLibTheme(),
-      colors = _d.colors,
-      globals = _d.globals;
-
-  var filterName = globals.sections.poiFilterName;
-  var isInverted = bgMode === 'inverted';
-  var hasBg = bgMode === 'full';
-
-  var _e = useState(initialFilterQuery || ''),
-      filterQuery = _e[0],
-      setFilterQuery = _e[1];
-
-  var isMounted = useMounted();
-  var poiMatches = React__default.useMemo(function () {
-    var queryParts = filterQuery.split(' ').map(function (part) {
-      return part.trim();
-    });
-    var searchMatches = []; // tracking matches of each query part
-
-    for (var _i = 0, queryParts_1 = queryParts; _i < queryParts_1.length; _i++) {
-      var part = queryParts_1[_i];
-      var matches = filterPois(escapeRegExp(part), pois || []);
-
-      var _loop_1 = function (match) {
-        var intersectionIndex = searchMatches.findIndex(function (sItem) {
-          return sItem.match.item.id === match.item.id;
-        });
-
-        if (intersectionIndex !== -1) {
-          searchMatches[intersectionIndex].intersections += 1;
-        } else {
-          searchMatches.push({
-            match: match,
-            intersections: 1
-          });
-        }
-      };
-
-      for (var _a = 0, matches_1 = matches; _a < matches_1.length; _a++) {
-        var match = matches_1[_a];
-
-        _loop_1(match);
-      }
-    } // filter search matches by intersections so only matches with results for all search parts are shown
-
-
-    return searchMatches.filter(function (m) {
-      return m.intersections >= queryParts.length;
-    }).map(function (m) {
-      return __assign({}, m.match);
-    });
-  }, [filterQuery, pois]);
-  var getFilter = useCallback(function () {
-    return getUrlParams()[filterName];
-  }, [filterName]);
-  useEffect(function () {
-    var urlFilter = getFilter();
-
-    if (urlFilter !== undefined && urlFilter !== null && typeof urlFilter === 'string') {
-      setFilterQuery(urlFilter);
-    }
-  }, [getFilter]);
-  useEffect(function () {
-    if (isMounted) return; // set inital data into URL
-
-    if (filterQuery) {
-      setUrlParam(filterName, filterQuery);
-    } else {
-      deleteUrlParam(filterName);
-    }
-  }, [filterName, filterQuery, isMounted]);
-  useUpdateEffect(function () {
-    // set filters to URL params
-    if (filterQuery) {
-      setUrlParam(filterName, filterQuery);
-    } else {
-      deleteUrlParam(filterName);
-    }
-  }, [filterQuery]);
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : hasBg ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode, true)
-  }, React__default.createElement(Wrapper, {
-    addWhitespace: true
-  }, enableFiltering && React__default.createElement(Filter, {
-    value: filterQuery,
-    initialValue: initialFilterQuery,
-    placeholder: filterPlaceholder,
-    onSubmit: setFilterQuery,
-    submitIcon: filterSubmitIcon,
-    clearIcon: filterClearIcon,
-    isInverted: isInverted
-  }), React__default.createElement(Content, null, (_b = poiMatches === null || poiMatches === void 0 ? void 0 : poiMatches.sort(function (a, b) {
-    return a.priority - b.priority;
-  })) === null || _b === void 0 ? void 0 : _b.map(function (poi, i) {
-    return React__default.createElement(POICard, __assign({
-      key: i
-    }, poi.item, {
-      isInverted: isInverted
-    }));
-  }))));
-};
-var PointOfInterestOverview$1 = withLibTheme(PointOfInterestOverview);
-var templateObject_1$1, templateObject_2$1;
-
-var genHeightStyles = function () {
-  return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    // Doing some crazy shit to calculate curent navbar height in CSS\n    ", "\n"], ["\n    // Doing some crazy shit to calculate curent navbar height in CSS\n    ", "\n"])), function (_a) {
-    var theme = _a.theme; // navbar main only
-
-    var mainIdent = generateNavbarIdent({
-      pageFlow: 'beforeContent',
-      hasMain: true
-    }); // navbar main and top
-
-    var mainTopIdent = generateNavbarIdent({
-      pageFlow: 'beforeContent',
-      hasMain: true,
-      hasTop: true
-    }); // navbar main and bottom
-
-    var mainBottomIdent = generateNavbarIdent({
-      pageFlow: 'beforeContent',
-      hasMain: true,
-      hasBottom: true
-    }); // full navbar with all bars
-
-    var fullIdent = generateNavbarIdent({
-      pageFlow: 'beforeContent',
-      hasTop: true,
-      hasMain: true,
-      hasBottom: true
-    });
-    var navMainHeight = getFullNavbarHeights(theme, mainIdent).large;
-    var navMainTopHeight = getFullNavbarHeights(theme, mainTopIdent).large;
-    var navMainBottomHeight = getFullNavbarHeights(theme, mainBottomIdent).large;
-    var navFullHeight = getFullNavbarHeights(theme, fullIdent).large;
-
-    var mapToSelector = function (idents) {
-      return idents.map(function (id) {
-        return "[data-navbar-ident*='".concat(id, "']");
-      }).join('');
-    };
-
-    var refHeight = '100vh';
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            ", " {\n                height: ", ";\n            }\n\n            // with main navbar element\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with main and top navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with main and bottom navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with all navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            @media ", " {\n                // with main navbar element\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n\n                // with main and top navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n\n                // with main and bottom navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(\n                            ", " - ", "px\n                        );\n                    }\n                }\n\n                // with all navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n            }\n        "], ["\n            ", " {\n                height: ", ";\n            }\n\n            // with main navbar element\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with main and top navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with main and bottom navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with all navbar elements\n            header", " ~ & {\n                ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            @media ", " {\n                // with main navbar element\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n\n                // with main and top navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n\n                // with main and bottom navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(\n                            ", " - ", "px\n                        );\n                    }\n                }\n\n                // with all navbar elements\n                header", " ~ & {\n                    ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n            }\n        "])), Map, refHeight, mapToSelector(mainIdent.split('-')), Map, refHeight, navMainHeight[0], mapToSelector(mainTopIdent.split('-')), Map, refHeight, navMainTopHeight[0], mapToSelector(mainBottomIdent.split('-')), Map, refHeight, navMainBottomHeight[0], mapToSelector(fullIdent.split('-')), Map, refHeight, navFullHeight[0], mq.semilarge, mapToSelector(mainIdent.split('-')), Map, refHeight, navMainHeight[1], mapToSelector(mainTopIdent.split('-')), Map, refHeight, navMainTopHeight[1], mapToSelector(mainBottomIdent.split('-')), Map, refHeight, navMainBottomHeight[1], mapToSelector(fullIdent.split('-')), Map, refHeight, navFullHeight[1]);
-  });
-};
-
-var PoiMapSection = styled(Section).withConfig({
-  displayName: "PointOfInterestMap__PoiMapSection",
-  componentId: "sc-1ke8oz0-0"
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n    ", "\n\n    header + & {\n        ", "\n        ", "\n    }\n"], ["\n    position: relative;\n    ", "\n\n    header + & {\n        ", "\n        ", "\n    }\n"])), function (_a) {
-  var isLarge = _a.isLarge;
-  return isLarge && genHeightStyles();
-}, withRange([0], 'padding-top'), withRange([0], 'margin-top'));
-var MapContainer = styled.div.withConfig({
-  displayName: "PointOfInterestMap__MapContainer",
-  componentId: "sc-1ke8oz0-1"
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: relative;\n"], ["\n    position: relative;\n"])));
-var Map = styled.div.withConfig({
-  displayName: "PointOfInterestMap__Map",
-  componentId: "sc-1ke8oz0-2"
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    min-height: 360px;\n    height: 360px;\n    max-height: 1300px;\n    z-index: 0;\n\n    @media ", " {\n        height: 600px;\n        min-height: 600px;\n    }\n"], ["\n    min-height: 360px;\n    height: 360px;\n    max-height: 1300px;\n    z-index: 0;\n\n    @media ", " {\n        height: 600px;\n        min-height: 600px;\n    }\n"])), mq.medium);
-var RequestGeolocationBtn = styled.button.withConfig({
-  displayName: "PointOfInterestMap__RequestGeolocationBtn",
-  componentId: "sc-1ke8oz0-3"
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    position: absolute;\n    top: ", "px;\n    left: ", "px;\n\n    background-color: transparent;\n    border: none;\n    padding: ", "px;\n    cursor: pointer;\n\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.6;\n        }\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n        transform: scale(1.012);\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n\n    & > * {\n        width: 30px;\n        height: 30px;\n    }\n"], ["\n    position: absolute;\n    top: ", "px;\n    left: ", "px;\n\n    background-color: transparent;\n    border: none;\n    padding: ", "px;\n    cursor: pointer;\n\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.6;\n        }\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n        transform: scale(1.012);\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n\n    & > * {\n        width: 30px;\n        height: 30px;\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, spacings.nudge, function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).primary.default;
-});
-var CardStage = styled.div.withConfig({
-  displayName: "PointOfInterestMap__CardStage",
-  componentId: "sc-1ke8oz0-4"
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 10;\n\n    display: flex;\n    align-items: flex-end;\n    justify-content: flex-end;\n\n    pointer-events: all;\n    background-color: rgba(255, 255, 255, 0.8);\n\n    @media ", " {\n        position: absolute;\n        background-color: transparent;\n        padding: ", "px;\n        padding-bottom: ", "px;\n\n        pointer-events: none;\n    }\n"], ["\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 10;\n\n    display: flex;\n    align-items: flex-end;\n    justify-content: flex-end;\n\n    pointer-events: all;\n    background-color: rgba(255, 255, 255, 0.8);\n\n    @media ", " {\n        position: absolute;\n        background-color: transparent;\n        padding: ", "px;\n        padding-bottom: ", "px;\n\n        pointer-events: none;\n    }\n"])), mq.medium, spacings.nudge * 2, spacings.nudge * 3);
-var MapCardView = styled.div.withConfig({
-  displayName: "PointOfInterestMap__MapCardView",
-  componentId: "sc-1ke8oz0-5"
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    max-height: 100%;\n    width: 100%;\n    padding: ", "px;\n    overflow: auto;\n\n    background: ", ";\n    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);\n    pointer-events: all;\n    border-radius: 8px;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        max-width: 400px;\n    }\n"], ["\n    max-height: 100%;\n    width: 100%;\n    padding: ", "px;\n    overflow: auto;\n\n    background: ", ";\n    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);\n    pointer-events: all;\n    border-radius: 8px;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        max-width: 400px;\n    }\n"])), spacings.nudge * 2, function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).elementBg.light;
-}, spacings.nudge * 3, mq.medium);
-var MapCardHeader = styled.header.withConfig({
-  displayName: "PointOfInterestMap__MapCardHeader",
-  componentId: "sc-1ke8oz0-6"
-})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n"], ["\n    display: flex;\n    align-items: center;\n"])));
-var CloseBtn = styled.button.withConfig({
-  displayName: "PointOfInterestMap__CloseBtn",
-  componentId: "sc-1ke8oz0-7"
-})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: inline-block;\n    border: none;\n    background-color: transparent;\n    cursor: pointer;\n    margin-left: auto;\n    padding: ", "px;\n\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.6;\n        }\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n        transform: scale(1.012);\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n"], ["\n    display: inline-block;\n    border: none;\n    background-color: transparent;\n    cursor: pointer;\n    margin-left: auto;\n    padding: ", "px;\n\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.6;\n        }\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n        transform: scale(1.012);\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n"])), spacings.nudge, function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).primary.default;
-});
-
-var MapCard = function (_a) {
-  var name = _a.name,
-      facts = _a.facts,
-      description = _a.description,
-      infos = _a.infos,
-      action = _a.action,
-      customFact = _a.customFact,
-      customClose = _a.customClose,
-      onClose = _a.onClose,
-      className = _a.className;
-  var colors = useLibTheme().colors;
-  return React__default.createElement(MapCardView, {
-    className: className
-  }, React__default.createElement(MapCardHeader, null, name && React__default.createElement(Copy, {
-    type: "copy-b",
-    size: "big"
-  }, name), React__default.createElement(CloseBtn, {
-    onClick: onClose
-  }, customClose || React__default.createElement(Cross, {
-    iconColor: colors.text.default
-  }))), isValidArray(facts, false) && React__default.createElement(POIFacts, {
-    facts: facts,
-    customFact: customFact
-  }), description && React__default.createElement(Copy, {
-    type: "copy",
-    size: "small",
-    innerHTML: description
-  }), isValidArray(infos, false) && React__default.createElement(InfoList, {
-    items: [{
-      items: infos
-    }]
-  }), action && action);
-};
-
-var PointOfInterestMap = function (_a) {
-  var anchorId = _a.anchorId,
-      size = _a.size,
-      pois = _a.pois,
-      _b = _a.initialPointOfInterest,
-      initialPointOfInterest = _b === void 0 ? '' : _b,
-      provider = _a.provider,
-      attribution = _a.attribution,
-      _c = _a.center,
-      center = _c === void 0 ? [51.505, -0.09] : _c,
-      _d = _a.zoom,
-      zoom = _d === void 0 ? 5 : _d,
-      fitBoundsPadding = _a.fitBoundsPadding,
-      _e = _a.allMarkersOnInit,
-      allMarkersOnInit = _e === void 0 ? false : _e,
-      _f = _a.restrictToMarkersArea,
-      restrictToMarkersArea = _f === void 0 ? true : _f,
-      showOwnPosition = _a.showOwnPosition,
-      flyToZoom = _a.flyToZoom,
-      customFact = _a.customFact,
-      currentPosMarker = _a.currentPosMarker,
-      customCardClose = _a.customCardClose,
-      customLocationRequest = _a.customLocationRequest;
-  var isLarge = size === 'large';
-  var colors = useLibTheme().colors;
-
-  var _g = useState(initialPointOfInterest || ''),
-      activePoiId = _g[0],
-      setActivePoiId = _g[1];
-
-  var _h = useState(false),
-      isDirty = _h[0],
-      setIsDirty = _h[1];
-
-  var activePOI = useMemo(function () {
-    return pois === null || pois === void 0 ? void 0 : pois.find(function (poi) {
-      return poi.id === activePoiId;
-    });
-  }, [activePoiId, pois]);
-
-  var _j = useGeolocation(true, false),
-      isGeolocationSupported = _j.isSupported,
-      location = _j.location,
-      resetGeolocation = _j.reset;
-
-  var mapMarkers = useMemo(function () {
-    var _a;
-
-    var defaultMarker = {
-      size: [28, 28],
-      anchor: [14, 28],
-      sizeActive: [70, 70],
-      anchorActive: [35, 70],
-      url: getSVGDataImg(React__default.createElement(LocationPin, null))
-    }; // marker of own position
-
-    var defaultPosMarker = {
-      size: [24, 24],
-      anchor: [12, 12],
-      sizeActive: [24, 24],
-      anchorActive: [12, 12],
-      url: getSVGDataImg(React__default.createElement(CurrentLocation, {
-        iconColor: "#5383EC"
-      }))
-    };
-    var markers = ((_a = pois === null || pois === void 0 ? void 0 : pois.filter(function (poi) {
-      return poi.id !== undefined;
-    })) === null || _a === void 0 ? void 0 : _a.map(function (_a) {
-      var id = _a.id,
-          position = _a.position,
-          icon = _a.icon;
-      return {
-        id: id,
-        position: position,
-        icon: icon || defaultMarker,
-        isInteractive: true
-      };
-    })) || [];
-
-    if (isGeolocationSupported && (location === null || location === void 0 ? void 0 : location.coords.latitude) && (location === null || location === void 0 ? void 0 : location.coords.longitude)) {
-      markers.push({
-        id: 'my-current-position-123456789',
-        position: [location.coords.latitude, location.coords.longitude],
-        icon: currentPosMarker || defaultPosMarker
-      });
-    }
-
-    return markers;
-  }, [currentPosMarker, isGeolocationSupported, location === null || location === void 0 ? void 0 : location.coords.latitude, location === null || location === void 0 ? void 0 : location.coords.longitude, pois]);
-
-  var _k = useLeafletMap({
-    url: provider,
-    attribution: attribution,
-    center: center,
-    zoom: zoom,
-    activeMarkerId: activePoiId,
-    markers: mapMarkers,
-    fitBoundsPadding: fitBoundsPadding,
-    restrictToMarkersArea: restrictToMarkersArea,
-    showZoomControls: true,
-    zoomControlPosition: 'bottomleft',
-    onMarkerClick: function (markerId) {
-      setActivePoiId(function (prev) {
-        if (prev === markerId) {
-          return '';
-        }
-
-        return markerId;
-      });
-    }
-  }),
-      isLoaded = _k.isLoaded,
-      setMapContainer = _k.setContainer,
-      flyToActive = _k.flyToActive,
-      showAllMarkers = _k.showAllMarkers,
-      flyToPosition = _k.flyToPosition,
-      getCurrentZoom = _k.getCurrentZoom;
-
-  useEffect(function () {
-    if (isLoaded && !isDirty) {
-      if (allMarkersOnInit) showAllMarkers();
-    } else {
-      var currentZoom = getCurrentZoom();
-      var zoom_1 = flyToZoom;
-
-      if (flyToZoom !== undefined && currentZoom > flyToZoom) {
-        zoom_1 = currentZoom;
-      }
-
-      flyToActive(zoom_1);
-    }
-  }, [activePoiId, allMarkersOnInit, flyToActive, flyToZoom, getCurrentZoom, initialPointOfInterest, isDirty, isLoaded, showAllMarkers]);
-  useEffect(function () {
-    if (!isDirty && activePoiId !== initialPointOfInterest) {
-      setIsDirty(true);
-    }
-  }, [activePoiId, initialPointOfInterest, isDirty]);
-
-  var handleLocationRequest = function () {
-    return __awaiter(void 0, void 0, void 0, function () {
-      var currentZoom, zoom_2, position;
-
-      var _a, _b;
-
-      return __generator(this, function (_c) {
-        switch (_c.label) {
-          case 0:
-            if (!(((_a = location === null || location === void 0 ? void 0 : location.coords) === null || _a === void 0 ? void 0 : _a.latitude) && ((_b = location === null || location === void 0 ? void 0 : location.coords) === null || _b === void 0 ? void 0 : _b.longitude))) return [3
-            /*break*/
-            , 1];
-            currentZoom = getCurrentZoom();
-            zoom_2 = flyToZoom;
-
-            if (flyToZoom !== undefined && currentZoom > flyToZoom) {
-              zoom_2 = currentZoom;
-            }
-
-            flyToPosition([location.coords.latitude, location.coords.longitude], zoom_2);
-            return [3
-            /*break*/
-            , 4];
-
-          case 1:
-            _c.trys.push([1, 3,, 4]);
-
-            return [4
-            /*yield*/
-            , resetGeolocation()];
-
-          case 2:
-            position = _c.sent();
-            if (position) showAllMarkers();
-            return [3
-            /*break*/
-            , 4];
-
-          case 3:
-            _c.sent();
-            return [3
-            /*break*/
-            , 4];
-
-          case 4:
-            return [2
-            /*return*/
-            ];
-        }
-      });
-    });
-  };
-
-  return React__default.createElement(PoiMapSection, {
-    anchorId: anchorId,
-    bgColor: "image",
-    bgMode: "full",
-    isLarge: isLarge
-  }, React__default.createElement(Wrapper, {
-    clampWidth: isLarge ? 'large' : 'normal'
-  }, React__default.createElement(MapContainer, null, React__default.createElement(Map, {
-    ref: setMapContainer,
-    isLarge: size === 'large'
-  }), showOwnPosition && React__default.createElement(RequestGeolocationBtn, {
-    onClick: handleLocationRequest
-  }, customLocationRequest || React__default.createElement(MyLocation, {
-    iconColor: colors.text.default
-  })), activePOI && activePOI.name && React__default.createElement(CardStage, {
-    onClick: function (ev) {
-      if (ev.target !== ev.currentTarget) return;
-      setActivePoiId('');
-    }
-  }, React__default.createElement(MapCard, __assign({}, activePOI, {
-    onClose: function () {
-      return setActivePoiId('');
-    },
-    customFact: customFact,
-    customClose: customCardClose
-  }))))));
-};
-var PointOfInterestMap$1 = withLibTheme(PointOfInterestMap);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
-
-export { PointOfInterestDetail$1 as PointOfInterestDetail, PointOfInterestMap$1 as PointOfInterestMap, PointOfInterestOverview$1 as PointOfInterestOverview };
-//# sourceMappingURL=sections_pois.js.map