@retailcrm/datalens-ui 0.0.0

package/YandexMapWidget.js

@@ -0,0 +1,2698 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import { pickActionParamsFromParams, transformParamsToActionParams } from "@gravity-ui/dashkit/helpers";
+import block from "bem-cn-lite";
+import get from "lodash/get";
+import isEqual from "lodash/isEqual";
+import isNumber from "lodash/isNumber";
+import merge from "lodash/merge";
+import pick from "lodash/pick";
+import PropTypes from "prop-types";
+import ReactDOM from "react-dom";
+import { ib as ChartKitCustomError, bd as getRandomCKId, bG as Performance, ic as ERROR_CODE, bB as i18n, ie as hasMatchedActionParams, ig as subtractParameters, ih as addParams } from "./components/ControlComponents.js";
+import isEmpty from "lodash/isEmpty";
+import { l as logger, I as isMacintosh, G as getRenderMarkupToStringFn, F as getRenderYfmFn } from "./components/ActionPanel.js";
+import colormap from "colormap";
+import contains from "robust-point-in-polygon";
+/* empty css      */
+import { Button, Icon } from "@gravity-ui/uikit";
+import { aj as formatNumber, aC as WRAPPED_MARKDOWN_KEY } from "./components/AccessRights.js";
+import { gray, lab } from "d3";
+import escape from "lodash/escape";
+import { S as StyledSplitPane } from "./StyledSplitPane.js";
+function fetchScript(url) {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.onload = resolve;
+    script.onerror = reject;
+    script.src = url;
+    script.async = true;
+    document.head.appendChild(script);
+  });
+}
+function numberFormat(value) {
+  return isNumber(value) ? new Intl.NumberFormat("ru-RU", {
+    maximumFractionDigits: 20
+  }).format(value) : value;
+}
+const init = (polygonmap) => {
+  const show = polygonmap.options.get("showLegend");
+  if (!show) return;
+  const template = polygonmap.options.get("legendTemplate");
+  const map = polygonmap.getMap();
+  const colorScheme = polygonmap.colorize.getColorMap();
+  const colorRanges = polygonmap.colorize.getColorRanges();
+  const colors = colorScheme.map((el, i) => {
+    return {
+      name: el,
+      value: colorRanges[i],
+      opacity: polygonmap.options.get("colorOpacity")
+    };
+  });
+  const CustomControlClass = function(options) {
+    CustomControlClass.superclass.constructor.call(this, options);
+  };
+  const ymaps = polygonmap.getYMaps();
+  ymaps.util.augment(CustomControlClass, ymaps.collection.Item, {
+    onAddToMap(map2) {
+      CustomControlClass.superclass.onAddToMap.call(this, map2);
+      this.getParent().getChildElement(this).then(this._onGetChildElement, this);
+      polygonmap._legendControl = this;
+    },
+    _onGetChildElement(parentDomContainer) {
+      const legend = document.createElement("div");
+      legend.className = "ymaps-color-legend";
+      legend.innerHTML = template.call(polygonmap, colors);
+      parentDomContainer.appendChild(legend);
+    }
+  });
+  const customControl = new CustomControlClass();
+  map.controls.add(customControl, {
+    float: "none",
+    position: polygonmap.options.get("legendPosition")
+  });
+};
+const defaultTemplate = function(colors) {
+  const fillBy = this.options.get("fillBy");
+  const fillByWeight = fillBy === "weight";
+  const colorRangesMinimum = this.options.get("colorRangesMinimum");
+  const min = colorRangesMinimum === "min" ? fillByWeight ? this.pointsWeightMinimum : this.pointsCountMinimum : colorRangesMinimum;
+  return `
+        <div class="legend">
+            ${colors.map(
+    (color, i) => `
+                <div class="legend__row">
+                    <span class="legend__value">
+                        ${colors[i - 1] ? `${colors[i - 1].value + 1} - ${color.value}` : `${min} - ${color.value}`}
+                    </span>
+                    <span class="legend__color" style="background: ${color.name}; opacity: ${color.opacity}"></span>
+                </div>
+            `
+  ).join("\n")}
+        </div>
+    `;
+};
+var colorLegend_default = { init, defaultTemplate };
+class Colorize {
+  /**
+   * @param {number} min Min value.
+   * @param {number} max Max value.
+   * @param {object} options Setting for generate colormap.
+   * @param {string|array} options.colorScheme Sheme of colormap or array of custom colors (from light to dark).
+   * @param {number|array} options.colorRanges Count of ranges to automaticly generate or custom array
+   * of ranges (from light to dark).
+   */
+  constructor(min, max, options) {
+    if (typeof min !== "number") {
+      throw new Error('Wrong "min" value');
+    }
+    if (typeof max !== "number") {
+      throw new Error('Wrong "max" value');
+    }
+    this._min = min;
+    this._max = max;
+    if (typeof options.colorRanges === "object") {
+      this._ranges = options.colorRanges;
+      this._rangesCount = this._ranges.length;
+    } else {
+      this._rangesCount = options.colorRanges;
+      this._ranges = this._createRangesArray();
+    }
+    this._colors = typeof options.colorScheme === "object" ? options.colorScheme : colormap({
+      colormap: options.colorScheme,
+      nshades: this._rangesCount
+    }).reverse();
+    if (this._colors.length !== this._rangesCount) {
+      throw new Error("The length of the colorScheme array and ranges must be equal");
+    }
+  }
+  /**
+   * Create array for ranges depending on rangesCount.
+   * @returns {Array.<*>} Return array of ranges.
+   * @private
+   */
+  _createRangesArray() {
+    const arr = [];
+    const step = Math.floor((this._max - this._min) / this._rangesCount, 10);
+    for (let i = 1; i < this._rangesCount; i++) {
+      arr.push(this._min + i * step);
+    }
+    arr.push(this._max + 1);
+    return arr;
+  }
+  /**
+   * @returns {Array} Return generated array of colors.
+   */
+  getColorMap() {
+    return this._colors;
+  }
+  /**
+   * @returns {Array} Return generated array of ranges.
+   */
+  getColorRanges() {
+    return this._ranges;
+  }
+  /**
+   * Return color depending on count of points inside polygon
+   * @param {number} pointsCount=0 Count of point inside polygon.
+   * @returns {string} Return color.
+   */
+  getColor(pointsCount = 0) {
+    let color = this._colors[0];
+    for (let i = 0; i < this._rangesCount; i++) {
+      if (pointsCount > this._ranges[i - 1] && pointsCount <= this._ranges[i]) {
+        color = this._colors[i];
+        break;
+      }
+    }
+    return color;
+  }
+}
+var colorize_default = Colorize;
+const defaultBalloonContent = (object2) => {
+  return `<div>
+            <h3>Object data</h3>
+            <div>Number of points: ${object2.properties.pointsCount}</div>
+    </div>`;
+};
+var defaultBalloonContent_default = defaultBalloonContent;
+const defaultFilter = function(feature) {
+  return feature.properties.pointsCount > 0;
+};
+var defaultFilter_default = defaultFilter;
+const defaultMapper = function(feature) {
+  const { pointsCount, pointsWeight } = feature.properties;
+  let fillColor;
+  if (pointsCount === 0) {
+    fillColor = this.options.get("fillColorEmptyPolygon");
+  } else {
+    const colorNumber = this.options.get("fillBy") === "weight" ? pointsWeight : pointsCount;
+    fillColor = this.colorize.getColor(colorNumber);
+  }
+  feature.properties.fillColor = fillColor;
+  feature.options = Object.assign(
+    {
+      fillColor,
+      fillOpacity: this.options.get("fillOpacity"),
+      strokeWidth: this.options.get("strokeWidth"),
+      strokeColor: this.options.get("strokeColor")
+    },
+    feature.options
+  );
+  return feature;
+};
+var defaultMapper_default = defaultMapper;
+const defaultOnClick = function(e) {
+  const objId = e.get("objectId");
+  const object2 = this.objectManager.objects.getById(objId);
+  const balloonContent = this.options.get("balloonContent");
+  this.balloon.setData({
+    content: balloonContent(object2)
+  });
+  this.balloon.open(e.get("coords"));
+  const options = {
+    fillColorOriginal: object2.options.fillColor || this.options.get("fillColor"),
+    fillOpacityOriginal: typeof object2.options.fillOpacity === "number" ? object2.options.fillOpacity : this.options.get("fillOpacity"),
+    strokeColorOriginal: typeof object2.options.strokeColor === "number" ? object2.options.strokeColor : this.options.get("strokeColor"),
+    strokeWidthOriginal: typeof object2.options.strokeWidth === "number" ? object2.options.strokeWidth : this.options.get("strokeWidth"),
+    fillOpacity: typeof object2.options.fillOpacityActive === "number" ? object2.options.fillOpacityActive : this.options.get("fillOpacityActive"),
+    strokeColor: typeof object2.options.strokeColorActive === "number" ? object2.options.strokeColorActive : this.options.get("strokeColorActive"),
+    strokeWidth: typeof object2.options.strokeWidthActive === "number" ? object2.options.strokeWidthActive : this.options.get("strokeWidthActive")
+  };
+  const fillColor = object2.options.fillColorActive || this.options.get("fillColorActive");
+  if (fillColor) {
+    options.fillColor = fillColor;
+  }
+  this.objectManager.objects.setObjectOptions(objId, options);
+  const onClose = () => {
+    if (this._prevObjectId) {
+      const object22 = this.objectManager.objects.getById(this._prevObjectId);
+      if (object22) {
+        this.objectManager.objects.setObjectOptions(this._prevObjectId, {
+          fillColor: object22.options.fillColorOriginal,
+          fillOpacity: object22.options.fillOpacityOriginal,
+          strokeColor: object22.options.strokeColorOriginal,
+          strokeWidth: object22.options.strokeWidthOriginal
+        });
+      }
+    }
+  };
+  onClose();
+  this._prevObjectId = objId;
+  this.balloon.events.add("close", () => {
+    onClose();
+    this._prevObjectId = null;
+  });
+};
+var defaultOnClick_default = defaultOnClick;
+const defaultOnMouseEnter = function(e) {
+  const objId = e.get("objectId");
+  if (this._prevObjectId !== objId) {
+    const object2 = this.objectManager.objects.getById(objId);
+    const options = {
+      fillColorOriginal: object2.options.fillColor || this.options.get("fillColor"),
+      fillOpacityOriginal: typeof object2.options.fillOpacity === "number" ? object2.options.fillOpacity : this.options.get("fillOpacity"),
+      strokeColorOriginal: typeof object2.options.strokeColor === "number" ? object2.options.strokeColor : this.options.get("strokeColor"),
+      strokeWidthOriginal: typeof object2.options.strokeWidth === "number" ? object2.options.strokeWidth : this.options.get("strokeWidth"),
+      fillOpacity: typeof object2.options.fillOpacityHover === "number" ? object2.options.fillOpacityHover : this.options.get("fillOpacityHover"),
+      strokeColor: typeof object2.options.strokeColorHover === "number" ? object2.options.strokeColorHover : this.options.get("strokeColorHover"),
+      strokeWidth: typeof object2.options.strokeWidthHover === "number" ? object2.options.strokeWidthHover : this.options.get("strokeWidthHover")
+    };
+    const fillColor = object2.options.fillColorHover || this.options.get("fillColorHover");
+    if (fillColor) {
+      options.fillColor = fillColor;
+    }
+    this.objectManager.objects.setObjectOptions(objId, options);
+  }
+};
+var defaultOnMouseEnter_default = defaultOnMouseEnter;
+const defaultOnMouseLeave = function(e) {
+  const objId = e.get("objectId");
+  const object2 = this.objectManager.objects.getById(objId);
+  if (this._prevObjectId !== objId) {
+    this.objectManager.objects.setObjectOptions(objId, {
+      fillColor: object2.options.fillColorOriginal,
+      fillOpacity: object2.options.fillOpacityOriginal,
+      strokeColor: object2.options.strokeColorOriginal,
+      strokeWidth: object2.options.strokeWidthOriginal
+    });
+  }
+};
+var defaultOnMouseLeave_default = defaultOnMouseLeave;
+const inside = (polygon, point) => {
+  const pointCoord = point.coordinates;
+  const polygonsCoord = polygon.coordinates;
+  const polygonCoord = polygonsCoord[0];
+  let result = contains(polygonCoord, pointCoord) !== 1;
+  if (result) {
+    for (let k = 1; k < polygonsCoord.length; k++) {
+      const holeCoord = polygonsCoord[k];
+      const isInsideHole = contains(holeCoord, pointCoord) !== 1;
+      if (isInsideHole) {
+        result = !isInsideHole;
+        break;
+      }
+    }
+  } else {
+    for (let k = 1; k < polygonsCoord.length; k++) {
+      const polygonCoord2 = polygonsCoord[k];
+      const isInsidePolygon = contains(polygonCoord2, pointCoord) !== 1;
+      if (isInsidePolygon) {
+        result = isInsidePolygon;
+        break;
+      }
+    }
+  }
+  return result;
+};
+var inside_default = inside;
+const normalizeFeature = (feature, meta, props = {}) => {
+  let { type, coordinates } = feature.geometry;
+  if (feature.geometry.type === "MultiPolygon") {
+    type = "Polygon";
+    coordinates = feature.geometry.coordinates.reduce(
+      (acc, coordinates2) => acc.concat(coordinates2),
+      []
+    );
+  }
+  return Object.assign({}, props, feature, {
+    geometry: {
+      type,
+      coordinates,
+      // This parameter is needed for drawing holes in polygons on ymaps
+      fillRule: "evenOdd"
+    }
+  });
+};
+var normalizeFeature_default = normalizeFeature;
+function define$1(ymaps) {
+  ymaps.modules.define(
+    "Polygonmap",
+    ["meta", "option.Manager", "ObjectManager"],
+    (provide, meta, OptionManager, ObjectManager) => {
+      class Polygonmap {
+        constructor(data, options = {}) {
+          const defaultOptions = new OptionManager({
+            mapper: defaultMapper_default,
+            fillBy: "points",
+            fillByWeightProp: "weight",
+            fillByWeightType: "middle",
+            colorRangesMinimum: 0,
+            colorRanges: 4,
+            colorScheme: ["#e66a54", "#ce4356", "#ab2960", "#571756"],
+            fillOpacity: 0.8,
+            fillColorEmptyPolygon: "#f4f6f8",
+            strokeColor: "#fff",
+            strokeWidth: 1,
+            showLegend: true,
+            legendTemplate: colorLegend_default.defaultTemplate,
+            legendPosition: {
+              top: 10,
+              right: 10
+            },
+            // Since the default filter for empty polygons is disabled by default,
+            // this option will be undefined.
+            filter: void 0,
+            filterEmptyPolygons: false,
+            onMouseEnter: defaultOnMouseEnter_default,
+            onMouseLeave: defaultOnMouseLeave_default,
+            onClick: defaultOnClick_default,
+            balloonContent: defaultBalloonContent_default,
+            fillColorHover: void 0,
+            fillOpacityHover: 0.9,
+            strokeColorHover: "#fff",
+            strokeWidthHover: 2,
+            fillColorActive: void 0,
+            fillOpacityActive: 0.9,
+            strokeColorActive: "#fff",
+            strokeWidthActive: 2,
+            interactivity: true
+          });
+          this._initOptions(options, defaultOptions);
+          this.setData(data);
+        }
+        /**
+         * Get Yandex Maps main class.
+         *
+         * @public
+         * @returns {YMaps} Reference to YMaps.
+         */
+        getYMaps() {
+          return ymaps;
+        }
+        /**
+         * Get the data, polygons and points.
+         *
+         * @public
+         * @returns {Object} Polygons and points.
+         */
+        getData() {
+          return this._data || null;
+        }
+        /**
+         * Set the data, polygons and points.
+         *
+         * @public
+         * @param {Object} data Polygons and points.
+         * @param {Object} data.polygons GeoJSON FeatureCollections.
+         * @param {Object} data.points GeoJSON FeatureCollections.
+         * @returns {Polygonmap} Self-reference.
+         */
+        setData(data) {
+          this._data = data;
+          if (data) {
+            this._data = {
+              points: { type: "FeatureCollection", features: [] },
+              polygons: { type: "FeatureCollection", features: [] }
+            };
+            this._prepare(data);
+            this._initObjectManager();
+          }
+          return this;
+        }
+        /**
+         * Get the Map instance.
+         *
+         * @public
+         * @returns {Map} Reference to Map instance.
+         */
+        getMap() {
+          return this._map;
+        }
+        /**
+         * Set Map instance to render Polygonmap object.
+         *
+         * @public
+         * @param {Map} map Map instance.
+         * @returns {Polygonmap} Self-reference.
+         */
+        setMap(map) {
+          if (this._map !== map) {
+            this._map = map;
+            if (map && this._data) {
+              this._render();
+            }
+          }
+          return this;
+        }
+        /**
+         * Destructs Polygonmap instance.
+         *
+         * @public
+         */
+        destroy() {
+          this.setData(null);
+          this.objectManager.removeAll();
+          this._legendControl.setParent(null);
+          this.balloon.close();
+          this.setMap(null);
+        }
+        /**
+         * Prepare for render Polygonmap.
+         *
+         * @private
+         * @param {Object} data Polygons and points.
+         * @param {Object} data.polygons GeoJSON FeatureCollections.
+         * @param {Object} data.points GeoJSON FeatureCollections.
+         * @returns {undefined}
+         */
+        _prepare(data) {
+          if (data.polygons.type === "FeatureCollection" && data.points.type === "FeatureCollection") {
+            const polygonFeatures = data.polygons.features;
+            const fillBy = this.options.get("fillBy");
+            const fillByWeightType = this.options.get("fillByWeightType");
+            const fillByWeightProp = this.options.get("fillByWeightProp");
+            let pointFeatures = data.points.features;
+            for (let i = 0; i < polygonFeatures.length; i++) {
+              const restPointFeatures = [];
+              const polygonFeature = normalizeFeature_default(polygonFeatures[i], meta, {
+                id: i
+              });
+              polygonFeature.properties = polygonFeature.properties || {};
+              if (typeof polygonFeature.properties.pointsCount !== "number" && typeof polygonFeature.properties.pointsWeight !== "number") {
+                let pointsCount = 0;
+                let pointsWeight = 0;
+                for (let j = 0; j < pointFeatures.length; j++) {
+                  let pointFeature;
+                  if (i === 0) {
+                    pointFeature = normalizeFeature_default(pointFeatures[j], meta, {
+                      id: j
+                    });
+                    this._data.points.features.push(pointFeature);
+                  } else {
+                    pointFeature = pointFeatures[j];
+                  }
+                  if (inside_default(polygonFeature.geometry, pointFeature.geometry)) {
+                    pointsCount++;
+                    pointsWeight += pointFeature.properties[fillByWeightProp];
+                  } else {
+                    restPointFeatures.push(pointFeature);
+                  }
+                }
+                pointFeatures = restPointFeatures;
+                if (fillBy === "weight") {
+                  pointsWeight = fillByWeightType === "middle" ? pointsWeight === 0 && pointsCount === 0 ? 0 : pointsWeight / pointsCount : pointsWeight;
+                }
+                polygonFeature.properties.pointsCount = pointsCount;
+                polygonFeature.properties.pointsWeight = pointsWeight;
+              }
+              this._calculator(polygonFeature, { fillBy });
+              this._data.polygons.features.push(polygonFeature);
+            }
+          }
+        }
+        /**
+         * Calculator for feture values.
+         *
+         * @param {Object} feature GeoJSON FeatureCollection.
+         * @param {Object} options Options for calculating.
+         * @private
+         */
+        _calculator(feature, options) {
+          const { pointsCount } = feature.properties;
+          const { pointsWeight } = feature.properties;
+          const { fillBy } = options;
+          if (typeof this.pointsCountMinimum === "undefined" || pointsCount <= this.pointsCountMinimum) {
+            this.pointsCountMinimum = pointsCount;
+          }
+          if (typeof this.pointsCountMaximum === "undefined" || pointsCount >= this.pointsCountMaximum) {
+            this.pointsCountMaximum = pointsCount;
+          }
+          if (fillBy === "weight") {
+            if (typeof this.pointsWeightMinimum === "undefined" || pointsWeight <= this.pointsWeightMinimum) {
+              this.pointsWeightMinimum = pointsWeight;
+            }
+            if (typeof this.pointsWeightMaximum === "undefined" || pointsWeight >= this.pointsWeightMaximum) {
+              this.pointsWeightMaximum = pointsWeight;
+            }
+          }
+        }
+        /**
+         * Render ObjectManager.
+         *
+         * @private
+         */
+        _render() {
+          if (this.options.get("interactivity")) {
+            this._initInteractivity();
+          }
+          this._map.geoObjects.add(this.objectManager);
+          colorLegend_default.init(this);
+        }
+        /**
+         * Init Options.
+         *
+         * @param {Object} options Options.
+         * @param {Object} defaultOptions Default options.
+         * @private
+         */
+        _initOptions(options, defaultOptions) {
+          this.options = new OptionManager(options, defaultOptions);
+          const mapper = this.options.get("mapper");
+          const filterEmptyPolygons = this.options.get("filterEmptyPolygons");
+          const colorScheme = this.options.get("colorScheme");
+          const colorRanges = this.options.get("colorRanges");
+          const onMouseEnter = this.options.get("onMouseEnter");
+          const onMouseLeave = this.options.get("onMouseLeave");
+          const onClick = this.options.get("onClick");
+          this.options.set("mapper", mapper.bind(this));
+          if (filterEmptyPolygons) {
+            this.options.set("filter", defaultFilter_default.bind(this));
+          }
+          if (typeof options.colorRanges === "undefined" && colorRanges !== colorScheme.length) {
+            this.options.set("colorRanges", colorScheme.length);
+          }
+          this.options.set("onMouseEnter", onMouseEnter.bind(this));
+          this.options.set("onMouseLeave", onMouseLeave.bind(this));
+          this.options.set("onClick", onClick.bind(this));
+        }
+        /**
+         * Init ObjectManager.
+         *
+         * @private
+         */
+        _initObjectManager() {
+          const mapper = this.options.get("mapper");
+          const filter = this.options.get("filter");
+          const fillBy = this.options.get("fillBy");
+          const fillByWeight = fillBy === "weight";
+          const colorRangesMinimum = this.options.get("colorRangesMinimum");
+          if (colorRangesMinimum === "min") {
+            delete this.pointsCountMinimum;
+            delete this.pointsWeightMinimum;
+            const reducer2 = (acc, feature) => {
+              if (!filter || filter(feature)) {
+                this._calculator(feature, { fillBy });
+                acc.push(feature);
+              }
+              return acc;
+            };
+            this._data.polygons.features = this._data.polygons.features.reduce(
+              reducer2,
+              []
+            );
+          }
+          try {
+            this.colorize = new colorize_default(
+              colorRangesMinimum === "min" ? fillByWeight ? this.pointsWeightMinimum : this.pointsCountMinimum : colorRangesMinimum,
+              fillByWeight ? this.pointsWeightMaximum : this.pointsCountMaximum,
+              {
+                colorScheme: this.options.get("colorScheme"),
+                colorRanges: this.options.get("colorRanges")
+              }
+            );
+          } catch (error) {
+            console.error(error);
+          }
+          const reducer = (acc, feature) => {
+            if (!filter || filter(feature)) {
+              if (mapper) {
+                acc.push(mapper(feature));
+              } else {
+                acc.push(feature);
+              }
+              this._calculator(feature, { fillBy });
+            }
+            return acc;
+          };
+          this._data.polygons.features = this._data.polygons.features.reduce(reducer, []);
+          this.objectManager = new ObjectManager();
+          this.objectManager.add(this._data.polygons);
+        }
+        /**
+         * Init interactivity.
+         *
+         * @private
+         */
+        _initInteractivity() {
+          this._prevObjectId = null;
+          this.balloon = new ymaps.Balloon(this._map);
+          const onMouseEnter = this.options.get("onMouseEnter");
+          const onMouseLeave = this.options.get("onMouseLeave");
+          const onClick = this.options.get("onClick");
+          this.objectManager.events.add("mouseenter", onMouseEnter);
+          this.objectManager.events.add("mouseleave", onMouseLeave);
+          this.balloon.options.setParent(this._map.options);
+          this.objectManager.events.add("click", onClick);
+        }
+      }
+      provide(Polygonmap);
+    }
+  );
+}
+var Polygonmap_default = define$1;
+function sin(angle) {
+  return Math.sin(Math.PI * angle / 180);
+}
+function cos(angle) {
+  return Math.cos(Math.PI * angle / 180);
+}
+function hexagonGrid(projection, zoom, R, offsetLeft, offsetTop, width, height) {
+  const colWidth = 1.5 * R;
+  const rowHeight = 1.5 * R;
+  const cols = Math.floor((width + R / 2) / colWidth) + 1;
+  const rows = Math.floor(height / rowHeight);
+  const result = { type: "FeatureCollection", features: [] };
+  let id = 0;
+  for (let c = 0; c < cols; c++) {
+    for (let r = 0; r < rows; r++) {
+      const horizontalShift = c % 2 === 0 ? 0 : -1 * sin(60);
+      const x = c * 1.5;
+      const y = r * (2 * sin(60)) + horizontalShift;
+      const hexagon = [
+        [cos(0) + x, sin(0) + y],
+        [cos(60) + x, sin(60) + y],
+        [cos(120) + x, sin(120) + y],
+        [cos(180) + x, sin(180) + y],
+        [cos(240) + x, sin(240) + y],
+        [cos(300) + x, sin(300) + y],
+        [cos(0) + x, sin(0) + y]
+      ];
+      const hexagonGlobals = hexagon.map(
+        ([x2, y2]) => projection.fromGlobalPixels([offsetLeft + x2 * R, offsetTop + y2 * R], zoom)
+      );
+      result.features.push({
+        type: "Feature",
+        id: "hxg" + id++,
+        geometry: {
+          type: "Polygon",
+          coordinates: [hexagonGlobals]
+        },
+        properties: {}
+      });
+    }
+  }
+  return result;
+}
+function squaresGrid(projection, zoom, sideLength, offsetLeft, offsetTop, width, height) {
+  const cols = width / sideLength;
+  const rows = height / sideLength;
+  const result = { type: "FeatureCollection", features: [] };
+  let id = 0;
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      const left = offsetLeft + c * sideLength;
+      const top = offsetTop + r * sideLength;
+      const right = left + sideLength;
+      const bottom = top + sideLength;
+      const squarePixels = [
+        [left, top],
+        [right, top],
+        [right, bottom],
+        [left, bottom]
+      ];
+      const squareGlobals = squarePixels.map(
+        (point) => projection.fromGlobalPixels(point, zoom)
+      );
+      result.features.push({
+        type: "Feature",
+        id: "sqr" + id++,
+        geometry: {
+          type: "Polygon",
+          coordinates: [squareGlobals]
+        },
+        properties: {}
+      });
+    }
+  }
+  return result;
+}
+function define(ymaps) {
+  Polygonmap_default(ymaps);
+  ymaps.modules.define(
+    "Gridmap",
+    ["Polygonmap", "util.bounds"],
+    (provide, Polygonmap, bounds) => {
+      function getRequiredOption(options, path) {
+        const value = get(options, path);
+        if (!value) {
+          throw new Error(`options.${path} is required parameter`);
+        }
+        return value;
+      }
+      class Gridmap {
+        constructor(data, options) {
+          this._data = data;
+          this.options = options;
+        }
+        /**
+         * Set Map instance to render Polygonmap object.
+         *
+         * @public
+         * @param {Map} map Map instance.
+         * @returns {Gridmap|Polygonmap} Self-reference.
+         */
+        setMap(map) {
+          if (this._map !== map) {
+            this._map = map;
+            if (map && this._data) {
+              this._render();
+              return this._polygonmap;
+            }
+          }
+          return this;
+        }
+        /**
+         * Get the Map instance.
+         *
+         * @public
+         * @returns {Map} Reference to Map instance.
+         */
+        getMap() {
+          return this._map;
+        }
+        /**
+         * Render Polygonmap.
+         *
+         * @private
+         */
+        _render() {
+          const points = this._data;
+          const zoom = getRequiredOption(this.options, "zoom");
+          const projection = this._map.options.get("projection");
+          let leftBottom;
+          let rightTop;
+          if (get(this.options, "grid.bounds")) {
+            leftBottom = getRequiredOption(this.options, "grid.bounds.leftBottom");
+            rightTop = getRequiredOption(this.options, "grid.bounds.rightTop");
+          } else {
+            const coords = points.features.map(
+              ({ geometry: { coordinates } }) => coordinates
+            );
+            [leftBottom, rightTop] = bounds.fromPoints(coords, projection);
+          }
+          const [left, bottom] = projection.toGlobalPixels(leftBottom, zoom);
+          const [right, top] = projection.toGlobalPixels(rightTop, zoom);
+          const width = right - left;
+          const height = bottom - top;
+          const gripType = getRequiredOption(this.options, "grid.type");
+          let polygons;
+          switch (gripType) {
+            case "hexagon": {
+              const bigRadius = getRequiredOption(
+                this.options,
+                "grid.params.bigRadius"
+              );
+              polygons = hexagonGrid(
+                projection,
+                zoom,
+                bigRadius,
+                left,
+                top,
+                width,
+                height
+              );
+              break;
+            }
+            case "square": {
+              const sideWidth = getRequiredOption(
+                this.options,
+                "grid.params.sideLength"
+              );
+              polygons = squaresGrid(
+                projection,
+                zoom,
+                sideWidth,
+                left,
+                top,
+                width,
+                height
+              );
+              break;
+            }
+            default: {
+              throw new Error(`Unsupported grid's type ${gripType}`);
+            }
+          }
+          this._polygonmap = new Polygonmap({ polygons, points }, this.options);
+          this._polygonmap.setMap(this._map);
+        }
+      }
+      provide(Gridmap);
+    }
+  );
+}
+var Gridmap_default = define;
+function defineCanvas(ymaps) {
+  ymaps.modules.define(
+    "heatmap.component.Canvas",
+    ["option.Manager", "Monitor"],
+    function(provide, OptionManager, Monitor) {
+      const DEFAULT_OPTIONS = {
+        // Point radius.
+        radius: 10,
+        // Radius factor.
+        radiusFactor: 1,
+        // Map layer opacity.
+        opacity: 0.8,
+        // Median point intencity.
+        intensityOfMidpoint: 0.2,
+        // Median of points weights.
+        medianaOfWeights: 1,
+        // Gradient.
+        gradient: {
+          0.1: "rgba(128, 255, 0, 0.7)",
+          0.2: "rgba(255, 255, 0, 0.8)",
+          0.7: "rgba(234, 72, 58, 0.9)",
+          1: "rgba(162, 36, 25, 1)"
+        }
+      };
+      const EMPTY_PNG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAABFUlEQVR4nO3BMQEAAADCoPVP7WsIoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeAMBPAABPO1TCQAAAABJRU5ErkJggg==";
+      const Canvas = function(size) {
+        this._canvas = document.createElement("canvas");
+        this._canvas.width = size[0];
+        this._canvas.height = size[1];
+        this._context = this._canvas.getContext("2d");
+        this.options = new OptionManager({});
+        this._setupDrawTools();
+        this._setupOptionMonitor();
+      };
+      Canvas.prototype.getBrushRadius = function() {
+        return this.options.get("radius", DEFAULT_OPTIONS.radius) * this.options.get("radiusFactor", DEFAULT_OPTIONS.radiusFactor);
+      };
+      Canvas.prototype.generateDataURLHeatmap = function(points) {
+        if (points && points.length > 0) {
+          this._drawHeatmap(points);
+          return this._canvas.toDataURL();
+        } else {
+          return EMPTY_PNG;
+        }
+      };
+      Canvas.prototype.destroy = function() {
+        this._destroyOptionMonitor();
+        this._destroyDrawTools();
+      };
+      Canvas.prototype._setupOptionMonitor = function() {
+        this._optionMonitor = new Monitor(this.options);
+        return this._optionMonitor.add(
+          ["radius", "radiusFactor", "gradient"],
+          this._setupDrawTools,
+          this
+        );
+      };
+      Canvas.prototype._destroyOptionMonitor = function() {
+        this._optionMonitor.removeAll();
+        this._optionMonitor = {};
+      };
+      Canvas.prototype._setupDrawTools = function() {
+        this._brush = this._createBrush();
+        this._gradient = this._createGradient();
+        return this;
+      };
+      Canvas.prototype._destroyDrawTools = function() {
+        this._brush = null;
+        this._gradient = null;
+      };
+      Canvas.prototype._createBrush = function() {
+        const brush = document.createElement("canvas");
+        const context = brush.getContext("2d");
+        const radius = this.getBrushRadius();
+        const gradient = context.createRadialGradient(
+          radius,
+          radius,
+          0,
+          radius,
+          radius,
+          radius
+        );
+        brush.width = 2 * radius;
+        brush.height = 2 * radius;
+        gradient.addColorStop(0, "rgba(0,0,0,1)");
+        gradient.addColorStop(1, "rgba(0,0,0,0)");
+        context.fillStyle = gradient;
+        context.fillRect(0, 0, 2 * radius, 2 * radius);
+        return brush;
+      };
+      Canvas.prototype._createGradient = function() {
+        const canvas = document.createElement("canvas");
+        const context = canvas.getContext("2d");
+        const gradient = context.createLinearGradient(0, 0, 0, 256);
+        canvas.width = 1;
+        canvas.height = 256;
+        const gradientOption = this.options.get("gradient", DEFAULT_OPTIONS.gradient);
+        for (const i in gradientOption) {
+          if (gradientOption.hasOwnProperty(i)) {
+            gradient.addColorStop(i, gradientOption[i]);
+          }
+        }
+        context.fillStyle = gradient;
+        context.fillRect(0, 0, 1, 256);
+        return context.getImageData(0, 0, 1, 256).data;
+      };
+      Canvas.prototype._drawHeatmap = function(points) {
+        const context = this._context;
+        const radius = this.getBrushRadius();
+        const intensityOfMidpoint = this.options.get(
+          "intensityOfMidpoint",
+          DEFAULT_OPTIONS.intensityOfMidpoint
+        );
+        const medianaOfWeights = this.options.get(
+          "medianaOfWeights",
+          DEFAULT_OPTIONS.medianaOfWeights
+        );
+        const weightFactor = intensityOfMidpoint / medianaOfWeights;
+        context.clearRect(0, 0, this._canvas.width, this._canvas.height);
+        for (let i = 0, length = points.length; i < length; i++) {
+          context.globalAlpha = Math.min(points[i].weight * weightFactor, 1);
+          context.drawImage(
+            this._brush,
+            points[i].coordinates[0] - radius,
+            points[i].coordinates[1] - radius
+          );
+        }
+        const heatmapImage = context.getImageData(
+          0,
+          0,
+          this._canvas.width,
+          this._canvas.height
+        );
+        this._colorize(heatmapImage.data);
+        context.putImageData(heatmapImage, 0, 0);
+        return this;
+      };
+      Canvas.prototype._colorize = function(pixels) {
+        const opacity = this.options.get("opacity", DEFAULT_OPTIONS.opacity);
+        for (let i = 3, length = pixels.length, j; i < length; i += 4) {
+          if (pixels[i]) {
+            j = 4 * pixels[i];
+            pixels[i - 3] = this._gradient[j];
+            pixels[i - 2] = this._gradient[j + 1];
+            pixels[i - 1] = this._gradient[j + 2];
+            pixels[i] = opacity * (this._gradient[j + 3] || 255);
+          }
+        }
+      };
+      provide(Canvas);
+    }
+  );
+}
+var Canvas_default = defineCanvas;
+function defineDataConverter(ymaps) {
+  ymaps.modules.define("heatmap.component.dataConverter", [], function(provide) {
+    const dataConverter = {};
+    dataConverter.convert = function(data) {
+      let points = [];
+      if (typeof object == "string") {
+        data = JSON.parse(data);
+      }
+      if (this._isJsonFeatureCollection(data)) {
+        for (let i = 0, l = data.features.length; i < l; i++) {
+          points = points.concat(this.convert(data.features[i]));
+        }
+      } else if (this._isCoordinates(data)) {
+        points.push(this._convertCoordinatesToPoint(data));
+      } else {
+        const dataArray = [].concat(data);
+        for (let i = 0, l = dataArray.length, item; i < l; i++) {
+          item = dataArray[i];
+          if (this._isCoordinates(item)) {
+            points.push(this._convertCoordinatesToPoint(item));
+          } else if (this._isJsonGeometry(item) && item.type == "Point") {
+            points.push(this._convertCoordinatesToPoint(item.coordinates));
+          } else if (this._isJsonFeature(item) && item.geometry.type == "Point") {
+            points.push(this._convertJsonFeatureToPoint(item));
+          } else if (this._isGeoObject(item) && item.geometry.getType() == "Point") {
+            points.push(this._convertGeoObjectToPoint(item));
+          } else if (this._isCollection(item)) {
+            const iterator = item.getIterator();
+            let geoObject;
+            while ((geoObject = iterator.getNext()) != iterator.STOP_ITERATION) {
+              points = points.concat(this.convert(geoObject));
+            }
+          }
+        }
+      }
+      return points;
+    };
+    dataConverter._isJsonFeature = function(object2) {
+      return object2.type == "Feature";
+    };
+    dataConverter._convertJsonFeatureToPoint = function(jsonFeature) {
+      let weight = 1;
+      if (jsonFeature.properties && jsonFeature.properties.weight) {
+        weight = jsonFeature.properties.weight;
+      }
+      return {
+        coordinates: jsonFeature.geometry.coordinates,
+        weight
+      };
+    };
+    dataConverter._isJsonFeatureCollection = function(object2) {
+      return object2.type == "FeatureCollection";
+    };
+    dataConverter._isCoordinates = function(object2) {
+      return Object.prototype.toString.call(object2) == "[object Array]" && typeof object2[0] == "number" && typeof object2[1] == "number";
+    };
+    dataConverter._convertCoordinatesToPoint = function(coordinates) {
+      return {
+        coordinates,
+        weight: 1
+      };
+    };
+    dataConverter._isJsonGeometry = function(object2) {
+      return Boolean(object2.type && object2.coordinates);
+    };
+    dataConverter._isGeoObject = function(object2) {
+      return Boolean(object2.geometry && object2.getOverlay);
+    };
+    dataConverter._convertGeoObjectToPoint = function(geoObject) {
+      return {
+        coordinates: geoObject.geometry.getCoordinates(),
+        weight: geoObject.properties.get("weight") || 1
+      };
+    };
+    dataConverter._isCollection = function(object2) {
+      return Boolean(object2.getIterator);
+    };
+    provide(dataConverter);
+  });
+}
+var DataConverter_default = defineDataConverter;
+function defineHeatmap(ymaps) {
+  ymaps.modules.define(
+    "Heatmap",
+    [
+      "option.Manager",
+      "Monitor",
+      "Layer",
+      "heatmap.component.dataConverter",
+      "heatmap.component.TileUrlsGenerator"
+    ],
+    function(provide, OptionManager, Monitor, Layer2, dataConverter, TileUrlsGenerator) {
+      const Heatmap = function(data, options) {
+        this._unprocessedPoints = [];
+        if (data) {
+          this.setData(data);
+        }
+        this.options = new OptionManager(options);
+      };
+      Heatmap.prototype.getData = function() {
+        return this._data || null;
+      };
+      Heatmap.prototype.setData = function(data) {
+        this._data = data;
+        const points = dataConverter.convert(data);
+        if (this._tileUrlsGenerator) {
+          this._tileUrlsGenerator.setPoints(points);
+          this._refresh();
+        } else {
+          this._unprocessedPoints = points;
+        }
+        return this;
+      };
+      Heatmap.prototype.getMap = function() {
+        return this._map;
+      };
+      Heatmap.prototype.setMap = function(map) {
+        if (this._map != map) {
+          if (this._layer) {
+            this._map.layers.remove(this._layer);
+            this._destroyLayer();
+          }
+          this._map = map;
+          if (map) {
+            this._setupLayer();
+            this._map.layers.add(this._layer);
+          }
+        }
+        return this;
+      };
+      Heatmap.prototype.destroy = function() {
+        this._data = null;
+        this.setMap(null);
+      };
+      Heatmap.prototype._refresh = function() {
+        if (this._layer) {
+          this._layer.update();
+        }
+        return this;
+      };
+      Heatmap.prototype._setupLayer = function() {
+        this._setupTileUrlsGenerator();
+        const getTileUrl = this._tileUrlsGenerator.getTileUrl.bind(this._tileUrlsGenerator);
+        this._layer = new Layer2(getTileUrl, { tileTransparent: true });
+        this._setupOptionMonitor();
+        return this._layer;
+      };
+      Heatmap.prototype._destroyLayer = function() {
+        this._destroyTileUrlsGenerator();
+        this._destroyOptionMonitor();
+        this._layer = null;
+      };
+      Heatmap.prototype._setupTileUrlsGenerator = function() {
+        this._tileUrlsGenerator = new TileUrlsGenerator(
+          this._map.options.get("projection"),
+          this._unprocessedPoints
+        );
+        this._unprocessedPoints = null;
+        this._tileUrlsGenerator.options.setParent(this.options);
+        return this._tileUrlsGenerator;
+      };
+      Heatmap.prototype._destroyTileUrlsGenerator = function() {
+        this._unprocessedPoints = this._tileUrlsGenerator.getPoints();
+        this._tileUrlsGenerator.destroy();
+        this._tileUrlsGenerator = null;
+      };
+      Heatmap.prototype._setupOptionMonitor = function() {
+        this._optionMonitor = new Monitor(this.options);
+        return this._optionMonitor.add(
+          ["radius", "dissipating", "opacity", "intensityOfMidpoint", "gradient"],
+          this._refresh,
+          this
+        );
+      };
+      Heatmap.prototype._destroyOptionMonitor = function() {
+        this._optionMonitor.removeAll();
+        this._optionMonitor = {};
+      };
+      provide(Heatmap);
+    }
+  );
+}
+var Heatmap_default = defineHeatmap;
+function defineTitleUrlsGenerator(ymaps) {
+  ymaps.modules.define(
+    "heatmap.component.TileUrlsGenerator",
+    ["option.Manager", "heatmap.component.Canvas"],
+    function(provide, OptionManager, HeatmapCanvas) {
+      const TILE_SIZE = [256, 256];
+      const TileUrlsGenerator = function(projection, points) {
+        this._projection = projection;
+        this._canvas = new HeatmapCanvas(TILE_SIZE);
+        this.options = new OptionManager({});
+        this._canvas.options.setParent(this.options);
+        this.setPoints(points || []);
+      };
+      TileUrlsGenerator.prototype.setPoints = function(points) {
+        this._points = [];
+        const weights = [];
+        for (let i = 0, length = points.length; i < length; i++) {
+          this._points.push({
+            coordinates: this._projection.toGlobalPixels(points[i].coordinates, 0),
+            weight: points[i].weight
+          });
+          weights.push(points[i].weight);
+        }
+        this._canvas.options.set("medianaOfWeights", findMediana(weights));
+        return this;
+      };
+      TileUrlsGenerator.prototype.getPoints = function() {
+        const points = [];
+        for (let i = 0, length = this._points.length; i < length; i++) {
+          points.push({
+            coordinates: this._projection.fromGlobalPixels(
+              this._points[i].coordinates,
+              0
+            ),
+            weight: this._points[i].weight
+          });
+        }
+        return points;
+      };
+      TileUrlsGenerator.prototype.getTileUrl = function(tileNumber, zoom) {
+        const radiusFactor = this._canvas.options.get("radiusFactor");
+        if (this.options.get("dissipating")) {
+          const newRadiusFactor = calculateRadiusFactor(zoom);
+          if (radiusFactor != newRadiusFactor) {
+            this._canvas.options.set("radiusFactor", newRadiusFactor);
+          }
+        } else if (radiusFactor) {
+          this._canvas.options.unset("radiusFactor");
+        }
+        const zoomFactor = Math.pow(2, zoom);
+        const tileBounds = [
+          [
+            tileNumber[0] * TILE_SIZE[0] / zoomFactor,
+            tileNumber[1] * TILE_SIZE[1] / zoomFactor
+          ],
+          [
+            (tileNumber[0] + 1) * TILE_SIZE[0] / zoomFactor,
+            (tileNumber[1] + 1) * TILE_SIZE[1] / zoomFactor
+          ]
+        ];
+        const tileMargin = this._canvas.getBrushRadius() / zoomFactor;
+        const points = [];
+        for (let i = 0, length = this._points.length, point; i < length; i++) {
+          point = this._points[i].coordinates;
+          if (this._contains(tileBounds, point, tileMargin)) {
+            points.push({
+              coordinates: [
+                (point[0] - tileBounds[0][0]) * zoomFactor,
+                (point[1] - tileBounds[0][1]) * zoomFactor
+              ],
+              weight: this._points[i].weight
+            });
+          }
+        }
+        return this._canvas.generateDataURLHeatmap(points);
+      };
+      TileUrlsGenerator.prototype.destroy = function() {
+        this._canvas.destroy();
+        this._canvas = null;
+        this._projection = null;
+      };
+      TileUrlsGenerator.prototype._contains = function(bounds, point, margin) {
+        return point[0] >= bounds[0][0] - margin && point[0] <= bounds[1][0] + margin && point[1] >= bounds[0][1] - margin && point[1] <= bounds[1][1] + margin;
+      };
+      function calculateRadiusFactor(zoom) {
+        return Math.pow(zoom / 10, 1.1);
+      }
+      function findMediana(selection) {
+        const sortSelection = selection.sort(comparator);
+        const center = sortSelection.length / 2;
+        if (center !== Math.floor(center)) {
+          return sortSelection[Math.floor(center)];
+        } else {
+          return (sortSelection[center - 1] + sortSelection[center]) / 2;
+        }
+      }
+      function comparator(a, b2) {
+        return a - b2;
+      }
+      provide(TileUrlsGenerator);
+    }
+  );
+}
+var TileUrlsGenerator_default = defineTitleUrlsGenerator;
+function defineModules(ymaps) {
+  Heatmap_default(ymaps);
+  DataConverter_default(ymaps);
+  TileUrlsGenerator_default(ymaps);
+  Canvas_default(ymaps);
+}
+var modules_default = defineModules;
+const IS_DEVELOPMENT = process.env.NODE_ENV === "development";
+const ONLOAD = "__chartkit_ymaps_onload";
+const ONERROR = "__chartkit_ymaps_onerror";
+function getFetchUrl(lang, apiKey = "") {
+  const apiKeyParam = apiKey ? `&apikey=${apiKey}` : "";
+  return `https://api-maps.yandex.ru/2.1?lang=${lang}_RU${apiKeyParam}&mode=${IS_DEVELOPMENT ? "debug" : "release"}&ns=&onload=${ONLOAD}&onerror=${ONERROR}`;
+}
+function combinedMapper(feature) {
+  const mappedFeature = defaultMapper_default.call(this, feature);
+  const nameProperty = this.options.get("nameProperty");
+  const name = nameProperty ? mappedFeature.properties[nameProperty] : void 0;
+  return merge({}, mappedFeature, {
+    properties: {
+      name,
+      text: this.options.get("valuesText"),
+      value: this.options.get("fillBy") === "weight" ? mappedFeature.properties.pointsWeight : mappedFeature.properties.pointsCount
+    }
+  });
+}
+function combinedMapperNoPoints(feature) {
+  const mappedFeature = defaultMapper_default.call(this, feature);
+  const nameProperty = this.options.get("nameProperty");
+  const name = nameProperty ? mappedFeature.properties[nameProperty] : void 0;
+  return merge({}, mappedFeature, {
+    properties: {
+      name,
+      text: this.options.get("valuesText")
+    }
+  });
+}
+function arrayOfArraysToPointsCollection(points) {
+  return {
+    type: "FeatureCollection",
+    features: points.map(([coordA, coordB, weight]) => {
+      return {
+        geometry: {
+          coordinates: [coordA, coordB],
+          type: "Point"
+        },
+        properties: { weight },
+        type: "Feature"
+      };
+    })
+  };
+}
+const GEO_OBJECT_TYPE = {
+  POLYGONMAP: "polygonmap",
+  GRIDMAP: "gridmap",
+  HEATMAP: "heatmap",
+  GEOCOLLECTION: "geocollection"
+};
+const b$3 = block("chartkit-tooltip");
+const TOOLTIP_TWIG_TEMPLATE = `<div
+        class="${b$3({ "yandex-map": true })}"
+        {% if (!(properties.name || properties.value !== undefined || properties.text || properties.data)) %}
+            style="display: none"
+        {% endif %}
+    >
+        {% if (properties.name) %}
+            <div class="${b$3("header")}">
+                {{properties.name}}
+            </div>
+        {% endif %}
+        {% if (properties.value !== undefined || properties.text) %}
+            <div class="${b$3("row")}">
+                {% if (properties.value !== undefined) %}
+                    <div class="${b$3("cell", {
+  "yandex-map": true
+})}">{{properties.value|number}}</div>
+                {% endif %}
+                {% if (properties.text) %}
+                    <div class="${b$3("cell", { "yandex-map": true })}">
+                        {% if (properties.rawText) %}
+                            {{properties.text|raw}}
+                        {% else %}
+                            {{properties.text}}
+                        {% endif %}
+                    </div>
+                {% endif %}
+            </div>
+        {% endif %}
+        {% if (properties.data) %}
+            {% if (properties.value !== undefined || properties.text || properties.name) %}
+                <wbr>
+            {% endif %}
+            {% for part in properties.data %}
+                <div class="${b$3("row")}
+                ">
+                    {% if (properties.data.0.color) %}
+                        <div class="${b$3("cell")}">
+                            <span class="${b$3(
+  "color"
+)}" style="background-color: {{part.color}};"></span>
+                        </div>
+                    {% endif %}
+                    <div class="${b$3("cell", { "yandex-map": true })}">{{part.weight|number}}</div>
+                    <div class="${b$3("cell", { "yandex-map": true })}">
+                        {% if (properties.rawText) %}
+                            {{part.text|raw}}
+                        {% else %}
+                            {{part.text}}
+                        {% endif %}
+                    </div>
+                </div>
+            {% endfor %}
+        {% endif %}
+    </div>`;
+function setHeatmapVisibility(heatmap, value) {
+  if (value) {
+    heatmap.options.set("opacity", heatmap.options.get("opacitySaved"));
+    heatmap.options.set("opacitySaved", null);
+  } else {
+    heatmap.options.set("opacitySaved", heatmap.options.get("opacity"));
+    heatmap.options.set("opacity", 0);
+  }
+}
+function setPolygonmapVisibility(geoObject, value) {
+  const objects = geoObject.objectManager.objects;
+  objects.getAll().forEach(
+    ({
+      id,
+      options: {
+        fillOpacity,
+        fillOpacityHover,
+        strokeWidth,
+        strokeWidthHover,
+        fillOpacitySaved,
+        fillOpacityHoverSaved,
+        strokeWidthSaved,
+        strokeWidthHoverSaved
+      }
+    }) => {
+      if (value) {
+        objects.setObjectOptions(id, {
+          openHintOnHover: true,
+          zIndex: 100,
+          fillOpacity: fillOpacitySaved,
+          fillOpacityHover: fillOpacityHoverSaved,
+          strokeWidth: strokeWidthSaved,
+          strokeWidthHover: strokeWidthHoverSaved,
+          fillOpacitySaved: null,
+          fillOpacityHoverSaved: null,
+          strokeWidthSaved: null,
+          strokeWidthHoverSaved: null
+        });
+      } else {
+        objects.setObjectOptions(id, {
+          openHintOnHover: false,
+          zIndex: -100,
+          fillOpacity: 0,
+          fillOpacityHover: 0,
+          strokeWidth: 0,
+          strokeWidthHover: 0,
+          fillOpacitySaved: fillOpacity,
+          fillOpacityHoverSaved: fillOpacityHover,
+          strokeWidthSaved: strokeWidth,
+          strokeWidthHoverSaved: strokeWidthHover
+        });
+      }
+    }
+  );
+}
+class YandexMap {
+  static _ymaps;
+  static _promise;
+  static _shared = {};
+  static _loadApi(lang, apiKey) {
+    return new Promise((resolve, reject) => {
+      window[ONLOAD] = (api) => {
+        YandexMap._ymaps = api;
+        resolve(api);
+        delete window[ONLOAD];
+      };
+      window[ONERROR] = (error) => {
+        reject(ChartKitCustomError.wrap(error));
+        delete window[ONERROR];
+      };
+      fetchScript(getFetchUrl(lang, apiKey)).catch((error) => {
+        throw ChartKitCustomError.wrap(error);
+      });
+    });
+  }
+  static async _initModules() {
+    try {
+      await YandexMap._ymaps.modules.require("layer.tileContainer.CanvasContainer").then(([canvasContainer]) => {
+        if (canvasContainer?.superclass?.constructor) {
+          const superclassCtor = canvasContainer.superclass.constructor;
+          canvasContainer.superclass.constructor = function(...args) {
+            const result = superclassCtor.call(this, args);
+            this.options?.set("crossOrigin", "anonymous");
+            return result;
+          };
+        }
+      });
+      Gridmap_default(YandexMap._ymaps);
+      modules_default(YandexMap._ymaps);
+      YandexMap._ymaps.template.filtersStorage.add(
+        "number",
+        (dataLogger, value) => numberFormat(value)
+      );
+      YandexMap._shared.hintLayout = YandexMap._ymaps.templateLayoutFactory.createClass(
+        TOOLTIP_TWIG_TEMPLATE,
+        {
+          // Defining the getShape method, which will return the dimensions of the hint layout.
+          // This is necessary in order for the hint to automatically shift the position when going outside the map.
+          getShape: function() {
+            const element = this.getElement();
+            let result = null;
+            if (element) {
+              const firstChild = element.firstChild;
+              result = new YandexMap._ymaps.shape.Rectangle(
+                new YandexMap._ymaps.geometry.pixel.Rectangle([
+                  [0, 0],
+                  [firstChild.offsetWidth, firstChild.offsetHeight]
+                ])
+              );
+            }
+            return result;
+          }
+        }
+      );
+      YandexMap._shared.balloonContentLayout = YandexMap._ymaps.templateLayoutFactory.createClass(
+        `{% if (properties.balloonContentHeader || properties.balloonContentBody || properties.balloonContentFooter) %}
+                    <div class="${b$3()}">
+                        <div class="${b$3("header")}">
+                            $[properties.balloonContentHeader]
+                        </div>
+                        <div class="${b$3("row")}">
+                            $[properties.balloonContentBody]
+                        </div>
+                        <div class="${b$3("footer")}">
+                            $[properties.balloonContentFooter]
+                        </div>
+                    </div>
+                {% endif %}`
+      );
+      const Chips = YandexMap._ymaps.templateLayoutFactory.createClass(
+        '<div class="chartkit-yandex-map-chips">$[properties.label]</div>',
+        {
+          build: function() {
+            Chips.superclass.build.call(this);
+            const map = this.getData().geoObject.getMap();
+            if (!this.inited) {
+              this.inited = true;
+              let zoom = map.getZoom();
+              map.events.add(
+                "boundschange",
+                function() {
+                  const currentZoom = map.getZoom();
+                  if (currentZoom !== zoom) {
+                    zoom = currentZoom;
+                    this.rebuild();
+                  }
+                },
+                this
+              );
+            }
+            const properties = this.getData().properties;
+            const options = this.getData().options;
+            const geoObjectOptions = this.getData().geoObject.options;
+            const radius = properties.get("radius");
+            const label = properties.get("label");
+            const size = map.getZoom() * radius;
+            const element = this.getParentElement().getElementsByClassName(
+              "chartkit-yandex-map-chips"
+            )[0];
+            element.style.width = element.style.height = size + "px";
+            element.style.marginLeft = element.style.marginTop = -size / 2 + "px";
+            element.style.backgroundColor = options.get("color");
+            element.style.opacity = geoObjectOptions.get("opacity");
+            const MIN_SIZE_TO_SHOW_LABEL = 25;
+            if (label && size >= MIN_SIZE_TO_SHOW_LABEL) {
+              const BASE_TEXT_MULTIPLIER = 0.31;
+              element.style.fontSize = size * BASE_TEXT_MULTIPLIER + "px";
+            } else {
+              element.style.fontSize = "0px";
+            }
+            const circleShape = { type: "Circle", coordinates: [0, 0], radius: size / 2 };
+            options.set("shape", circleShape);
+            const isActive = geoObjectOptions.get("active");
+            const classNames = new Set(element.className.split(" "));
+            if (isActive === true) {
+              classNames.delete("inactive");
+              classNames.add("active");
+            } else if (isActive === false) {
+              classNames.delete("active");
+              classNames.add("inactive");
+            } else {
+              classNames.delete("inactive");
+              classNames.delete("active");
+            }
+            element.className = Array.from(classNames).join(" ");
+            this.optionsMonitor = new YandexMap._ymaps.Monitor(geoObjectOptions).add(
+              "opacity",
+              (newValue) => {
+                element.style.opacity = newValue;
+              }
+            );
+          },
+          clear: function() {
+            Chips.superclass.clear.call(this);
+            this.optionsMonitor.removeAll();
+          }
+        }
+      );
+      YandexMap._ymaps.option.presetStorage.add("chartkit#chips", { iconLayout: Chips });
+    } catch (error) {
+      throw ChartKitCustomError.wrap(error);
+    }
+  }
+  // TODO: Calling YandexMap._initModules and YandexMap._promise = null look kind of sloppy
+  static async _initYmaps(lang, apiKey) {
+    try {
+      if (window.ymaps) {
+        YandexMap._ymaps = window.ymaps;
+      } else if (!YandexMap._promise) {
+        YandexMap._promise = YandexMap._loadApi(lang, apiKey).then(YandexMap._initModules);
+      }
+      await YandexMap._promise;
+    } catch (error) {
+      YandexMap._promise = null;
+      throw ChartKitCustomError.wrap(error);
+    }
+  }
+  static async draw({ node, data, config, events, lang }) {
+    let yandexMapAPIWaiting = null;
+    let geoObjectsInstantiationDuration = null;
+    const { ymap: { state, options: configOptions, apiKey } = {} } = config;
+    if (!YandexMap._ymaps) {
+      const initYmapsMarkId = getRandomCKId();
+      Performance.mark(initYmapsMarkId);
+      await YandexMap._initYmaps(lang, apiKey);
+      yandexMapAPIWaiting = Performance.getDuration(initYmapsMarkId);
+    }
+    const bounds = state.bounds;
+    if (bounds && isEqual(bounds[0], bounds[1])) {
+      const zoomRange = await YandexMap._ymaps.getZoomRange("yandex#map", bounds[0]);
+      state.center = bounds[0];
+      state.zoom = zoomRange[1];
+      delete state.bounds;
+    }
+    const geoObjectsInstantiationMarkId = getRandomCKId();
+    Performance.mark(geoObjectsInstantiationMarkId);
+    const map = new YandexMap._ymaps.Map(
+      node,
+      {
+        controls: [],
+        behaviors: [],
+        ...state
+      },
+      {
+        yandexMapDisablePoiInteractivity: true,
+        suppressMapOpenBlock: true,
+        hintCloseTimeout: 100,
+        hintOpenTimeout: 100,
+        hintPane: "hint",
+        hintLayout: YandexMap._shared.hintLayout,
+        balloonPanelMaxMapArea: 0,
+        autoFitToViewport: "always",
+        ...configOptions
+      }
+    );
+    if (events) {
+      Object.entries(events).forEach(([key, value]) => {
+        map.events.add(key, value);
+      });
+    }
+    const extendOptions = (options) => {
+      const result = {
+        balloonContentLayout: YandexMap._shared.balloonContentLayout,
+        ...options
+      };
+      if (result.showCustomLegend) {
+        result.showLegend = false;
+      }
+      return result;
+    };
+    if (isEmpty(data)) {
+      throw new ChartKitCustomError(null, { code: ERROR_CODE.NO_DATA });
+    }
+    const responses = await Promise.allSettled(
+      data.map(async (item, index) => {
+        if (item.collection) {
+          const {
+            collection: { geometry, properties, children }
+          } = item;
+          const geoObjectChildren = children.reduce(
+            (result, { feature, options: childOptions }) => {
+              result.push(new YandexMap._ymaps.GeoObject(feature, childOptions));
+              return result;
+            },
+            []
+          );
+          const geoCollection = new YandexMap._ymaps.GeoObjectCollection(
+            { geometry, properties, children: geoObjectChildren },
+            {
+              ...extendOptions(item.options),
+              geoObjectType: GEO_OBJECT_TYPE.GEOCOLLECTION,
+              zIndex: index
+            }
+          );
+          map.geoObjects.add(geoCollection);
+          return geoCollection;
+        } else if (item.clusterer) {
+          const { clusterer, options } = item;
+          const geoClusterer = new YandexMap._ymaps.Clusterer(options);
+          clusterer.forEach(({ feature, options: innerOptions }) => {
+            const geoObject = new YandexMap._ymaps.GeoObject(
+              feature,
+              extendOptions(innerOptions)
+            );
+            geoClusterer.add(geoObject);
+          });
+          map.geoObjects.add(geoClusterer);
+          return geoClusterer;
+        } else if (item.polygonmap) {
+          const {
+            polygonmap: {
+              polygons,
+              points = { type: "FeatureCollection", features: [] },
+              values
+            },
+            options
+          } = item;
+          const featurePointsCollection = points.type === "FeatureCollection" ? points : arrayOfArraysToPointsCollection(points);
+          const useValues = options.joinByProperty && values;
+          if (useValues) {
+            const valuesDict = values.reduce((result, value) => {
+              const key = value[options.joinByProperty];
+              result[key] = value.value;
+              return result;
+            }, {});
+            polygons.features = polygons.features.map((feature) => {
+              const key = feature.properties[options.joinByProperty];
+              return merge({}, feature, { properties: { pointsCount: valuesDict[key] } });
+            });
+          }
+          return new Promise((resolve, reject) => {
+            YandexMap._ymaps.modules.require(["Polygonmap"], (Polygonmap) => {
+              if (options.mapper === "emptyMapper") {
+                delete options.mapper;
+              }
+              const mapper = featurePointsCollection.features.length || useValues ? combinedMapper : combinedMapperNoPoints;
+              let polygonmap = new Polygonmap(
+                { polygons, points: featurePointsCollection },
+                Object.assign(
+                  {
+                    colorRangesMinimum: 1,
+                    onClick: function() {
+                    },
+                    mapper,
+                    geoObjectType: GEO_OBJECT_TYPE.POLYGONMAP
+                  },
+                  extendOptions(options)
+                )
+              );
+              try {
+                polygonmap = polygonmap.setMap(map);
+              } catch (error) {
+                logger.logError("YandexMapModule.draw failed [Polygonmap]", error);
+                reject();
+              }
+              if (polygonmap.options.get("visible") === false) {
+                setPolygonmapVisibility(polygonmap, false);
+              }
+              polygonmap.optionsMonitor = new YandexMap._ymaps.Monitor(
+                polygonmap.options
+              ).add(
+                "visible",
+                (newValue) => setPolygonmapVisibility(polygonmap, newValue)
+              );
+              resolve(polygonmap);
+            });
+          });
+        }
+        if (item.gridmap) {
+          const featurePointsCollection = item.gridmap.type === "FeatureCollection" ? item.gridmap : arrayOfArraysToPointsCollection(item.gridmap);
+          return new Promise((resolve) => {
+            YandexMap._ymaps.modules.require(["Gridmap"], (Gridmap) => {
+              let gridmap = new Gridmap(
+                featurePointsCollection,
+                merge(
+                  {
+                    filterEmptyPolygons: true,
+                    colorRangesMinimum: 1,
+                    onClick: function() {
+                    },
+                    mapper: combinedMapper,
+                    geoObjectType: GEO_OBJECT_TYPE.GRIDMAP
+                  },
+                  extendOptions(item.options)
+                )
+              );
+              gridmap = gridmap.setMap(map);
+              if (gridmap.options.get("visible") === false) {
+                setPolygonmapVisibility(gridmap, false);
+              }
+              gridmap.optionsMonitor = new YandexMap._ymaps.Monitor(
+                gridmap.options
+              ).add(
+                "visible",
+                (newValue) => setPolygonmapVisibility(gridmap, newValue)
+              );
+              resolve(gridmap);
+            });
+          });
+        }
+        if (item.heatmap) {
+          return new Promise((resolve) => {
+            YandexMap._ymaps.modules.require(["Heatmap"], (Heatmap) => {
+              const heatmap = new Heatmap(item.heatmap, {
+                ...extendOptions(item.options),
+                geoObjectType: GEO_OBJECT_TYPE.HEATMAP
+              });
+              if (heatmap.options.get("visible") === false) {
+                setHeatmapVisibility(heatmap, false);
+              }
+              heatmap.setMap(map);
+              heatmap.optionsMonitor = new YandexMap._ymaps.Monitor(
+                heatmap.options
+              ).add("visible", (newValue) => setHeatmapVisibility(heatmap, newValue));
+              resolve(heatmap);
+            });
+          });
+        } else {
+          const { feature, options } = item;
+          const geoObject = new YandexMap._ymaps.GeoObject(
+            feature,
+            extendOptions(options)
+          );
+          map.geoObjects.add(geoObject);
+          return geoObject;
+        }
+      })
+    );
+    const geoObjects = responses.reduce((acc, response) => {
+      if (response.status === "fulfilled") {
+        acc.push(response.value);
+      }
+      return acc;
+    }, []);
+    geoObjectsInstantiationDuration = Performance.getDuration(geoObjectsInstantiationMarkId);
+    const mapPerformanceMetrics = {
+      geoObjectsInstantiationDuration,
+      yandexMapAPIWaiting
+    };
+    return { map, geoObjects, mapPerformanceMetrics };
+  }
+}
+var yandex_map_default = YandexMap;
+const EyeSlashIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M15.8502 13.3666L0.923557 1.70983C0.848674 1.65991 0.74883 1.60999 0.673947 1.60999C0.549142 1.60999 0.424337 1.68487 0.349454 1.75975L0.099844 2.08424C0.049922 2.13417 0 2.25897 0 2.33385C0 2.4337 0.074883 2.58346 0.174727 2.63339L15.1014 14.3151C15.1513 14.3651 15.2512 14.39 15.351 14.39C15.4509 14.39 15.5757 14.3401 15.6505 14.2403L15.9002 13.9407C15.9501 13.8908 16 13.766 16 13.6911C16 13.5913 15.9251 13.4415 15.8502 13.3666ZM7.41342 5.27925L10.7832 7.90016C10.7332 6.4025 9.51014 5.20437 8.01248 5.20437C7.83775 5.22933 7.58814 5.25429 7.41342 5.27925ZM8.58658 10.7457L5.21685 8.12481C5.26677 9.62247 6.48986 10.7956 8.01248 10.7956C8.16225 10.7956 8.41186 10.7707 8.58658 10.7457ZM8.01248 4.40562C10.4587 4.40562 12.7301 5.77847 13.9282 8C13.6786 8.47426 13.2044 9.14821 12.83 9.52262L13.7785 10.2465C14.2278 9.77223 14.8019 8.94852 15.1014 8.37442C15.1513 8.27457 15.2012 8.12481 15.2012 8C15.2012 7.90016 15.1513 7.75039 15.1014 7.65055C13.7535 5.00468 11.0577 3.20749 8.01248 3.20749C7.08892 3.20749 6.21529 3.38222 5.39158 3.68175L6.53978 4.60531C7.01404 4.4805 7.51326 4.40562 8.01248 4.40562ZM8.01248 11.5944C5.54134 11.5944 3.26989 10.2215 2.07176 8C2.32137 7.5507 2.79563 6.87676 3.17005 6.50234L2.22153 5.77847C1.77223 6.25273 1.19813 7.07644 0.898596 7.65055C0.848674 7.75039 0.823713 7.90016 0.823713 8.02496C0.823713 8.12481 0.848674 8.27457 0.898596 8.37442C2.24649 11.0203 4.94228 12.7925 8.01248 12.7925C8.91108 12.7925 9.78471 12.6178 10.6084 12.3432L9.46022 11.4197C8.98596 11.5445 8.48674 11.5944 8.01248 11.5944Z",
+    fill: "currentColor"
+  }
+) });
+const SizeIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "164",
+    height: "12",
+    viewBox: "0 0 164 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx("path", { d: "M0.5 11.5V9.46973L163.5 0.532226V11.5H0.5Z", stroke: "currentColor" })
+  }
+);
+const b$2 = block("chartkit-ymap-legend-layer");
+function wrappedFormatNumber(value) {
+  return formatNumber(value, { precision: "auto", unit: "auto" });
+}
+class Layer extends React__default.PureComponent {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      layerVisibility: typeof this.props.geoObject.options.get("visible") === "boolean" ? this.props.geoObject.options.get("visible") : true,
+      categoriesVisibility: false
+    };
+    this.componentDidUpdate = (prevProps) => {
+      if (prevProps !== this.props) {
+        this.setState({
+          layerVisibility: typeof this.props.geoObject.options.get("visible") === "boolean" ? this.props.geoObject.options.get("visible") : true,
+          categoriesVisibility: false
+        });
+      }
+    };
+    this.onClickShowToggle = () => {
+      const newVisibilityValue = !this.state.layerVisibility;
+      this.setState({
+        layerVisibility: newVisibilityValue
+      });
+      this.props.onSetVisibility(
+        this.props.geoObject.options.get("geoObjectId"),
+        newVisibilityValue
+      );
+    };
+    this.onClickCollapseToggle = () => {
+      const newVisibilityValue = !this.state.categoriesVisibility;
+      this.setState({
+        categoriesVisibility: newVisibilityValue
+      });
+    };
+  }
+  render() {
+    const { geoObject, singleLayerMode } = this.props;
+    const { layerVisibility, categoriesVisibility } = this.state;
+    const layerTitle = geoObject.options.get("layerTitle");
+    const geoObjectId = geoObject.options.get("geoObjectId");
+    const geoObjectType = geoObject.options.get("geoObjectType");
+    const mode = geoObject.options.get("mode");
+    const sizeTitle = geoObject.options.get("sizeTitle");
+    const sizeMinValue = geoObject.options.get("sizeMinValue");
+    const sizeMaxValue = geoObject.options.get("sizeMaxValue");
+    let colorTitle = geoObject.options.get("colorTitle");
+    const gradient = geoObject.options.get("gradient");
+    const isCustomPalette = geoObject.options.get("isCustomPalette");
+    const gradientData = geoObject.options.get("gradientData");
+    const colorDictionary = geoObject.options.get("colorDictionary");
+    let colorDictionaryKeys = [];
+    let customColorDictionaryKeys = [];
+    if (colorDictionary) {
+      colorDictionaryKeys = Object.keys(colorDictionary);
+      if (colorDictionaryKeys.length > 10) {
+        customColorDictionaryKeys = colorDictionaryKeys.slice(0, 10);
+      }
+    }
+    const colorMinValue = geoObject.options.get("colorMinValue");
+    const colorMaxValue = geoObject.options.get("colorMaxValue");
+    const colorMidValue = geoObject.options.get("colorMidValue");
+    let previewStyle;
+    if (mode === "gradient") {
+      previewStyle = {
+        background: `linear-gradient(90deg, ${gradientData.colors.map((stage) => `rgb(${Object.values(stage).join(",")})`).join(", ")})`
+      };
+    } else if (geoObjectType === GEO_OBJECT_TYPE.HEATMAP) {
+      previewStyle = {
+        background: `linear-gradient(90deg, ${Object.keys(gradient).sort().map((stage) => gradient[stage]).join(",")}`
+      };
+      colorTitle = colorTitle || i18n("chartkit-ymap-legend", "label-heatmap");
+    }
+    if (singleLayerMode && !colorTitle && !sizeTitle) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs("div", { className: b$2({ hidden: !layerVisibility }), children: [
+      !singleLayerMode && /* @__PURE__ */ jsxs("div", { className: b$2("header"), children: [
+        /* @__PURE__ */ jsx("span", { className: b$2("layer-title"), title: layerTitle, children: layerTitle }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: b$2("visibility-button"),
+            view: "flat",
+            onClick: this.onClickShowToggle,
+            children: /* @__PURE__ */ jsx(Icon, { data: EyeSlashIcon })
+          }
+        )
+      ] }),
+      colorTitle && /* @__PURE__ */ jsx("div", { className: b$2("color-title"), title: colorTitle, children: colorTitle }),
+      mode === "gradient" && /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: b$2("color-preview"), style: previewStyle }),
+        /* @__PURE__ */ jsxs("div", { className: b$2("preview-legend"), children: [
+          /* @__PURE__ */ jsx("span", { children: wrappedFormatNumber(colorMinValue) }),
+          typeof colorMidValue === "number" && /* @__PURE__ */ jsx("span", { children: wrappedFormatNumber(colorMidValue) }),
+          /* @__PURE__ */ jsx("span", { children: wrappedFormatNumber(colorMaxValue) })
+        ] })
+      ] }),
+      geoObjectType === GEO_OBJECT_TYPE.HEATMAP && /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: b$2("color-preview", { "default-heatmap": !isCustomPalette }),
+            style: previewStyle
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: b$2("preview-legend"), children: [
+          /* @__PURE__ */ jsx("span", { children: "min" }),
+          /* @__PURE__ */ jsx("span", { children: "max" })
+        ] })
+      ] }),
+      mode === "dictionary" && colorDictionary && /* @__PURE__ */ jsxs("div", { className: b$2("list"), children: [
+        customColorDictionaryKeys.length > 0 && /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+          (categoriesVisibility ? colorDictionaryKeys : customColorDictionaryKeys).map((key) => /* @__PURE__ */ jsxs("div", { className: b$2("row"), children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: b$2("color"),
+                style: { background: colorDictionary[key] }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: b$2("value"), children: key })
+          ] }, key)),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: b$2("row", { action: true }),
+              onClick: this.onClickCollapseToggle,
+              children: /* @__PURE__ */ jsx("span", { className: b$2("value"), children: categoriesVisibility ? i18n("chartkit-ymap-legend", "label-hide") : i18n("chartkit-ymap-legend", "label-more", {
+                count: colorDictionaryKeys.length - 10
+              }) })
+            },
+            "others"
+          )
+        ] }),
+        customColorDictionaryKeys.length === 0 && colorDictionaryKeys && colorDictionaryKeys.map((key) => /* @__PURE__ */ jsxs("div", { className: b$2("row"), children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: b$2("color"),
+              style: { background: colorDictionary[key] }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: b$2("value"), children: key })
+        ] }, key))
+      ] }),
+      typeof sizeTitle === "string" && /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: b$2("size-title"), title: sizeTitle, children: sizeTitle }),
+        /* @__PURE__ */ jsx("div", { className: b$2("size-preview"), children: /* @__PURE__ */ jsx(SizeIcon, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: b$2("preview-legend"), children: [
+          /* @__PURE__ */ jsx("span", { children: wrappedFormatNumber(sizeMinValue) }),
+          /* @__PURE__ */ jsx("span", { children: wrappedFormatNumber(sizeMaxValue) })
+        ] })
+      ] })
+    ] }, geoObjectId);
+  }
+}
+const b$1 = block("chartkit-ymap-legend");
+const Legend = ({ geoObjects, onSetVisibility }) => {
+  const filteredGeoObjects = geoObjects.filter((geoObject) => {
+    return [
+      GEO_OBJECT_TYPE.POLYGONMAP,
+      GEO_OBJECT_TYPE.GRIDMAP,
+      GEO_OBJECT_TYPE.GEOCOLLECTION,
+      GEO_OBJECT_TYPE.HEATMAP
+    ].includes(geoObject.options.get("geoObjectType")) && geoObject.options.get("showCustomLegend");
+  });
+  if (filteredGeoObjects.length === 0) {
+    return null;
+  }
+  const singleLayerMode = filteredGeoObjects.length === 1;
+  return /* @__PURE__ */ jsx("div", { className: b$1(), children: filteredGeoObjects.map((geoObject, index) => /* @__PURE__ */ jsx(
+    Layer,
+    {
+      geoObject,
+      onSetVisibility,
+      singleLayerMode
+    },
+    index
+  )) });
+};
+function setSelectedState(args) {
+  const { data, actionParams } = args;
+  data.forEach((item) => {
+    const polygons = get(item, "polygonmap.polygons.features", []);
+    if (polygons.length) {
+      const anySelected = polygons.some((polygon) => {
+        const ap = polygon?.properties?.custom?.actionParams ?? {};
+        return hasMatchedActionParams(ap, actionParams);
+      });
+      polygons.forEach((polygon) => {
+        let selected;
+        if (anySelected) {
+          const ap = polygon?.properties?.custom?.actionParams ?? {};
+          selected = hasMatchedActionParams(ap, actionParams);
+        }
+        if (selected === false) {
+          const originalFillColor = polygon.options.fillColor;
+          polygon.options.fillColorHover = originalFillColor;
+          polygon.options.fillColor = originalFillColor ? gray(lab(originalFillColor).l).formatRgb() : void 0;
+          polygon.options.fillOpacity = 0.5;
+        }
+      });
+      return;
+    }
+    const geoPoints = get(item, "collection.children", []);
+    if (geoPoints.length) {
+      const anySelected = geoPoints.some((point) => {
+        const ap = point?.feature?.properties?.custom?.actionParams ?? {};
+        return hasMatchedActionParams(ap, actionParams);
+      });
+      geoPoints.forEach((point) => {
+        let selected;
+        if (anySelected) {
+          const ap = point?.feature?.properties?.custom?.actionParams ?? {};
+          selected = hasMatchedActionParams(ap, actionParams);
+        }
+        point.options.active = selected;
+      });
+      return;
+    }
+  });
+}
+function getGeoObjectCollection(geoObjectCollection) {
+  const type = geoObjectCollection.options.get("geoObjectType");
+  switch (type) {
+    case GEO_OBJECT_TYPE.POLYGONMAP: {
+      return geoObjectCollection.objectManager.objects.getAll();
+    }
+    case GEO_OBJECT_TYPE.GEOCOLLECTION: {
+      return geoObjectCollection.toArray();
+    }
+  }
+  return [];
+}
+function getGeoObjectActionParams(geoObject) {
+  const geoType = get(geoObject, "geometry.type");
+  if (geoType === "Polygon") {
+    return geoObject.properties.custom?.actionParams ?? {};
+  }
+  return geoObject.properties.get("custom")?.actionParams ?? {};
+}
+function getNewActionParams(args) {
+  const { multiSelect, currentPoint, geoObjects, actionParams: prevActionParams } = args;
+  let newActionParams = prevActionParams;
+  const currentPointParams = getGeoObjectActionParams(currentPoint);
+  const hasSomePointSelected = geoObjects.some((item) => {
+    return getGeoObjectCollection(item).some((point) => {
+      return hasMatchedActionParams(getGeoObjectActionParams(point), prevActionParams);
+    });
+  });
+  if (hasSomePointSelected) {
+    if (hasMatchedActionParams(currentPointParams, prevActionParams)) {
+      if (multiSelect) {
+        newActionParams = subtractParameters(newActionParams, currentPointParams);
+        geoObjects.forEach((item) => {
+          return getGeoObjectCollection(item).forEach((point) => {
+            const pointActionParams = getGeoObjectActionParams(point);
+            if (hasMatchedActionParams(pointActionParams, newActionParams)) {
+              newActionParams = addParams(newActionParams, pointActionParams);
+            }
+          });
+        });
+      } else {
+        newActionParams = {};
+      }
+    } else {
+      if (!multiSelect) {
+        geoObjects.forEach((item) => {
+          return getGeoObjectCollection(item).forEach((point) => {
+            const pointActionParams = getGeoObjectActionParams(point);
+            if (hasMatchedActionParams(pointActionParams, newActionParams)) {
+              newActionParams = subtractParameters(
+                newActionParams,
+                pointActionParams
+              );
+            }
+          });
+        });
+      }
+      newActionParams = addParams(newActionParams, currentPointParams);
+    }
+  } else {
+    newActionParams = addParams(newActionParams, currentPointParams);
+  }
+  return newActionParams;
+}
+function shouldUseMultiselect(event) {
+  const sourceEvent = typeof event?.getSourceEvent === "function" ? event.getSourceEvent() : null;
+  if (sourceEvent) {
+    return shouldUseMultiselect(sourceEvent);
+  }
+  const originalEvent = event?.originalEvent?.domEvent ?? event?.originalEvent;
+  const key = isMacintosh() ? "metaKey" : "ctrlKey";
+  return Boolean(originalEvent?.get?.(key) ?? originalEvent?.[key]);
+}
+function applyEventHandlers(args) {
+  const { geoObjects, config, unresolvedParams = {}, onChange } = args;
+  const prevActionParams = pickActionParamsFromParams(unresolvedParams);
+  const handleClick = function(geoObject, event) {
+    const actions = config?.events?.click ?? [];
+    const clickActions = Array.isArray(actions) ? actions : [actions];
+    clickActions.forEach((action) => {
+      const handlers = Array.isArray(action.handler) ? action.handler : [action.handler];
+      handlers.forEach((handler) => {
+        switch (handler.type) {
+          case "setActionParams": {
+            const clickScope = get(action, "scope", "point");
+            if (clickScope !== "point") {
+              return;
+            }
+            const newActionParams = getNewActionParams({
+              geoObjects,
+              actionParams: prevActionParams,
+              currentPoint: geoObject,
+              multiSelect: shouldUseMultiselect(event)
+            });
+            if (isEqual(prevActionParams, newActionParams)) {
+              return;
+            }
+            const params = transformParamsToActionParams(newActionParams);
+            onChange?.(
+              {
+                type: "PARAMS_CHANGED",
+                data: { params }
+              },
+              { forceUpdate: true },
+              true,
+              true
+            );
+          }
+        }
+      });
+    });
+  };
+  geoObjects.forEach((collection) => {
+    const type = collection.options.get("geoObjectType");
+    switch (type) {
+      case GEO_OBJECT_TYPE.POLYGONMAP: {
+        collection.objectManager.events.add("click", function(event) {
+          const objId = event.get("objectId");
+          const object2 = collection.objectManager.objects.getById(objId);
+          handleClick(object2, event);
+        });
+        break;
+      }
+      case GEO_OBJECT_TYPE.GEOCOLLECTION: {
+        collection.events.add("click", function(event) {
+          handleClick(event.get("target"), event);
+        });
+        break;
+      }
+    }
+  });
+}
+const renderPossibleMarkupItems = (renderMarkupToString, renderMarkdownToString, data) => {
+  data.forEach((d) => {
+    if (typeof d?.key === "string" && d?.value) {
+      const markup = renderMarkupToString(d.value);
+      d.text = d.key ? `${escape(d.key)}: ${markup}` : markup;
+    }
+    if (d && d?.[WRAPPED_MARKDOWN_KEY] && renderMarkdownToString) {
+      d.text = renderMarkdownToString(d[WRAPPED_MARKDOWN_KEY]);
+    }
+  });
+};
+const PROVIDER_DATA_FIELDS = ["data", "config", "libraryConfig"];
+const b = block("chartkit-ymap");
+const hoveredPolygonOptions = { strokeWidth: 2, fillOpacity: 1 };
+const CHART_SECTION_PERCENTAGE = 0.6;
+const PANE_RESIZER_HEIGHT = 24;
+const MOBILE_CHART_HEIGHT = 400;
+const paneSplits = {
+  vertical: "vertical",
+  horizontal: "horizontal"
+};
+function getTileContainer(layer) {
+  for (const k in layer) {
+    if (Object.prototype.hasOwnProperty.call(layer, k)) {
+      if (layer[k] instanceof yandex_map_default._ymaps.layer.tileContainer.CanvasContainer || layer[k] instanceof yandex_map_default._ymaps.layer.tileContainer.DomContainer) {
+        return layer[k];
+      }
+    }
+  }
+  return null;
+}
+function waitForTilesLoad(layer) {
+  return new yandex_map_default._ymaps.vow.Promise((resolve) => {
+    const tileContainer = getTileContainer(layer);
+    let readyAll = true;
+    tileContainer.tiles.each((tile) => {
+      if (!tile.isReady()) {
+        readyAll = false;
+      }
+    });
+    if (readyAll) {
+      resolve();
+    } else {
+      tileContainer.events.once("ready", () => {
+        resolve();
+      });
+    }
+  });
+}
+function getCurrentPaneSplit() {
+  return window.innerWidth > window.innerHeight ? paneSplits.vertical : paneSplits.horizontal;
+}
+function getNodeHeight(node) {
+  return node?.getBoundingClientRect().height || 0;
+}
+function hasActionParamsChanged(currentParams, prevParams) {
+  const prevActionParams = pickActionParamsFromParams(currentParams);
+  const actionParams = pickActionParamsFromParams(prevParams);
+  return !isEqual(prevActionParams, actionParams);
+}
+class YandexMapComponent extends React__default.Component {
+  static propTypes = {
+    data: PropTypes.shape({
+      data: PropTypes.array,
+      config: PropTypes.object,
+      libraryConfig: PropTypes.object
+    }).isRequired,
+    lang: PropTypes.oneOf(["ru", "en"]),
+    splitTooltip: PropTypes.bool,
+    onLoad: PropTypes.func,
+    onChartLoad: PropTypes.func,
+    onRender: PropTypes.func,
+    onChange: PropTypes.func.isRequired,
+    onError: PropTypes.func.isRequired
+  };
+  constructor(props) {
+    super(props);
+    const paneSplit = getCurrentPaneSplit();
+    const paneMinSize = MOBILE_CHART_HEIGHT;
+    this.state = {
+      paneSplit,
+      paneMinSize,
+      geoObjects: [],
+      bounds: void 0,
+      paneSize: void 0,
+      paneMaxSize: void 0,
+      error: void 0
+    };
+  }
+  componentDidMount() {
+    this.init("onMount");
+    if (this.props.splitTooltip) {
+      window.addEventListener("resize", this.resizeHandler);
+    }
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    const splitTooltipModeWasSwitched = nextProps.splitTooltip !== this.props.splitTooltip;
+    const orientationWasChanged = nextState.paneSplit !== this.state.paneSplit;
+    const shouldUpdate = splitTooltipModeWasSwitched || orientationWasChanged || !isEqual(
+      pick(nextProps.data, PROVIDER_DATA_FIELDS),
+      pick(this.props.data, PROVIDER_DATA_FIELDS)
+    ) || nextState.geoObjects !== this.state.geoObjects || nextState.paneSize !== this.state.paneSize || hasActionParamsChanged(
+      nextProps.data.unresolvedParams,
+      this.props.data.unresolvedParams
+    );
+    return shouldUpdate;
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const splitTooltipModeWasSwitched = prevProps.splitTooltip !== this.props.splitTooltip;
+    const orientationWasChanged = prevState.paneSplit !== this.state.paneSplit;
+    const needReInit = splitTooltipModeWasSwitched || orientationWasChanged || !isEqual(
+      pick(prevProps.data, PROVIDER_DATA_FIELDS),
+      pick(this.props.data, PROVIDER_DATA_FIELDS)
+    ) || hasActionParamsChanged(
+      this.props.data.unresolvedParams,
+      prevProps.data.unresolvedParams
+    );
+    if (needReInit) {
+      if (!prevProps.splitTooltip && this.props.splitTooltip) {
+        window.addEventListener("resize", this.resizeHandler);
+      } else if (prevProps.splitTooltip && !this.props.splitTooltip) {
+        window.removeEventListener("resize", this.resizeHandler);
+      }
+      this.init("onRender");
+    }
+  }
+  componentWillUnmount() {
+    this.destroy();
+    window.removeEventListener("resize", this.resizeHandler);
+  }
+  tooltipContainerRef = React__default.createRef();
+  mapContainerRef = React__default.createRef();
+  selectedObjectId = null;
+  geoObjectsStates = {};
+  node = void 0;
+  map = void 0;
+  // If there is a chart with a map and description on the dashboard,
+  // then after the description appears, sizechange is triggered, and then boundschange.
+  // In the described case, it is necessary that bounds are not stored in state.
+  sizeChanged = false;
+  resizeHandler = () => {
+    const currentPaneSplit = getCurrentPaneSplit();
+    if (this.state.paneSplit !== currentPaneSplit) {
+      this.setState({ paneSplit: currentPaneSplit });
+    }
+  };
+  /**
+   * helper for Wizard to set opacity for geo layers
+   *
+   * @param {string} geoObjectId
+   * @param {number} value
+   * @returns {void}
+   */
+  setOpacity = (geoObjectId, value) => {
+    const geoObject = this.state.geoObjects.find(
+      (item) => item.options.get("geoObjectId") === geoObjectId
+    );
+    const geoObjectType = geoObject.options.get("geoObjectType");
+    if (geoObjectType === GEO_OBJECT_TYPE.HEATMAP) {
+      geoObject.options.set("opacity", value);
+    } else if (geoObjectType === GEO_OBJECT_TYPE.POLYGONMAP || geoObjectType === GEO_OBJECT_TYPE.GRIDMAP) {
+      const objects = geoObject.objectManager.objects;
+      let opacityHover = value + 0.1;
+      opacityHover = opacityHover > 1 ? 1 : opacityHover;
+      objects.getAll().forEach(
+        ({ id }) => objects.setObjectOptions(id, {
+          fillOpacity: value,
+          fillOpacityHover: opacityHover
+        })
+      );
+    } else {
+      geoObject.options.set("opacity", value);
+    }
+  };
+  /**
+   * helper for Wizard to set visibility for geo layers
+   *
+   *  @param {string} geoObjectId
+   * @param {boolean} value
+   * @returns {void}
+   */
+  setVisibility = (geoObjectId, value) => {
+    const geoObject = this.state.geoObjects.find(
+      (item) => item.options.get("geoObjectId") === geoObjectId
+    );
+    geoObject.options.set("visible", value);
+    this.geoObjectsStates[geoObjectId] = { options: { visible: value } };
+    this.props.onChange(
+      { type: "YMAP_GEOOBJECT_VISIBILITY_CHANGED", data: { geoObjectId, value } },
+      {},
+      true
+    );
+  };
+  destroy() {
+    if (this.map) {
+      this.map.destroy();
+    }
+  }
+  applyEvents() {
+    const { data: widgetData, onChange } = this.props;
+    applyEventHandlers({
+      geoObjects: this.state.geoObjects,
+      config: widgetData.config,
+      onChange,
+      unresolvedParams: widgetData.unresolvedParams
+    });
+  }
+  async init(callBackType) {
+    try {
+      const widgetData = this.props.data;
+      const { data, libraryConfig, config, unresolvedParams } = widgetData;
+      let renderMarkdownToString;
+      const renderMarkupToString = await getRenderMarkupToStringFn();
+      if (config.useMarkdown) {
+        renderMarkdownToString = await getRenderYfmFn();
+      }
+      const actionParams = pickActionParamsFromParams(unresolvedParams);
+      setSelectedState({ data, actionParams });
+      const { map, geoObjects, mapPerformanceMetrics } = await yandex_map_default.draw({
+        node: this.node,
+        data: data.map((geoObject) => {
+          const geoObjectState = geoObject.options && this.geoObjectsStates[geoObject.options.geoObjectId];
+          const children = get(geoObject, "collection.children") || get(geoObject, "clusterer") || [];
+          const polygons = get(geoObject, "polygonmap.polygons.features", []);
+          if (children.length) {
+            children.forEach((child) => {
+              const childData = get(child, "feature.properties.data", []);
+              renderPossibleMarkupItems(
+                renderMarkupToString,
+                renderMarkdownToString,
+                childData
+              );
+            });
+          } else if (polygons.length) {
+            polygons.forEach((polygon) => {
+              const polygonData = get(polygon, "properties.data", []);
+              renderPossibleMarkupItems(
+                renderMarkupToString,
+                renderMarkdownToString,
+                polygonData
+              );
+            });
+          }
+          return geoObjectState ? merge({}, geoObject, geoObjectState) : geoObject;
+        }),
+        lang: this.props.lang,
+        config: Object.assign(
+          { ymap: merge(libraryConfig, { state: { bounds: this.state.bounds } }) },
+          config
+        ),
+        events: {
+          boundschange: (event) => {
+            if (!this.sizeChanged) {
+              this.setState({
+                bounds: event.get("newBounds")
+              });
+            }
+            this.sizeChanged = false;
+          },
+          sizechange: () => {
+            this.sizeChanged = true;
+          }
+        }
+      });
+      yandex_map_default._ymaps.ready(() => {
+        class CustomControlClass extends yandex_map_default._ymaps.collection.Item {
+          constructor(component) {
+            super();
+            this._$content = null;
+            this._$component = component;
+          }
+          onAddToMap() {
+            this._lastCenter = null;
+            this.getParent().getChildElement(this).then(this._onGetChildElement, this);
+          }
+          onRemoveFromMap() {
+            if (this._$content) {
+              this._$content.remove();
+            }
+          }
+          _onGetChildElement(parentDomContainer) {
+            this._$content = document.createElement("div");
+            ReactDOM.render(this._$component, this._$content);
+            parentDomContainer.appendChild(this._$content);
+          }
+        }
+        const customControl = new CustomControlClass(
+          /* @__PURE__ */ React__default.createElement(
+            Legend,
+            {
+              map: this.map,
+              geoObjects: this.state.geoObjects,
+              onSetVisibility: this.setVisibility
+            }
+          )
+        );
+        this.map.controls.add(customControl, {
+          float: "none"
+        });
+        this.applyEvents();
+      });
+      this.destroy();
+      this.map = map;
+      const allLayers = [];
+      const tilesLoadingMarkId = getRandomCKId();
+      Performance.mark(tilesLoadingMarkId);
+      this.map.layers.each((layerOrCollection) => {
+        if (layerOrCollection instanceof yandex_map_default._ymaps.LayerCollection) {
+          layerOrCollection.each((createdLayer) => {
+            allLayers.push(createdLayer);
+          });
+        } else {
+          allLayers.push(layerOrCollection);
+        }
+      });
+      const [firstLayer] = allLayers;
+      if (firstLayer) {
+        firstLayer._element?.classList.add("chartkit-map-ground-pane");
+      }
+      const { geoObjectsInstantiationDuration, yandexMapAPIWaiting } = mapPerformanceMetrics;
+      yandex_map_default._ymaps.vow.all(allLayers.map((layer) => waitForTilesLoad(layer))).then(() => {
+        const tilesLoadingDuration = Performance.getDuration(tilesLoadingMarkId);
+        if (callBackType === "onMount") {
+          this.props.onChartLoad?.({
+            widget: {
+              setOpacity: this.setOpacity,
+              setVisibility: this.setVisibility
+            }
+          });
+        }
+        if (callBackType === "onRender") {
+          this.props.onRender?.({
+            widgetRendering: geoObjectsInstantiationDuration + tilesLoadingDuration
+          });
+        }
+        this.props.onLoad?.({
+          widgetRendering: geoObjectsInstantiationDuration + tilesLoadingDuration,
+          yandexMapAPIWaiting,
+          widget: {
+            setOpacity: this.setOpacity,
+            setVisibility: this.setVisibility
+          }
+        });
+      });
+      if (this.props.splitTooltip) {
+        this.prepareForSplitTooltipMode();
+      }
+      this.setState({
+        geoObjects: geoObjects.slice().reverse()
+      });
+    } catch (error) {
+      if (this.props.onError) {
+        this.props.onError({ error });
+      }
+    }
+  }
+  getPaneSizeOptions = () => {
+    let paneSize;
+    let paneMinSize;
+    let paneMaxSize;
+    const mapContainerHeight = getNodeHeight(this.mapContainerRef.current);
+    const tooltipHeight = getNodeHeight(this.tooltipContainerRef.current);
+    if (this.state.paneSplit === paneSplits.vertical) {
+      paneSize = window.innerWidth * CHART_SECTION_PERCENTAGE;
+    } else {
+      paneSize = mapContainerHeight - tooltipHeight - PANE_RESIZER_HEIGHT;
+      paneMinSize = mapContainerHeight - tooltipHeight - PANE_RESIZER_HEIGHT;
+      paneMaxSize = mapContainerHeight - PANE_RESIZER_HEIGHT;
+    }
+    return { paneSize, paneMinSize, paneMaxSize };
+  };
+  // in split-tooltip mode, the tooltip must be shown in a separate split-pane "sash".
+  // Can't find the solutions in map-api about how to render a tooltip outside the map container, so we use the Template capabilities from the Maps API
+  // (https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/Template-docpage /) and append the resulting markup in
+  // the necessary node.
+  // When activating the split tooltip mode, you must:
+  // - show something in the tooltip (wait for the user's first interaction with map objects and only after
+  // showing this is not a good solution, since showing the tooltip will change the size of the map container
+  // and its redrawing). Therefore, we will take the first element from the first collection and show the tooltip for it, and
+  // set the element (if possible) active state.
+  // - subscribe for events on map objects that will update the tooltip and manage the activity states of objects
+  prepareForSplitTooltipMode = () => {
+    this.map.geoObjects.each((collection, index) => {
+      if (!index) {
+        this.setState(this.getPaneSizeOptions(), () => {
+          if (collection.objects) {
+            const firstObject = collection.objects.getIterator().getNext();
+            this.selectedObjectId = firstObject.id;
+            collection.objects.setObjectOptions(firstObject.id, hoveredPolygonOptions);
+          }
+        });
+      }
+      this.bindEventsForSplitTooltip(collection);
+    });
+  };
+  bindEventsForSplitTooltip = (collection) => {
+    if (collection.objects) {
+      collection.objects.events.add("mouseenter", (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+      });
+      collection.objects.events.add("mouseleave", (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+      });
+      collection.objects.events.add("click", (event) => {
+        const objectId = event.get("objectId");
+        if (isNumber(this.selectedObjectId) && this.selectedObjectId !== objectId) {
+          const prevSelectedObject = collection.objects.getById(this.selectedObjectId);
+          const options = {
+            strokeWidth: prevSelectedObject.options.strokeWidthDefault,
+            fillOpacity: prevSelectedObject.options.fillOpacityDefault
+          };
+          collection.objects.setObjectOptions(this.selectedObjectId, options);
+        }
+        this.selectedObjectId = objectId;
+        collection.objects.setObjectOptions(objectId, hoveredPolygonOptions);
+        const selectedObject = collection.objects.getById(objectId);
+        if (this.tooltipContainerRef && this.tooltipContainerRef.current) {
+          const tooltipTemplate = new yandex_map_default._ymaps.Template(
+            TOOLTIP_TWIG_TEMPLATE
+          );
+          const { properties } = selectedObject;
+          const templateData = new yandex_map_default._ymaps.data.Manager({ properties });
+          const tooltipMarkup = tooltipTemplate.build(templateData).text;
+          this.tooltipContainerRef.current.innerHTML = tooltipMarkup;
+          this.setState(this.getPaneSizeOptions());
+        }
+      });
+    } else {
+      collection.events.add("click", (event) => {
+        const target = event.get("target");
+        if (this.tooltipContainerRef && this.tooltipContainerRef.current) {
+          const tooltipTemplate = new yandex_map_default._ymaps.Template(
+            TOOLTIP_TWIG_TEMPLATE
+          );
+          const properties = target.properties.getAll();
+          const templateData = new yandex_map_default._ymaps.data.Manager({ properties });
+          const tooltipMarkup = tooltipTemplate.build(templateData).text;
+          this.tooltipContainerRef.current.innerHTML = tooltipMarkup;
+          this.setState(this.getPaneSizeOptions());
+        }
+      });
+    }
+  };
+  renderMapWithSplitPane = () => {
+    const { paneSplit, paneSize, paneMinSize, paneMaxSize } = this.state;
+    return /* @__PURE__ */ React__default.createElement(
+      StyledSplitPane,
+      {
+        split: paneSplit,
+        size: paneSize,
+        minSize: paneMinSize,
+        maxSize: paneMaxSize,
+        allowResize: paneSplit === paneSplits.horizontal,
+        resizerStyle: { ...!this.node && { display: "none" } },
+        paneOneRender: () => /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            className: b({ "with-split-tooltip": Boolean(this.props.splitTooltip) }),
+            ref: (node) => {
+              this.node = node;
+            }
+          }
+        ),
+        paneTwoRender: () => /* @__PURE__ */ React__default.createElement("div", { className: b("tooltip-container"), ref: this.tooltipContainerRef })
+      }
+    );
+  };
+  render() {
+    return /* @__PURE__ */ React__default.createElement("div", { className: b("wrapper"), ref: this.mapContainerRef }, this.props.splitTooltip ? this.renderMapWithSplitPane() : /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: b(),
+        ref: (node) => {
+          this.node = node;
+        }
+      }
+    ));
+  }
+}
+const YandexMapWidget = React__default.forwardRef(
+  // _ref needs to avoid this React warning:
+  // "forwardRef render functions accept exactly two parameters: props and ref"
+  function YandexMapWidgetInner(props, _ref) {
+    return /* @__PURE__ */ jsx(YandexMapComponent, { ...props });
+  }
+);
+export {
+  YandexMapWidget as default
+};