@evergis/react 2.0.50 → 2.0.53

package/dist/react.esm.js

@@ -37,7 +37,7 @@ import { GridClusterProvider } from '@evergis/sgis/es/layers/clusterProviders/Gr
 import { PointEditor } from '@evergis/sgis/es/controls/PointEditor';
 import { debounce } from '@evergis/sgis/es/utils/utils';
 import styled, { css } from 'styled-components';
-import { Icon, EverCloudZoomtoIcon, EverCloudCloseIcon, EverCloudPlayPrevIcon, EverCloudPlayNextIcon, EverCloudStatisticsIcon, EverCloudSearchIcon, EverCloudPlusIcon, EverCloudMinusIcon, EverCloudMaximizeIcon, EverCloudMeasureLenghtIcon } from '@evergis/icons';
+import { Icon } from '@evergis/ui';
 import punycode from 'punycode';
 import { TileLayer as TileLayer$1 } from '@evergis/sgis/es/layers/TileLayer';
 import { PolylineControl } from '@evergis/sgis/es/controls/PolylineControl';
@@ -624,21 +624,6 @@ let ClassificationCondition = /*#__PURE__*/function () {
   }
 
   _createClass(ClassificationCondition, [{
-    key: "isUnique",
-    value: function isUnique() {
-      return this.leftExpression.operation === TokenType.ArEq;
-    }
-  }, {
-    key: "isRange",
-    value: function isRange() {
-      return [TokenType.ArGr, TokenType.ArGre, TokenType.ArLs, TokenType.ArLse].includes(this.leftExpression.operation);
-    }
-  }, {
-    key: "toString",
-    value: function toString() {
-      return this.condition;
-    }
-  }, {
     key: "attributeName",
     get: function get() {
       return this.leftExpression.attribute;
@@ -694,6 +679,21 @@ let ClassificationCondition = /*#__PURE__*/function () {
       /* Range */
       ;
     }
+  }, {
+    key: "isUnique",
+    value: function isUnique() {
+      return this.leftExpression.operation === TokenType.ArEq;
+    }
+  }, {
+    key: "isRange",
+    value: function isRange() {
+      return [TokenType.ArGr, TokenType.ArGre, TokenType.ArLs, TokenType.ArLse].includes(this.leftExpression.operation);
+    }
+  }, {
+    key: "toString",
+    value: function toString() {
+      return this.condition;
+    }
   }, {
     key: "leftExpression",
     get: function get() {
@@ -888,6 +888,11 @@ let ClassificationManager = /*#__PURE__*/function () {
   }
 
   _createClass(ClassificationManager, [{
+    key: "values",
+    get: function get() {
+      return this.classifications;
+    }
+  }, {
     key: "find",
     value: function find(predicate) {
       for (const classification of this.classifications) {
@@ -929,11 +934,6 @@ let ClassificationManager = /*#__PURE__*/function () {
         this.classifications.push(...getClassifications(this.style.symbol));
       }
     }
-  }, {
-    key: "values",
-    get: function get() {
-      return this.classifications;
-    }
   }]);
 
   return ClassificationManager;
@@ -1062,6 +1062,7 @@ const mergeAttributes = (attributes1, attributes2) => {
   }) || {}));
 };
 
+const _excluded = ["ignoreLabel", "label", "symbol", "raster", "children"];
 const createCompositeSymbol = childSymbols => ({
   type: 'compositeSymbol',
   childSymbols
@@ -1099,7 +1100,7 @@ const packStyle = style => {
     raster,
     children
   } = style,
-        styleDc = _objectWithoutPropertiesLoose(style, ["ignoreLabel", "label", "symbol", "raster", "children"]);
+        styleDc = _objectWithoutPropertiesLoose(style, _excluded);
 
   const childSymbols = [!ignoreLabel && label, raster].filter(Boolean);
   return _extends({}, styleDc, {
@@ -1531,6 +1532,11 @@ let ArrowLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
   }
 
   _createClass(ArrowLineMiterRender, [{
+    key: "usageSize",
+    get: function get() {
+      return this.miterSize + this.strokeWidth;
+    }
+  }, {
     key: "createRings",
     value: function createRings(_ref, xMultiplier) {
       let [x, y] = _ref;
@@ -1550,11 +1556,6 @@ let ArrowLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
         strokeWidth: this.strokeWidth
       });
     }
-  }, {
-    key: "usageSize",
-    get: function get() {
-      return this.miterSize + this.strokeWidth;
-    }
   }]);
 
   return ArrowLineMiterRender;
@@ -1572,6 +1573,11 @@ let CircleLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
   }
 
   _createClass(CircleLineMiterRender, [{
+    key: "usageSize",
+    get: function get() {
+      return this.miterSize + this.strokeWidth * 3;
+    }
+  }, {
     key: "createRings",
     value: function createRings(_ref, xMultiplier) {
       let [x, y] = _ref;
@@ -1588,11 +1594,6 @@ let CircleLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
         enclosed: true
       });
     }
-  }, {
-    key: "usageSize",
-    get: function get() {
-      return this.miterSize + this.strokeWidth * 3;
-    }
   }]);
 
   return CircleLineMiterRender;
@@ -1610,6 +1611,11 @@ let SquareLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
   }
 
   _createClass(SquareLineMiterRender, [{
+    key: "usageSize",
+    get: function get() {
+      return this.miterSize + this.strokeWidth;
+    }
+  }, {
     key: "createRings",
     value: function createRings(_ref, xMultiplier) {
       let [x, y] = _ref;
@@ -1629,11 +1635,6 @@ let SquareLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
         strokeWidth: this.strokeWidth
       });
     }
-  }, {
-    key: "usageSize",
-    get: function get() {
-      return this.miterSize + this.strokeWidth;
-    }
   }]);
 
   return SquareLineMiterRender;
@@ -2321,7 +2322,7 @@ let SVGPoly = /*#__PURE__*/function (_Symbol) {
       }
 
       const polygon = feature.projectTo(bbox.crs);
-      const radiusOffset = ((_this$pathStyles = this.pathStyles) == null ? void 0 : _this$pathStyles.radius) ? ((_this$pathStyles2 = this.pathStyles) == null ? void 0 : _this$pathStyles2.radius) + (((_this$pathStyles3 = this.pathStyles) == null ? void 0 : _this$pathStyles3.strokeWidth) ? ((_this$pathStyles4 = this.pathStyles) == null ? void 0 : _this$pathStyles4.strokeWidth) / 2 : 0) : 0;
+      const radiusOffset = (_this$pathStyles = this.pathStyles) != null && _this$pathStyles.radius ? ((_this$pathStyles2 = this.pathStyles) == null ? void 0 : _this$pathStyles2.radius) + ((_this$pathStyles3 = this.pathStyles) != null && _this$pathStyles3.strokeWidth ? ((_this$pathStyles4 = this.pathStyles) == null ? void 0 : _this$pathStyles4.strokeWidth) / 2 : 0) : 0;
       const dx = Math.round((polygon.bbox.xMin - bbox.xMin) / resolution) - radiusOffset;
       const dy = Math.round((bbox.yMax - polygon.bbox.yMax) / resolution) - radiusOffset;
       this.container.style.left = dx.toString() + "px";
@@ -3932,16 +3933,8 @@ const Symbol = (_ref) => {
   });
 };
 
-function _templateObject() {
-  const data = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  height: 32px;\n  width: 32px;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-const CompoundIcon = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject(), (_ref) => {
+var _templateObject;
+const CompoundIcon = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: ", ";\n  height: 32px;\n  width: 32px;\n"])), (_ref) => {
   let {
     geometryType,
     icons
@@ -3971,236 +3964,44 @@ const StyleSymbol = (_ref) => {
   }) : null));
 };
 
-function _templateObject21() {
-  const data = _taggedTemplateLiteralLoose([""]);
-
-  _templateObject21 = function _templateObject21() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject20() {
-  const data = _taggedTemplateLiteralLoose([""]);
-
-  _templateObject20 = function _templateObject20() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject19() {
-  const data = _taggedTemplateLiteralLoose([""]);
-
-  _templateObject19 = function _templateObject19() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject18() {
-  const data = _taggedTemplateLiteralLoose([""]);
-
-  _templateObject18 = function _templateObject18() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject17() {
-  const data = _taggedTemplateLiteralLoose([""]);
-
-  _templateObject17 = function _templateObject17() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject16() {
-  const data = _taggedTemplateLiteralLoose(["\n  padding: 0 0.25rem;\n  color: #1fb3aa;\n  text-decoration: none;\n"]);
-
-  _templateObject16 = function _templateObject16() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject15() {
-  const data = _taggedTemplateLiteralLoose([""]);
-
-  _templateObject15 = function _templateObject15() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject14() {
-  const data = _taggedTemplateLiteralLoose(["\n  flex-wrap: wrap;\n  display: flex;\n"]);
-
-  _templateObject14 = function _templateObject14() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject13() {
-  const data = _taggedTemplateLiteralLoose(["\n  color: #30454f;\n  font-size: 0.75rem;\n  margin: 0.25rem 0;\n"]);
-
-  _templateObject13 = function _templateObject13() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject12() {
-  const data = _taggedTemplateLiteralLoose(["\n  padding-bottom: 0.5rem;\n"]);
-
-  _templateObject12 = function _templateObject12() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject11() {
-  const data = _taggedTemplateLiteralLoose(["\n  padding: 1rem 1.5rem;\n  overflow-y: scroll;\n"]);
-
-  _templateObject11 = function _templateObject11() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject10() {
-  const data = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  padding: 0 0.25rem;\n  color: #1fb3aa;\n"]);
-
-  _templateObject10 = function _templateObject10() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject9() {
-  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n"]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 2.5rem;\n  padding: 0 1.5rem;\n  align-items: center;\n  font-size: 0.75rem;\n  justify-content: space-between;\n  background: linear-gradient(\n    0deg,\n    rgba(161, 186, 208, 0.12),\n    rgba(161, 186, 208, 0.12)\n  );\n"]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  const data = _taggedTemplateLiteralLoose(["\n  color: #30454f;\n  font-size: 0.75rem;\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  const data = _taggedTemplateLiteralLoose(["\n  font-size: 1.25rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n\n  ", " {\n    margin: 0 0.5rem;\n  }\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin: 0 0.5rem;\n  width: 13.5rem;\n  flex-grow: 1;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 1.5rem 1.5rem 1rem;\n  align-items: center;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: sticky;\n  top: 0;\n  flex-direction: column;\n  background: #fff;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$1() {
-  const data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 2.25rem;\n  right: 0.5rem;\n  width: 22.5rem;\n  margin-bottom: 1rem;\n  max-height: 90%;\n  min-height: 1rem;\n  background: #fff;\n  border-radius: 4px;\n  z-index: 1;\n\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  overflow: initial;\n  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);\n\n  ", " {\n    color: rgba(0, 0, 0, 0.65);\n    cursor: pointer;\n    user-select: none;\n\n    &:hover {\n      color: #1fb3aa;\n    }\n  }\n"]);
-
-  _templateObject$1 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-const EvergisCardContainer = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject$1(), Icon);
-const StickyHeader = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject2());
-const CardHeader = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject3());
-const CardTitle = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject4());
-const CardControls = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject5(), Icon);
-const FeatureName = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject6());
-const LayerName = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject7());
-const CardPagination = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject8());
-const PaginationDescription = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject9());
-const CurrentFeatureIndex = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject10());
-const CardAttributes = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject11());
-const AttributeContainer = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject12());
-const AttributeTitle = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject13());
-const AttributeValueContainer = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject14());
-const SimpleAttribute = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject15());
-const ValueLink = /*#__PURE__*/styled.a( /*#__PURE__*/_templateObject16());
-const StatIcon = /*#__PURE__*/styled(EverCloudStatisticsIcon)( /*#__PURE__*/_templateObject17());
-const ZoomIcon = /*#__PURE__*/styled(EverCloudZoomtoIcon)( /*#__PURE__*/_templateObject18());
-const CloseIcon = /*#__PURE__*/styled(EverCloudCloseIcon)( /*#__PURE__*/_templateObject19());
-const PrevIcon = /*#__PURE__*/styled(EverCloudPlayPrevIcon)( /*#__PURE__*/_templateObject20());
-const NextIcon = /*#__PURE__*/styled(EverCloudPlayNextIcon)( /*#__PURE__*/_templateObject21());
+var _templateObject$1, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+const EvergisCardContainer = /*#__PURE__*/styled.div(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 2.25rem;\n  right: 0.5rem;\n  width: 22.5rem;\n  margin-bottom: 1rem;\n  max-height: 90%;\n  min-height: 1rem;\n  background: #fff;\n  border-radius: 4px;\n  z-index: 1;\n\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  overflow: initial;\n  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);\n\n  ", " {\n    color: rgba(0, 0, 0, 0.65);\n    cursor: pointer;\n    user-select: none;\n\n    &:hover {\n      color: #1fb3aa;\n    }\n  }\n"])), Icon);
+const StickyHeader = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  position: sticky;\n  top: 0;\n  flex-direction: column;\n  background: #fff;\n"])));
+const CardHeader = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 1.5rem 1.5rem 1rem;\n  align-items: center;\n"])));
+const CardTitle = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin: 0 0.5rem;\n  width: 13.5rem;\n  flex-grow: 1;\n"])));
+const CardControls = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n\n  ", " {\n    margin: 0 0.5rem;\n  }\n"])), Icon);
+const FeatureName = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 1.25rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+const LayerName = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #30454f;\n  font-size: 0.75rem;\n"])));
+const CardPagination = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 2.5rem;\n  padding: 0 1.5rem;\n  align-items: center;\n  font-size: 0.75rem;\n  justify-content: space-between;\n  background: linear-gradient(\n    0deg,\n    rgba(161, 186, 208, 0.12),\n    rgba(161, 186, 208, 0.12)\n  );\n"])));
+const PaginationDescription = /*#__PURE__*/styled.div(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+const CurrentFeatureIndex = /*#__PURE__*/styled.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  padding: 0 0.25rem;\n  color: #1fb3aa;\n"])));
+const CardAttributes = /*#__PURE__*/styled.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 1rem 1.5rem;\n  overflow-y: scroll;\n"])));
+const AttributeContainer = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 0.5rem;\n"])));
+const AttributeTitle = /*#__PURE__*/styled.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #30454f;\n  font-size: 0.75rem;\n  margin: 0.25rem 0;\n"])));
+const AttributeValueContainer = /*#__PURE__*/styled.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex-wrap: wrap;\n  display: flex;\n"])));
+const SimpleAttribute = /*#__PURE__*/styled.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+const ValueLink = /*#__PURE__*/styled.a(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 0.25rem;\n  color: #1fb3aa;\n  text-decoration: none;\n"])));
+const featureCardIconMixin = /*#__PURE__*/css(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #30454f;\n"])));
+const StatIcon = /*#__PURE__*/styled(Icon)(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
+StatIcon.defaultProps = {
+  kind: "statistics"
+};
+const ZoomIcon = /*#__PURE__*/styled(Icon)(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
+ZoomIcon.defaultProps = {
+  kind: "plus"
+};
+const CloseIcon = /*#__PURE__*/styled(Icon)(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
+CloseIcon.defaultProps = {
+  kind: "close"
+};
+const PrevIcon = /*#__PURE__*/styled(Icon)(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
+PrevIcon.defaultProps = {
+  kind: "prev"
+};
+const NextIcon = /*#__PURE__*/styled(Icon)(_templateObject22 || (_templateObject22 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
+NextIcon.defaultProps = {
+  kind: "next"
+};
 
 const MailValue = (_ref) => {
   let {
@@ -4344,13 +4145,14 @@ const StyledCard = (_ref) => {
   })));
 };
 
+const _excluded$1 = ["renderCard", "className", "children"];
 const EvergisCard = (_ref) => {
   let {
     renderCard,
     className,
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["renderCard", "className", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
   const {
     features = []
@@ -4414,13 +4216,14 @@ const EvergisTileLayer = props => {
   return null;
 };
 
+const _excluded$2 = ["maskUrl", "zIndex", "isDisplayed"];
 function useTileLayer(_ref) {
   let {
     maskUrl,
     zIndex,
     isDisplayed
   } = _ref,
-      tileLayerParams = _objectWithoutPropertiesLoose(_ref, ["maskUrl", "zIndex", "isDisplayed"]);
+      tileLayerParams = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   const {
     map
@@ -4468,60 +4271,12 @@ const EvergisSelect = (_ref) => {
   }));
 };
 
-function _templateObject5$1() {
-  const data = _taggedTemplateLiteralLoose(["\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n"]);
-
-  _templateObject5$1 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4$1() {
-  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 0.625rem;\n  padding: 0.125rem 0;\n\n  ", " {\n    padding-left: 0.5rem;\n  }\n"]);
-
-  _templateObject4$1 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3$1() {
-  const data = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 0;\n"]);
-
-  _templateObject3$1 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2$1() {
-  const data = _taggedTemplateLiteralLoose([""]);
-
-  _templateObject2$1 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$2() {
-  const data = _taggedTemplateLiteralLoose(["\n  background-color: #fff;\n\n  canvas {\n    border-radius: 0.125rem;\n  }\n"]);
-
-  _templateObject$2 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-const LegendContainer = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject$2());
-const LegendSectionContainer = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject2$1());
-const LegendSymbolTitle = /*#__PURE__*/styled.p( /*#__PURE__*/_templateObject3$1());
-const LegendValueContainer = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject4$1(), LegendSymbolTitle);
-const LegendSectionHeader = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject5$1());
+var _templateObject$2, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1;
+const LegendContainer = /*#__PURE__*/styled.div(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #fff;\n\n  canvas {\n    border-radius: 0.125rem;\n  }\n"])));
+const LegendSectionContainer = /*#__PURE__*/styled.div(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+const LegendSymbolTitle = /*#__PURE__*/styled.p(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 0;\n"])));
+const LegendValueContainer = /*#__PURE__*/styled.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 0.625rem;\n  padding: 0.125rem 0;\n\n  ", " {\n    padding-left: 0.5rem;\n  }\n"])), LegendSymbolTitle);
+const LegendSectionHeader = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n"])));
 
 const LegendSection = (_ref) => {
   let {
@@ -4532,38 +4287,13 @@ const LegendSection = (_ref) => {
   return React.createElement(LegendSectionContainer, null, React.createElement(LegendSectionHeader, null, renderLegendTitle ? renderLegendTitle(item) : item.title), item.values.map(children));
 };
 
-function _templateObject3$2() {
-  const data = _taggedTemplateLiteralLoose(["\n  color: rgba(48, 69, 79, 0.54);\n  padding: 0.25rem;\n\n  &:hover {\n    cursor: pointer;\n    color: rgba(48, 69, 79, 0.87);\n  }\n"]);
-
-  _templateObject3$2 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2$2() {
-  const data = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: none;\n  outline: none;\n  font-size: 1rem;\n  line-height: 1.1875rem;\n  padding: 0 0.5rem;\n  background-color: transparent;\n  color: rgba(48, 69, 79, 0.87);\n"]);
-
-  _templateObject2$2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$3() {
-  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border-radius: 0.125rem;\n  box-sizing: border-box;\n  border: 0.0625rem solid rgba(48, 69, 79, 0.12);\n  margin-bottom: 0.5rem;\n"]);
-
-  _templateObject$3 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-const InputContainer = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject$3());
-const InputField = /*#__PURE__*/styled.input( /*#__PURE__*/_templateObject2$2());
-const SearchPrefix = /*#__PURE__*/styled(EverCloudSearchIcon)( /*#__PURE__*/_templateObject3$2());
+var _templateObject$3, _templateObject2$2, _templateObject3$2;
+const InputContainer = /*#__PURE__*/styled.div(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border-radius: 0.125rem;\n  box-sizing: border-box;\n  border: 0.0625rem solid rgba(48, 69, 79, 0.12);\n  margin-bottom: 0.5rem;\n"])));
+const InputField = /*#__PURE__*/styled.input(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: none;\n  outline: none;\n  font-size: 1rem;\n  line-height: 1.1875rem;\n  padding: 0 0.5rem;\n  background-color: transparent;\n  color: rgba(48, 69, 79, 0.87);\n"])));
+const SearchPrefix = /*#__PURE__*/styled(Icon)(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: rgba(48, 69, 79, 0.54);\n  padding: 0.25rem;\n\n  &:hover {\n    cursor: pointer;\n    color: rgba(48, 69, 79, 0.87);\n  }\n"])));
+SearchPrefix.defaultProps = {
+  kind: "search"
+};
 
 const SearchInput = (_ref) => {
   let {
@@ -4718,63 +4448,15 @@ const Map = (_ref) => {
   }, children);
 };
 
-function _templateObject5$2() {
-  const data = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  ", "\n  ", "\n"]);
-
-  _templateObject5$2 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4$2() {
-  const data = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  right: ", ";\n"]);
-
-  _templateObject4$2 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3$3() {
-  const data = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  left: ", ";\n"]);
-
-  _templateObject3$3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2$3() {
-  const data = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  right: ", ";\n"]);
-
-  _templateObject2$3 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$4() {
-  const data = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  left: ", ";\n"]);
-
-  _templateObject$4 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$2, _templateObject5$2;
 
-const topLeft = distance => css(_templateObject$4(), distance, distance);
+const topLeft = distance => css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  left: ", ";\n"])), distance, distance);
 
-const topRight = distance => css(_templateObject2$3(), distance, distance);
+const topRight = distance => css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  right: ", ";\n"])), distance, distance);
 
-const bottomLeft = distance => css(_templateObject3$3(), distance, distance);
+const bottomLeft = distance => css(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  left: ", ";\n"])), distance, distance);
 
-const bottomRight = distance => css(_templateObject4$2(), distance, distance);
+const bottomRight = distance => css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  right: ", ";\n"])), distance, distance);
 
 const placementMixin = function placementMixin(placement, distance) {
   if (placement === void 0) {
@@ -4785,97 +4467,34 @@ const placementMixin = function placementMixin(placement, distance) {
     distance = '1rem';
   }
 
-  return css(_templateObject5$2(), placement === 'top-left' && topLeft(distance), placement === 'top-right' && topRight(distance), placement === 'bottom-left' && bottomLeft(distance), placement === 'bottom-right' && bottomRight(distance));
+  return css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), placement === 'top-left' && topLeft(distance), placement === 'top-right' && topRight(distance), placement === 'bottom-left' && bottomLeft(distance), placement === 'bottom-right' && bottomRight(distance));
 };
 
-function _templateObject8$1() {
-  const data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: flex;\n  flex-direction: ", ";\n\n  ", "\n\n  ", " {\n    margin-bottom: ", ";\n    margin-right: ", ";\n    flex-direction: ", ";\n  }\n"]);
-
-  _templateObject8$1 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7$1() {
-  const data = _taggedTemplateLiteralLoose(["\n  border-radius: 0.15rem;\n  background: rgba(28, 33, 48, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  font-size: 1.5rem;\n  cursor: pointer;\n  height: auto;\n  width: auto;\n  padding: 0.25rem;\n"]);
-
-  _templateObject7$1 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6$1() {
-  const data = _taggedTemplateLiteralLoose(["\n  ", "\n"]);
-
-  _templateObject6$1 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5$3() {
-  const data = _taggedTemplateLiteralLoose(["\n  ", "\n"]);
-
-  _templateObject5$3 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4$3() {
-  const data = _taggedTemplateLiteralLoose(["\n  ", "\n"]);
-
-  _templateObject4$3 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3$4() {
-  const data = _taggedTemplateLiteralLoose(["\n  ", "\n"]);
-
-  _templateObject3$4 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2$4() {
-  const data = _taggedTemplateLiteralLoose(["\n  ", "\n"]);
-
-  _templateObject2$4 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$5() {
-  const data = _taggedTemplateLiteralLoose(["\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"]);
-
-  _templateObject$5 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-const mapControlBtnMixin = /*#__PURE__*/css( /*#__PURE__*/_templateObject$5());
-const ZoomInBtn = /*#__PURE__*/styled(EverCloudPlusIcon)( /*#__PURE__*/_templateObject2$4(), mapControlBtnMixin);
-const ZoomOutBtn = /*#__PURE__*/styled(EverCloudMinusIcon)( /*#__PURE__*/_templateObject3$4(), mapControlBtnMixin);
-const SearchBtn = /*#__PURE__*/styled(EverCloudSearchIcon)( /*#__PURE__*/_templateObject4$3(), mapControlBtnMixin); // TODO not exists in fonts
-
-const FullscreenBtn = /*#__PURE__*/styled(EverCloudMaximizeIcon)( /*#__PURE__*/_templateObject5$3(), mapControlBtnMixin);
-const MeasureBtn = /*#__PURE__*/styled(EverCloudMeasureLenghtIcon)( /*#__PURE__*/_templateObject6$1(), mapControlBtnMixin);
-const MapControl = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject7$1());
-const MapControls = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject8$1(), (_ref) => {
+var _templateObject$5, _templateObject2$4, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1;
+const mapControlBtnMixin = /*#__PURE__*/css(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: #fff;\n"])));
+const ZoomInBtn = /*#__PURE__*/styled(Icon)(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
+ZoomInBtn.defaultProps = {
+  kind: "plus"
+};
+const ZoomOutBtn = /*#__PURE__*/styled(Icon)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
+ZoomOutBtn.defaultProps = {
+  kind: "minus"
+};
+const SearchBtn = /*#__PURE__*/styled(Icon)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
+SearchBtn.defaultProps = {
+  kind: "search"
+}; // TODO not exists in fonts
+
+const FullscreenBtn = /*#__PURE__*/styled(Icon)(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
+FullscreenBtn.defaultProps = {
+  kind: "maximize"
+};
+const MeasureBtn = /*#__PURE__*/styled(Icon)(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
+MeasureBtn.defaultProps = {
+  kind: "measure_length"
+};
+const MapControl = /*#__PURE__*/styled.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0.15rem;\n  background: rgba(28, 33, 48, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  font-size: 1.5rem;\n  cursor: pointer;\n  height: auto;\n  width: auto;\n  padding: 0.25rem;\n"])));
+const MapControls = /*#__PURE__*/styled.div(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: flex;\n  flex-direction: ", ";\n\n  ", "\n\n  ", " {\n    margin-bottom: ", ";\n    margin-right: ", ";\n    flex-direction: ", ";\n  }\n"])), (_ref) => {
   let {
     vertical
   } = _ref;
@@ -4920,60 +4539,12 @@ const Fullscreen = () => {
   }));
 };
 
-function _templateObject5$4() {
-  const data = _taggedTemplateLiteralLoose(["\n  margin: 0.5rem;\n  font-size: 0.625rem;\n  opacity: 0.65;\n"]);
-
-  _templateObject5$4 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4$4() {
-  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"]);
-
-  _templateObject4$4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3$5() {
-  const data = _taggedTemplateLiteralLoose(["\n  margin: 0;\n"]);
-
-  _templateObject3$5 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2$5() {
-  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 16.5rem;\n  height: 3.875rem;\n  align-items: center;\n  padding: 0.5rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1rem;\n    width: 0.835rem;\n  }\n"]);
-
-  _templateObject2$5 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$6() {
-  const data = _taggedTemplateLiteralLoose(["\n  cursor: default;\n"]);
-
-  _templateObject$6 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-const MapLegendControl = /*#__PURE__*/styled(MapControl)( /*#__PURE__*/_templateObject$6());
-const MapLegendContainer = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject2$5());
-const MapLegendHeader = /*#__PURE__*/styled(LegendSectionHeader)( /*#__PURE__*/_templateObject3$5());
-const MapLegendSection = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject4$4());
-const MapLegendValueDescr = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject5$4());
+var _templateObject$6, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4;
+const MapLegendControl = /*#__PURE__*/styled(MapControl)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: default;\n"])));
+const MapLegendContainer = /*#__PURE__*/styled.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 16.5rem;\n  height: 3.875rem;\n  align-items: center;\n  padding: 0.5rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1rem;\n    width: 0.835rem;\n  }\n"])));
+const MapLegendHeader = /*#__PURE__*/styled(LegendSectionHeader)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
+const MapLegendSection = /*#__PURE__*/styled.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
+const MapLegendValueDescr = /*#__PURE__*/styled.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0.5rem;\n  font-size: 0.625rem;\n  opacity: 0.65;\n"])));
 
 const MAX_SIZE$2 = 100;
 const MapLegendSymbol = (_ref) => {
@@ -5533,11 +5104,12 @@ let MeasureTool = /*#__PURE__*/function (_React$Component) {
   return MeasureTool;
 }(React.Component);
 
+const _excluded$3 = ["isActive"];
 const Measurer = (_ref) => {
   let {
     isActive
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["isActive"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   const {
     map,
@@ -5549,43 +5121,15 @@ const Measurer = (_ref) => {
   }, props)) : null;
 };
 
-function _templateObject3$6() {
-  const data = _taggedTemplateLiteralLoose(["\n  height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: ", ";\n  width: ", ";\n  color: #fff;\n  font-size: 1rem;\n  cursor: default;\n  padding: 0 0.5rem;\n"]);
-
-  _templateObject3$6 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2$6() {
-  const data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  width: ", ";\n  height: 0.25rem;\n  border: 0.0625rem solid white;\n  border-top: 0;\n"]);
-
-  _templateObject2$6 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$7() {
-  const data = _taggedTemplateLiteralLoose(["\n  height: 2rem;\n  cursor: default;\n  display: flex;\n  align-items: flex-end;\n  padding: 0 0.5rem 0.5rem;\n  box-sizing: border-box;\n"]);
-
-  _templateObject$7 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-const ScaleRulerContainer = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject$7());
-const ScaleRulerBlock = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject2$6(), (_ref) => {
+var _templateObject$7, _templateObject2$6, _templateObject3$6;
+const ScaleRulerContainer = /*#__PURE__*/styled.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  cursor: default;\n  display: flex;\n  align-items: flex-end;\n  padding: 0 0.5rem 0.5rem;\n  box-sizing: border-box;\n"])));
+const ScaleRulerBlock = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  width: ", ";\n  height: 0.25rem;\n  border: 0.0625rem solid white;\n  border-top: 0;\n"])), (_ref) => {
   let {
     width
   } = _ref;
   return width + "px";
 });
-const TextContainer = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject3$6(), (_ref2) => {
+const TextContainer = /*#__PURE__*/styled.div(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: ", ";\n  width: ", ";\n  color: #fff;\n  font-size: 1rem;\n  cursor: default;\n  padding: 0 0.5rem;\n"])), (_ref2) => {
   let {
     alignEnd
   } = _ref2;
@@ -5638,141 +5182,33 @@ const ZoomLevel = () => {
   }, level || 0);
 };
 
-function _templateObject11$1() {
-  const data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 999;\n  display: flex;\n  font-size: 0.625rem;\n  color: #fff;\n  background-color: rgba(28, 33, 48, 0.8);\n  padding: 0.4em 0.6em;\n  border-radius: 2px;\n  user-select: none;\n  box-sizing: border-box;\n  white-space: pre;\n  ", "\n  ", "\n"]);
-
-  _templateObject11$1 = function _templateObject11() {
-    return data;
-  };
+var _templateObject$8, _templateObject2$7, _templateObject3$7, _templateObject4$5, _templateObject5$5, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1;
 
-  return data;
-}
+const cornerBottom = cornerSize => css(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  &:before {\n    left: 50%;\n    transform: translate(-50%, 100%);\n    bottom: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-top: ", " solid rgba(28, 33, 48, 0.8);\n  }\n"])), cornerSize, cornerSize, cornerSize);
 
-function _templateObject10$1() {
-  const data = _taggedTemplateLiteralLoose(["\n  &:before {\n    content: '';\n    width: 0;\n    height: 0;\n    position: absolute;\n  }\n"]);
+const cornerLeft = cornerSize => css(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n  &:before {\n    transform: translate(-100%, -50%);\n    left: 0;\n    top: 50%;\n    border-top: ", " solid transparent;\n    border-right: ", " solid rgba(28, 33, 48, 0.8);\n    border-bottom: ", " solid transparent;\n  }\n"])), cornerSize, cornerSize, cornerSize);
 
-  _templateObject10$1 = function _templateObject10() {
-    return data;
-  };
+const cornerRight = cornerSize => css(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n  &:before {\n    transform: translate(100%, -50%);\n    right: 0;\n    top: 50%;\n    border-top: ", " solid transparent;\n    border-left: ", " solid rgba(28, 33, 48, 0.8);\n    border-bottom: ", " solid transparent;\n  }\n"])), cornerSize, cornerSize, cornerSize);
 
-  return data;
-}
+const cornerTop = cornerSize => css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  &:before {\n    transform: translate(-50%, -100%);\n    left: 50%;\n    top: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-bottom: ", " solid rgba(28, 33, 48, 0.8);\n  }\n"])), cornerSize, cornerSize, cornerSize);
 
-function _templateObject9$1() {
-  const data = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  ", "\n  ", "\n"]);
+const top = (distance, cornerSize) => css(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n  transform: translate(-50%, 0);\n  left: -50%;\n  bottom: ", ";\n  ", "\n"])), distance, cornerSize && cornerBottom(cornerSize));
 
-  _templateObject9$1 = function _templateObject9() {
-    return data;
-  };
+const right = (distance, cornerSize) => css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n  transform: translate(0, -50%);\n  top: -50%;\n  left: ", ";\n  ", "\n"])), distance, cornerSize && cornerLeft(cornerSize));
 
-  return data;
-}
+const left = (distance, cornerSize) => css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  transform: translate(0, -50%);\n  top: -50%;\n  right: ", ";\n  ", "\n"])), distance, cornerSize && cornerRight(cornerSize));
 
-function _templateObject8$2() {
-  const data = _taggedTemplateLiteralLoose(["\n  transform: translate(-50%, 0);\n  left: -50%;\n  top: ", ";\n  ", "\n"]);
-
-  _templateObject8$2 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7$2() {
-  const data = _taggedTemplateLiteralLoose(["\n  transform: translate(0, -50%);\n  top: -50%;\n  right: ", ";\n  ", "\n"]);
-
-  _templateObject7$2 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6$2() {
-  const data = _taggedTemplateLiteralLoose(["\n  transform: translate(0, -50%);\n  top: -50%;\n  left: ", ";\n  ", "\n"]);
-
-  _templateObject6$2 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5$5() {
-  const data = _taggedTemplateLiteralLoose(["\n  transform: translate(-50%, 0);\n  left: -50%;\n  bottom: ", ";\n  ", "\n"]);
-
-  _templateObject5$5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4$5() {
-  const data = _taggedTemplateLiteralLoose(["\n  &:before {\n    transform: translate(-50%, -100%);\n    left: 50%;\n    top: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-bottom: ", " solid rgba(28, 33, 48, 0.8);\n  }\n"]);
-
-  _templateObject4$5 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3$7() {
-  const data = _taggedTemplateLiteralLoose(["\n  &:before {\n    transform: translate(100%, -50%);\n    right: 0;\n    top: 50%;\n    border-top: ", " solid transparent;\n    border-left: ", " solid rgba(28, 33, 48, 0.8);\n    border-bottom: ", " solid transparent;\n  }\n"]);
-
-  _templateObject3$7 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2$7() {
-  const data = _taggedTemplateLiteralLoose(["\n  &:before {\n    transform: translate(-100%, -50%);\n    left: 0;\n    top: 50%;\n    border-top: ", " solid transparent;\n    border-right: ", " solid rgba(28, 33, 48, 0.8);\n    border-bottom: ", " solid transparent;\n  }\n"]);
-
-  _templateObject2$7 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$8() {
-  const data = _taggedTemplateLiteralLoose(["\n  &:before {\n    left: 50%;\n    transform: translate(-50%, 100%);\n    bottom: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-top: ", " solid rgba(28, 33, 48, 0.8);\n  }\n"]);
-
-  _templateObject$8 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-const cornerBottom = cornerSize => css(_templateObject$8(), cornerSize, cornerSize, cornerSize);
-
-const cornerLeft = cornerSize => css(_templateObject2$7(), cornerSize, cornerSize, cornerSize);
-
-const cornerRight = cornerSize => css(_templateObject3$7(), cornerSize, cornerSize, cornerSize);
-
-const cornerTop = cornerSize => css(_templateObject4$5(), cornerSize, cornerSize, cornerSize);
-
-const top = (distance, cornerSize) => css(_templateObject5$5(), distance, cornerSize && cornerBottom(cornerSize));
-
-const right = (distance, cornerSize) => css(_templateObject6$2(), distance, cornerSize && cornerLeft(cornerSize));
-
-const left = (distance, cornerSize) => css(_templateObject7$2(), distance, cornerSize && cornerRight(cornerSize));
-
-const bottom = (distance, cornerSize) => css(_templateObject8$2(), distance, cornerSize && cornerTop(cornerSize));
+const bottom = (distance, cornerSize) => css(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  transform: translate(-50%, 0);\n  left: -50%;\n  top: ", ";\n  ", "\n"])), distance, cornerSize && cornerTop(cornerSize));
 
 const placementMixin$1 = function placementMixin(placement, distance, cornerSize) {
   if (placement === void 0) {
     placement = 'top';
   }
 
-  return css(_templateObject9$1(), placement === 'top' && top(distance, cornerSize), placement === 'right' && right(distance, cornerSize), placement === 'left' && left(distance, cornerSize), placement === 'bottom' && bottom(distance, cornerSize));
+  return css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), placement === 'top' && top(distance, cornerSize), placement === 'right' && right(distance, cornerSize), placement === 'left' && left(distance, cornerSize), placement === 'bottom' && bottom(distance, cornerSize));
 };
-const corner = /*#__PURE__*/css( /*#__PURE__*/_templateObject10$1());
-const TooltipComponent = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject11$1(), (_ref) => {
+const corner = /*#__PURE__*/css(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:before {\n    content: '';\n    width: 0;\n    height: 0;\n    position: absolute;\n  }\n"])));
+const TooltipComponent = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 999;\n  display: flex;\n  font-size: 0.625rem;\n  color: #fff;\n  background-color: rgba(28, 33, 48, 0.8);\n  padding: 0.4em 0.6em;\n  border-radius: 2px;\n  user-select: none;\n  box-sizing: border-box;\n  white-space: pre;\n  ", "\n  ", "\n"])), (_ref) => {
   let {
     placement,
     distance = '0.5rem',
@@ -5787,6 +5223,8 @@ const TooltipComponent = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject11
   return withArrow && corner;
 });
 
+const _excluded$4 = ["features", "map", "center", "component", "zIndex", "children", "content", "onEachFeature", "clickMode"];
+
 const {
   Provider,
   Consumer
@@ -5804,7 +5242,7 @@ const Tooltip = (_ref) => {
     onEachFeature,
     clickMode
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["features", "map", "center", "component", "zIndex", "children", "content", "onEachFeature", "clickMode"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
   const onTooltip = useTooltip(zIndex);
   useEffect(() => {