@splunk/react-ui 4.21.0 → 4.21.1

package/Concertina.js

@@ -1,815 +1,1010 @@
-/******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	// The require scope
-/******/ 	var __webpack_require__ = {};
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/compat get default export */
-/******/ 	(() => {
-/******/ 		// getDefaultExport function for compatibility with non-harmony modules
-/******/ 		__webpack_require__.n = (module) => {
-/******/ 			var getter = module && module.__esModule ?
-/******/ 				() => (module['default']) :
-/******/ 				() => (module);
-/******/ 			__webpack_require__.d(getter, { a: getter });
-/******/ 			return getter;
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/define property getters */
-/******/ 	(() => {
-/******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = (exports, definition) => {
-/******/ 			for(var key in definition) {
-/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
-/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
-/******/ 				}
-/******/ 			}
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	(() => {
-/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	(() => {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = (exports) => {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/************************************************************************/
-var __webpack_exports__ = {};
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  Panel: () => (/* reexport */ Concertina_Panel),
-  "default": () => (/* reexport */ Concertina_Concertina)
-});
-
-;// CONCATENATED MODULE: external "react"
-const external_react_namespaceObject = require("react");
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
-;// CONCATENATED MODULE: external "prop-types"
-const external_prop_types_namespaceObject = require("prop-types");
-var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_namespaceObject);
-;// CONCATENATED MODULE: external "lodash/debounce"
-const debounce_namespaceObject = require("lodash/debounce");
-var debounce_default = /*#__PURE__*/__webpack_require__.n(debounce_namespaceObject);
-;// CONCATENATED MODULE: external "lodash/take"
-const take_namespaceObject = require("lodash/take");
-var take_default = /*#__PURE__*/__webpack_require__.n(take_namespaceObject);
-;// CONCATENATED MODULE: external "lodash/takeRight"
-const takeRight_namespaceObject = require("lodash/takeRight");
-var takeRight_default = /*#__PURE__*/__webpack_require__.n(takeRight_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
-const EventListener_namespaceObject = require("@splunk/react-ui/EventListener");
-var EventListener_default = /*#__PURE__*/__webpack_require__.n(EventListener_namespaceObject);
-;// CONCATENATED MODULE: external "lodash/keys"
-const keys_namespaceObject = require("lodash/keys");
-var keys_default = /*#__PURE__*/__webpack_require__.n(keys_namespaceObject);
-;// CONCATENATED MODULE: external "lodash/omit"
-const omit_namespaceObject = require("lodash/omit");
-var omit_default = /*#__PURE__*/__webpack_require__.n(omit_namespaceObject);
-;// CONCATENATED MODULE: external "styled-components"
-const external_styled_components_namespaceObject = require("styled-components");
-var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-const Clickable_namespaceObject = require("@splunk/react-ui/Clickable");
-var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/themes"
-const themes_namespaceObject = require("@splunk/themes");
-;// CONCATENATED MODULE: ./src/Concertina/HeadingStyles.ts
-
-
-
-var StyledClickable = external_styled_components_default()((Clickable_default())).withConfig({
-  displayName: "HeadingStyles__StyledClickable",
-  componentId: "sc-1h92oaj-0"
-})(["display:block;width:100%;cursor:pointer;position:relative;padding:6px ", ";line-height:", ";border-radius:0;color:", ";", " &:focus:not([disabled]){box-shadow:", ";}", ""], themes_namespaceObject.variables.spacing, themes_namespaceObject.variables.lineHeight, themes_namespaceObject.variables.textColor, (0,themes_namespaceObject.pickVariant)('$inner', {
-  "true": (0,external_styled_components_namespaceObject.css)(["*:not(:first-child) > &&{border-top:2px solid ", ";}*:not(:last-child) > &&{border-bottom:2px solid ", ";}"], themes_namespaceObject.variables.backgroundColor, themes_namespaceObject.variables.backgroundColor),
-  "false": (0,external_styled_components_namespaceObject.css)(["& + &&{border-top:2px solid ", ";}"], themes_namespaceObject.variables.backgroundColor)
-}), themes_namespaceObject.variables.focusShadowInset, (0,themes_namespaceObject.pickVariant)('$status', {
-  normal: (0,external_styled_components_namespaceObject.css)(["background-color:", ";&:hover:not([disabled]){background-color:", ";}"], (0,themes_namespaceObject.pick)({
-    dark: themes_namespaceObject.variables.gray45,
-    light: themes_namespaceObject.variables.gray96
-  }), (0,themes_namespaceObject.pick)({
-    dark: themes_namespaceObject.variables.gray30,
-    light: themes_namespaceObject.variables.gray92
-  })),
-  disabled: (0,external_styled_components_namespaceObject.css)(["background-color:", ";"], (0,themes_namespaceObject.pick)({
-    dark: themes_namespaceObject.variables.gray80,
-    light: themes_namespaceObject.variables.gray96
-  })),
-  error: (0,external_styled_components_namespaceObject.css)(["background-color:", ";color:", ";&:hover:not([disabled]){background-color:", ";}"], themes_namespaceObject.variables.errorColor, themes_namespaceObject.variables.white, themes_namespaceObject.variables.errorColorD10),
-  warning: (0,external_styled_components_namespaceObject.css)(["background-color:", ";color:", ";&:hover:not([disabled]){background-color:", ";box-shadow:none;}"], themes_namespaceObject.variables.warningColor, themes_namespaceObject.variables.white, themes_namespaceObject.variables.warningColorD10)
-}));
-var StyledHeadingContent = external_styled_components_default().span.withConfig({
-  displayName: "HeadingStyles__StyledHeadingContent",
-  componentId: "sc-1h92oaj-1"
-})(["display:flex;justify-content:space-between;"]);
-var StyledDescription = external_styled_components_default().span.withConfig({
-  displayName: "HeadingStyles__StyledDescription",
-  componentId: "sc-1h92oaj-2"
-})(["font-size:", ";"], themes_namespaceObject.variables.fontSizeSmall);
-
-;// CONCATENATED MODULE: ./src/Concertina/Heading.tsx
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _extends() { _extends = Object.assign || 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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-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; }
-
-
-
-
-
-
-var propTypes = {
-  children: (external_prop_types_default()).node.isRequired,
-  description: (external_prop_types_default()).node,
-
-  /** @private */
-  index: (external_prop_types_default()).number.isRequired,
-
-  /** @private */
-  onClick: (external_prop_types_default()).func,
-
-  /** @private */
-  panelId: (external_prop_types_default()).string,
-
-  /** @private */
-  position: external_prop_types_default().oneOf(['top', 'inner', 'bottom']),
-  status: external_prop_types_default().oneOf(['normal', 'warning', 'error', 'disabled'])
-};
-var defaultProps = {
-  position: 'inner'
-};
-
-var Heading = /*#__PURE__*/function (_Component) {
-  _inherits(Heading, _Component);
-
-  var _super = _createSuper(Heading);
-
-  function Heading() {
-    var _this;
-
-    _classCallCheck(this, Heading);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "container", null);
-
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
-      var _this$props$onClick, _this$props;
-
-      (_this$props$onClick = (_this$props = _this.props).onClick) === null || _this$props$onClick === void 0 ? void 0 : _this$props$onClick.call(_this$props, e, {
-        index: _this.props.index,
-        panelId: _this.props.panelId,
-        position: _this.props.position
-      });
+/******/ (() => {
+    // webpackBootstrap
+    /******/ "use strict";
+    /******/ // The require scope
+    /******/    var e = {};
+    /******/
+    /************************************************************************/
+    /******/ /* webpack/runtime/compat get default export */
+    /******/    (() => {
+        /******/ // getDefaultExport function for compatibility with non-harmony modules
+        /******/ e.n = t => {
+            /******/ var n = t && t.__esModule ? 
+            /******/ () => t["default"]
+            /******/ : () => t
+            /******/;
+            e.d(n, {
+                a: n
+            });
+            /******/            return n;
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/define property getters */
+    /******/    (() => {
+        /******/ // define getter functions for harmony exports
+        /******/ e.d = (t, n) => {
+            /******/ for (var r in n) {
+                /******/ if (e.o(n, r) && !e.o(t, r)) {
+                    /******/ Object.defineProperty(t, r, {
+                        enumerable: true,
+                        get: n[r]
+                    });
+                    /******/                }
+                /******/            }
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/hasOwnProperty shorthand */
+    /******/    (() => {
+        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/;
+    })();
+    /******/
+    /******/ /* webpack/runtime/make namespace object */
+    /******/    (() => {
+        /******/ // define __esModule on exports
+        /******/ e.r = e => {
+            /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
+                /******/ Object.defineProperty(e, Symbol.toStringTag, {
+                    value: "Module"
+                });
+                /******/            }
+            /******/            Object.defineProperty(e, "__esModule", {
+                value: true
+            });
+            /******/        };
+        /******/    })();
+    /******/
+    /************************************************************************/    var t = {};
+    // ESM COMPAT FLAG
+        e.r(t);
+    // EXPORTS
+        e.d(t, {
+        Panel: () => /* reexport */ Pe,
+        default: () => /* reexport */ Ve
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleMount", function (container) {
-      _this.container = container;
-    });
-
-    return _this;
-  }
-
-  _createClass(Heading, [{
-    key: "focus",
-    value: function focus() {
-      var _this$container;
-
-      (_this$container = this.container) === null || _this$container === void 0 ? void 0 : _this$container.focus();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          children = _this$props2.children,
-          description = _this$props2.description,
-          panelId = _this$props2.panelId,
-          position = _this$props2.position,
-          status = _this$props2.status;
-      return /*#__PURE__*/external_react_default().createElement(StyledClickable, _extends({
-        disabled: status === 'disabled',
-        $inner: position === 'inner',
-        $status: status,
-        onClick: this.handleClick,
-        ref: this.handleMount,
-        "data-test": "heading",
-        "data-test-panel-id": panelId
-      }, omit_default()(this.props, keys_default()(Heading.propTypes))), /*#__PURE__*/external_react_default().createElement(StyledHeadingContent, null, /*#__PURE__*/external_react_default().createElement("span", {
-        "data-concertina-role": "title"
-      }, children), description && /*#__PURE__*/external_react_default().createElement(StyledDescription, {
-        "data-concertina-role": "description"
-      }, description)));
-    }
-  }]);
-
-  return Heading;
-}(external_react_namespaceObject.Component);
-
-_defineProperty(Heading, "propTypes", propTypes);
-
-_defineProperty(Heading, "defaultProps", defaultProps);
-
-/* harmony default export */ const Concertina_Heading = (Heading);
-;// CONCATENATED MODULE: external "lodash/throttle"
-const throttle_namespaceObject = require("lodash/throttle");
-var throttle_default = /*#__PURE__*/__webpack_require__.n(throttle_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/react-ui/Box"
-const Box_namespaceObject = require("@splunk/react-ui/Box");
-var Box_default = /*#__PURE__*/__webpack_require__.n(Box_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/react-ui/Scroll"
-const Scroll_namespaceObject = require("@splunk/react-ui/Scroll");
-var Scroll_default = /*#__PURE__*/__webpack_require__.n(Scroll_namespaceObject);
-;// CONCATENATED MODULE: ./src/Concertina/ConcertinaStyles.ts
-
-
-
-
-var StyledScroll = external_styled_components_default()((Scroll_default())).withConfig({
-  displayName: "ConcertinaStyles__StyledScroll",
-  componentId: "sc-1fzuh39-0"
-})(["position:absolute;left:0;top:0;right:0;bottom:0;"]);
-var StyledBox = external_styled_components_default()(StyledScroll.withComponent((Box_default()))).withConfig({
-  displayName: "ConcertinaStyles__StyledBox",
-  componentId: "sc-1fzuh39-1"
-})(["overflow:hidden;"]);
-var StyledTop = external_styled_components_default().div.withConfig({
-  displayName: "ConcertinaStyles__StyledTop",
-  componentId: "sc-1fzuh39-2"
-})(["position:absolute;left:0;top:0;right:0;z-index:1;background-color:", ";&::after{content:'';position:absolute;bottom:-10px;height:10px;left:0;right:0;background-image:linear-gradient(180deg,rgba(0,0,0,0.15),rgba(0,0,0,0));}"], themes_namespaceObject.variables.backgroundColor);
-var StyledBottom = external_styled_components_default().div.withConfig({
-  displayName: "ConcertinaStyles__StyledBottom",
-  componentId: "sc-1fzuh39-3"
-})(["position:absolute;left:0;bottom:0;right:0;background-color:", ";&::before{content:'';position:absolute;top:-5px;height:5px;left:0;right:0;background-image:linear-gradient(0deg,rgba(0,0,0,0.15),rgba(0,0,0,0));}"], themes_namespaceObject.variables.backgroundColor);
-var StyledPanelBody = external_styled_components_default().div.withConfig({
-  displayName: "ConcertinaStyles__StyledPanelBody",
-  componentId: "sc-1fzuh39-4"
-})(["", ""], (0,themes_namespaceObject.pickVariant)('$status', {
-  error: {
-    dark: (0,external_styled_components_namespaceObject.css)(["background-color:", ";"], themes_namespaceObject.mixins.colorWithAlpha(themes_namespaceObject.variables.errorColor, 0.5)),
-    light: (0,external_styled_components_namespaceObject.css)(["background-color:", ";"], themes_namespaceObject.variables.errorColorL50)
-  },
-  warning: {
-    dark: (0,external_styled_components_namespaceObject.css)(["background-color:", ";"], themes_namespaceObject.mixins.colorWithAlpha(themes_namespaceObject.variables.warningColor, 0.5)),
-    light: (0,external_styled_components_namespaceObject.css)(["background-color:", ";"], themes_namespaceObject.variables.warningColorL50)
-  },
-  disabled: (0,external_styled_components_namespaceObject.css)(["display:none;"])
-}));
-
-;// CONCATENATED MODULE: ./src/utils/updateReactRef.ts
-/**
+    // CONCATENATED MODULE: external "react"
+    const n = require("react");
+    var r =  e.n(n);
+    // CONCATENATED MODULE: external "prop-types"
+    const o = require("prop-types");
+    var i =  e.n(o);
+    // CONCATENATED MODULE: external "lodash/debounce"
+    const a = require("lodash/debounce");
+    var l =  e.n(a);
+    // CONCATENATED MODULE: external "lodash/take"
+    const s = require("lodash/take");
+    var c =  e.n(s);
+    // CONCATENATED MODULE: external "lodash/takeRight"
+    const u = require("lodash/takeRight");
+    var f =  e.n(u);
+    // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
+    const p = require("@splunk/react-ui/EventListener");
+    var d =  e.n(p);
+    // CONCATENATED MODULE: external "lodash/keys"
+    const h = require("lodash/keys");
+    var y =  e.n(h);
+    // CONCATENATED MODULE: external "lodash/omit"
+    const b = require("lodash/omit");
+    var v =  e.n(b);
+    // CONCATENATED MODULE: external "styled-components"
+    const g = require("styled-components");
+    var m =  e.n(g);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+    const k = require("@splunk/react-ui/Clickable");
+    var S =  e.n(k);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const w = require("@splunk/themes");
+    // CONCATENATED MODULE: ./src/Concertina/HeadingStyles.ts
+    var C = m()(S()).withConfig({
+        displayName: "HeadingStyles__StyledClickable",
+        componentId: "sc-1h92oaj-0"
+    })([ "display:block;width:100%;cursor:pointer;position:relative;padding:6px ", ";line-height:", ";border-radius:0;color:", ";", " &:focus:not([disabled]){box-shadow:", ";}", "" ], w.variables.spacing, w.variables.lineHeight, w.variables.textColor, (0, 
+    w.pickVariant)("$inner", {
+        true: (0, g.css)([ "*:not(:first-child) > &&{border-top:2px solid ", ";}*:not(:last-child) > &&{border-bottom:2px solid ", ";}" ], w.variables.backgroundColor, w.variables.backgroundColor),
+        false: (0, g.css)([ "& + &&{border-top:2px solid ", ";}" ], w.variables.backgroundColor)
+    }), w.variables.focusShadowInset, (0, w.pickVariant)("$status", {
+        normal: (0, g.css)([ "background-color:", ";&:hover:not([disabled]){background-color:", ";}" ], (0, 
+        w.pick)({
+            dark: w.variables.gray45,
+            light: w.variables.gray96
+        }), (0, w.pick)({
+            dark: w.variables.gray30,
+            light: w.variables.gray92
+        })),
+        disabled: (0, g.css)([ "background-color:", ";" ], (0, w.pick)({
+            dark: w.variables.gray80,
+            light: w.variables.gray96
+        })),
+        error: (0, g.css)([ "background-color:", ";color:", ";&:hover:not([disabled]){background-color:", ";}" ], w.variables.errorColor, w.variables.white, w.variables.errorColorD10),
+        warning: (0, g.css)([ "background-color:", ";color:", ";&:hover:not([disabled]){background-color:", ";box-shadow:none;}" ], w.variables.warningColor, w.variables.white, w.variables.warningColorD10)
+    }));
+    var O = m().span.withConfig({
+        displayName: "HeadingStyles__StyledHeadingContent",
+        componentId: "sc-1h92oaj-1"
+    })([ "display:flex;justify-content:space-between;" ]);
+    var P = m().span.withConfig({
+        displayName: "HeadingStyles__StyledDescription",
+        componentId: "sc-1h92oaj-2"
+    })([ "font-size:", ";" ], w.variables.fontSizeSmall);
+    // CONCATENATED MODULE: ./src/Concertina/Heading.tsx
+    function j(e) {
+        "@babel/helpers - typeof";
+        if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+            j = function e(t) {
+                return typeof t;
+            };
+        } else {
+            j = function e(t) {
+                return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
+            };
+        }
+        return j(e);
+    }
+    function E() {
+        E = Object.assign || function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var n = arguments[t];
+                for (var r in n) {
+                    if (Object.prototype.hasOwnProperty.call(n, r)) {
+                        e[r] = n[r];
+                    }
+                }
+            }
+            return e;
+        };
+        return E.apply(this, arguments);
+    }
+    function x(e, t) {
+        if (!(e instanceof t)) {
+            throw new TypeError("Cannot call a class as a function");
+        }
+    }
+    function _(e, t) {
+        for (var n = 0; n < t.length; n++) {
+            var r = t[n];
+            r.enumerable = r.enumerable || false;
+            r.configurable = true;
+            if ("value" in r) r.writable = true;
+            Object.defineProperty(e, r.key, r);
+        }
+    }
+    function H(e, t, n) {
+        if (t) _(e.prototype, t);
+        if (n) _(e, n);
+        return e;
+    }
+    function T(e, t) {
+        if (typeof t !== "function" && t !== null) {
+            throw new TypeError("Super expression must either be null or a function");
+        }
+        e.prototype = Object.create(t && t.prototype, {
+            constructor: {
+                value: e,
+                writable: true,
+                configurable: true
+            }
+        });
+        if (t) R(e, t);
+    }
+    function R(e, t) {
+        R = Object.setPrototypeOf || function e(t, n) {
+            t.__proto__ = n;
+            return t;
+        };
+        return R(e, t);
+    }
+    function I(e) {
+        var t = M();
+        return function n() {
+            var r = A(e), o;
+            if (t) {
+                var i = A(this).constructor;
+                o = Reflect.construct(r, arguments, i);
+            } else {
+                o = r.apply(this, arguments);
+            }
+            return q(this, o);
+        };
+    }
+    function q(e, t) {
+        if (t && (j(t) === "object" || typeof t === "function")) {
+            return t;
+        }
+        return z(e);
+    }
+    function z(e) {
+        if (e === void 0) {
+            throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+        }
+        return e;
+    }
+    function M() {
+        if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+        if (Reflect.construct.sham) return false;
+        if (typeof Proxy === "function") return true;
+        try {
+            Date.prototype.toString.call(Reflect.construct(Date, [], (function() {})));
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
+    function A(e) {
+        A = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+            return t.__proto__ || Object.getPrototypeOf(t);
+        };
+        return A(e);
+    }
+    function W(e, t, n) {
+        if (t in e) {
+            Object.defineProperty(e, t, {
+                value: n,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+        } else {
+            e[t] = n;
+        }
+        return e;
+    }
+    var B = {
+        children: i().node.isRequired,
+        description: i().node,
+        /** @private */
+        index: i().number.isRequired,
+        /** @private */
+        onClick: i().func,
+        /** @private */
+        panelId: i().string,
+        /** @private */
+        position: i().oneOf([ "top", "inner", "bottom" ]),
+        status: i().oneOf([ "normal", "warning", "error", "disabled" ])
+    };
+    var D = {
+        position: "inner"
+    };
+    var N =  function(e) {
+        T(n, e);
+        var t = I(n);
+        function n() {
+            var e;
+            x(this, n);
+            for (var r = arguments.length, o = new Array(r), i = 0; i < r; i++) {
+                o[i] = arguments[i];
+            }
+            e = t.call.apply(t, [ this ].concat(o));
+            W(z(e), "container", null);
+            W(z(e), "handleClick", (function(t) {
+                var n, r;
+                (n = (r = e.props).onClick) === null || n === void 0 ? void 0 : n.call(r, t, {
+                    index: e.props.index,
+                    panelId: e.props.panelId,
+                    position: e.props.position
+                });
+            }));
+            W(z(e), "handleMount", (function(t) {
+                e.container = t;
+            }));
+            return e;
+        }
+        H(n, [ {
+            key: "focus",
+            value: function e() {
+                var t;
+                (t = this.container) === null || t === void 0 ? void 0 : t.focus();
+            }
+        }, {
+            key: "render",
+            value: function e() {
+                var t = this.props, o = t.children, i = t.description, a = t.panelId, l = t.position, s = t.status;
+                
+                return r().createElement(C, E({
+                    disabled: s === "disabled",
+                    $inner: l === "inner",
+                    $status: s,
+                    onClick: this.handleClick,
+                    ref: this.handleMount,
+                    "data-test": "heading",
+                    "data-test-panel-id": a
+                }, v()(this.props, y()(n.propTypes))),  r().createElement(O, null,  r().createElement("span", {
+                    "data-concertina-role": "title"
+                }, o), i &&  r().createElement(P, {
+                    "data-concertina-role": "description"
+                }, i)));
+            }
+        } ]);
+        return n;
+    }(n.Component);
+    W(N, "propTypes", B);
+    W(N, "defaultProps", D);
+    /* harmony default export */    const $ = N;
+    // CONCATENATED MODULE: external "lodash/throttle"
+    const U = require("lodash/throttle");
+    var V =  e.n(U);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
+    const L = require("@splunk/react-ui/Box");
+    var F =  e.n(L);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Scroll"
+    const G = require("@splunk/react-ui/Scroll");
+    var J =  e.n(G);
+    // CONCATENATED MODULE: ./src/Concertina/ConcertinaStyles.ts
+    var K = m()(J()).withConfig({
+        displayName: "ConcertinaStyles__StyledScroll",
+        componentId: "sc-1fzuh39-0"
+    })([ "position:absolute;left:0;top:0;right:0;bottom:0;" ]);
+    var Q = m()(K.withComponent(F())).withConfig({
+        displayName: "ConcertinaStyles__StyledBox",
+        componentId: "sc-1fzuh39-1"
+    })([ "overflow:hidden;" ]);
+    var X = m().div.withConfig({
+        displayName: "ConcertinaStyles__StyledTop",
+        componentId: "sc-1fzuh39-2"
+    })([ "position:absolute;left:0;top:0;right:0;z-index:1;background-color:", ";&::after{content:'';position:absolute;bottom:-10px;height:10px;left:0;right:0;background-image:linear-gradient(180deg,rgba(0,0,0,0.15),rgba(0,0,0,0));}" ], w.variables.backgroundColor);
+    var Y = m().div.withConfig({
+        displayName: "ConcertinaStyles__StyledBottom",
+        componentId: "sc-1fzuh39-3"
+    })([ "position:absolute;left:0;bottom:0;right:0;background-color:", ";&::before{content:'';position:absolute;top:-5px;height:5px;left:0;right:0;background-image:linear-gradient(0deg,rgba(0,0,0,0.15),rgba(0,0,0,0));}" ], w.variables.backgroundColor);
+    var Z = m().div.withConfig({
+        displayName: "ConcertinaStyles__StyledPanelBody",
+        componentId: "sc-1fzuh39-4"
+    })([ "", "" ], (0, w.pickVariant)("$status", {
+        error: {
+            dark: (0, g.css)([ "background-color:", ";" ], w.mixins.colorWithAlpha(w.variables.errorColor, .5)),
+            light: (0, g.css)([ "background-color:", ";" ], w.variables.errorColorL50)
+        },
+        warning: {
+            dark: (0, g.css)([ "background-color:", ";" ], w.mixins.colorWithAlpha(w.variables.warningColor, .5)),
+            light: (0, g.css)([ "background-color:", ";" ], w.variables.warningColorL50)
+        },
+        disabled: (0, g.css)([ "display:none;" ])
+    }));
+    // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
+    /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
  *
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-function updateReactRef(ref, current) {
-  if (ref) {
-    if (typeof ref === 'function') {
-      ref(current);
-    } else {
-      // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
-      // the intention here is to signal "we will take care of setting 'current', not you".
-      ref.current = current; // eslint-disable-line no-param-reassign
-    }
-  }
-}
-
-
-;// CONCATENATED MODULE: ./src/Concertina/ConcertinaContext.tsx
-
-var ConcertinaContext = /*#__PURE__*/(0,external_react_namespaceObject.createContext)({});
-ConcertinaContext.displayName = 'Concertina';
-/* harmony default export */ const Concertina_ConcertinaContext = (ConcertinaContext);
-;// CONCATENATED MODULE: ./src/Concertina/Panel.tsx
-function Panel_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { Panel_typeof = function _typeof(obj) { return typeof obj; }; } else { Panel_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return Panel_typeof(obj); }
-
-function Panel_extends() { Panel_extends = Object.assign || 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 Panel_extends.apply(this, arguments); }
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-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 Panel_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function Panel_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function Panel_createClass(Constructor, protoProps, staticProps) { if (protoProps) Panel_defineProperties(Constructor.prototype, protoProps); if (staticProps) Panel_defineProperties(Constructor, staticProps); return Constructor; }
-
-function Panel_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) Panel_setPrototypeOf(subClass, superClass); }
-
-function Panel_setPrototypeOf(o, p) { Panel_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return Panel_setPrototypeOf(o, p); }
-
-function Panel_createSuper(Derived) { var hasNativeReflectConstruct = Panel_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = Panel_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = Panel_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return Panel_possibleConstructorReturn(this, result); }; }
-
-function Panel_possibleConstructorReturn(self, call) { if (call && (Panel_typeof(call) === "object" || typeof call === "function")) { return call; } return Panel_assertThisInitialized(self); }
-
-function Panel_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function Panel_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function Panel_getPrototypeOf(o) { Panel_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return Panel_getPrototypeOf(o); }
-
-function Panel_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; }
-
-
-
-
-
-
-
-
-
-
-
-var Panel_propTypes = {
-  children: (external_prop_types_default()).node,
-  description: (external_prop_types_default()).node,
-  elementRef: external_prop_types_default().oneOfType([(external_prop_types_default()).func, (external_prop_types_default()).object]),
-
-  /** @private */
-  index: (external_prop_types_default()).number,
-  panelId: (external_prop_types_default()).string,
-  status: external_prop_types_default().oneOf(['normal', 'warning', 'error', 'disabled']),
-  title: (external_prop_types_default()).node.isRequired
-};
-var Panel_defaultProps = {
-  status: 'normal'
-};
-
-var Panel = /*#__PURE__*/function (_Component) {
-  Panel_inherits(Panel, _Component);
-
-  var _super = Panel_createSuper(Panel);
-
-  // @docs-props-type PanelPropsBase
-  function Panel(props) {
-    var _this;
-
-    Panel_classCallCheck(this, Panel);
-
-    _this = _super.call(this, props);
-
-    Panel_defineProperty(Panel_assertThisInitialized(_this), "lastHeight", void 0);
-
-    Panel_defineProperty(Panel_assertThisInitialized(_this), "measureHeight", function (e) {
-      var _this$props$index, _this$context$onChang, _this$context;
-
-      if (!_this.state.containerEl || !_this.state.bodyEl) {
-        return;
-      }
-
-      var newHeight = _this.state.containerEl.clientHeight;
-
-      if (newHeight === _this.lastHeight) {
-        return;
-      }
-
-      var data = {
-        headingHeight: _this.state.containerEl.offsetHeight - _this.state.bodyEl.offsetHeight,
-        height: _this.state.containerEl.offsetHeight,
-        index: (_this$props$index = _this.props.index) !== null && _this$props$index !== void 0 ? _this$props$index : 0,
-        panelId: _this.props.panelId
-      };
-      _this.lastHeight = newHeight;
-      (_this$context$onChang = (_this$context = _this.context).onChange) === null || _this$context$onChang === void 0 ? void 0 : _this$context$onChang.call(_this$context, e, data);
-    });
-
-    Panel_defineProperty(Panel_assertThisInitialized(_this), "handleResize", throttle_default()(_this.measureHeight, 300));
-
-    Panel_defineProperty(Panel_assertThisInitialized(_this), "handleMount", function (el) {
-      _this.setState({
-        containerEl: el
-      });
-
-      updateReactRef(_this.props.elementRef, el);
-    });
-
-    Panel_defineProperty(Panel_assertThisInitialized(_this), "handleHeadingMount", function (heading) {
-      _this.setState({
-        heading: heading
-      });
-    });
-
-    Panel_defineProperty(Panel_assertThisInitialized(_this), "handleBodyMount", function (bodyEl) {
-      _this.setState({
-        bodyEl: bodyEl
-      });
-    });
-
-    _this.state = {
-      bodyEl: null,
-      containerEl: null,
-      heading: null
-    };
-    return _this;
-  }
-
-  Panel_createClass(Panel, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (this.props.children !== prevProps.children || !prevState.containerEl) {
-        this.measureHeight();
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.handleResize.cancel();
-    }
-  }, {
-    key: "focus",
-    value: function focus() {
-      var _this$state$heading;
-
-      (_this$state$heading = this.state.heading) === null || _this$state$heading === void 0 ? void 0 : _this$state$heading.focus();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          description = _this$props.description,
-          index = _this$props.index,
-          panelId = _this$props.panelId,
-          status = _this$props.status,
-          style = _this$props.style,
-          title = _this$props.title;
-      var onHeadingClickContext = this.context.onHeadingClick;
-      return /*#__PURE__*/external_react_default().createElement("div", Panel_extends({
-        ref: this.handleMount,
-        "data-test": "panel",
-        "data-test-panel-id": panelId || "".concat(index)
-      }, omit_default()(this.props, [].concat(_toConsumableArray(keys_default()(Panel.propTypes)), ['style']))), /*#__PURE__*/external_react_default().createElement(Concertina_Heading, {
-        onClick: onHeadingClickContext,
-        ref: this.handleHeadingMount,
-        description: description,
-        index: index !== null && index !== void 0 ? index : 0,
-        panelId: panelId || "".concat(index),
-        position: "inner",
-        status: status
-      }, title), /*#__PURE__*/external_react_default().createElement((EventListener_default()), {
-        target: window,
-        eventType: "resize",
-        listener: this.handleResize
-      }), /*#__PURE__*/external_react_default().createElement(StyledPanelBody, {
-        $status: status,
-        "data-test": "body",
-        style: style,
-        ref: this.handleBodyMount
-      }, children));
-    }
-  }]);
-
-  return Panel;
-}(external_react_namespaceObject.Component);
-
-Panel_defineProperty(Panel, "propTypes", Panel_propTypes);
-
-Panel_defineProperty(Panel, "defaultProps", Panel_defaultProps);
-
-Panel_defineProperty(Panel, "contextType", Concertina_ConcertinaContext);
-
-/* harmony default export */ const Concertina_Panel = (Panel);
-;// CONCATENATED MODULE: ./src/Concertina/Concertina.tsx
-function Concertina_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { Concertina_typeof = function _typeof(obj) { return typeof obj; }; } else { Concertina_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return Concertina_typeof(obj); }
-
-function Concertina_extends() { Concertina_extends = Object.assign || 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 Concertina_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; }
-
-function Concertina_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function Concertina_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function Concertina_createClass(Constructor, protoProps, staticProps) { if (protoProps) Concertina_defineProperties(Constructor.prototype, protoProps); if (staticProps) Concertina_defineProperties(Constructor, staticProps); return Constructor; }
-
-function Concertina_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) Concertina_setPrototypeOf(subClass, superClass); }
-
-function Concertina_setPrototypeOf(o, p) { Concertina_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return Concertina_setPrototypeOf(o, p); }
-
-function Concertina_createSuper(Derived) { var hasNativeReflectConstruct = Concertina_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = Concertina_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = Concertina_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return Concertina_possibleConstructorReturn(this, result); }; }
-
-function Concertina_possibleConstructorReturn(self, call) { if (call && (Concertina_typeof(call) === "object" || typeof call === "function")) { return call; } return Concertina_assertThisInitialized(self); }
-
-function Concertina_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function Concertina_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function Concertina_getPrototypeOf(o) { Concertina_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return Concertina_getPrototypeOf(o); }
-
-function Concertina_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; }
-
-
-
-
-
-
-
-
-
-
-
-var Concertina_propTypes = {
-  children: (external_prop_types_default()).node,
-  elementRef: external_prop_types_default().oneOfType([(external_prop_types_default()).func, (external_prop_types_default()).object])
-};
-var Concertina_defaultProps = {};
-
-/**
- * @deprecated
- * Concertina has been deprecated and will be removed in a future major version.
- */
-var Concertina = /*#__PURE__*/function (_Component) {
-  Concertina_inherits(Concertina, _Component);
-
-  var _super = Concertina_createSuper(Concertina);
-
-  // @docs-props-type ConcertinaPropsBase
-  function Concertina(props) {
-    var _this;
-
-    Concertina_classCallCheck(this, Concertina);
-
-    _this = _super.call(this, props);
-
-    Concertina_defineProperty(Concertina_assertThisInitialized(_this), "panelPositions", void 0);
-
-    Concertina_defineProperty(Concertina_assertThisInitialized(_this), "handleUpdate", function (e, data) {
-      _this.panelPositions[data.index] = data;
-      var total = 0;
-
-      _this.panelPositions.forEach(function (panel) {
-        // eslint-disable-next-line no-param-reassign
-        panel.offsetTop = total;
-        total += panel.height || 0;
-      });
-
-      _this.updateHeadings();
-    });
-
-    Concertina_defineProperty(Concertina_assertThisInitialized(_this), "handleElementMount", function (scrollEl) {
-      _this.setState({
-        scrollEl: scrollEl
-      }); // The scrollEl gets unmounted during the animation, it's necessary to cache the
-      // recorded height until it is remounted.
-
-
-      if (scrollEl) {
-        _this.setState({
-          innerWidth: scrollEl.clientWidth
+    function ee(e, t) {
+        if (e) {
+            if (typeof e === "function") {
+                e(t);
+            } else {
+                // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
+                // the intention here is to signal "we will take care of setting 'current', not you".
+                e.current = t;
+ // eslint-disable-line no-param-reassign
+                        }
+        }
+    }
+    // CONCATENATED MODULE: ./src/Concertina/ConcertinaContext.tsx
+    var te =  (0, n.createContext)({});
+    te.displayName = "Concertina";
+    /* harmony default export */    const ne = te;
+    // CONCATENATED MODULE: ./src/Concertina/Panel.tsx
+    function re(e) {
+        "@babel/helpers - typeof";
+        if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+            re = function e(t) {
+                return typeof t;
+            };
+        } else {
+            re = function e(t) {
+                return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
+            };
+        }
+        return re(e);
+    }
+    function oe() {
+        oe = Object.assign || function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var n = arguments[t];
+                for (var r in n) {
+                    if (Object.prototype.hasOwnProperty.call(n, r)) {
+                        e[r] = n[r];
+                    }
+                }
+            }
+            return e;
+        };
+        return oe.apply(this, arguments);
+    }
+    function ie(e) {
+        return ce(e) || se(e) || le(e) || ae();
+    }
+    function ae() {
+        throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+    }
+    function le(e, t) {
+        if (!e) return;
+        if (typeof e === "string") return ue(e, t);
+        var n = Object.prototype.toString.call(e).slice(8, -1);
+        if (n === "Object" && e.constructor) n = e.constructor.name;
+        if (n === "Map" || n === "Set") return Array.from(e);
+        if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return ue(e, t);
+    }
+    function se(e) {
+        if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
+    }
+    function ce(e) {
+        if (Array.isArray(e)) return ue(e);
+    }
+    function ue(e, t) {
+        if (t == null || t > e.length) t = e.length;
+        for (var n = 0, r = new Array(t); n < t; n++) {
+            r[n] = e[n];
+        }
+        return r;
+    }
+    function fe(e, t) {
+        if (!(e instanceof t)) {
+            throw new TypeError("Cannot call a class as a function");
+        }
+    }
+    function pe(e, t) {
+        for (var n = 0; n < t.length; n++) {
+            var r = t[n];
+            r.enumerable = r.enumerable || false;
+            r.configurable = true;
+            if ("value" in r) r.writable = true;
+            Object.defineProperty(e, r.key, r);
+        }
+    }
+    function de(e, t, n) {
+        if (t) pe(e.prototype, t);
+        if (n) pe(e, n);
+        return e;
+    }
+    function he(e, t) {
+        if (typeof t !== "function" && t !== null) {
+            throw new TypeError("Super expression must either be null or a function");
+        }
+        e.prototype = Object.create(t && t.prototype, {
+            constructor: {
+                value: e,
+                writable: true,
+                configurable: true
+            }
         });
-      }
-    });
-
-    Concertina_defineProperty(Concertina_assertThisInitialized(_this), "handleResize", function () {
-      _this.setState(function (state) {
-        var _state$scrollEl;
-
-        return {
-          innerWidth: (_state$scrollEl = state.scrollEl) === null || _state$scrollEl === void 0 ? void 0 : _state$scrollEl.clientWidth
+        if (t) ye(e, t);
+    }
+    function ye(e, t) {
+        ye = Object.setPrototypeOf || function e(t, n) {
+            t.__proto__ = n;
+            return t;
         };
-      });
-    });
-
-    Concertina_defineProperty(Concertina_assertThisInitialized(_this), "handleScroll", function () {
-      _this.updateHeadings();
-    });
-
-    Concertina_defineProperty(Concertina_assertThisInitialized(_this), "handleScrollComplete", function () {
-      _this.setState({
-        targetTop: undefined
-      });
-    });
-
-    Concertina_defineProperty(Concertina_assertThisInitialized(_this), "handleClick", function (e, _ref) {
-      var _this$panelPositions$;
-
-      var index = _ref.index,
-          position = _ref.position;
-      var scrollEl = _this.state.scrollEl;
-
-      if (!scrollEl) {
-        return;
-      }
-
-      var headingsBeforeHeight = take_default()(_this.panelPositions, index).map(function (item) {
-        return item.headingHeight;
-      }).reduce(function (a, b) {
-        return a + b;
-      }, 0); // sum the heights
-
-      var headingsAfterHeight = takeRight_default()(_this.panelPositions, _this.panelPositions.length - index - 1).map(function (item) {
-        return item.headingHeight;
-      }).reduce(function (a, b) {
-        return a + b;
-      }, 0); // sum the heights
-
-      var availableHeight = scrollEl.clientHeight - headingsBeforeHeight - headingsAfterHeight;
-      var panelHeight = _this.panelPositions[index].height;
-      var topPosition = ((_this$panelPositions$ = _this.panelPositions[index].offsetTop) !== null && _this$panelPositions$ !== void 0 ? _this$panelPositions$ : 0) - headingsBeforeHeight;
-      var bottomPosition = topPosition - (availableHeight - panelHeight);
-      var shouldPartlyPopUp = availableHeight > panelHeight && (position === 'bottom' || position === 'inner'); // if the entire panel is in view, do nothing
-
-      if (shouldPartlyPopUp && bottomPosition < scrollEl.scrollTop) {
-        return;
-      }
-
-      var targetTop = shouldPartlyPopUp ? bottomPosition : topPosition; // handleRest will shift focus;
-
-      if (position !== 'inner') {
-        e.currentTarget.blur();
-      }
-
-      _this.setState({
-        targetTop: targetTop
-      });
-    });
-
-    Concertina_defineProperty(Concertina_assertThisInitialized(_this), "updateHeadingsImpl", function () {
-      var scrollEl = _this.state.scrollEl;
-
-      if (!scrollEl) {
-        return;
-      }
-
-      var top = scrollEl.scrollTop;
-
-      function reduceTop(show, panel) {
-        if (panel.offsetTop !== undefined && panel.offsetTop < top) {
-          top += panel.headingHeight;
-          return show + 1;
+        return ye(e, t);
+    }
+    function be(e) {
+        var t = me();
+        return function n() {
+            var r = ke(e), o;
+            if (t) {
+                var i = ke(this).constructor;
+                o = Reflect.construct(r, arguments, i);
+            } else {
+                o = r.apply(this, arguments);
+            }
+            return ve(this, o);
+        };
+    }
+    function ve(e, t) {
+        if (t && (re(t) === "object" || typeof t === "function")) {
+            return t;
         }
-
-        return show;
-      }
-
-      var bottom = top + scrollEl.clientHeight;
-
-      function reduceBottom(show, panel) {
-        if (panel.offsetTop !== undefined && panel.offsetTop + panel.headingHeight > bottom) {
-          bottom -= panel.headingHeight;
-          return show + 1;
+        return ge(e);
+    }
+    function ge(e) {
+        if (e === void 0) {
+            throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
-
-        return show;
-      }
-
-      _this.setState({
-        panelsTopCount: _this.panelPositions.reduce(reduceTop, 0),
-        panelsBottomCount: _this.panelPositions.reduceRight(reduceBottom, 0)
-      });
-    });
-
-    Concertina_defineProperty(Concertina_assertThisInitialized(_this), "updateHeadings", debounce_default()(_this.updateHeadingsImpl, 0));
-
-    _this.state = {
-      innerWidth: '100%',
-      panelsBottomCount: 0,
-      panelsTopCount: 0,
-      scrollEl: null
+        return e;
+    }
+    function me() {
+        if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+        if (Reflect.construct.sham) return false;
+        if (typeof Proxy === "function") return true;
+        try {
+            Date.prototype.toString.call(Reflect.construct(Date, [], (function() {})));
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
+    function ke(e) {
+        ke = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+            return t.__proto__ || Object.getPrototypeOf(t);
+        };
+        return ke(e);
+    }
+    function Se(e, t, n) {
+        if (t in e) {
+            Object.defineProperty(e, t, {
+                value: n,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+        } else {
+            e[t] = n;
+        }
+        return e;
+    }
+    var we = {
+        children: i().node,
+        description: i().node,
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        /** @private */
+        index: i().number,
+        panelId: i().string,
+        status: i().oneOf([ "normal", "warning", "error", "disabled" ]),
+        title: i().node.isRequired
+    };
+    var Ce = {
+        status: "normal"
     };
-    _this.panelPositions = [];
-    return _this;
-  }
-
-  Concertina_createClass(Concertina, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.updateHeadings.cancel();
-    }
-  }, {
-    key: "renderHeadings",
-    value: function renderHeadings(items, position) {
-      var _this2 = this;
-
-      var headings = items.map(function (item) {
-        var _item$props$index;
-
-        return /*#__PURE__*/external_react_default().createElement(Concertina_Heading, {
-          onClick: _this2.handleClick,
-          description: item.props.description,
-          panelId: item.props.panelId,
-          index: (_item$props$index = item.props.index) !== null && _item$props$index !== void 0 ? _item$props$index : 0,
-          position: position,
-          status: item.props.status,
-          key: item.props.panelId,
-          tabIndex: -1
-        }, item.props.title);
-      });
-      return headings;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      if (false) {}
-
-      var _this$props = this.props,
-          children = _this$props.children,
-          otherProps = _objectWithoutProperties(_this$props, ["children"]);
-
-      var childrenCleaned = external_react_namespaceObject.Children.toArray(children).filter(external_react_namespaceObject.isValidElement).map(function (item, index) {
-        return /*#__PURE__*/(0,external_react_namespaceObject.cloneElement)(item, {
-          index: index
+    var Oe =  function(e) {
+        he(n, e);
+        var t = be(n);
+        // @docs-props-type PanelPropsBase
+                function n(e) {
+            var r;
+            fe(this, n);
+            r = t.call(this, e);
+            Se(ge(r), "lastHeight", void 0);
+            Se(ge(r), "measureHeight", (function(e) {
+                var t, n, o;
+                if (!r.state.containerEl || !r.state.bodyEl) {
+                    return;
+                }
+                var i = r.state.containerEl.clientHeight;
+                if (i === r.lastHeight) {
+                    return;
+                }
+                var a = {
+                    headingHeight: r.state.containerEl.offsetHeight - r.state.bodyEl.offsetHeight,
+                    height: r.state.containerEl.offsetHeight,
+                    index: (t = r.props.index) !== null && t !== void 0 ? t : 0,
+                    panelId: r.props.panelId
+                };
+                r.lastHeight = i;
+                (n = (o = r.context).onChange) === null || n === void 0 ? void 0 : n.call(o, e, a);
+            }));
+            Se(ge(r), "handleResize", V()(r.measureHeight, 300));
+            Se(ge(r), "handleMount", (function(e) {
+                r.setState({
+                    containerEl: e
+                });
+                ee(r.props.elementRef, e);
+            }));
+            Se(ge(r), "handleHeadingMount", (function(e) {
+                r.setState({
+                    heading: e
+                });
+            }));
+            Se(ge(r), "handleBodyMount", (function(e) {
+                r.setState({
+                    bodyEl: e
+                });
+            }));
+            r.state = {
+                bodyEl: null,
+                containerEl: null,
+                heading: null
+            };
+            return r;
+        }
+        de(n, [ {
+            key: "componentDidUpdate",
+            value: function e(t, n) {
+                if (this.props.children !== t.children || !n.containerEl) {
+                    this.measureHeight();
+                }
+            }
+        }, {
+            key: "componentWillUnmount",
+            value: function e() {
+                this.handleResize.cancel();
+            }
+        }, {
+            key: "focus",
+            value: function e() {
+                var t;
+                (t = this.state.heading) === null || t === void 0 ? void 0 : t.focus();
+            }
+        }, {
+            key: "render",
+            value: function e() {
+                var t = this.props, o = t.children, i = t.description, a = t.index, l = t.panelId, s = t.status, c = t.style, u = t.title;
+                var f = this.context.onHeadingClick;
+                
+                return r().createElement("div", oe({
+                    ref: this.handleMount,
+                    "data-test": "panel",
+                    "data-test-panel-id": l || "".concat(a)
+                }, v()(this.props, [].concat(ie(y()(n.propTypes)), [ "style" ]))),  r().createElement($, {
+                    onClick: f,
+                    ref: this.handleHeadingMount,
+                    description: i,
+                    index: a !== null && a !== void 0 ? a : 0,
+                    panelId: l || "".concat(a),
+                    position: "inner",
+                    status: s
+                }, u),  r().createElement(d(), {
+                    target: window,
+                    eventType: "resize",
+                    listener: this.handleResize
+                }),  r().createElement(Z, {
+                    $status: s,
+                    "data-test": "body",
+                    style: c,
+                    ref: this.handleBodyMount
+                }, o));
+            }
+        } ]);
+        return n;
+    }(n.Component);
+    Se(Oe, "propTypes", we);
+    Se(Oe, "defaultProps", Ce);
+    Se(Oe, "contextType", ne);
+    /* harmony default export */    const Pe = Oe;
+    // CONCATENATED MODULE: ./src/Concertina/Concertina.tsx
+    function je(e) {
+        "@babel/helpers - typeof";
+        if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+            je = function e(t) {
+                return typeof t;
+            };
+        } else {
+            je = function e(t) {
+                return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
+            };
+        }
+        return je(e);
+    }
+    function Ee() {
+        Ee = Object.assign || function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var n = arguments[t];
+                for (var r in n) {
+                    if (Object.prototype.hasOwnProperty.call(n, r)) {
+                        e[r] = n[r];
+                    }
+                }
+            }
+            return e;
+        };
+        return Ee.apply(this, arguments);
+    }
+    function xe(e, t) {
+        if (e == null) return {};
+        var n = _e(e, t);
+        var r, o;
+        if (Object.getOwnPropertySymbols) {
+            var i = Object.getOwnPropertySymbols(e);
+            for (o = 0; o < i.length; o++) {
+                r = i[o];
+                if (t.indexOf(r) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(e, r)) continue;
+                n[r] = e[r];
+            }
+        }
+        return n;
+    }
+    function _e(e, t) {
+        if (e == null) return {};
+        var n = {};
+        var r = Object.keys(e);
+        var o, i;
+        for (i = 0; i < r.length; i++) {
+            o = r[i];
+            if (t.indexOf(o) >= 0) continue;
+            n[o] = e[o];
+        }
+        return n;
+    }
+    function He(e, t) {
+        if (!(e instanceof t)) {
+            throw new TypeError("Cannot call a class as a function");
+        }
+    }
+    function Te(e, t) {
+        for (var n = 0; n < t.length; n++) {
+            var r = t[n];
+            r.enumerable = r.enumerable || false;
+            r.configurable = true;
+            if ("value" in r) r.writable = true;
+            Object.defineProperty(e, r.key, r);
+        }
+    }
+    function Re(e, t, n) {
+        if (t) Te(e.prototype, t);
+        if (n) Te(e, n);
+        return e;
+    }
+    function Ie(e, t) {
+        if (typeof t !== "function" && t !== null) {
+            throw new TypeError("Super expression must either be null or a function");
+        }
+        e.prototype = Object.create(t && t.prototype, {
+            constructor: {
+                value: e,
+                writable: true,
+                configurable: true
+            }
         });
-      });
-      var topPanels = take_default()(childrenCleaned, this.state.panelsTopCount);
-      var bottomPanels = takeRight_default()(childrenCleaned, this.state.panelsBottomCount);
-      return /*#__PURE__*/external_react_default().createElement(StyledBox, Concertina_extends({
-        "data-test": "concertina"
-      }, otherProps), /*#__PURE__*/external_react_default().createElement((EventListener_default()), {
-        target: window,
-        eventType: "resize",
-        listener: this.handleResize
-      }), this.state.panelsTopCount > 0 && /*#__PURE__*/external_react_default().createElement(StyledTop, {
-        style: {
-          width: this.state.innerWidth
-        },
-        "data-test": "dock-top"
-      }, this.renderHeadings(topPanels, 'top')), /*#__PURE__*/external_react_default().createElement(StyledScroll, {
-        onScroll: this.handleScroll,
-        stopScrollPropagation: true,
-        key: "scroll-container",
-        elementRef: this.handleElementMount,
-        "data-test": "scroll",
-        top: this.state.targetTop,
-        onScrollComplete: this.handleScrollComplete
-      }, /*#__PURE__*/external_react_default().createElement(Concertina_ConcertinaContext.Provider, {
-        value: {
-          onHeadingClick: this.handleClick,
-          onChange: this.handleUpdate
+        if (t) qe(e, t);
+    }
+    function qe(e, t) {
+        qe = Object.setPrototypeOf || function e(t, n) {
+            t.__proto__ = n;
+            return t;
+        };
+        return qe(e, t);
+    }
+    function ze(e) {
+        var t = We();
+        return function n() {
+            var r = Be(e), o;
+            if (t) {
+                var i = Be(this).constructor;
+                o = Reflect.construct(r, arguments, i);
+            } else {
+                o = r.apply(this, arguments);
+            }
+            return Me(this, o);
+        };
+    }
+    function Me(e, t) {
+        if (t && (je(t) === "object" || typeof t === "function")) {
+            return t;
         }
-      }, childrenCleaned)), this.state.panelsBottomCount > 0 && /*#__PURE__*/external_react_default().createElement(StyledBottom, {
-        style: {
-          width: this.state.innerWidth
-        },
-        "data-test": "dock-bottom"
-      }, this.renderHeadings(bottomPanels, 'bottom')));
-    }
-  }]);
-
-  return Concertina;
-}(external_react_namespaceObject.Component);
-
-Concertina_defineProperty(Concertina, "propTypes", Concertina_propTypes);
-
-Concertina_defineProperty(Concertina, "defaultProps", Concertina_defaultProps);
-
-Concertina_defineProperty(Concertina, "Panel", Concertina_Panel);
-
-/* harmony default export */ const Concertina_Concertina = (Concertina);
-
-;// CONCATENATED MODULE: ./src/Concertina/index.ts
-
-
-module.exports = __webpack_exports__;
-/******/ })()
-;
+        return Ae(e);
+    }
+    function Ae(e) {
+        if (e === void 0) {
+            throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+        }
+        return e;
+    }
+    function We() {
+        if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+        if (Reflect.construct.sham) return false;
+        if (typeof Proxy === "function") return true;
+        try {
+            Date.prototype.toString.call(Reflect.construct(Date, [], (function() {})));
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
+    function Be(e) {
+        Be = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+            return t.__proto__ || Object.getPrototypeOf(t);
+        };
+        return Be(e);
+    }
+    function De(e, t, n) {
+        if (t in e) {
+            Object.defineProperty(e, t, {
+                value: n,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+        } else {
+            e[t] = n;
+        }
+        return e;
+    }
+    var Ne = {
+        children: i().node,
+        elementRef: i().oneOfType([ i().func, i().object ])
+    };
+    var $e = {};
+    /**
+ * @deprecated
+ * Concertina has been deprecated and will be removed in a future major version.
+ */    var Ue =  function(e) {
+        Ie(o, e);
+        var t = ze(o);
+        // @docs-props-type ConcertinaPropsBase
+                function o(e) {
+            var n;
+            He(this, o);
+            n = t.call(this, e);
+            De(Ae(n), "panelPositions", void 0);
+            De(Ae(n), "handleUpdate", (function(e, t) {
+                n.panelPositions[t.index] = t;
+                var r = 0;
+                n.panelPositions.forEach((function(e) {
+                    // eslint-disable-next-line no-param-reassign
+                    e.offsetTop = r;
+                    r += e.height || 0;
+                }));
+                n.updateHeadings();
+            }));
+            De(Ae(n), "handleElementMount", (function(e) {
+                n.setState({
+                    scrollEl: e
+                });
+ // The scrollEl gets unmounted during the animation, it's necessary to cache the
+                // recorded height until it is remounted.
+                                if (e) {
+                    n.setState({
+                        innerWidth: e.clientWidth
+                    });
+                }
+            }));
+            De(Ae(n), "handleResize", (function() {
+                n.setState((function(e) {
+                    var t;
+                    return {
+                        innerWidth: (t = e.scrollEl) === null || t === void 0 ? void 0 : t.clientWidth
+                    };
+                }));
+            }));
+            De(Ae(n), "handleScroll", (function() {
+                n.updateHeadings();
+            }));
+            De(Ae(n), "handleScrollComplete", (function() {
+                n.setState({
+                    targetTop: undefined
+                });
+            }));
+            De(Ae(n), "handleClick", (function(e, t) {
+                var r;
+                var o = t.index, i = t.position;
+                var a = n.state.scrollEl;
+                if (!a) {
+                    return;
+                }
+                var l = c()(n.panelPositions, o).map((function(e) {
+                    return e.headingHeight;
+                })).reduce((function(e, t) {
+                    return e + t;
+                }), 0);
+ // sum the heights
+                                var s = f()(n.panelPositions, n.panelPositions.length - o - 1).map((function(e) {
+                    return e.headingHeight;
+                })).reduce((function(e, t) {
+                    return e + t;
+                }), 0);
+ // sum the heights
+                                var u = a.clientHeight - l - s;
+                var p = n.panelPositions[o].height;
+                var d = ((r = n.panelPositions[o].offsetTop) !== null && r !== void 0 ? r : 0) - l;
+                var h = d - (u - p);
+                var y = u > p && (i === "bottom" || i === "inner");
+ // if the entire panel is in view, do nothing
+                                if (y && h < a.scrollTop) {
+                    return;
+                }
+                var b = y ? h : d;
+ // handleRest will shift focus;
+                                if (i !== "inner") {
+                    e.currentTarget.blur();
+                }
+                n.setState({
+                    targetTop: b
+                });
+            }));
+            De(Ae(n), "updateHeadingsImpl", (function() {
+                var e = n.state.scrollEl;
+                if (!e) {
+                    return;
+                }
+                var t = e.scrollTop;
+                function r(e, n) {
+                    if (n.offsetTop !== undefined && n.offsetTop < t) {
+                        t += n.headingHeight;
+                        return e + 1;
+                    }
+                    return e;
+                }
+                var o = t + e.clientHeight;
+                function i(e, t) {
+                    if (t.offsetTop !== undefined && t.offsetTop + t.headingHeight > o) {
+                        o -= t.headingHeight;
+                        return e + 1;
+                    }
+                    return e;
+                }
+                n.setState({
+                    panelsTopCount: n.panelPositions.reduce(r, 0),
+                    panelsBottomCount: n.panelPositions.reduceRight(i, 0)
+                });
+            }));
+            De(Ae(n), "updateHeadings", l()(n.updateHeadingsImpl, 0));
+            n.state = {
+                innerWidth: "100%",
+                panelsBottomCount: 0,
+                panelsTopCount: 0,
+                scrollEl: null
+            };
+            n.panelPositions = [];
+            return n;
+        }
+        Re(o, [ {
+            key: "componentWillUnmount",
+            value: function e() {
+                this.updateHeadings.cancel();
+            }
+        }, {
+            key: "renderHeadings",
+            value: function e(t, n) {
+                var o = this;
+                var i = t.map((function(e) {
+                    var t;
+                    
+                    return r().createElement($, {
+                        onClick: o.handleClick,
+                        description: e.props.description,
+                        panelId: e.props.panelId,
+                        index: (t = e.props.index) !== null && t !== void 0 ? t : 0,
+                        position: n,
+                        status: e.props.status,
+                        key: e.props.panelId,
+                        tabIndex: -1
+                    }, e.props.title);
+                }));
+                return i;
+            }
+        }, {
+            key: "render",
+            value: function e() {
+                if (false) {}
+                var t = this.props, o = t.children, i = xe(t, [ "children" ]);
+                var a = n.Children.toArray(o).filter(n.isValidElement).map((function(e, t) {
+                    
+                    return (0, n.cloneElement)(e, {
+                        index: t
+                    });
+                }));
+                var l = c()(a, this.state.panelsTopCount);
+                var s = f()(a, this.state.panelsBottomCount);
+                
+                return r().createElement(Q, Ee({
+                    "data-test": "concertina"
+                }, i),  r().createElement(d(), {
+                    target: window,
+                    eventType: "resize",
+                    listener: this.handleResize
+                }), this.state.panelsTopCount > 0 &&  r().createElement(X, {
+                    style: {
+                        width: this.state.innerWidth
+                    },
+                    "data-test": "dock-top"
+                }, this.renderHeadings(l, "top")),  r().createElement(K, {
+                    onScroll: this.handleScroll,
+                    stopScrollPropagation: true,
+                    key: "scroll-container",
+                    elementRef: this.handleElementMount,
+                    "data-test": "scroll",
+                    top: this.state.targetTop,
+                    onScrollComplete: this.handleScrollComplete
+                },  r().createElement(ne.Provider, {
+                    value: {
+                        onHeadingClick: this.handleClick,
+                        onChange: this.handleUpdate
+                    }
+                }, a)), this.state.panelsBottomCount > 0 &&  r().createElement(Y, {
+                    style: {
+                        width: this.state.innerWidth
+                    },
+                    "data-test": "dock-bottom"
+                }, this.renderHeadings(s, "bottom")));
+            }
+        } ]);
+        return o;
+    }(n.Component);
+    De(Ue, "propTypes", Ne);
+    De(Ue, "defaultProps", $e);
+    De(Ue, "Panel", Pe);
+    /* harmony default export */    const Ve = Ue;
+    // CONCATENATED MODULE: ./src/Concertina/index.ts
+    module.exports = t;
+    /******/})();