@skyscanner/backpack-web 25.6.0 → 25.7.0-beta

package/bpk-component-barchart/src/BpkChartAxis.js

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _RTLtransforms = require("./RTLtransforms");
-var _orientation = require("./orientation");
-var _utils = require("./utils");
-var _BpkChartAxisModule = _interopRequireDefault(require("./BpkChartAxis.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["height", "label", "margin", "numTicks", "orientation", "scale", "tickEvery", "tickOffset", "tickValue", "width"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -30,128 +15,172 @@ const _excluded = ["height", "label", "margin", "numTicks", "orientation", "scal
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 _objectSpread(target) { for (var i = 1; i < arguments.length; 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; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-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)(_BpkChartAxisModule.default);
-const spacing = (0, _utils.remToPx)(_base.spacingXs);
-const lineHeight = (0, _utils.remToPx)(_base.lineHeightSm);
-const getAxisConfig = ({
-  height,
-  margin,
-  orientation,
-  scale,
-  width
-}) => {
-  const position = (scale.bandwidth ? _utils.center : _utils.identity)(scale.copy());
-  if (orientation === _orientation.ORIENTATION_X) {
+
+/* @flow strict */
+
+import type { Node } from 'react';
+import PropTypes from 'prop-types';
+import {
+  spacingXs,
+  lineHeightSm,
+} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import { rtlConditionalValue } from './RTLtransforms';
+import { ORIENTATION_X, ORIENTATION_Y } from './orientation';
+import { identity, center, remToPx } from './utils';
+import STYLES from './BpkChartAxis.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const spacing = remToPx(spacingXs);
+const lineHeight = remToPx(lineHeightSm);
+
+const getAxisConfig = ({ height, margin, orientation, scale, width }) => {
+  const position = (scale.bandwidth ? center : identity)(scale.copy());
+
+  if (orientation === ORIENTATION_X) {
     return {
       containerProps: {
         textAnchor: 'middle',
-        transform: `translate(0, ${height - margin.bottom - margin.top})`
+        transform: `translate(0, ${height - margin.bottom - margin.top})`,
       },
       textProps: {
         y: lineHeight,
-        x: 0
+        x: 0,
       },
       labelProps: {
         x: (width - margin.left - margin.right) / 2,
-        y: margin.bottom - spacing
+        y: margin.bottom - spacing,
       },
-      tickPosition: tick => [position(tick), 0]
+      tickPosition: (tick) => [position(tick), 0],
     };
   }
-  const containerTranslateX = (0, _RTLtransforms.rtlConditionalValue)(0, width - margin.right);
-  const labelTranslateX = (0, _RTLtransforms.rtlConditionalValue)(lineHeight - margin.left, margin.right - spacing);
+
+  const containerTranslateX = rtlConditionalValue(0, width - margin.right);
+  const labelTranslateX = rtlConditionalValue(
+    lineHeight - margin.left,
+    margin.right - spacing,
+  );
   const labelTranslateY = (height - margin.top - margin.bottom) / 2;
+
   return {
     containerProps: {
       textAnchor: 'end',
-      transform: `translate(${containerTranslateX}, 0)`
+      transform: `translate(${containerTranslateX}, 0)`,
     },
     textProps: {
       y: 0,
-      x: (0, _RTLtransforms.rtlConditionalValue)(-1, 1) * spacing,
-      dy: '0.32em'
+      x: rtlConditionalValue(-1, 1) * spacing,
+      dy: '0.32em',
     },
     labelProps: {
-      transform: `translate(${labelTranslateX}, ${labelTranslateY}) rotate(-90)`
+      transform: `translate(${labelTranslateX}, ${labelTranslateY}) rotate(-90)`,
     },
-    tickPosition: tick => [0, position(tick)]
+    tickPosition: (tick) => [0, position(tick)],
   };
 };
-const BpkChartAxis = props => {
-  const {
-      height,
-      label,
-      margin,
-      numTicks,
-      orientation,
-      scale,
-      tickEvery,
-      tickOffset,
-      tickValue,
-      width
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
+
+type Props = {
+  height: number,
+  width: number,
+  margin: {
+    top: number,
+    bottom: number,
+    left: number,
+    right: number,
+  },
+  scale: Object,
+  label: ?Node,
+  orientation: string,
+  tickValue: (any, any) => any,
+  numTicks: ?number,
+  tickOffset: number,
+  tickEvery: number,
+};
+
+const BpkChartAxis = (props: Props) => {
   const {
-    containerProps,
-    labelProps,
-    textProps,
-    tickPosition
-  } = getAxisConfig(props);
-  const ticks = scale.ticks ? scale.ticks(numTicks) : scale.domain().filter((tick, i) => (i - tickOffset) % tickEvery === 0);
+    height,
+    label,
+    margin,
+    numTicks,
+    orientation,
+    scale,
+    tickEvery,
+    tickOffset,
+    tickValue,
+    width,
+    ...rest
+  } = props;
+
+  const { containerProps, labelProps, textProps, tickPosition } =
+    getAxisConfig(props);
+
+  const ticks = scale.ticks
+    ? scale.ticks(numTicks)
+    : scale.domain().filter((tick, i) => (i - tickOffset) % tickEvery === 0);
+
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    (0, _jsxRuntime.jsxs)("g", _objectSpread(_objectSpread(_objectSpread({
-      className: getClassName('bpk-chart__axis'),
-      "aria-hidden": "true"
-    }, containerProps), rest), {}, {
-      children: [ticks.map((tick, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-        transform: `translate(${tickPosition(tick).join(', ')})`,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("text", _objectSpread(_objectSpread({
-          className: getClassName('bpk-chart__axis-tick-text')
-        }, textProps), {}, {
-          children: tickValue(tick, i)
-        }))
-      }, `${orientation}axis${i.toString()}`)), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("text", _objectSpread(_objectSpread({
-        className: getClassName('bpk-chart__axis-label'),
-        textAnchor: "middle"
-      }, labelProps), {}, {
-        children: label
-      }))]
-    }))
+    <g
+      className={getClassName('bpk-chart__axis')}
+      aria-hidden="true"
+      {...containerProps}
+      {...rest}
+    >
+      {ticks.map((tick, i) => (
+        <g
+          transform={`translate(${tickPosition(tick).join(', ')})`}
+          key={`${orientation}axis${i.toString()}`}
+        >
+          <text
+            className={getClassName('bpk-chart__axis-tick-text')}
+            {...textProps}
+          >
+            {tickValue(tick, i)}
+          </text>
+        </g>
+      ))}
+      {label && (
+        <text
+          className={getClassName('bpk-chart__axis-label')}
+          textAnchor="middle"
+          {...labelProps}
+        >
+          {label}
+        </text>
+      )}
+    </g>
   );
 };
+
 BpkChartAxis.propTypes = {
-  height: _propTypes.default.number.isRequired,
-  width: _propTypes.default.number.isRequired,
-  margin: _propTypes.default.shape({
-    top: _propTypes.default.number,
-    bottom: _propTypes.default.number,
-    left: _propTypes.default.number,
-    right: _propTypes.default.number
+  height: PropTypes.number.isRequired,
+  width: PropTypes.number.isRequired,
+  margin: PropTypes.shape({
+    top: PropTypes.number,
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
   }).isRequired,
-  scale: _propTypes.default.func.isRequired,
-  label: _propTypes.default.node,
-  orientation: _propTypes.default.oneOf([_orientation.ORIENTATION_X, _orientation.ORIENTATION_Y]).isRequired,
-  tickValue: _propTypes.default.func,
-  numTicks: _propTypes.default.number,
-  tickOffset: _propTypes.default.number,
-  tickEvery: _propTypes.default.number
+  scale: PropTypes.func.isRequired,
+  label: PropTypes.node,
+
+  orientation: PropTypes.oneOf([ORIENTATION_X, ORIENTATION_Y]).isRequired,
+  tickValue: PropTypes.func,
+  numTicks: PropTypes.number,
+  tickOffset: PropTypes.number,
+  tickEvery: PropTypes.number,
 };
+
 BpkChartAxis.defaultProps = {
   tickOffset: 0,
   tickEvery: 1,
-  tickValue: _utils.identity,
+  tickValue: identity,
   numTicks: null,
-  label: null
+  label: null,
 };
-var _default = BpkChartAxis;
-exports.default = _default;
+
+export default BpkChartAxis;

package/bpk-component-barchart/src/BpkChartAxis.module.scss

@@ -0,0 +1,37 @@
+/*
+ * 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-chart {
+  &__axis-tick {
+    &-text {
+      fill: $bpk-text-secondary-day;
+
+      @include bpk-text;
+      @include bpk-caption;
+    }
+  }
+
+  &__axis-label {
+    fill: $bpk-text-secondary-day;
+
+    @include bpk-text;
+    @include bpk-caption;
+  }
+}

package/bpk-component-barchart/src/BpkChartDataTable.js

@@ -1,15 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _customPropTypes = _interopRequireDefault(require("./customPropTypes"));
-var _BpkChartDataTableModule = _interopRequireDefault(require("./BpkChartDataTable.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -26,50 +14,63 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * 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)(_BpkChartDataTableModule.default);
-const BpkChartDataTable = props => {
-  const {
-    data,
-    xAxisLabel,
-    xScaleDataKey,
-    yAxisLabel,
-    yScaleDataKey
-  } = props;
+ */
+
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import dataProp from './customPropTypes';
+import STYLES from './BpkChartDataTable.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  data: Array<any>, // We pass any here as the array can contain free form data depending on the user
+  xScaleDataKey: string,
+  yScaleDataKey: string,
+  xAxisLabel: string,
+  yAxisLabel: string,
+};
+
+const BpkChartDataTable = (props: Props) => {
+  const { data, xAxisLabel, xScaleDataKey, yAxisLabel, yScaleDataKey } = props;
   const rows = data.map((point, i) => {
     const key = `chart-data-table-row-${i}`;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-        children: point[xScaleDataKey]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-        children: point[yScaleDataKey]
-      })]
-    }, key);
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
-    className: getClassName('bpk-chart-data-table'),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
-          children: xAxisLabel
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
-          children: yAxisLabel
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
-      children: rows
-    })]
+
+    return (
+      <tr key={key}>
+        <td>{point[xScaleDataKey]}</td>
+        <td>{point[yScaleDataKey]}</td>
+      </tr>
+    );
   });
+
+  return (
+    <table className={getClassName('bpk-chart-data-table')}>
+      <thead>
+        <tr>
+          <th>{xAxisLabel}</th>
+          <th>{yAxisLabel}</th>
+        </tr>
+      </thead>
+      <tbody>{rows}</tbody>
+    </table>
+  );
 };
+
 BpkChartDataTable.propTypes = {
-  data: _customPropTypes.default,
-  // This is actually required and will fail if not present
-  xScaleDataKey: _propTypes.default.string.isRequired,
-  yScaleDataKey: _propTypes.default.string.isRequired,
-  xAxisLabel: _propTypes.default.string.isRequired,
-  yAxisLabel: _propTypes.default.string.isRequired
+  data: dataProp, // This is actually required and will fail if not present
+  xScaleDataKey: PropTypes.string.isRequired,
+  yScaleDataKey: PropTypes.string.isRequired,
+  xAxisLabel: PropTypes.string.isRequired,
+  yAxisLabel: PropTypes.string.isRequired,
 };
+
 BpkChartDataTable.defaultProps = {
-  data: null
+  data: null,
 };
-var _default = BpkChartDataTable;
-exports.default = _default;
+
+export default BpkChartDataTable;

package/bpk-component-barchart/src/BpkChartDataTable.module.scss

@@ -0,0 +1,28 @@
+/*
+ * 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-chart-data-table {
+  @include bpk-visually-hidden;
+
+  thead,
+  tbody {
+    @include bpk-visually-hidden;
+  }
+}

package/bpk-component-barchart/src/BpkChartGridLines.js

@@ -1,16 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _orientation = require("./orientation");
-var _utils = require("./utils");
-var _BpkChartGridLinesModule = _interopRequireDefault(require("./BpkChartGridLines.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["height", "margin", "numTicks", "orientation", "scale", "tickEvery", "tickOffset", "width"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -28,71 +15,104 @@ const _excluded = ["height", "margin", "numTicks", "orientation", "scale", "tick
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 _objectSpread(target) { for (var i = 1; i < arguments.length; 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; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-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)(_BpkChartGridLinesModule.default);
-const BpkChartGridLines = props => {
+
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import { ORIENTATION_X, ORIENTATION_Y } from './orientation';
+import { identity, center } from './utils';
+import STYLES from './BpkChartGridLines.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  width: number,
+  height: number,
+  margin: {
+    top: number,
+    bottom: number,
+    left: number,
+    right: number,
+  },
+  scale: Object,
+  orientation: string,
+  numTicks: ?number,
+  tickOffset: number,
+  tickEvery: number,
+};
+
+const BpkChartGridLines = (props: Props) => {
   const {
-      height,
-      margin,
-      numTicks,
-      orientation,
-      scale,
-      tickEvery,
-      tickOffset,
-      width
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
-  const ticks = scale.ticks ? scale.ticks(numTicks) : scale.domain().filter((tick, i) => (i - tickOffset) % tickEvery === 0);
-  const position = (scale.bandwidth ? _utils.center : _utils.identity)(scale.copy());
-  const lineProps = tick => {
+    height,
+    margin,
+    numTicks,
+    orientation,
+    scale,
+    tickEvery,
+    tickOffset,
+    width,
+    ...rest
+  } = props;
+
+  const ticks = scale.ticks
+    ? scale.ticks(numTicks)
+    : scale.domain().filter((tick, i) => (i - tickOffset) % tickEvery === 0);
+  const position = (scale.bandwidth ? center : identity)(scale.copy());
+
+  const lineProps = (tick) => {
     const value = position(tick);
-    return orientation === _orientation.ORIENTATION_X ? {
-      x1: value,
-      x2: value,
-      y2: height - margin.top - margin.bottom
-    } : {
-      x2: width - margin.left - margin.right,
-      y1: value,
-      y2: value
-    };
+    return orientation === ORIENTATION_X
+      ? {
+          x1: value,
+          x2: value,
+          y2: height - margin.top - margin.bottom,
+        }
+      : {
+          x2: width - margin.left - margin.right,
+          y1: value,
+          y2: value,
+        };
   };
-  const toLine = (tick, i) =>
-  /*#__PURE__*/
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  (0, _jsxRuntime.jsx)("line", _objectSpread(_objectSpread({
-    className: getClassName('bpk-chart__grid-line')
-  }, lineProps(tick)), rest), `${orientation}gridline${i.toString()}`);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-    className: getClassName('bpk-chart__grid-lines'),
-    children: ticks.map(toLine)
-  });
+
+  const toLine = (tick, i) => (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    <line
+      className={getClassName('bpk-chart__grid-line')}
+      key={`${orientation}gridline${i.toString()}`}
+      {...lineProps(tick)}
+      {...rest}
+    />
+  );
+
+  return (
+    <g className={getClassName('bpk-chart__grid-lines')}>{ticks.map(toLine)}</g>
+  );
 };
+
 BpkChartGridLines.propTypes = {
-  width: _propTypes.default.number.isRequired,
-  height: _propTypes.default.number.isRequired,
-  margin: _propTypes.default.shape({
-    top: _propTypes.default.number,
-    bottom: _propTypes.default.number,
-    left: _propTypes.default.number,
-    right: _propTypes.default.number
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  margin: PropTypes.shape({
+    top: PropTypes.number,
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
   }).isRequired,
-  scale: _propTypes.default.func.isRequired,
-  orientation: _propTypes.default.oneOf([_orientation.ORIENTATION_X, _orientation.ORIENTATION_Y]).isRequired,
-  numTicks: _propTypes.default.number,
-  tickOffset: _propTypes.default.number,
-  tickEvery: _propTypes.default.number
+
+  scale: PropTypes.func.isRequired,
+  orientation: PropTypes.oneOf([ORIENTATION_X, ORIENTATION_Y]).isRequired,
+  numTicks: PropTypes.number,
+  tickOffset: PropTypes.number,
+  tickEvery: PropTypes.number,
 };
+
 BpkChartGridLines.defaultProps = {
   numTicks: null,
   tickOffset: 0,
-  tickEvery: 1
+  tickEvery: 1,
 };
-var _default = BpkChartGridLines;
-exports.default = _default;
+
+export default BpkChartGridLines;