@evergis/react 2.0.189 → 2.0.191

package/dist/react.cjs.development.js

@@ -58,7 +58,6 @@ var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
 var punycode = _interopDefault(require('punycode'));
 var TileLayer$1 = require('@evergis/sgis/es/layers/TileLayer');
-var reactI18next = require('react-i18next');
 var svg_js = require('@svgdotjs/svg.js');
 var Color = require('@evergis/color/es/Color');
 
@@ -2501,10 +2500,10 @@ let FilterCondition = /*#__PURE__*/function () {
   return FilterCondition;
 }();
 
-const isLayerService = value => isObject(value) && "name" in value;
+const isLayerService = value => isObject(value) && 'name' in value;
 const getAttributeFromCondition = condition => {
-  const parts = condition.split(" ");
-  return parts[0].startsWith("(") ? parts[0].slice(1) : parts[0];
+  const parts = condition.split(' ');
+  return parts[0].startsWith('(') ? parts[0].slice(1) : parts[0];
 };
 const getExprFromCondition = (condition, partIndex) => {
   var _expr;
@@ -2512,13 +2511,13 @@ const getExprFromCondition = (condition, partIndex) => {
   let expr;
 
   if (partIndex) {
-    const parts = condition.split(" && ").map(part => part.slice(1, -1));
+    const parts = condition.split(' && ').map(part => part.slice(1, -1));
     expr = parts[partIndex - 1];
   } else {
     expr = condition;
   }
 
-  return (_expr = expr) == null ? void 0 : _expr.split(" ");
+  return (_expr = expr) == null ? void 0 : _expr.split(' ');
 };
 const getSignFromConditionPart = (condition, partIndex) => {
   var _getExprFromCondition;
@@ -2530,7 +2529,7 @@ const getValueFromConditionPart = (condition, partIndex) => {
 
   return (_getExprFromCondition2 = getExprFromCondition(condition, partIndex)) == null ? void 0 : _getExprFromCondition2[2];
 };
-const isRangeCondition = condition => condition.includes("(");
+const isRangeCondition = condition => condition.includes('(');
 const getSymbolParameterInfo = parameter => {
   return PARAMETER_INFOS[parameter] || DEFAULT_PARAMETER_INFO;
 };
@@ -2554,8 +2553,8 @@ const getRangeValues$1 = (_ref, isDouble, isDate, index) => {
 const formatRangeClassValue = (value, formatValue, index) => {
   var _value$attribute, _value$attribute2, _value$attribute3, _value$attribute4, _value$attribute5, _value$attribute6;
 
-  const isDouble = ((_value$attribute = value.attribute) == null ? void 0 : _value$attribute.type) === "Double";
-  const isDate = ((_value$attribute2 = value.attribute) == null ? void 0 : _value$attribute2.type) === "DateTime";
+  const isDouble = ((_value$attribute = value.attribute) == null ? void 0 : _value$attribute.type) === 'Double';
+  const isDate = ((_value$attribute2 = value.attribute) == null ? void 0 : _value$attribute2.type) === 'DateTime';
   const {
     from,
     to
@@ -2564,11 +2563,11 @@ const formatRangeClassValue = (value, formatValue, index) => {
   const formattedTo = formatValue ? formatValue((_value$attribute5 = value.attribute) == null ? void 0 : _value$attribute5.type, to, (_value$attribute6 = value.attribute) == null ? void 0 : _value$attribute6.stringFormat) : to;
 
   if (from === null) {
-    return "" + formattedTo + (!isDate ? " и менее" : "");
+    return "" + formattedTo + (!isDate ? ' и менее' : '');
   }
 
   if (to === null) {
-    return "" + (!isDate ? "более " : "") + formattedFrom;
+    return "" + (!isDate ? 'более ' : '') + formattedFrom;
   }
 
   return from === to ? "" + formattedFrom : formattedFrom + " - " + formattedTo;
@@ -2580,13 +2579,13 @@ const checkLayerHasLegend = layerInfo => {
     var _layerInfo$style;
 
     const paramValue = get((_layerInfo$style = layerInfo.style) == null ? void 0 : _layerInfo$style.symbol, param);
-    return (paramValue == null ? void 0 : paramValue.type) === "byAttribute";
+    return (paramValue == null ? void 0 : paramValue.type) === 'byAttribute';
   })) || false;
 };
 const getTitleFromCondition = condition => {
   var _parts$;
 
-  const parts = condition.split(" == ");
+  const parts = condition.split(' == ');
   return (_parts$ = parts[1]) == null ? void 0 : _parts$.slice(1, -1);
 };
 
@@ -2597,12 +2596,12 @@ function createValueTitle$1(paramValue, attribute, formatValue, index) {
     attribute
   };
   const sign = getSignFromConditionPart(paramValue.condition, 1);
-  const isFirstFrom = sign.includes(">");
+  const isFirstFrom = sign.includes('>');
   value.from = isFirstFrom ? getValueFromConditionPart(paramValue.condition, 1) : null;
-  value.to = paramValue.condition.includes(" && ") && isFirstFrom ? getValueFromConditionPart(paramValue.condition, 2) : !isFirstFrom ? getValueFromConditionPart(paramValue.condition, 1) : null;
+  value.to = paramValue.condition.includes(' && ') && isFirstFrom ? getValueFromConditionPart(paramValue.condition, 2) : !isFirstFrom ? getValueFromConditionPart(paramValue.condition, 1) : null;
   if (isRangeClass(value)) return formatRangeClassValue(value, formatValue, index);
   if (isUniqueClass(value)) return formatUniqueClassValue(value, formatValue);
-  return "";
+  return '';
 } // Основывается на http://cf.everpoint.ru/pages/viewpage.action?pageId=45024217 ->
 // пункт "Настраиваемые значения параметров символики в системе"
 // Для добавления подготовленных значений размеров символов нужно использовать константу PREPARED_SYMBOL_SIZES
@@ -2612,37 +2611,37 @@ const DEFAULT_LEGEND_STYLES = {
   [0
   /* Point */
   ]: {
-    fillColor: "#00000047",
+    fillColor: '#00000047',
     strokeWidth: 1,
-    strokeColor: "#0000001f"
+    strokeColor: '#0000001f'
   },
   [1
   /* ImagePoint */
   ]: {
-    maskedColor: "#00000047"
+    maskedColor: '#00000047'
   },
   [2
   /* Line */
   ]: {
     stroke: {
       width: 2,
-      color: "#00000047"
+      color: '#00000047'
     }
   },
   [3
   /* Polygon */
   ]: {
     fill: {
-      color: "#00000000",
-      hatchColor: "#00000000"
+      color: '#00000000',
+      hatchColor: '#00000000'
     },
     stroke: {
       width: 1,
-      color: "#0000001f"
+      color: '#0000001f'
     }
   }
 };
-const SYMBOL_SIZE_PARAMETERS = ["size", "width", "height"]; // Основывается на http://cf.everpoint.ru/pages/viewpage.action?pageId=45024217 -> пункт "Библиотека символов"
+const SYMBOL_SIZE_PARAMETERS = ['size', 'width', 'height']; // Основывается на http://cf.everpoint.ru/pages/viewpage.action?pageId=45024217 -> пункт "Библиотека символов"
 
 const DEFAULT_LEGEND_SIZES = {
   circlePointSymbol: 8,
@@ -2672,16 +2671,16 @@ const updateSymbolParameter = (symbol, path, value) => symbolParameterWalker(()
 
 const createPointSymbol = (baseSymbol, parameter, classificationsParams, parameterValue) => {
   return updateSymbolParameter(_extends({}, baseSymbol, {
-    fillColor: getNonClassifiedParamValue(baseSymbol, "fillColor", classificationsParams, 0
+    fillColor: getNonClassifiedParamValue(baseSymbol, 'fillColor', classificationsParams, 0
     /* Point */
     ),
-    strokeColor: getNonClassifiedParamValue(baseSymbol, "strokeColor", classificationsParams, 0
+    strokeColor: getNonClassifiedParamValue(baseSymbol, 'strokeColor', classificationsParams, 0
     /* Point */
     ),
-    strokeWidth: getNonClassifiedParamValue(baseSymbol, "strokeWidth", classificationsParams, 0
+    strokeWidth: getNonClassifiedParamValue(baseSymbol, 'strokeWidth', classificationsParams, 0
     /* Point */
     ),
-    size: getNonClassifiedParamValue(baseSymbol, "size", classificationsParams, 0
+    size: getNonClassifiedParamValue(baseSymbol, 'size', classificationsParams, 0
     /* Point */
     ),
     offset: [0, 0]
@@ -2718,12 +2717,12 @@ const createImagePointSymbol = (baseSymbol, parameter, classificationsParams, pa
   let symbol = _extends({}, baseSymbol);
 
   if (isMaskedImageSymbol(symbol)) {
-    symbol.maskedColor = getNonClassifiedParamValue(baseSymbol, "maskedColor", classificationsParams, 1
+    symbol.maskedColor = getNonClassifiedParamValue(baseSymbol, 'maskedColor', classificationsParams, 1
     /* ImagePoint */
     );
   }
 
-  if (parameter === "height" || parameter === "width") {
+  if (parameter === 'height' || parameter === 'width') {
     const {
       height,
       width
@@ -2731,7 +2730,7 @@ const createImagePointSymbol = (baseSymbol, parameter, classificationsParams, pa
     symbol.height = height;
     symbol.width = width;
   } else {
-    symbol.width = getNonClassifiedParamValue(baseSymbol, "width", classificationsParams, 1
+    symbol.width = getNonClassifiedParamValue(baseSymbol, 'width', classificationsParams, 1
     /* ImagePoint */
     );
     symbol.height = symbol.width;
@@ -2744,12 +2743,12 @@ const createImagePointSymbol = (baseSymbol, parameter, classificationsParams, pa
 
 const createLineSymbol = (baseSymbol, parameter, classificationsParams, parameterValue) => {
   return updateSymbolParameter(_extends({}, baseSymbol, {
-    type: "polylineSymbol",
+    type: 'polylineSymbol',
     stroke: {
-      color: getNonClassifiedParamValue(baseSymbol, "stroke.color", classificationsParams, 2
+      color: getNonClassifiedParamValue(baseSymbol, 'stroke.color', classificationsParams, 2
       /* Line */
       ),
-      width: getNonClassifiedParamValue(baseSymbol, "stroke.width", classificationsParams, 2
+      width: getNonClassifiedParamValue(baseSymbol, 'stroke.width', classificationsParams, 2
       /* Line */
       )
     }
@@ -2759,18 +2758,18 @@ const createLineSymbol = (baseSymbol, parameter, classificationsParams, paramete
 const createPolygonSymbol = (baseSymbol, parameter, classificationsParams, parameterValue) => {
   return updateSymbolParameter(_extends({}, baseSymbol, {
     fill: {
-      color: getNonClassifiedParamValue(baseSymbol, "fill.color", classificationsParams, 3
+      color: getNonClassifiedParamValue(baseSymbol, 'fill.color', classificationsParams, 3
       /* Polygon */
       ),
-      hatchColor: getNonClassifiedParamValue(baseSymbol, "fill.hatchColor", classificationsParams, 3
+      hatchColor: getNonClassifiedParamValue(baseSymbol, 'fill.hatchColor', classificationsParams, 3
       /* Polygon */
       )
     },
     stroke: {
-      color: getNonClassifiedParamValue(baseSymbol, "stroke.color", classificationsParams, 3
+      color: getNonClassifiedParamValue(baseSymbol, 'stroke.color', classificationsParams, 3
       /* Polygon */
       ),
-      width: getNonClassifiedParamValue(baseSymbol, "stroke.width", classificationsParams, 3
+      width: getNonClassifiedParamValue(baseSymbol, 'stroke.width', classificationsParams, 3
       /* Polygon */
       )
     }
@@ -2780,29 +2779,37 @@ const createPolygonSymbol = (baseSymbol, parameter, classificationsParams, param
 const createH3Symbol = (baseSymbol, parameter, classificationsParams, parameterValue) => {
   return updateSymbolParameter(_extends({}, baseSymbol, {
     fill: {
-      color: getNonClassifiedParamValue(baseSymbol, "fill.color", classificationsParams, 3
+      color: getNonClassifiedParamValue(baseSymbol, 'fill.color', classificationsParams, 3
       /* Polygon */
       )
     },
     stroke: {
-      color: getNonClassifiedParamValue(baseSymbol, "stroke.color", classificationsParams, 3
+      color: getNonClassifiedParamValue(baseSymbol, 'stroke.color', classificationsParams, 3
       /* Polygon */
       ),
-      width: getNonClassifiedParamValue(baseSymbol, "stroke.width", classificationsParams, 3
+      width: getNonClassifiedParamValue(baseSymbol, 'stroke.width', classificationsParams, 3
       /* Polygon */
       )
     }
   }), parameter, parameterValue);
 };
 
+const createClusterSymbol = (baseSymbol, parameter, classificationsParams, parameterValue) => {
+  return updateSymbolParameter(_extends({}, baseSymbol, {
+    fillColor: getNonClassifiedParamValue(baseSymbol, 'fillColor', classificationsParams, 0
+    /* Point */
+    )
+  }), parameter, parameterValue);
+};
+
 const createLegendSymbol = (parameterValue, parameter, classificationsParams, baseSymbol) => {
   if (isParameterValueSymbol(parameterValue)) {
     return parameterValue;
   }
-  /* if (isClusterSymbol(baseSymbol)) {
-    return createClusterSymbol(baseSymbol, parameter, classificationsParams, parameterValue);
-  }*/
 
+  if (isClusterSymbol(baseSymbol)) {
+    return createClusterSymbol(baseSymbol, parameter, classificationsParams, parameterValue);
+  }
 
   if (isSizableSymbol(baseSymbol)) {
     return createPointSymbol(baseSymbol, parameter, classificationsParams, parameterValue);
@@ -2937,7 +2944,7 @@ const getClassified = layerInfo => {
     var _layerInfo$style2;
 
     const param = get((_layerInfo$style2 = layerInfo.style) == null ? void 0 : _layerInfo$style2.symbol, classified);
-    return (param == null ? void 0 : param.type) === "byAttribute" ? _extends({}, result, {
+    return (param == null ? void 0 : param.type) === 'byAttribute' ? _extends({}, result, {
       [classified]: param
     }) : result;
   }, {});
@@ -2975,7 +2982,7 @@ const getLegendSymbolSize = symbol => {
   }
 
   if (isPolylineSymbols(symbol)) {
-    size = getParameterValue(getParameterFromSymbol(symbol, "stroke.width"));
+    size = getParameterValue(getParameterFromSymbol(symbol, 'stroke.width'));
   }
 
   return Math.max(DEFAULT_LEGEND_SYMBOL_SIZE, size);
@@ -2987,13 +2994,13 @@ const serializeSvgPointSymbol = symbol => {
   const figureFillColor = ((_symbol$figure = symbol.figure) == null ? void 0 : _symbol$figure.fillColor) || null;
   const bgFillColor = ((_symbol$background2 = symbol.background) == null ? void 0 : _symbol$background2.fillColor) || null;
   return _extends({
-    type: "svgPointSymbol",
+    type: 'svgPointSymbol',
     size: symbol.size,
     offset: symbol.offset,
     angle: symbol.angle
   }, bgFillColor ? {
     background: {
-      id: "symbol-bg",
+      id: 'symbol-bg',
       fillColor: bgFillColor,
       strokeColor: ((_symbol$background3 = symbol.background) == null ? void 0 : _symbol$background3.strokeColor) || null,
       strokeWidth: ((_symbol$background4 = symbol.background) == null ? void 0 : _symbol$background4.strokeWidth) || null,
@@ -3001,35 +3008,35 @@ const serializeSvgPointSymbol = symbol => {
     }
   } : {}, figureFillColor ? {
     figure: {
-      id: "symbol-figure",
+      id: 'symbol-figure',
       fillColor: figureFillColor
     }
   } : {});
 };
-const SIZE_PARAMETERS = ["size", "height", "strokeWidth", "stroke.width"];
+const SIZE_PARAMETERS = ['size', 'height', 'strokeWidth', 'stroke.width'];
 const isSizeClassification = parameter => SIZE_PARAMETERS.includes(parameter);
 const getServiceConfiguration = layer => {
   const emptyServiceConfiguration = {
-    name: ""
+    name: ''
   };
-  if (!isLayerService(layer) || !("configuration" in layer)) return emptyServiceConfiguration;
+  if (!isLayerService(layer) || !('configuration' in layer)) return emptyServiceConfiguration;
   return _extends({}, emptyServiceConfiguration, layer.configuration || {});
 };
 /** default attribute name which use for geometry info */
 
-const GEOMETRY_ATTRIBUTE = "geometry";
+const GEOMETRY_ATTRIBUTE = 'geometry';
 /** default attribute name which contains unique id info */
 
-const DEFAULT_ID_ATTRIBUTE_NAME = "gid";
+const DEFAULT_ID_ATTRIBUTE_NAME = 'gid';
 const getAttributesConfiguration = layer => {
   const serviceConfiguration = getServiceConfiguration(layer);
   const emptyAttributesConfiguration = {
     geometryAttribute: GEOMETRY_ATTRIBUTE,
     idAttribute: DEFAULT_ID_ATTRIBUTE_NAME,
-    tableName: ""
+    tableName: ''
   };
 
-  if (!serviceConfiguration || !("attributesConfiguration" in serviceConfiguration)) {
+  if (!serviceConfiguration || !('attributesConfiguration' in serviceConfiguration)) {
     return emptyAttributesConfiguration;
   }
 
@@ -3045,10 +3052,10 @@ const getLayerDefinition = layer => {
     geometryAttribute: geometryAttribute,
     idAttribute,
     geometryType: api.GeometryType.Unknown,
-    titleAttribute: ""
+    titleAttribute: ''
   };
 
-  if (!isLayerService(layer) || !("layerDefinition" in layer)) {
+  if (!isLayerService(layer) || !('layerDefinition' in layer)) {
     return emptyLayerDefinition;
   }
 
@@ -3108,13 +3115,14 @@ const DEFAULT_LEGEND_SYMBOL_SIZE = 26;
 const EXTRA_BORDER_SIZE = 4;
 const DEFAULT_SYMBOL_SIZE = 20;
 const DEFAULT_SYMBOL_WITH_BG_SIZE = 24;
-const DEFAULT_SYMBOL_FILL_COLOR = "rgba(0, 163, 245, 1)";
-const DEFAULT_SYMBOL_STROKE_COLOR = "rgb(255, 255, 255)";
+const DEFAULT_SYMBOL_FILL_COLOR = 'rgba(0, 163, 245, 1)';
+const DEFAULT_SYMBOL_STROKE_COLOR = 'rgb(255, 255, 255)';
 const DEFAULT_SYMBOL_OFFSET = [0, 0];
+const DEFAULT_CLUSTER_SVG = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 56 56\" width=\"56px\" height=\"56px\">\n  <circle cx=\"28\" cy=\"28\" r=\"22\" fill=\"#00AAFF\" stroke=\"#00AAFF\" stroke-opacity=\"0.28\" stroke-width=\"12\" id=\"symbol-bg\" />\n</svg>\n";
 const SYMBOL_CLASSIFICATION = {
-  [api.GeometryType.Polygon]: ["fill.color", "stroke.color", "stroke.width"],
-  [api.GeometryType.Polyline]: ["stroke.color", "stroke.width"],
-  [api.GeometryType.Point]: ["angle", "background.fillColor", "background.strokeColor", "background.strokeWidth", "figure.fillColor", "size"]
+  [api.GeometryType.Polygon]: ['fill.color', 'stroke.color', 'stroke.width'],
+  [api.GeometryType.Polyline]: ['stroke.color', 'stroke.width'],
+  [api.GeometryType.Point]: ['angle', 'size', 'fill.color', 'fillColor', 'background.fillColor', 'background.strokeColor', 'background.strokeWidth', 'figure.fillColor', 'singleObjectSymbol.figure.fillColor', 'singleObjectSymbol.background.fillColor']
 };
 const SYMBOL_LIMITS = {
   SIZE_MIN: 1,
@@ -3157,22 +3165,22 @@ const PARAMETER_INFOS = {
   })
 };
 const OPERATOR_CONDITION_REMAP = {
-  [exports.ComparisonOperator.Equals]: "==",
-  [exports.ComparisonOperator.NotEquals]: "!=",
-  [exports.ComparisonOperator.GreaterThan]: ">",
-  [exports.ComparisonOperator.GreaterOrEquals]: ">=",
-  [exports.ComparisonOperator.LessThan]: "<",
-  [exports.ComparisonOperator.LessOrEquals]: "<=",
-  [exports.ComparisonOperator.Filled]: "!=",
-  [exports.ComparisonOperator.Empty]: "==",
-  [exports.ComparisonOperator.Contains]: "==",
-  [exports.ComparisonOperator.NotContains]: "!=",
-  [exports.ComparisonOperator.StartsWith]: "==",
-  [exports.ComparisonOperator.NotStartsWith]: "!=",
-  [exports.ComparisonOperator.EndsWith]: "==",
-  [exports.ComparisonOperator.NotEndsWith]: "!=",
-  [exports.ComparisonOperator.Between]: "between",
-  [exports.ComparisonOperator.Outside]: "!between"
+  [exports.ComparisonOperator.Equals]: '==',
+  [exports.ComparisonOperator.NotEquals]: '!=',
+  [exports.ComparisonOperator.GreaterThan]: '>',
+  [exports.ComparisonOperator.GreaterOrEquals]: '>=',
+  [exports.ComparisonOperator.LessThan]: '<',
+  [exports.ComparisonOperator.LessOrEquals]: '<=',
+  [exports.ComparisonOperator.Filled]: '!=',
+  [exports.ComparisonOperator.Empty]: '==',
+  [exports.ComparisonOperator.Contains]: '==',
+  [exports.ComparisonOperator.NotContains]: '!=',
+  [exports.ComparisonOperator.StartsWith]: '==',
+  [exports.ComparisonOperator.NotStartsWith]: '!=',
+  [exports.ComparisonOperator.EndsWith]: '==',
+  [exports.ComparisonOperator.NotEndsWith]: '!=',
+  [exports.ComparisonOperator.Between]: 'between',
+  [exports.ComparisonOperator.Outside]: '!between'
 };
 const BASE_OPERATORS = [exports.ComparisonOperator.Equals, exports.ComparisonOperator.NotEquals];
 const CONTAINS_OPERATORS = [exports.ComparisonOperator.Contains, exports.ComparisonOperator.NotContains];
@@ -5790,7 +5798,7 @@ const Fullscreen = () => {
   }));
 };
 
-var _templateObject$4, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36;
+var _templateObject$4, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37;
 const MapLegendDescription = /*#__PURE__*/styled__default.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n"])));
 const ItemText = /*#__PURE__*/styled__default.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: calc(100% - 2rem);\n  font: ", ";\n"])), _ref => {
   let {
@@ -5800,18 +5808,18 @@ const ItemText = /*#__PURE__*/styled__default.div(_templateObject2$4 || (_templa
   } = _ref;
   return fonts.description;
 });
-const ItemSeparator = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  :after {\n    content: \"-\";\n    margin: 0 0.5rem;\n    font-size: 0.75rem;\n  }\n"])));
-const SymbolContainer = /*#__PURE__*/styled__default("span")(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  min-width: 16px;\n  margin-right: 0.5rem;\n"])));
+const ItemSeparator = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  :after {\n    content: '-';\n    margin: 0 0.5rem;\n    font-size: 0.75rem;\n  }\n"])));
+const SymbolContainer = /*#__PURE__*/styled__default('span')(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  min-width: 16px;\n  margin-right: 0.5rem;\n"])));
 const ClassifiedItem = /*#__PURE__*/styled__default.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: ", ";\n  pointer-events: ", ";\n\n  :not(:last-of-type) {\n    margin-bottom: 0.25rem;\n  }\n\n  ", ", ", " {\n    transition: opacity 150ms;\n  }\n\n  ", " {\n    opacity: ", ";\n  }\n\n  ", " {\n    opacity: ", ";\n  }\n\n  :hover {\n    ", ", ", " {\n      opacity: 1;\n    }\n  }\n"])), _ref2 => {
   let {
     isClusterFillColor
   } = _ref2;
-  return isClusterFillColor ? "default" : "pointer";
+  return isClusterFillColor ? 'default' : 'pointer';
 }, _ref3 => {
   let {
     isClusterFillColor
   } = _ref3;
-  return isClusterFillColor ? "none" : "auto";
+  return isClusterFillColor ? 'none' : 'auto';
 }, ItemText, SymbolContainer, ItemText, _ref4 => {
   let {
     isHidden
@@ -5845,7 +5853,7 @@ const MaximizedLegendContainer = /*#__PURE__*/styled__default.div(_templateObjec
   let {
     isShown
   } = _ref8;
-  return isShown ? "relative" : "absolute";
+  return isShown ? 'relative' : 'absolute';
 }, _ref9 => {
   let {
     isShown
@@ -5855,15 +5863,22 @@ const MaximizedLegendContainer = /*#__PURE__*/styled__default.div(_templateObjec
   let {
     isShown
   } = _ref10;
-  return isShown ? "visible" : "hidden";
+  return isShown ? 'visible' : 'hidden';
 });
 const MinimizedLegendContainer = /*#__PURE__*/styled__default(MaximizedLegendContainer)(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 1.5rem);\n  padding-right: 1.5rem;\n"])));
-const MapLegendSectionContainer = /*#__PURE__*/styled__default.div(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  \n  :not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])));
-const MapLegendSectionItems = /*#__PURE__*/styled__default.div(_templateObject15$1 || (_templateObject15$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: ", "px;\n  overflow: hidden;\n  transition: height 0.5s;\n"])), _ref11 => {
+const MapLegendSectionContainer = /*#__PURE__*/styled__default.div(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  :not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])));
+const MapLegendSectionItems = /*#__PURE__*/styled__default.div(_templateObject15$1 || (_templateObject15$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: ", "px;\n  overflow: ", ";\n  transition: height 0.5s;\n"])), _ref11 => {
   let {
-    height
+    minHeight,
+    maxHeight,
+    isExpanded
   } = _ref11;
-  return height;
+  return isExpanded ? (maxHeight || 0) + 4 : minHeight;
+}, _ref12 => {
+  let {
+    isExpanded
+  } = _ref12;
+  return isExpanded ? 'none' : 'hidden';
 });
 const MapLegendValueDescr = /*#__PURE__*/styled__default.div(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 1rem;\n  margin-bottom: 0.25rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 1rem;\n"])));
 
@@ -5872,7 +5887,7 @@ const SizeLegendItemMixin = function SizeLegendItemMixin(value) {
     value = 0;
   }
 
-  return styled.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  display: flex;\n  align-items: flex-end;\n  flex: none;\n  height: inherit;\n  width: inherit;\n  margin: 0 auto;\n  background: none;\n  border: none;\n\n  :after {\n    content: \"\";\n    display: flex;\n    border: 1px rgba(48, 69, 79, 0.28) solid;\n    border-radius: 50%;\n    margin: 0 0 0 -", "px;\n    width: ", "px;\n    height: ", "px;\n  }\n"])), value / 2, value, value);
+  return styled.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  display: flex;\n  align-items: flex-end;\n  flex: none;\n  height: inherit;\n  width: inherit;\n  margin: 0 auto;\n  background: none;\n  border: none;\n\n  :after {\n    content: '';\n    display: flex;\n    border: 1px rgba(48, 69, 79, 0.28) solid;\n    border-radius: 50%;\n    margin: 0 0 0 -", "px;\n    width: ", "px;\n    height: ", "px;\n  }\n"])), value / 2, value, value);
 };
 
 const StrokeWidthLegendItemMixin = function StrokeWidthLegendItemMixin(value) {
@@ -5880,79 +5895,80 @@ const StrokeWidthLegendItemMixin = function StrokeWidthLegendItemMixin(value) {
     value = 0;
   }
 
-  return styled.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background: none;\n  border: none;\n  display: flex;\n  align-items: center;\n  flex: none;\n  width: calc(100% - 2rem);\n  height: ", "px;\n  margin: 0 0 0.25rem 0;\n  padding-left: 2rem;\n  font-size: 0.75rem;\n  \n  :first-child, :last-child {\n    height: auto;\n  }\n  \n  :after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 0;\n    width: 1.5rem;\n    height: ", "px;\n    margin-top: -", "px;\n    background: rgb(224, 224, 224);\n  }\n"])), value, value, Math.round(value / 2));
+  return styled.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background: none;\n  border: none;\n  display: flex;\n  align-items: center;\n  flex: none;\n  width: calc(100% - 2rem);\n  height: ", "px;\n  margin: 0 0 0.25rem 0;\n  padding-left: 2rem;\n  font-size: 0.75rem;\n\n  :first-child,\n  :last-child {\n    height: auto;\n  }\n\n  :after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 0;\n    width: 1.5rem;\n    height: ", "px;\n    margin-top: -", "px;\n    background: rgb(224, 224, 224);\n  }\n"])), value, value, Math.round(value / 2));
 };
 
 const StrokeColorLegendItemMixin = /*#__PURE__*/styled.css(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 0.5rem;\n  width: 1.5rem;\n"])));
-const MapLegendItem = /*#__PURE__*/styled__default.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: ", "rem;\n  background: ", ";\n  border: 1px rgba(48, 69, 79, 0.1) solid;\n  margin-right: -1px;\n  color: rgba(48, 69, 79, 0.65);\n  opacity: ", ";\n\n  ", "\n\n  ", "\n"])), _ref12 => {
+const MapLegendItem = /*#__PURE__*/styled__default.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: ", "rem;\n  background: ", ";\n  border: 1px rgba(48, 69, 79, 0.1) solid;\n  margin-right: -1px;\n  color: rgba(48, 69, 79, 0.65);\n  opacity: ", ";\n\n  ", "\n\n  ", "\n"])), _ref13 => {
   let {
     parameter
-  } = _ref12;
-  return isParameterType(["strokeColor", "stroke.color"], parameter) ? 0.25 : 1;
-}, _ref13 => {
-  let {
-    value
   } = _ref13;
-  return typeof value === "number" ? "none" : value;
+  return isParameterType(['strokeColor', 'stroke.color'], parameter) ? 0.25 : 1;
 }, _ref14 => {
   let {
-    isHidden
+    value
   } = _ref14;
-  return isHidden ? 0.28 : 1;
+  return typeof value === 'number' ? 'none' : value;
 }, _ref15 => {
   let {
-    value,
-    parameter
+    isHidden
   } = _ref15;
-  return isParameterType("size", parameter) && SizeLegendItemMixin(value);
+  return isHidden ? 0.28 : 1;
 }, _ref16 => {
   let {
     value,
     parameter
   } = _ref16;
-  return isParameterType(["strokeWidth", "stroke.width"], parameter) && StrokeWidthLegendItemMixin(value);
+  return isParameterType('size', parameter) && SizeLegendItemMixin(value);
+}, _ref17 => {
+  let {
+    value,
+    parameter
+  } = _ref17;
+  return isParameterType(['strokeWidth', 'stroke.width'], parameter) && StrokeWidthLegendItemMixin(value);
 });
 const MapLegendOther = /*#__PURE__*/styled__default(MapLegendItem)(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  flex: none;\n  position: relative;\n  width: 1rem;\n  margin-left: 0.25rem;\n  border-radius: 0.125rem;\n"])));
 const SizeLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject22 || (_templateObject22 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 2rem;\n  height: 2rem;\n  margin: 0 auto;\n\n  ", " {\n    width: auto;\n    margin-left: 0;\n  }\n"])), MapLegendOther);
 const StrokeWidthLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject23 || (_templateObject23 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  flex-direction: column;\n  width: auto;\n\n  ", " {\n    width: calc(100% - 2rem);\n    margin-left: 0;\n  }\n"])), MapLegendOther);
 const SizeMinimizedLegend = /*#__PURE__*/styled__default.div(_templateObject24 || (_templateObject24 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  margin: 0.5rem 0 0.25rem;\n"])));
 const SizeMinimizedLegendSymbol = /*#__PURE__*/styled__default.div(_templateObject25 || (_templateObject25 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n"])));
-const SizeMinimizedLegendLabel = /*#__PURE__*/styled__default.div(_templateObject26 || (_templateObject26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n"])));
+const SizeMinimizedLegendLabel = /*#__PURE__*/styled__default.div(_templateObject26 || (_templateObject26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 9.75rem;\n  font-size: 0.75rem;\n"])));
 const SizeMinimizedLegendDown = /*#__PURE__*/styled__default.div(_templateObject27 || (_templateObject27 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: rgba(48, 69, 79, 0.65);\n"])));
 const SizeMinimizedLegendUp = /*#__PURE__*/styled__default(SizeMinimizedLegendDown)(_templateObject28 || (_templateObject28 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 const SingleSizeLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject29 || (_templateObject29 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n\n  ", ":after {\n    margin: 0 auto;\n  }\n"])), MapLegendItem);
-const SingleLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject30 || (_templateObject30 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  width: 2rem;\n  height: auto;\n  margin: 0;\n  ", "\n  \n  ", " {\n    position: relative;\n    top: 0;\n    left: 0;\n    display: flex;\n    align-content: center;\n    justify-content: center;\n    margin: 0;\n    height: auto;\n    width: auto;\n\n    ", "\n  }\n"])), _ref17 => {
+const SingleLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject30 || (_templateObject30 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  width: 2rem;\n  height: auto;\n  margin: 0;\n  ", "\n\n  ", " {\n    position: relative;\n    top: 0;\n    left: 0;\n    display: flex;\n    align-content: center;\n    justify-content: center;\n    margin: 0;\n    height: auto;\n    width: auto;\n\n    ", "\n  }\n"])), _ref18 => {
   let {
     isSize
-  } = _ref17;
+  } = _ref18;
   return isSize && SingleSizeLegendItemsMixin;
-}, MapLegendItem, _ref18 => {
+}, MapLegendItem, _ref19 => {
   let {
     parameter
-  } = _ref18;
-  return isParameterType(["strokeColor", "stroke.color"], parameter) && StrokeColorLegendItemMixin;
+  } = _ref19;
+  return isParameterType(['strokeColor', 'stroke.color'], parameter) && StrokeColorLegendItemMixin;
 });
-const MapLegendItems = /*#__PURE__*/styled__default.div(_templateObject31 || (_templateObject31 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: 0.125rem;\n\n  ", ";\n  ", ";\n  ", ";\n"])), _ref19 => {
+const MapLegendItems = /*#__PURE__*/styled__default.div(_templateObject31 || (_templateObject31 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: 0.125rem;\n\n  ", ";\n  ", ";\n  ", ";\n"])), _ref20 => {
   let {
     isSize
-  } = _ref19;
+  } = _ref20;
   return isSize && SizeLegendItemsMixin;
-}, _ref20 => {
+}, _ref21 => {
   let {
     isStrokeWidth
-  } = _ref20;
+  } = _ref21;
   return isStrokeWidth && StrokeWidthLegendItemsMixin;
-}, _ref21 => {
+}, _ref22 => {
   let {
     isSingle
-  } = _ref21;
+  } = _ref22;
   return isSingle && SingleLegendItemsMixin;
 });
-const MapLegendItemsContainer = /*#__PURE__*/styled__default.div(_templateObject32 || (_templateObject32 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  \n  ", " {\n    :first-child {\n      border-top-left-radius: 0.125rem;\n      border-bottom-left-radius: 0.125rem;\n    }\n\n    :last-child {\n      border-top-right-radius: 0.125rem;\n      border-bottom-right-radius: 0.125rem;\n    }\n  }\n"])), MapLegendItem);
+const MapLegendItemsContainer = /*#__PURE__*/styled__default.div(_templateObject32 || (_templateObject32 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n\n  ", " {\n    :first-child {\n      border-top-left-radius: 0.125rem;\n      border-bottom-left-radius: 0.125rem;\n    }\n\n    :last-child {\n      border-top-right-radius: 0.125rem;\n      border-bottom-right-radius: 0.125rem;\n    }\n  }\n"])), MapLegendItem);
 const MapLegendValues = /*#__PURE__*/styled__default.div(_templateObject33 || (_templateObject33 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n  color: rgba(48, 69, 79, 0.65);\n"])));
-const MapLegendValuesRange = /*#__PURE__*/styled__default.div(_templateObject34 || (_templateObject34 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: calc(100% - 1.25rem);\n  \n  div {\n    flex: 1;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n\n    :first-child {\n      margin-right: 0.5rem;\n    }\n\n    :last-child {\n      margin-left: 0.5rem;\n      text-align: right;\n    }\n  }\n"])));
+const MapLegendValuesRange = /*#__PURE__*/styled__default.div(_templateObject34 || (_templateObject34 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: calc(100% - 1.25rem);\n\n  div {\n    flex: 1;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n\n    :first-child {\n      margin-right: 0.5rem;\n    }\n\n    :last-child {\n      margin-left: 0.5rem;\n      text-align: right;\n    }\n  }\n"])));
 const MapLegendValuesOther = /*#__PURE__*/styled__default(MapLegendOther)(_templateObject35 || (_templateObject35 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  border: 0;\n  overflow: visible;\n"])));
-const MapLegendExpandButton = /*#__PURE__*/styled__default.div(_templateObject36 || (_templateObject36 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin-top: 0.1rem;\n  font-size: 0.625rem;\n  color: #1FB3AA;\n"])));
+const MapLegendExpandButton = /*#__PURE__*/styled__default.div(_templateObject36 || (_templateObject36 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin-top: 0.1rem;\n  font-size: 0.625rem;\n  color: #1fb3aa;\n"])));
+const ClusterLegendContainer = /*#__PURE__*/styled__default.div(_templateObject37 || (_templateObject37 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: -0.9rem;\n  transform: scale(0.5);\n"])));
 
 const getValueFromLegendTitle = (title, minOrMax) => {
   if (title.includes(" - ")) {
@@ -6105,7 +6121,7 @@ const useSvgSymbol = (symbol, skipOffset) => {
 
 var _templateObject$5, _templateObject2$5;
 const SvgSymbolContainer = /*#__PURE__*/styled__default.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-const SvgSymbolLabel = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #fff;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), _ref => {
+const SvgSymbolLabel = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #fff;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  line-height: 0;\n"])), _ref => {
   let {
     fontSettings
   } = _ref;
@@ -6129,7 +6145,7 @@ const SvgSymbolLabel = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_
   let {
     fontSettings
   } = _ref5;
-  return !!(fontSettings != null && fontSettings.fontSize) && "font-size: " + (typeof fontSettings.fontSize === "string" ? fontSettings.fontSize : fontSettings.fontSize + "px");
+  return !!(fontSettings != null && fontSettings.fontSize) && "font-size: " + (typeof fontSettings.fontSize === 'string' ? fontSettings.fontSize : fontSettings.fontSize + "px");
 }, _ref6 => {
   let {
     fontSettings
@@ -6212,24 +6228,48 @@ const SymbolByType = _ref => {
   }
 };
 
+const ClusterSymbolPreview = _ref => {
+  var _symbol$labelSymbol;
+
+  let {
+    symbol,
+    size = 56,
+    fontSize = '1.25rem'
+  } = _ref;
+  const svgSymbol = {
+    type: 'svgPointSymbol',
+    size,
+    offset: [0, 0],
+    angle: 0,
+    background: {
+      id: 'symbol-bg',
+      fillColor: getParameterValue(symbol.fillColor),
+      strokeColor: symbol.strokeColor,
+      strokeWidth: 6,
+      type: 'circle'
+    }
+  };
+  return React__default.createElement(SvgSymbol, {
+    svg: DEFAULT_CLUSTER_SVG,
+    symbol: svgSymbol,
+    text: '99',
+    fontSettings: _extends({}, symbol.labelSymbol, {
+      fontSize: fontSize || ((_symbol$labelSymbol = symbol.labelSymbol) == null ? void 0 : _symbol$labelSymbol.fontSize)
+    })
+  });
+};
+
 const LegendSymbolRenderer = /*#__PURE__*/React.memo(_ref => {
   let {
     symbol
   } = _ref;
 
-  /* return isClusterSymbol(symbol) ? (
-    <ClusterLegendContainer>
-      <ClusterSymbolPreview symbol={symbol as ClusterSymbolDc} />
-    </ClusterLegendContainer>
-  ) : (
-    <SymbolByType
-      symbol={deserializeSymbol(symbol)}
-      size={getLegendSymbolSize(symbol) || DEFAULT_LEGEND_SYMBOL_SIZE}
-      type={symbol.type}
-      svg={(symbol as SvgPointSymbol).data}
-      skipOffset
-    />
-  );*/
+  if (isClusterSymbol(symbol)) {
+    return React__default.createElement(ClusterLegendContainer, null, React__default.createElement(ClusterSymbolPreview, {
+      symbol: symbol
+    }));
+  }
+
   return React__default.createElement(SymbolByType, {
     symbol: deserializeSymbol(symbol),
     size: getLegendSymbolSize(symbol) || DEFAULT_LEGEND_SYMBOL_SIZE,
@@ -6252,16 +6292,13 @@ const MaximizedLegend = _ref => {
     hiddenLegends,
     toggleHiddenLegend
   } = _ref;
-  const {
-    t
-  } = reactI18next.useTranslation("common");
-  const isDate = attributeType === "DateTime";
-  const isSize = isParameterType("size", parameter);
-  const isStrokeWidth = isParameterType(["strokeWidth", "stroke.width"], parameter);
-  const isStrokeColor = isParameterType(["strokeColor", "stroke.color"], parameter);
+  const isDate = attributeType === 'DateTime';
+  const isSize = isParameterType('size', parameter);
+  const isStrokeWidth = isParameterType(['strokeWidth', 'stroke.width'], parameter);
+  const isStrokeColor = isParameterType(['strokeColor', 'stroke.color'], parameter);
   const parameterValue = React.useMemo(() => get(sectionSymbol, parameter), [sectionSymbol, parameter]);
   const renderColumn = React.useCallback((column, index) => {
-    const dateTime = column.split(" ");
+    const dateTime = column.split(' ');
     return React__default.createElement(React.Fragment, {
       key: index
     }, React__default.createElement(ItemText, {
@@ -6270,10 +6307,10 @@ const MaximizedLegend = _ref => {
   }, []);
   const renderItemText = React.useCallback((title, index) => {
     if (!title) {
-      return React__default.createElement(ItemText, null, t("classification.other"));
+      return React__default.createElement(ItemText, null, "\u0414\u0440\u0443\u0433\u043E\u0435");
     }
 
-    const columns = title == null ? void 0 : title.split(" - ");
+    const columns = title == null ? void 0 : title.split(' - ');
     const isSingleColumn = (columns == null ? void 0 : columns.length) === 1;
 
     if (!isDate || index && isSingleColumn) {
@@ -6289,7 +6326,7 @@ const MaximizedLegend = _ref => {
     }
 
     return React__default.createElement(React__default.Fragment, null, columns.map(renderColumn));
-  }, [isDate, renderColumn, t]);
+  }, [isDate, renderColumn]);
   const isHidden = React.useCallback(hiddenCondition => !!(hiddenLegends != null && hiddenLegends.includes(hiddenCondition)), [hiddenLegends]);
   const renderLegend = React.useCallback((_ref2, index) => {
     var _parameterValue$value;
@@ -6320,7 +6357,7 @@ const MaximizedLegend = _ref => {
     })) : React__default.createElement(SymbolContainer, null, React__default.createElement(LegendSymbolRenderer, {
       symbol: isClusterFillColor$1 ? symbol : getExtractedSymbol(symbol, true)
     })), renderItemText(title, index));
-  }, [isSize, isStrokeColor, isStrokeWidth, parameter, parameterValue == null ? void 0 : parameterValue.defaultValue, parameterValue == null ? void 0 : parameterValue.values, renderItemText, sectionIndex, hiddenLegends, toggleHiddenLegend]);
+  }, [parameter, sectionIndex, isHidden, isSize, isStrokeWidth, isStrokeColor, parameterValue, renderItemText, toggleHiddenLegend, layerName]);
   return React__default.createElement(MaximizedLegendContainer, {
     ref: innerRef,
     isShown: isShown
@@ -6350,16 +6387,15 @@ const LegendSection = _ref => {
     formatValue,
     index
   } = _ref;
-  const {
-    t
-  } = reactI18next.useTranslation("common");
   const [isExpanded, toggleExpanded] = useToggle();
   const [maxRef, maxNode] = useNode();
   const [minRef, minNode] = useNode();
   return React__default.createElement(MapLegendSectionContainer, null, React__default.createElement(MapLegendHeader, null, attribute.alias || attribute.name), React__default.createElement(LegendParameterDescription, {
     parameter: parameter
   }), React__default.createElement(MapLegendSectionItems, {
-    height: isExpanded ? ((maxNode == null ? void 0 : maxNode.offsetHeight) || 0) + 4 : minNode == null ? void 0 : minNode.offsetHeight
+    minHeight: minNode == null ? void 0 : minNode.offsetHeight,
+    maxHeight: maxNode == null ? void 0 : maxNode.offsetHeight,
+    isExpanded: isExpanded
   }, React__default.createElement(MaximizedLegend, {
     innerRef: maxRef,
     isShown: isExpanded,
@@ -6370,16 +6406,16 @@ const LegendSection = _ref => {
     parameter: parameter,
     attributeType: attribute.type,
     index: index,
-    values: getMaximizedLegendValues(attribute, parameter, parameters, classified, symbol, formatValue, index, t("classification.other"))
+    values: getMaximizedLegendValues(attribute, parameter, parameters, classified, symbol, formatValue, index, 'Другое')
   }), React__default.createElement(MinimizedLegend, {
     innerRef: minRef,
     isShown: !isExpanded,
     hiddenLegends: hiddenLegends == null ? void 0 : hiddenLegends[layerName],
     parameter: parameter,
-    values: getMinimizedLegendValues(attribute, classified, formatValue, index, t("classification.other"))
+    values: getMinimizedLegendValues(attribute, classified, formatValue, index, 'Другое')
   })), React__default.createElement(MapLegendExpandButton, {
     onClick: toggleExpanded
-  }, t(isExpanded ? "toggleMenu" : "Развернуть")));
+  }, isExpanded ? 'Свернуть' : 'Развернуть'));
 };
 
 const _excluded$3 = ["layerInfo"];
@@ -6397,16 +6433,30 @@ const Legend = /*#__PURE__*/React.memo(_ref => {
     var _classified$param$val, _layerInfo$style;
 
     const attributeName = getAttributeNameFromCondition((_classified$param$val = classified[param].values[0]) == null ? void 0 : _classified$param$val.condition);
+    let attribute = attributes.find(_ref2 => {
+      let {
+        name
+      } = _ref2;
+      return name === attributeName;
+    });
+
+    if (!attribute) {
+      if (attributeName === 'count') {
+        attribute = {
+          name: 'count',
+          alias: 'Количество',
+          type: api.AttributeType.Int32
+        };
+      } else {
+        return null;
+      }
+    }
+
     return React__default.createElement(LegendSection, Object.assign({
       key: index,
       layerName: layerInfo.name,
       symbol: (_layerInfo$style = layerInfo.style) == null ? void 0 : _layerInfo$style.symbol,
-      attribute: attributes.find(_ref2 => {
-        let {
-          name
-        } = _ref2;
-        return name === attributeName;
-      }),
+      attribute: attribute,
       classified: classified[param],
       parameter: param,
       parameters: parameters,
@@ -6831,8 +6881,10 @@ exports.ClassificationCondition = ClassificationCondition;
 exports.ClassificationManager = ClassificationManager;
 exports.ClassifiedItem = ClassifiedItem;
 exports.ClusterLayer = ClusterLayer;
+exports.ClusterLegendContainer = ClusterLegendContainer;
 exports.ClusterSymbol = ClusterSymbol;
 exports.CompoundIcon = CompoundIcon;
+exports.DEFAULT_CLUSTER_SVG = DEFAULT_CLUSTER_SVG;
 exports.DEFAULT_CRS = DEFAULT_CRS;
 exports.DEFAULT_ID_ATTRIBUTE_NAME = DEFAULT_ID_ATTRIBUTE_NAME;
 exports.DEFAULT_LEGEND_SIZES = DEFAULT_LEGEND_SIZES;