@skyscanner/backpack-web 25.2.0 → 25.4.0-alpha

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

@@ -1,16 +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 _utils = require("./utils");
-var _BpkBarchartBarModule = _interopRequireDefault(require("./BpkBarchartBar.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "height", "label", "onClick", "onFocus", "onHover", "outlier", "padding", "selected", "width", "x", "y"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -28,91 +15,131 @@ const _excluded = ["className", "height", "label", "onClick", "onFocus", "onHove
  * 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)(_BpkBarchartBarModule.default);
+
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import { remToPx } from './utils';
+import STYLES from './BpkBarchartBar.module.scss';
+
+const getClassName = cssModules(STYLES);
+
 const KEYCODES = {
   ENTER: 13,
-  SPACEBAR: 32
+  SPACEBAR: 32,
 };
-const handleKeyboardEvent = callback => event => {
+
+const handleKeyboardEvent = (callback) => (event) => {
   if (event.keyCode === KEYCODES.ENTER || event.keyCode === KEYCODES.SPACEBAR) {
     event.preventDefault();
     callback(event);
   }
 };
-const borderRadius = (0, _utils.remToPx)(_base.borderRadiusXs);
-const BpkBarchartBar = props => {
+
+const borderRadius = remToPx(borderRadiusXs);
+
+type Props = {
+  height: number,
+  label: string,
+  width: number,
+  x: number,
+  y: number,
+  className: ?string,
+  onClick: ?(?any) => mixed,
+  onHover: ?() => mixed,
+  onFocus: ?() => mixed,
+  outlier: boolean,
+  padding: number,
+  selected: boolean,
+};
+
+const BpkBarchartBar = (props: Props) => {
   const {
-      className,
-      height,
-      label,
-      onClick,
-      onFocus,
-      onHover,
-      outlier,
-      padding,
-      selected,
-      width,
-      x,
-      y
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
-  const classNames = getClassName('bpk-barchart-bar', className, selected && 'bpk-barchart-bar--selected', (onClick || onHover) && 'bpk-barchart-bar--interactive');
-  const rectClassNames = getClassName('bpk-barchart-bar__rect', outlier && 'bpk-barchart-bar__rect--outlier');
-  const tappableAreaClassNames = getClassName('bpk-barchart-bar__tappable-area');
+    className,
+    height,
+    label,
+    onClick,
+    onFocus,
+    onHover,
+    outlier,
+    padding,
+    selected,
+    width,
+    x,
+    y,
+    ...rest
+  } = props;
+
+  const classNames = getClassName(
+    'bpk-barchart-bar',
+    className,
+    selected && 'bpk-barchart-bar--selected',
+    (onClick || onHover) && 'bpk-barchart-bar--interactive',
+  );
+  const rectClassNames = getClassName(
+    'bpk-barchart-bar__rect',
+    outlier && 'bpk-barchart-bar__rect--outlier',
+  );
+  const tappableAreaClassNames = getClassName(
+    'bpk-barchart-bar__tappable-area',
+  );
+
   const isAriaPressed = !!(onClick && selected);
   const rectPadding = width * (padding / 2);
   const rectWidth = width * (1 - padding);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-    className: classNames,
-    transform: `translate(${x}, ${y})`,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", _objectSpread({
-      className: rectClassNames,
-      x: rectPadding,
-      y: 0,
-      width: rectWidth,
-      height: height,
-      rx: borderRadius,
-      ry: borderRadius
-    }, rest)), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-      className: tappableAreaClassNames,
-      x: 0,
-      y: 0,
-      width: width,
-      height: height,
-      onClick: onClick || undefined,
-      onMouseOver: onHover || undefined,
-      onFocus: onFocus || undefined,
-      onKeyDown: onClick ? handleKeyboardEvent(onClick) : undefined,
-      tabIndex: onClick ? 0 : undefined,
-      role: onClick ? 'button' : 'graphics-symbol',
-      "aria-roledescription": onClick ? undefined : 'bar',
-      "aria-pressed": onClick ? isAriaPressed : undefined,
-      "aria-label": label
-    })]
-  });
+
+  return (
+    <g className={classNames} transform={`translate(${x}, ${y})`}>
+      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
+      <rect
+        className={rectClassNames}
+        x={rectPadding}
+        y={0}
+        width={rectWidth}
+        height={height}
+        rx={borderRadius}
+        ry={borderRadius}
+        {...rest}
+      />
+      <rect
+        className={tappableAreaClassNames}
+        x={0}
+        y={0}
+        width={width}
+        height={height}
+        onClick={onClick || undefined}
+        onMouseOver={onHover || undefined}
+        onFocus={onFocus || undefined}
+        onKeyDown={onClick ? handleKeyboardEvent(onClick) : undefined}
+        tabIndex={onClick ? 0 : undefined}
+        role={onClick ? 'button' : 'graphics-symbol'}
+        aria-roledescription={onClick ? undefined : 'bar'}
+        aria-pressed={onClick ? isAriaPressed : undefined}
+        aria-label={label}
+      />
+    </g>
+  );
 };
+
 BpkBarchartBar.propTypes = {
-  height: _propTypes.default.number.isRequired,
-  label: _propTypes.default.string.isRequired,
-  width: _propTypes.default.number.isRequired,
-  x: _propTypes.default.number.isRequired,
-  y: _propTypes.default.number.isRequired,
-  className: _propTypes.default.string,
-  onClick: _propTypes.default.func,
-  onHover: _propTypes.default.func,
-  onFocus: _propTypes.default.func,
-  outlier: _propTypes.default.bool,
-  padding: _propTypes.default.number,
-  selected: _propTypes.default.bool
+  height: PropTypes.number.isRequired,
+  label: PropTypes.string.isRequired,
+  width: PropTypes.number.isRequired,
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+  className: PropTypes.string,
+  onClick: PropTypes.func,
+  onHover: PropTypes.func,
+  onFocus: PropTypes.func,
+  outlier: PropTypes.bool,
+  padding: PropTypes.number,
+  selected: PropTypes.bool,
 };
+
 BpkBarchartBar.defaultProps = {
   className: null,
   onClick: null,
@@ -120,7 +147,7 @@ BpkBarchartBar.defaultProps = {
   onFocus: null,
   outlier: false,
   padding: 0,
-  selected: false
+  selected: false,
 };
-var _default = BpkBarchartBar;
-exports.default = _default;
+
+export default BpkBarchartBar;

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

@@ -0,0 +1,70 @@
+/*
+ * 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-barchart-bar {
+  @include bpk-themeable-property(
+    fill,
+    --bpk-barchart-bar-background-color,
+    $bpk-line-day
+  );
+
+  &--interactive:not(.bpk-barchart-bar--selected) {
+    cursor: pointer;
+
+    @include bpk-hover {
+      @include bpk-themeable-property(
+        fill,
+        --bpk-barchart-bar-hover-background-color,
+        $bpk-core-primary-day
+      );
+    }
+
+    &:active {
+      @include bpk-themeable-property(
+        fill,
+        --bpk-barchart-bar-active-background-color,
+        $bpk-core-accent-day
+      );
+    }
+  }
+
+  &--selected {
+    @include bpk-themeable-property(
+      fill,
+      --bpk-barchart-bar-selected-background-color,
+      $bpk-core-accent-day
+    );
+  }
+
+  &__rect {
+    fill: inherit;
+    shape-rendering: auto;
+
+    &--outlier {
+      // We expect this due as this is a dyanmically applied def in BpkBarchartDefs.js
+      /* stylelint-disable-next-line function-url-quotes */
+      mask: url(#bpk-barchart__def-mask);
+    }
+  }
+
+  &__tappable-area {
+    fill: transparent;
+  }
+}

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

@@ -1,16 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _d3Scale = require("d3-scale");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
-var _BpkBarchartBar = _interopRequireDefault(require("./BpkBarchartBar"));
-var _utils = require("./utils");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["BarComponent", "data", "getBarLabel", "getBarSelection", "height", "innerPadding", "margin", "maxYValue", "onBarClick", "onBarFocus", "onBarHover", "outerPadding", "xScale", "xScaleDataKey", "yScale", "yScaleDataKey"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -28,130 +15,150 @@ const _excluded = ["BarComponent", "data", "getBarLabel", "getBarSelection", "he
  * 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 borderRadius = (0, _utils.remToPx)(_base.borderRadiusXs);
-const getYPos = (point, {
-  maxYValue,
-  yScale,
-  yScaleDataKey
-}) => yScale(Math.min(point[yScaleDataKey], maxYValue));
-const getBarHeight = (point, {
-  height,
-  margin,
-  maxYValue,
-  yScale,
-  yScaleDataKey
-}) => {
-  const barHeight = height - margin.top - margin.bottom - getYPos(point, {
-    yScale,
-    yScaleDataKey,
-    maxYValue
-  });
+
+/* @flow strict */
+
+import { scaleBand, scaleLinear } from 'd3-scale';
+import PropTypes from 'prop-types';
+import { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+import BpkBarchartBar from './BpkBarchartBar';
+import { remToPx } from './utils';
+
+const borderRadius = remToPx(borderRadiusXs);
+
+const getYPos = (point, { maxYValue, yScale, yScaleDataKey }) =>
+  yScale(Math.min(point[yScaleDataKey], maxYValue));
+
+const getBarHeight = (
+  point,
+  { height, margin, maxYValue, yScale, yScaleDataKey },
+) => {
+  const barHeight =
+    height -
+    margin.top -
+    margin.bottom -
+    getYPos(point, { yScale, yScaleDataKey, maxYValue });
   return Math.max(barHeight, 0);
 };
-const isOutlier = (point, {
-  maxYValue,
-  yScaleDataKey
-}) => point[yScaleDataKey] > maxYValue;
-const BpkBarchartBars = props => {
+
+const isOutlier = (point, { maxYValue, yScaleDataKey }) =>
+  point[yScaleDataKey] > maxYValue;
+
+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,
+  height: number,
+  xScale: typeof scaleBand,
+  yScale: typeof scaleLinear,
+  maxYValue: number,
+  margin: {
+    top: number,
+    bottom: number,
+    left: number,
+    right: number,
+  },
+  getBarLabel: (any, string, string) => mixed,
+  BarComponent: typeof BpkBarchartBar,
+  getBarSelection: (any: any) => mixed,
+  outerPadding: number,
+  innerPadding: number,
+  onBarClick: ?(e: SyntheticEvent<any>, Object) => mixed,
+  onBarHover: ?(e: SyntheticEvent<any>, Object) => mixed,
+  onBarFocus: ?(e: SyntheticEvent<any>, Object) => mixed,
+};
+
+const BpkBarchartBars = (props: Props) => {
   const {
-      BarComponent,
-      data,
-      getBarLabel,
-      getBarSelection,
-      height,
-      innerPadding,
-      margin,
-      maxYValue,
-      onBarClick,
-      onBarFocus,
-      onBarHover,
-      outerPadding,
-      xScale,
-      xScaleDataKey,
-      yScale,
-      yScaleDataKey
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
+    BarComponent,
+    data,
+    getBarLabel,
+    getBarSelection,
+    height,
+    innerPadding,
+    margin,
+    maxYValue,
+    onBarClick,
+    onBarFocus,
+    onBarHover,
+    outerPadding,
+    xScale,
+    xScaleDataKey,
+    yScale,
+    yScaleDataKey,
+    ...rest
+  } = props;
+
   xScale.paddingOuter(outerPadding);
   // `innerPadding` is not set on the scale, but instead passed to the BarComponent
   // This allows us to have full-width tappable areas, but with visibly padded bars.
   xScale.paddingInner(0);
+
   const barWidth = xScale.bandwidth();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-    children: data.map((point, i) => {
-      const x = xScale(point[xScaleDataKey]);
-      const y = getYPos(point, {
-        yScale,
-        yScaleDataKey,
-        maxYValue
-      });
-      const outlier = isOutlier(point, props);
-      const barHeight = getBarHeight(point, props);
-      return (
-        /*#__PURE__*/
-        // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-        (0, _jsxRuntime.jsx)(BarComponent, _objectSpread({
-          x: x,
-          y: outlier ? y - borderRadius : y,
-          width: barWidth,
-          height: outlier ? barHeight + borderRadius : barHeight,
-          label: getBarLabel(point, xScaleDataKey, yScaleDataKey),
-          outlier: isOutlier(point, props),
-          onClick: onBarClick ? e => onBarClick(e, {
-            point
-          }) : null,
-          onHover: onBarHover ? e => onBarHover(e, {
-            point
-          }) : null,
-          onFocus: onBarFocus ? e => onBarFocus(e, {
-            point
-          }) : null,
-          selected: getBarSelection(point),
-          padding: innerPadding
-        }, rest), `bar${i.toString()}`)
-      );
-    })
-  });
+
+  return (
+    <g>
+      {data.map((point, i) => {
+        const x = xScale(point[xScaleDataKey]);
+        const y = getYPos(point, { yScale, yScaleDataKey, maxYValue });
+        const outlier = isOutlier(point, props);
+        const barHeight = getBarHeight(point, props);
+        return (
+          // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+          <BarComponent
+            key={`bar${i.toString()}`}
+            x={x}
+            y={outlier ? y - borderRadius : y}
+            width={barWidth}
+            height={outlier ? barHeight + borderRadius : barHeight}
+            label={getBarLabel(point, xScaleDataKey, yScaleDataKey)}
+            outlier={isOutlier(point, props)}
+            onClick={onBarClick ? (e) => onBarClick(e, { point }) : null}
+            onHover={onBarHover ? (e) => onBarHover(e, { point }) : null}
+            onFocus={onBarFocus ? (e) => onBarFocus(e, { point }) : null}
+            selected={getBarSelection(point)}
+            padding={innerPadding}
+            {...rest}
+          />
+        );
+      })}
+    </g>
+  );
 };
+
 BpkBarchartBars.propTypes = {
-  data: _propTypes.default.array.isRequired,
-  // eslint-disable-line react/forbid-prop-types
-  xScaleDataKey: _propTypes.default.string.isRequired,
-  yScaleDataKey: _propTypes.default.string.isRequired,
-  height: _propTypes.default.number.isRequired,
-  xScale: _propTypes.default.func.isRequired,
-  yScale: _propTypes.default.func.isRequired,
-  maxYValue: _propTypes.default.number.isRequired,
-  margin: _propTypes.default.shape({
-    top: _propTypes.default.number,
-    bottom: _propTypes.default.number,
-    left: _propTypes.default.number,
-    right: _propTypes.default.number
+  data: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  xScaleDataKey: PropTypes.string.isRequired,
+  yScaleDataKey: PropTypes.string.isRequired,
+  height: PropTypes.number.isRequired,
+  xScale: PropTypes.func.isRequired,
+  yScale: PropTypes.func.isRequired,
+  maxYValue: PropTypes.number.isRequired,
+  margin: PropTypes.shape({
+    top: PropTypes.number,
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
   }).isRequired,
-  getBarLabel: _propTypes.default.func.isRequired,
-  BarComponent: _propTypes.default.elementType.isRequired,
-  getBarSelection: _propTypes.default.func,
-  outerPadding: _propTypes.default.number,
-  innerPadding: _propTypes.default.number,
-  onBarClick: _propTypes.default.func,
-  onBarHover: _propTypes.default.func,
-  onBarFocus: _propTypes.default.func
+  getBarLabel: PropTypes.func.isRequired,
+  BarComponent: PropTypes.elementType.isRequired,
+
+  getBarSelection: PropTypes.func,
+  outerPadding: PropTypes.number,
+  innerPadding: PropTypes.number,
+  onBarClick: PropTypes.func,
+  onBarHover: PropTypes.func,
+  onBarFocus: PropTypes.func,
 };
+
 BpkBarchartBars.defaultProps = {
   outerPadding: 0.35,
   innerPadding: 0.35,
   onBarClick: null,
   onBarHover: null,
   onBarFocus: null,
-  getBarSelection: () => false
+  getBarSelection: () => false,
 };
-var _default = BpkBarchartBars;
-exports.default = _default;
+
+export default BpkBarchartBars;

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

@@ -1,15 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-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); }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -26,35 +14,33 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
  * 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 GRADIENT_ATTRIBUTES = {
+ */
+
+/* @flow strict */
+
+const GRADIENT_ATTRIBUTES = {
   x1: 0,
   y1: 0,
   x2: 0,
-  y2: 1
+  y2: 1,
 };
-const BpkBarchartDefs = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)("defs", {
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("linearGradient", _objectSpread(_objectSpread({
-    id: "bpk-barchart__def-gradient"
-  }, GRADIENT_ATTRIBUTES), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
-      offset: "0",
-      stopColor: "white",
-      stopOpacity: "0"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
-      offset: "10%",
-      stopColor: "white",
-      stopOpacity: "1"
-    })]
-  })), /*#__PURE__*/(0, _jsxRuntime.jsx)("mask", {
-    id: "bpk-barchart__def-mask",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-      x: "0",
-      y: "0",
-      width: "100%",
-      height: "100%",
-      fill: "url(#bpk-barchart__def-gradient)"
-    })
-  })]
-});
-var _default = BpkBarchartDefs;
-exports.default = _default;
+
+const BpkBarchartDefs = () => (
+  <defs>
+    <linearGradient id="bpk-barchart__def-gradient" {...GRADIENT_ATTRIBUTES}>
+      <stop offset="0" stopColor="white" stopOpacity="0" />
+      <stop offset="10%" stopColor="white" stopOpacity="1" />
+    </linearGradient>
+    <mask id="bpk-barchart__def-mask">
+      <rect
+        x="0"
+        y="0"
+        width="100%"
+        height="100%"
+        fill="url(#bpk-barchart__def-gradient)"
+      />
+    </mask>
+  </defs>
+);
+
+export default BpkBarchartDefs;