@orioro/react-maplibre-util 0.0.2 → 0.2.0

package/dist/index.mjs

@@ -1,14 +1,21 @@
 import { __assign, __spreadArray, __rest, __makeTemplateObject } from 'tslib';
-import React, { forwardRef, useRef, useMemo, useImperativeHandle, useEffect, useState, useCallback, createRef } from 'react';
-import { Map, Source, Layer, useMap } from 'react-map-gl/maplibre';
-import { isPlainObject, uniqBy, uniq, pick } from 'lodash-es';
-import { Flex, useRefByKey } from '@orioro/react-ui-core';
+import React, { forwardRef, useRef, useMemo, useImperativeHandle, useState, useCallback, useLayoutEffect, useEffect, createRef } from 'react';
+import { Map, Source, Layer, useMap, useControl } from 'react-map-gl/maplibre';
+import { isPlainObject, uniq, uniqBy, pick, omit } from 'lodash-es';
+import { Flex, useRefByKey, useLocalState, DropdownMenu } from '@orioro/react-ui-core';
 import styled from 'styled-components';
+import { usePrevious } from 'react-use';
 import { mergeRefs } from 'react-merge-refs';
 import { ckmeans } from 'simple-statistics';
 import { schemeYlOrRd } from 'd3-scale-chromatic';
 import { maxIndex, range, variance, sum } from 'd3';
 import { bbox } from '@turf/turf';
+import { createPortal } from 'react-dom';
+import { mdiCheck, mdiTerrain, mdiVideo3d } from '@mdi/js';
+import { Icon } from '@mdi/react';
+import { Tooltip } from '@radix-ui/themes';
+import maplibregl from 'maplibre-gl';
+import mlcontour from 'maplibre-contour';
 
 function sortLayers(layers, _a) {
   var existingLayers = _a.existingLayers;
@@ -181,9 +188,8 @@ var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMap
   var views = _a.views,
     _b = _a.interactiveLayerIds,
     interactiveLayerIdsInput = _b === void 0 ? [] : _b,
-    children = _a.children;
-    _a.hover;
-    var mapProps = __rest(_a, ["views", "interactiveLayerIds", "children", "hover"]);
+    children = _a.children,
+    mapProps = __rest(_a, ["views", "interactiveLayerIds", "children"]);
   var mapRef = useRef(null);
   //
   // Parse sources, layers and interactiveLayerIds from
@@ -233,48 +239,116 @@ var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMap
 var Container = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  pointer-events: none;\n  position: absolute;\n  z-index: 2;\n\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 16px;\n  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n  border: 1px solid rgba(0, 0, 0, 0.3);\n\n  // background-color: black;\n  color: white;\n  border-radius: 5px;\n  font-size: 0.9rem;\n\n  max-width: 300px;\n\n  hyphens: auto;\n  word-break: break-word; /* Avoids overflow */\n  overflow-wrap: break-word; /* Ensures long words break */\n  white-space: normal;\n"], ["\n  pointer-events: none;\n  position: absolute;\n  z-index: 2;\n\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 16px;\n  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n  border: 1px solid rgba(0, 0, 0, 0.3);\n\n  // background-color: black;\n  color: white;\n  border-radius: 5px;\n  font-size: 0.9rem;\n\n  max-width: 300px;\n\n  hyphens: auto;\n  word-break: break-word; /* Avoids overflow */\n  overflow-wrap: break-word; /* Ensures long words break */\n  white-space: normal;\n"])));
 var DataSectionHeading = styled.h3(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n  line-height: 1.2;\n  font-size: 1rem;\n"], ["\n  margin: 0;\n  line-height: 1.2;\n  font-size: 1rem;\n"])));
 var DataSectionContainer = styled(Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 15px 10px;\n"], ["\n  padding: 15px 10px;\n"])));
-var EntriesList = styled.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 0;\n  list-style: none;\n  margin-bottom: 0;\n  > li + li {\n    margin-top: 4px;\n  }\n  // padding: 10px;\n"], ["\n  padding: 0;\n  list-style: none;\n  margin-bottom: 0;\n  > li + li {\n    margin-top: 4px;\n  }\n  // padding: 10px;\n"])));
+var EntriesList = styled.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 0;\n  list-style: none;\n  margin-top: 0;\n  margin-bottom: 0;\n  > li + li {\n    margin-top: 4px;\n  }\n"], ["\n  padding: 0;\n  list-style: none;\n  margin-top: 0;\n  margin-bottom: 0;\n  > li + li {\n    margin-top: 4px;\n  }\n"])));
 function DataSection(_a) {
   var title = _a.title,
     entries = _a.entries,
     props = __rest(_a, ["title", "entries"]);
-  return entries.length > 0 && ( /*#__PURE__*/React.createElement(DataSectionContainer, __assign({
+  return Array.isArray(entries) && entries.length > 0 && (/*#__PURE__*/React.createElement(DataSectionContainer, __assign({
     direction: "column",
     gap: "10px"
-  }, props), title && /*#__PURE__*/React.createElement(DataSectionHeading, null, title), /*#__PURE__*/React.createElement(EntriesList, null, entries.map(function (_a, index) {
+  }, props), title && /*#__PURE__*/React.createElement(DataSectionHeading, null, title), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(EntriesList, null, entries.map(function (_a, index) {
     var label = _a[0],
       value = _a[1];
     return /*#__PURE__*/React.createElement("li", {
       key: index
-    }, typeof label === 'string' ? /*#__PURE__*/React.createElement("span", null, label, ": ") : label, typeof value === 'string' ? ( /*#__PURE__*/React.createElement("span", {
+    }, typeof label === 'string' ? /*#__PURE__*/React.createElement("span", null, label, ": ") : label, typeof value === 'string' ? (/*#__PURE__*/React.createElement("span", {
       style: {
         fontWeight: 'bold'
       }
     }, value)) : value);
-  }))));
+  })))));
+}
+function useMaxValue(initial) {
+  var maxRef = useRef(initial);
+  var applyMax = function applyMax(value) {
+    if (value > maxRef.current) {
+      maxRef.current = value;
+    }
+    return maxRef.current;
+  };
+  return applyMax;
+}
+function useClientRect() {
+  var _a = useState(null),
+    rect = _a[0],
+    setRect = _a[1];
+  var ref = useCallback(function (node) {
+    if (node !== null) {
+      setRect(node.getBoundingClientRect());
+    }
+  }, []);
+  useLayoutEffect(function () {
+    var handleResize = function handleResize() {
+      if (ref.current) {
+        setRect(ref.current.getBoundingClientRect());
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return [rect, ref];
 }
+var PADDING = 15;
+var Y_OFFSET = -20;
 function HoverTooltip(_a) {
   var position = _a.position,
     children = _a.children,
     dataSections = _a.dataSections,
     _b = _a.style,
     style = _b === void 0 ? {} : _b;
+  var ref = useRef(null);
+  var applyMaxW = useMaxValue(0);
+  var applyMaxY = useMaxValue(0);
+  var prevRef = usePrevious(ref.current);
+  var positioning = useMemo(function () {
+    var _a;
+    if (!ref.current) {
+      return {
+        opacity: 0
+      };
+    }
+    var rect = ref.current.getBoundingClientRect();
+    var parentRect = (_a = ref.current.offsetParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (!parentRect) {
+      console.warn('could not find parentRect for HoverTooltip');
+      return {
+        opacity: 0
+      };
+    }
+    var maxW = applyMaxW((rect === null || rect === void 0 ? void 0 : rect.width) || 0);
+    var maxH = applyMaxY((rect === null || rect === void 0 ? void 0 : rect.height) || 0);
+    var translateX = position[0] + maxW + PADDING * 2 < parentRect.width ? 'translateX(0)' : "translateX(calc(-100% - ".concat(2 * PADDING, "px))");
+    var translateY = position[1] + maxH + PADDING * 2 + Y_OFFSET < parentRect.height ? 'translateY(0)' : "translateY(calc(-100% + ".concat(PADDING, "px + ").concat(-1 * Y_OFFSET, "px)");
+    return {
+      left: position[0] + PADDING,
+      top: position[1] + Y_OFFSET,
+      transform: "".concat(translateX, " ").concat(translateY),
+      //
+      // If previous ref was not set, it means
+      // that this is the first time the component
+      // is being rendered, thus do not animate
+      //
+      transition: !prevRef ? 'none' : 'transform .3s ease'
+    };
+  }, [position]);
   return /*#__PURE__*/React.createElement(Container, {
-    style: __assign({
-      left: position[0] + 15,
-      top: position[1] - 20
-    }, style)
-  }, Array.isArray(dataSections) && dataSections.length > 0 && ( /*#__PURE__*/React.createElement(Flex, {
+    ref: ref,
+    style: __assign(__assign(__assign({}, positioning), {
+      minWidth: 200
+    }), style)
+  }, Array.isArray(dataSections) && dataSections.length > 0 && (/*#__PURE__*/React.createElement(Flex, {
     direction: "column"
   }, dataSections.map(function (section, index) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: index
-    }, /*#__PURE__*/React.createElement(DataSection, __assign({}, section)), index === dataSections.length - 1 ? null : ( /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(DataSection, __assign({}, section)), index === dataSections.length - 1 ? null : (/*#__PURE__*/React.createElement("div", {
       style: {
         width: '100%',
         margin: 0,
         borderBottom: '1px solid currentColor'
-        // marginBottom: 'none',
       }
     })));
   }))), children);
@@ -362,7 +436,6 @@ var MapWindow = /*#__PURE__*/forwardRef(function MapWindowInner(_a, externalRef)
     mapReady = _c[0],
     setMapReady = _c[1];
   var parentMapRef = useMap();
-  console.log('parentMapRef', parentMapRef);
   useSyncedMaps(parentMapRef, mapRef, {
     centerOffsetPixels: centerOffsetPixels
   }, [centerOffsetPixels, mapReady]);
@@ -401,134 +474,6 @@ var MapWindow = /*#__PURE__*/forwardRef(function MapWindowInner(_a, externalRef)
 var GhostCursor = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  --synced-maps-ghost-cursor-size: 24px;\n  position: absolute;\n\n  height: 0;\n  width: 0;\n  color: inherit;\n\n  &::before {\n    content: '';\n    display: block;\n    background-color: currentColor;\n    width: 1px;\n    height: var(--synced-maps-ghost-cursor-size);\n    position: absolute;\n    top: calc(-1 * (var(--synced-maps-ghost-cursor-size) / 2));\n    left: 0;\n  }\n\n  &::after {\n    content: '';\n    display: block;\n    background-color: currentColor;\n    height: 1px;\n    width: var(--synced-maps-ghost-cursor-size);\n    position: absolute;\n    left: calc(-1 * (var(--synced-maps-ghost-cursor-size) / 2));\n    top: 0;\n  }\n"], ["\n  --synced-maps-ghost-cursor-size: 24px;\n  position: absolute;\n\n  height: 0;\n  width: 0;\n  color: inherit;\n\n  &::before {\n    content: '';\n    display: block;\n    background-color: currentColor;\n    width: 1px;\n    height: var(--synced-maps-ghost-cursor-size);\n    position: absolute;\n    top: calc(-1 * (var(--synced-maps-ghost-cursor-size) / 2));\n    left: 0;\n  }\n\n  &::after {\n    content: '';\n    display: block;\n    background-color: currentColor;\n    height: 1px;\n    width: var(--synced-maps-ghost-cursor-size);\n    position: absolute;\n    left: calc(-1 * (var(--synced-maps-ghost-cursor-size) / 2));\n    top: 0;\n  }\n"])));
 var templateObject_1$1;
 
-function parseHoverInfo(index, event) {
-  return {
-    index: index,
-    point: [event.point.x, event.point.y],
-    coordinates: [event.lngLat.lng, event.lngLat.lat],
-    event: event
-  };
-}
-var SingleMapContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-function makeSyncedMaps(_a) {
-  var components = _a.components;
-  var MapComponent = components.Map;
-  return /*#__PURE__*/forwardRef(function SyncedMaps(_a, ref) {
-    var maps = _a.maps,
-      style = _a.style,
-      initialViewState = _a.initialViewState,
-      children = _a.children,
-      getTooltip = _a.tooltip,
-      baseMapProps = __rest(_a, ["maps", "style", "initialViewState", "children", "tooltip"]);
-    var _b = useRefByKey(),
-      mapInstanceRefs = _b[0],
-      setMapInstanceRef = _b[1];
-    var containerRef = useRef(null);
-    var _c = useState(initialViewState),
-      viewState = _c[0],
-      setViewState = _c[1];
-    var onSyncMove = useCallback(function (evt) {
-      return setViewState(evt.viewState);
-    }, []);
-    var _d = useState(false),
-      isDragging = _d[0],
-      setIsDragging = _d[1];
-    var onDragStart = useCallback(function () {
-      return setIsDragging(true);
-    }, [setIsDragging]);
-    var onDragEnd = useCallback(function () {
-      return setIsDragging(false);
-    }, [setIsDragging]);
-    var _e = useState(null),
-      hoverInfo = _e[0],
-      setHoverInfo = _e[1];
-    var _f = useState(null),
-      tooltips = _f[0],
-      setTooltips = _f[1];
-    var _onMouseMove = useCallback(function (index, event) {
-      var nextHoverInfo = parseHoverInfo(index, event);
-      setHoverInfo(nextHoverInfo);
-      setTooltips(typeof getTooltip === 'function' ? maps.map(function (_a, index) {
-        var _b = _a.tooltip,
-          tooltip = _b === void 0 ? true : _b;
-        if (!tooltip) {
-          return null;
-        }
-        return getTooltip(nextHoverInfo, mapInstanceRefs[index]) || null;
-      }) : null);
-    }, [maps]);
-    //
-    // Expose map instances
-    //
-    useImperativeHandle(ref, function () {
-      return {
-        mapInstances: mapInstanceRefs
-      };
-    }, [mapInstanceRefs]);
-    return /*#__PURE__*/React.createElement(Flex, {
-      ref: containerRef,
-      direction: "row",
-      style: __assign({
-        position: 'relative'
-      }, style || {})
-    }, maps.map(function (mapProps, index) {
-      return /*#__PURE__*/React.createElement(SingleMapContainer, {
-        key: mapProps.id || index,
-        style: {
-          position: 'absolute',
-          top: 0,
-          height: '100%',
-          left: "calc(".concat(index, " * (100% / ").concat(maps.length, "))"),
-          width: "calc(100% / ".concat(maps.length, ")")
-        }
-      }, !isDragging && hoverInfo && hoverInfo.index !== index ? ( /*#__PURE__*/React.createElement(GhostCursor, {
-        style: {
-          position: 'absolute',
-          left: hoverInfo.point[0],
-          top: hoverInfo.point[1],
-          zIndex: 2
-        }
-      })) : null, !isDragging && Array.isArray(tooltips) && tooltips[index], /*#__PURE__*/React.createElement(MapComponent, __assign({
-        ref: setMapInstanceRef(index),
-        cursor: isDragging ? 'grabbing' : 'default'
-      }, baseMapProps, mapProps, viewState || {}, {
-        style: __assign(__assign({}, mapProps.style || {}), {
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%'
-        }),
-        onMove: onSyncMove,
-        onDragStart: onDragStart,
-        onDragEnd: onDragEnd,
-        onMouseMove: function onMouseMove(event) {
-          return _onMouseMove(index, event);
-        },
-        //
-        // There is no notion of mouseenter/mouseleave
-        // in maplibre.gl.
-        //
-        // Use onMouseOut instead
-        //
-        // https://github.com/mapbox/mapbox-gl-js/issues/10594
-        // https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapEventType/#mouseout
-        //
-        onMouseOut: function onMouseOut() {
-          setHoverInfo(null);
-          setTooltips(null);
-        }
-      })));
-    }), children);
-  });
-}
-var SyncedMaps = makeSyncedMaps({
-  components: {
-    Map: Map
-  }
-});
-var templateObject_1;
-
 function hoverParseEvent(event) {
   return {
     point: [event.point.x, event.point.y],
@@ -539,6 +484,22 @@ function hoverParseEvent(event) {
 var DEFAULT_PROPS = {
   parseEvent: hoverParseEvent
 };
+function mapSetFeaturesState(map, features, state) {
+  if (!Array.isArray(features)) {
+    return;
+  }
+  features.forEach(function (feat) {
+    if (feat.id) {
+      map.setFeatureState({
+        source: feat.source,
+        sourceLayer: feat.sourceLayer,
+        id: feat.id
+      }, state);
+    } else {
+      console.warn("could not get feature id", feat);
+    }
+  });
+}
 function useHover(props, deps) {
   var _a;
   if (props === void 0) {
@@ -549,8 +510,9 @@ function useHover(props, deps) {
     isDragging = _b[0],
     setIsDragging = _b[1];
   var onDragStart = useCallback(function () {
-    return setIsDragging(true);
-  }, [setIsDragging]);
+    setTooltip(null);
+    setIsDragging(true);
+  }, []);
   var onDragEnd = useCallback(function () {
     return setIsDragging(false);
   }, [setIsDragging]);
@@ -562,8 +524,21 @@ function useHover(props, deps) {
     setHoverInfo = _d[1];
   var onMouseMove = useCallback(function (event) {
     var nextHoverInfo = props.parseEvent(event);
-    setHoverInfo(nextHoverInfo);
     setTooltip(props.tooltip ? props.tooltip(nextHoverInfo) : null);
+    var map = event.target;
+    setHoverInfo(function (prevHoverInfo) {
+      if (Array.isArray(prevHoverInfo === null || prevHoverInfo === void 0 ? void 0 : prevHoverInfo.features)) {
+        mapSetFeaturesState(map, prevHoverInfo.features, {
+          hover: false
+        });
+      }
+      if (Array.isArray(nextHoverInfo === null || nextHoverInfo === void 0 ? void 0 : nextHoverInfo.features)) {
+        mapSetFeaturesState(map, nextHoverInfo.features, {
+          hover: true
+        });
+      }
+      return nextHoverInfo;
+    });
   }, __spreadArray(__spreadArray([], deps, true), [props.tooltip], false));
   //
   // There is no notion of mouseenter/mouseleave
@@ -574,10 +549,15 @@ function useHover(props, deps) {
   // https://github.com/mapbox/mapbox-gl-js/issues/10594
   // https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapEventType/#mouseout
   //
-  var onMouseOut = useCallback(function () {
+  var onMouseOut = useCallback(function (event) {
     setHoverInfo(null);
     setTooltip(null);
-  }, [setHoverInfo, setTooltip]);
+    if (Array.isArray(hoverInfo === null || hoverInfo === void 0 ? void 0 : hoverInfo.features)) {
+      mapSetFeaturesState(event.target, hoverInfo.features, {
+        hover: false
+      });
+    }
+  }, [setHoverInfo, setTooltip, hoverInfo]);
   return [{
     onMouseMove: onMouseMove,
     onMouseOut: onMouseOut,
@@ -588,6 +568,23 @@ function useHover(props, deps) {
   }, hoverInfo, isDragging];
 }
 
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -596,15 +593,12 @@ function _iterableToArrayLimit(r, l) {
       i,
       u,
       a = [],
-      f = !0,
-      o = !1;
+      f = true,
+      o = false;
     try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
     } catch (r) {
-      o = !0, n = r;
+      o = true, n = r;
     } finally {
       try {
         if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
@@ -615,68 +609,47 @@ function _iterableToArrayLimit(r, l) {
     return a;
   }
 }
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
   if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
   }
-  return target;
+  return i;
 }
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
 }
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
 }
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
 }
 
 var _excluded = ["cursor", "onMouseMove", "onDragStart", "onDragEnd", "children"];
@@ -714,14 +687,166 @@ function withHover(Component, withHoverProps) {
   });
 }
 
+function parseHoverInfo(index, event) {
+  return {
+    index: index,
+    point: [event.point.x, event.point.y],
+    coordinates: [event.lngLat.lng, event.lngLat.lat],
+    event: event,
+    features: event.features
+  };
+}
+var SingleMapContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+function makeSyncedMaps(_a) {
+  var components = _a.components;
+  var MapComponent = components.Map;
+  return /*#__PURE__*/forwardRef(function SyncedMaps(_a, ref) {
+    var maps = _a.maps,
+      style = _a.style,
+      initialViewState = _a.initialViewState,
+      children = _a.children,
+      getTooltip = _a.tooltip,
+      baseMapProps = __rest(_a, ["maps", "style", "initialViewState", "children", "tooltip"]);
+    var _b = useRefByKey(),
+      mapInstanceRefs = _b[0],
+      setMapInstanceRef = _b[1];
+    var containerRef = useRef(null);
+    var _c = useState(initialViewState),
+      viewState = _c[0],
+      setViewState = _c[1];
+    var onSyncMove = useCallback(function (evt) {
+      return setViewState(evt.viewState);
+    }, []);
+    var _d = useState(false),
+      isDragging = _d[0],
+      setIsDragging = _d[1];
+    var onDragEnd = useCallback(function () {
+      return setIsDragging(false);
+    }, [setIsDragging]);
+    var _e = useState(null),
+      hoverInfo = _e[0],
+      setHoverInfo = _e[1];
+    var _f = useState(null),
+      tooltips = _f[0],
+      setTooltips = _f[1];
+    var onDragStart = useCallback(function () {
+      setIsDragging(true);
+      setTooltips(null);
+    }, []);
+    var _onMouseMove = useCallback(function (index, event) {
+      var nextHoverInfo = parseHoverInfo(index, event);
+      setHoverInfo(function (prevHoverInfo) {
+        mapSetFeaturesState(event.target, prevHoverInfo === null || prevHoverInfo === void 0 ? void 0 : prevHoverInfo.features, {
+          hover: false
+        });
+        mapSetFeaturesState(event.target, nextHoverInfo === null || nextHoverInfo === void 0 ? void 0 : nextHoverInfo.features, {
+          hover: true
+        });
+        return nextHoverInfo;
+      });
+      setTooltips(typeof getTooltip === 'function' ? maps.map(function (_a, index) {
+        var _b = _a.tooltip,
+          tooltip = _b === void 0 ? true : _b;
+        if (!tooltip) {
+          return null;
+        }
+        return getTooltip(nextHoverInfo, mapInstanceRefs[index]) || null;
+      }) : null);
+    }, [maps]);
+    //
+    // There is no notion of mouseenter/mouseleave
+    // in maplibre.gl.
+    //
+    // Use onMouseOut instead
+    //
+    // https://github.com/mapbox/mapbox-gl-js/issues/10594
+    // https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapEventType/#mouseout
+    //
+    var onMouseOut = useCallback(function (event) {
+      setHoverInfo(null);
+      setTooltips(null);
+      if (Array.isArray(hoverInfo === null || hoverInfo === void 0 ? void 0 : hoverInfo.features)) {
+        mapSetFeaturesState(event.target, hoverInfo.features, {
+          hover: false
+        });
+      }
+    }, [setHoverInfo, setTooltips, hoverInfo]);
+    //
+    // Expose map instances
+    //
+    useImperativeHandle(ref, function () {
+      return {
+        mapInstances: mapInstanceRefs
+      };
+    }, [mapInstanceRefs]);
+    return /*#__PURE__*/React.createElement(Flex, {
+      ref: containerRef,
+      direction: "row",
+      style: __assign({
+        position: 'relative'
+      }, style || {})
+    }, maps.map(function (mapProps, index) {
+      return /*#__PURE__*/React.createElement(SingleMapContainer, {
+        key: mapProps.id || index,
+        style: {
+          position: 'absolute',
+          top: 0,
+          height: '100%',
+          left: "calc(".concat(index, " * (100% / ").concat(maps.length, "))"),
+          width: "calc(100% / ".concat(maps.length, ")")
+        }
+      }, !isDragging && hoverInfo && hoverInfo.index !== index ? (/*#__PURE__*/React.createElement(GhostCursor, {
+        style: {
+          position: 'absolute',
+          left: hoverInfo.point[0],
+          top: hoverInfo.point[1],
+          zIndex: 2
+        }
+      })) : null, Array.isArray(tooltips) && tooltips[index], /*#__PURE__*/React.createElement(MapComponent, __assign({
+        ref: setMapInstanceRef(index),
+        cursor: isDragging ? 'grabbing' : 'default'
+      }, baseMapProps, mapProps, maps.length > 1 ? viewState || {} : {}, {
+        style: __assign(__assign({}, mapProps.style || {}), {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%'
+        }),
+        onMove: onSyncMove,
+        onDragStart: onDragStart,
+        onDragEnd: onDragEnd,
+        onMouseMove: function onMouseMove(event) {
+          return _onMouseMove(index, event);
+        },
+        //
+        // There is no notion of mouseenter/mouseleave
+        // in maplibre.gl.
+        //
+        // Use onMouseOut instead
+        //
+        // https://github.com/mapbox/mapbox-gl-js/issues/10594
+        // https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapEventType/#mouseout
+        //
+        onMouseOut: onMouseOut
+      })));
+    }), children);
+  });
+}
+var SyncedMaps = makeSyncedMaps({
+  components: {
+    Map: Map
+  }
+});
+var templateObject_1;
+
 var DEFAULT_MIN_K = 3;
 var DEFAULT_MAX_K = 9;
 //
 // https://observablehq.com/@visionscarto/natural-breaks
 //
 var elbowiness = function elbowiness(numbers, _a) {
-  _a[0];
-    var maxK = _a[1];
+  var maxK = _a[1];
   var intrass = __spreadArray([null], range(1, maxK + 1).map(function (k) {
     return k === 1 ? variance(numbers) : sum(ckmeans(numbers, k), function (v) {
       return variance(v);
@@ -822,4 +947,402 @@ function fitGeometry(map, geo, options) {
   return map.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]], __assign(__assign({}, DEFAULT_OPTIONS), options));
 }
 
-export { $naturalBreaks, HoverTooltip, LayeredMap, MapWindow, SyncedMaps, augmentFeature, fitGeometry, getSrcLayer, getSrcViewByLayerId, hoverParseEvent, makeSyncedMaps, naturalBreakBounds, parseMapViews, scaleNaturalBreaks, sortLayers, useHover, withHover };
+//
+// Taken from react-map-gl/maplibre
+// https://github.com/visgl/react-map-gl/blob/c7112cf50d6985e8427d6b187d23a4d957791bb7/modules/react-maplibre/src/utils/apply-react-style.ts
+//
+// This is a simplified version of
+// https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSPropertyOperations.js#L62
+var unitlessNumber = /box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;
+function applyReactStyle(element, styles) {
+  if (!element || !styles) {
+    return;
+  }
+  var style = element.style;
+  for (var key in styles) {
+    var value = styles[key];
+    if (Number.isFinite(value) && !unitlessNumber.test(key)) {
+      style[key] = "".concat(value, "px");
+    } else {
+      style[key] = value;
+    }
+  }
+}
+
+function ensureAddLayer(map, layerId, layer) {
+  if (!map.getLayer(layerId)) {
+    map.addLayer(__assign(__assign({}, layer), {
+      id: layerId
+    }));
+  }
+}
+function ensureRemoveLayer(map, layerId) {
+  if (map.getLayer(layerId)) {
+    map.removeLayer(layerId);
+  }
+}
+function ensureAddSource(map, sourceId, sourceSpec) {
+  if (!map.getSource(sourceId)) {
+    map.addSource(sourceId, sourceSpec);
+  }
+}
+function ensureRemoveSource(map, sourceId) {
+  if (map.getSource(sourceId)) {
+    map.removeSource(sourceId);
+  }
+}
+
+function ControlContainer(_a) {
+  var style = _a.style,
+    _b = _a.position,
+    position = _b === void 0 ? 'top-right' : _b,
+    children = _a.children;
+  var containerRef = useRef(null);
+  var mapRef = useRef(null);
+  var _c = useState(null),
+    mountPoint = _c[0],
+    setMountPoint = _c[1];
+  useControl(function () {
+    var container = document.createElement('div');
+    container.className = 'maplibregl-ctrl maplibregl-ctrl-group';
+    var mount = document.createElement('div');
+    container.appendChild(mount);
+    containerRef.current = container;
+    setMountPoint(mount);
+    return {
+      onAdd: function onAdd(map) {
+        mapRef.current = map;
+        return container;
+      },
+      onRemove: function onRemove() {
+        container.remove();
+        mapRef.current = null;
+      }
+    };
+  }, {
+    position: position
+  });
+  useEffect(function () {
+    if (style && containerRef.current) {
+      applyReactStyle(containerRef.current, style);
+    }
+  }, [style]);
+  return mountPoint ? /*#__PURE__*/createPortal(children, mountPoint) : null;
+}
+function ControlContainerWithStyleReset(_a) {
+  var _b = _a.style,
+    style = _b === void 0 ? {} : _b,
+    props = __rest(_a, ["style"]);
+  return /*#__PURE__*/React.createElement(ControlContainer, __assign({}, props, {
+    style: __assign(__assign({}, style), {
+      boxShadow: 'none',
+      borderRadius: 0
+    })
+  }));
+}
+ControlContainer.StyleReset = ControlContainerWithStyleReset;
+
+var DEFAULT_DEM_SOURCE_ID = 'dem';
+var DEFAULT_DEM_SOURCE_SPEC = {
+  url: 'https://elevation-tiles-prod.s3.amazonaws.com/terrarium/{z}/{x}/{y}.png',
+  encoding: 'terrarium',
+  attribution: 'TEST',
+  tileSize: 256
+};
+function _parseSettings(nextSettings) {
+  if (_typeof(nextSettings) === 'object' && nextSettings !== null && Object.values(nextSettings).every(function (v) {
+    return !v;
+  })) {
+    return false;
+  }
+  return nextSettings;
+}
+function _toggleSetting(setSettings, key) {
+  return setSettings(function (curr) {
+    var _a;
+    return _parseSettings(__assign(__assign({}, curr || {}), (_a = {}, _a[key] = !(curr && curr[key]), _a)));
+  });
+}
+var DEFAULT_CONTOUR_TILE_OPTIONS = {
+  // convert meters to feet, default=1 for meters
+  // multiplier: 3.28084,
+  thresholds: {
+    // zoom: [minor, major]
+    // 3: [200, 1000],
+    // 8: [200, 1000],
+    // 9: [200, 1000],
+    7: [300, 1000],
+    11: [200, 400],
+    12: [100, 300],
+    13: [50, 200],
+    14: [20, 100],
+    15: [10, 50]
+  },
+  // optional, override vector tile parameters:
+  contourLayer: 'contours',
+  elevationKey: 'ele',
+  levelKey: 'level',
+  extent: 4096,
+  buffer: 1
+};
+function TerrainControl(_a) {
+  var _b, _c;
+  var _d = _a.value,
+    externalValue = _d === void 0 ? false : _d,
+    onSetExternalValue = _a.onSetValue,
+    _e = _a.demSourceId,
+    DEM_SOURCE_ID = _e === void 0 ? DEFAULT_DEM_SOURCE_ID : _e,
+    _f = _a.demSource,
+    DEM_SOURCE_SPEC = _f === void 0 ? DEFAULT_DEM_SOURCE_SPEC : _f,
+    _g = _a.contourTileOptions,
+    contourTileOptionsInput = _g === void 0 ? DEFAULT_CONTOUR_TILE_OPTIONS : _g;
+  var _contourTileOptions = useMemo(function () {
+    return __assign(__assign({}, contourTileOptionsInput), DEFAULT_CONTOUR_TILE_OPTIONS);
+  }, [contourTileOptionsInput]);
+  var _h = useLocalState(externalValue, onSetExternalValue),
+    settings = _h[0],
+    setSettings = _h[1];
+  var mapRef = useMap();
+  var demSrcInstance = useMemo(function () {
+    var source = new mlcontour.DemSource(__assign(__assign({}, DEM_SOURCE_SPEC), {
+      url: DEM_SOURCE_SPEC.url,
+      encoding: DEM_SOURCE_SPEC.encoding,
+      maxzoom: 13
+    }));
+    // calls maplibregl.addProtocol for the shared cache and contour protocols
+    source.setupMaplibre(maplibregl);
+    return source;
+  }, [DEM_SOURCE_SPEC]);
+  function _applySettings() {
+    var _a;
+    var map = (_a = mapRef === null || mapRef === void 0 ? void 0 : mapRef.current) === null || _a === void 0 ? void 0 : _a.getMap();
+    if (!map || !map.isStyleLoaded()) {
+      return;
+    }
+    if (!settings) {
+      // Remove terrain and hillshade
+      map.setTerrain(null);
+      ensureRemoveLayer(map, 'hillshade');
+      ensureRemoveSource(map, DEM_SOURCE_ID);
+      ensureRemoveLayer(map, 'contour-lines');
+      ensureRemoveLayer(map, 'contour-labels');
+      ensureRemoveSource(map, 'contour-source');
+      // Reset pitch if desired
+      if (map.getPitch() > 0) {
+        map.easeTo({
+          pitch: 0,
+          bearing: 0,
+          duration: 500
+        });
+      }
+      return;
+    }
+    // Add DEM source if not present
+    if (!map.getSource(DEM_SOURCE_ID)) {
+      map.addSource(DEM_SOURCE_ID, __assign(__assign({
+        maxzoom: 13,
+        tileSize: 256
+      }, omit(DEM_SOURCE_SPEC, ['url', 'tiles'])), {
+        type: 'raster-dem',
+        encoding: DEM_SOURCE_SPEC.encoding,
+        tiles: [demSrcInstance.sharedDemProtocolUrl]
+      }));
+    }
+    // Add hillshade layer if not present
+    if (settings.hillshade || settings.enable3d) {
+      ensureAddLayer(map, 'hillshade', {
+        id: 'hillshade',
+        type: 'hillshade',
+        source: DEM_SOURCE_ID
+      });
+    } else {
+      ensureRemoveLayer(map, 'hillshade');
+    }
+    if (settings === null || settings === void 0 ? void 0 : settings.enable3d) {
+      ensureAddSource(map, "".concat(DEM_SOURCE_ID, "_terrain"), {
+        type: 'raster-dem',
+        // url: DEM_SOURCE_URL,
+        encoding: DEM_SOURCE_SPEC.encoding,
+        tiles: [demSrcInstance.sharedDemProtocolUrl],
+        maxzoom: 13,
+        tileSize: 256
+      });
+      map.setTerrain({
+        source: "".concat(DEM_SOURCE_ID, "_terrain"),
+        exaggeration: 1.5
+      });
+      // Optional: only tilt if pitch is low
+      if (map.getPitch() < 40) {
+        map.easeTo({
+          pitch: 60,
+          bearing: -20,
+          duration: 1000
+        });
+      }
+    } else {
+      map.setTerrain(null);
+      // Reset pitch if desired
+      if (map.getPitch() > 0) {
+        map.easeTo({
+          pitch: 0,
+          bearing: 0,
+          duration: 500
+        });
+      }
+    }
+    //
+    // Add contour
+    //
+    if (settings.contours) {
+      ensureAddSource(map, 'contour-source', {
+        type: 'vector',
+        tiles: [demSrcInstance.contourProtocolUrl(_contourTileOptions)],
+        maxzoom: 15
+      });
+      ensureAddLayer(map, 'contour-lines', {
+        id: 'contour-lines',
+        type: 'line',
+        source: 'contour-source',
+        'source-layer': 'contours',
+        paint: {
+          // 'line-color': 'rgba(0,0,0, 50%)',
+          // 'line-color': 'rgb(229, 77, 46, 80%)',
+          // 'line-color': 'rgb(46, 77, 229, 80%)',
+          'line-color': '#FF4500',
+          // level = highest index in thresholds array the elevation is a multiple of
+          'line-width': ['match', ['get', 'level'], 1, 1, 0.5]
+        }
+      });
+      ensureAddLayer(map, 'contour-labels', {
+        id: 'contour-labels',
+        type: 'symbol',
+        source: 'contour-source',
+        'source-layer': 'contours',
+        filter: ['>', ['get', 'level'], 0],
+        layout: {
+          // 'symbol-placement': 'point',
+          'symbol-placement': 'line-center',
+          // 'symbol-placement': ['step', ['zoom'], 'point', 14, 'line'],
+          'text-max-angle': 80,
+          'text-allow-overlap': true,
+          'text-ignore-placement': true,
+          'text-size': 10,
+          // 'text-field': 'test',
+          'text-field': ['concat', ['number-format', ['get', 'ele'], {
+            locale: 'pt-BR'
+          }], 'm'],
+          'text-font': ['Noto Sans Bold']
+        },
+        paint: {
+          'text-halo-color': 'white',
+          'text-halo-width': 1,
+          'text-color': '#E54D2E'
+        }
+      });
+      var CONTOURS_MIN_ZOOM = Object.keys(_contourTileOptions.thresholds).map(function (k) {
+        return parseInt(k);
+      }).sort(function (a, b) {
+        return a - b;
+      })[0];
+      if (map.getZoom() < CONTOURS_MIN_ZOOM) {
+        map.easeTo({
+          zoom: CONTOURS_MIN_ZOOM,
+          duration: 500
+        });
+      }
+    } else {
+      ensureRemoveLayer(map, 'contour-lines');
+      ensureRemoveLayer(map, 'contour-labels');
+      ensureRemoveSource(map, 'contour-source');
+    }
+  }
+  useEffect(function () {
+    _applySettings();
+  }, [(_b = mapRef.current) === null || _b === void 0 ? void 0 : _b.getMap(), settings]);
+  useEffect(function () {
+    var _a;
+    var map = (_a = mapRef.current) === null || _a === void 0 ? void 0 : _a.getMap();
+    if (!map) {
+      return function () {};
+    }
+    var handleStyleLoad = function handleStyleLoad() {
+      map.once('idle', _applySettings);
+      // setTimeout(_applySettings, 1000)
+      // ()
+      // if (settings && settings.enable3d) {
+      //   const terrainDemSourceId = `${DEM_SOURCE_ID}_terrain`
+      //   ensureAddSource(map, terrainDemSourceId, {
+      //     type: 'raster-dem',
+      //     // url: DEM_SOURCE_URL,
+      //     encoding: DEM_SOURCE_ENCODING,
+      //     tiles: [demSrcInstance.sharedDemProtocolUrl],
+      //     maxzoom: 13,
+      //     tileSize: 256,
+      //   })
+      //   map.setTerrain({ source: terrainDemSourceId, exaggeration: 1.5 })
+      // }
+    };
+    map.on('style.load', handleStyleLoad);
+    return function () {
+      return map.off('style.load', handleStyleLoad);
+    };
+  }, [(_c = mapRef.current) === null || _c === void 0 ? void 0 : _c.getMap(), settings && settings.enable3d]);
+  return /*#__PURE__*/React.createElement(ControlContainer, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+    size: "1",
+    options: [{
+      label: (/*#__PURE__*/React.createElement(React.Fragment, null, "Relevo", settings && (settings.hillshade || settings.enable3d) && (/*#__PURE__*/React.createElement(Icon, {
+        path: mdiCheck,
+        size: "12px"
+      })))),
+      disabled: settings && settings.enable3d,
+      onClick: function onClick() {
+        return _toggleSetting(setSettings, 'hillshade');
+      }
+    }, {
+      label: (/*#__PURE__*/React.createElement(React.Fragment, null, "3D", settings && settings.enable3d && (/*#__PURE__*/React.createElement(Icon, {
+        path: mdiCheck,
+        size: "12px"
+      })))),
+      onClick: function onClick() {
+        return _toggleSetting(setSettings, 'enable3d');
+      }
+    }, {
+      label: (/*#__PURE__*/React.createElement(React.Fragment, null, "Curvas de n\xEDvel", settings && settings.contours && (/*#__PURE__*/React.createElement(Icon, {
+        path: mdiCheck,
+        size: "12px"
+      })))),
+      onClick: function onClick() {
+        return _toggleSetting(setSettings, 'contours');
+      }
+    }]
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-label": "Relevo",
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: "Relevo"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: settings ? 'var(--accent-9)' : 'inherit',
+    path: mdiTerrain,
+    size: "24px"
+  })), settings && settings.enable3d && (/*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 14,
+      height: 14,
+      background: 'var(--accent-9)',
+      color: 'var(--accent-contrast)',
+      borderRadius: '50%',
+      position: 'absolute',
+      top: '100%',
+      left: '100%',
+      transform: 'translate(-50%, -50%)'
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    path: mdiVideo3d,
+    size: "14px"
+  }))))));
+}
+
+export { $naturalBreaks, ControlContainer, HoverTooltip, LayeredMap, MapWindow, SyncedMaps, TerrainControl, applyReactStyle, augmentFeature, ensureAddLayer, ensureAddSource, ensureRemoveLayer, ensureRemoveSource, fitGeometry, getSrcLayer, getSrcViewByLayerId, hoverParseEvent, makeSyncedMaps, mapSetFeaturesState, naturalBreakBounds, parseMapViews, scaleNaturalBreaks, sortLayers, useClientRect, useHover, withHover };