superdesk-ui-framework 2.4.17 → 2.4.20

package/dist/superdesk-ui.bundle.js

@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 519);
+/******/ 	return __webpack_require__(__webpack_require__.s = 521);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -2168,7 +2168,7 @@ return /******/ (function(modules) { // webpackBootstrap
             try {
                 oldLocale = globalLocale._abbr;
                 aliasedRequire = require;
-                __webpack_require__(352)("./" + name);
+                __webpack_require__(354)("./" + name);
                 getSetGlobalLocale(oldLocale);
             } catch (e) {
                 // mark as not found to avoid repeating expensive file require call causing high CPU
@@ -5860,20 +5860,20 @@ var HelloWorld_1 = __webpack_require__(241);
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
 var Button_1 = __webpack_require__(61);
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
-var Input_1 = __webpack_require__(242);
+var Input_1 = __webpack_require__(244);
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
-var Select_1 = __webpack_require__(243);
+var Select_1 = __webpack_require__(245);
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
 Object.defineProperty(exports, "Option", { enumerable: true, get: function () { return Select_1.Option; } });
-var SelectWithTemplate_1 = __webpack_require__(244);
+var SelectWithTemplate_1 = __webpack_require__(246);
 Object.defineProperty(exports, "SelectWithTemplate", { enumerable: true, get: function () { return SelectWithTemplate_1.SelectWithTemplate; } });
-var Popover_1 = __webpack_require__(259);
+var Popover_1 = __webpack_require__(261);
 Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return Popover_1.Popover; } });
-var Label_1 = __webpack_require__(260);
+var Label_1 = __webpack_require__(262);
 Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return Label_1.Label; } });
 var Badge_1 = __webpack_require__(65);
 Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
-var Alert_1 = __webpack_require__(261);
+var Alert_1 = __webpack_require__(263);
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_1.Alert; } });
 var Avatar_1 = __webpack_require__(44);
 Object.defineProperty(exports, "AvatarWrapper", { enumerable: true, get: function () { return Avatar_1.AvatarWrapper; } });
@@ -5881,11 +5881,11 @@ var Avatar_2 = __webpack_require__(44);
 Object.defineProperty(exports, "AvatarContentText", { enumerable: true, get: function () { return Avatar_2.AvatarContentText; } });
 var Avatar_3 = __webpack_require__(44);
 Object.defineProperty(exports, "AvatarContentImage", { enumerable: true, get: function () { return Avatar_3.AvatarContentImage; } });
-var IconButton_1 = __webpack_require__(262);
+var IconButton_1 = __webpack_require__(264);
 Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return IconButton_1.IconButton; } });
-var IconLabel_1 = __webpack_require__(263);
+var IconLabel_1 = __webpack_require__(265);
 Object.defineProperty(exports, "IconLabel", { enumerable: true, get: function () { return IconLabel_1.IconLabel; } });
-var Tooltip_1 = __webpack_require__(264);
+var Tooltip_1 = __webpack_require__(266);
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
 var DatePicker_1 = __webpack_require__(45);
 Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
@@ -5895,49 +5895,49 @@ var DatePicker_3 = __webpack_require__(45);
 Object.defineProperty(exports, "DatePickerLocaleSettings", { enumerable: true, get: function () { return DatePicker_3.DatePickerLocaleSettings; } });
 var TimePicker_1 = __webpack_require__(230);
 Object.defineProperty(exports, "TimePicker", { enumerable: true, get: function () { return TimePicker_1.TimePicker; } });
-var FormLabel_1 = __webpack_require__(295);
+var FormLabel_1 = __webpack_require__(297);
 Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return FormLabel_1.FormLabel; } });
-var Switch_1 = __webpack_require__(296);
+var Switch_1 = __webpack_require__(298);
 Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return Switch_1.Switch; } });
-var SwitchGroup_1 = __webpack_require__(297);
+var SwitchGroup_1 = __webpack_require__(299);
 Object.defineProperty(exports, "SwitchGroup", { enumerable: true, get: function () { return SwitchGroup_1.SwitchGroup; } });
-var ButtonGroup_1 = __webpack_require__(298);
+var ButtonGroup_1 = __webpack_require__(300);
 Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return ButtonGroup_1.ButtonGroup; } });
 var Loader_1 = __webpack_require__(71);
 Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return Loader_1.Loader; } });
-var Radio_1 = __webpack_require__(299);
+var Radio_1 = __webpack_require__(301);
 Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
-var Checkbox_1 = __webpack_require__(300);
+var Checkbox_1 = __webpack_require__(302);
 Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
-var RadioButton_1 = __webpack_require__(301);
+var RadioButton_1 = __webpack_require__(303);
 Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return RadioButton_1.RadioButton; } });
-var CheckboxButton_1 = __webpack_require__(302);
+var CheckboxButton_1 = __webpack_require__(304);
 Object.defineProperty(exports, "CheckboxButton", { enumerable: true, get: function () { return CheckboxButton_1.CheckboxButton; } });
-var CheckGroup_1 = __webpack_require__(303);
+var CheckGroup_1 = __webpack_require__(305);
 Object.defineProperty(exports, "CheckGroup", { enumerable: true, get: function () { return CheckGroup_1.CheckGroup; } });
-var CheckButtonGroup_1 = __webpack_require__(304);
+var CheckButtonGroup_1 = __webpack_require__(306);
 Object.defineProperty(exports, "CheckButtonGroup", { enumerable: true, get: function () { return CheckButtonGroup_1.CheckButtonGroup; } });
-var NavButton_1 = __webpack_require__(305);
+var NavButton_1 = __webpack_require__(307);
 Object.defineProperty(exports, "NavButton", { enumerable: true, get: function () { return NavButton_1.NavButton; } });
-var TabList_1 = __webpack_require__(306);
+var TabList_1 = __webpack_require__(308);
 Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return TabList_1.Tab; } });
 Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return TabList_1.TabList; } });
-var LeftMenu_1 = __webpack_require__(307);
+var LeftMenu_1 = __webpack_require__(309);
 Object.defineProperty(exports, "LeftMenu", { enumerable: true, get: function () { return LeftMenu_1.LeftMenu; } });
-var SubNav_1 = __webpack_require__(308);
+var SubNav_1 = __webpack_require__(310);
 Object.defineProperty(exports, "SubNav", { enumerable: true, get: function () { return SubNav_1.SubNav; } });
-var SlidingToolbar_1 = __webpack_require__(309);
+var SlidingToolbar_1 = __webpack_require__(311);
 Object.defineProperty(exports, "SlidingToolbar", { enumerable: true, get: function () { return SlidingToolbar_1.SlidingToolbar; } });
-var StrechBar_1 = __webpack_require__(310);
+var StrechBar_1 = __webpack_require__(312);
 Object.defineProperty(exports, "StrechBar", { enumerable: true, get: function () { return StrechBar_1.StrechBar; } });
-var PropsList_1 = __webpack_require__(311);
+var PropsList_1 = __webpack_require__(313);
 Object.defineProperty(exports, "PropsList", { enumerable: true, get: function () { return PropsList_1.PropsList; } });
 Object.defineProperty(exports, "Prop", { enumerable: true, get: function () { return PropsList_1.Prop; } });
 var Icon_1 = __webpack_require__(19);
 Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.Icon; } });
-var Divider_1 = __webpack_require__(312);
+var Divider_1 = __webpack_require__(314);
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });
-var HeadingText_1 = __webpack_require__(313);
+var HeadingText_1 = __webpack_require__(315);
 Object.defineProperty(exports, "HeadingText", { enumerable: true, get: function () { return HeadingText_1.HeadingText; } });
 var DropdownFirst_1 = __webpack_require__(36);
 Object.defineProperty(exports, "DropdownFirst", { enumerable: true, get: function () { return DropdownFirst_1.DropdownFirst; } });
@@ -5947,30 +5947,30 @@ var DropdownFirst_3 = __webpack_require__(36);
 Object.defineProperty(exports, "DropdownLabel", { enumerable: true, get: function () { return DropdownFirst_3.DropdownLabel; } });
 var DropdownFirst_4 = __webpack_require__(36);
 Object.defineProperty(exports, "DropdownDivider", { enumerable: true, get: function () { return DropdownFirst_4.DropdownDivider; } });
-var Dropdown_1 = __webpack_require__(314);
+var Dropdown_1 = __webpack_require__(316);
 Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return Dropdown_1.Dropdown; } });
-var Tag_1 = __webpack_require__(334);
+var Tag_1 = __webpack_require__(336);
 Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
-var TabCustom_1 = __webpack_require__(335);
-Object.defineProperty(exports, "TabLabel", { enumerable: true, get: function () { return TabCustom_1.TabLabel; } });
+var TabCustom_1 = __webpack_require__(337);
+Object.defineProperty(exports, "TabItem", { enumerable: true, get: function () { return TabCustom_1.TabItem; } });
 Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return TabCustom_1.TabPanel; } });
 Object.defineProperty(exports, "TabContent", { enumerable: true, get: function () { return TabCustom_1.TabContent; } });
-Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return TabCustom_1.Tabs; } });
-var EmptyState_1 = __webpack_require__(336);
+Object.defineProperty(exports, "TabNav", { enumerable: true, get: function () { return TabCustom_1.TabNav; } });
+var EmptyState_1 = __webpack_require__(338);
 Object.defineProperty(exports, "EmptyState", { enumerable: true, get: function () { return EmptyState_1.EmptyState; } });
-var Autocomplete_1 = __webpack_require__(345);
+var Autocomplete_1 = __webpack_require__(347);
 Object.defineProperty(exports, "Autocomplete", { enumerable: true, get: function () { return Autocomplete_1.Autocomplete; } });
-var DonutChart_1 = __webpack_require__(348);
+var DonutChart_1 = __webpack_require__(350);
 Object.defineProperty(exports, "DonutChart", { enumerable: true, get: function () { return DonutChart_1.DonutChart; } });
-var Carousel_1 = __webpack_require__(353);
+var Carousel_1 = __webpack_require__(355);
 Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return Carousel_1.Carousel; } });
-var Modal_1 = __webpack_require__(356);
+var Modal_1 = __webpack_require__(358);
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
-var TagInput_1 = __webpack_require__(359);
+var TagInput_1 = __webpack_require__(361);
 Object.defineProperty(exports, "TagInput", { enumerable: true, get: function () { return TagInput_1.TagInput; } });
-var TagInputTest_1 = __webpack_require__(360);
+var TagInputTest_1 = __webpack_require__(362);
 Object.defineProperty(exports, "TagInputTest", { enumerable: true, get: function () { return TagInputTest_1.TagInputTest; } });
-var GridList_1 = __webpack_require__(361);
+var GridList_1 = __webpack_require__(363);
 Object.defineProperty(exports, "GridList", { enumerable: true, get: function () { return GridList_1.GridList; } });
 var GridItem_1 = __webpack_require__(224);
 Object.defineProperty(exports, "GridItem", { enumerable: true, get: function () { return GridItem_1.GridItem; } });
@@ -5986,19 +5986,19 @@ Object.defineProperty(exports, "GridItemFooterBlock", { enumerable: true, get: f
 Object.defineProperty(exports, "GridItemFooterActions", { enumerable: true, get: function () { return GridItem_1.GridItemFooterActions; } });
 Object.defineProperty(exports, "GridItemTopActions", { enumerable: true, get: function () { return GridItem_1.GridItemTopActions; } });
 Object.defineProperty(exports, "GridItemCheckWrapper", { enumerable: true, get: function () { return GridItem_1.GridItemCheckWrapper; } });
-var Toast_1 = __webpack_require__(362);
+var Toast_1 = __webpack_require__(364);
 Object.defineProperty(exports, "toasted", { enumerable: true, get: function () { return Toast_1.toasted; } });
-var Menu_1 = __webpack_require__(366);
+var Menu_1 = __webpack_require__(368);
 Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return Menu_1.Menu; } });
-var Togglebox_1 = __webpack_require__(370);
+var Togglebox_1 = __webpack_require__(372);
 Object.defineProperty(exports, "ToggleBox", { enumerable: true, get: function () { return Togglebox_1.ToggleBox; } });
 var SelectGrid_1 = __webpack_require__(225);
 Object.defineProperty(exports, "SelectGrid", { enumerable: true, get: function () { return SelectGrid_1.SelectGrid; } });
-var IconPicker_1 = __webpack_require__(373);
+var IconPicker_1 = __webpack_require__(375);
 Object.defineProperty(exports, "IconPicker", { enumerable: true, get: function () { return IconPicker_1.IconPicker; } });
 var Skeleton_1 = __webpack_require__(226);
 Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return Skeleton_1.Skeleton; } });
-var ListItemLoader_1 = __webpack_require__(374);
+var ListItemLoader_1 = __webpack_require__(376);
 Object.defineProperty(exports, "ListItemLoader", { enumerable: true, get: function () { return ListItemLoader_1.ListItemLoader; } });
 
 
@@ -7495,7 +7495,7 @@ var _react = _interopRequireWildcard(__webpack_require__(1));
 
 var _DomHandler = _interopRequireDefault(__webpack_require__(10));
 
-var _PrimeReact = _interopRequireDefault(__webpack_require__(250));
+var _PrimeReact = _interopRequireDefault(__webpack_require__(252));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -8408,11 +8408,11 @@ exports.default = ConnectedOverlayScrollHandler;
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__CSSTransition__ = __webpack_require__(251);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__CSSTransition__ = __webpack_require__(253);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "CSSTransition", function() { return __WEBPACK_IMPORTED_MODULE_0__CSSTransition__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__ReplaceTransition__ = __webpack_require__(255);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__ReplaceTransition__ = __webpack_require__(257);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ReplaceTransition", function() { return __WEBPACK_IMPORTED_MODULE_1__ReplaceTransition__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__SwitchTransition__ = __webpack_require__(258);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__SwitchTransition__ = __webpack_require__(260);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "SwitchTransition", function() { return __WEBPACK_IMPORTED_MODULE_2__SwitchTransition__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__TransitionGroup__ = __webpack_require__(64);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "TransitionGroup", function() { return __WEBPACK_IMPORTED_MODULE_3__TransitionGroup__["a"]; });
@@ -8515,7 +8515,7 @@ function getBoundingClientRect(element, includeScale) {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getNodeName_js__ = __webpack_require__(22);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getComputedStyle_js__ = __webpack_require__(28);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__instanceOf_js__ = __webpack_require__(11);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__isTableElement_js__ = __webpack_require__(315);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__isTableElement_js__ = __webpack_require__(317);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__getParentNode_js__ = __webpack_require__(37);
 
 
@@ -8550,6 +8550,10 @@ function getContainingBlock(element) {
 
   var currentNode = Object(__WEBPACK_IMPORTED_MODULE_5__getParentNode_js__["a" /* default */])(element);
 
+  if (Object(__WEBPACK_IMPORTED_MODULE_3__instanceOf_js__["c" /* isShadowRoot */])(currentNode)) {
+    currentNode = currentNode.host;
+  }
+
   while (Object(__WEBPACK_IMPORTED_MODULE_3__instanceOf_js__["b" /* isHTMLElement */])(currentNode) && ['html', 'body'].indexOf(Object(__WEBPACK_IMPORTED_MODULE_1__getNodeName_js__["a" /* default */])(currentNode)) < 0) {
     var css = Object(__WEBPACK_IMPORTED_MODULE_2__getComputedStyle_js__["a" /* default */])(currentNode); // This is non-exhaustive but covers the most common CSS properties that
     // create a containing block.
@@ -8598,7 +8602,7 @@ function getVariation(placement) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = detectOverflow;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__dom_utils_getClippingRect_js__ = __webpack_require__(318);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__dom_utils_getClippingRect_js__ = __webpack_require__(320);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__dom_utils_getDocumentElement_js__ = __webpack_require__(18);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__dom_utils_getBoundingClientRect_js__ = __webpack_require__(30);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__computeOffsets_js__ = __webpack_require__(83);
@@ -37896,9 +37900,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerISO = exports.DatePicker = void 0;
 var React = __importStar(__webpack_require__(1));
-var addDays_1 = __importDefault(__webpack_require__(266));
-var format_1 = __importDefault(__webpack_require__(267));
-var calendar_1 = __webpack_require__(291);
+var addDays_1 = __importDefault(__webpack_require__(268));
+var format_1 = __importDefault(__webpack_require__(269));
+var calendar_1 = __webpack_require__(293);
 var lodash_1 = __webpack_require__(38);
 var internalPrimereactClassnames = {
     overlayVisible: 'p-input-overlay-visible',
@@ -38307,7 +38311,7 @@ function mapToStyles(_ref2) {
 
     if (placement === __WEBPACK_IMPORTED_MODULE_0__enums_js__["u" /* top */] || (placement === __WEBPACK_IMPORTED_MODULE_0__enums_js__["l" /* left */] || placement === __WEBPACK_IMPORTED_MODULE_0__enums_js__["s" /* right */]) && variation === __WEBPACK_IMPORTED_MODULE_0__enums_js__["k" /* end */]) {
       sideY = __WEBPACK_IMPORTED_MODULE_0__enums_js__["i" /* bottom */];
-      var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+      var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
       offsetParent[heightProp];
       y -= offsetY - popperRect.height;
       y *= gpuAcceleration ? 1 : -1;
@@ -38315,7 +38319,7 @@ function mapToStyles(_ref2) {
 
     if (placement === __WEBPACK_IMPORTED_MODULE_0__enums_js__["l" /* left */] || (placement === __WEBPACK_IMPORTED_MODULE_0__enums_js__["u" /* top */] || placement === __WEBPACK_IMPORTED_MODULE_0__enums_js__["i" /* bottom */]) && variation === __WEBPACK_IMPORTED_MODULE_0__enums_js__["k" /* end */]) {
       sideX = __WEBPACK_IMPORTED_MODULE_0__enums_js__["s" /* right */];
-      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+      var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
       offsetParent[widthProp];
       x -= offsetX - popperRect.width;
       x *= gpuAcceleration ? 1 : -1;
@@ -38562,17 +38566,17 @@ function popperOffsets(_ref) {
 "use strict";
 /* WEBPACK VAR INJECTION */(function(process) {/* harmony export (immutable) */ __webpack_exports__["c"] = popperGenerator;
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return createPopper; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__dom_utils_getCompositeRect_js__ = __webpack_require__(324);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__dom_utils_getCompositeRect_js__ = __webpack_require__(326);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__dom_utils_getLayoutRect_js__ = __webpack_require__(49);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__dom_utils_listScrollParents_js__ = __webpack_require__(81);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__dom_utils_getOffsetParent_js__ = __webpack_require__(31);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__dom_utils_getComputedStyle_js__ = __webpack_require__(28);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__utils_orderModifiers_js__ = __webpack_require__(327);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__utils_debounce_js__ = __webpack_require__(328);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__utils_validateModifiers_js__ = __webpack_require__(329);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__utils_uniqueBy_js__ = __webpack_require__(331);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__utils_orderModifiers_js__ = __webpack_require__(329);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__utils_debounce_js__ = __webpack_require__(330);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__utils_validateModifiers_js__ = __webpack_require__(331);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__utils_uniqueBy_js__ = __webpack_require__(333);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__utils_getBasePlacement_js__ = __webpack_require__(17);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__utils_mergeByName_js__ = __webpack_require__(332);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__utils_mergeByName_js__ = __webpack_require__(334);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__utils_detectOverflow_js__ = __webpack_require__(33);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__dom_utils_instanceOf_js__ = __webpack_require__(11);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__enums_js__ = __webpack_require__(9);
@@ -38907,6 +38911,7 @@ exports.Button = void 0;
 var React = __importStar(__webpack_require__(1));
 var classnames_1 = __importDefault(__webpack_require__(2));
 var Icon_1 = __webpack_require__(19);
+var Spinner_1 = __webpack_require__(242);
 var Button = /** @class */ (function (_super) {
     __extends(Button, _super);
     function Button() {
@@ -38926,8 +38931,9 @@ var Button = /** @class */ (function (_super) {
             _a['btn--ui-dark'] = this.props.theme === 'dark',
             _a['btn--icon-only-circle'] = this.props.shape === 'round' && this.props.iconOnly,
             _a));
-        return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, onClick: this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": this.props.iconOnly ? this.props.text : '', "data-test-id": this.props['data-test-id'] },
-            this.props.icon ? React.createElement(Icon_1.Icon, { name: this.props.icon }) : null,
+        return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, disabled: this.props.isLoading, "data-loading": this.props.isLoading, onClick: this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": this.props.iconOnly ? this.props.text : '', "data-test-id": this.props['data-test-id'] },
+            this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
+            this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { name: this.props.icon }) : null,
             this.props.iconOnly ? null : this.props.text));
     };
     return Button;
@@ -38980,14 +38986,14 @@ var classNamesShape = process.env.NODE_ENV !== 'production' ? __WEBPACK_IMPORTED
 "use strict";
 /* WEBPACK VAR INJECTION */(function(process) {/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_runtime_helpers_esm_objectWithoutPropertiesLoose__ = __webpack_require__(29);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_runtime_helpers_esm_extends__ = __webpack_require__(39);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__babel_runtime_helpers_esm_assertThisInitialized__ = __webpack_require__(256);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__babel_runtime_helpers_esm_assertThisInitialized__ = __webpack_require__(258);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__babel_runtime_helpers_esm_inheritsLoose__ = __webpack_require__(24);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_prop_types__ = __webpack_require__(3);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4_prop_types__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_react__ = __webpack_require__(1);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5_react__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__TransitionGroupContext__ = __webpack_require__(43);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__utils_ChildMapping__ = __webpack_require__(257);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__utils_ChildMapping__ = __webpack_require__(259);
 
 
 
@@ -39373,7 +39379,7 @@ var _propTypes = _interopRequireDefault(__webpack_require__(3));
 
 var _ClassNames = __webpack_require__(8);
 
-var _KeyFilter = _interopRequireDefault(__webpack_require__(293));
+var _KeyFilter = _interopRequireDefault(__webpack_require__(295));
 
 var _Tooltip = __webpack_require__(25);
 
@@ -39831,7 +39837,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "popperGenerator", function() { return __WEBPACK_IMPORTED_MODULE_2__createPopper_js__["c"]; });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "detectOverflow", function() { return __WEBPACK_IMPORTED_MODULE_2__createPopper_js__["b"]; });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "createPopperBase", function() { return __WEBPACK_IMPORTED_MODULE_2__createPopper_js__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__popper_js__ = __webpack_require__(333);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__popper_js__ = __webpack_require__(335);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "createPopper", function() { return __WEBPACK_IMPORTED_MODULE_3__popper_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__popper_lite_js__ = __webpack_require__(87);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "createPopperLite", function() { return __WEBPACK_IMPORTED_MODULE_4__popper_lite_js__["a"]; });
@@ -40088,11 +40094,11 @@ function expandToHashMap(value, keys) {
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_getOppositePlacement_js__ = __webpack_require__(316);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_getOppositePlacement_js__ = __webpack_require__(318);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_getBasePlacement_js__ = __webpack_require__(17);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_getOppositeVariationPlacement_js__ = __webpack_require__(317);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_getOppositeVariationPlacement_js__ = __webpack_require__(319);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_detectOverflow_js__ = __webpack_require__(33);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_computeAutoPlacement_js__ = __webpack_require__(322);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_computeAutoPlacement_js__ = __webpack_require__(324);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__enums_js__ = __webpack_require__(9);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__utils_getVariation_js__ = __webpack_require__(32);
 
@@ -40249,7 +40255,7 @@ function flip(_ref) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = listScrollParents;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getScrollParent_js__ = __webpack_require__(321);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getScrollParent_js__ = __webpack_require__(323);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getParentNode_js__ = __webpack_require__(37);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getWindow_js__ = __webpack_require__(14);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__isScrollParent_js__ = __webpack_require__(55);
@@ -40516,7 +40522,7 @@ function offset(_ref2) {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(9);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_getBasePlacement_js__ = __webpack_require__(17);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_getMainAxisFromPlacement_js__ = __webpack_require__(50);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_getAltAxis_js__ = __webpack_require__(323);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_getAltAxis_js__ = __webpack_require__(325);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_within_js__ = __webpack_require__(76);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__dom_utils_getLayoutRect_js__ = __webpack_require__(49);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__dom_utils_getOffsetParent_js__ = __webpack_require__(31);
@@ -40700,7 +40706,7 @@ var createPopper = /*#__PURE__*/Object(__WEBPACK_IMPORTED_MODULE_0__createPopper
 "use strict";
 
 
-module.exports = __webpack_require__(346);
+module.exports = __webpack_require__(348);
 
 /***/ }),
 /* 89 */
@@ -55996,7 +56002,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectGrid = void 0;
 var react_1 = __importDefault(__webpack_require__(1));
 var react_id_generator_1 = __importDefault(__webpack_require__(12));
-var overlaypanel_1 = __webpack_require__(371);
+var overlaypanel_1 = __webpack_require__(373);
 var Loader_1 = __webpack_require__(71);
 var SelectGrid = /** @class */ (function (_super) {
     __extends(SelectGrid, _super);
@@ -60217,6 +60223,89 @@ exports.HelloWorld = HelloWorld;
 
 "use strict";
 
+var __extends = (this && this.__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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingOverlay = exports.Spinner = void 0;
+var React = __importStar(__webpack_require__(1));
+var classnames_1 = __importDefault(__webpack_require__(2));
+__webpack_require__(243);
+var LoadingOverlay = /** @class */ (function (_super) {
+    __extends(LoadingOverlay, _super);
+    function LoadingOverlay() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    LoadingOverlay.prototype.render = function () {
+        return (React.createElement("div", { className: "sd-loading-overlay--plain" }, this.props.children));
+    };
+    return LoadingOverlay;
+}(React.PureComponent));
+exports.LoadingOverlay = LoadingOverlay;
+var Spinner = /** @class */ (function (_super) {
+    __extends(Spinner, _super);
+    function Spinner() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Spinner.prototype.render = function () {
+        var _a;
+        var classes = classnames_1.default('sd-spinner', (_a = {
+                'sd-spinner--small': this.props.size === undefined
+            },
+            _a["sd-spinner--" + this.props.size] = this.props.size || this.props.size !== undefined,
+            _a));
+        return (React.createElement("svg", { role: "progressbar", className: classes, viewBox: "0 0 50 50" },
+            React.createElement("circle", { className: "sd-spinner__path", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "5" })));
+    };
+    return Spinner;
+}(React.PureComponent));
+exports.Spinner = Spinner;
+
+
+/***/ }),
+/* 243 */
+/***/ (function(module, exports) {
+
+// removed by extract-text-webpack-plugin
+
+/***/ }),
+/* 244 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -60270,11 +60359,20 @@ var Input = /** @class */ (function (_super) {
         _this.handleChange = _this.handleChange.bind(_this);
         return _this;
     }
-    Input.prototype.handleChange = function (event) {
-        this.setState({ value: event.target.value });
-        this.props.onChange(event.target.value);
+    Input.prototype.handleData = function (value) {
+        this.setState({ value: value !== null && value !== void 0 ? value : '' });
+        this.props.onChange(value !== null && value !== void 0 ? value : '');
         if (this.props.maxLength && !this.props.invalid) {
-            this.setState({ invalid: event.target.value.length > this.props.maxLength });
+            this.setState({ invalid: value.length > this.props.maxLength });
+        }
+    };
+    Input.prototype.handleChange = function (event) {
+        this.handleData(event.target.value);
+    };
+    Input.prototype.componentDidUpdate = function (prevProps) {
+        var _a;
+        if (this.props.value !== prevProps.value) {
+            this.handleData((_a = this.props.value) !== null && _a !== void 0 ? _a : '');
         }
     };
     Input.prototype.render = function () {
@@ -60284,8 +60382,11 @@ var Input = /** @class */ (function (_super) {
             'sd-input--disabled': this.props.disabled,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
         });
+        var labelClasses = classnames_1.default('sd-input__label', {
+            'a11y-only': this.props.labelHidden,
+        });
         return (React.createElement("div", { className: classes },
-            this.props.label ? React.createElement("label", { className: 'sd-input__label', htmlFor: this.htmlId, id: this.htmlId + 'label' }, this.props.label) : null,
+            React.createElement("label", { className: labelClasses, htmlFor: this.htmlId, id: this.htmlId + 'label' }, this.props.label),
             React.createElement("input", { className: 'sd-input__input', type: 'text', id: this.htmlId, value: this.state.value, "aria-label": this.props.label, "aria-describedby": this.htmlId + 'label', onChange: this.handleChange, disabled: this.props.disabled }),
             this.props.maxLength ?
                 React.createElement("div", { className: 'sd-input__char-count' },
@@ -60306,7 +60407,7 @@ exports.Input = Input;
 
 
 /***/ }),
-/* 243 */
+/* 245 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -60368,6 +60469,13 @@ var Select = /** @class */ (function (_super) {
         this.setState({ value: event.target.value });
         this.props.onChange(event.target.value);
     };
+    Select.prototype.componentDidUpdate = function (prevProps) {
+        var _a, _b;
+        if (this.props.value !== prevProps.value) {
+            this.setState({ value: (_a = this.props.value) !== null && _a !== void 0 ? _a : '' });
+            this.props.onChange((_b = this.props.value) !== null && _b !== void 0 ? _b : '');
+        }
+    };
     Select.prototype.render = function () {
         var classes = classnames_1.default('sd-input sd-input--is-select', {
             'sd-input--inline-label': this.props.inlineLabel,
@@ -60375,9 +60483,11 @@ var Select = /** @class */ (function (_super) {
             'sd-input--disabled': this.props.disabled,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
         });
+        var labelClasses = classnames_1.default('sd-input__label', {
+            'a11y-only': this.props.labelHidden,
+        });
         return (React.createElement("div", { className: classes },
-            this.props.label ?
-                React.createElement("label", { className: 'sd-input__label', htmlFor: this.htmlId }, this.props.label) : null,
+            React.createElement("label", { className: labelClasses, htmlFor: this.htmlId }, this.props.label),
             React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-label": this.props.label, "aria-describedby": this.htmlId, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children),
             React.createElement("div", { className: 'sd-input__message-box' },
                 this.props.info && !this.props.invalid && !this.state.invalid ?
@@ -60403,7 +60513,7 @@ exports.Option = Option;
 
 
 /***/ }),
-/* 244 */
+/* 246 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -60443,7 +60553,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectWithTemplate = void 0;
 var React = __importStar(__webpack_require__(1));
-var dropdown_1 = __webpack_require__(245);
+var dropdown_1 = __webpack_require__(247);
 var labelKey = 'label';
 var SelectWithTemplate = /** @class */ (function (_super) {
     __extends(SelectWithTemplate, _super);
@@ -60508,16 +60618,16 @@ exports.SelectWithTemplate = SelectWithTemplate;
 
 
 /***/ }),
-/* 245 */
+/* 247 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-module.exports = __webpack_require__(246);
+module.exports = __webpack_require__(248);
 
 /***/ }),
-/* 246 */
+/* 248 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -60538,13 +60648,13 @@ var _DomHandler = _interopRequireDefault(__webpack_require__(10));
 
 var _ObjectUtils = _interopRequireDefault(__webpack_require__(15));
 
-var _FilterUtils = _interopRequireDefault(__webpack_require__(247));
+var _FilterUtils = _interopRequireDefault(__webpack_require__(249));
 
 var _ClassNames = __webpack_require__(8);
 
-var _DropdownPanel = __webpack_require__(248);
+var _DropdownPanel = __webpack_require__(250);
 
-var _DropdownItem = __webpack_require__(249);
+var _DropdownItem = __webpack_require__(251);
 
 var _Tooltip = __webpack_require__(25);
 
@@ -61626,7 +61736,7 @@ _defineProperty(Dropdown, "propTypes", {
 });
 
 /***/ }),
-/* 247 */
+/* 249 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -61858,7 +61968,7 @@ var FilterUtils = /*#__PURE__*/function () {
 exports.default = FilterUtils;
 
 /***/ }),
-/* 248 */
+/* 250 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -61981,7 +62091,7 @@ _defineProperty(DropdownPanel, "propTypes", {
 });
 
 /***/ }),
-/* 249 */
+/* 251 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -62101,7 +62211,7 @@ _defineProperty(DropdownItem, "propTypes", {
 });
 
 /***/ }),
-/* 250 */
+/* 252 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -62125,7 +62235,7 @@ exports.default = PrimeReact;
 _defineProperty(PrimeReact, "ripple", false);
 
 /***/ }),
-/* 251 */
+/* 253 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -62134,8 +62244,8 @@ _defineProperty(PrimeReact, "ripple", false);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__babel_runtime_helpers_esm_inheritsLoose__ = __webpack_require__(24);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_prop_types__ = __webpack_require__(3);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_prop_types__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_dom_helpers_addClass__ = __webpack_require__(252);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_dom_helpers_removeClass__ = __webpack_require__(254);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_dom_helpers_addClass__ = __webpack_require__(254);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_dom_helpers_removeClass__ = __webpack_require__(256);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_react__ = __webpack_require__(1);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6_react__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__Transition__ = __webpack_require__(42);
@@ -62555,12 +62665,12 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? Object(__WEBPA
 /* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(5)))
 
 /***/ }),
-/* 252 */
+/* 254 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = addClass;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__hasClass__ = __webpack_require__(253);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__hasClass__ = __webpack_require__(255);
 
 /**
  * Adds a CSS class to a given element.
@@ -62574,7 +62684,7 @@ function addClass(element, className) {
 }
 
 /***/ }),
-/* 253 */
+/* 255 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -62591,7 +62701,7 @@ function hasClass(element, className) {
 }
 
 /***/ }),
-/* 254 */
+/* 256 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -62618,7 +62728,7 @@ function removeClass(element, className) {
 }
 
 /***/ }),
-/* 255 */
+/* 257 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -62770,7 +62880,7 @@ ReplaceTransition.propTypes = process.env.NODE_ENV !== "production" ? {
 /* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(5)))
 
 /***/ }),
-/* 256 */
+/* 258 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -62784,7 +62894,7 @@ function _assertThisInitialized(self) {
 }
 
 /***/ }),
-/* 257 */
+/* 259 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -62936,7 +63046,7 @@ function getNextChildMapping(nextProps, prevChildMapping, onExited) {
 }
 
 /***/ }),
-/* 258 */
+/* 260 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -63208,7 +63318,7 @@ SwitchTransition.defaultProps = {
 /* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(5)))
 
 /***/ }),
-/* 259 */
+/* 261 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -63275,7 +63385,7 @@ exports.Popover = Popover;
 
 
 /***/ }),
-/* 260 */
+/* 262 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -63347,7 +63457,7 @@ exports.Label = Label;
 
 
 /***/ }),
-/* 261 */
+/* 263 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -63434,7 +63544,7 @@ exports.Alert = Alert;
 
 
 /***/ }),
-/* 262 */
+/* 264 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -63497,7 +63607,7 @@ exports.IconButton = IconButton;
 
 
 /***/ }),
-/* 263 */
+/* 265 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -63564,7 +63674,7 @@ exports.IconLabel = IconLabel;
 
 
 /***/ }),
-/* 264 */
+/* 266 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -63630,7 +63740,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 var React = __importStar(__webpack_require__(1));
 var react_id_generator_1 = __importDefault(__webpack_require__(12));
-var tooltip_1 = __webpack_require__(265);
+var tooltip_1 = __webpack_require__(267);
 exports.Tooltip = function (_a) {
     var appendToBody = _a.appendToBody, children = _a.children, otherProps = __rest(_a, ["appendToBody", "children"]);
     return appendToBody ?
@@ -63677,7 +63787,7 @@ var TooltipAppended = function (_a) {
 
 
 /***/ }),
-/* 265 */
+/* 267 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -63686,7 +63796,7 @@ var TooltipAppended = function (_a) {
 module.exports = __webpack_require__(25);
 
 /***/ }),
-/* 266 */
+/* 268 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -63731,20 +63841,20 @@ function addDays(dirtyDate, dirtyAmount) {
 }
 
 /***/ }),
-/* 267 */
+/* 269 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony export (immutable) */ __webpack_exports__["default"] = format;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__isValid_index_js__ = __webpack_require__(268);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__locale_en_US_index_js__ = __webpack_require__(269);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__subMilliseconds_index_js__ = __webpack_require__(279);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__isValid_index_js__ = __webpack_require__(270);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__locale_en_US_index_js__ = __webpack_require__(271);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__subMilliseconds_index_js__ = __webpack_require__(281);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__toDate_index_js__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__lib_format_formatters_index_js__ = __webpack_require__(281);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__lib_format_longFormatters_index_js__ = __webpack_require__(288);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__lib_getTimezoneOffsetInMilliseconds_index_js__ = __webpack_require__(289);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__lib_protectedTokens_index_js__ = __webpack_require__(290);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__lib_format_formatters_index_js__ = __webpack_require__(283);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__lib_format_longFormatters_index_js__ = __webpack_require__(290);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__lib_getTimezoneOffsetInMilliseconds_index_js__ = __webpack_require__(291);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__lib_protectedTokens_index_js__ = __webpack_require__(292);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__lib_toInteger_index_js__ = __webpack_require__(21);
 
 
@@ -64180,7 +64290,7 @@ function cleanEscapedString(input) {
 }
 
 /***/ }),
-/* 268 */
+/* 270 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -64255,15 +64365,15 @@ function isValid(dirtyDate) {
 }
 
 /***/ }),
-/* 269 */
+/* 271 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lib_formatDistance_index_js__ = __webpack_require__(270);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__lib_formatLong_index_js__ = __webpack_require__(271);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__lib_formatRelative_index_js__ = __webpack_require__(273);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__lib_localize_index_js__ = __webpack_require__(274);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__lib_match_index_js__ = __webpack_require__(276);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lib_formatDistance_index_js__ = __webpack_require__(272);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__lib_formatLong_index_js__ = __webpack_require__(273);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__lib_formatRelative_index_js__ = __webpack_require__(275);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__lib_localize_index_js__ = __webpack_require__(276);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__lib_match_index_js__ = __webpack_require__(278);
 
 
 
@@ -64296,7 +64406,7 @@ var locale = {
 /* harmony default export */ __webpack_exports__["a"] = (locale);
 
 /***/ }),
-/* 270 */
+/* 272 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -64380,11 +64490,11 @@ function formatDistance(token, count, options) {
 }
 
 /***/ }),
-/* 271 */
+/* 273 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lib_buildFormatLongFn_index_js__ = __webpack_require__(272);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lib_buildFormatLongFn_index_js__ = __webpack_require__(274);
 
 var dateFormats = {
   full: 'EEEE, MMMM do, y',
@@ -64421,7 +64531,7 @@ var formatLong = {
 /* harmony default export */ __webpack_exports__["a"] = (formatLong);
 
 /***/ }),
-/* 272 */
+/* 274 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -64436,7 +64546,7 @@ function buildFormatLongFn(args) {
 }
 
 /***/ }),
-/* 273 */
+/* 275 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -64454,11 +64564,11 @@ function formatRelative(token, _date, _baseDate, _options) {
 }
 
 /***/ }),
-/* 274 */
+/* 276 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lib_buildLocalizeFn_index_js__ = __webpack_require__(275);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lib_buildLocalizeFn_index_js__ = __webpack_require__(277);
 
 var eraValues = {
   narrow: ['B', 'A'],
@@ -64610,7 +64720,7 @@ var localize = {
 /* harmony default export */ __webpack_exports__["a"] = (localize);
 
 /***/ }),
-/* 275 */
+/* 277 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -64639,12 +64749,12 @@ function buildLocalizeFn(args) {
 }
 
 /***/ }),
-/* 276 */
+/* 278 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lib_buildMatchPatternFn_index_js__ = __webpack_require__(277);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__lib_buildMatchFn_index_js__ = __webpack_require__(278);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lib_buildMatchPatternFn_index_js__ = __webpack_require__(279);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__lib_buildMatchFn_index_js__ = __webpack_require__(280);
 
 
 var matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i;
@@ -64745,7 +64855,7 @@ var match = {
 /* harmony default export */ __webpack_exports__["a"] = (match);
 
 /***/ }),
-/* 277 */
+/* 279 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -64777,7 +64887,7 @@ function buildMatchPatternFn(args) {
 }
 
 /***/ }),
-/* 278 */
+/* 280 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -64834,13 +64944,13 @@ function findIndex(array, predicate) {
 }
 
 /***/ }),
-/* 279 */
+/* 281 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = subMilliseconds;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lib_toInteger_index_js__ = __webpack_require__(21);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__addMilliseconds_index_js__ = __webpack_require__(280);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__addMilliseconds_index_js__ = __webpack_require__(282);
 
 
 /**
@@ -64876,7 +64986,7 @@ function subMilliseconds(dirtyDate, dirtyAmount) {
 }
 
 /***/ }),
-/* 280 */
+/* 282 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -64919,15 +65029,15 @@ function addMilliseconds(dirtyDate, dirtyAmount) {
 }
 
 /***/ }),
-/* 281 */
+/* 283 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lightFormatters_index_js__ = __webpack_require__(282);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__lib_getUTCDayOfYear_index_js__ = __webpack_require__(283);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__lib_getUTCISOWeek_index_js__ = __webpack_require__(284);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lightFormatters_index_js__ = __webpack_require__(284);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__lib_getUTCDayOfYear_index_js__ = __webpack_require__(285);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__lib_getUTCISOWeek_index_js__ = __webpack_require__(286);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__lib_getUTCISOWeekYear_index_js__ = __webpack_require__(67);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__lib_getUTCWeek_index_js__ = __webpack_require__(286);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__lib_getUTCWeek_index_js__ = __webpack_require__(288);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__lib_getUTCWeekYear_index_js__ = __webpack_require__(68);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__addLeadingZeros_index_js__ = __webpack_require__(66);
 
@@ -65788,7 +65898,7 @@ function formatTimezone(offset, dirtyDelimiter) {
 /* harmony default export */ __webpack_exports__["a"] = (formatters);
 
 /***/ }),
-/* 282 */
+/* 284 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -65877,7 +65987,7 @@ var formatters = {
 /* harmony default export */ __webpack_exports__["a"] = (formatters);
 
 /***/ }),
-/* 283 */
+/* 285 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -65902,14 +66012,14 @@ function getUTCDayOfYear(dirtyDate) {
 }
 
 /***/ }),
-/* 284 */
+/* 286 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getUTCISOWeek;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toDate_index_js__ = __webpack_require__(13);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(46);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCISOWeekYear_index_js__ = __webpack_require__(285);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCISOWeekYear_index_js__ = __webpack_require__(287);
 
 
 
@@ -65930,7 +66040,7 @@ function getUTCISOWeek(dirtyDate) {
 }
 
 /***/ }),
-/* 285 */
+/* 287 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -65955,14 +66065,14 @@ function startOfUTCISOWeekYear(dirtyDate) {
 }
 
 /***/ }),
-/* 286 */
+/* 288 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getUTCWeek;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toDate_index_js__ = __webpack_require__(13);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCWeek_index_js__ = __webpack_require__(47);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCWeekYear_index_js__ = __webpack_require__(287);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCWeekYear_index_js__ = __webpack_require__(289);
 
 
 
@@ -65983,7 +66093,7 @@ function getUTCWeek(dirtyDate, options) {
 }
 
 /***/ }),
-/* 287 */
+/* 289 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -66015,7 +66125,7 @@ function startOfUTCWeekYear(dirtyDate, dirtyOptions) {
 }
 
 /***/ }),
-/* 288 */
+/* 290 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -66117,7 +66227,7 @@ var longFormatters = {
 /* harmony default export */ __webpack_exports__["a"] = (longFormatters);
 
 /***/ }),
-/* 289 */
+/* 291 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -66144,7 +66254,7 @@ function getTimezoneOffsetInMilliseconds(dirtyDate) {
 }
 
 /***/ }),
-/* 290 */
+/* 292 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -66172,16 +66282,16 @@ function throwProtectedError(token) {
 }
 
 /***/ }),
-/* 291 */
+/* 293 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-module.exports = __webpack_require__(292);
+module.exports = __webpack_require__(294);
 
 /***/ }),
-/* 292 */
+/* 294 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -66202,7 +66312,7 @@ var _InputText = __webpack_require__(69);
 
 var _Button = __webpack_require__(70);
 
-var _CalendarPanel = __webpack_require__(294);
+var _CalendarPanel = __webpack_require__(296);
 
 var _DomHandler = _interopRequireDefault(__webpack_require__(10));
 
@@ -69548,7 +69658,7 @@ _defineProperty(Calendar, "propTypes", {
 });
 
 /***/ }),
-/* 293 */
+/* 295 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -69697,7 +69807,7 @@ _defineProperty(KeyFilter, "SAFARI_KEYS", {
 });
 
 /***/ }),
-/* 294 */
+/* 296 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -69794,7 +69904,7 @@ _defineProperty(CalendarPanel, "propTypes", {
 });
 
 /***/ }),
-/* 295 */
+/* 297 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -69855,7 +69965,7 @@ exports.FormLabel = FormLabel;
 
 
 /***/ }),
-/* 296 */
+/* 298 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -69933,7 +70043,7 @@ exports.Switch = Switch;
 
 
 /***/ }),
-/* 297 */
+/* 299 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -69997,7 +70107,7 @@ exports.SwitchGroup = SwitchGroup;
 
 
 /***/ }),
-/* 298 */
+/* 300 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -70063,7 +70173,7 @@ exports.ButtonGroup = ButtonGroup;
 
 
 /***/ }),
-/* 299 */
+/* 301 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -70133,7 +70243,7 @@ exports.Radio = Radio;
 
 
 /***/ }),
-/* 300 */
+/* 302 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -70203,7 +70313,7 @@ exports.Checkbox = Checkbox;
 
 
 /***/ }),
-/* 301 */
+/* 303 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -70275,7 +70385,7 @@ exports.RadioButton = RadioButton;
 
 
 /***/ }),
-/* 302 */
+/* 304 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -70347,7 +70457,7 @@ exports.CheckboxButton = CheckboxButton;
 
 
 /***/ }),
-/* 303 */
+/* 305 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -70409,7 +70519,7 @@ exports.CheckGroup = CheckGroup;
 
 
 /***/ }),
-/* 304 */
+/* 306 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -70475,7 +70585,7 @@ exports.CheckButtonGroup = CheckButtonGroup;
 
 
 /***/ }),
-/* 305 */
+/* 307 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -70546,7 +70656,7 @@ exports.NavButton = NavButton;
 
 
 /***/ }),
-/* 306 */
+/* 308 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -70612,31 +70722,52 @@ var TabList = /** @class */ (function (_super) {
         _this.goTo = _this.goTo.bind(_this);
         return _this;
     }
+    TabList.prototype.componentDidMount = function () {
+        var _a;
+        if (this.props.selected) {
+            this.goTo((_a = this.props.selected) !== null && _a !== void 0 ? _a : '');
+        }
+    };
     TabList.prototype.handleChange = function (index) {
         this.setState({
             index: index,
         });
     };
-    TabList.prototype.goTo = function (label) {
-        var refLabel = this.props.children.find(function (item) { return item.props.label === label; });
-        this.setState({
-            index: this.props.children.indexOf(refLabel),
+    TabList.prototype.goTo = function (index) {
+        var _a, _b;
+        if (this.props.tabs) {
+            var refLabel = (_a = this.props.tabs) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item.id === index; });
+            this.setState({
+                index: refLabel ? (_b = this.props.tabs) === null || _b === void 0 ? void 0 : _b.indexOf(refLabel) : 0,
+            });
+        }
+        else {
+            var refLabel = this.props.children.find(function (item) { return item.props.id === index; });
+            this.setState({
+                index: this.props.children.indexOf(refLabel),
+            });
+        }
+    };
+    TabList.prototype.navBar = function (arr) {
+        var _this = this;
+        return arr.map(function (item, index) {
+            var label = _this.props.tabs ? item.label : item.props.label;
+            return React.createElement("button", { id: "TabList-" + index, key: index, onClick: function () { return _this.handleChange(index); }, role: 'tab', "aria-selected": _this.state.index === index ? 'true' : 'false', className: 'sd-nav-tabs__tab' + (_this.state.index === index ? ' sd-nav-tabs__tab--active' : '') },
+                React.createElement("span", null, label));
         });
     };
     TabList.prototype.render = function () {
         var _a;
-        var _this = this;
         var classes = classnames_1.default('sd-nav-tabs', (_a = {},
             _a["sd-nav-tabs--" + this.props.size] = this.props.size && this.props.size !== undefined,
             _a['sd-nav-tabs--ui-dark'] = this.props.theme === 'dark',
             _a));
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: classes, role: 'tablist' }, this.props.children.map(function (item, index) {
-                return React.createElement("button", { key: index, onClick: function () { return _this.handleChange(index); }, role: 'tab', "aria-selected": _this.state.index === index ? 'true' : 'false', className: 'sd-nav-tabs__tab' + (_this.state.index === index ? ' sd-nav-tabs__tab--active' : '') },
-                    React.createElement("span", null, item.props.label));
-            })),
-            React.createElement("div", { className: 'sd-nav-tabs__content' +
-                    (this.props.theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, this.props.children[this.state.index])));
+            React.createElement("div", { className: classes, role: 'tablist' }, this.props.tabs ? this.navBar(this.props.tabs) : this.navBar(this.props.children)),
+            React.createElement("div", { "aria-labelledby": "TabList-" + this.state.index, role: 'tabpanel', className: 'sd-nav-tabs__content' +
+                    (this.props.theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, this.props.tabs
+                ? React.createElement(Tab, { id: this.props.tabs[this.state.index].id }, this.props.tabs[this.state.index].content)
+                : this.props.children[this.state.index])));
     };
     return TabList;
 }(React.PureComponent));
@@ -70644,7 +70775,7 @@ exports.TabList = TabList;
 
 
 /***/ }),
-/* 307 */
+/* 309 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -70725,7 +70856,7 @@ exports.LeftMenu = LeftMenu;
 
 
 /***/ }),
-/* 308 */
+/* 310 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -70793,7 +70924,7 @@ exports.SubNav = SubNav;
 
 
 /***/ }),
-/* 309 */
+/* 311 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -70847,7 +70978,7 @@ exports.SlidingToolbar = SlidingToolbar;
 
 
 /***/ }),
-/* 310 */
+/* 312 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -70901,7 +71032,7 @@ exports.StrechBar = StrechBar;
 
 
 /***/ }),
-/* 311 */
+/* 313 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -70980,7 +71111,7 @@ exports.PropsList = PropsList;
 
 
 /***/ }),
-/* 312 */
+/* 314 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -71045,7 +71176,7 @@ exports.Divider = Divider;
 
 
 /***/ }),
-/* 313 */
+/* 315 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -71104,7 +71235,7 @@ exports.HeadingText = HeadingText;
 
 
 /***/ }),
-/* 314 */
+/* 316 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -71336,7 +71467,7 @@ var DropdownItem = function (_a) {
 
 
 /***/ }),
-/* 315 */
+/* 317 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -71348,7 +71479,7 @@ function isTableElement(element) {
 }
 
 /***/ }),
-/* 316 */
+/* 318 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -71366,7 +71497,7 @@ function getOppositePlacement(placement) {
 }
 
 /***/ }),
-/* 317 */
+/* 319 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -71382,14 +71513,14 @@ function getOppositeVariationPlacement(placement) {
 }
 
 /***/ }),
-/* 318 */
+/* 320 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getClippingRect;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(9);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getViewportRect_js__ = __webpack_require__(319);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getDocumentRect_js__ = __webpack_require__(320);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getViewportRect_js__ = __webpack_require__(321);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getDocumentRect_js__ = __webpack_require__(322);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__listScrollParents_js__ = __webpack_require__(81);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__getOffsetParent_js__ = __webpack_require__(31);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__getDocumentElement_js__ = __webpack_require__(18);
@@ -71473,7 +71604,7 @@ function getClippingRect(element, boundary, rootBoundary) {
 }
 
 /***/ }),
-/* 319 */
+/* 321 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -71523,7 +71654,7 @@ function getViewportRect(element) {
 }
 
 /***/ }),
-/* 320 */
+/* 322 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -71564,7 +71695,7 @@ function getDocumentRect(element) {
 }
 
 /***/ }),
-/* 321 */
+/* 323 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -71591,7 +71722,7 @@ function getScrollParent(node) {
 }
 
 /***/ }),
-/* 322 */
+/* 324 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -71650,7 +71781,7 @@ function computeAutoPlacement(state, options) {
 /* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(5)))
 
 /***/ }),
-/* 323 */
+/* 325 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -71660,13 +71791,13 @@ function getAltAxis(axis) {
 }
 
 /***/ }),
-/* 324 */
+/* 326 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getCompositeRect;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getBoundingClientRect_js__ = __webpack_require__(30);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getNodeScroll_js__ = __webpack_require__(325);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getNodeScroll_js__ = __webpack_require__(327);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getNodeName_js__ = __webpack_require__(22);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__instanceOf_js__ = __webpack_require__(11);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__getWindowScrollBarX_js__ = __webpack_require__(53);
@@ -71733,7 +71864,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
 }
 
 /***/ }),
-/* 325 */
+/* 327 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -71741,7 +71872,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getWindowScroll_js__ = __webpack_require__(54);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getWindow_js__ = __webpack_require__(14);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__instanceOf_js__ = __webpack_require__(11);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__getHTMLElementScroll_js__ = __webpack_require__(326);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__getHTMLElementScroll_js__ = __webpack_require__(328);
 
 
 
@@ -71755,7 +71886,7 @@ function getNodeScroll(node) {
 }
 
 /***/ }),
-/* 326 */
+/* 328 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -71768,7 +71899,7 @@ function getHTMLElementScroll(element) {
 }
 
 /***/ }),
-/* 327 */
+/* 329 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -71820,7 +71951,7 @@ function orderModifiers(modifiers) {
 }
 
 /***/ }),
-/* 328 */
+/* 330 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -71842,12 +71973,12 @@ function debounce(fn) {
 }
 
 /***/ }),
-/* 329 */
+/* 331 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = validateModifiers;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__format_js__ = __webpack_require__(330);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__format_js__ = __webpack_require__(332);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__enums_js__ = __webpack_require__(9);
 
 
@@ -71932,7 +72063,7 @@ function validateModifiers(modifiers) {
 }
 
 /***/ }),
-/* 330 */
+/* 332 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -71948,7 +72079,7 @@ function format(str) {
 }
 
 /***/ }),
-/* 331 */
+/* 333 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -71966,7 +72097,7 @@ function uniqueBy(arr, fn) {
 }
 
 /***/ }),
-/* 332 */
+/* 334 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -71987,7 +72118,7 @@ function mergeByName(modifiers) {
 }
 
 /***/ }),
-/* 333 */
+/* 335 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -72031,7 +72162,7 @@ var createPopper = /*#__PURE__*/Object(__WEBPACK_IMPORTED_MODULE_0__createPopper
 
 
 /***/ }),
-/* 334 */
+/* 336 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -72069,7 +72200,7 @@ exports.Tag = function (_a) {
         _b["tag-label--" + shade] = shade && shade !== 'light',
         _b['tag-label--square'] = shape === 'square',
         _b));
-    return (React.createElement("div", { className: classes, key: keyValue },
+    return (React.createElement("span", { className: classes, key: keyValue },
         text,
         !readOnly ? React.createElement("button", { className: 'tag-label__remove', onClick: onClick },
             React.createElement("i", { className: 'icon-close-small' })) : null));
@@ -72077,7 +72208,7 @@ exports.Tag = function (_a) {
 
 
 /***/ }),
-/* 335 */
+/* 337 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -72105,48 +72236,77 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabPanel = exports.TabContent = exports.Tabs = exports.TabLabel = void 0;
+exports.TabPanel = exports.TabItem = exports.TabContent = exports.TabNav = void 0;
 var React = __importStar(__webpack_require__(1));
 var classnames_1 = __importDefault(__webpack_require__(2));
-exports.TabLabel = function (_a) {
-    var label = _a.label;
-    return (React.createElement("span", null, label));
-};
-exports.Tabs = function (_a) {
+exports.TabNav = function (_a) {
     var _b;
-    var size = _a.size, theme = _a.theme, ariaLabel = _a.ariaLabel, children = _a.children, onClick = _a.onClick;
+    var size = _a.size, theme = _a.theme, ariaLabel = _a.ariaLabel, children = _a.children, onClick = _a.onClick, tabs = _a.tabs, activePanel = _a.activePanel;
     var _c = React.useState(0), index = _c[0], setIndex = _c[1];
-    function handleSelected(i) {
-        setIndex(i);
-        handleClick(i);
+    function goTo(id) {
+        if (tabs) {
+            var refLabel = tabs === null || tabs === void 0 ? void 0 : tabs.find(function (item) { return item.id === id; });
+            if (refLabel) {
+                setIndex(tabs.indexOf(refLabel));
+            }
+        }
+        else {
+            var refLabel = children.find(function (item) { return item.props.id === id; });
+            setIndex(children.indexOf(refLabel));
+        }
+    }
+    React.useEffect(function () {
+        goTo(activePanel ? activePanel : (tabs ? tabs[0].id : children[0].props.id));
+    }, []);
+    function handleSelected(id) {
+        goTo(id);
+        onClick(id);
     }
-    var handleClick = function (i) {
-        onClick(i);
-    };
     var classes = classnames_1.default('sd-nav-tabs', (_b = {},
         _b["sd-nav-tabs--" + size] = size && size !== undefined,
         _b['sd-nav-tabs--ui-dark'] = theme === 'dark',
         _b));
-    return (React.createElement("div", { className: classes, role: 'tablist', "aria-label": ariaLabel ? ariaLabel : 'tabs' }, children.map(function (item, i) {
-        return React.createElement("button", { key: i, "aria-controls": 'tabpanel-' + i, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(i); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item);
-    })));
+    return (React.createElement("div", { className: classes, role: 'tablist', "aria-label": ariaLabel ? ariaLabel : 'tabs' }, tabs ?
+        tabs.map(function (item, i) {
+            return React.createElement("button", { id: "tab-" + item.id, key: i, "aria-controls": 'tabpanel-' + item.id, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(item.id); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item.label);
+        })
+        :
+            children.map(function (item, i) {
+                return React.createElement("button", { id: "tab-" + item.props.id, key: i, "aria-controls": 'tabpanel-' + item.props.id, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(item.props.id); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item);
+            })));
 };
 exports.TabContent = function (_a) {
-    var theme = _a.theme, children = _a.children, activePanel = _a.activePanel;
+    var theme = _a.theme, children = _a.children, activePanel = _a.activePanel, tabs = _a.tabs;
+    if (!activePanel && tabs) {
+        activePanel = tabs[0].id;
+    }
+    else if (!activePanel && children) {
+        activePanel = children[0].props.id;
+    }
     return (React.createElement("div", { className: 'sd-nav-tabs__content' +
-            (theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, children.map(function (panel, i) {
-        return panel.props.indexValue === activePanel ?
-            React.createElement("div", { className: 'sd-nav-tabs__pane', role: 'tabpanel', "aria-labelledby": 'tab-' + activePanel, key: i }, panel) : null;
-    })));
+            (theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, tabs ?
+        tabs.map(function (panel, i) {
+            return panel.id === activePanel ?
+                React.createElement("div", { className: 'sd-nav-tabs__pane', role: 'tabpanel', "aria-labelledby": "tab-" + panel.id, key: i }, panel.content) : null;
+        })
+        :
+            children.map(function (panel, i) {
+                return panel.props.id === activePanel ?
+                    React.createElement("div", { className: 'sd-nav-tabs__pane', role: 'tabpanel', "aria-labelledby": "tab-" + panel.props.id, key: i }, panel) : null;
+            })));
+};
+exports.TabItem = function (_a) {
+    var children = _a.children;
+    return (React.createElement("span", null, children));
 };
 exports.TabPanel = function (_a) {
-    var children = _a.children, indexValue = _a.indexValue;
-    return (React.createElement(React.Fragment, { key: indexValue }, children));
+    var children = _a.children, id = _a.id;
+    return (React.createElement(React.Fragment, { key: id }, children));
 };
 
 
 /***/ }),
-/* 336 */
+/* 338 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -72202,7 +72362,7 @@ var EmptyState = /** @class */ (function (_super) {
             },
             _a["content-state__image--" + this.props.size] = this.props.size || this.props.size !== undefined,
             _a));
-        var image = __webpack_require__(337)("./empty-state--" + (this.props.size ? this.props.size : 'small') + "-" + (this.props.illustration ? this.props.illustration : '1') + ".svg");
+        var image = __webpack_require__(339)("./empty-state--" + (this.props.size ? this.props.size : 'small') + "-" + (this.props.illustration ? this.props.illustration : '1') + ".svg");
         return (React.createElement("div", { className: 'content-state--empty-container' },
             React.createElement("div", { className: 'content-state__empty-info' },
                 React.createElement("figure", { className: classes },
@@ -72216,17 +72376,17 @@ exports.EmptyState = EmptyState;
 
 
 /***/ }),
-/* 337 */
+/* 339 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var map = {
-	"./empty-state--large-1.svg": 338,
-	"./empty-state--large-2.svg": 339,
-	"./empty-state--large-3.svg": 340,
-	"./empty-state--large-dashboard.svg": 341,
-	"./empty-state--small-1.svg": 342,
-	"./empty-state--small-2.svg": 343,
-	"./empty-state--small-3.svg": 344
+	"./empty-state--large-1.svg": 340,
+	"./empty-state--large-2.svg": 341,
+	"./empty-state--large-3.svg": 342,
+	"./empty-state--large-dashboard.svg": 343,
+	"./empty-state--small-1.svg": 344,
+	"./empty-state--small-2.svg": 345,
+	"./empty-state--small-3.svg": 346
 };
 function webpackContext(req) {
 	return __webpack_require__(webpackContextResolve(req));
@@ -72242,52 +72402,52 @@ webpackContext.keys = function webpackContextKeys() {
 };
 webpackContext.resolve = webpackContextResolve;
 module.exports = webpackContext;
-webpackContext.id = 337;
+webpackContext.id = 339;
 
 /***/ }),
-/* 338 */
+/* 340 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports = __webpack_require__.p + "empty-state--large-1.svg";
 
 /***/ }),
-/* 339 */
+/* 341 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports = __webpack_require__.p + "empty-state--large-2.svg";
 
 /***/ }),
-/* 340 */
+/* 342 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports = __webpack_require__.p + "empty-state--large-3.svg";
 
 /***/ }),
-/* 341 */
+/* 343 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports = __webpack_require__.p + "empty-state--large-dashboard.svg";
 
 /***/ }),
-/* 342 */
+/* 344 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports = __webpack_require__.p + "empty-state--small-1.svg";
 
 /***/ }),
-/* 343 */
+/* 345 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports = __webpack_require__.p + "empty-state--small-2.svg";
 
 /***/ }),
-/* 344 */
+/* 346 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports = __webpack_require__.p + "empty-state--small-3.svg";
 
 /***/ }),
-/* 345 */
+/* 347 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -72453,7 +72613,7 @@ exports.Autocomplete = Autocomplete;
 
 
 /***/ }),
-/* 346 */
+/* 348 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -72480,7 +72640,7 @@ var _DomHandler = _interopRequireDefault(__webpack_require__(10));
 
 var _ObjectUtils = _interopRequireDefault(__webpack_require__(15));
 
-var _AutoCompletePanel = __webpack_require__(347);
+var _AutoCompletePanel = __webpack_require__(349);
 
 var _ClassNames = __webpack_require__(8);
 
@@ -73389,7 +73549,7 @@ _defineProperty(AutoComplete, "propTypes", {
 });
 
 /***/ }),
-/* 347 */
+/* 349 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -73542,7 +73702,7 @@ _defineProperty(AutoCompletePanel, "propTypes", {
 });
 
 /***/ }),
-/* 348 */
+/* 350 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -73566,7 +73726,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DonutChart = void 0;
 var react_1 = __importDefault(__webpack_require__(1));
-var chart_1 = __webpack_require__(349);
+var chart_1 = __webpack_require__(351);
 var DonutChart = /** @class */ (function (_super) {
     __extends(DonutChart, _super);
     function DonutChart() {
@@ -73581,16 +73741,16 @@ exports.DonutChart = DonutChart;
 
 
 /***/ }),
-/* 349 */
+/* 351 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-module.exports = __webpack_require__(350);
+module.exports = __webpack_require__(352);
 
 /***/ }),
-/* 350 */
+/* 352 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -73607,7 +73767,7 @@ var _react = _interopRequireWildcard(__webpack_require__(1));
 
 var _propTypes = _interopRequireDefault(__webpack_require__(3));
 
-var ChartJS = _interopRequireWildcard(__webpack_require__(351));
+var ChartJS = _interopRequireWildcard(__webpack_require__(353));
 
 var _ClassNames = __webpack_require__(8);
 
@@ -73770,7 +73930,7 @@ _defineProperty(Chart, "propTypes", {
 });
 
 /***/ }),
-/* 351 */
+/* 353 */
 /***/ (function(module, exports, __webpack_require__) {
 
 /*!
@@ -89948,7 +90108,7 @@ return src;
 
 
 /***/ }),
-/* 352 */
+/* 354 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var map = {
@@ -90237,10 +90397,10 @@ webpackContext.keys = function webpackContextKeys() {
 };
 webpackContext.resolve = webpackContextResolve;
 module.exports = webpackContext;
-webpackContext.id = 352;
+webpackContext.id = 354;
 
 /***/ }),
-/* 353 */
+/* 355 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -90280,7 +90440,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Carousel = void 0;
 var React = __importStar(__webpack_require__(1));
-var carousel_1 = __webpack_require__(354);
+var carousel_1 = __webpack_require__(356);
 var Badge_1 = __webpack_require__(65);
 var Carousel = /** @class */ (function (_super) {
     __extends(Carousel, _super);
@@ -90306,16 +90466,16 @@ exports.Carousel = Carousel;
 
 
 /***/ }),
-/* 354 */
+/* 356 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-module.exports = __webpack_require__(355);
+module.exports = __webpack_require__(357);
 
 /***/ }),
-/* 355 */
+/* 357 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -91143,7 +91303,7 @@ _defineProperty(Carousel, "propTypes", {
 });
 
 /***/ }),
-/* 356 */
+/* 358 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -91167,7 +91327,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
 var react_1 = __importDefault(__webpack_require__(1));
-var dialog_1 = __webpack_require__(357);
+var dialog_1 = __webpack_require__(359);
 var Modal = /** @class */ (function (_super) {
     __extends(Modal, _super);
     function Modal() {
@@ -91183,16 +91343,16 @@ exports.Modal = Modal;
 
 
 /***/ }),
-/* 357 */
+/* 359 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-module.exports = __webpack_require__(358);
+module.exports = __webpack_require__(360);
 
 /***/ }),
-/* 358 */
+/* 360 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -91740,7 +91900,7 @@ _defineProperty(Dialog, "propTypes", {
 });
 
 /***/ }),
-/* 359 */
+/* 361 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -91946,7 +92106,7 @@ exports.TagInput = function (_a) {
 
 
 /***/ }),
-/* 360 */
+/* 362 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -92040,7 +92200,7 @@ exports.TagInputTest = TagInputTest;
 
 
 /***/ }),
-/* 361 */
+/* 363 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -92110,7 +92270,7 @@ exports.GridList = GridList;
 
 
 /***/ }),
-/* 362 */
+/* 364 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -92141,7 +92301,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.toasted = void 0;
 var React = __importStar(__webpack_require__(1));
 var ReactDOM = __importStar(__webpack_require__(7));
-var ToastWrapper_1 = __importDefault(__webpack_require__(363));
+var ToastWrapper_1 = __importDefault(__webpack_require__(365));
 var TOAST_ID = "react-toast";
 var Toasted = /** @class */ (function () {
     function Toasted() {
@@ -92186,7 +92346,7 @@ exports.toasted = new Toasted();
 
 
 /***/ }),
-/* 363 */
+/* 365 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -92243,7 +92403,7 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(__webpack_require__(1));
-var ToastMessage_1 = __webpack_require__(364);
+var ToastMessage_1 = __webpack_require__(366);
 var firstState = {
     top: [],
     bottom: [],
@@ -92309,7 +92469,7 @@ exports.default = ToastWrapper;
 
 
 /***/ }),
-/* 364 */
+/* 366 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -92339,7 +92499,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToastMessage = void 0;
 var React = __importStar(__webpack_require__(1));
-var ToastText_1 = __importDefault(__webpack_require__(365));
+var ToastText_1 = __importDefault(__webpack_require__(367));
 var classnames_1 = __importDefault(__webpack_require__(2));
 exports.ToastMessage = function (_a) {
     var _b;
@@ -92382,7 +92542,7 @@ exports.ToastMessage = function (_a) {
 
 
 /***/ }),
-/* 365 */
+/* 367 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -92431,7 +92591,7 @@ exports.default = ToastText;
 
 
 /***/ }),
-/* 366 */
+/* 368 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -92455,7 +92615,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Menu = void 0;
 var react_1 = __importDefault(__webpack_require__(1));
-var tieredmenu_1 = __webpack_require__(367);
+var tieredmenu_1 = __webpack_require__(369);
 var superdeskTopBarZIndex = 1030;
 var Menu = /** @class */ (function (_super) {
     __extends(Menu, _super);
@@ -92530,16 +92690,16 @@ exports.Menu = Menu;
 
 
 /***/ }),
-/* 367 */
+/* 369 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-module.exports = __webpack_require__(368);
+module.exports = __webpack_require__(370);
 
 /***/ }),
-/* 368 */
+/* 370 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -92562,7 +92722,7 @@ var _ClassNames = __webpack_require__(8);
 
 var _DomHandler = _interopRequireDefault(__webpack_require__(10));
 
-var _TieredMenuSub = __webpack_require__(369);
+var _TieredMenuSub = __webpack_require__(371);
 
 var _reactTransitionGroup = __webpack_require__(27);
 
@@ -92924,7 +93084,7 @@ _defineProperty(TieredMenu, "propTypes", {
 });
 
 /***/ }),
-/* 369 */
+/* 371 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -93334,7 +93494,7 @@ _defineProperty(TieredMenuSub, "propTypes", {
 });
 
 /***/ }),
-/* 370 */
+/* 372 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -93417,16 +93577,16 @@ exports.ToggleBox = ToggleBox;
 
 
 /***/ }),
-/* 371 */
+/* 373 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-module.exports = __webpack_require__(372);
+module.exports = __webpack_require__(374);
 
 /***/ }),
-/* 372 */
+/* 374 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -93784,7 +93944,7 @@ _defineProperty(OverlayPanel, "propTypes", {
 });
 
 /***/ }),
-/* 373 */
+/* 375 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -94074,7 +94234,7 @@ var getIcons = function (translateFunction) {
 
 
 /***/ }),
-/* 374 */
+/* 376 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -94143,7 +94303,7 @@ exports.ListItemLoader = ListItemLoader;
 
 
 /***/ }),
-/* 375 */
+/* 377 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -94323,12 +94483,12 @@ function reactToAngular1(component) {
 }
 
 /***/ }),
-/* 376 */,
-/* 377 */,
 /* 378 */,
 /* 379 */,
 /* 380 */,
-/* 381 */
+/* 381 */,
+/* 382 */,
+/* 383 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -94349,7 +94509,7 @@ var _propTypes = __webpack_require__(3);
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _reactToAngular = __webpack_require__(375);
+var _reactToAngular = __webpack_require__(377);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -94444,7 +94604,7 @@ ToggleBoxNext.propTypes = {
 angular.module('superdesk-ui.toggleBoxNext', []).component('toggleBoxNext', (0, _reactToAngular.reactToAngular1)(ToggleBoxNext, ['mode', 'title', 'style', 'isOpen']));
 
 /***/ }),
-/* 382 */
+/* 384 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -94455,7 +94615,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Positioner = undefined;
 
-var _reactToAngular = __webpack_require__(375);
+var _reactToAngular = __webpack_require__(377);
 
 var _Positioner2 = __webpack_require__(228);
 
@@ -94496,8 +94656,6 @@ angular.module('superdesk-ui.positioner', []).component('sdPositioner', (0, _rea
 */
 
 /***/ }),
-/* 383 */,
-/* 384 */,
 /* 385 */,
 /* 386 */,
 /* 387 */,
@@ -94632,7 +94790,9 @@ angular.module('superdesk-ui.positioner', []).component('sdPositioner', (0, _rea
 /* 516 */,
 /* 517 */,
 /* 518 */,
-/* 519 */
+/* 519 */,
+/* 520 */,
+/* 521 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -94643,7 +94803,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Carousel = exports.Popover = exports.Dropdown = exports.NotificationToast = exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNav = exports.Menu = exports.toasted = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButton = exports.CheckBox = exports.Radio = exports.Loader = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePicker = exports.DatePickerISO = exports.DatePicker = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.ButtonGroup = exports.Button = exports.HelloWorld = exports.Positioner = exports.ToggleBoxNext = exports.reactToAngular1 = undefined;
 
-var _reactToAngular = __webpack_require__(375);
+var _reactToAngular = __webpack_require__(377);
 
 Object.defineProperty(exports, 'reactToAngular1', {
     enumerable: true,
@@ -94652,7 +94812,7 @@ Object.defineProperty(exports, 'reactToAngular1', {
     }
 });
 
-var _toggleBoxNext = __webpack_require__(381);
+var _toggleBoxNext = __webpack_require__(383);
 
 Object.defineProperty(exports, 'ToggleBoxNext', {
     enumerable: true,
@@ -94661,7 +94821,7 @@ Object.defineProperty(exports, 'ToggleBoxNext', {
     }
 });
 
-var _positioner = __webpack_require__(382);
+var _positioner = __webpack_require__(384);
 
 Object.defineProperty(exports, 'Positioner', {
     enumerable: true,
@@ -94913,40 +95073,38 @@ Object.defineProperty(exports, 'Carousel', {
     }
 });
 
-__webpack_require__(520);
+__webpack_require__(522);
 
-__webpack_require__(555);
+__webpack_require__(557);
 
 exports.default = angular.module('superdesk-ui', ['superdesk-ui.helper', 'superdesk-ui.carousel', 'superdesk-ui.wizard', 'superdesk-ui.dropdown', 'superdesk-ui.positioner', 'superdesk-ui.modals', 'superdesk-ui.switch', 'superdesk-ui.check', 'superdesk-ui.circularProgress', 'superdesk-ui.toggleBox', 'superdesk-ui.toggleBoxNext', 'superdesk-ui.tags', 'superdesk-ui.lineInput', 'superdesk-ui.searchHandler', 'superdesk-ui.splitter', 'superdesk-ui.mediaQuery']);
 
 /***/ }),
-/* 520 */
+/* 522 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-__webpack_require__(521);
-
-__webpack_require__(535);
+__webpack_require__(523);
 
 __webpack_require__(537);
 
-__webpack_require__(538);
-
-__webpack_require__(382);
-
 __webpack_require__(539);
 
 __webpack_require__(540);
 
-__webpack_require__(541);
+__webpack_require__(384);
 
-__webpack_require__(381);
+__webpack_require__(541);
 
 __webpack_require__(542);
 
-__webpack_require__(545);
+__webpack_require__(543);
+
+__webpack_require__(383);
+
+__webpack_require__(544);
 
 __webpack_require__(547);
 
@@ -94956,10 +95114,12 @@ __webpack_require__(551);
 
 __webpack_require__(553);
 
-__webpack_require__(554);
+__webpack_require__(555);
+
+__webpack_require__(556);
 
 /***/ }),
-/* 521 */
+/* 523 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -94969,22 +95129,22 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
-__webpack_require__(522);
+__webpack_require__(524);
 
-__webpack_require__(523);
+__webpack_require__(525);
 
-__webpack_require__(529);
+__webpack_require__(531);
 
-__webpack_require__(530);
+__webpack_require__(532);
 
-__webpack_require__(533);
+__webpack_require__(535);
 
-__webpack_require__(534);
+__webpack_require__(536);
 
 exports.default = angular.module('superdesk-ui.helper', ['superdesk-ui.helper.dropdown', 'superdesk-ui.helper.modal', 'superdesk-ui.helper.datepicker', 'superdesk-ui.helper.ngTagsInput']);
 
 /***/ }),
-/* 522 */
+/* 524 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -95201,7 +95361,7 @@ angular.module('superdesk-ui.helper.dateparser', []).service('dateParser', ['$lo
 }]);
 
 /***/ }),
-/* 523 */
+/* 525 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -95420,7 +95580,7 @@ angular.module('superdesk-ui.helper.datepicker', ['superdesk-ui.helper.dateparse
     return {
         restrict: 'EA',
         replace: true,
-        template: __webpack_require__(524),
+        template: __webpack_require__(526),
         scope: {
             datepickerMode: '=?',
             dateDisabled: '&',
@@ -95442,7 +95602,7 @@ angular.module('superdesk-ui.helper.datepicker', ['superdesk-ui.helper.dateparse
     return {
         restrict: 'EA',
         replace: true,
-        template: __webpack_require__(525),
+        template: __webpack_require__(527),
         require: '^datepicker',
         link: function link(scope, element, attrs, ctrl) {
             scope.showWeeks = ctrl.showWeeks;
@@ -95561,7 +95721,7 @@ angular.module('superdesk-ui.helper.datepicker', ['superdesk-ui.helper.dateparse
     return {
         restrict: 'EA',
         replace: true,
-        template: __webpack_require__(526),
+        template: __webpack_require__(528),
         require: '^datepicker',
         link: function link(scope, element, attrs, ctrl) {
             ctrl.step = { years: 1 };
@@ -95618,7 +95778,7 @@ angular.module('superdesk-ui.helper.datepicker', ['superdesk-ui.helper.dateparse
     return {
         restrict: 'EA',
         replace: true,
-        template: __webpack_require__(527),
+        template: __webpack_require__(529),
         require: '^datepicker',
         link: function link(scope, element, attrs, ctrl) {
             var range = ctrl.yearRange;
@@ -95985,42 +96145,42 @@ angular.module('superdesk-ui.helper.datepicker', ['superdesk-ui.helper.dateparse
         restrict: 'EA',
         replace: true,
         transclude: true,
-        template: __webpack_require__(528)
+        template: __webpack_require__(530)
     };
 });
 
 /***/ }),
-/* 524 */
+/* 526 */
 /***/ (function(module, exports) {
 
 module.exports = "<div ng-switch=\"datepickerMode\" role=\"application\" ng-keydown=\"keydown($event)\">\n  <daypicker ng-switch-when=\"day\" tabindex=\"0\"></daypicker>\n  <monthpicker ng-switch-when=\"month\" tabindex=\"0\"></monthpicker>\n  <yearpicker ng-switch-when=\"year\" tabindex=\"0\"></yearpicker>\n</div>";
 
 /***/ }),
-/* 525 */
+/* 527 */
 /***/ (function(module, exports) {
 
 module.exports = "<table role=\"grid\" aria-labelledby=\"{{::uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n  <thead>\n    <tr>\n      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-left\" ng-click=\"move(-1)\" tabindex=\"-1\"><i class=\"icon-chevron-left-thin\"></i></button></th>\n      <th colspan=\"{{::5 + showWeeks}}\"><button id=\"{{::uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm\" ng-click=\"toggleMode()\" ng-disabled=\"datepickerMode === maxMode\" tabindex=\"-1\" style=\"width:100%;\"><strong>{{title}}</strong></button></th>\n      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-right\" ng-click=\"move(1)\" tabindex=\"-1\"><i class=\"icon-chevron-right-thin\"></i></button></th>\n    </tr>\n    <tr>\n      <th ng-if=\"showWeeks\" class=\"text-center\"></th>\n      <th ng-repeat=\"label in ::labels track by $index\" class=\"text-center\"><small aria-label=\"{{::label.full}}\">{{::label.abbr}}</small></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr ng-repeat=\"row in rows track by $index\">\n      <td ng-if=\"showWeeks\" class=\"text-center h6\"><em>{{ weekNumbers[$index] }}</em></td>\n      <td ng-repeat=\"dt in row track by dt.date\" class=\"text-center\" role=\"gridcell\" id=\"{{::dt.uid}}\" ng-class=\"::dt.customClass\">\n        <button type=\"button\" style=\"min-width:100%;\" class=\"btn btn-default btn-sm\" ng-class=\"{'btn-info': dt.selected, active: isActive(dt)}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\" tabindex=\"-1\"><span ng-class=\"::{'text-muted': dt.secondary, 'text-info': dt.current}\">{{::dt.label}}</span></button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n";
 
 /***/ }),
-/* 526 */
+/* 528 */
 /***/ (function(module, exports) {
 
 module.exports = "<table role=\"grid\" aria-labelledby=\"{{::uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n  <thead>\n    <tr>\n      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-left\" ng-click=\"move(-1)\" tabindex=\"-1\"><i class=\"icon-chevron-left-thin\"></i></button></th>\n      <th><button id=\"{{::uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm\" ng-click=\"toggleMode()\" ng-disabled=\"datepickerMode === maxMode\" tabindex=\"-1\" style=\"width:100%;\"><strong>{{title}}</strong></button></th>\n      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-right\" ng-click=\"move(1)\" tabindex=\"-1\"><i class=\"icon-chevron-right-thin\"></i></button></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr ng-repeat=\"row in rows track by $index\">\n      <td ng-repeat=\"dt in row track by dt.date\" class=\"text-center\" role=\"gridcell\" id=\"{{::dt.uid}}\" ng-class=\"::dt.customClass\">\n        <button type=\"button\" style=\"min-width:100%;\" class=\"btn btn-default\" ng-class=\"{'btn-info': dt.selected, active: isActive(dt)}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\" tabindex=\"-1\"><span ng-class=\"::{'text-info': dt.current}\">{{::dt.label}}</span></button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n";
 
 /***/ }),
-/* 527 */
+/* 529 */
 /***/ (function(module, exports) {
 
 module.exports = "<table role=\"grid\" aria-labelledby=\"{{::uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n  <thead>\n    <tr>\n      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-left\" ng-click=\"move(-1)\" tabindex=\"-1\"><i class=\"icon-chevron-left-thin\"></i></button></th>\n      <th colspan=\"3\"><button id=\"{{::uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm\" ng-click=\"toggleMode()\" ng-disabled=\"datepickerMode === maxMode\" tabindex=\"-1\" style=\"width:100%;\"><strong>{{title}}</strong></button></th>\n      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-right\" ng-click=\"move(1)\" tabindex=\"-1\"><i class=\"icon-chevron-right-thin\"></i></button></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr ng-repeat=\"row in rows track by $index\">\n      <td ng-repeat=\"dt in row track by dt.date\" class=\"text-center\" role=\"gridcell\" id=\"{{::dt.uid}}\">\n        <button type=\"button\" style=\"min-width:100%;\" class=\"btn btn-default\" ng-class=\"{'btn-info': dt.selected, active: isActive(dt)}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\" tabindex=\"-1\"><span ng-class=\"::{'text-info': dt.current}\">{{::dt.label}}</span></button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n";
 
 /***/ }),
-/* 528 */
+/* 530 */
 /***/ (function(module, exports) {
 
 module.exports = "<ul class=\"dropdown-menu\" ng-if=\"isOpen\" style=\"display: block\" ng-style=\"{top: position.top+'px', left: position.left+'px'}\" ng-keydown=\"keydown($event)\" ng-click=\"$event.stopPropagation()\">\n\t<li ng-transclude></li>\n\t<li ng-if=\"showButtonBar\" style=\"padding:10px 9px 2px\">\n\t\t<span class=\"btn-group pull-left\">\n\t\t\t<button type=\"button\" class=\"btn btn-sm btn-info\" ng-click=\"select('today')\">{{ getText('current') }}</button>\n\t\t\t<button type=\"button\" class=\"btn btn-sm btn-danger\" ng-click=\"select(null)\">{{ getText('clear') }}</button>\n\t\t</span>\n\t\t<button type=\"button\" class=\"btn btn-sm btn-success pull-right\" ng-click=\"close()\">{{ getText('close') }}</button>\n\t</li>\n</ul>\n";
 
 /***/ }),
-/* 529 */
+/* 531 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -96363,7 +96523,7 @@ angular.module('superdesk-ui.helper.dropdown', ['superdesk-ui.helper.position'])
 });
 
 /***/ }),
-/* 530 */
+/* 532 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -96430,7 +96590,7 @@ angular.module('superdesk-ui.helper.modal', []).factory('$$stackedMap', function
     return {
         restrict: 'EA',
         replace: true,
-        template: __webpack_require__(531),
+        template: __webpack_require__(533),
         compile: function compile(tElement, tAttrs) {
             tElement.addClass(tAttrs.backdropClass);
             return linkFn;
@@ -96457,7 +96617,7 @@ angular.module('superdesk-ui.helper.modal', []).factory('$$stackedMap', function
         //            templateUrl: function templateUrl(tElement, tAttrs) {
         //                return tAttrs.templateUrl || '../app/template/window.html';
         //            },
-        template: __webpack_require__(532),
+        template: __webpack_require__(534),
         link: function link(scope, element, attrs) {
             element.addClass(attrs.windowClass || '');
             scope.size = attrs.size;
@@ -96834,19 +96994,19 @@ angular.module('superdesk-ui.helper.modal', []).factory('$$stackedMap', function
 });
 
 /***/ }),
-/* 531 */
+/* 533 */
 /***/ (function(module, exports) {
 
 module.exports = "<div class=\"modal__backdrop fade in\"></div>";
 
 /***/ }),
-/* 532 */
+/* 534 */
 /***/ (function(module, exports) {
 
 module.exports = "<div modal-render=\"{{$isRendered}}\" tabindex=\"-1\" role=\"dialog\" class=\"modal\"\n     modal-animation-class=\"fade\"\n     modal-in-class=\"in\"\n     ng-style=\"{'z-index': 1050 + index * 10, display: 'block'}\"\n     ng-class=\"size ? 'modal--' + size : ''\">\n    <div class=\"modal__dialog\">\n        <div class=\"modal__content\" modal-transclude></div>\n    </div>\n</div>\n";
 
 /***/ }),
-/* 533 */
+/* 535 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -97009,7 +97169,7 @@ angular.module('superdesk-ui.helper.position', [])
 }]);
 
 /***/ }),
-/* 534 */
+/* 536 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -98235,7 +98395,7 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
 })();
 
 /***/ }),
-/* 535 */
+/* 537 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -98252,7 +98412,7 @@ function CarouselDirective() {
             finish: '&',
             model: '='
         },
-        template: __webpack_require__(536),
+        template: __webpack_require__(538),
         transclude: true,
         controllerAs: 'ctrl',
         controller: ['$scope', '$document', function ($scope, $document) {
@@ -98374,13 +98534,13 @@ function CarouselStepDirective() {
 angular.module('superdesk-ui.carousel', []).directive('sdCarousel', CarouselDirective).directive('sdCarouselStep', CarouselStepDirective);
 
 /***/ }),
-/* 536 */
+/* 538 */
 /***/ (function(module, exports) {
 
 module.exports = "<div class=\"sd-carousel__backdrop\"></div>\n<div class=\"sd-carousel\">\n    <div class=\"sd-carousel__dialog\">\n        <div class=\"sd-carousel__content\" ng-transclude></div>\n        <a class=\"sd-carousel__nav-button sd-carousel__nav-button--prev\" ng-click=\"ctrl.previous()\" ng-hide=\"pageIndex === 0\"></a>\n        <a class=\"sd-carousel__nav-button\" ng-click=\"pageIndex === steps.length-1 ? ctrl.finish() : ctrl.next()\" ng-class=\"pageIndex === steps.length-1 ? 'sd-carousel__nav-button--end' : 'sd-carousel__nav-button--next'\"></a>\n        <div class=\"sd-carousel__page-indication-bar\">\n            <span ng-repeat=\"step in steps\" \n                  class=\"sd-carousel__page-indicator\" \n                  ng-class=\"{'sd-carousel__page-indicator--selected': step.selected}\"\n                  ng-click=\"goTo(step)\">\n            </span>\n        </div>\n    </div>\n</div>";
 
 /***/ }),
-/* 537 */
+/* 539 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -98483,7 +98643,7 @@ function sdCheck($parse) {
 angular.module('superdesk-ui.check', []).directive('sdCheck', sdCheck);
 
 /***/ }),
-/* 538 */
+/* 540 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -98663,7 +98823,7 @@ angular.module("superdesk-ui.dropdown", []).directive("dropdown", sdDropdown).di
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35)))
 
 /***/ }),
-/* 539 */
+/* 541 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -98750,7 +98910,7 @@ function sdModal($document, $rootScope) {
 angular.module('superdesk-ui.modals', []).directive('sdModal', sdModal);
 
 /***/ }),
-/* 540 */
+/* 542 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -98835,7 +98995,7 @@ function sdSwitch() {
 angular.module('superdesk-ui.switch', []).directive('sdSwitch', sdSwitch);
 
 /***/ }),
-/* 541 */
+/* 543 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -98873,7 +99033,7 @@ function ToggleBoxDirective() {
 angular.module('superdesk-ui.toggleBox', []).directive('sdToggleBox', ToggleBoxDirective);
 
 /***/ }),
-/* 542 */
+/* 544 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -98908,7 +99068,7 @@ function WizardHandlerFactory() {
 WizardDirective.$inject = [];
 function WizardDirective() {
     return {
-        template: __webpack_require__(543),
+        template: __webpack_require__(545),
         scope: {
             currentStep: '=',
             finish: '&',
@@ -99012,7 +99172,7 @@ function WizardDirective() {
 WizardStepDirective.$inject = [];
 function WizardStepDirective() {
     return {
-        template: __webpack_require__(544),
+        template: __webpack_require__(546),
         scope: {
             title: '@',
             code: '@',
@@ -99030,19 +99190,19 @@ function WizardStepDirective() {
 angular.module('superdesk-ui.wizard', []).factory('WizardHandler', WizardHandlerFactory).directive('sdWizard', WizardDirective).directive('sdWizardStep', WizardStepDirective);
 
 /***/ }),
-/* 543 */
+/* 545 */
 /***/ (function(module, exports) {
 
 module.exports = "<div class=\"modal__body-header\">\n    <ul class=\"nav-tabs\">\n        <li ng-repeat=\"step in steps\" ng-class=\"{'nav-tabs__tab--active': step.selected}\" class=\"nav-tabs__tab\">\n            <button\n                ng-click=\"goTo(step)\"\n                ng-disabled=\"step.disabled\"\n                ng-hide=\"step.hide\"\n                class=\"nav-tabs__link\"\n                data-test-id=\"wizard--{{step.title}}\"\n            >\n                {{ step.title}}\n            </button>\n        </li>\n    </ul>\n</div>\n<div class=\"modal__body-content\" ng-transclude></div>";
 
 /***/ }),
-/* 544 */
+/* 546 */
 /***/ (function(module, exports) {
 
 module.exports = "<div ng-show=\"selected\" class=\"modal-screen\" ng-transclude></div>\r\n";
 
 /***/ }),
-/* 545 */
+/* 547 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -99071,7 +99231,7 @@ function TagInputDirective($q) {
             maxResultsToShow: '='
         },
         require: '?ngModel',
-        template: __webpack_require__(546),
+        template: __webpack_require__(548),
         link: function link(scope) {
             scope.loadTags = function (query) {
                 return $q(function (resolve, reject) {
@@ -99089,13 +99249,13 @@ function TagInputDirective($q) {
 angular.module('superdesk-ui.tags', []).directive('sdTagInput', TagInputDirective);
 
 /***/ }),
-/* 546 */
+/* 548 */
 /***/ (function(module, exports) {
 
 module.exports = "<label class=\"tags-input__label\" ng-if=\"label\">{{label}}</label>\n<tags-input ng-model=\"model\"\n    add-from-autocomplete-only=\"{{items ? !freetext : false}}\"\n    show-button=\"{{!!items}}\"\n    display-property=\"{{field}}\"\n    key-property=\"{{keyProperty}}\"\n    use-strings=\"{{!field}}\"\n    ng-required=\"required\"\n    on-tag-added=\"onChange($tag)\"\n    on-tag-removed=\"onChange($tag)\"\n    replace-spaces-with-dashes=\"{{replaceSpacesWithDashes}}\"\n    min-length=\"{{minLength}}\"\n    max-length=\"{{maxLength}}\"\n    max-tags=\"{{maxTags}}\"\n    max-items=\"{{maxItems}}\"\n    boxed={{boxed}}\n    placeholder=\"{{placeholder}}\">\n\n    <auto-complete ng-if=\"items\"\n        source=\"loadTags($query)\"\n        load-on-empty=\"true\"\n        min-length=\"{{minLength}}\"\n        display-property=\"{{field}}\"\n        key-property=\"{{keyProperty}}\"\n        max-results-to-show=\"{{maxResultsToShow}}\">\n    </auto-complete>\n</tags-input>\n";
 
 /***/ }),
-/* 547 */
+/* 549 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -99112,7 +99272,7 @@ module.exports = "<label class=\"tags-input__label\" ng-if=\"label\">{{label}}</
  */
 function LineInputDirective() {
     return {
-        template: __webpack_require__(548),
+        template: __webpack_require__(550),
         replace: true,
         transclude: true,
         require: '?ngModel',
@@ -99154,13 +99314,13 @@ function LineInputDirective() {
 angular.module('superdesk-ui.lineInput', []).directive('sdLineInput', LineInputDirective);
 
 /***/ }),
-/* 548 */
+/* 550 */
 /***/ (function(module, exports) {
 
 module.exports = " <div class=\"sd-line-input\" ng-class=\"{'sd-line-input--dark-ui': dark, 'sd-line-input--boxed': boxed, 'sd-line-input--required': required}\">\n    <label class=\"sd-line-input__label\" translate>{{label}}</label>\n\n    <input class=\"sd-line-input__input\" type=\"text\" ng-model=\"modelFixed.value\" ng-change=\"update(modelFixed.value)\" ng-blur=\"onblur()\" ng-disabled=\"disabled\" placeholder=\"{{placeholder}}\" ng-if=\"!transclude && !textarea\">\n\n    <textarea class=\"sd-line-input__input\"\n        ng-model=\"modelFixed.value\"\n        ng-change=\"update(modelFixed.value)\"\n        ng-blur=\"onblur()\"\n        ng-disabled=\"disabled\"\n        placeholder=\"{{placeholder}}\"\n        ng-if=\"textarea\"\n        sd-auto-height>\n    </textarea>\n\n    <ng-transclude></ng-transclude>\n    <div class=\"sd-line-input__char-count\" ng-if=\"maxlength\" sd-character-count data-item=\"modelFixed.value\" data-limit=\"maxlength\" data-html=\"true\"></div>\n</div>\n";
 
 /***/ }),
-/* 549 */
+/* 551 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -99180,7 +99340,7 @@ module.exports = " <div class=\"sd-line-input\" ng-class=\"{'sd-line-input--dark
  */
 function SearchHandlerDirective() {
     return {
-        template: __webpack_require__(550),
+        template: __webpack_require__(552),
         replace: true,
         transclude: true,
         require: '?ngModel',
@@ -99206,13 +99366,13 @@ function SearchHandlerDirective() {
 angular.module('superdesk-ui.searchHandler', []).directive('sdSearchHandler', SearchHandlerDirective);
 
 /***/ }),
-/* 550 */
+/* 552 */
 /***/ (function(module, exports) {
 
 module.exports = "<div class=\"flat-searchbar\" ng-class=\"{extended: extended}\">\n    <div class=\"search-handler\" ng-class=\"{'search-handler--left-border': borderleft}\">\n        <label for=\"search-input\" class=\"trigger-icon\" ng-click=\"extended = !extended\"><i class=\"icon-search\"></i></label>\n        <input id=\"search-input\" type=\"text\" placeholder=\"{{ :: label || 'Search' }}\" ng-model=\"model\" ng-model-options=\"{debounce: debounce}\">\n        <button class=\"search-close\" ng-if=\"model.length\" ng-click=\"clearInput()\" ng-class=\"{visible: model.length}\"><i class=\"icon-remove-sign\"></i></button>\n\n        <button class=\"search-close\" ng-if=\"button && model.length\" ng-click=\"\" ng-class=\"{visible: button && model.length}\">\n            <i class=\"big-icon--chevron-right\"></i>\n        </button>\n    </div>\n</div>\n";
 
 /***/ }),
-/* 551 */
+/* 553 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -99228,7 +99388,7 @@ function sdCircularProgress() {
             error: '=',
             counter: '='
         },
-        template: __webpack_require__(552),
+        template: __webpack_require__(554),
         link: function link(scope, element) {
             var elem = $(element).find('.progress-svg');
 
@@ -99274,13 +99434,13 @@ angular.module('superdesk-ui.circularProgress', []).directive('sdCircularProgres
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35)))
 
 /***/ }),
-/* 552 */
+/* 554 */
 /***/ (function(module, exports) {
 
 module.exports = "<div class=\"progress-bar-container\">\n    <div  class=\"progress-done\" ng-class=\"{'progress-done--completed': status === 'completed', 'progress-done--error': status === 'error'}\">\n        <i class=\"icon-ok\" ng-hide=\"status === 'error'\"></i>\n        <i class=\"icon-close-small\" ng-hide=\"status === 'completed'\"></i>\n    </div>\n    <span class=\"progress-text\" ng-if=\"counter\">{{value}}<em>%</em></span>\n    <svg class=\"progress-svg\">\n        <circle ng-attr-r=\"{{radius}}\" ng-attr-cx=\"50%\" ng-attr-cy=\"50%\"></circle>\n        <circle class=\"progressbar\" ng-attr-r=\"{{radius}}\" ng-attr-cx=\"50%\" ng-attr-cy=\"50%\" ng-style=\"{'stroke-dashoffset': dashOffset, 'stroke-dasharray': circumference}\"></circle>\n    </svg>\n</div>";
 
 /***/ }),
-/* 553 */
+/* 555 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -99325,7 +99485,7 @@ function SplitterDirective($window) {
 angular.module('superdesk-ui.splitter', []).directive('sdSplitter', SplitterDirective);
 
 /***/ }),
-/* 554 */
+/* 556 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -99366,16 +99526,16 @@ function MediaQuery($window) {
 angular.module('superdesk-ui.mediaQuery', []).directive('sdMediaQuery', MediaQuery);
 
 /***/ }),
-/* 555 */
+/* 557 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-__webpack_require__(556);
+__webpack_require__(558);
 
 /***/ }),
-/* 556 */
+/* 558 */
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin