@skyscanner/backpack-web 17.1.0-beta.1 → 17.1.0

package/bpk-component-map/src/BpkIconMarkerBackground.js

@@ -1,59 +1,81 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkIconMarkerBackgroundModule = _interopRequireDefault(require("./BpkIconMarkerBackground.module.css"));
-const _excluded = ["disabled", "interactive", "selected"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-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; }
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkIconMarkerBackgroundModule.default);
-const BpkIconMarkerBackground = props => {
-  const {
-      disabled,
-      interactive,
-      selected
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
-  const classNames = getClassName('bpk-icon-marker-background', interactive && 'bpk-icon-marker-background--interactive', disabled && 'bpk-icon-marker-background--disabled', selected && 'bpk-icon-marker-background--selected');
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* @flow strict */
+
+import React from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './BpkIconMarkerBackground.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  disabled: boolean,
+  interactive: boolean,
+  selected: boolean,
+};
+
+const BpkIconMarkerBackground = (props: Props) => {
+  const { disabled, interactive, selected, ...rest } = props;
+
+  const classNames = getClassName(
+    'bpk-icon-marker-background',
+    interactive && 'bpk-icon-marker-background--interactive',
+    disabled && 'bpk-icon-marker-background--disabled',
+    selected && 'bpk-icon-marker-background--selected',
+  );
+
   if (selected) {
     return (
-      /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _react.default.createElement("svg", _extends({
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "32",
-        height: "40",
-        viewBox: "0 0 32 40",
-        className: classNames
-      }, rest), /*#__PURE__*/_react.default.createElement("path", {
-        d: "M32,16.2575 L31.9995,16.3817 C32.0032,16.7936 31.9852,17.2038 31.9455,17.6093 C31.7127,20.4826 30.7446,23.1441 29.2328,25.3991 C26.2125,30.7416 21.1896,35.9609 17.2875,39.5 C16.5525,40.1667 15.4475,40.1667 14.7125,39.5 C10.8104,35.9609 5.78747,30.7416 2.76723,25.3991 C1.25541,23.1441 0.2873,20.4826 0.05453,17.6093 C0.01479,17.2038 -0.00317,16.7936 0.00046,16.3817 L0,16.2575 C0,7.2787 7.1634,0 16,0 C24.8366,0 32,7.2787 32,16.2575 Z"
-      }))
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="40"
+        viewBox="0 0 32 40"
+        className={classNames}
+        {...rest}
+      >
+        <path d="M32,16.2575 L31.9995,16.3817 C32.0032,16.7936 31.9852,17.2038 31.9455,17.6093 C31.7127,20.4826 30.7446,23.1441 29.2328,25.3991 C26.2125,30.7416 21.1896,35.9609 17.2875,39.5 C16.5525,40.1667 15.4475,40.1667 14.7125,39.5 C10.8104,35.9609 5.78747,30.7416 2.76723,25.3991 C1.25541,23.1441 0.2873,20.4826 0.05453,17.6093 C0.01479,17.2038 -0.00317,16.7936 0.00046,16.3817 L0,16.2575 C0,7.2787 7.1634,0 16,0 C24.8366,0 32,7.2787 32,16.2575 Z" />
+      </svg>
     );
   }
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement("svg", _extends({
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "26",
-      height: "32",
-      viewBox: "0 0 26 32",
-      className: classNames
-    }, rest), /*#__PURE__*/_react.default.createElement("path", {
-      d: "M26,13.006 L25.9996018,13.1054 C26.0026018,13.4349 25.9880018,13.763 25.9557018,14.0875 C25.7666018,16.3861 24.9800018,18.5153 23.7516018,20.3193 C21.2977018,24.5933 17.2166018,28.7687 14.0461018,31.6 C13.4489018,32.1333 12.5511018,32.1333 11.9539018,31.6 C8.78340182,28.7687 4.70232182,24.5933 2.24837182,20.3193 C1.02002182,18.5153 0.233431825,16.3861 0.0443018246,14.0875 C0.0120218246,13.763 -0.00257817543,13.4348 0.000371824568,13.1054 L-4.4408921e-16,13.006 C-4.4408921e-16,5.82298 5.82030182,0 13,0 C20.1797018,0 26,5.82298 26,13.006 Z"
-    }))
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="26"
+      height="32"
+      viewBox="0 0 26 32"
+      className={classNames}
+      {...rest}
+    >
+      <path d="M26,13.006 L25.9996018,13.1054 C26.0026018,13.4349 25.9880018,13.763 25.9557018,14.0875 C25.7666018,16.3861 24.9800018,18.5153 23.7516018,20.3193 C21.2977018,24.5933 17.2166018,28.7687 14.0461018,31.6 C13.4489018,32.1333 12.5511018,32.1333 11.9539018,31.6 C8.78340182,28.7687 4.70232182,24.5933 2.24837182,20.3193 C1.02002182,18.5153 0.233431825,16.3861 0.0443018246,14.0875 C0.0120218246,13.763 -0.00257817543,13.4348 0.000371824568,13.1054 L-4.4408921e-16,13.006 C-4.4408921e-16,5.82298 5.82030182,0 13,0 C20.1797018,0 26,5.82298 26,13.006 Z" />
+    </svg>
   );
 };
+
 BpkIconMarkerBackground.defaultProps = {
   disabled: false,
   interactive: false,
-  selected: false
+  selected: false,
 };
-var _default = BpkIconMarkerBackground;
-exports.default = _default;
+
+export default BpkIconMarkerBackground;

package/bpk-component-map/src/BpkIconMarkerBackground.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon-marker-background{position:absolute;top:0;left:0;fill:#0c838a;fill:var(--bpk-icon-marker-default-background-color, #0c838a)}.bpk-icon-marker-background--interactive{cursor:pointer}.bpk-icon-marker-background--disabled{fill:#d4fff2;fill:var(--bpk-icon-marker-default-disabled-background-color, #d4fff2)}.bpk-icon-marker-background--selected{fill:#fff;stroke:#0c838a;stroke:var(--bpk-icon-marker-default-selected-color, #0c838a)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon-marker-background{position:absolute;top:0;left:0;fill:#00a698;fill:var(--bpk-icon-marker-default-background-color, #00a698)}.bpk-icon-marker-background--interactive{cursor:pointer}.bpk-icon-marker-background--disabled{fill:#d0eeec;fill:var(--bpk-icon-marker-default-disabled-background-color, #d0eeec)}.bpk-icon-marker-background--selected{fill:#fff;stroke:#00a698;stroke:var(--bpk-icon-marker-default-selected-color, #00a698)}

package/bpk-component-map/src/BpkIconMarkerBackground.module.scss

@@ -0,0 +1,53 @@
+// /*
+//  * Backpack - Skyscanner's Design System
+//  *
+//  * Copyright 2016 Skyscanner Ltd
+//  *
+//  * Licensed under the Apache License, Version 2.0 (the "License");
+//  * you may not use this file except in compliance with the License.
+//  * You may obtain a copy of the License at
+//  *
+//  *   http://www.apache.org/licenses/LICENSE-2.0
+//  *
+//  * Unless required by applicable law or agreed to in writing, software
+//  * distributed under the License is distributed on an "AS IS" BASIS,
+//  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  * See the License for the specific language governing permissions and
+//  * limitations under the License.
+//  */
+
+@import '~bpk-mixins/index.scss';
+
+.bpk-icon-marker-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  @include bpk-themeable-property(
+    fill,
+    --bpk-icon-marker-default-background-color,
+    $bpk-status-success-spot-day
+  );
+
+  &--interactive {
+    cursor: pointer;
+  }
+
+  &--disabled {
+    @include bpk-themeable-property(
+      fill,
+      --bpk-icon-marker-default-disabled-background-color,
+      $bpk-status-success-fill-day
+    );
+  }
+
+  &--selected {
+    fill: $bpk-surface-default-day;
+
+    @include bpk-themeable-property(
+      stroke,
+      --bpk-icon-marker-default-selected-color,
+      $bpk-status-success-spot-day
+    );
+  }
+}

package/bpk-component-map/src/BpkMap.js

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _api = require("@react-google-maps/api");
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _commonTypes = require("./common-types");
-var _BpkMapModule = _interopRequireDefault(require("./BpkMap.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -29,8 +14,60 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */const getClassName = (0, _bpkReactUtils.cssModules)(_BpkMapModule.default);
-const BpkMap = props => {
+ */
+
+/* @flow strict */
+
+import React, { type Node, useCallback, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { GoogleMap } from '@react-google-maps/api';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import { LatLongPropType, type LatLong } from './common-types';
+import STYLES from './BpkMap.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+export type Bounds = {
+  south: number,
+  west: number,
+  north: number,
+  east: number,
+};
+
+export type MapRef = ?{
+  getBounds: () => Bounds,
+  getCenter: () => LatLong,
+  getZoom: () => number,
+  fitBounds: (Bounds) => void,
+};
+
+type MapOptionStyle = {
+  featureType: ?string,
+  elementType: ?string,
+  stylers: Array<{
+    [string]: string,
+  }>,
+};
+
+type Props = {
+  greedyGestureHandling: boolean,
+  panEnabled: boolean,
+  showControls: boolean,
+  zoom: number,
+  bounds: ?Bounds,
+  center: ?LatLong,
+  children: ?Node,
+  mapRef: ?(MapRef) => mixed,
+  onRegionChange: ?(Bounds, LatLong) => mixed,
+  onZoom: ?(number) => mixed,
+  onTilesLoaded: ?() => void,
+  className: ?string,
+  mapOptionStyles: ?Array<MapOptionStyle>,
+};
+
+const BpkMap = (props: Props) => {
   const {
     bounds,
     center,
@@ -44,8 +81,9 @@ const BpkMap = props => {
     onZoom,
     panEnabled,
     showControls,
-    zoom
+    zoom,
   } = props;
+
   if (!bounds && !center) {
     throw new Error('BpkMap: Provide either `bounds` or `center` props.');
   }
@@ -57,83 +95,101 @@ const BpkMap = props => {
   } else if (greedyGestureHandling) {
     gestureHandling = 'greedy';
   }
-  const ref = (0, _react.useRef)(null);
+
+  const ref = useRef(null);
   const mapContainerClassName = getClassName('bpk-map', className);
-  const onLoad = (0, _react.useCallback)(map => {
-    ref.current = map;
-    if (map && bounds) {
-      map.fitBounds({
-        south: bounds.south,
-        west: bounds.west,
-        north: bounds.north,
-        east: bounds.east
-      });
-    }
-    if (mapRef) {
-      mapRef(map);
-    }
-  }, [bounds, mapRef]);
-  return /*#__PURE__*/_react.default.createElement(_api.GoogleMap, {
-    onLoad: onLoad,
-    center: center ? {
-      lat: center.latitude,
-      lng: center.longitude
-    } : undefined,
-    zoom: zoom,
-    options: {
-      gestureHandling,
-      disableDefaultUI: !showControls,
-      mapTypeControl: false,
-      streetViewControl: false,
-      fullscreenControl: false,
-      rotateControl: false,
-      clickableIcons: false,
-      // https://developers.google.com/maps/documentation/javascript/reference/map#MapTypeStyle
-      styles: mapOptionStyles
-    },
-    onDragEnd: () => {
-      if (ref && ref.current && onRegionChange) {
-        onRegionChange(ref.current.getBounds(), ref.current.getCenter());
+
+  const onLoad = useCallback(
+    (map) => {
+      ref.current = map;
+      if (map && bounds) {
+        map.fitBounds({
+          south: bounds.south,
+          west: bounds.west,
+          north: bounds.north,
+          east: bounds.east,
+        });
       }
-    },
-    onZoomChanged: () => {
-      if (ref && ref.current && onZoom) {
-        onZoom(ref.current.getZoom());
+      if (mapRef) {
+        mapRef(map);
       }
     },
-    onTilesLoaded: () => {
-      if (onTilesLoaded) {
-        onTilesLoaded();
+    [bounds, mapRef],
+  );
+
+  return (
+    <GoogleMap
+      onLoad={onLoad}
+      center={
+        center
+          ? {
+              lat: center.latitude,
+              lng: center.longitude,
+            }
+          : undefined
       }
-    },
-    mapContainerClassName: mapContainerClassName
-  }, children);
+      zoom={zoom}
+      options={{
+        gestureHandling,
+        disableDefaultUI: !showControls,
+        mapTypeControl: false,
+        streetViewControl: false,
+        fullscreenControl: false,
+        rotateControl: false,
+        clickableIcons: false,
+        // https://developers.google.com/maps/documentation/javascript/reference/map#MapTypeStyle
+        styles: mapOptionStyles,
+      }}
+      onDragEnd={() => {
+        if (ref && ref.current && onRegionChange) {
+          onRegionChange(ref.current.getBounds(), ref.current.getCenter());
+        }
+      }}
+      onZoomChanged={() => {
+        if (ref && ref.current && onZoom) {
+          onZoom(ref.current.getZoom());
+        }
+      }}
+      onTilesLoaded={() => {
+        if (onTilesLoaded) {
+          onTilesLoaded();
+        }
+      }}
+      mapContainerClassName={mapContainerClassName}
+    >
+      {children}
+    </GoogleMap>
+  );
 };
+
 BpkMap.propTypes = {
-  bounds: _propTypes.default.shape({
-    south: _propTypes.default.number.isRequired,
-    west: _propTypes.default.number.isRequired,
-    north: _propTypes.default.number.isRequired,
-    east: _propTypes.default.number.isRequired
+  bounds: PropTypes.shape({
+    south: PropTypes.number.isRequired,
+    west: PropTypes.number.isRequired,
+    north: PropTypes.number.isRequired,
+    east: PropTypes.number.isRequired,
   }),
-  center: _commonTypes.LatLongPropType,
-  children: _propTypes.default.node,
-  greedyGestureHandling: _propTypes.default.bool,
-  mapRef: _propTypes.default.func,
-  className: _propTypes.default.string,
-  onRegionChange: _propTypes.default.func,
-  onZoom: _propTypes.default.func,
-  panEnabled: _propTypes.default.bool,
-  showControls: _propTypes.default.bool,
-  onTilesLoaded: _propTypes.default.func,
-  zoom: _propTypes.default.number,
-  mapOptionStyles: _propTypes.default.arrayOf(_propTypes.default.shape({
-    featureType: _propTypes.default.string,
-    elementType: _propTypes.default.string,
-    // eslint-disable-next-line react/forbid-prop-types
-    stylers: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
-  }))
+  center: LatLongPropType,
+  children: PropTypes.node,
+  greedyGestureHandling: PropTypes.bool,
+  mapRef: PropTypes.func,
+  className: PropTypes.string,
+  onRegionChange: PropTypes.func,
+  onZoom: PropTypes.func,
+  panEnabled: PropTypes.bool,
+  showControls: PropTypes.bool,
+  onTilesLoaded: PropTypes.func,
+  zoom: PropTypes.number,
+  mapOptionStyles: PropTypes.arrayOf(
+    PropTypes.shape({
+      featureType: PropTypes.string,
+      elementType: PropTypes.string,
+      // eslint-disable-next-line react/forbid-prop-types
+      stylers: PropTypes.arrayOf(PropTypes.object).isRequired,
+    }),
+  ),
 };
+
 BpkMap.defaultProps = {
   bounds: null,
   center: undefined,
@@ -147,7 +203,7 @@ BpkMap.defaultProps = {
   showControls: true,
   zoom: 15,
   className: null,
-  mapOptionStyles: null
+  mapOptionStyles: null,
 };
-var _default = BpkMap;
-exports.default = _default;
+
+export default BpkMap;

package/bpk-component-map/src/{BpkMap.module.css → BpkMap.module.scss}

@@ -1,18 +1,21 @@
 /*
  * Backpack - Skyscanner's Design System
- * 
+ *
  * Copyright 2016 Skyscanner Ltd
- * 
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *   http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
-*/
-.bpk-map{height:100%}
+ */
+
+.bpk-map {
+  height: 100%;
+}

package/bpk-component-map/src/BpkOverlayView.js

@@ -1,39 +1,50 @@
-"use strict";
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _api = require("@react-google-maps/api");
-var _commonTypes = require("./common-types");
-const _excluded = ["children", "position"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-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; }
-const BpkOverlayView = props => {
-  const {
-      children,
-      position
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
+/* @flow strict */
+
+import React, { type Node } from 'react';
+import PropTypes from 'prop-types';
+import { OverlayView } from '@react-google-maps/api';
+
+import { LatLongPropType, type LatLong } from './common-types';
+
+type Props = {
+  children: Node,
+  position: LatLong,
+};
+
+const BpkOverlayView = (props: Props) => {
+  const { children, position, ...rest } = props;
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement(_api.OverlayView, _extends({
-      mapPaneName: "overlayMouseTarget",
-      position: {
-        lat: position.latitude,
-        lng: position.longitude
-      }
-    }, rest), children)
+    <OverlayView
+      mapPaneName="overlayMouseTarget"
+      position={{ lat: position.latitude, lng: position.longitude }}
+      {...rest}
+    >
+      {children}
+    </OverlayView>
   );
 };
 BpkOverlayView.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  position: _commonTypes.LatLongPropType.isRequired
+  children: PropTypes.node.isRequired,
+  position: LatLongPropType.isRequired,
 };
-var _default = BpkOverlayView;
-exports.default = _default;
+
+export default BpkOverlayView;