react-simple-maps 3.0.0-beta.2 → 3.0.0-beta.5

package/dist/index.js

@@ -2,109 +2,224 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
-var PropTypes = _interopDefault(require('prop-types'));
+var PropTypes = require('prop-types');
 var d3Geo = require('d3-geo');
 var topojsonClient = require('topojson-client');
 var d3Zoom = require('d3-zoom');
 var d3Selection = require('d3-selection');
 
-var _extends = Object.assign || function (target) {
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var d3Geo__namespace = /*#__PURE__*/_interopNamespace(d3Geo);
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i];
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
 
-    for (var key in source) {
-      if (Object.prototype.hasOwnProperty.call(source, key)) {
-        target[key] = source[key];
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
       }
     }
+
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
   }
 
   return target;
-};
+}
 
-var objectWithoutProperties = function (obj, keys) {
-  var target = {};
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
 
-  for (var i in obj) {
-    if (keys.indexOf(i) >= 0) continue;
-    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
-    target[i] = obj[i];
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
   }
 
   return target;
-};
+}
 
-var slicedToArray = function () {
-  function sliceIterator(arr, i) {
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _e = undefined;
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
 
-    try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
 
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+
+  var _s, _e;
+
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
     } finally {
-      try {
-        if (!_n && _i["return"]) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
+      if (_d) throw _e;
     }
-
-    return _arr;
   }
 
-  return function (arr, i) {
-    if (Array.isArray(arr)) {
-      return arr;
-    } else if (Symbol.iterator in Object(arr)) {
-      return sliceIterator(arr, i);
-    } else {
-      throw new TypeError("Invalid attempt to destructure non-iterable instance");
-    }
-  };
-}();
+  return _arr;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
 
-var geoPath = d3Geo.geoPath,
-    projections = objectWithoutProperties(d3Geo, ["geoPath"]);
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
 
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var _excluded$9 = ["width", "height", "projection", "projectionConfig"];
+
+var geoPath = d3Geo__namespace.geoPath,
+    projections = _objectWithoutProperties(d3Geo__namespace, ["geoPath"]);
 
 var MapContext = React.createContext();
 
 var makeProjection = function makeProjection(_ref) {
   var _ref$projectionConfig = _ref.projectionConfig,
-      projectionConfig = _ref$projectionConfig === undefined ? {} : _ref$projectionConfig,
+      projectionConfig = _ref$projectionConfig === void 0 ? {} : _ref$projectionConfig,
       _ref$projection = _ref.projection,
-      projection = _ref$projection === undefined ? "geoEqualEarth" : _ref$projection,
+      projection = _ref$projection === void 0 ? "geoEqualEarth" : _ref$projection,
       _ref$width = _ref.width,
-      width = _ref$width === undefined ? 800 : _ref$width,
+      width = _ref$width === void 0 ? 800 : _ref$width,
       _ref$height = _ref.height,
-      height = _ref$height === undefined ? 600 : _ref$height;
-
+      height = _ref$height === void 0 ? 600 : _ref$height;
   var isFunc = typeof projection === "function";
-
   if (isFunc) return projection;
-
   var proj = projections[projection]().translate([width / 2, height / 2]);
-
   var supported = [proj.center ? "center" : null, proj.rotate ? "rotate" : null, proj.scale ? "scale" : null, proj.parallels ? "parallels" : null];
-
   supported.forEach(function (d) {
     if (!d) return;
     proj = proj[d](projectionConfig[d] || proj[d]());
   });
-
   return proj;
 };
 
@@ -113,26 +228,25 @@ var MapProvider = function MapProvider(_ref2) {
       height = _ref2.height,
       projection = _ref2.projection,
       projectionConfig = _ref2.projectionConfig,
-      restProps = objectWithoutProperties(_ref2, ["width", "height", "projection", "projectionConfig"]);
+      restProps = _objectWithoutProperties(_ref2, _excluded$9);
 
   var _ref3 = projectionConfig.center || [],
-      _ref4 = slicedToArray(_ref3, 2),
+      _ref4 = _slicedToArray(_ref3, 2),
       cx = _ref4[0],
       cy = _ref4[1];
 
   var _ref5 = projectionConfig.rotate || [],
-      _ref6 = slicedToArray(_ref5, 3),
+      _ref6 = _slicedToArray(_ref5, 3),
       rx = _ref6[0],
       ry = _ref6[1],
       rz = _ref6[2];
 
   var _ref7 = projectionConfig.parallels || [],
-      _ref8 = slicedToArray(_ref7, 2),
+      _ref8 = _slicedToArray(_ref7, 2),
       p1 = _ref8[0],
       p2 = _ref8[1];
 
   var s = projectionConfig.scale || null;
-
   var projMemo = React.useMemo(function () {
     return makeProjection({
       projectionConfig: {
@@ -146,9 +260,7 @@ var MapProvider = function MapProvider(_ref2) {
       height: height
     });
   }, [width, height, projection, cx, cy, rx, ry, rz, p1, p2, s]);
-
   var proj = React.useCallback(projMemo, [projMemo]);
-
   var value = React.useMemo(function () {
     return {
       width: width,
@@ -157,79 +269,80 @@ var MapProvider = function MapProvider(_ref2) {
       path: geoPath().projection(proj)
     };
   }, [width, height, proj]);
-
-  return React__default.createElement(MapContext.Provider, _extends({ value: value }, restProps));
+  return /*#__PURE__*/React__default["default"].createElement(MapContext.Provider, _extends({
+    value: value
+  }, restProps));
 };
 
 MapProvider.propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-  projection: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  projectionConfig: PropTypes.object
+  width: PropTypes__default["default"].number,
+  height: PropTypes__default["default"].number,
+  projection: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].func]),
+  projectionConfig: PropTypes__default["default"].object
 };
 
-var ComposableMap = function ComposableMap(_ref) {
+var _excluded$8 = ["width", "height", "projection", "projectionConfig", "className"];
+
+var ComposableMap = function ComposableMap(_ref, ref) {
   var _ref$width = _ref.width,
-      width = _ref$width === undefined ? 800 : _ref$width,
+      width = _ref$width === void 0 ? 800 : _ref$width,
       _ref$height = _ref.height,
-      height = _ref$height === undefined ? 600 : _ref$height,
+      height = _ref$height === void 0 ? 600 : _ref$height,
       _ref$projection = _ref.projection,
-      projection = _ref$projection === undefined ? "geoEqualEarth" : _ref$projection,
+      projection = _ref$projection === void 0 ? "geoEqualEarth" : _ref$projection,
       _ref$projectionConfig = _ref.projectionConfig,
-      projectionConfig = _ref$projectionConfig === undefined ? {} : _ref$projectionConfig,
+      projectionConfig = _ref$projectionConfig === void 0 ? {} : _ref$projectionConfig,
       _ref$className = _ref.className,
-      className = _ref$className === undefined ? "" : _ref$className,
-      restProps = objectWithoutProperties(_ref, ["width", "height", "projection", "projectionConfig", "className"]);
-
-  return React__default.createElement(
-    MapProvider,
-    {
-      width: width,
-      height: height,
-      projection: projection,
-      projectionConfig: projectionConfig
-    },
-    React__default.createElement("svg", _extends({
-      viewBox: "0 0 " + width + " " + height,
-      className: "rsm-svg " + className
-    }, restProps))
-  );
+      className = _ref$className === void 0 ? "" : _ref$className,
+      restProps = _objectWithoutProperties(_ref, _excluded$8);
+
+  return /*#__PURE__*/React__default["default"].createElement(MapProvider, {
+    width: width,
+    height: height,
+    projection: projection,
+    projectionConfig: projectionConfig
+  }, /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+    ref: ref,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    className: "rsm-svg ".concat(className)
+  }, restProps)));
 };
 
 ComposableMap.propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-  projection: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  projectionConfig: PropTypes.object,
-  className: PropTypes.string
+  width: PropTypes__default["default"].number,
+  height: PropTypes__default["default"].number,
+  projection: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].func]),
+  projectionConfig: PropTypes__default["default"].object,
+  className: PropTypes__default["default"].string
 };
+var ComposableMap$1 = React.forwardRef(ComposableMap);
 
 function getCoords(w, h, t) {
   var xOffset = (w * t.k - w) / 2;
   var yOffset = (h * t.k - h) / 2;
   return [w / 2 - (xOffset + t.x) / t.k, h / 2 - (yOffset + t.y) / t.k];
 }
-
 function fetchGeographies(url) {
   return fetch(url).then(function (res) {
     if (!res.ok) {
       throw Error(res.statusText);
     }
+
     return res.json();
-  }).catch(function (error) {
+  })["catch"](function (error) {
     console.log("There was a problem when fetching the data: ", error);
   });
 }
-
 function getFeatures(geographies, parseGeographies) {
   var isTopojson = geographies.type === "Topology";
+
   if (!isTopojson) {
     return parseGeographies ? parseGeographies(geographies.features || geographies) : geographies.features || geographies;
   }
+
   var feats = topojsonClient.feature(geographies, geographies.objects[Object.keys(geographies.objects)[0]]).features;
   return parseGeographies ? parseGeographies(feats) : feats;
 }
-
 function getMesh(geographies) {
   var isTopojson = geographies.type === "Topology";
   if (!isTopojson) return null;
@@ -239,36 +352,40 @@ function getMesh(geographies) {
   var borders = topojsonClient.mesh(geographies, geographies.objects[Object.keys(geographies.objects)[0]], function (a, b) {
     return a !== b;
   });
-  return { outline: outline, borders: borders };
+  return {
+    outline: outline,
+    borders: borders
+  };
 }
-
 function prepareMesh(outline, borders, path) {
   return outline && borders ? {
-    outline: _extends({}, outline, { rsmKey: "outline", svgPath: path(outline) }),
-    borders: _extends({}, borders, { rsmKey: "borders", svgPath: path(borders) })
+    outline: _objectSpread2(_objectSpread2({}, outline), {}, {
+      rsmKey: "outline",
+      svgPath: path(outline)
+    }),
+    borders: _objectSpread2(_objectSpread2({}, borders), {}, {
+      rsmKey: "borders",
+      svgPath: path(borders)
+    })
   } : {};
 }
-
 function prepareFeatures(geographies, path) {
   return geographies ? geographies.map(function (d, i) {
-    return _extends({}, d, {
-      rsmKey: "geo-" + i,
+    return _objectSpread2(_objectSpread2({}, d), {}, {
+      rsmKey: "geo-".concat(i),
       svgPath: path(d)
     });
   }) : [];
 }
-
 function createConnectorPath() {
   var dx = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 30;
   var dy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 30;
   var curve = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5;
-
   var curvature = Array.isArray(curve) ? curve : [curve, curve];
   var curveX = dx / 2 * curvature[0];
   var curveY = dy / 2 * curvature[1];
-  return "M" + 0 + "," + 0 + " Q" + (-dx / 2 - curveX) + "," + (-dy / 2 + curveY) + " " + -dx + "," + -dy;
+  return "M".concat(0, ",", 0, " Q", -dx / 2 - curveX, ",").concat(-dy / 2 + curveY, " ").concat(-dx, ",").concat(-dy);
 }
-
 function isString(geo) {
   return typeof geo === "string";
 }
@@ -281,13 +398,12 @@ function useGeographies(_ref) {
       path = _useContext.path;
 
   var _useState = React.useState({}),
-      _useState2 = slicedToArray(_useState, 2),
+      _useState2 = _slicedToArray(_useState, 2),
       output = _useState2[0],
       setOutput = _useState2[1];
 
   React.useEffect(function () {
-    if (typeof window === "undefined") return;
-
+    if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === "undefined") return;
     if (!geography) return;
 
     if (isString(geography)) {
@@ -320,41 +436,58 @@ function useGeographies(_ref) {
       outline = _useMemo.outline,
       borders = _useMemo.borders;
 
-  return { geographies: geographies, outline: outline, borders: borders };
+  return {
+    geographies: geographies,
+    outline: outline,
+    borders: borders
+  };
 }
 
-var Geographies = function Geographies(_ref) {
+var _excluded$7 = ["geography", "children", "parseGeographies", "className"];
+
+var Geographies = function Geographies(_ref, ref) {
   var geography = _ref.geography,
       children = _ref.children,
       parseGeographies = _ref.parseGeographies,
       _ref$className = _ref.className,
-      className = _ref$className === undefined ? "" : _ref$className,
-      restProps = objectWithoutProperties(_ref, ["geography", "children", "parseGeographies", "className"]);
+      className = _ref$className === void 0 ? "" : _ref$className,
+      restProps = _objectWithoutProperties(_ref, _excluded$7);
 
   var _useContext = React.useContext(MapContext),
       path = _useContext.path,
       projection = _useContext.projection;
 
-  var _useGeographies = useGeographies({ geography: geography, parseGeographies: parseGeographies }),
+  var _useGeographies = useGeographies({
+    geography: geography,
+    parseGeographies: parseGeographies
+  }),
       geographies = _useGeographies.geographies,
       outline = _useGeographies.outline,
       borders = _useGeographies.borders;
 
-  return React__default.createElement(
-    "g",
-    _extends({ className: "rsm-geographies " + className }, restProps),
-    geographies && geographies.length > 0 && children({ geographies: geographies, outline: outline, borders: borders, path: path, projection: projection })
-  );
+  return /*#__PURE__*/React__default["default"].createElement("g", _extends({
+    ref: ref,
+    className: "rsm-geographies ".concat(className)
+  }, restProps), geographies && geographies.length > 0 && children({
+    geographies: geographies,
+    outline: outline,
+    borders: borders,
+    path: path,
+    projection: projection
+  }));
 };
 
 Geographies.propTypes = {
-  geography: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array]),
-  children: PropTypes.func,
-  parseGeographies: PropTypes.func,
-  className: PropTypes.string
+  geography: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object, PropTypes__default["default"].array]),
+  children: PropTypes__default["default"].func,
+  parseGeographies: PropTypes__default["default"].func,
+  className: PropTypes__default["default"].string
 };
+var Geographies$1 = React.forwardRef(Geographies);
+
+var _excluded$6 = ["geography", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "style", "className"];
 
-var Geography = function Geography(_ref) {
+var Geography = function Geography(_ref, ref) {
   var geography = _ref.geography,
       onMouseEnter = _ref.onMouseEnter,
       onMouseLeave = _ref.onMouseLeave,
@@ -363,18 +496,18 @@ var Geography = function Geography(_ref) {
       onFocus = _ref.onFocus,
       onBlur = _ref.onBlur,
       _ref$style = _ref.style,
-      style = _ref$style === undefined ? {} : _ref$style,
+      style = _ref$style === void 0 ? {} : _ref$style,
       _ref$className = _ref.className,
-      className = _ref$className === undefined ? "" : _ref$className,
-      restProps = objectWithoutProperties(_ref, ["geography", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "style", "className"]);
+      className = _ref$className === void 0 ? "" : _ref$className,
+      restProps = _objectWithoutProperties(_ref, _excluded$6);
 
   var _useState = React.useState(false),
-      _useState2 = slicedToArray(_useState, 2),
+      _useState2 = _slicedToArray(_useState, 2),
       isPressed = _useState2[0],
       setPressed = _useState2[1];
 
   var _useState3 = React.useState(false),
-      _useState4 = slicedToArray(_useState3, 2),
+      _useState4 = _slicedToArray(_useState3, 2),
       isFocused = _useState4[0],
       setFocus = _useState4[1];
 
@@ -410,9 +543,10 @@ var Geography = function Geography(_ref) {
     if (onMouseUp) onMouseUp(evt);
   }
 
-  return React__default.createElement("path", _extends({
+  return /*#__PURE__*/React__default["default"].createElement("path", _extends({
+    ref: ref,
     tabIndex: "0",
-    className: "rsm-geography " + className,
+    className: "rsm-geography ".concat(className),
     d: geography.svgPath,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
@@ -425,49 +559,50 @@ var Geography = function Geography(_ref) {
 };
 
 Geography.propTypes = {
-  geography: PropTypes.object,
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func,
-  onMouseDown: PropTypes.func,
-  onMouseUp: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  style: PropTypes.object,
-  className: PropTypes.string
+  geography: PropTypes__default["default"].object,
+  onMouseEnter: PropTypes__default["default"].func,
+  onMouseLeave: PropTypes__default["default"].func,
+  onMouseDown: PropTypes__default["default"].func,
+  onMouseUp: PropTypes__default["default"].func,
+  onFocus: PropTypes__default["default"].func,
+  onBlur: PropTypes__default["default"].func,
+  style: PropTypes__default["default"].object,
+  className: PropTypes__default["default"].string
 };
+var Geography$1 = React.memo(React.forwardRef(Geography));
 
-var Geography$1 = React.memo(Geography);
+var _excluded$5 = ["fill", "stroke", "step", "className"];
 
-var Graticule = function Graticule(_ref) {
+var Graticule = function Graticule(_ref, ref) {
   var _ref$fill = _ref.fill,
-      fill = _ref$fill === undefined ? "transparent" : _ref$fill,
+      fill = _ref$fill === void 0 ? "transparent" : _ref$fill,
       _ref$stroke = _ref.stroke,
-      stroke = _ref$stroke === undefined ? "currentcolor" : _ref$stroke,
+      stroke = _ref$stroke === void 0 ? "currentcolor" : _ref$stroke,
       _ref$step = _ref.step,
-      step = _ref$step === undefined ? [10, 10] : _ref$step,
+      step = _ref$step === void 0 ? [10, 10] : _ref$step,
       _ref$className = _ref.className,
-      className = _ref$className === undefined ? "" : _ref$className,
-      restProps = objectWithoutProperties(_ref, ["fill", "stroke", "step", "className"]);
+      className = _ref$className === void 0 ? "" : _ref$className,
+      restProps = _objectWithoutProperties(_ref, _excluded$5);
 
   var _useContext = React.useContext(MapContext),
       path = _useContext.path;
 
-  return React__default.createElement("path", _extends({
+  return /*#__PURE__*/React__default["default"].createElement("path", _extends({
+    ref: ref,
     d: path(d3Geo.geoGraticule().step(step)()),
     fill: fill,
     stroke: stroke,
-    className: "rsm-graticule " + className
+    className: "rsm-graticule ".concat(className)
   }, restProps));
 };
 
 Graticule.propTypes = {
-  fill: PropTypes.string,
-  stroke: PropTypes.string,
-  step: PropTypes.array,
-  className: PropTypes.string
+  fill: PropTypes__default["default"].string,
+  stroke: PropTypes__default["default"].string,
+  step: PropTypes__default["default"].array,
+  className: PropTypes__default["default"].string
 };
-
-var Graticule$1 = React.memo(Graticule);
+var Graticule$1 = React.memo(React.forwardRef(Graticule));
 
 function useZoomPan(_ref) {
   var center = _ref.center,
@@ -476,44 +611,52 @@ function useZoomPan(_ref) {
       onMoveEnd = _ref.onMoveEnd,
       onMove = _ref.onMove,
       _ref$translateExtent = _ref.translateExtent,
-      translateExtent = _ref$translateExtent === undefined ? [[-Infinity, -Infinity], [Infinity, Infinity]] : _ref$translateExtent,
+      translateExtent = _ref$translateExtent === void 0 ? [[-Infinity, -Infinity], [Infinity, Infinity]] : _ref$translateExtent,
       _ref$scaleExtent = _ref.scaleExtent,
-      scaleExtent = _ref$scaleExtent === undefined ? [1, 8] : _ref$scaleExtent,
+      scaleExtent = _ref$scaleExtent === void 0 ? [1, 8] : _ref$scaleExtent,
       _ref$zoom = _ref.zoom,
-      zoom = _ref$zoom === undefined ? 1 : _ref$zoom;
+      zoom = _ref$zoom === void 0 ? 1 : _ref$zoom;
 
   var _useContext = React.useContext(MapContext),
       width = _useContext.width,
       height = _useContext.height,
       projection = _useContext.projection;
 
-  var _center = slicedToArray(center, 2),
+  var _center = _slicedToArray(center, 2),
       lon = _center[0],
       lat = _center[1];
 
-  var _useState = React.useState({ x: 0, y: 0, k: 1 }),
-      _useState2 = slicedToArray(_useState, 2),
+  var _useState = React.useState({
+    x: 0,
+    y: 0,
+    k: 1
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
       position = _useState2[0],
       setPosition = _useState2[1];
 
-  var lastPosition = React.useRef({ x: 0, y: 0, k: 1 });
+  var lastPosition = React.useRef({
+    x: 0,
+    y: 0,
+    k: 1
+  });
   var mapRef = React.useRef();
   var zoomRef = React.useRef();
   var bypassEvents = React.useRef(false);
 
-  var _translateExtent = slicedToArray(translateExtent, 2),
+  var _translateExtent = _slicedToArray(translateExtent, 2),
       a = _translateExtent[0],
       b = _translateExtent[1];
 
-  var _a = slicedToArray(a, 2),
+  var _a = _slicedToArray(a, 2),
       a1 = _a[0],
       a2 = _a[1];
 
-  var _b = slicedToArray(b, 2),
+  var _b = _slicedToArray(b, 2),
       b1 = _b[0],
       b2 = _b[1];
 
-  var _scaleExtent = slicedToArray(scaleExtent, 2),
+  var _scaleExtent = _slicedToArray(scaleExtent, 2),
       minZoom = _scaleExtent[0],
       maxZoom = _scaleExtent[1];
 
@@ -522,17 +665,29 @@ function useZoomPan(_ref) {
 
     function handleZoomStart(d3Event) {
       if (!onMoveStart || bypassEvents.current) return;
-      onMoveStart({ coordinates: projection.invert(getCoords(width, height, d3Event.transform)), zoom: d3Event.transform.k }, d3Event);
+      onMoveStart({
+        coordinates: projection.invert(getCoords(width, height, d3Event.transform)),
+        zoom: d3Event.transform.k
+      }, d3Event);
     }
 
     function handleZoom(d3Event) {
       if (bypassEvents.current) return;
       var transform = d3Event.transform,
           sourceEvent = d3Event.sourceEvent;
-
-      setPosition({ x: transform.x, y: transform.y, k: transform.k, dragging: sourceEvent });
+      setPosition({
+        x: transform.x,
+        y: transform.y,
+        k: transform.k,
+        dragging: sourceEvent
+      });
       if (!onMove) return;
-      onMove({ x: transform.x, y: transform.y, zoom: transform.k, dragging: sourceEvent }, d3Event);
+      onMove({
+        x: transform.x,
+        y: transform.y,
+        zoom: transform.k,
+        dragging: sourceEvent
+      }, d3Event);
     }
 
     function handleZoomEnd(d3Event) {
@@ -542,67 +697,78 @@ function useZoomPan(_ref) {
       }
 
       var _projection$invert = projection.invert(getCoords(width, height, d3Event.transform)),
-          _projection$invert2 = slicedToArray(_projection$invert, 2),
+          _projection$invert2 = _slicedToArray(_projection$invert, 2),
           x = _projection$invert2[0],
           y = _projection$invert2[1];
 
-      lastPosition.current = { x: x, y: y, k: d3Event.transform.k };
+      lastPosition.current = {
+        x: x,
+        y: y,
+        k: d3Event.transform.k
+      };
       if (!onMoveEnd) return;
-      onMoveEnd({ coordinates: [x, y], zoom: d3Event.transform.k }, d3Event);
+      onMoveEnd({
+        coordinates: [x, y],
+        zoom: d3Event.transform.k
+      }, d3Event);
     }
 
     function filterFunc(d3Event) {
       if (filterZoomEvent) {
         return filterZoomEvent(d3Event);
       }
+
       return d3Event ? !d3Event.ctrlKey && !d3Event.button : false;
     }
 
     var zoom = d3Zoom.zoom().filter(filterFunc).scaleExtent([minZoom, maxZoom]).translateExtent([[a1, a2], [b1, b2]]).on("start", handleZoomStart).on("zoom", handleZoom).on("end", handleZoomEnd);
-
     zoomRef.current = zoom;
     svg.call(zoom);
   }, [width, height, a1, a2, b1, b2, minZoom, maxZoom, projection, onMoveStart, onMove, onMoveEnd, filterZoomEvent]);
-
   React.useEffect(function () {
     if (lon === lastPosition.current.x && lat === lastPosition.current.y && zoom === lastPosition.current.k) return;
-
     var coords = projection([lon, lat]);
     var x = coords[0] * zoom;
     var y = coords[1] * zoom;
     var svg = d3Selection.select(mapRef.current);
-
     bypassEvents.current = true;
-
     svg.call(zoomRef.current.transform, d3Zoom.zoomIdentity.translate(width / 2 - x, height / 2 - y).scale(zoom));
-    setPosition({ x: width / 2 - x, y: height / 2 - y, k: zoom });
-
-    lastPosition.current = { x: lon, y: lat, k: zoom };
+    setPosition({
+      x: width / 2 - x,
+      y: height / 2 - y,
+      k: zoom
+    });
+    lastPosition.current = {
+      x: lon,
+      y: lat,
+      k: zoom
+    };
   }, [lon, lat, zoom, width, height, projection]);
-
   return {
     mapRef: mapRef,
     position: position,
-    transformString: "translate(" + position.x + " " + position.y + ") scale(" + position.k + ")"
+    transformString: "translate(".concat(position.x, " ").concat(position.y, ") scale(").concat(position.k, ")")
   };
 }
 
-var ZoomableGroup = function ZoomableGroup(_ref) {
+var _excluded$4 = ["center", "zoom", "minZoom", "maxZoom", "translateExtent", "filterZoomEvent", "onMoveStart", "onMove", "onMoveEnd", "className"];
+
+var ZoomableGroup = function ZoomableGroup(_ref, ref) {
   var _ref$center = _ref.center,
-      center = _ref$center === undefined ? [0, 0] : _ref$center,
+      center = _ref$center === void 0 ? [0, 0] : _ref$center,
       _ref$zoom = _ref.zoom,
-      zoom = _ref$zoom === undefined ? 1 : _ref$zoom,
+      zoom = _ref$zoom === void 0 ? 1 : _ref$zoom,
       _ref$minZoom = _ref.minZoom,
-      minZoom = _ref$minZoom === undefined ? 1 : _ref$minZoom,
+      minZoom = _ref$minZoom === void 0 ? 1 : _ref$minZoom,
       _ref$maxZoom = _ref.maxZoom,
-      maxZoom = _ref$maxZoom === undefined ? 8 : _ref$maxZoom,
+      maxZoom = _ref$maxZoom === void 0 ? 8 : _ref$maxZoom,
       translateExtent = _ref.translateExtent,
       filterZoomEvent = _ref.filterZoomEvent,
       onMoveStart = _ref.onMoveStart,
       onMove = _ref.onMove,
       onMoveEnd = _ref.onMoveEnd,
       className = _ref.className,
-      restProps = objectWithoutProperties(_ref, ["center", "zoom", "minZoom", "maxZoom", "translateExtent", "filterZoomEvent", "onMoveStart", "onMove", "onMoveEnd", "className"]);
+      restProps = _objectWithoutProperties(_ref, _excluded$4);
 
   var _useContext = React.useContext(MapContext),
       width = _useContext.width,
@@ -621,79 +787,84 @@ var ZoomableGroup = function ZoomableGroup(_ref) {
       mapRef = _useZoomPan.mapRef,
       transformString = _useZoomPan.transformString;
 
-  return React__default.createElement(
-    "g",
-    { ref: mapRef },
-    React__default.createElement("rect", { width: width, height: height, fill: "transparent" }),
-    React__default.createElement("g", _extends({ transform: transformString, className: "rsm-zoomable-group " + className }, restProps))
-  );
+  return /*#__PURE__*/React__default["default"].createElement("g", {
+    ref: mapRef
+  }, /*#__PURE__*/React__default["default"].createElement("rect", {
+    width: width,
+    height: height,
+    fill: "transparent"
+  }), /*#__PURE__*/React__default["default"].createElement("g", _extends({
+    ref: ref,
+    transform: transformString,
+    className: "rsm-zoomable-group ".concat(className)
+  }, restProps)));
 };
 
 ZoomableGroup.propTypes = {
-  center: PropTypes.array,
-  zoom: PropTypes.number,
-  minZoom: PropTypes.number,
-  maxZoom: PropTypes.number,
-  translateExtent: PropTypes.arrayOf(PropTypes.array),
-  onMoveStart: PropTypes.func,
-  onMove: PropTypes.func,
-  onMoveEnd: PropTypes.func,
-  className: PropTypes.string
+  center: PropTypes__default["default"].array,
+  zoom: PropTypes__default["default"].number,
+  minZoom: PropTypes__default["default"].number,
+  maxZoom: PropTypes__default["default"].number,
+  translateExtent: PropTypes__default["default"].arrayOf(PropTypes__default["default"].array),
+  onMoveStart: PropTypes__default["default"].func,
+  onMove: PropTypes__default["default"].func,
+  onMoveEnd: PropTypes__default["default"].func,
+  className: PropTypes__default["default"].string
 };
+var ZoomableGroup$1 = React.forwardRef(ZoomableGroup);
+
+var _excluded$3 = ["id", "fill", "stroke", "strokeWidth", "className"];
 
-var Sphere = function Sphere(_ref) {
+var Sphere = function Sphere(_ref, ref) {
   var _ref$id = _ref.id,
-      id = _ref$id === undefined ? "rsm-sphere" : _ref$id,
+      id = _ref$id === void 0 ? "rsm-sphere" : _ref$id,
       _ref$fill = _ref.fill,
-      fill = _ref$fill === undefined ? "transparent" : _ref$fill,
+      fill = _ref$fill === void 0 ? "transparent" : _ref$fill,
       _ref$stroke = _ref.stroke,
-      stroke = _ref$stroke === undefined ? "currentcolor" : _ref$stroke,
+      stroke = _ref$stroke === void 0 ? "currentcolor" : _ref$stroke,
       _ref$strokeWidth = _ref.strokeWidth,
-      strokeWidth = _ref$strokeWidth === undefined ? 0.5 : _ref$strokeWidth,
+      strokeWidth = _ref$strokeWidth === void 0 ? 0.5 : _ref$strokeWidth,
       _ref$className = _ref.className,
-      className = _ref$className === undefined ? "" : _ref$className,
-      restProps = objectWithoutProperties(_ref, ["id", "fill", "stroke", "strokeWidth", "className"]);
+      className = _ref$className === void 0 ? "" : _ref$className,
+      restProps = _objectWithoutProperties(_ref, _excluded$3);
 
   var _useContext = React.useContext(MapContext),
       path = _useContext.path;
 
   var spherePath = React.useMemo(function () {
-    return path({ type: "Sphere" });
+    return path({
+      type: "Sphere"
+    });
   }, [path]);
-  return React__default.createElement(
-    React.Fragment,
-    null,
-    React__default.createElement(
-      "defs",
-      null,
-      React__default.createElement(
-        "clipPath",
-        { id: id },
-        React__default.createElement("path", { d: spherePath })
-      )
-    ),
-    React__default.createElement("path", _extends({
-      d: spherePath,
-      fill: fill,
-      stroke: stroke,
-      strokeWidth: strokeWidth,
-      style: { pointerEvents: "none" },
-      className: "rsm-sphere " + className
-    }, restProps))
-  );
+  return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("clipPath", {
+    id: id
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: spherePath
+  }))), /*#__PURE__*/React__default["default"].createElement("path", _extends({
+    ref: ref,
+    d: spherePath,
+    fill: fill,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    style: {
+      pointerEvents: "none"
+    },
+    className: "rsm-sphere ".concat(className)
+  }, restProps)));
 };
 
 Sphere.propTypes = {
-  id: PropTypes.string,
-  fill: PropTypes.string,
-  stroke: PropTypes.string,
-  strokeWidth: PropTypes.number,
-  className: PropTypes.string
+  id: PropTypes__default["default"].string,
+  fill: PropTypes__default["default"].string,
+  stroke: PropTypes__default["default"].string,
+  strokeWidth: PropTypes__default["default"].number,
+  className: PropTypes__default["default"].string
 };
+var Sphere$1 = React.memo(React.forwardRef(Sphere));
 
-var Sphere$1 = React.memo(Sphere);
+var _excluded$2 = ["coordinates", "children", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "style", "className"];
 
-var Marker = function Marker(_ref) {
+var Marker = function Marker(_ref, ref) {
   var coordinates = _ref.coordinates,
       children = _ref.children,
       onMouseEnter = _ref.onMouseEnter,
@@ -703,26 +874,26 @@ var Marker = function Marker(_ref) {
       onFocus = _ref.onFocus,
       onBlur = _ref.onBlur,
       _ref$style = _ref.style,
-      style = _ref$style === undefined ? {} : _ref$style,
+      style = _ref$style === void 0 ? {} : _ref$style,
       _ref$className = _ref.className,
-      className = _ref$className === undefined ? "" : _ref$className,
-      restProps = objectWithoutProperties(_ref, ["coordinates", "children", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "style", "className"]);
+      className = _ref$className === void 0 ? "" : _ref$className,
+      restProps = _objectWithoutProperties(_ref, _excluded$2);
 
   var _useContext = React.useContext(MapContext),
       projection = _useContext.projection;
 
   var _useState = React.useState(false),
-      _useState2 = slicedToArray(_useState, 2),
+      _useState2 = _slicedToArray(_useState, 2),
       isPressed = _useState2[0],
       setPressed = _useState2[1];
 
   var _useState3 = React.useState(false),
-      _useState4 = slicedToArray(_useState3, 2),
+      _useState4 = _slicedToArray(_useState3, 2),
       isFocused = _useState4[0],
       setFocus = _useState4[1];
 
   var _projection = projection(coordinates),
-      _projection2 = slicedToArray(_projection, 2),
+      _projection2 = _slicedToArray(_projection, 2),
       x = _projection2[0],
       y = _projection2[1];
 
@@ -758,51 +929,51 @@ var Marker = function Marker(_ref) {
     if (onMouseUp) onMouseUp(evt);
   }
 
-  return React__default.createElement(
-    "g",
-    _extends({
-      transform: "translate(" + x + ", " + y + ")",
-      className: "rsm-marker " + className,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onMouseDown: handleMouseDown,
-      onMouseUp: handleMouseUp,
-      style: style[isPressed || isFocused ? isPressed ? "pressed" : "hover" : "default"]
-    }, restProps),
-    children
-  );
+  return /*#__PURE__*/React__default["default"].createElement("g", _extends({
+    ref: ref,
+    transform: "translate(".concat(x, ", ").concat(y, ")"),
+    className: "rsm-marker ".concat(className),
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseDown: handleMouseDown,
+    onMouseUp: handleMouseUp,
+    style: style[isPressed || isFocused ? isPressed ? "pressed" : "hover" : "default"]
+  }, restProps), children);
 };
 
 Marker.propTypes = {
-  coordinates: PropTypes.array,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func,
-  onMouseDown: PropTypes.func,
-  onMouseUp: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  style: PropTypes.object,
-  className: PropTypes.string
+  coordinates: PropTypes__default["default"].array,
+  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].arrayOf(PropTypes__default["default"].node)]),
+  onMouseEnter: PropTypes__default["default"].func,
+  onMouseLeave: PropTypes__default["default"].func,
+  onMouseDown: PropTypes__default["default"].func,
+  onMouseUp: PropTypes__default["default"].func,
+  onFocus: PropTypes__default["default"].func,
+  onBlur: PropTypes__default["default"].func,
+  style: PropTypes__default["default"].object,
+  className: PropTypes__default["default"].string
 };
+var Marker$1 = React.forwardRef(Marker);
 
-var Line = function Line(_ref) {
+var _excluded$1 = ["from", "to", "coordinates", "stroke", "strokeWidth", "fill", "className"];
+
+var Line = function Line(_ref, ref) {
   var _ref$from = _ref.from,
-      from = _ref$from === undefined ? [0, 0] : _ref$from,
+      from = _ref$from === void 0 ? [0, 0] : _ref$from,
       _ref$to = _ref.to,
-      to = _ref$to === undefined ? [0, 0] : _ref$to,
+      to = _ref$to === void 0 ? [0, 0] : _ref$to,
       coordinates = _ref.coordinates,
       _ref$stroke = _ref.stroke,
-      stroke = _ref$stroke === undefined ? "currentcolor" : _ref$stroke,
+      stroke = _ref$stroke === void 0 ? "currentcolor" : _ref$stroke,
       _ref$strokeWidth = _ref.strokeWidth,
-      strokeWidth = _ref$strokeWidth === undefined ? 3 : _ref$strokeWidth,
+      strokeWidth = _ref$strokeWidth === void 0 ? 3 : _ref$strokeWidth,
       _ref$fill = _ref.fill,
-      fill = _ref$fill === undefined ? "transparent" : _ref$fill,
+      fill = _ref$fill === void 0 ? "transparent" : _ref$fill,
       _ref$className = _ref.className,
-      className = _ref$className === undefined ? "" : _ref$className,
-      restProps = objectWithoutProperties(_ref, ["from", "to", "coordinates", "stroke", "strokeWidth", "fill", "className"]);
+      className = _ref$className === void 0 ? "" : _ref$className,
+      restProps = _objectWithoutProperties(_ref, _excluded$1);
 
   var _useContext = React.useContext(MapContext),
       path = _useContext.path;
@@ -811,10 +982,10 @@ var Line = function Line(_ref) {
     type: "LineString",
     coordinates: coordinates || [from, to]
   };
-
-  return React__default.createElement("path", _extends({
+  return /*#__PURE__*/React__default["default"].createElement("path", _extends({
+    ref: ref,
     d: path(lineData),
-    className: "rsm-line " + className,
+    className: "rsm-line ".concat(className),
     stroke: stroke,
     strokeWidth: strokeWidth,
     fill: fill
@@ -822,70 +993,73 @@ var Line = function Line(_ref) {
 };
 
 Line.propTypes = {
-  from: PropTypes.array,
-  to: PropTypes.array,
-  coordinates: PropTypes.array,
-  stroke: PropTypes.string,
-  strokeWidth: PropTypes.number,
-  fill: PropTypes.string,
-  className: PropTypes.string
+  from: PropTypes__default["default"].array,
+  to: PropTypes__default["default"].array,
+  coordinates: PropTypes__default["default"].array,
+  stroke: PropTypes__default["default"].string,
+  strokeWidth: PropTypes__default["default"].number,
+  fill: PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string
 };
+var Line$1 = React.forwardRef(Line);
 
-var Annotation = function Annotation(_ref) {
+var _excluded = ["subject", "children", "connectorProps", "dx", "dy", "curve", "className"];
+
+var Annotation = function Annotation(_ref, ref) {
   var subject = _ref.subject,
       children = _ref.children,
       connectorProps = _ref.connectorProps,
       _ref$dx = _ref.dx,
-      dx = _ref$dx === undefined ? 30 : _ref$dx,
+      dx = _ref$dx === void 0 ? 30 : _ref$dx,
       _ref$dy = _ref.dy,
-      dy = _ref$dy === undefined ? 30 : _ref$dy,
+      dy = _ref$dy === void 0 ? 30 : _ref$dy,
       _ref$curve = _ref.curve,
-      curve = _ref$curve === undefined ? 0 : _ref$curve,
+      curve = _ref$curve === void 0 ? 0 : _ref$curve,
       _ref$className = _ref.className,
-      className = _ref$className === undefined ? "" : _ref$className,
-      restProps = objectWithoutProperties(_ref, ["subject", "children", "connectorProps", "dx", "dy", "curve", "className"]);
+      className = _ref$className === void 0 ? "" : _ref$className,
+      restProps = _objectWithoutProperties(_ref, _excluded);
 
   var _useContext = React.useContext(MapContext),
       projection = _useContext.projection;
 
   var _projection = projection(subject),
-      _projection2 = slicedToArray(_projection, 2),
+      _projection2 = _slicedToArray(_projection, 2),
       x = _projection2[0],
       y = _projection2[1];
 
   var connectorPath = createConnectorPath(dx, dy, curve);
-
-  return React__default.createElement(
-    "g",
-    _extends({
-      transform: "translate(" + (x + dx) + ", " + (y + dy) + ")",
-      className: "rsm-annotation " + className
-    }, restProps),
-    React__default.createElement("path", _extends({ d: connectorPath, fill: "transparent", stroke: "#000" }, connectorProps)),
-    children
-  );
+  return /*#__PURE__*/React__default["default"].createElement("g", _extends({
+    ref: ref,
+    transform: "translate(".concat(x + dx, ", ").concat(y + dy, ")"),
+    className: "rsm-annotation ".concat(className)
+  }, restProps), /*#__PURE__*/React__default["default"].createElement("path", _extends({
+    d: connectorPath,
+    fill: "transparent",
+    stroke: "#000"
+  }, connectorProps)), children);
 };
 
 Annotation.propTypes = {
-  subject: PropTypes.array,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-  dx: PropTypes.number,
-  dy: PropTypes.number,
-  curve: PropTypes.number,
-  connectorProps: PropTypes.object,
-  className: PropTypes.string
+  subject: PropTypes__default["default"].array,
+  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].arrayOf(PropTypes__default["default"].node)]),
+  dx: PropTypes__default["default"].number,
+  dy: PropTypes__default["default"].number,
+  curve: PropTypes__default["default"].number,
+  connectorProps: PropTypes__default["default"].object,
+  className: PropTypes__default["default"].string
 };
+var Annotation$1 = React.forwardRef(Annotation);
 
-exports.Annotation = Annotation;
-exports.ComposableMap = ComposableMap;
-exports.Geographies = Geographies;
+exports.Annotation = Annotation$1;
+exports.ComposableMap = ComposableMap$1;
+exports.Geographies = Geographies$1;
 exports.Geography = Geography$1;
 exports.Graticule = Graticule$1;
-exports.Line = Line;
+exports.Line = Line$1;
 exports.MapContext = MapContext;
 exports.MapProvider = MapProvider;
-exports.Marker = Marker;
+exports.Marker = Marker$1;
 exports.Sphere = Sphere$1;
-exports.ZoomableGroup = ZoomableGroup;
+exports.ZoomableGroup = ZoomableGroup$1;
 exports.useGeographies = useGeographies;
 exports.useZoomPan = useZoomPan;