@spaziodati/atoka-design-system 2.1.2 → 2.1.5

package/DetailPage/index.js

@@ -9,1725 +9,1664 @@
 		root["atoka-design-system"] = factory(root["@fortawesome/react-fontawesome"], root["classnames"], root["react"], root["react-bootstrap/Col"], root["react-bootstrap/Container"], root["react-bootstrap/Form"], root["react-bootstrap/FormControl"], root["react-bootstrap/FormText"], root["react-bootstrap/Nav"], root["react-bootstrap/Row"], root["react-dom"]);
 })(self, function(__WEBPACK_EXTERNAL_MODULE__5692__, __WEBPACK_EXTERNAL_MODULE__8310__, __WEBPACK_EXTERNAL_MODULE__8156__, __WEBPACK_EXTERNAL_MODULE__5315__, __WEBPACK_EXTERNAL_MODULE__4394__, __WEBPACK_EXTERNAL_MODULE__8721__, __WEBPACK_EXTERNAL_MODULE__1082__, __WEBPACK_EXTERNAL_MODULE__8763__, __WEBPACK_EXTERNAL_MODULE__573__, __WEBPACK_EXTERNAL_MODULE__3915__, __WEBPACK_EXTERNAL_MODULE__7111__) {
 return /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 4882:
+/***/ 9114:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-"use strict";
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "Bs4V3Wrapper": () => (/* reexport */ Bs4V3Wrapper)
+  "Z": () => (/* binding */ esm_CSSTransition)
 });
 
+// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js
+var esm_extends = __webpack_require__(32);
+// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
+var objectWithoutPropertiesLoose = __webpack_require__(7038);
+// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js + 1 modules
+var inheritsLoose = __webpack_require__(7581);
+;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/hasClass.js
+/**
+ * Checks if a given element has a CSS class.
+ * 
+ * @param element the element
+ * @param className the CSS class name
+ */
+function hasClass(element, className) {
+  if (element.classList) return !!className && element.classList.contains(className);
+  return (" " + (element.className.baseVal || element.className) + " ").indexOf(" " + className + " ") !== -1;
+}
+;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/addClass.js
+
+/**
+ * Adds a CSS class to a given element.
+ * 
+ * @param element the element
+ * @param className the CSS class name
+ */
+
+function addClass_addClass(element, className) {
+  if (element.classList) element.classList.add(className);else if (!hasClass(element, className)) if (typeof element.className === 'string') element.className = element.className + " " + className;else element.setAttribute('class', (element.className && element.className.baseVal || '') + " " + className);
+}
+;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/removeClass.js
+function replaceClassName(origClass, classToRemove) {
+  return origClass.replace(new RegExp("(^|\\s)" + classToRemove + "(?:\\s|$)", 'g'), '$1').replace(/\s+/g, ' ').replace(/^\s*|\s*$/g, '');
+}
+/**
+ * Removes a CSS class from a given element.
+ * 
+ * @param element the element
+ * @param className the CSS class name
+ */
+
+
+function removeClass_removeClass(element, className) {
+  if (element.classList) {
+    element.classList.remove(className);
+  } else if (typeof element.className === 'string') {
+    element.className = replaceClassName(element.className, className);
+  } else {
+    element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));
+  }
+}
 // EXTERNAL MODULE: external "react"
 var external_react_ = __webpack_require__(8156);
 var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-// EXTERNAL MODULE: external "classnames"
-var external_classnames_ = __webpack_require__(8310);
-var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
-;// CONCATENATED MODULE: ./src/components/Bs4V3Wrapper/Bs4V3Wrapper.tsx
-var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-
+// EXTERNAL MODULE: ./node_modules/react-transition-group/esm/Transition.js + 1 modules
+var Transition = __webpack_require__(6113);
+;// CONCATENATED MODULE: ./node_modules/react-transition-group/esm/CSSTransition.js
 
 
-var Bs4V3Wrapper = /** @class */ (function (_super) {
-    __extends(Bs4V3Wrapper, _super);
-    function Bs4V3Wrapper() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Bs4V3Wrapper.prototype.render = function () {
-        var className = external_classnames_default()('bs4-v3', this.props.className);
-        return external_react_default().createElement("div", { className: className }, this.props.children);
-    };
-    Bs4V3Wrapper.displayName = 'Bs4V3Wrapper';
-    return Bs4V3Wrapper;
-}((external_react_default()).PureComponent));
 
 
-;// CONCATENATED MODULE: ./src/components/Bs4V3Wrapper/index.ts
 
 
 
-/***/ }),
 
-/***/ 6635:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-"use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
 
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "DetailPage": () => (/* reexport */ DetailPage)
-});
+var _addClass = function addClass(node, classes) {
+  return node && classes && classes.split(' ').forEach(function (c) {
+    return addClass_addClass(node, c);
+  });
+};
 
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(8156);
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-// EXTERNAL MODULE: external "react-bootstrap/Container"
-var Container_ = __webpack_require__(4394);
-var Container_default = /*#__PURE__*/__webpack_require__.n(Container_);
-// EXTERNAL MODULE: external "react-bootstrap/Row"
-var Row_ = __webpack_require__(3915);
-var Row_default = /*#__PURE__*/__webpack_require__.n(Row_);
-// EXTERNAL MODULE: external "react-bootstrap/Col"
-var Col_ = __webpack_require__(5315);
-var Col_default = /*#__PURE__*/__webpack_require__.n(Col_);
-// EXTERNAL MODULE: ./src/components/Bs4V3Wrapper/index.ts + 1 modules
-var Bs4V3Wrapper = __webpack_require__(4882);
-// EXTERNAL MODULE: ./src/components/Utils/Utils.tsx
-var Utils = __webpack_require__(5654);
-// EXTERNAL MODULE: ./src/components/FadeAnimation/index.ts + 1 modules
-var FadeAnimation = __webpack_require__(1018);
-;// CONCATENATED MODULE: ./src/components/DetailPage/DetailPageHeaderContainer.tsx
-var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var removeClass = function removeClass(node, classes) {
+  return node && classes && classes.split(' ').forEach(function (c) {
+    return removeClass_removeClass(node, c);
+  });
+};
+/**
+ * A transition component inspired by the excellent
+ * [ng-animate](https://docs.angularjs.org/api/ngAnimate) library, you should
+ * use it if you're using CSS transitions or animations. It's built upon the
+ * [`Transition`](https://reactcommunity.org/react-transition-group/transition)
+ * component, so it inherits all of its props.
+ *
+ * `CSSTransition` applies a pair of class names during the `appear`, `enter`,
+ * and `exit` states of the transition. The first class is applied and then a
+ * second `*-active` class in order to activate the CSS transition. After the
+ * transition, matching `*-done` class names are applied to persist the
+ * transition state.
+ *
+ * ```jsx
+ * function App() {
+ *   const [inProp, setInProp] = useState(false);
+ *   return (
+ *     <div>
+ *       <CSSTransition in={inProp} timeout={200} classNames="my-node">
+ *         <div>
+ *           {"I'll receive my-node-* classes"}
+ *         </div>
+ *       </CSSTransition>
+ *       <button type="button" onClick={() => setInProp(true)}>
+ *         Click to Enter
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * When the `in` prop is set to `true`, the child component will first receive
+ * the class `example-enter`, then the `example-enter-active` will be added in
+ * the next tick. `CSSTransition` [forces a
+ * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)
+ * between before adding the `example-enter-active`. This is an important trick
+ * because it allows us to transition between `example-enter` and
+ * `example-enter-active` even though they were added immediately one after
+ * another. Most notably, this is what makes it possible for us to animate
+ * _appearance_.
+ *
+ * ```css
+ * .my-node-enter {
+ *   opacity: 0;
+ * }
+ * .my-node-enter-active {
+ *   opacity: 1;
+ *   transition: opacity 200ms;
+ * }
+ * .my-node-exit {
+ *   opacity: 1;
+ * }
+ * .my-node-exit-active {
+ *   opacity: 0;
+ *   transition: opacity 200ms;
+ * }
+ * ```
+ *
+ * `*-active` classes represent which styles you want to animate **to**, so it's
+ * important to add `transition` declaration only to them, otherwise transitions
+ * might not behave as intended! This might not be obvious when the transitions
+ * are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in
+ * the example above (minus `transition`), but it becomes apparent in more
+ * complex transitions.
+ *
+ * **Note**: If you're using the
+ * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)
+ * prop, make sure to define styles for `.appear-*` classes as well.
+ */
 
 
+var CSSTransition = /*#__PURE__*/function (_React$Component) {
+  (0,inheritsLoose/* default */.Z)(CSSTransition, _React$Component);
 
+  function CSSTransition() {
+    var _this;
 
-/** Container component for the detail page header to be used as child of DetailPage. */
-var DetailPageHeaderContainer = /** @class */ (function (_super) {
-    __extends(DetailPageHeaderContainer, _super);
-    function DetailPageHeaderContainer() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
-    DetailPageHeaderContainer.prototype.render = function () {
-        return (external_react_default().createElement("div", { className: 'detail-page-header-container' },
-            external_react_default().createElement(FadeAnimation.FadeAnimation, null,
-                external_react_default().createElement((Container_default()), null, this.props.children))));
-    };
-    DetailPageHeaderContainer.displayName = 'DetailPageHeaderContainer';
-    return DetailPageHeaderContainer;
-}((external_react_default()).PureComponent));
 
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.appliedClasses = {
+      appear: {},
+      enter: {},
+      exit: {}
+    };
 
-// EXTERNAL MODULE: external "react-bootstrap/Nav"
-var Nav_ = __webpack_require__(573);
-var Nav_default = /*#__PURE__*/__webpack_require__.n(Nav_);
-;// CONCATENATED MODULE: ./src/components/DetailPage/DetailPageMenuUI.tsx
+    _this.onEnter = function (maybeNode, maybeAppearing) {
+      var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing),
+          node = _this$resolveArgument[0],
+          appearing = _this$resolveArgument[1];
 
+      _this.removeClasses(node, 'exit');
 
+      _this.addClass(node, appearing ? 'appear' : 'enter', 'base');
 
-var DetailPageMenuUI = function (props) {
-    return (external_react_default().createElement("div", { className: 'atoka-detail-page-menu' },
-        external_react_default().createElement((Nav_default()), { className: 'flex-column' }, props.children)));
-};
-DetailPageMenuUI.displayName = 'DetailPageMenuUI';
-var DetailPageSubMenu = function (props) {
-    return external_react_default().createElement("div", { className: 'atoka-detail-page-sub-menu' }, props.children);
-};
-DetailPageSubMenu.displayName = 'DetailPageSubMenu';
+      if (_this.props.onEnter) {
+        _this.props.onEnter(maybeNode, maybeAppearing);
+      }
+    };
 
-;// CONCATENATED MODULE: ./src/components/DetailPage/DetailPageBodyContainer.tsx
+    _this.onEntering = function (maybeNode, maybeAppearing) {
+      var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing),
+          node = _this$resolveArgument2[0],
+          appearing = _this$resolveArgument2[1];
 
+      var type = appearing ? 'appear' : 'enter';
 
-var DetailPageBodyContainer = function (props) {
-    return external_react_default().createElement((Col_default()), null, props.children);
-};
-DetailPageBodyContainer.displayName = 'DetailPageBodyContainer';
+      _this.addClass(node, type, 'active');
 
-// EXTERNAL MODULE: ./src/components/Spinner/index.ts + 1 modules
-var Spinner = __webpack_require__(4482);
-;// CONCATENATED MODULE: ./src/components/DetailPage/DetailPageHeaderUI.tsx
-var DetailPageHeaderUI_extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
+      if (_this.props.onEntering) {
+        _this.props.onEntering(maybeNode, maybeAppearing);
+      }
     };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+
+    _this.onEntered = function (maybeNode, maybeAppearing) {
+      var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing),
+          node = _this$resolveArgument3[0],
+          appearing = _this$resolveArgument3[1];
+
+      var type = appearing ? 'appear' : 'enter';
+
+      _this.removeClasses(node, type);
+
+      _this.addClass(node, type, 'done');
+
+      if (_this.props.onEntered) {
+        _this.props.onEntered(maybeNode, maybeAppearing);
+      }
     };
-})();
 
+    _this.onExit = function (maybeNode) {
+      var _this$resolveArgument4 = _this.resolveArguments(maybeNode),
+          node = _this$resolveArgument4[0];
 
+      _this.removeClasses(node, 'appear');
 
+      _this.removeClasses(node, 'enter');
 
-/** Container component for the detail page header to be used as child of DetailPage. */
-var DetailPageHeaderUI = /** @class */ (function (_super) {
-    DetailPageHeaderUI_extends(DetailPageHeaderUI, _super);
-    function DetailPageHeaderUI() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DetailPageHeaderUI.prototype.render = function () {
-        if (this.props.isLoading) {
-            // !This className is used in atoka-revenge smoke tests.
-            return (external_react_default().createElement("div", { className: 'user-pages-spinner-container d-flex h-100 justify-content-center align-items-center' },
-                external_react_default().createElement(Spinner.Spinner, { size: Spinner.SpinnerSize.small })));
-        }
-        return (external_react_default().createElement((Row_default()), null,
-            external_react_default().createElement((Col_default()), { xs: 4 }, this.props.leftContent),
-            external_react_default().createElement((Col_default()), { className: 'h-100 align-items-center' }, this.props.children),
-            external_react_default().createElement((Col_default()), { xs: 4 }, this.props.rightContent)));
+      _this.addClass(node, 'exit', 'base');
+
+      if (_this.props.onExit) {
+        _this.props.onExit(maybeNode);
+      }
     };
-    DetailPageHeaderUI.displayName = 'DetailPageHeaderUI';
-    return DetailPageHeaderUI;
-}((external_react_default()).PureComponent));
 
+    _this.onExiting = function (maybeNode) {
+      var _this$resolveArgument5 = _this.resolveArguments(maybeNode),
+          node = _this$resolveArgument5[0];
 
-;// CONCATENATED MODULE: ./src/components/DetailPage/DetailPageMenuContainer.tsx
+      _this.addClass(node, 'exit', 'active');
 
+      if (_this.props.onExiting) {
+        _this.props.onExiting(maybeNode);
+      }
+    };
 
-var DetailPageMenuContainer = function (props) {
-    return external_react_default().createElement((Col_default()), { xs: 4 }, props.children);
-};
-DetailPageMenuContainer.displayName = 'DetailPageMenuContainer';
+    _this.onExited = function (maybeNode) {
+      var _this$resolveArgument6 = _this.resolveArguments(maybeNode),
+          node = _this$resolveArgument6[0];
 
-;// CONCATENATED MODULE: ./src/components/DetailPage/DetailPageBodySection.tsx
+      _this.removeClasses(node, 'exit');
 
+      _this.addClass(node, 'exit', 'done');
 
-var DetailPageBodySection = function (props) {
-    return external_react_default().createElement("div", { className: 'atoka-detail-page-body-section' }, props.children);
-};
-DetailPageBodySection.displayName = 'DetailPageBodySection';
+      if (_this.props.onExited) {
+        _this.props.onExited(maybeNode);
+      }
+    };
 
-;// CONCATENATED MODULE: ./src/components/DetailPage/DetailPage.tsx
-var DetailPage_extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
+    _this.resolveArguments = function (maybeNode, maybeAppearing) {
+      return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`
+      : [maybeNode, maybeAppearing];
     };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+
+    _this.getClassNames = function (type) {
+      var classNames = _this.props.classNames;
+      var isStringClassNames = typeof classNames === 'string';
+      var prefix = isStringClassNames && classNames ? classNames + "-" : '';
+      var baseClassName = isStringClassNames ? "" + prefix + type : classNames[type];
+      var activeClassName = isStringClassNames ? baseClassName + "-active" : classNames[type + "Active"];
+      var doneClassName = isStringClassNames ? baseClassName + "-done" : classNames[type + "Done"];
+      return {
+        baseClassName: baseClassName,
+        activeClassName: activeClassName,
+        doneClassName: doneClassName
+      };
     };
-})();
 
+    return _this;
+  }
 
+  var _proto = CSSTransition.prototype;
 
+  _proto.addClass = function addClass(node, type, phase) {
+    var className = this.getClassNames(type)[phase + "ClassName"];
 
+    var _this$getClassNames = this.getClassNames('enter'),
+        doneClassName = _this$getClassNames.doneClassName;
 
+    if (type === 'appear' && phase === 'done' && doneClassName) {
+      className += " " + doneClassName;
+    } // This is to force a repaint,
+    // which is necessary in order to transition styles when adding a class name.
 
 
+    if (phase === 'active') {
+      /* eslint-disable no-unused-expressions */
+      node && node.scrollTop;
+    }
 
+    if (className) {
+      this.appliedClasses[type][phase] = className;
 
+      _addClass(node, className);
+    }
+  };
 
+  _proto.removeClasses = function removeClasses(node, type) {
+    var _this$appliedClasses$ = this.appliedClasses[type],
+        baseClassName = _this$appliedClasses$.base,
+        activeClassName = _this$appliedClasses$.active,
+        doneClassName = _this$appliedClasses$.done;
+    this.appliedClasses[type] = {};
 
+    if (baseClassName) {
+      removeClass(node, baseClassName);
+    }
 
+    if (activeClassName) {
+      removeClass(node, activeClassName);
+    }
 
-/** Container component to display detail pages.<br />
- *  You should use its special children DetailPageHeader, DetailPageMenu and DetailPageBody
- *  as containers for your stuff. */
-var DetailPage = /** @class */ (function (_super) {
-    DetailPage_extends(DetailPage, _super);
-    function DetailPage() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    if (doneClassName) {
+      removeClass(node, doneClassName);
     }
-    DetailPage.prototype.renderOtherChildren = function () {
-        var ret = [];
-        external_react_default().Children.forEach(this.props.children, function (element) {
-            if ((element === null || element === void 0 ? void 0 : element.type) !== DetailPageMenuContainer &&
-                (element === null || element === void 0 ? void 0 : element.type) !== DetailPageHeaderContainer &&
-                (element === null || element === void 0 ? void 0 : element.type) !== DetailPageBodyContainer) {
-                ret.push(element);
-            }
-        });
-        if (ret.length === 0) {
-            return null;
-        }
-        return external_react_default().createElement((Col_default()), null, ret);
-    };
-    DetailPage.prototype.render = function () {
-        return (external_react_default().createElement(Bs4V3Wrapper.Bs4V3Wrapper, null,
-            external_react_default().createElement("div", { className: 'atoka-detail-page-container' },
-                (0,Utils/* findChildByComponent */.z8)(this.props.children, DetailPageHeaderContainer),
-                external_react_default().createElement((Container_default()), null,
-                    external_react_default().createElement((Row_default()), null,
-                        (0,Utils/* findChildByComponent */.z8)(this.props.children, DetailPageMenuContainer),
-                        (0,Utils/* findChildByComponent */.z8)(this.props.children, DetailPageBodyContainer)),
-                    this.renderOtherChildren()))));
-    };
-    DetailPage.displayName = 'DetailPage';
-    DetailPage.HeaderContainer = DetailPageHeaderContainer;
-    DetailPage.HeaderUI = DetailPageHeaderUI;
-    DetailPage.MenuContainer = DetailPageMenuContainer;
-    DetailPage.MenuUI = DetailPageMenuUI;
-    DetailPage.SubMenu = DetailPageSubMenu;
-    DetailPage.BodyContainer = DetailPageBodyContainer;
-    DetailPage.BodySection = DetailPageBodySection;
-    return DetailPage;
-}((external_react_default()).PureComponent));
+  };
 
+  _proto.render = function render() {
+    var _this$props = this.props,
+        _ = _this$props.classNames,
+        props = (0,objectWithoutPropertiesLoose/* default */.Z)(_this$props, ["classNames"]);
 
-;// CONCATENATED MODULE: ./src/components/DetailPage/index.ts
+    return /*#__PURE__*/external_react_default().createElement(Transition/* default */.ZP, (0,esm_extends/* default */.Z)({}, props, {
+      onEnter: this.onEnter,
+      onEntered: this.onEntered,
+      onEntering: this.onEntering,
+      onExit: this.onExit,
+      onExiting: this.onExiting,
+      onExited: this.onExited
+    }));
+  };
 
+  return CSSTransition;
+}((external_react_default()).Component);
 
+CSSTransition.defaultProps = {
+  classNames: ''
+};
+CSSTransition.propTypes =  false ? 0 : {};
+/* harmony default export */ const esm_CSSTransition = (CSSTransition);
 
 /***/ }),
 
-/***/ 1018:
+/***/ 6113:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-"use strict";
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "FadeAnimation": () => (/* reexport */ FadeAnimation)
+  "ZP": () => (/* binding */ esm_Transition)
 });
 
+// UNUSED EXPORTS: ENTERED, ENTERING, EXITED, EXITING, UNMOUNTED
+
+// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
+var objectWithoutPropertiesLoose = __webpack_require__(7038);
+// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js + 1 modules
+var inheritsLoose = __webpack_require__(7581);
 // EXTERNAL MODULE: external "react"
 var external_react_ = __webpack_require__(8156);
 var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-// EXTERNAL MODULE: ./node_modules/react-transition-group/esm/CSSTransition.js + 5 modules
-var CSSTransition = __webpack_require__(1750);
-;// CONCATENATED MODULE: ./src/components/FadeAnimation/FadeAnimation.tsx
-var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-
-
-
-var FadeAnimation = /** @class */ (function (_super) {
-    __extends(FadeAnimation, _super);
-    function FadeAnimation() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FadeAnimation.prototype.render = function () {
-        var _a = this.props, duration = _a.duration, appearDelay = _a.appearDelay, name = "atoka-fadein-" + duration + "-" + appearDelay;
-        return (external_react_default().createElement(CSSTransition/* default */.Z, { timeout: duration + appearDelay, classNames: name, in: this.props.in, appear: true }, this.props.children));
-    };
-    FadeAnimation.displayName = 'FadeAnimation';
-    FadeAnimation.defaultProps = {
-        duration: 600,
-        appearDelay: 0,
-        in: true,
-    };
-    return FadeAnimation;
-}((external_react_default()).PureComponent));
-
+// EXTERNAL MODULE: external "react-dom"
+var external_react_dom_ = __webpack_require__(7111);
+var external_react_dom_default = /*#__PURE__*/__webpack_require__.n(external_react_dom_);
+;// CONCATENATED MODULE: ./node_modules/react-transition-group/esm/config.js
+/* harmony default export */ const config = ({
+  disabled: false
+});
+// EXTERNAL MODULE: ./node_modules/react-transition-group/esm/TransitionGroupContext.js
+var TransitionGroupContext = __webpack_require__(3493);
+;// CONCATENATED MODULE: ./node_modules/react-transition-group/esm/Transition.js
 
-;// CONCATENATED MODULE: ./src/components/FadeAnimation/index.ts
 
 
 
-/***/ }),
 
-/***/ 9316:
-/***/ ((__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) => {
 
-"use strict";
 
-// UNUSED EXPORTS: Form
 
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(8156);
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-// EXTERNAL MODULE: external "classnames"
-var external_classnames_ = __webpack_require__(8310);
-var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
-// EXTERNAL MODULE: external "react-bootstrap/Form"
-var Form_ = __webpack_require__(8721);
-var Form_default = /*#__PURE__*/__webpack_require__.n(Form_);
-;// CONCATENATED MODULE: ./src/components/Form/FormLabel.tsx
-
-
-
-
-var FormLabel = external_react_default().memo(function (props) {
-    var className = external_classnames_default()(props === null || props === void 0 ? void 0 : props.className, 'atoka-form-label');
-    return external_react_default().createElement((Form_default()).Label, { className: className }, props.children);
-});
-FormLabel.displayName = 'FormLabel';
+var UNMOUNTED = 'unmounted';
+var EXITED = 'exited';
+var ENTERING = 'entering';
+var ENTERED = 'entered';
+var EXITING = 'exiting';
+/**
+ * The Transition component lets you describe a transition from one component
+ * state to another _over time_ with a simple declarative API. Most commonly
+ * it's used to animate the mounting and unmounting of a component, but can also
+ * be used to describe in-place transition states as well.
+ *
+ * ---
+ *
+ * **Note**: `Transition` is a platform-agnostic base component. If you're using
+ * transitions in CSS, you'll probably want to use
+ * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)
+ * instead. It inherits all the features of `Transition`, but contains
+ * additional features necessary to play nice with CSS transitions (hence the
+ * name of the component).
+ *
+ * ---
+ *
+ * By default the `Transition` component does not alter the behavior of the
+ * component it renders, it only tracks "enter" and "exit" states for the
+ * components. It's up to you to give meaning and effect to those states. For
+ * example we can add styles to a component when it enters or exits:
+ *
+ * ```jsx
+ * import { Transition } from 'react-transition-group';
+ *
+ * const duration = 300;
+ *
+ * const defaultStyle = {
+ *   transition: `opacity ${duration}ms ease-in-out`,
+ *   opacity: 0,
+ * }
+ *
+ * const transitionStyles = {
+ *   entering: { opacity: 1 },
+ *   entered:  { opacity: 1 },
+ *   exiting:  { opacity: 0 },
+ *   exited:  { opacity: 0 },
+ * };
+ *
+ * const Fade = ({ in: inProp }) => (
+ *   <Transition in={inProp} timeout={duration}>
+ *     {state => (
+ *       <div style={{
+ *         ...defaultStyle,
+ *         ...transitionStyles[state]
+ *       }}>
+ *         I'm a fade Transition!
+ *       </div>
+ *     )}
+ *   </Transition>
+ * );
+ * ```
+ *
+ * There are 4 main states a Transition can be in:
+ *  - `'entering'`
+ *  - `'entered'`
+ *  - `'exiting'`
+ *  - `'exited'`
+ *
+ * Transition state is toggled via the `in` prop. When `true` the component
+ * begins the "Enter" stage. During this stage, the component will shift from
+ * its current transition state, to `'entering'` for the duration of the
+ * transition and then to the `'entered'` stage once it's complete. Let's take
+ * the following example (we'll use the
+ * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):
+ *
+ * ```jsx
+ * function App() {
+ *   const [inProp, setInProp] = useState(false);
+ *   return (
+ *     <div>
+ *       <Transition in={inProp} timeout={500}>
+ *         {state => (
+ *           // ...
+ *         )}
+ *       </Transition>
+ *       <button onClick={() => setInProp(true)}>
+ *         Click to Enter
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * When the button is clicked the component will shift to the `'entering'` state
+ * and stay there for 500ms (the value of `timeout`) before it finally switches
+ * to `'entered'`.
+ *
+ * When `in` is `false` the same thing happens except the state moves from
+ * `'exiting'` to `'exited'`.
+ */
 
-// EXTERNAL MODULE: ./src/components/Form/FormControl.tsx + 1 modules
-var FormControl = __webpack_require__(3422);
-;// CONCATENATED MODULE: ./src/components/Form/FormCheckbox.tsx
-var __assign = (undefined && undefined.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
+var Transition = /*#__PURE__*/function (_React$Component) {
+  (0,inheritsLoose/* default */.Z)(Transition, _React$Component);
 
+  function Transition(props, context) {
+    var _this;
 
+    _this = _React$Component.call(this, props, context) || this;
+    var parentGroup = context; // In the context of a TransitionGroup all enters are really appears
 
+    var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
+    var initialStatus;
+    _this.appearStatus = null;
 
-var FormCheckbox = function (props) {
-    var _a;
-    var className = external_classnames_default()('atoka-form-checkbox', props === null || props === void 0 ? void 0 : props.className);
-    return external_react_default().createElement((Form_default()).Check, __assign({ type: 'checkbox' }, props, { custom: true, className: className, label: (_a = props.label) !== null && _a !== void 0 ? _a : '' }));
-};
-FormCheckbox.displayName = 'FormCheckbox';
+    if (props["in"]) {
+      if (appear) {
+        initialStatus = EXITED;
+        _this.appearStatus = ENTERING;
+      } else {
+        initialStatus = ENTERED;
+      }
+    } else {
+      if (props.unmountOnExit || props.mountOnEnter) {
+        initialStatus = UNMOUNTED;
+      } else {
+        initialStatus = EXITED;
+      }
+    }
 
-;// CONCATENATED MODULE: ./src/components/Form/FormRadio.tsx
-var FormRadio_assign = (undefined && undefined.__assign) || function () {
-    FormRadio_assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
+    _this.state = {
+      status: initialStatus
     };
-    return FormRadio_assign.apply(this, arguments);
-};
-
-
+    _this.nextCallback = null;
+    return _this;
+  }
 
+  Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
+    var nextIn = _ref["in"];
 
-var FormRadio = function (props) {
-    var _a;
-    var className = external_classnames_default()(props === null || props === void 0 ? void 0 : props.className, 'atoka-form-radio');
-    return external_react_default().createElement((Form_default()).Check, FormRadio_assign({ type: 'radio' }, props, { custom: true, className: className, label: (_a = props.label) !== null && _a !== void 0 ? _a : '' }));
-};
-FormRadio.displayName = 'FormRadio';
+    if (nextIn && prevState.status === UNMOUNTED) {
+      return {
+        status: EXITED
+      };
+    }
 
-// EXTERNAL MODULE: external "react-bootstrap/FormText"
-var FormText_ = __webpack_require__(8763);
-var FormText_default = /*#__PURE__*/__webpack_require__.n(FormText_);
-;// CONCATENATED MODULE: ./src/components/Form/FormHelp.tsx
-var __rest = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+    return null;
+  } // getSnapshotBeforeUpdate(prevProps) {
+  //   let nextStatus = null
+  //   if (prevProps !== this.props) {
+  //     const { status } = this.state
+  //     if (this.props.in) {
+  //       if (status !== ENTERING && status !== ENTERED) {
+  //         nextStatus = ENTERING
+  //       }
+  //     } else {
+  //       if (status === ENTERING || status === ENTERED) {
+  //         nextStatus = EXITING
+  //       }
+  //     }
+  //   }
+  //   return { nextStatus }
+  // }
+  ;
 
+  var _proto = Transition.prototype;
 
+  _proto.componentDidMount = function componentDidMount() {
+    this.updateStatus(true, this.appearStatus);
+  };
 
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var nextStatus = null;
 
-var FormHelp = external_react_default().memo(function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    var className = external_classnames_default()('d-block', props === null || props === void 0 ? void 0 : props.className);
-    return (external_react_default().createElement((FormText_default()), { bsPrefix: 'atoka-form-help', className: className }, children));
-});
-FormHelp.displayName = 'FormHelp';
+    if (prevProps !== this.props) {
+      var status = this.state.status;
 
-;// CONCATENATED MODULE: ./src/components/Form/Form.tsx
-var Form_assign = (undefined && undefined.__assign) || function () {
-    Form_assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
+      if (this.props["in"]) {
+        if (status !== ENTERING && status !== ENTERED) {
+          nextStatus = ENTERING;
         }
-        return t;
-    };
-    return Form_assign.apply(this, arguments);
-};
-
-
-
-
-
-
-
-
-
-var Form = function (props) {
-    var className = external_classnames_default()(props === null || props === void 0 ? void 0 : props.className, 'atoka-form');
-    return (external_react_default().createElement((Form_default()), Form_assign({}, props, { className: className }), props.children));
-};
-Form.displayName = 'Form';
-Form.Control = FormControl/* FormControl */.N;
-Form.Label = FormLabel;
-Form.Checkbox = FormCheckbox;
-Form.Radio = FormRadio;
-Form.File = (Form_default()).File;
-Form.Switch = (Form_default()).Switch;
-Form.Help = FormHelp;
-Form.Group = (Form_default()).Group;
-
-
-
-/***/ }),
-
-/***/ 3422:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "N": () => (/* binding */ FormControl)
-});
-
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(8156);
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-// EXTERNAL MODULE: external "classnames"
-var external_classnames_ = __webpack_require__(8310);
-var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
-// EXTERNAL MODULE: external "react-bootstrap/FormControl"
-var FormControl_ = __webpack_require__(1082);
-var FormControl_default = /*#__PURE__*/__webpack_require__.n(FormControl_);
-;// CONCATENATED MODULE: ./src/components/Form/FormControlFeedBack.tsx
-var __rest = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
+      } else {
+        if (status === ENTERING || status === ENTERED) {
+          nextStatus = EXITING;
         }
-    return t;
-};
+      }
+    }
 
+    this.updateStatus(false, nextStatus);
+  };
 
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.cancelNextCallback();
+  };
 
-var FormControlFeedBack = external_react_default().memo(function (_a) {
-    var _b = _a.show, show = _b === void 0 ? true : _b, props = __rest(_a, ["show"]);
-    var className = external_classnames_default()(props === null || props === void 0 ? void 0 : props.className, 'atoka-form-control-feedback', {
-        'd-block': show,
-    });
-    return (external_react_default().createElement((FormControl_default()).Feedback, { type: props.type, className: className }, props.children));
-});
-FormControlFeedBack.displayName = ' FormControlFeedBack';
+  _proto.getTimeouts = function getTimeouts() {
+    var timeout = this.props.timeout;
+    var exit, enter, appear;
+    exit = enter = appear = timeout;
 
-;// CONCATENATED MODULE: ./src/components/Form/FormControl.tsx
-var FormControl_rest = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+    if (timeout != null && typeof timeout !== 'number') {
+      exit = timeout.exit;
+      enter = timeout.enter; // TODO: remove fallback for next major
 
+      appear = timeout.appear !== undefined ? timeout.appear : enter;
+    }
 
+    return {
+      exit: exit,
+      enter: enter,
+      appear: appear
+    };
+  };
 
+  _proto.updateStatus = function updateStatus(mounting, nextStatus) {
+    if (mounting === void 0) {
+      mounting = false;
+    }
 
+    if (nextStatus !== null) {
+      // nextStatus will always be ENTERING or EXITING.
+      this.cancelNextCallback();
 
-var FormControlComponent = external_react_default().forwardRef(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? 'md' : _b, props = FormControl_rest(_a, ["size"]);
-    var className = external_classnames_default()('atoka-form-control', props === null || props === void 0 ? void 0 : props.className, {
-        'atoka-shadow': props.withShadow,
-        'disabled': props.disabled,
-    });
-    return (external_react_default().createElement((FormControl_default()), { as: props.as, rows: props.rows, cols: props.cols, placeholder: props.placeholder, className: className, disabled: props.disabled, readOnly: props.readOnly, value: props.value, onChange: props.onChange, onKeyPress: props.onKeyPress, onKeyDown: props.onKeyDown, defaultValue: props.defaultValue, size: size === 'md' ? undefined : size, type: props.type, id: props.id, isValid: props.isValid, isInvalid: props.isInvalid, ref: ref, autoComplete: 'off' }, props.children));
-});
-FormControlComponent.displayName = 'FormControlComponent';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-var FormControl = FormControlComponent;
-FormControl.FeedBack = FormControlFeedBack;
-FormControl.displayName = 'FormControl';
+      if (nextStatus === ENTERING) {
+        this.performEnter(mounting);
+      } else {
+        this.performExit();
+      }
+    } else if (this.props.unmountOnExit && this.state.status === EXITED) {
+      this.setState({
+        status: UNMOUNTED
+      });
+    }
+  };
 
+  _proto.performEnter = function performEnter(mounting) {
+    var _this2 = this;
 
+    var enter = this.props.enter;
+    var appearing = this.context ? this.context.isMounting : mounting;
 
-/***/ }),
+    var _ref2 = this.props.nodeRef ? [appearing] : [external_react_dom_default().findDOMNode(this), appearing],
+        maybeNode = _ref2[0],
+        maybeAppearing = _ref2[1];
 
-/***/ 4482:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+    var timeouts = this.getTimeouts();
+    var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
+    // if we are mounting and running this it means appear _must_ be set
 
-"use strict";
+    if (!mounting && !enter || config.disabled) {
+      this.safeSetState({
+        status: ENTERED
+      }, function () {
+        _this2.props.onEntered(maybeNode);
+      });
+      return;
+    }
 
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "Spinner": () => (/* reexport */ Spinner),
-  "SpinnerSize": () => (/* reexport */ SpinnerSize)
-});
+    this.props.onEnter(maybeNode, maybeAppearing);
+    this.safeSetState({
+      status: ENTERING
+    }, function () {
+      _this2.props.onEntering(maybeNode, maybeAppearing);
 
-// EXTERNAL MODULE: external "classnames"
-var external_classnames_ = __webpack_require__(8310);
-var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(8156);
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-;// CONCATENATED MODULE: ./src/components/Spinner/Spinner.tsx
-var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+      _this2.onTransitionEnd(enterTimeout, function () {
+        _this2.safeSetState({
+          status: ENTERED
+        }, function () {
+          _this2.props.onEntered(maybeNode, maybeAppearing);
+        });
+      });
+    });
+  };
 
+  _proto.performExit = function performExit() {
+    var _this3 = this;
 
+    var exit = this.props.exit;
+    var timeouts = this.getTimeouts();
+    var maybeNode = this.props.nodeRef ? undefined : external_react_dom_default().findDOMNode(this); // no exit animation skip right to EXITED
 
-var SpinnerSize;
-(function (SpinnerSize) {
-    SpinnerSize[SpinnerSize["mini"] = 0] = "mini";
-    SpinnerSize[SpinnerSize["small"] = 1] = "small";
-    SpinnerSize[SpinnerSize["big"] = 2] = "big";
-    SpinnerSize[SpinnerSize["modal"] = 3] = "modal";
-})(SpinnerSize || (SpinnerSize = {}));
-/**
- * ### Overview
- *
- * We can find two different spinners in the Atoka interface, small and big. The **small** one is used to show that a specific section inside the page is loading. The **big** spinner on the other hand shows when the whole page is loading.
- *
- * ### Best practice
- *
- * Use the spinner if the waiting time is between 0.1 and 1 second. After one second, the user gets the impression that the app is slow: in that case, use a progress indicator instead.
- **/
-var Spinner = /** @class */ (function (_super) {
-    __extends(Spinner, _super);
-    function Spinner() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    if (!exit || config.disabled) {
+      this.safeSetState({
+        status: EXITED
+      }, function () {
+        _this3.props.onExited(maybeNode);
+      });
+      return;
     }
-    Spinner.prototype.renderOnlyDotsSpinner = function (size) {
-        var className = 'atoka-spinner spinner-' + size + ' ' + this.props.className;
-        return (external_react_default().createElement("div", { className: className },
-            external_react_default().createElement("div", { className: 'spinner-dot1' },
-                external_react_default().createElement("div", { className: 'spinner-leaf' })),
-            external_react_default().createElement("div", { className: 'spinner-dot2' },
-                external_react_default().createElement("div", { className: 'spinner-leaf' })),
-            external_react_default().createElement("div", { className: 'spinner-dot3' },
-                external_react_default().createElement("div", { className: 'spinner-leaf' }))));
-    };
-    Spinner.prototype.renderSmall = function () {
-        return this.renderOnlyDotsSpinner('small');
-    };
-    Spinner.prototype.renderMini = function () {
-        return this.renderOnlyDotsSpinner('mini');
-    };
-    Spinner.prototype.renderLeaf = function () {
-        return (external_react_default().createElement("svg", { viewBox: '0 0 204.01 190.64', version: '1.1', xmlns: 'http://www.w3.org/2000/svg' },
-            external_react_default().createElement("g", { id: 'leaf' },
-                external_react_default().createElement("path", { d: 'M80.88,7.62a26,26,0,0,0-36.79,36.8,25.85,25.85,0,0,0,13.4,7.14V83.39c1.19,0,2.4-.08,3.62-.08,2.16,0,4.28.08,6.38.23v-32A26,26,0,0,0,80.88,7.62ZM73.81,37.35a16,16,0,1,1,0-22.66,15.92,15.92,0,0,1,0,22.66Z' }))));
-    };
-    Spinner.prototype.renderLetter = function () {
-        return (external_react_default().createElement("svg", { viewBox: '0 0 204.01 190.64', version: '1.1', xmlns: 'http://www.w3.org/2000/svg' },
-            external_react_default().createElement("g", { id: 'logo-vector' },
-                external_react_default().createElement("path", { d: 'M110.77,180.67V140.16a50.47,50.47,0,1,0-22,41.71L93.12,187a10,10,0,0,0,17.65-6.34Zm-81-40.51a30.5,30.5,0,1,1,30.5,30.5,30.49,30.49,0,0,1-30.5-30.5Z' }))));
-    };
-    Spinner.prototype.renderBig = function () {
-        var spinnerClassName = external_classnames_default()(this.props.className, {
-            'atoka-spinner': true,
-            'spinner-big': this.props.size === SpinnerSize.big,
-            'spinner-medium': this.props.size === SpinnerSize.modal,
-        }), containerClassName = external_classnames_default()({
-            'container-fluid spinner-modal': this.props.size === SpinnerSize.modal,
+
+    this.props.onExit(maybeNode);
+    this.safeSetState({
+      status: EXITING
+    }, function () {
+      _this3.props.onExiting(maybeNode);
+
+      _this3.onTransitionEnd(timeouts.exit, function () {
+        _this3.safeSetState({
+          status: EXITED
+        }, function () {
+          _this3.props.onExited(maybeNode);
         });
-        return (external_react_default().createElement("div", { className: containerClassName },
-            external_react_default().createElement("div", { className: spinnerClassName },
-                external_react_default().createElement("div", { className: 'spinner-dot1' },
-                    external_react_default().createElement("div", { className: 'spinner-leaf' }, this.renderLeaf())),
-                external_react_default().createElement("div", { className: 'spinner-dot2' },
-                    external_react_default().createElement("div", { className: 'spinner-leaf' }, this.renderLeaf())),
-                external_react_default().createElement("div", { className: 'spinner-dot3' },
-                    external_react_default().createElement("div", { className: 'spinner-leaf' }, this.renderLeaf())),
-                external_react_default().createElement("span", { className: 'spinner-letter' }, this.renderLetter()))));
-    };
-    Spinner.prototype.render = function () {
-        switch (this.props.size) {
-            case SpinnerSize.mini:
-                return this.renderMini();
-            case SpinnerSize.small:
-                return this.renderSmall();
-            case SpinnerSize.big:
-            case SpinnerSize.modal:
-                return this.renderBig();
-            default:
-                return null;
-        }
-    };
-    Spinner.displayName = 'Spinner';
-    Spinner.defaultProps = {
-        size: SpinnerSize.small,
-        className: '',
-    };
-    return Spinner;
-}((external_react_default()).Component));
+      });
+    });
+  };
 
+  _proto.cancelNextCallback = function cancelNextCallback() {
+    if (this.nextCallback !== null) {
+      this.nextCallback.cancel();
+      this.nextCallback = null;
+    }
+  };
+
+  _proto.safeSetState = function safeSetState(nextState, callback) {
+    // This shouldn't be necessary, but there are weird race conditions with
+    // setState callbacks and unmounting in testing, so always make sure that
+    // we can cancel any pending setState callbacks after we unmount.
+    callback = this.setNextCallback(callback);
+    this.setState(nextState, callback);
+  };
+
+  _proto.setNextCallback = function setNextCallback(callback) {
+    var _this4 = this;
 
-;// CONCATENATED MODULE: ./src/components/Spinner/index.ts
+    var active = true;
 
+    this.nextCallback = function (event) {
+      if (active) {
+        active = false;
+        _this4.nextCallback = null;
+        callback(event);
+      }
+    };
 
+    this.nextCallback.cancel = function () {
+      active = false;
+    };
 
-/***/ }),
+    return this.nextCallback;
+  };
 
-/***/ 5654:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+  _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {
+    this.setNextCallback(handler);
+    var node = this.props.nodeRef ? this.props.nodeRef.current : external_react_dom_default().findDOMNode(this);
+    var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
 
-"use strict";
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "z8": () => (/* binding */ findChildByComponent)
-/* harmony export */ });
-/* unused harmony exports findChildrenByComponent, hasChildIconOrCheckboxComponent, scrollToTop, zip, sortObjDesc, clone, getDebouncer, deepEqual, rgbToHex */
-/* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5692);
-/* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8156);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _Form_Form__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9316);
-var __read = (undefined && undefined.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
+    if (!node || doesNotHaveTimeoutOrListener) {
+      setTimeout(this.nextCallback, 0);
+      return;
     }
-    return ar;
-};
-
 
+    if (this.props.addEndListener) {
+      var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],
+          maybeNode = _ref3[0],
+          maybeNextCallback = _ref3[1];
 
-function findChildrenByComponent(children, 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-component) {
-    var ret = [];
-    react__WEBPACK_IMPORTED_MODULE_1___default().Children.forEach(children, function (element) {
-        if ((element === null || element === void 0 ? void 0 : element.type) === component) {
-            ret.push(element);
-        }
-    });
-    return ret;
-}
-function findChildByComponent(children, 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-component) {
-    var _a, _b;
-    return (_b = (_a = findChildrenByComponent(children, component)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null;
-}
-function hasChildIconOrCheckboxComponent(children) {
-    var ret = false;
-    React.Children.forEach(children, function (element) {
-        if ((element === null || element === void 0 ? void 0 : element.type) != null &&
-            ((element === null || element === void 0 ? void 0 : element.type) === FontAwesomeIcon || (element === null || element === void 0 ? void 0 : element.type) === 'i' || (element === null || element === void 0 ? void 0 : element.type) === Form.Checkbox)) {
-            ret = true;
-            return;
-        }
-    });
-    return ret;
-}
-function scrollToTop() {
-    window.scrollTo(0, 0);
-}
-function zip(arr1, arr2) {
-    var ret = [];
-    var i = 0;
-    while (arr1[i]) {
-        ret.push(arr1[i]);
-        ret.push(arr2[i++]);
-    }
-    return ret;
-}
-// eslint-disable-next-line @typescript-eslint/ban-types
-function sortObjDesc(accessor) {
-    return function (a, b) {
-        var leftVal = 0, rightVal = 0;
-        if ((a === null || a === void 0 ? void 0 : a[accessor]) != null) {
-            leftVal = a === null || a === void 0 ? void 0 : a[accessor];
-        }
-        if ((b === null || b === void 0 ? void 0 : b[accessor]) != null) {
-            rightVal = b === null || b === void 0 ? void 0 : b[accessor];
-        }
-        return leftVal > rightVal ? -1 : 1;
-    };
-}
-function clone(ob) {
-    return JSON.parse(JSON.stringify(ob));
-}
-function getDebouncer(delay) {
-    if (delay === void 0) { delay = 1; }
-    var debounceTimeout = null;
-    return function debounce(f) {
-        if (debounceTimeout !== null) {
-            clearTimeout(debounceTimeout);
-        }
-        debounceTimeout = window.setTimeout(f, delay);
-    };
-}
-function isObject(obj) {
-    return typeof obj === 'object' && obj != null;
-}
-function deepEqual(obj1, obj2) {
-    if (obj1 === obj2) {
-        return true;
-    }
-    if (isObject(obj1) && isObject(obj2)) {
-        if (Object.keys(obj1).length !== Object.keys(obj2).length) {
-            return false;
-        }
-        for (var prop in obj1) {
-            if (!deepEqual(obj1[prop], obj2[prop])) {
-                return false;
-            }
-        }
-        return true;
+      this.props.addEndListener(maybeNode, maybeNextCallback);
     }
-    return false;
-}
-function componentToHex(c) {
-    if (isNaN(c)) {
-        throw Error('The color has not been written correctly');
+
+    if (timeout != null) {
+      setTimeout(this.nextCallback, timeout);
     }
-    var hex = c.toString(16).toUpperCase();
-    return hex.length === 1 ? '0' + hex : hex;
-}
-function cleanSingleColor(c) {
-    return c.replace(/"|'/g, '').trim();
-}
-function rgbToHex(rgb) {
-    if (rgb.includes('rgba')) {
-        throw Error('not implemented');
+  };
+
+  _proto.render = function render() {
+    var status = this.state.status;
+
+    if (status === UNMOUNTED) {
+      return null;
     }
-    var _a = __read(rgb
-        .replace('rgb', '')
-        .replace(/\(|\)/gi, '')
-        .split(',')
-        .map(function (c) { return parseInt(cleanSingleColor(c), 10); }), 3), _b = _a[0], r = _b === void 0 ? 0 : _b, _c = _a[1], g = _c === void 0 ? 0 : _c, _d = _a[2], b = _d === void 0 ? 0 : _d;
-    return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
-}
 
+    var _this$props = this.props,
+        children = _this$props.children,
+        _in = _this$props["in"],
+        _mountOnEnter = _this$props.mountOnEnter,
+        _unmountOnExit = _this$props.unmountOnExit,
+        _appear = _this$props.appear,
+        _enter = _this$props.enter,
+        _exit = _this$props.exit,
+        _timeout = _this$props.timeout,
+        _addEndListener = _this$props.addEndListener,
+        _onEnter = _this$props.onEnter,
+        _onEntering = _this$props.onEntering,
+        _onEntered = _this$props.onEntered,
+        _onExit = _this$props.onExit,
+        _onExiting = _this$props.onExiting,
+        _onExited = _this$props.onExited,
+        _nodeRef = _this$props.nodeRef,
+        childProps = (0,objectWithoutPropertiesLoose/* default */.Z)(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
 
-/***/ }),
+    return (
+      /*#__PURE__*/
+      // allows for nested Transitions
+      external_react_default().createElement(TransitionGroupContext/* default.Provider */.Z.Provider, {
+        value: null
+      }, typeof children === 'function' ? children(status, childProps) : external_react_default().cloneElement(external_react_default().Children.only(children), childProps))
+    );
+  };
 
-/***/ 9112:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+  return Transition;
+}((external_react_default()).Component);
 
-"use strict";
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
+Transition.contextType = TransitionGroupContext/* default */.Z;
+Transition.propTypes =  false ? 0 : {}; // Name the function so it is clearer in the documentation
 
+function noop() {}
 
-var ReactPropTypesSecret = __webpack_require__(5073);
+Transition.defaultProps = {
+  "in": false,
+  mountOnEnter: false,
+  unmountOnExit: false,
+  appear: false,
+  enter: true,
+  exit: true,
+  onEnter: noop,
+  onEntering: noop,
+  onEntered: noop,
+  onExit: noop,
+  onExiting: noop,
+  onExited: noop
+};
+Transition.UNMOUNTED = UNMOUNTED;
+Transition.EXITED = EXITED;
+Transition.ENTERING = ENTERING;
+Transition.ENTERED = ENTERED;
+Transition.EXITING = EXITING;
+/* harmony default export */ const esm_Transition = (Transition);
 
-function emptyFunction() {}
+/***/ }),
 
-function emptyFunctionWithReset() {}
+/***/ 3493:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-emptyFunctionWithReset.resetWarningCache = emptyFunction;
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8156);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 
-module.exports = function () {
-  function shim(props, propName, componentName, location, propFullName, secret) {
-    if (secret === ReactPropTypesSecret) {
-      // It is still safe when called from React.
-      return;
-    }
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (react__WEBPACK_IMPORTED_MODULE_0___default().createContext(null));
 
-    var err = new Error('Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 'Use PropTypes.checkPropTypes() to call them. ' + 'Read more at http://fb.me/use-check-prop-types');
-    err.name = 'Invariant Violation';
-    throw err;
-  }
+/***/ }),
 
-  ;
-  shim.isRequired = shim;
+/***/ 1294:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-  function getShim() {
-    return shim;
-  }
 
-  ; // Important!
-  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
-
-  var ReactPropTypes = {
-    array: shim,
-    bool: shim,
-    func: shim,
-    number: shim,
-    object: shim,
-    string: shim,
-    symbol: shim,
-    any: shim,
-    arrayOf: getShim,
-    element: shim,
-    elementType: shim,
-    instanceOf: getShim,
-    node: shim,
-    objectOf: getShim,
-    oneOf: getShim,
-    oneOfType: getShim,
-    shape: getShim,
-    exact: getShim,
-    checkPropTypes: emptyFunctionWithReset,
-    resetWarningCache: emptyFunction
-  };
-  ReactPropTypes.PropTypes = ReactPropTypes;
-  return ReactPropTypes;
-};
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "Bs4V3Wrapper": () => (/* reexport */ Bs4V3Wrapper)
+});
 
-/***/ }),
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "classnames"
+var external_classnames_ = __webpack_require__(8310);
+var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
+;// CONCATENATED MODULE: ./src/components/Bs4V3Wrapper/Bs4V3Wrapper.tsx
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 
-/***/ 8691:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-if (false) { var throwOnDirectAccess, ReactIs; } else {
-  // By explicitly using `prop-types` you are opting into new production behavior.
-  // http://fb.me/prop-types-in-prod
-  module.exports = __webpack_require__(9112)();
-}
 
-/***/ }),
+var Bs4V3Wrapper = /** @class */ (function (_super) {
+    __extends(Bs4V3Wrapper, _super);
+    function Bs4V3Wrapper() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Bs4V3Wrapper.prototype.render = function () {
+        var className = external_classnames_default()('bs4-v3', this.props.className);
+        return external_react_default().createElement("div", { className: className }, this.props.children);
+    };
+    Bs4V3Wrapper.displayName = 'Bs4V3Wrapper';
+    return Bs4V3Wrapper;
+}((external_react_default()).PureComponent));
 
-/***/ 5073:
-/***/ ((module) => {
 
-"use strict";
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
+;// CONCATENATED MODULE: ./src/components/Bs4V3Wrapper/index.ts
 
 
-var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
-module.exports = ReactPropTypesSecret;
 
 /***/ }),
 
-/***/ 1750:
+/***/ 4716:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "Z": () => (/* binding */ esm_CSSTransition)
+  "DetailPage": () => (/* reexport */ DetailPage)
 });
 
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js
-var esm_extends = __webpack_require__(32);
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
-var objectWithoutPropertiesLoose = __webpack_require__(7038);
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js + 1 modules
-var inheritsLoose = __webpack_require__(7581);
-// EXTERNAL MODULE: ./node_modules/prop-types/index.js
-var prop_types = __webpack_require__(8691);
-;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/hasClass.js
-function hasClass(element, className) {
-  if (element.classList) return !!className && element.classList.contains(className);
-  return (" " + (element.className.baseVal || element.className) + " ").indexOf(" " + className + " ") !== -1;
-}
-;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/addClass.js
-
-function addClass_addClass(element, className) {
-  if (element.classList) element.classList.add(className);else if (!hasClass(element, className)) if (typeof element.className === 'string') element.className = element.className + " " + className;else element.setAttribute('class', (element.className && element.className.baseVal || '') + " " + className);
-}
-;// CONCATENATED MODULE: ./node_modules/dom-helpers/esm/removeClass.js
-function replaceClassName(origClass, classToRemove) {
-  return origClass.replace(new RegExp("(^|\\s)" + classToRemove + "(?:\\s|$)", 'g'), '$1').replace(/\s+/g, ' ').replace(/^\s*|\s*$/g, '');
-}
-
-function removeClass_removeClass(element, className) {
-  if (element.classList) {
-    element.classList.remove(className);
-  } else if (typeof element.className === 'string') {
-    ;
-    element.className = replaceClassName(element.className, className);
-  } else {
-    element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));
-  }
-}
 // EXTERNAL MODULE: external "react"
 var external_react_ = __webpack_require__(8156);
 var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-// EXTERNAL MODULE: external "react-dom"
-var external_react_dom_ = __webpack_require__(7111);
-var external_react_dom_default = /*#__PURE__*/__webpack_require__.n(external_react_dom_);
-;// CONCATENATED MODULE: ./node_modules/react-transition-group/esm/config.js
-/* harmony default export */ const config = ({
-  disabled: false
-});
-// EXTERNAL MODULE: ./node_modules/react-transition-group/esm/TransitionGroupContext.js
-var TransitionGroupContext = __webpack_require__(3493);
-;// CONCATENATED MODULE: ./node_modules/react-transition-group/esm/Transition.js
-
-
-
-
-
+// EXTERNAL MODULE: external "react-bootstrap/Container"
+var Container_ = __webpack_require__(4394);
+var Container_default = /*#__PURE__*/__webpack_require__.n(Container_);
+// EXTERNAL MODULE: external "react-bootstrap/Row"
+var Row_ = __webpack_require__(3915);
+var Row_default = /*#__PURE__*/__webpack_require__.n(Row_);
+// EXTERNAL MODULE: external "react-bootstrap/Col"
+var Col_ = __webpack_require__(5315);
+var Col_default = /*#__PURE__*/__webpack_require__.n(Col_);
+// EXTERNAL MODULE: ./src/components/Bs4V3Wrapper/index.ts + 1 modules
+var Bs4V3Wrapper = __webpack_require__(1294);
+// EXTERNAL MODULE: ./src/components/Utils/Utils.tsx
+var Utils = __webpack_require__(4915);
+// EXTERNAL MODULE: ./src/components/FadeAnimation/index.ts + 1 modules
+var FadeAnimation = __webpack_require__(577);
+;// CONCATENATED MODULE: ./src/components/DetailPage/DetailPageHeaderContainer.tsx
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 
 
 
-var UNMOUNTED = 'unmounted';
-var EXITED = 'exited';
-var ENTERING = 'entering';
-var ENTERED = 'entered';
-var EXITING = 'exiting';
-/**
- * The Transition component lets you describe a transition from one component
- * state to another _over time_ with a simple declarative API. Most commonly
- * it's used to animate the mounting and unmounting of a component, but can also
- * be used to describe in-place transition states as well.
- *
- * ---
- *
- * **Note**: `Transition` is a platform-agnostic base component. If you're using
- * transitions in CSS, you'll probably want to use
- * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)
- * instead. It inherits all the features of `Transition`, but contains
- * additional features necessary to play nice with CSS transitions (hence the
- * name of the component).
- *
- * ---
- *
- * By default the `Transition` component does not alter the behavior of the
- * component it renders, it only tracks "enter" and "exit" states for the
- * components. It's up to you to give meaning and effect to those states. For
- * example we can add styles to a component when it enters or exits:
- *
- * ```jsx
- * import { Transition } from 'react-transition-group';
- *
- * const duration = 300;
- *
- * const defaultStyle = {
- *   transition: `opacity ${duration}ms ease-in-out`,
- *   opacity: 0,
- * }
- *
- * const transitionStyles = {
- *   entering: { opacity: 1 },
- *   entered:  { opacity: 1 },
- *   exiting:  { opacity: 0 },
- *   exited:  { opacity: 0 },
- * };
- *
- * const Fade = ({ in: inProp }) => (
- *   <Transition in={inProp} timeout={duration}>
- *     {state => (
- *       <div style={{
- *         ...defaultStyle,
- *         ...transitionStyles[state]
- *       }}>
- *         I'm a fade Transition!
- *       </div>
- *     )}
- *   </Transition>
- * );
- * ```
- *
- * There are 4 main states a Transition can be in:
- *  - `'entering'`
- *  - `'entered'`
- *  - `'exiting'`
- *  - `'exited'`
- *
- * Transition state is toggled via the `in` prop. When `true` the component
- * begins the "Enter" stage. During this stage, the component will shift from
- * its current transition state, to `'entering'` for the duration of the
- * transition and then to the `'entered'` stage once it's complete. Let's take
- * the following example (we'll use the
- * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):
- *
- * ```jsx
- * function App() {
- *   const [inProp, setInProp] = useState(false);
- *   return (
- *     <div>
- *       <Transition in={inProp} timeout={500}>
- *         {state => (
- *           // ...
- *         )}
- *       </Transition>
- *       <button onClick={() => setInProp(true)}>
- *         Click to Enter
- *       </button>
- *     </div>
- *   );
- * }
- * ```
- *
- * When the button is clicked the component will shift to the `'entering'` state
- * and stay there for 500ms (the value of `timeout`) before it finally switches
- * to `'entered'`.
- *
- * When `in` is `false` the same thing happens except the state moves from
- * `'exiting'` to `'exited'`.
- */
 
-var Transition = /*#__PURE__*/function (_React$Component) {
-  (0,inheritsLoose/* default */.Z)(Transition, _React$Component);
+/** Container component for the detail page header to be used as child of DetailPage. */
+var DetailPageHeaderContainer = /** @class */ (function (_super) {
+    __extends(DetailPageHeaderContainer, _super);
+    function DetailPageHeaderContainer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DetailPageHeaderContainer.prototype.render = function () {
+        return (external_react_default().createElement("div", { className: 'detail-page-header-container' },
+            external_react_default().createElement(FadeAnimation.FadeAnimation, null,
+                external_react_default().createElement((Container_default()), null, this.props.children))));
+    };
+    DetailPageHeaderContainer.displayName = 'DetailPageHeaderContainer';
+    return DetailPageHeaderContainer;
+}((external_react_default()).PureComponent));
 
-  function Transition(props, context) {
-    var _this;
 
-    _this = _React$Component.call(this, props, context) || this;
-    var parentGroup = context; // In the context of a TransitionGroup all enters are really appears
+// EXTERNAL MODULE: external "react-bootstrap/Nav"
+var Nav_ = __webpack_require__(573);
+var Nav_default = /*#__PURE__*/__webpack_require__.n(Nav_);
+;// CONCATENATED MODULE: ./src/components/DetailPage/DetailPageMenuUI.tsx
 
-    var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
-    var initialStatus;
-    _this.appearStatus = null;
 
-    if (props["in"]) {
-      if (appear) {
-        initialStatus = EXITED;
-        _this.appearStatus = ENTERING;
-      } else {
-        initialStatus = ENTERED;
-      }
-    } else {
-      if (props.unmountOnExit || props.mountOnEnter) {
-        initialStatus = UNMOUNTED;
-      } else {
-        initialStatus = EXITED;
-      }
-    }
 
-    _this.state = {
-      status: initialStatus
-    };
-    _this.nextCallback = null;
-    return _this;
-  }
+var DetailPageMenuUI = function (props) {
+    return (external_react_default().createElement("div", { className: 'atoka-detail-page-menu' },
+        external_react_default().createElement((Nav_default()), { className: 'flex-column' }, props.children)));
+};
+DetailPageMenuUI.displayName = 'DetailPageMenuUI';
+var DetailPageSubMenu = function (props) {
+    return external_react_default().createElement("div", { className: 'atoka-detail-page-sub-menu' }, props.children);
+};
+DetailPageSubMenu.displayName = 'DetailPageSubMenu';
 
-  Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
-    var nextIn = _ref["in"];
+;// CONCATENATED MODULE: ./src/components/DetailPage/DetailPageBodyContainer.tsx
 
-    if (nextIn && prevState.status === UNMOUNTED) {
-      return {
-        status: EXITED
-      };
-    }
 
-    return null;
-  } // getSnapshotBeforeUpdate(prevProps) {
-  //   let nextStatus = null
-  //   if (prevProps !== this.props) {
-  //     const { status } = this.state
-  //     if (this.props.in) {
-  //       if (status !== ENTERING && status !== ENTERED) {
-  //         nextStatus = ENTERING
-  //       }
-  //     } else {
-  //       if (status === ENTERING || status === ENTERED) {
-  //         nextStatus = EXITING
-  //       }
-  //     }
-  //   }
-  //   return { nextStatus }
-  // }
-  ;
+var DetailPageBodyContainer = function (props) {
+    return external_react_default().createElement((Col_default()), null, props.children);
+};
+DetailPageBodyContainer.displayName = 'DetailPageBodyContainer';
 
-  var _proto = Transition.prototype;
+// EXTERNAL MODULE: ./src/components/Spinner/index.ts + 1 modules
+var Spinner = __webpack_require__(6216);
+;// CONCATENATED MODULE: ./src/components/DetailPage/DetailPageHeaderUI.tsx
+var DetailPageHeaderUI_extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 
-  _proto.componentDidMount = function componentDidMount() {
-    this.updateStatus(true, this.appearStatus);
-  };
 
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    var nextStatus = null;
 
-    if (prevProps !== this.props) {
-      var status = this.state.status;
 
-      if (this.props["in"]) {
-        if (status !== ENTERING && status !== ENTERED) {
-          nextStatus = ENTERING;
-        }
-      } else {
-        if (status === ENTERING || status === ENTERED) {
-          nextStatus = EXITING;
-        }
-      }
+/** Container component for the detail page header to be used as child of DetailPage. */
+var DetailPageHeaderUI = /** @class */ (function (_super) {
+    DetailPageHeaderUI_extends(DetailPageHeaderUI, _super);
+    function DetailPageHeaderUI() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
+    DetailPageHeaderUI.prototype.render = function () {
+        if (this.props.isLoading) {
+            // !This className is used in atoka-revenge smoke tests.
+            return (external_react_default().createElement("div", { className: 'user-pages-spinner-container d-flex h-100 justify-content-center align-items-center' },
+                external_react_default().createElement(Spinner.Spinner, { size: Spinner.SpinnerSize.small })));
+        }
+        return (external_react_default().createElement((Row_default()), null,
+            external_react_default().createElement((Col_default()), { xs: 4 }, this.props.leftContent),
+            external_react_default().createElement((Col_default()), { className: 'h-100 align-items-center' }, this.props.children),
+            external_react_default().createElement((Col_default()), { xs: 4 }, this.props.rightContent)));
+    };
+    DetailPageHeaderUI.displayName = 'DetailPageHeaderUI';
+    return DetailPageHeaderUI;
+}((external_react_default()).PureComponent));
 
-    this.updateStatus(false, nextStatus);
-  };
 
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    this.cancelNextCallback();
-  };
+;// CONCATENATED MODULE: ./src/components/DetailPage/DetailPageMenuContainer.tsx
 
-  _proto.getTimeouts = function getTimeouts() {
-    var timeout = this.props.timeout;
-    var exit, enter, appear;
-    exit = enter = appear = timeout;
 
-    if (timeout != null && typeof timeout !== 'number') {
-      exit = timeout.exit;
-      enter = timeout.enter; // TODO: remove fallback for next major
+var DetailPageMenuContainer = function (props) {
+    return external_react_default().createElement((Col_default()), { xs: 4 }, props.children);
+};
+DetailPageMenuContainer.displayName = 'DetailPageMenuContainer';
 
-      appear = timeout.appear !== undefined ? timeout.appear : enter;
-    }
+;// CONCATENATED MODULE: ./src/components/DetailPage/DetailPageBodySection.tsx
 
-    return {
-      exit: exit,
-      enter: enter,
-      appear: appear
+
+var DetailPageBodySection = function (props) {
+    return external_react_default().createElement("div", { className: 'atoka-detail-page-body-section' }, props.children);
+};
+DetailPageBodySection.displayName = 'DetailPageBodySection';
+
+;// CONCATENATED MODULE: ./src/components/DetailPage/DetailPage.tsx
+var DetailPage_extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
     };
-  };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 
-  _proto.updateStatus = function updateStatus(mounting, nextStatus) {
-    if (mounting === void 0) {
-      mounting = false;
-    }
 
-    if (nextStatus !== null) {
-      // nextStatus will always be ENTERING or EXITING.
-      this.cancelNextCallback();
 
-      if (nextStatus === ENTERING) {
-        this.performEnter(mounting);
-      } else {
-        this.performExit();
-      }
-    } else if (this.props.unmountOnExit && this.state.status === EXITED) {
-      this.setState({
-        status: UNMOUNTED
-      });
-    }
-  };
 
-  _proto.performEnter = function performEnter(mounting) {
-    var _this2 = this;
 
-    var enter = this.props.enter;
-    var appearing = this.context ? this.context.isMounting : mounting;
 
-    var _ref2 = this.props.nodeRef ? [appearing] : [external_react_dom_default().findDOMNode(this), appearing],
-        maybeNode = _ref2[0],
-        maybeAppearing = _ref2[1];
 
-    var timeouts = this.getTimeouts();
-    var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
-    // if we are mounting and running this it means appear _must_ be set
 
-    if (!mounting && !enter || config.disabled) {
-      this.safeSetState({
-        status: ENTERED
-      }, function () {
-        _this2.props.onEntered(maybeNode);
-      });
-      return;
-    }
 
-    this.props.onEnter(maybeNode, maybeAppearing);
-    this.safeSetState({
-      status: ENTERING
-    }, function () {
-      _this2.props.onEntering(maybeNode, maybeAppearing);
 
-      _this2.onTransitionEnd(enterTimeout, function () {
-        _this2.safeSetState({
-          status: ENTERED
-        }, function () {
-          _this2.props.onEntered(maybeNode, maybeAppearing);
-        });
-      });
-    });
-  };
 
-  _proto.performExit = function performExit() {
-    var _this3 = this;
 
-    var exit = this.props.exit;
-    var timeouts = this.getTimeouts();
-    var maybeNode = this.props.nodeRef ? undefined : external_react_dom_default().findDOMNode(this); // no exit animation skip right to EXITED
 
-    if (!exit || config.disabled) {
-      this.safeSetState({
-        status: EXITED
-      }, function () {
-        _this3.props.onExited(maybeNode);
-      });
-      return;
+/** Container component to display detail pages.<br />
+ *  You should use its special children DetailPageHeader, DetailPageMenu and DetailPageBody
+ *  as containers for your stuff. */
+var DetailPage = /** @class */ (function (_super) {
+    DetailPage_extends(DetailPage, _super);
+    function DetailPage() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
+    DetailPage.prototype.renderOtherChildren = function () {
+        var ret = [];
+        external_react_default().Children.forEach(this.props.children, function (element) {
+            if ((element === null || element === void 0 ? void 0 : element.type) !== DetailPageMenuContainer &&
+                (element === null || element === void 0 ? void 0 : element.type) !== DetailPageHeaderContainer &&
+                (element === null || element === void 0 ? void 0 : element.type) !== DetailPageBodyContainer) {
+                ret.push(element);
+            }
+        });
+        if (ret.length === 0) {
+            return null;
+        }
+        return external_react_default().createElement((Col_default()), null, ret);
+    };
+    DetailPage.prototype.render = function () {
+        return (external_react_default().createElement(Bs4V3Wrapper.Bs4V3Wrapper, null,
+            external_react_default().createElement("div", { className: 'atoka-detail-page-container' },
+                (0,Utils/* findChildByComponent */.z8)(this.props.children, DetailPageHeaderContainer),
+                external_react_default().createElement((Container_default()), null,
+                    external_react_default().createElement((Row_default()), null,
+                        (0,Utils/* findChildByComponent */.z8)(this.props.children, DetailPageMenuContainer),
+                        (0,Utils/* findChildByComponent */.z8)(this.props.children, DetailPageBodyContainer)),
+                    this.renderOtherChildren()))));
+    };
+    DetailPage.displayName = 'DetailPage';
+    DetailPage.HeaderContainer = DetailPageHeaderContainer;
+    DetailPage.HeaderUI = DetailPageHeaderUI;
+    DetailPage.MenuContainer = DetailPageMenuContainer;
+    DetailPage.MenuUI = DetailPageMenuUI;
+    DetailPage.SubMenu = DetailPageSubMenu;
+    DetailPage.BodyContainer = DetailPageBodyContainer;
+    DetailPage.BodySection = DetailPageBodySection;
+    return DetailPage;
+}((external_react_default()).PureComponent));
 
-    this.props.onExit(maybeNode);
-    this.safeSetState({
-      status: EXITING
-    }, function () {
-      _this3.props.onExiting(maybeNode);
 
-      _this3.onTransitionEnd(timeouts.exit, function () {
-        _this3.safeSetState({
-          status: EXITED
-        }, function () {
-          _this3.props.onExited(maybeNode);
-        });
-      });
-    });
-  };
+;// CONCATENATED MODULE: ./src/components/DetailPage/index.ts
 
-  _proto.cancelNextCallback = function cancelNextCallback() {
-    if (this.nextCallback !== null) {
-      this.nextCallback.cancel();
-      this.nextCallback = null;
-    }
-  };
 
-  _proto.safeSetState = function safeSetState(nextState, callback) {
-    // This shouldn't be necessary, but there are weird race conditions with
-    // setState callbacks and unmounting in testing, so always make sure that
-    // we can cancel any pending setState callbacks after we unmount.
-    callback = this.setNextCallback(callback);
-    this.setState(nextState, callback);
-  };
 
-  _proto.setNextCallback = function setNextCallback(callback) {
-    var _this4 = this;
+/***/ }),
+
+/***/ 577:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-    var active = true;
 
-    this.nextCallback = function (event) {
-      if (active) {
-        active = false;
-        _this4.nextCallback = null;
-        callback(event);
-      }
-    };
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "FadeAnimation": () => (/* reexport */ FadeAnimation)
+});
 
-    this.nextCallback.cancel = function () {
-      active = false;
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: ./node_modules/react-transition-group/esm/CSSTransition.js + 3 modules
+var CSSTransition = __webpack_require__(9114);
+;// CONCATENATED MODULE: ./src/components/FadeAnimation/FadeAnimation.tsx
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
+})();
 
-    return this.nextCallback;
-  };
 
-  _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {
-    this.setNextCallback(handler);
-    var node = this.props.nodeRef ? this.props.nodeRef.current : external_react_dom_default().findDOMNode(this);
-    var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
 
-    if (!node || doesNotHaveTimeoutOrListener) {
-      setTimeout(this.nextCallback, 0);
-      return;
+var FadeAnimation = /** @class */ (function (_super) {
+    __extends(FadeAnimation, _super);
+    function FadeAnimation() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
+    FadeAnimation.prototype.render = function () {
+        var _a = this.props, duration = _a.duration, appearDelay = _a.appearDelay, name = "atoka-fadein-".concat(duration, "-").concat(appearDelay);
+        return (external_react_default().createElement(CSSTransition/* default */.Z, { timeout: duration + appearDelay, classNames: name, in: this.props.in, appear: true }, this.props.children));
+    };
+    FadeAnimation.displayName = 'FadeAnimation';
+    FadeAnimation.defaultProps = {
+        duration: 600,
+        appearDelay: 0,
+        in: true,
+    };
+    return FadeAnimation;
+}((external_react_default()).PureComponent));
 
-    if (this.props.addEndListener) {
-      var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],
-          maybeNode = _ref3[0],
-          maybeNextCallback = _ref3[1];
 
-      this.props.addEndListener(maybeNode, maybeNextCallback);
-    }
+;// CONCATENATED MODULE: ./src/components/FadeAnimation/index.ts
 
-    if (timeout != null) {
-      setTimeout(this.nextCallback, timeout);
-    }
-  };
 
-  _proto.render = function render() {
-    var status = this.state.status;
 
-    if (status === UNMOUNTED) {
-      return null;
-    }
+/***/ }),
 
-    var _this$props = this.props,
-        children = _this$props.children,
-        _in = _this$props["in"],
-        _mountOnEnter = _this$props.mountOnEnter,
-        _unmountOnExit = _this$props.unmountOnExit,
-        _appear = _this$props.appear,
-        _enter = _this$props.enter,
-        _exit = _this$props.exit,
-        _timeout = _this$props.timeout,
-        _addEndListener = _this$props.addEndListener,
-        _onEnter = _this$props.onEnter,
-        _onEntering = _this$props.onEntering,
-        _onEntered = _this$props.onEntered,
-        _onExit = _this$props.onExit,
-        _onExiting = _this$props.onExiting,
-        _onExited = _this$props.onExited,
-        _nodeRef = _this$props.nodeRef,
-        childProps = (0,objectWithoutPropertiesLoose/* default */.Z)(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
+/***/ 8352:
+/***/ ((__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) => {
 
-    return (
-      /*#__PURE__*/
-      // allows for nested Transitions
-      external_react_default().createElement(TransitionGroupContext/* default.Provider */.Z.Provider, {
-        value: null
-      }, typeof children === 'function' ? children(status, childProps) : external_react_default().cloneElement(external_react_default().Children.only(children), childProps))
-    );
-  };
 
-  return Transition;
-}((external_react_default()).Component);
+// UNUSED EXPORTS: Form
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "classnames"
+var external_classnames_ = __webpack_require__(8310);
+var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
+// EXTERNAL MODULE: external "react-bootstrap/Form"
+var Form_ = __webpack_require__(8721);
+var Form_default = /*#__PURE__*/__webpack_require__.n(Form_);
+;// CONCATENATED MODULE: ./src/components/Form/FormLabel.tsx
 
-Transition.contextType = TransitionGroupContext/* default */.Z;
-Transition.propTypes =  false ? 0 : {}; // Name the function so it is clearer in the documentation
 
-function noop() {}
 
-Transition.defaultProps = {
-  "in": false,
-  mountOnEnter: false,
-  unmountOnExit: false,
-  appear: false,
-  enter: true,
-  exit: true,
-  onEnter: noop,
-  onEntering: noop,
-  onEntered: noop,
-  onExit: noop,
-  onExiting: noop,
-  onExited: noop
-};
-Transition.UNMOUNTED = UNMOUNTED;
-Transition.EXITED = EXITED;
-Transition.ENTERING = ENTERING;
-Transition.ENTERED = ENTERED;
-Transition.EXITING = EXITING;
-/* harmony default export */ const esm_Transition = (Transition);
-;// CONCATENATED MODULE: ./node_modules/react-transition-group/esm/CSSTransition.js
 
+var FormLabel = external_react_default().memo(function (props) {
+    var className = external_classnames_default()(props === null || props === void 0 ? void 0 : props.className, 'atoka-form-label');
+    return external_react_default().createElement((Form_default()).Label, { className: className }, props.children);
+});
+FormLabel.displayName = 'FormLabel';
 
+// EXTERNAL MODULE: ./src/components/Form/FormControl.tsx + 1 modules
+var FormControl = __webpack_require__(2048);
+;// CONCATENATED MODULE: ./src/components/Form/FormCheckbox.tsx
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 
 
 
 
+var FormCheckbox = function (props) {
+    var _a;
+    var className = external_classnames_default()('atoka-form-checkbox', props === null || props === void 0 ? void 0 : props.className);
+    return external_react_default().createElement((Form_default()).Check, __assign({ type: 'checkbox' }, props, { custom: true, className: className, label: (_a = props.label) !== null && _a !== void 0 ? _a : '' }));
+};
+FormCheckbox.displayName = 'FormCheckbox';
 
+;// CONCATENATED MODULE: ./src/components/Form/FormRadio.tsx
+var FormRadio_assign = (undefined && undefined.__assign) || function () {
+    FormRadio_assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return FormRadio_assign.apply(this, arguments);
+};
 
 
 
-var _addClass = function addClass(node, classes) {
-  return node && classes && classes.split(' ').forEach(function (c) {
-    return addClass_addClass(node, c);
-  });
-};
 
-var removeClass = function removeClass(node, classes) {
-  return node && classes && classes.split(' ').forEach(function (c) {
-    return removeClass_removeClass(node, c);
-  });
+var FormRadio = function (props) {
+    var _a;
+    var className = external_classnames_default()(props === null || props === void 0 ? void 0 : props.className, 'atoka-form-radio');
+    return external_react_default().createElement((Form_default()).Check, FormRadio_assign({ type: 'radio' }, props, { custom: true, className: className, label: (_a = props.label) !== null && _a !== void 0 ? _a : '' }));
 };
-/**
- * A transition component inspired by the excellent
- * [ng-animate](https://docs.angularjs.org/api/ngAnimate) library, you should
- * use it if you're using CSS transitions or animations. It's built upon the
- * [`Transition`](https://reactcommunity.org/react-transition-group/transition)
- * component, so it inherits all of its props.
- *
- * `CSSTransition` applies a pair of class names during the `appear`, `enter`,
- * and `exit` states of the transition. The first class is applied and then a
- * second `*-active` class in order to activate the CSS transition. After the
- * transition, matching `*-done` class names are applied to persist the
- * transition state.
- *
- * ```jsx
- * function App() {
- *   const [inProp, setInProp] = useState(false);
- *   return (
- *     <div>
- *       <CSSTransition in={inProp} timeout={200} classNames="my-node">
- *         <div>
- *           {"I'll receive my-node-* classes"}
- *         </div>
- *       </CSSTransition>
- *       <button type="button" onClick={() => setInProp(true)}>
- *         Click to Enter
- *       </button>
- *     </div>
- *   );
- * }
- * ```
- *
- * When the `in` prop is set to `true`, the child component will first receive
- * the class `example-enter`, then the `example-enter-active` will be added in
- * the next tick. `CSSTransition` [forces a
- * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)
- * between before adding the `example-enter-active`. This is an important trick
- * because it allows us to transition between `example-enter` and
- * `example-enter-active` even though they were added immediately one after
- * another. Most notably, this is what makes it possible for us to animate
- * _appearance_.
- *
- * ```css
- * .my-node-enter {
- *   opacity: 0;
- * }
- * .my-node-enter-active {
- *   opacity: 1;
- *   transition: opacity 200ms;
- * }
- * .my-node-exit {
- *   opacity: 1;
- * }
- * .my-node-exit-active {
- *   opacity: 0;
- *   transition: opacity 200ms;
- * }
- * ```
- *
- * `*-active` classes represent which styles you want to animate **to**, so it's
- * important to add `transition` declaration only to them, otherwise transitions
- * might not behave as intended! This might not be obvious when the transitions
- * are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in
- * the example above (minus `transition`), but it becomes apparent in more
- * complex transitions.
- *
- * **Note**: If you're using the
- * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)
- * prop, make sure to define styles for `.appear-*` classes as well.
- */
+FormRadio.displayName = 'FormRadio';
 
+// EXTERNAL MODULE: external "react-bootstrap/FormText"
+var FormText_ = __webpack_require__(8763);
+var FormText_default = /*#__PURE__*/__webpack_require__.n(FormText_);
+;// CONCATENATED MODULE: ./src/components/Form/FormHelp.tsx
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 
-var CSSTransition = /*#__PURE__*/function (_React$Component) {
-  (0,inheritsLoose/* default */.Z)(CSSTransition, _React$Component);
 
-  function CSSTransition() {
-    var _this;
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
 
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.appliedClasses = {
-      appear: {},
-      enter: {},
-      exit: {}
+var FormHelp = external_react_default().memo(function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var className = external_classnames_default()('d-block', props === null || props === void 0 ? void 0 : props.className);
+    return (external_react_default().createElement((FormText_default()), { bsPrefix: 'atoka-form-help', className: className }, children));
+});
+FormHelp.displayName = 'FormHelp';
+
+;// CONCATENATED MODULE: ./src/components/Form/Form.tsx
+var Form_assign = (undefined && undefined.__assign) || function () {
+    Form_assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
     };
+    return Form_assign.apply(this, arguments);
+};
 
-    _this.onEnter = function (maybeNode, maybeAppearing) {
-      var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing),
-          node = _this$resolveArgument[0],
-          appearing = _this$resolveArgument[1];
 
-      _this.removeClasses(node, 'exit');
 
-      _this.addClass(node, appearing ? 'appear' : 'enter', 'base');
 
-      if (_this.props.onEnter) {
-        _this.props.onEnter(maybeNode, maybeAppearing);
-      }
-    };
 
-    _this.onEntering = function (maybeNode, maybeAppearing) {
-      var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing),
-          node = _this$resolveArgument2[0],
-          appearing = _this$resolveArgument2[1];
 
-      var type = appearing ? 'appear' : 'enter';
 
-      _this.addClass(node, type, 'active');
 
-      if (_this.props.onEntering) {
-        _this.props.onEntering(maybeNode, maybeAppearing);
-      }
-    };
 
-    _this.onEntered = function (maybeNode, maybeAppearing) {
-      var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing),
-          node = _this$resolveArgument3[0],
-          appearing = _this$resolveArgument3[1];
+var Form = function (props) {
+    var className = external_classnames_default()(props === null || props === void 0 ? void 0 : props.className, 'atoka-form');
+    return (external_react_default().createElement((Form_default()), Form_assign({}, props, { className: className }), props.children));
+};
+Form.displayName = 'Form';
+Form.Control = FormControl/* FormControl */.N;
+Form.Label = FormLabel;
+Form.Checkbox = FormCheckbox;
+Form.Radio = FormRadio;
+Form.File = (Form_default()).File;
+Form.Switch = (Form_default()).Switch;
+Form.Help = FormHelp;
+Form.Group = (Form_default()).Group;
 
-      var type = appearing ? 'appear' : 'enter';
 
-      _this.removeClasses(node, type);
 
-      _this.addClass(node, type, 'done');
+/***/ }),
 
-      if (_this.props.onEntered) {
-        _this.props.onEntered(maybeNode, maybeAppearing);
-      }
-    };
+/***/ 2048:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-    _this.onExit = function (maybeNode) {
-      var _this$resolveArgument4 = _this.resolveArguments(maybeNode),
-          node = _this$resolveArgument4[0];
 
-      _this.removeClasses(node, 'appear');
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "N": () => (/* binding */ FormControl)
+});
 
-      _this.removeClasses(node, 'enter');
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "classnames"
+var external_classnames_ = __webpack_require__(8310);
+var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
+// EXTERNAL MODULE: external "react-bootstrap/FormControl"
+var FormControl_ = __webpack_require__(1082);
+var FormControl_default = /*#__PURE__*/__webpack_require__.n(FormControl_);
+;// CONCATENATED MODULE: ./src/components/Form/FormControlFeedBack.tsx
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 
-      _this.addClass(node, 'exit', 'base');
 
-      if (_this.props.onExit) {
-        _this.props.onExit(maybeNode);
-      }
-    };
 
-    _this.onExiting = function (maybeNode) {
-      var _this$resolveArgument5 = _this.resolveArguments(maybeNode),
-          node = _this$resolveArgument5[0];
+var FormControlFeedBack = external_react_default().memo(function (_a) {
+    var _b = _a.show, show = _b === void 0 ? true : _b, props = __rest(_a, ["show"]);
+    var className = external_classnames_default()(props === null || props === void 0 ? void 0 : props.className, 'atoka-form-control-feedback', {
+        'd-block': show,
+    });
+    return (external_react_default().createElement((FormControl_default()).Feedback, { type: props.type, className: className }, props.children));
+});
+FormControlFeedBack.displayName = ' FormControlFeedBack';
 
-      _this.addClass(node, 'exit', 'active');
+;// CONCATENATED MODULE: ./src/components/Form/FormControl.tsx
+var FormControl_rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 
-      if (_this.props.onExiting) {
-        _this.props.onExiting(maybeNode);
-      }
-    };
 
-    _this.onExited = function (maybeNode) {
-      var _this$resolveArgument6 = _this.resolveArguments(maybeNode),
-          node = _this$resolveArgument6[0];
 
-      _this.removeClasses(node, 'exit');
 
-      _this.addClass(node, 'exit', 'done');
 
-      if (_this.props.onExited) {
-        _this.props.onExited(maybeNode);
-      }
+var FormControlComponent = external_react_default().forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, props = FormControl_rest(_a, ["size"]);
+    var className = external_classnames_default()('atoka-form-control', props === null || props === void 0 ? void 0 : props.className, {
+        'atoka-shadow': props.withShadow,
+        'disabled': props.disabled,
+    });
+    return (external_react_default().createElement((FormControl_default()), { as: props.as, rows: props.rows, cols: props.cols, placeholder: props.placeholder, className: className, disabled: props.disabled, readOnly: props.readOnly, value: props.value, onChange: props.onChange, onKeyPress: props.onKeyPress, onKeyDown: props.onKeyDown, defaultValue: props.defaultValue, size: size === 'md' ? undefined : size, type: props.type, id: props.id, isValid: props.isValid, isInvalid: props.isInvalid, ref: ref, autoComplete: 'off' }, props.children));
+});
+FormControlComponent.displayName = 'FormControlComponent';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var FormControl = FormControlComponent;
+FormControl.FeedBack = FormControlFeedBack;
+FormControl.displayName = 'FormControl';
+
+
+
+/***/ }),
+
+/***/ 6216:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "Spinner": () => (/* reexport */ Spinner),
+  "SpinnerSize": () => (/* reexport */ SpinnerSize)
+});
+
+// EXTERNAL MODULE: external "classnames"
+var external_classnames_ = __webpack_require__(8310);
+var external_classnames_default = /*#__PURE__*/__webpack_require__.n(external_classnames_);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(8156);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+;// CONCATENATED MODULE: ./src/components/Spinner/Spinner.tsx
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+
+
+var SpinnerSize;
+(function (SpinnerSize) {
+    SpinnerSize[SpinnerSize["mini"] = 0] = "mini";
+    SpinnerSize[SpinnerSize["small"] = 1] = "small";
+    SpinnerSize[SpinnerSize["big"] = 2] = "big";
+    SpinnerSize[SpinnerSize["modal"] = 3] = "modal";
+})(SpinnerSize || (SpinnerSize = {}));
+/**
+ * ### Overview
+ *
+ * We can find two different spinners in the Atoka interface, small and big. The **small** one is used to show that a specific section inside the page is loading. The **big** spinner on the other hand shows when the whole page is loading.
+ *
+ * ### Best practice
+ *
+ * Use the spinner if the waiting time is between 0.1 and 1 second. After one second, the user gets the impression that the app is slow: in that case, use a progress indicator instead.
+ **/
+var Spinner = /** @class */ (function (_super) {
+    __extends(Spinner, _super);
+    function Spinner() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Spinner.prototype.renderOnlyDotsSpinner = function (size) {
+        var className = 'atoka-spinner spinner-' + size + ' ' + this.props.className;
+        return (external_react_default().createElement("div", { className: className },
+            external_react_default().createElement("div", { className: 'spinner-dot1' },
+                external_react_default().createElement("div", { className: 'spinner-leaf' })),
+            external_react_default().createElement("div", { className: 'spinner-dot2' },
+                external_react_default().createElement("div", { className: 'spinner-leaf' })),
+            external_react_default().createElement("div", { className: 'spinner-dot3' },
+                external_react_default().createElement("div", { className: 'spinner-leaf' }))));
+    };
+    Spinner.prototype.renderSmall = function () {
+        return this.renderOnlyDotsSpinner('small');
+    };
+    Spinner.prototype.renderMini = function () {
+        return this.renderOnlyDotsSpinner('mini');
+    };
+    Spinner.prototype.renderLeaf = function () {
+        return (external_react_default().createElement("svg", { viewBox: '0 0 204.01 190.64', version: '1.1', xmlns: 'http://www.w3.org/2000/svg' },
+            external_react_default().createElement("g", { id: 'leaf' },
+                external_react_default().createElement("path", { d: 'M80.88,7.62a26,26,0,0,0-36.79,36.8,25.85,25.85,0,0,0,13.4,7.14V83.39c1.19,0,2.4-.08,3.62-.08,2.16,0,4.28.08,6.38.23v-32A26,26,0,0,0,80.88,7.62ZM73.81,37.35a16,16,0,1,1,0-22.66,15.92,15.92,0,0,1,0,22.66Z' }))));
+    };
+    Spinner.prototype.renderLetter = function () {
+        return (external_react_default().createElement("svg", { viewBox: '0 0 204.01 190.64', version: '1.1', xmlns: 'http://www.w3.org/2000/svg' },
+            external_react_default().createElement("g", { id: 'logo-vector' },
+                external_react_default().createElement("path", { d: 'M110.77,180.67V140.16a50.47,50.47,0,1,0-22,41.71L93.12,187a10,10,0,0,0,17.65-6.34Zm-81-40.51a30.5,30.5,0,1,1,30.5,30.5,30.49,30.49,0,0,1-30.5-30.5Z' }))));
     };
-
-    _this.resolveArguments = function (maybeNode, maybeAppearing) {
-      return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`
-      : [maybeNode, maybeAppearing];
+    Spinner.prototype.renderBig = function () {
+        var spinnerClassName = external_classnames_default()(this.props.className, {
+            'atoka-spinner': true,
+            'spinner-big': this.props.size === SpinnerSize.big,
+            'spinner-medium': this.props.size === SpinnerSize.modal,
+        }), containerClassName = external_classnames_default()({
+            'container-fluid spinner-modal': this.props.size === SpinnerSize.modal,
+        });
+        return (external_react_default().createElement("div", { className: containerClassName },
+            external_react_default().createElement("div", { className: spinnerClassName },
+                external_react_default().createElement("div", { className: 'spinner-dot1' },
+                    external_react_default().createElement("div", { className: 'spinner-leaf' }, this.renderLeaf())),
+                external_react_default().createElement("div", { className: 'spinner-dot2' },
+                    external_react_default().createElement("div", { className: 'spinner-leaf' }, this.renderLeaf())),
+                external_react_default().createElement("div", { className: 'spinner-dot3' },
+                    external_react_default().createElement("div", { className: 'spinner-leaf' }, this.renderLeaf())),
+                external_react_default().createElement("span", { className: 'spinner-letter' }, this.renderLetter()))));
     };
-
-    _this.getClassNames = function (type) {
-      var classNames = _this.props.classNames;
-      var isStringClassNames = typeof classNames === 'string';
-      var prefix = isStringClassNames && classNames ? classNames + "-" : '';
-      var baseClassName = isStringClassNames ? "" + prefix + type : classNames[type];
-      var activeClassName = isStringClassNames ? baseClassName + "-active" : classNames[type + "Active"];
-      var doneClassName = isStringClassNames ? baseClassName + "-done" : classNames[type + "Done"];
-      return {
-        baseClassName: baseClassName,
-        activeClassName: activeClassName,
-        doneClassName: doneClassName
-      };
+    Spinner.prototype.render = function () {
+        switch (this.props.size) {
+            case SpinnerSize.mini:
+                return this.renderMini();
+            case SpinnerSize.small:
+                return this.renderSmall();
+            case SpinnerSize.big:
+            case SpinnerSize.modal:
+                return this.renderBig();
+            default:
+                return null;
+        }
     };
+    Spinner.displayName = 'Spinner';
+    Spinner.defaultProps = {
+        size: SpinnerSize.small,
+        className: '',
+    };
+    return Spinner;
+}((external_react_default()).Component));
 
-    return _this;
-  }
 
-  var _proto = CSSTransition.prototype;
+;// CONCATENATED MODULE: ./src/components/Spinner/index.ts
 
-  _proto.addClass = function addClass(node, type, phase) {
-    var className = this.getClassNames(type)[phase + "ClassName"];
 
-    var _this$getClassNames = this.getClassNames('enter'),
-        doneClassName = _this$getClassNames.doneClassName;
 
-    if (type === 'appear' && phase === 'done' && doneClassName) {
-      className += " " + doneClassName;
-    } // This is for to force a repaint,
-    // which is necessary in order to transition styles when adding a class name.
+/***/ }),
 
+/***/ 4915:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-    if (phase === 'active') {
-      /* eslint-disable no-unused-expressions */
-      node && node.scrollTop;
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "z8": () => (/* binding */ findChildByComponent)
+/* harmony export */ });
+/* unused harmony exports findChildrenByComponent, hasChildIconOrCheckboxComponent, scrollToTop, zip, sortObjDesc, clone, getDebouncer, deepEqual, rgbToHex */
+/* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5692);
+/* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8156);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _Form_Form__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8352);
+var __read = (undefined && undefined.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
     }
-
-    if (className) {
-      this.appliedClasses[type][phase] = className;
-
-      _addClass(node, className);
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
     }
-  };
+    return ar;
+};
 
-  _proto.removeClasses = function removeClasses(node, type) {
-    var _this$appliedClasses$ = this.appliedClasses[type],
-        baseClassName = _this$appliedClasses$.base,
-        activeClassName = _this$appliedClasses$.active,
-        doneClassName = _this$appliedClasses$.done;
-    this.appliedClasses[type] = {};
 
-    if (baseClassName) {
-      removeClass(node, baseClassName);
-    }
 
-    if (activeClassName) {
-      removeClass(node, activeClassName);
+function findChildrenByComponent(children, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+component) {
+    var ret = [];
+    react__WEBPACK_IMPORTED_MODULE_1___default().Children.forEach(children, function (element) {
+        if ((element === null || element === void 0 ? void 0 : element.type) === component) {
+            ret.push(element);
+        }
+    });
+    return ret;
+}
+function findChildByComponent(children, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+component) {
+    var _a, _b;
+    return (_b = (_a = findChildrenByComponent(children, component)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null;
+}
+function hasChildIconOrCheckboxComponent(children) {
+    var ret = false;
+    React.Children.forEach(children, function (element) {
+        if ((element === null || element === void 0 ? void 0 : element.type) != null &&
+            ((element === null || element === void 0 ? void 0 : element.type) === FontAwesomeIcon || (element === null || element === void 0 ? void 0 : element.type) === 'i' || (element === null || element === void 0 ? void 0 : element.type) === Form.Checkbox)) {
+            ret = true;
+            return;
+        }
+    });
+    return ret;
+}
+function scrollToTop() {
+    window.scrollTo(0, 0);
+}
+function zip(arr1, arr2) {
+    var ret = [];
+    var i = 0;
+    while (arr1[i]) {
+        ret.push(arr1[i]);
+        ret.push(arr2[i++]);
     }
-
-    if (doneClassName) {
-      removeClass(node, doneClassName);
+    return ret;
+}
+// eslint-disable-next-line @typescript-eslint/ban-types
+function sortObjDesc(accessor) {
+    return function (a, b) {
+        var leftVal = 0, rightVal = 0;
+        if ((a === null || a === void 0 ? void 0 : a[accessor]) != null) {
+            leftVal = a === null || a === void 0 ? void 0 : a[accessor];
+        }
+        if ((b === null || b === void 0 ? void 0 : b[accessor]) != null) {
+            rightVal = b === null || b === void 0 ? void 0 : b[accessor];
+        }
+        return leftVal > rightVal ? -1 : 1;
+    };
+}
+function clone(ob) {
+    return JSON.parse(JSON.stringify(ob));
+}
+function getDebouncer(delay) {
+    if (delay === void 0) { delay = 1; }
+    var debounceTimeout = null;
+    return function debounce(f) {
+        if (debounceTimeout !== null) {
+            clearTimeout(debounceTimeout);
+        }
+        debounceTimeout = window.setTimeout(f, delay);
+    };
+}
+function isObject(obj) {
+    return typeof obj === 'object' && obj != null;
+}
+function deepEqual(obj1, obj2) {
+    if (obj1 === obj2) {
+        return true;
     }
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        _ = _this$props.classNames,
-        props = (0,objectWithoutPropertiesLoose/* default */.Z)(_this$props, ["classNames"]);
-
-    return /*#__PURE__*/external_react_default().createElement(esm_Transition, (0,esm_extends/* default */.Z)({}, props, {
-      onEnter: this.onEnter,
-      onEntered: this.onEntered,
-      onEntering: this.onEntering,
-      onExit: this.onExit,
-      onExiting: this.onExiting,
-      onExited: this.onExited
-    }));
-  };
-
-  return CSSTransition;
-}((external_react_default()).Component);
-
-CSSTransition.defaultProps = {
-  classNames: ''
-};
-CSSTransition.propTypes =  false ? 0 : {};
-/* harmony default export */ const esm_CSSTransition = (CSSTransition);
-
-/***/ }),
-
-/***/ 3493:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8156);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+    if (isObject(obj1) && isObject(obj2)) {
+        if (Object.keys(obj1).length !== Object.keys(obj2).length) {
+            return false;
+        }
+        for (var prop in obj1) {
+            if (!deepEqual(obj1[prop], obj2[prop])) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return false;
+}
+function componentToHex(c) {
+    if (isNaN(c)) {
+        throw Error('The color has not been written correctly');
+    }
+    var hex = c.toString(16).toUpperCase();
+    return hex.length === 1 ? '0' + hex : hex;
+}
+function cleanSingleColor(c) {
+    return c.replace(/"|'/g, '').trim();
+}
+function rgbToHex(rgb) {
+    if (rgb.includes('rgba')) {
+        throw Error('not implemented');
+    }
+    var _a = __read(rgb
+        .replace('rgb', '')
+        .replace(/\(|\)/gi, '')
+        .split(',')
+        .map(function (c) { return parseInt(cleanSingleColor(c), 10); }), 3), _b = _a[0], r = _b === void 0 ? 0 : _b, _c = _a[1], g = _c === void 0 ? 0 : _c, _d = _a[2], b = _d === void 0 ? 0 : _d;
+    return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
 
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (react__WEBPACK_IMPORTED_MODULE_0___default().createContext(null));
 
 /***/ }),
 
 /***/ 5692:
 /***/ ((module) => {
 
-"use strict";
 module.exports = __WEBPACK_EXTERNAL_MODULE__5692__;
 
 /***/ }),
@@ -1735,7 +1674,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__5692__;
 /***/ 8310:
 /***/ ((module) => {
 
-"use strict";
 module.exports = __WEBPACK_EXTERNAL_MODULE__8310__;
 
 /***/ }),
@@ -1743,7 +1681,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__8310__;
 /***/ 8156:
 /***/ ((module) => {
 
-"use strict";
 module.exports = __WEBPACK_EXTERNAL_MODULE__8156__;
 
 /***/ }),
@@ -1751,7 +1688,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__8156__;
 /***/ 5315:
 /***/ ((module) => {
 
-"use strict";
 module.exports = __WEBPACK_EXTERNAL_MODULE__5315__;
 
 /***/ }),
@@ -1759,7 +1695,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__5315__;
 /***/ 4394:
 /***/ ((module) => {
 
-"use strict";
 module.exports = __WEBPACK_EXTERNAL_MODULE__4394__;
 
 /***/ }),
@@ -1767,7 +1702,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__4394__;
 /***/ 8721:
 /***/ ((module) => {
 
-"use strict";
 module.exports = __WEBPACK_EXTERNAL_MODULE__8721__;
 
 /***/ }),
@@ -1775,7 +1709,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__8721__;
 /***/ 1082:
 /***/ ((module) => {
 
-"use strict";
 module.exports = __WEBPACK_EXTERNAL_MODULE__1082__;
 
 /***/ }),
@@ -1783,7 +1716,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__1082__;
 /***/ 8763:
 /***/ ((module) => {
 
-"use strict";
 module.exports = __WEBPACK_EXTERNAL_MODULE__8763__;
 
 /***/ }),
@@ -1791,7 +1723,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__8763__;
 /***/ 573:
 /***/ ((module) => {
 
-"use strict";
 module.exports = __WEBPACK_EXTERNAL_MODULE__573__;
 
 /***/ }),
@@ -1799,7 +1730,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__573__;
 /***/ 3915:
 /***/ ((module) => {
 
-"use strict";
 module.exports = __WEBPACK_EXTERNAL_MODULE__3915__;
 
 /***/ }),
@@ -1807,7 +1737,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__3915__;
 /***/ 7111:
 /***/ ((module) => {
 
-"use strict";
 module.exports = __WEBPACK_EXTERNAL_MODULE__7111__;
 
 /***/ }),
@@ -1815,12 +1744,11 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__7111__;
 /***/ 32:
 /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
 
-"use strict";
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "Z": () => (/* binding */ _extends)
 /* harmony export */ });
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -1833,7 +1761,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -1842,7 +1769,6 @@ function _extends() {
 /***/ 7581:
 /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
 
-"use strict";
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
@@ -1851,11 +1777,10 @@ __webpack_require__.d(__webpack_exports__, {
 
 ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js
 function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
     return o;
   };
-
   return _setPrototypeOf(o, p);
 }
 ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js
@@ -1871,7 +1796,6 @@ function _inheritsLoose(subClass, superClass) {
 /***/ 7038:
 /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
 
-"use strict";
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "Z": () => (/* binding */ _objectWithoutPropertiesLoose)
 /* harmony export */ });
@@ -2006,7 +1930,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 /******/ 			4548: 0,
 /******/ 			5853: 0,
 /******/ 			410: 0,
-/******/ 			2210: 0
+/******/ 			6999: 0
 /******/ 		};
 /******/ 		
 /******/ 		// no chunk on demand loading
@@ -2056,7 +1980,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
-/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [2210], () => (__webpack_require__(6635)))
+/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [6999], () => (__webpack_require__(4716)))
 /******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
 /******/ 	
 /******/ 	return __webpack_exports__;