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

package/bpk-animate-height/index.js

@@ -1,3 +1,11 @@
+"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
  *
@@ -15,7 +23,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import AnimateHeight from './src/AnimateHeight';
-
-export default AnimateHeight;
+var _default = _AnimateHeight.default;
+exports.default = _default;

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

@@ -1,58 +1,59 @@
-/*
- * 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';
-
+"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) { 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); }
 // 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 isTransitionEndSupported = () =>
-  !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
-
-class AnimateHeight extends Component {
+const isNumber = n => !isNaN(parseFloat(n)) && isFinite(n);
+const isTransitionEndSupported = () => !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
+class AnimateHeight extends _react.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';
-
     if (isNumber(this.props.height)) {
       height = this.props.height < 0 ? 0 : this.props.height;
       overflow = this.props.transitionOverflow;
     }
-
     this.state = {
       height,
-      overflow,
+      overflow
     };
   }
-
   componentDidMount() {
     if (this.contentElement && this.props.height === 0) {
       this.contentElement.style.display = 'none';
     }
   }
-
   UNSAFE_componentWillReceiveProps(nextProps) {
-    const { height } = this.props;
+    const {
+      height
+    } = this.props;
 
     // Check if 'height' prop has changed
     if (this.contentElement && nextProps.height !== height) {
@@ -61,15 +62,12 @@ class AnimateHeight extends Component {
       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)) {
         // If new height is a number
         newHeight = nextProps.height < 0 ? 0 : nextProps.height;
@@ -81,29 +79,24 @@ class AnimateHeight extends Component {
         timeoutHeight = 'auto';
         timeoutOverflow = 'visible';
       }
-
       if (this.state.height === 'auto') {
         // If previous height was 'auto'
         // 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()) {
             this.onTransitionEnd();
           }
@@ -111,74 +104,60 @@ class AnimateHeight extends Component {
       }
     }
   }
-
   componentWillUnmount() {
     clearTimeout(this.timeoutID);
     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 { children, duration, easing, onAnimationComplete, style, ...rest } =
-      this.props;
-
-    const { height, overflow } = this.state;
-
-    const componentStyle = {
-      ...style,
+    const _this$props = this.props,
+      {
+        children,
+        duration,
+        easing,
+        onAnimationComplete,
+        style
+      } = _this$props,
+      rest = _objectWithoutProperties(_this$props, _excluded);
+    const {
+      height,
+      overflow
+    } = this.state;
+    const componentStyle = _objectSpread(_objectSpread({}, 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 (
-      <div
-        style={componentStyle}
-        onTransitionEnd={this.onTransitionEnd}
-        {...rest}
-      >
-        <div
-          ref={(el) => {
-            this.contentElement = el;
-          }}
-        >
-          {children}
-        </div>
-      </div>
-    );
+    return /*#__PURE__*/_react.default.createElement("div", _extends({
+      style: componentStyle,
+      onTransitionEnd: this.onTransitionEnd
+    }, rest), /*#__PURE__*/_react.default.createElement("div", {
+      ref: el => {
+        this.contentElement = el;
+      }
+    }, children));
   }
 }
-
 AnimateHeight.propTypes = {
-  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
+  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
 };
 
 AnimateHeight.defaultProps = {
   easing: 'ease',
   transitionOverflow: 'hidden',
   onAnimationComplete: null,
-  style: {},
+  style: {}
 };
-
-export default AnimateHeight;
+var _default = AnimateHeight;
+exports.default = _default;

package/bpk-component-accordion/index.js

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

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

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

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

@@ -1,137 +1,100 @@
-/*
- * 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.
- */
+"use strict";
 
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import React, { type Node, type Element } from 'react';
-
-import AnimateHeight from '../../bpk-animate-height';
-import { withButtonAlignment } from '../../bpk-component-icon';
-import ChevronDownIcon from '../../bpk-component-icon/sm/chevron-down';
-import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkAccordionItem.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const ExpandIcon = withButtonAlignment(ChevronDownIcon);
-
-type Props = {
-  children: Node,
-  id: string,
-  title: string,
-  expanded: boolean,
-  icon: ?Element<any>,
-  onClick: () => mixed,
-  tagName: 'span' | 'p' | 'text' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6',
-  textStyle: $Values<typeof TEXT_STYLES>,
-};
-
-const BpkAccordionItem = (props: Props) => {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _bpkAnimateHeight = _interopRequireDefault(require("../../bpk-animate-height"));
+var _bpkComponentIcon = require("../../bpk-component-icon");
+var _chevronDown = _interopRequireDefault(require("../../bpk-component-icon/sm/chevron-down"));
+var _bpkComponentText = _interopRequireWildcard(require("../../bpk-component-text"));
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _BpkAccordionItemModule = _interopRequireDefault(require("./BpkAccordionItem.module.css"));
+const _excluded = ["children", "expanded", "icon", "id", "onClick", "tagName", "textStyle", "title"];
+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 _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)(_BpkAccordionItemModule.default);
+const ExpandIcon = (0, _bpkComponentIcon.withButtonAlignment)(_chevronDown.default);
+const BpkAccordionItem = props => {
   const iconClassNames = [getClassName('bpk-accordion__item-expand-icon')];
   const {
-    children,
-    expanded,
-    icon,
-    id,
-    onClick,
-    tagName,
-    textStyle,
-    title,
-    ...rest
-  } = props;
+      children,
+      expanded,
+      icon,
+      id,
+      onClick,
+      tagName,
+      textStyle,
+      title
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
 
   // if this component is passed initiallyExpanded, this makes sure it doesn't
   // end up on the node. Not ideal as our container component shouldn't be passing
   // it, but the benefit of a better container api versus this was worth it
   // $FlowFixMe[prop-missing] - see above
   delete rest.initiallyExpanded;
-
   if (expanded) {
-    iconClassNames.push(
-      getClassName('bpk-accordion__item-expand-icon--flipped'),
-    );
+    iconClassNames.push(getClassName('bpk-accordion__item-expand-icon--flipped'));
   }
-
   const contentId = `${id}_content`;
-  const clonedIcon = icon
-    ? React.cloneElement(icon, {
-        className: getClassName('bpk-accordion__leading-icon'),
-      })
-    : null;
-
+  const clonedIcon = icon ? /*#__PURE__*/_react.default.cloneElement(icon, {
+    className: getClassName('bpk-accordion__leading-icon')
+  }) : null;
   return (
+    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    <div id={id} {...rest}>
-      <dt className={getClassName('bpk-accordion__title')}>
-        <button
-          type="button"
-          aria-expanded={expanded}
-          aria-controls={contentId}
-          onClick={onClick}
-          className={getClassName('bpk-accordion__toggle-button')}
-        >
-          <span className={getClassName('bpk-accordion__flex-container')}>
-            <BpkText
-              textStyle={textStyle}
-              tagName={tagName}
-              className={getClassName('bpk-accordion__title-text')}
-            >
-              {clonedIcon}
-              {title}
-            </BpkText>
-            <span className={getClassName('bpk-accordion__icon-wrapper')}>
-              <ExpandIcon className={iconClassNames.join(' ')} />
-            </span>
-          </span>
-        </button>
-      </dt>
-      <dd
-        id={contentId}
-        className={getClassName('bpk-accordion__content-container')}
-      >
-        <AnimateHeight duration={200} height={expanded ? 'auto' : 0}>
-          {children}
-        </AnimateHeight>
-      </dd>
-    </div>
+    _react.default.createElement("div", _extends({
+      id: id
+    }, rest), /*#__PURE__*/_react.default.createElement("dt", {
+      className: getClassName('bpk-accordion__title')
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      "aria-expanded": expanded,
+      "aria-controls": contentId,
+      onClick: onClick,
+      className: getClassName('bpk-accordion__toggle-button')
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: getClassName('bpk-accordion__flex-container')
+    }, /*#__PURE__*/_react.default.createElement(_bpkComponentText.default, {
+      textStyle: textStyle,
+      tagName: tagName,
+      className: getClassName('bpk-accordion__title-text')
+    }, clonedIcon, title), /*#__PURE__*/_react.default.createElement("span", {
+      className: getClassName('bpk-accordion__icon-wrapper')
+    }, /*#__PURE__*/_react.default.createElement(ExpandIcon, {
+      className: iconClassNames.join(' ')
+    }))))), /*#__PURE__*/_react.default.createElement("dd", {
+      id: contentId,
+      className: getClassName('bpk-accordion__content-container')
+    }, /*#__PURE__*/_react.default.createElement(_bpkAnimateHeight.default, {
+      duration: 200,
+      height: expanded ? 'auto' : 0
+    }, children)))
   );
 };
-
 BpkAccordionItem.propTypes = {
-  children: PropTypes.node.isRequired,
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  expanded: PropTypes.bool,
-  icon: PropTypes.node,
-  onClick: PropTypes.func,
-  tagName: PropTypes.string,
-  textStyle: PropTypes.string,
+  children: _propTypes.default.node.isRequired,
+  id: _propTypes.default.string.isRequired,
+  title: _propTypes.default.string.isRequired,
+  expanded: _propTypes.default.bool,
+  icon: _propTypes.default.node,
+  onClick: _propTypes.default.func,
+  tagName: _propTypes.default.string,
+  textStyle: _propTypes.default.string
 };
-
 BpkAccordionItem.defaultProps = {
   expanded: false,
   icon: null,
   onClick: () => null,
   tagName: 'span',
-  textStyle: TEXT_STYLES.bodyDefault,
+  textStyle: _bpkComponentText.TEXT_STYLES.bodyDefault
 };
-
-export default BpkAccordionItem;
+var _default = BpkAccordionItem;
+exports.default = _default;