@bonlineza/luxity-lib 2.39.4 → 2.39.6

package/Accordion.js

@@ -1,390 +1,380 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-animate-height'), require('styled-components')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-animate-height', 'styled-components'], factory) :
-  (global = global || self, factory(global.Accordion = {}, global.React, global.AnimateHeight, global.styled));
-}(this, (function (exports, React, AnimateHeight, styled) { 'use strict';
-
-  var React__default = 'default' in React ? React['default'] : React;
-  AnimateHeight = AnimateHeight && Object.prototype.hasOwnProperty.call(AnimateHeight, 'default') ? AnimateHeight['default'] : AnimateHeight;
-  var styled__default = 'default' in styled ? styled['default'] : styled;
-
-  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];
-          }
+import React, { forwardRef, useState } from 'react';
+import AnimateHeight from 'react-animate-height';
+import styled, { ThemeProvider } from 'styled-components';
+
+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);
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _taggedTemplateLiteral(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
   }
 
-  function _taggedTemplateLiteral(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
+  return Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
     }
+  }));
+}
 
-    return Object.freeze(Object.defineProperties(strings, {
-      raw: {
-        value: Object.freeze(raw)
-      }
-    }));
-  }
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
 
-  function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-  }
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
 
-  function _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
-  }
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 
-  function _iterableToArrayLimit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
 
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
+  var _s, _e;
 
-    var _s, _e;
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
 
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
     try {
-      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
+      if (!_n && _i["return"] != null) _i["return"]();
     } finally {
-      try {
-        if (!_n && _i["return"] != null) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
+      if (_d) throw _e;
     }
-
-    return _arr;
-  }
-
-  function _unsupportedIterableToArray(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(o);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-  }
-
-  function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-
-    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-    return arr2;
   }
 
-  function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  return _arr;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var _templateObject;
+var OuterContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), function (props) {
+  return props.theme.colors.borderColor;
+});
+
+var _templateObject$1;
+var ToggleButton = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  padding-left: 3rem;\n  padding-right: 3rem;\n  display: flex;\n  align-items: center;\n  min-height: 70px;\n  height: 70px;\n  cursor: pointer;\n  outline: none;\n"])));
+
+var _templateObject$2;
+var Title = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  flex-grow: 1;\n  color: ", ";\n"])), function (props) {
+  return props.theme.fontSizes[2];
+}, function (props) {
+  return props.theme.colors.primary || '';
+});
+
+var _templateObject$3;
+var BodyContent = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), function (props) {
+  return props.theme.marginPaddings[5];
+});
+
+var _templateObject$4;
+var BodyDivider = styled.hr(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  margin-top: 0;\n  border-style: none;\n  border-bottom: 1px solid ", ";\n"])), function (props) {
+  return props.theme.marginPaddings[4];
+}, function (props) {
+  return props.theme.colors.borderColor;
+});
+
+var _templateObject$5;
+var Body = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (props) {
+  return props.theme.marginPaddings[6];
+}, function (props) {
+  return props.theme.marginPaddings[6];
+});
+
+var theme = {
+  breakpoints: ['40em', '52em', '64em'],
+  space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
+  fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
+  marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
+  letterSpacings: ['-0.5px', '0px', '+0.5px'],
+  radii: ['0px', '2px', '4px', '8px'],
+  borderRadius: '6px',
+  colors: {
+    primary: '#000',
+    base: '#4e4949',
+    baseLt: '#817c7c',
+    borderColor: '#d8d8d8',
+    ntrlMin: '#fff',
+    ntrlMinTen: '#e6e6e6',
+    gray: '#efefef',
+    darkerGray: '#454141'
+  },
+  rareStepColors: {
+    primary: '#202b58',
+    secondary: '#ef5c2d',
+    ntrlMin: '#ffffff',
+    ntrl40: '#f4f4f4',
+    ntrl50: '#808080',
+    ntrl60: '#e8e8e8',
+    ntrl70: '#252525',
+    ntrlMax: '#000000'
+  },
+  rareStepFontWeights: {
+    normal: 400,
+    medium: 500,
+    semiBold: 600,
+    bold: 700
+  },
+  rareStepFontSize: {
+    h1: '36px',
+    h2: '30px',
+    h3: '24px',
+    h4: '20px',
+    h5: '16px',
+    h6: '14px',
+    footerTitle: '16px'
+  },
+  rareStepPageSizes: {
+    mobile: '500px',
+    tablet: '768px',
+    desktop: '992px',
+    screenl: '1280px',
+    screenxl: '1680px',
+    screenxxl: '1920px',
+    container: '1600px'
   }
-
-  var _templateObject;
-  var OuterContainer = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), function (props) {
-    return props.theme.colors.borderColor;
-  });
-
-  var _templateObject$1;
-  var ToggleButton = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  padding-left: 3rem;\n  padding-right: 3rem;\n  display: flex;\n  align-items: center;\n  min-height: 70px;\n  height: 70px;\n  cursor: pointer;\n  outline: none;\n"])));
-
-  var _templateObject$2;
-  var Title = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  flex-grow: 1;\n  color: ", ";\n"])), function (props) {
-    return props.theme.fontSizes[2];
-  }, function (props) {
-    return props.theme.colors.primary || '';
-  });
-
-  var _templateObject$3;
-  var BodyContent = styled__default.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), function (props) {
-    return props.theme.marginPaddings[5];
-  });
-
-  var _templateObject$4;
-  var BodyDivider = styled__default.hr(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  margin-top: 0;\n  border-style: none;\n  border-bottom: 1px solid ", ";\n"])), function (props) {
-    return props.theme.marginPaddings[4];
-  }, function (props) {
-    return props.theme.colors.borderColor;
+};
+
+var themed = (function (Component) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+      ref: ref
+    })));
   });
-
-  var _templateObject$5;
-  var Body = styled__default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (props) {
-    return props.theme.marginPaddings[6];
-  }, function (props) {
-    return props.theme.marginPaddings[6];
-  });
-
-  var theme = {
-    breakpoints: ['40em', '52em', '64em'],
-    space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
-    fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
-    marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
-    letterSpacings: ['-0.5px', '0px', '+0.5px'],
-    radii: ['0px', '2px', '4px', '8px'],
-    borderRadius: '6px',
-    colors: {
-      primary: '#000',
-      base: '#4e4949',
-      baseLt: '#817c7c',
-      borderColor: '#d8d8d8',
-      ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6',
-      gray: '#efefef',
-      darkerGray: '#454141'
-    },
-    rareStepColors: {
-      primary: '#202b58',
-      secondary: '#ef5c2d',
-      ntrlMin: '#ffffff',
-      ntrl40: '#f4f4f4',
-      ntrl50: '#808080',
-      ntrl60: '#e8e8e8',
-      ntrl70: '#252525',
-      ntrlMax: '#000000'
-    },
-    rareStepFontWeights: {
-      normal: 400,
-      medium: 500,
-      semiBold: 600,
-      bold: 700
+});
+
+var SimpleAccordion = function SimpleAccordion(_ref) {
+  var identifier = _ref.identifier,
+      wrapperClass = _ref.wrapperClass,
+      containerClass = _ref.containerClass,
+      title = _ref.title,
+      _onClick = _ref.onClick,
+      openIndicator = _ref.openIndicator;
+  var OpenIndicator = openIndicator;
+  return /*#__PURE__*/React.createElement("div", {
+    className: wrapperClass
+  }, /*#__PURE__*/React.createElement(OuterContainer, {
+    "data-qe-id": identifier,
+    className: containerClass
+  }, /*#__PURE__*/React.createElement(ToggleButton, {
+    className: "".concat(containerClass, "__toggle-button"),
+    "data-qe-id": "".concat(identifier, "-toggle-button"),
+    onClick: function onClick(e) {
+      e.preventDefault();
+
+      _onClick();
     },
-    rareStepFontSize: {
-      h1: '36px',
-      h2: '30px',
-      h3: '24px',
-      h4: '20px',
-      h5: '16px',
-      h6: '14px',
-      footerTitle: '16px'
-    },
-    rareStepPageSizes: {
-      mobile: '500px',
-      tablet: '768px',
-      desktop: '992px',
-      screenl: '1280px',
-      screenxl: '1680px',
-      screenxxl: '1920px',
-      container: '1600px'
-    }
-  };
-
-  var themed = (function (Component) {
-    return /*#__PURE__*/React.forwardRef(function (props, ref) {
-      return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
-        theme: theme
-      }, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
-        ref: ref
-      })));
-    });
-  });
-
-  var SimpleAccordion = function SimpleAccordion(_ref) {
-    var identifier = _ref.identifier,
-        wrapperClass = _ref.wrapperClass,
-        containerClass = _ref.containerClass,
-        title = _ref.title,
-        _onClick = _ref.onClick,
-        openIndicator = _ref.openIndicator;
-    var OpenIndicator = openIndicator;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: wrapperClass
-    }, /*#__PURE__*/React__default.createElement(OuterContainer, {
-      "data-qe-id": identifier,
-      className: containerClass
-    }, /*#__PURE__*/React__default.createElement(ToggleButton, {
-      className: "".concat(containerClass, "__toggle-button"),
-      "data-qe-id": "".concat(identifier, "-toggle-button"),
-      onClick: function onClick(e) {
-        e.preventDefault();
-
-        _onClick();
-      },
-      role: "button"
-    }, /*#__PURE__*/React__default.createElement(Title, {
-      className: "".concat(containerClass, "__toggle-button__title")
-    }, title), /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(containerClass, "__toggle-button__indicator")
-    }, /*#__PURE__*/React__default.createElement(OpenIndicator, null)))));
-  };
-
-  SimpleAccordion.defaultProps = {
-    identifier: '',
-    wrapperClass: '',
-    containerClass: 'luxity-accordion',
-    title: '',
-    onClick: function onClick() {
+    role: "button"
+  }, /*#__PURE__*/React.createElement(Title, {
+    className: "".concat(containerClass, "__toggle-button__title")
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(containerClass, "__toggle-button__indicator")
+  }, /*#__PURE__*/React.createElement(OpenIndicator, null)))));
+};
+
+SimpleAccordion.defaultProps = {
+  identifier: '',
+  wrapperClass: '',
+  containerClass: 'luxity-accordion',
+  title: '',
+  onClick: function onClick() {
+    return null;
+  },
+  openIndicator: function openIndicator() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, "Open");
+  }
+};
+var SimpleAccordion$1 = themed(SimpleAccordion);
+
+var DummyAccordion = SimpleAccordion$1;
+
+var runAfter = function runAfter(fn, duration) {
+  setTimeout(fn, duration);
+};
+
+var getInitHeight = function getInitHeight(defaultHeight) {
+  if (defaultHeight === 'auto') return 'auto';
+  return 0;
+};
+/**
+ * An Expand and Collapsible container which show a Title by default
+ * and then expands to show the content/children when it is triggered
+ */
+
+
+var Accordion = function Accordion(_ref) {
+  var wrapperClass = _ref.wrapperClass,
+      containerClass = _ref.containerClass,
+      title = _ref.title,
+      closeIndicator = _ref.closeIndicator,
+      openIndicator = _ref.openIndicator,
+      itemKey = _ref.itemKey,
+      childRenderer = _ref.children,
+      duration = _ref.duration,
+      onAnimationStart = _ref.onAnimationStart,
+      onAnimationEnd = _ref.onAnimationEnd,
+      onClose = _ref.onClose,
+      onOpen = _ref.onOpen,
+      onToggle = _ref.onToggle,
+      identifier = _ref.identifier,
+      defaultHeight = _ref.defaultHeight;
+
+  var _useState = useState(getInitHeight(defaultHeight)),
+      _useState2 = _slicedToArray(_useState, 2),
+      height = _useState2[0],
+      setHeight = _useState2[1];
+
+  var isClosed = height === 0 || false;
+
+  var toggle = function toggle() {
+    var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
       return null;
-    },
-    openIndicator: function openIndicator() {
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Open");
-    }
-  };
-  var SimpleAccordion$1 = themed(SimpleAccordion);
+    };
+    setHeight(isClosed ? 'auto' : 0); // triggers animation with duration
 
-  var DummyAccordion = SimpleAccordion$1;
+    runAfter(callback, duration);
 
-  var runAfter = function runAfter(fn, duration) {
-    setTimeout(fn, duration);
-  };
+    if (isClosed) {
+      runAfter(onOpen, duration);
+    } else {
+      runAfter(onClose, duration);
+    }
 
-  var getInitHeight = function getInitHeight(defaultHeight) {
-    if (defaultHeight === 'auto') return 'auto';
-    return 0;
+    runAfter(onToggle, duration);
   };
-  /**
-   * An Expand and Collapsible container which show a Title by default
-   * and then expands to show the content/children when it is triggered
-   */
-
-
-  var Accordion = function Accordion(_ref) {
-    var wrapperClass = _ref.wrapperClass,
-        containerClass = _ref.containerClass,
-        title = _ref.title,
-        closeIndicator = _ref.closeIndicator,
-        openIndicator = _ref.openIndicator,
-        itemKey = _ref.itemKey,
-        childRenderer = _ref.children,
-        duration = _ref.duration,
-        onAnimationStart = _ref.onAnimationStart,
-        onAnimationEnd = _ref.onAnimationEnd,
-        onClose = _ref.onClose,
-        onOpen = _ref.onOpen,
-        onToggle = _ref.onToggle,
-        identifier = _ref.identifier,
-        defaultHeight = _ref.defaultHeight;
-
-    var _useState = React.useState(getInitHeight(defaultHeight)),
-        _useState2 = _slicedToArray(_useState, 2),
-        height = _useState2[0],
-        setHeight = _useState2[1];
-
-    var isClosed = height === 0 || false;
-
-    var toggle = function toggle() {
-      var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
-        return null;
-      };
-      setHeight(isClosed ? 'auto' : 0); // triggers animation with duration
-
-      runAfter(callback, duration);
-
-      if (isClosed) {
-        runAfter(onOpen, duration);
-      } else {
-        runAfter(onClose, duration);
-      }
 
-      runAfter(onToggle, duration);
-    };
-
-    var close = function close() {
-      var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
-        return null;
-      };
-      setHeight(0); // triggers animation with duration
-
-      runAfter(callback, duration);
-      runAfter(onClose, duration);
+  var close = function close() {
+    var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
+      return null;
     };
+    setHeight(0); // triggers animation with duration
 
-    var open = function open() {
-      var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
-        return null;
-      };
-      setHeight('auto'); // triggers animation with duration
+    runAfter(callback, duration);
+    runAfter(onClose, duration);
+  };
 
-      runAfter(callback, duration);
-      runAfter(onOpen, duration);
+  var open = function open() {
+    var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
+      return null;
     };
+    setHeight('auto'); // triggers animation with duration
 
-    var CloseIndicator = closeIndicator;
-    var OpenIndicator = openIndicator;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: wrapperClass
-    }, /*#__PURE__*/React__default.createElement(OuterContainer, {
-      "data-qe-id": identifier,
-      className: containerClass
-    }, /*#__PURE__*/React__default.createElement(ToggleButton, {
-      className: "".concat(containerClass, "__toggle-button"),
-      "data-qe-id": "".concat(identifier, "-toggle-button"),
-      onKeyPress: function onKeyPress() {
-        return null;
-      },
-      onClick: function onClick(e) {
-        e.preventDefault();
-        toggle();
-      },
-      role: "button",
-      tabIndex: itemKey + 1
-    }, /*#__PURE__*/React__default.createElement(Title, {
-      className: "".concat(containerClass, "__toggle-button__title")
-    }, title), /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(containerClass, "__toggle-button__indicator")
-    }, isClosed ? /*#__PURE__*/React__default.createElement(OpenIndicator, null) : /*#__PURE__*/React__default.createElement(CloseIndicator, null))), /*#__PURE__*/React__default.createElement(AnimateHeight, {
-      height: height,
-      duration: duration,
-      onAnimationStart: onAnimationStart,
-      onAnimationEnd: onAnimationEnd
-    }, /*#__PURE__*/React__default.createElement(Body, {
-      className: "".concat(containerClass, "__body")
-    }, title ? /*#__PURE__*/React__default.createElement(BodyDivider, null) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null), /*#__PURE__*/React__default.createElement(BodyContent, {
-      className: "".concat(containerClass, "__body__content")
-    }, typeof childRenderer === 'function' ? childRenderer(close, open, toggle) : childRenderer)))));
+    runAfter(callback, duration);
+    runAfter(onOpen, duration);
   };
 
-  Accordion.defaultProps = {
-    identifier: '',
-    wrapperClass: '',
-    containerClass: 'luxity-accordion',
-    title: '',
-    itemKey: 0,
-    children: null,
-    duration: 500,
-    defaultHeight: '0',
-    onAnimationStart: function onAnimationStart() {
+  var CloseIndicator = closeIndicator;
+  var OpenIndicator = openIndicator;
+  return /*#__PURE__*/React.createElement("div", {
+    className: wrapperClass
+  }, /*#__PURE__*/React.createElement(OuterContainer, {
+    "data-qe-id": identifier,
+    className: containerClass
+  }, /*#__PURE__*/React.createElement(ToggleButton, {
+    className: "".concat(containerClass, "__toggle-button"),
+    "data-qe-id": "".concat(identifier, "-toggle-button"),
+    onKeyPress: function onKeyPress() {
       return null;
     },
-    onAnimationEnd: function onAnimationEnd() {
-      return null;
-    },
-    onClose: function onClose() {
-      return null;
-    },
-    onOpen: function onOpen() {
-      return null;
+    onClick: function onClick(e) {
+      e.preventDefault();
+      toggle();
     },
-    onToggle: function onToggle() {
-      return null;
-    },
-    closeIndicator: function closeIndicator() {
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Close");
-    },
-    openIndicator: function openIndicator() {
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Open");
-    }
-  };
-  var index = themed(Accordion);
-
-  exports.DummyAccordion = DummyAccordion;
-  exports.default = index;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
+    role: "button",
+    tabIndex: itemKey + 1
+  }, /*#__PURE__*/React.createElement(Title, {
+    className: "".concat(containerClass, "__toggle-button__title")
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(containerClass, "__toggle-button__indicator")
+  }, isClosed ? /*#__PURE__*/React.createElement(OpenIndicator, null) : /*#__PURE__*/React.createElement(CloseIndicator, null))), /*#__PURE__*/React.createElement(AnimateHeight, {
+    height: height,
+    duration: duration,
+    onAnimationStart: onAnimationStart,
+    onAnimationEnd: onAnimationEnd
+  }, /*#__PURE__*/React.createElement(Body, {
+    className: "".concat(containerClass, "__body")
+  }, title ? /*#__PURE__*/React.createElement(BodyDivider, null) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(BodyContent, {
+    className: "".concat(containerClass, "__body__content")
+  }, typeof childRenderer === 'function' ? childRenderer(close, open, toggle) : childRenderer)))));
+};
+
+Accordion.defaultProps = {
+  identifier: '',
+  wrapperClass: '',
+  containerClass: 'luxity-accordion',
+  title: '',
+  itemKey: 0,
+  children: null,
+  duration: 500,
+  defaultHeight: '0',
+  onAnimationStart: function onAnimationStart() {
+    return null;
+  },
+  onAnimationEnd: function onAnimationEnd() {
+    return null;
+  },
+  onClose: function onClose() {
+    return null;
+  },
+  onOpen: function onOpen() {
+    return null;
+  },
+  onToggle: function onToggle() {
+    return null;
+  },
+  closeIndicator: function closeIndicator() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, "Close");
+  },
+  openIndicator: function openIndicator() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, "Open");
+  }
+};
+var index = themed(Accordion);
 
-})));
+export default index;
+export { DummyAccordion };