@skyscanner/backpack-web 6.0.0-alpha.2 → 7.0.0

package/bpk-animate-height/README.md

@@ -0,0 +1,55 @@
+# bpk-animate-height
+
+> Animate height using CSS transitions.
+
+Note: This was forked from https://github.com/Stanko/react-animate-height. We have added functionality to
+set the display property of the container to `display: none;` when the height is equal to 0.
+
+More information on the easing values can be found at [http://easings.net/](http://easings.net/)
+
+## Installation
+
+```sh
+npm install bpk-animate-height --save-dev
+```
+
+## Usage
+
+```js
+import AnimateHeight from 'bpk-animate-height';
+import React, { Component } from 'react';
+
+class AnimateHeightContainer extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      expanded: false,
+    };
+  }
+
+  render() {
+    return (
+      <AnimateHeight
+        height={this.state.expanded ? 'auto' : 0}
+        duration={200}
+      >
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
+        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
+        ridiculus mus.
+      </AnimateHeight>
+    );
+  }
+}
+```
+
+## Props
+
+| Property            | PropType         | Required | Default Value |
+| ------------------- | ---------------- | -------- | ------------- |
+| children            | node             | true     | -             |
+| duration            | number           | true     | -             |
+| height              | string or number | true     | -             |
+| easing              | string           | false    | 'ease'        |
+| onAnimationComplete | function         | false    | null          |
+| style               | object           | false    | {}            |

package/bpk-animate-height/index.js

@@ -1,14 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _AnimateHeight = _interopRequireDefault(require("./src/AnimateHeight"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -26,5 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = _AnimateHeight.default;
-exports.default = _default;
+
+import AnimateHeight from './src/AnimateHeight';
+
+export default AnimateHeight;

package/bpk-animate-height/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "bpk-animate-height",
+  "version": "4.1.12",
+  "description": "Animate height using CSS transitions.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
+  "dependencies": {
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-component-button": "^6.2.7"
+  }
+}

package/bpk-animate-height/src/AnimateHeight.js

@@ -1,55 +1,36 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-const _excluded = ["children", "duration", "easing", "onAnimationComplete", "style"];
-
-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; }
-
-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 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 _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; }
-
-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; }
+/*
+ * 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 PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 // IE11 doesn't support `Number.isNaN` so we must use the global.
 // When IE11 support drops we can migrate.
 // eslint-disable-next-line no-restricted-globals
-const isNumber = n => !isNaN(parseFloat(n)) && isFinite(n);
+const isNumber = (n) => !isNaN(parseFloat(n)) && isFinite(n);
 
-const isTransitionEndSupported = () => !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
+const isTransitionEndSupported = () =>
+  !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
 
-class AnimateHeight extends _react.Component {
+class AnimateHeight extends Component {
   constructor(props) {
     super(props);
 
-    _defineProperty(this, "onTransitionEnd", () => {
-      if (this.contentElement && this.props.height === 0) {
-        this.contentElement.style.display = 'none';
-      }
-
-      if (this.props.onAnimationComplete) {
-        this.props.onAnimationComplete();
-      }
-    });
-
     let height = 'auto';
     let overflow = 'visible';
 
@@ -60,7 +41,7 @@ class AnimateHeight extends _react.Component {
 
     this.state = {
       height,
-      overflow
+      overflow,
     };
   }
 
@@ -71,21 +52,22 @@ class AnimateHeight extends _react.Component {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      height
-    } = this.props; // Check if 'height' prop has changed
+    const { height } = this.props;
 
+    // Check if 'height' prop has changed
     if (this.contentElement && nextProps.height !== height) {
       // Cache content height
       this.contentElement.style.display = '';
       this.contentElement.style.overflow = this.props.transitionOverflow;
       const contentHeight = this.contentElement.offsetHeight;
       this.contentElement.style.overflow = '';
+
       let newHeight = null;
       let shouldSetTimeout = false;
       let timeoutHeight = null;
       let timeoutOverflow = this.props.transitionOverflow;
       let timeoutDuration = nextProps.duration;
+
       clearTimeout(this.timeoutID);
 
       if (isNumber(nextProps.height)) {
@@ -105,20 +87,21 @@ class AnimateHeight extends _react.Component {
         // set it explicitly to be able to use transition
         shouldSetTimeout = true;
         timeoutHeight = newHeight;
+
         newHeight = contentHeight;
         timeoutDuration = 50;
       }
 
       this.setState((state, props) => ({
         height: newHeight,
-        overflow: props.transitionOverflow
+        overflow: props.transitionOverflow,
       }));
 
       if (shouldSetTimeout) {
         this.timeoutID = setTimeout(() => {
           this.setState({
             height: timeoutHeight,
-            overflow: timeoutOverflow
+            overflow: timeoutOverflow,
           });
 
           if (!isTransitionEndSupported()) {
@@ -134,61 +117,68 @@ class AnimateHeight extends _react.Component {
     this.timeoutID = null;
   }
 
+  onTransitionEnd = () => {
+    if (this.contentElement && this.props.height === 0) {
+      this.contentElement.style.display = 'none';
+    }
+    if (this.props.onAnimationComplete) {
+      this.props.onAnimationComplete();
+    }
+  };
+
   render() {
-    const _this$props = this.props,
-          {
-      children,
-      duration,
-      easing,
-      onAnimationComplete,
-      style
-    } = _this$props,
-          rest = _objectWithoutProperties(_this$props, _excluded);
-
-    const {
-      height,
-      overflow
-    } = this.state;
+    const { children, duration, easing, onAnimationComplete, style, ...rest } =
+      this.props;
 
-    const componentStyle = _objectSpread(_objectSpread({}, style), {}, {
+    const { height, overflow } = this.state;
+
+    const componentStyle = {
+      ...style,
       height,
       overflow,
       WebkitTransition: `height ${duration}ms ${easing} `,
       MozTransition: `height ${duration}ms ${easing} `,
       OTransition: `height ${duration}ms ${easing} `,
       msTransition: `height ${duration}ms ${easing} `,
-      transition: `height ${duration}ms ${easing} `
-    });
+      transition: `height ${duration}ms ${easing} `,
+    };
 
     delete rest.height;
     delete rest.transitionOverflow;
-    return /*#__PURE__*/_react.default.createElement("div", _extends({
-      style: componentStyle,
-      onTransitionEnd: this.onTransitionEnd
-    }, rest), /*#__PURE__*/_react.default.createElement("div", {
-      ref: el => {
-        this.contentElement = el;
-      }
-    }, children));
-  }
 
+    return (
+      <div
+        style={componentStyle}
+        onTransitionEnd={this.onTransitionEnd}
+        {...rest}
+      >
+        <div
+          ref={(el) => {
+            this.contentElement = el;
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    );
+  }
 }
 
 AnimateHeight.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  duration: _propTypes.default.number.isRequired,
-  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
-  easing: _propTypes.default.string,
-  transitionOverflow: _propTypes.default.string,
-  onAnimationComplete: _propTypes.default.func,
-  style: _propTypes.default.object // eslint-disable-line react/forbid-prop-types
-
+  children: PropTypes.node.isRequired,
+  duration: PropTypes.number.isRequired,
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  easing: PropTypes.string,
+  transitionOverflow: PropTypes.string,
+  onAnimationComplete: PropTypes.func,
+  style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
+
 AnimateHeight.defaultProps = {
   easing: 'ease',
   transitionOverflow: 'hidden',
   onAnimationComplete: null,
-  style: {}
+  style: {},
 };
-var _default = AnimateHeight;
-exports.default = _default;
+
+export default AnimateHeight;

package/bpk-component-accordion/README.md

@@ -0,0 +1,124 @@
+# bpk-component-accordion
+
+> Backpack accordion component.
+
+## Installation
+
+```sh
+npm install bpk-component-accordion --save-dev
+```
+
+## Usage
+
+### withSingleItemAccordionState(BpkAccordion)
+
+The `withSingleItemAccordionState` higher-order component is used to limit one section to be expanded at any time.
+
+```js
+import React from 'react';
+import { BpkAccordion, BpkAccordionItem, withSingleItemAccordionState } from 'bpk-component-accordion';
+
+const SingleItemAccordion = withSingleItemAccordionState(BpkAccordion);
+
+export default () => (
+  <SingleItemAccordion>
+    <BpkAccordionItem id="stops" title="Stops">
+      My stops content.
+    </BpkAccordionItem>
+    <BpkAccordionItem id="departure-times" title="Departure times" initiallyExpanded>
+      My departure times content.
+    </BpkAccordionItem>
+    <BpkAccordionItem id="journey-duration" title="Journey duration">
+      My journey duration content.
+    </BpkAccordionItem>
+  </SingleItemAccordion>
+)
+```
+
+### withAccordionItemState(BpkAccordionItem)
+
+The `withAccordionItemState` higher-order component is used to allow multiple items to be expanded simultaneously.
+
+```js
+import React from 'react';
+import { BpkAccordion, BpkAccordionItem, withAccordionItemState } from 'bpk-component-accordion';
+
+const StatefulAccordionItem = withAccordionItemState(BpkAccordionItem);
+
+export default () => (
+  <BpkAccordion>
+    <StatefulAccordionItem id="stops" title="Stops">
+      My stops content.
+    </StatefulAccordionItem>
+    <StatefulAccordionItem id="departure-times" title="Departure times" initiallyExpanded>
+      My departure times content.
+    </StatefulAccordionItem>
+    <StatefulAccordionItem id="journey-duration" title="Journey duration" initiallyExpanded>
+      My journey duration content.
+    </StatefulAccordionItem>
+  </BpkAccordion>
+)
+```
+
+### Displaying icons
+
+`BpkAccordionItem` supports the use of displaying icons alongside the title. To do this you will need to align your icon to the text using `withAlignment` and pass through the matching sizes for the icon you wish to use. For more information see [Alignment](https://backpack.github.io/components/alignment?platform=web)
+
+```js
+import React from 'react';
+import { BpkAccordion, BpkAccordionItem } from 'bpk-component-accordion';
+import { withAlignment } from 'bpk-component-icon';
+import StopsIcon from 'bpk-component-icon/sm/stops';
+import { lineHeightBase, iconSizeSm, colorPanjin } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+const AlignedStopsIcon = withAlignment(StopsIcon, lineHeightBase, iconSizeSm);
+
+<BpkAccordion>
+  <BpkAccordionItem id="stops" title="Stops" icon={<AlignedStopsIcon fill={colorPanjin}/>}>
+    My stops content.
+  </BpkAccordionItem>
+</BpkAccordion>
+
+```
+
+## Props
+
+### BpkAccordion
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| children  | node     | true     | -             |
+| className | string   | false    | null          |
+
+### BpkAccordionItem
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| children  | node     | true     | -             |
+| id        | string   | true     | -             |
+| title     | string   | true     | -             |
+| expanded  | bool     | false    | false         |
+| icon      | node     | false    | null          |
+| onClick   | func     | false    | () => null    |
+| tagName   | string   | false    | span          |
+| textStyle | string   | false    | "base"        |
+
+### withSingleItemAccordionState(BpkAccordion)
+
+| Property                       | PropType | Required | Default Value |
+| ------------------------------ | -------- | -------- | ------------- |
+| ~~expanded~~ initiallyExpanded | bool     | false    | false         |
+
+### withState(BpkAccordionItem)
+
+| Property                       | PropType | Required | Default Value |
+| ------------------------------ | -------- | -------- | ------------- |
+| ~~expanded~~ initiallyExpanded | bool     | false    | false         |
+
+## Prop Details
+
+## Theme Props
+
+* `accordionColor`,
+* `accordionHoverColor`,
+* `accordionActiveColor`,

package/bpk-component-accordion/index.js

@@ -1,47 +1,33 @@
-"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
-});
-Object.defineProperty(exports, "BpkAccordion", {
-  enumerable: true,
-  get: function () {
-    return _BpkAccordion.default;
-  }
-});
-Object.defineProperty(exports, "BpkAccordionItem", {
-  enumerable: true,
-  get: function () {
-    return _BpkAccordionItem.default;
-  }
-});
-Object.defineProperty(exports, "themeAttributes", {
-  enumerable: true,
-  get: function () {
-    return _themeAttributes.default;
-  }
-});
-Object.defineProperty(exports, "withAccordionItemState", {
-  enumerable: true,
-  get: function () {
-    return _withAccordionItemState.default;
-  }
-});
-Object.defineProperty(exports, "withSingleItemAccordionState", {
-  enumerable: true,
-  get: function () {
-    return _withSingleItemAccordionState.default;
-  }
-});
+/* @flow strict */
 
-var _BpkAccordion = _interopRequireDefault(require("./src/BpkAccordion"));
+import BpkAccordion from './src/BpkAccordion';
+import BpkAccordionItem from './src/BpkAccordionItem';
+import withSingleItemAccordionState from './src/withSingleItemAccordionState';
+import withAccordionItemState from './src/withAccordionItemState';
+import themeAttributes from './src/themeAttributes';
 
-var _BpkAccordionItem = _interopRequireDefault(require("./src/BpkAccordionItem"));
-
-var _withSingleItemAccordionState = _interopRequireDefault(require("./src/withSingleItemAccordionState"));
-
-var _withAccordionItemState = _interopRequireDefault(require("./src/withAccordionItemState"));
-
-var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+export {
+  BpkAccordion,
+  BpkAccordionItem,
+  withSingleItemAccordionState,
+  withAccordionItemState,
+  themeAttributes,
+};

package/bpk-component-accordion/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "bpk-component-accordion",
+  "version": "5.0.13",
+  "description": "Backpack accordion component.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
+  "dependencies": {
+    "bpk-animate-height": "^4.1.12",
+    "bpk-component-icon": "^9.2.13",
+    "bpk-component-text": "^7.0.6",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^6.0.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-component-checkbox": "^4.1.14"
+  }
+}

package/bpk-component-accordion/src/BpkAccordion.js

@@ -1,53 +1,54 @@
-"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;
+/* @flow strict */
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+import PropTypes from 'prop-types';
+import React, { type Node } from 'react';
 
-var _react = _interopRequireDefault(require("react"));
+import { cssModules } from '../../bpk-react-utils';
 
-var _bpkReactUtils = require("../../bpk-react-utils");
+import STYLES from './BpkAccordion.module.scss';
 
-var _BpkAccordionModule = _interopRequireDefault(require("./BpkAccordion.css"));
+const getClassName = cssModules(STYLES);
 
-const _excluded = ["children", "className"];
+type Props = { children: Node, className: ?string };
 
-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)(_BpkAccordionModule.default);
-
-const BpkAccordion = props => {
-  const {
-    children,
-    className
-  } = props,
-        rest = _objectWithoutProperties(props, _excluded);
+const BpkAccordion = (props: Props) => {
+  const { children, className, ...rest } = props;
 
   const classNames = getClassName('bpk-accordion', className);
+
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    _react.default.createElement("dl", _extends({
-      className: classNames
-    }, rest), children)
+    <dl className={classNames} {...rest}>
+      {children}
+    </dl>
   );
 };
 
 BpkAccordion.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  className: _propTypes.default.string
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
 };
+
 BpkAccordion.defaultProps = {
-  className: null
+  className: null,
 };
-var _default = BpkAccordion;
-exports.default = _default;
+
+export default BpkAccordion;