superdesk-ui-framework 3.1.13 → 3.1.15

package/dist/examples.bundle.js

@@ -5944,7 +5944,7 @@ exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader
 exports.DragHandle = exports.DragHandleDots = exports.ResizeObserverComponent = exports.SpacerBlock = exports.Spacer = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeMenu = exports.TreeSelect = exports.BottomNav = exports.Heading = exports.Time = void 0;
 var HelloWorld_1 = __webpack_require__(389);
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
-var Button_1 = __webpack_require__(76);
+var Button_1 = __webpack_require__(58);
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
 var Input_1 = __webpack_require__(390);
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
@@ -5959,11 +5959,11 @@ var Popover_1 = __webpack_require__(413);
 Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return Popover_1.Popover; } });
 var Label_1 = __webpack_require__(43);
 Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return Label_1.Label; } });
-var Badge_1 = __webpack_require__(58);
+var Badge_1 = __webpack_require__(59);
 Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
 var Alert_1 = __webpack_require__(414);
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_1.Alert; } });
-var avatar_wrapper_1 = __webpack_require__(59);
+var avatar_wrapper_1 = __webpack_require__(60);
 Object.defineProperty(exports, "AvatarWrapper", { enumerable: true, get: function () { return avatar_wrapper_1.AvatarWrapper; } });
 var avatar_text_1 = __webpack_require__(127);
 Object.defineProperty(exports, "AvatarContentText", { enumerable: true, get: function () { return avatar_text_1.AvatarContentText; } });
@@ -5977,7 +5977,7 @@ var avatar_placeholder_1 = __webpack_require__(129);
 Object.defineProperty(exports, "AvatarPlaceholder", { enumerable: true, get: function () { return avatar_placeholder_1.AvatarPlaceholder; } });
 var Rotate_1 = __webpack_require__(373);
 Object.defineProperty(exports, "Rotate", { enumerable: true, get: function () { return Rotate_1.Rotate; } });
-var IconButton_1 = __webpack_require__(70);
+var IconButton_1 = __webpack_require__(71);
 Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return IconButton_1.IconButton; } });
 var IconLabel_1 = __webpack_require__(602);
 Object.defineProperty(exports, "IconLabel", { enumerable: true, get: function () { return IconLabel_1.IconLabel; } });
@@ -6044,13 +6044,13 @@ var ContentDivider_1 = __webpack_require__(641);
 Object.defineProperty(exports, "ContentDivider", { enumerable: true, get: function () { return ContentDivider_1.ContentDivider; } });
 var HeadingText_1 = __webpack_require__(642);
 Object.defineProperty(exports, "HeadingText", { enumerable: true, get: function () { return HeadingText_1.HeadingText; } });
-var DropdownFirst_1 = __webpack_require__(71);
+var DropdownFirst_1 = __webpack_require__(72);
 Object.defineProperty(exports, "DropdownFirst", { enumerable: true, get: function () { return DropdownFirst_1.DropdownFirst; } });
-var DropdownFirst_2 = __webpack_require__(71);
+var DropdownFirst_2 = __webpack_require__(72);
 Object.defineProperty(exports, "DropdownItem", { enumerable: true, get: function () { return DropdownFirst_2.DropdownItem; } });
-var DropdownFirst_3 = __webpack_require__(71);
+var DropdownFirst_3 = __webpack_require__(72);
 Object.defineProperty(exports, "DropdownLabel", { enumerable: true, get: function () { return DropdownFirst_3.DropdownLabel; } });
-var DropdownFirst_4 = __webpack_require__(71);
+var DropdownFirst_4 = __webpack_require__(72);
 Object.defineProperty(exports, "DropdownDivider", { enumerable: true, get: function () { return DropdownFirst_4.DropdownDivider; } });
 var Dropdown_1 = __webpack_require__(343);
 Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return Dropdown_1.Dropdown; } });
@@ -6115,7 +6115,7 @@ var IllustrationButton_1 = __webpack_require__(689);
 Object.defineProperty(exports, "IllustrationButton", { enumerable: true, get: function () { return IllustrationButton_1.IllustrationButton; } });
 __exportStar(__webpack_require__(17), exports);
 __exportStar(__webpack_require__(14), exports);
-__exportStar(__webpack_require__(74), exports);
+__exportStar(__webpack_require__(75), exports);
 __exportStar(__webpack_require__(117), exports);
 var Skeleton_1 = __webpack_require__(348);
 Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return Skeleton_1.Skeleton; } });
@@ -6360,7 +6360,7 @@ process.umask = function() { return 0; };
  */
 
 if (process.env.NODE_ENV !== 'production') {
-  var ReactIs = __webpack_require__(72);
+  var ReactIs = __webpack_require__(73);
 
   // By explicitly using `prop-types` you are opting into new development behavior.
   // http://fb.me/prop-types-in-prod
@@ -7107,7 +7107,7 @@ var FormItem_1 = __webpack_require__(394);
 Object.defineProperty(exports, "FormItem", { enumerable: true, get: function () { return FormItem_1.FormItem; } });
 var FormText_1 = __webpack_require__(395);
 Object.defineProperty(exports, "FormText", { enumerable: true, get: function () { return FormText_1.FormText; } });
-var FormLabel_1 = __webpack_require__(73);
+var FormLabel_1 = __webpack_require__(74);
 Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return FormLabel_1.FormLabel; } });
 var InputWrapper_1 = __webpack_require__(121);
 Object.defineProperty(exports, "InputWrapper", { enumerable: true, get: function () { return InputWrapper_1.InputWrapper; } });
@@ -26534,7 +26534,7 @@ function startOfISOWeek(dirtyDate) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = differenceInCalendarDays;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lib_getTimezoneOffsetInMilliseconds_index_js__ = __webpack_require__(20);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfDay_index_js__ = __webpack_require__(61);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfDay_index_js__ = __webpack_require__(62);
 
 
 var MILLISECONDS_IN_DAY = 86400000;
@@ -27002,7 +27002,7 @@ function startOfISOWeekYear(dirtyDate) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = isSameDay;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__startOfDay_index_js__ = __webpack_require__(61);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__startOfDay_index_js__ = __webpack_require__(62);
 
 /**
  * @name isSameDay
@@ -27234,7 +27234,7 @@ function getBoundingClientRect(element, includeScale) {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getComputedStyle_js__ = __webpack_require__(42);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__instanceOf_js__ = __webpack_require__(16);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__isTableElement_js__ = __webpack_require__(581);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__getParentNode_js__ = __webpack_require__(69);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__getParentNode_js__ = __webpack_require__(70);
 
 
 
@@ -38483,6 +38483,88 @@ return jQuery;
 
 "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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.prototype.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.Button = void 0;
+var React = __importStar(__webpack_require__(0));
+var classnames_1 = __importDefault(__webpack_require__(3));
+var Icon_1 = __webpack_require__(10);
+var Spinner_1 = __webpack_require__(77);
+var Button = /** @class */ (function (_super) {
+    __extends(Button, _super);
+    function Button() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Button.prototype.render = function () {
+        var _a;
+        var _this = this;
+        var classes = (0, classnames_1.default)('btn', (_a = {
+                'btn--expanded': this.props.expand
+            },
+            _a["btn--".concat(this.props.size)] = this.props.size !== 'normal' && this.props.size !== undefined,
+            _a["btn--".concat(this.props.type)] = this.props.type !== 'default' && this.props.type !== undefined,
+            _a["btn--".concat(this.props.style)] = this.props.style !== 'filled' && this.props.style !== undefined,
+            _a['btn--disabled'] = this.props.disabled,
+            _a['btn--icon-only'] = this.props.iconOnly,
+            _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, disabled: this.props.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'], title: this.props.tooltip },
+            this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
+            this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { ariaHidden: true, name: this.props.icon }) : null,
+            this.props.iconOnly ? null : this.props.text));
+    };
+    return Button;
+}(React.PureComponent));
+exports.Button = Button;
+
+
+/***/ }),
+/* 59 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -38555,7 +38637,7 @@ exports.Badge = Badge;
 
 
 /***/ }),
-/* 59 */
+/* 60 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -38617,6 +38699,7 @@ var AvatarWrapper = /** @class */ (function (_super) {
     AvatarWrapper.prototype.render = function () {
         var _a, _b, _c;
         var icon = this.props.icon;
+        var statusDot = this.props.statusDot;
         return (React.createElement("span", { className: (0, classnames_1.default)('sd-avatar', {
                 'sd-avatar--x-small': this.props.size === 'x-small',
                 'sd-avatar--small': this.props.size === 'small',
@@ -38626,14 +38709,15 @@ var AvatarWrapper = /** @class */ (function (_super) {
                 'sd-avatar--xx-large': this.props.size === 'xx-large',
                 'sd-avatar--indicator-status--online': ((_a = this.props.statusIndicator) === null || _a === void 0 ? void 0 : _a.status) === 'online',
                 'sd-avatar--indicator-status--offline': ((_b = this.props.statusIndicator) === null || _b === void 0 ? void 0 : _b.status) === 'offline',
-                'sd-avatar--empty-light': this.props.isEmpty,
+                'sd-avatar--empty-light': this.props.noAvatarPlaceholderColor === 'subtle',
             }), "data-test-id": this.props['data-test-id'], title: this.props.statusIndicator != null ? this.props.statusIndicator.tooltipText : "" },
             this.props.children,
             ((_c = this.props.administratorIndicator) === null || _c === void 0 ? void 0 : _c.enabled) === true
                 ? (React.createElement("i", { className: "icon-settings sd-avatar--indicator-admin", title: this.props.administratorIndicator.tooltipText }))
                 : null,
             icon != null && (React.createElement("span", { className: "sd-avatar__icon" },
-                React.createElement(Icon_1.Icon, { name: icon.name, color: icon.color })))));
+                React.createElement(Icon_1.Icon, { name: icon.name, color: icon.color }))),
+            statusDot != null && (React.createElement("span", { style: { backgroundColor: statusDot.color }, className: "sd-avatar__coverage-state" }))));
     };
     return AvatarWrapper;
 }(React.PureComponent));
@@ -38641,7 +38725,7 @@ exports.AvatarWrapper = AvatarWrapper;
 
 
 /***/ }),
-/* 60 */
+/* 61 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -38681,7 +38765,7 @@ function isWeekend(dirtyDate) {
 }
 
 /***/ }),
-/* 61 */
+/* 62 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -38722,7 +38806,7 @@ function startOfDay(dirtyDate) {
 }
 
 /***/ }),
-/* 62 */
+/* 63 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -38775,7 +38859,7 @@ function addMonths(dirtyDate, dirtyAmount) {
 }
 
 /***/ }),
-/* 63 */
+/* 64 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -38818,7 +38902,7 @@ function addWeeks(dirtyDate, dirtyAmount) {
 }
 
 /***/ }),
-/* 64 */
+/* 65 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -38893,7 +38977,7 @@ function isValid(dirtyDate) {
 }
 
 /***/ }),
-/* 65 */
+/* 66 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -38938,7 +39022,7 @@ function differenceInMilliseconds(dirtyDateLeft, dirtyDateRight) {
 }
 
 /***/ }),
-/* 66 */
+/* 67 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -38980,7 +39064,7 @@ function startOfMonth(dirtyDate) {
 }
 
 /***/ }),
-/* 67 */
+/* 68 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39004,7 +39088,7 @@ function startOfUTCISOWeek(dirtyDate) {
 }
 
 /***/ }),
-/* 68 */
+/* 69 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39039,7 +39123,7 @@ function startOfUTCWeek(dirtyDate, dirtyOptions) {
 }
 
 /***/ }),
-/* 69 */
+/* 70 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39068,7 +39152,7 @@ function getParentNode(element) {
 }
 
 /***/ }),
-/* 70 */
+/* 71 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -39145,7 +39229,7 @@ exports.IconButton = IconButton;
 
 
 /***/ }),
-/* 71 */
+/* 72 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -39346,7 +39430,7 @@ exports.DropdownFirst.Footer = exports.DropdownFooter;
 
 
 /***/ }),
-/* 72 */
+/* 73 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -39361,7 +39445,7 @@ if (process.env.NODE_ENV === 'production') {
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(6)))
 
 /***/ }),
-/* 73 */
+/* 74 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -39434,7 +39518,7 @@ exports.FormLabel = FormLabel;
 
 
 /***/ }),
-/* 74 */
+/* 75 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -39450,7 +39534,7 @@ Object.defineProperty(exports, "QuickNavBar", { enumerable: true, get: function
 
 
 /***/ }),
-/* 75 */
+/* 76 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -39468,88 +39552,6 @@ var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
 module.exports = ReactPropTypesSecret;
 
 
-/***/ }),
-/* 76 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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.prototype.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.Button = void 0;
-var React = __importStar(__webpack_require__(0));
-var classnames_1 = __importDefault(__webpack_require__(3));
-var Icon_1 = __webpack_require__(10);
-var Spinner_1 = __webpack_require__(77);
-var Button = /** @class */ (function (_super) {
-    __extends(Button, _super);
-    function Button() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Button.prototype.render = function () {
-        var _a;
-        var _this = this;
-        var classes = (0, classnames_1.default)('btn', (_a = {
-                'btn--expanded': this.props.expand
-            },
-            _a["btn--".concat(this.props.size)] = this.props.size !== 'normal' && this.props.size !== undefined,
-            _a["btn--".concat(this.props.type)] = this.props.type !== 'default' && this.props.type !== undefined,
-            _a["btn--".concat(this.props.style)] = this.props.style !== 'filled' && this.props.style !== undefined,
-            _a['btn--disabled'] = this.props.disabled,
-            _a['btn--icon-only'] = this.props.iconOnly,
-            _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, disabled: this.props.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'], title: this.props.tooltip },
-            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;
-}(React.PureComponent));
-exports.Button = Button;
-
-
 /***/ }),
 /* 77 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -40377,7 +40379,7 @@ var AvatarContentImage = /** @class */ (function (_super) {
         if (imageUrl == null) {
             return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content sd-avatar-content--dummy-img", title: tooltipText }),
                 React.createElement("svg", { width: "200", height: "200", viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", fillOpacity: "0.01" }),
+                    React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", fillOpacity: "0" }),
                     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z", fill: "var(--sd-colour-avatar-dummy)", fillOpacity: "1" }))));
         }
         else {
@@ -40493,7 +40495,7 @@ function differenceInMonths(dirtyDateLeft, dirtyDateRight) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = differenceInSeconds;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__differenceInMilliseconds_index_js__ = __webpack_require__(65);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__differenceInMilliseconds_index_js__ = __webpack_require__(66);
 
 /**
  * @name differenceInSeconds
@@ -40539,7 +40541,7 @@ function differenceInSeconds(dirtyDateLeft, dirtyDateRight) {
 /* harmony export (immutable) */ __webpack_exports__["a"] = eachWeekendOfInterval;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__eachDayOfInterval_index_js__ = __webpack_require__(145);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__isSunday_index_js__ = __webpack_require__(146);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__isWeekend_index_js__ = __webpack_require__(60);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__isWeekend_index_js__ = __webpack_require__(61);
 
 
 
@@ -40726,7 +40728,7 @@ function endOfDay(dirtyDate) {
 "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__(64);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__isValid_index_js__ = __webpack_require__(65);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__locale_en_US_index_js__ = __webpack_require__(47);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__subMilliseconds_index_js__ = __webpack_require__(48);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__toDate_index_js__ = __webpack_require__(2);
@@ -41176,7 +41178,7 @@ function cleanEscapedString(input) {
 /* harmony export (immutable) */ __webpack_exports__["a"] = getUTCWeekYear;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toInteger_index_js__ = __webpack_require__(4);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__toDate_index_js__ = __webpack_require__(2);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCWeek_index_js__ = __webpack_require__(68);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCWeek_index_js__ = __webpack_require__(69);
 
 
  // This function will be a part of public API when UTC function will be implemented.
@@ -42249,6 +42251,7 @@ var calendar_1 = __webpack_require__(604);
 var lodash_1 = __webpack_require__(21);
 var react_id_generator_1 = __importDefault(__webpack_require__(11));
 var Form_1 = __webpack_require__(14);
+var Button_1 = __webpack_require__(58);
 var internalPrimereactClassnames = {
     overlayVisible: 'p-input-overlay-visible',
 };
@@ -42325,7 +42328,14 @@ var DatePicker = /** @class */ (function (_super) {
                 React.createElement("span", null, (0, moment_1.default)(this.state.value).format(this.props.dateFormat))));
         }
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
-            React.createElement(calendar_1.Calendar, { showButtonBar: this.props.showButtonBar, inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', ref: function (ref) {
+            React.createElement(calendar_1.Calendar, { footerTemplate: this.props.required !== true ? function () { return (React.createElement("div", { className: 'd-flex justify-end' },
+                    React.createElement(Button_1.Button, { onClick: function () {
+                            _this.props.onChange(null);
+                            if (_this.instance != null
+                                && typeof _this.instance.hideOverlay === 'function') {
+                                _this.instance.hideOverlay();
+                            }
+                        }, text: 'Clear', "data-test-id": 'clear-button' }))); } : undefined, inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', ref: function (ref) {
                     _this.instance = ref;
                     var refAny = ref;
                     if (_this.props['data-test-id'] != null && (refAny === null || refAny === void 0 ? void 0 : refAny.inputElement) != null) {
@@ -43267,7 +43277,7 @@ var react_dom_1 = __importDefault(__webpack_require__(9));
 var classnames_1 = __importDefault(__webpack_require__(3));
 var react_beautiful_dnd_1 = __webpack_require__(355);
 var Tooltip_1 = __webpack_require__(54);
-var Button_1 = __webpack_require__(76);
+var Button_1 = __webpack_require__(58);
 var Dropdown_1 = __webpack_require__(343);
 var SingleAndDoubleClickFunction_1 = __webpack_require__(364);
 var reorder = function (list, startIndex, endIndex) {
@@ -44771,7 +44781,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Avatar = void 0;
 var React = __importStar(__webpack_require__(0));
 var avatar_image_1 = __webpack_require__(81);
-var avatar_wrapper_1 = __webpack_require__(59);
+var avatar_wrapper_1 = __webpack_require__(60);
 var avatar_text_1 = __webpack_require__(127);
 var Avatar = /** @class */ (function (_super) {
     __extends(Avatar, _super);
@@ -44779,10 +44789,10 @@ var Avatar = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     Avatar.prototype.render = function () {
-        var _a = this.props, imageUrl = _a.imageUrl, initials = _a.initials, size = _a.size, statusIndicator = _a.statusIndicator, administratorIndicator = _a.administratorIndicator, icon = _a.icon, displayName = _a.displayName, customContent = _a.customContent;
+        var _a = this.props, imageUrl = _a.imageUrl, initials = _a.initials, size = _a.size, statusIndicator = _a.statusIndicator, administratorIndicator = _a.administratorIndicator, icon = _a.icon, noAvatarPlaceholderColor = _a.noAvatarPlaceholderColor, displayName = _a.displayName, customContent = _a.customContent, statusDot = _a.statusDot;
         var tooltipCombined = [displayName, this.props.tooltip]
             .filter(function (str) { return (str !== null && str !== void 0 ? str : '').trim().length > 0; }).join('\n');
-        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, statusIndicator: statusIndicator ? { status: statusIndicator, tooltipText: '' } : undefined, administratorIndicator: administratorIndicator ? { enabled: true, tooltipText: '' } : undefined, icon: icon, isEmpty: false }, (function () {
+        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, statusIndicator: statusIndicator ? { status: statusIndicator, tooltipText: '' } : undefined, administratorIndicator: administratorIndicator ? { enabled: true, tooltipText: '' } : undefined, icon: icon, statusDot: statusDot, noAvatarPlaceholderColor: noAvatarPlaceholderColor }, (function () {
             if (customContent != null) {
                 return customContent;
             }
@@ -44846,7 +44856,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarPlaceholder = void 0;
 var React = __importStar(__webpack_require__(0));
-var avatar_wrapper_1 = __webpack_require__(59);
+var avatar_wrapper_1 = __webpack_require__(60);
 var avatar_action_add_1 = __webpack_require__(417);
 var avatar_image_1 = __webpack_require__(81);
 var AvatarPlaceholder = /** @class */ (function (_super) {
@@ -44856,7 +44866,7 @@ var AvatarPlaceholder = /** @class */ (function (_super) {
     }
     AvatarPlaceholder.prototype.render = function () {
         var _a = this.props, size = _a.size, tooltip = _a.tooltip, icon = _a.icon, kind = _a.kind, onClick = _a.onClick;
-        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, isEmpty: false, icon: icon }, (function () {
+        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, icon: icon }, (function () {
             if (kind === 'plus-button') {
                 return (React.createElement(avatar_action_add_1.AvatarContentAdd, { tooltipText: tooltip !== null && tooltip !== void 0 ? tooltip : undefined, onClick: onClick }));
             }
@@ -44879,7 +44889,7 @@ exports.AvatarPlaceholder = AvatarPlaceholder;
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = addBusinessDays;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__isWeekend_index_js__ = __webpack_require__(60);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__isWeekend_index_js__ = __webpack_require__(61);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__toDate_index_js__ = __webpack_require__(2);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__lib_toInteger_index_js__ = __webpack_require__(4);
 
@@ -45133,7 +45143,7 @@ function addMinutes(dirtyDate, dirtyAmount) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = addQuarters;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lib_toInteger_index_js__ = __webpack_require__(4);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__addMonths_index_js__ = __webpack_require__(62);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__addMonths_index_js__ = __webpack_require__(63);
 
 
 /**
@@ -45218,7 +45228,7 @@ function addSeconds(dirtyDate, dirtyAmount) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = addYears;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lib_toInteger_index_js__ = __webpack_require__(4);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__addMonths_index_js__ = __webpack_require__(62);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__addMonths_index_js__ = __webpack_require__(63);
 
 
 /**
@@ -45969,7 +45979,7 @@ function addLeadingZeros(number, targetLength) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getUTCISOWeek;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toDate_index_js__ = __webpack_require__(2);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(67);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(68);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCISOWeekYear_index_js__ = __webpack_require__(457);
 
 
@@ -45997,7 +46007,7 @@ function getUTCISOWeek(dirtyDate) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getUTCISOWeekYear;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toDate_index_js__ = __webpack_require__(2);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(67);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(68);
 
  // This function will be a part of public API when UTC function will be implemented.
 // See issue: https://github.com/date-fns/date-fns/issues/376
@@ -46034,7 +46044,7 @@ function getUTCISOWeekYear(dirtyDate) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getUTCWeek;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toDate_index_js__ = __webpack_require__(2);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCWeek_index_js__ = __webpack_require__(68);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCWeek_index_js__ = __webpack_require__(69);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCWeekYear_index_js__ = __webpack_require__(458);
 
 
@@ -48122,7 +48132,7 @@ function flip(_ref) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = listScrollParents;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getScrollParent_js__ = __webpack_require__(587);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getParentNode_js__ = __webpack_require__(69);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getParentNode_js__ = __webpack_require__(70);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getWindow_js__ = __webpack_require__(23);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__isScrollParent_js__ = __webpack_require__(102);
 
@@ -65031,7 +65041,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanelTools = exports.PanelHeaderSlidingToolbar = exports.PanelFooter = exports.PanelContentBlock = exports.PanelContent = exports.PanelHeader = exports.Panel = void 0;
 var React = __importStar(__webpack_require__(0));
-var IconButton_1 = __webpack_require__(70);
+var IconButton_1 = __webpack_require__(71);
 var Spinner_1 = __webpack_require__(77);
 var classnames_1 = __importDefault(__webpack_require__(3));
 var ButtonGroup_1 = __webpack_require__(339);
@@ -75242,7 +75252,7 @@ function warning(condition, message) {
 "use strict";
 
 
-var reactIs = __webpack_require__(72);
+var reactIs = __webpack_require__(73);
 
 /**
  * Copyright 2015, Yahoo! Inc.
@@ -78743,7 +78753,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BottomNav = void 0;
 var React = __importStar(__webpack_require__(0));
 var Icon_1 = __webpack_require__(10);
-var IconButton_1 = __webpack_require__(70);
+var IconButton_1 = __webpack_require__(71);
 var lodash_1 = __webpack_require__(21);
 var BottomNav = /** @class */ (function (_super) {
     __extends(BottomNav, _super);
@@ -80072,10 +80082,10 @@ exports.typeOf = typeOf;
 
 
 
-var ReactIs = __webpack_require__(72);
+var ReactIs = __webpack_require__(73);
 var assign = __webpack_require__(386);
 
-var ReactPropTypesSecret = __webpack_require__(75);
+var ReactPropTypesSecret = __webpack_require__(76);
 var has = __webpack_require__(120);
 var checkPropTypes = __webpack_require__(387);
 
@@ -80790,7 +80800,7 @@ module.exports = shouldUseNative() ? Object.assign : function (target, source) {
 var printWarning = function() {};
 
 if (process.env.NODE_ENV !== 'production') {
-  var ReactPropTypesSecret = __webpack_require__(75);
+  var ReactPropTypesSecret = __webpack_require__(76);
   var loggedTypeFailures = {};
   var has = __webpack_require__(120);
 
@@ -80898,7 +80908,7 @@ module.exports = checkPropTypes;
 
 
 
-var ReactPropTypesSecret = __webpack_require__(75);
+var ReactPropTypesSecret = __webpack_require__(76);
 
 function emptyFunction() {}
 function emptyFunctionWithReset() {}
@@ -84741,7 +84751,7 @@ exports.AvatarGroup = void 0;
 var React = __importStar(__webpack_require__(0));
 var classnames_1 = __importDefault(__webpack_require__(3));
 var avatar_1 = __webpack_require__(128);
-var avatar_wrapper_1 = __webpack_require__(59);
+var avatar_wrapper_1 = __webpack_require__(60);
 var avatar_number_1 = __webpack_require__(416);
 var avatar_placeholder_1 = __webpack_require__(129);
 var common_1 = __webpack_require__(115);
@@ -84795,7 +84805,7 @@ var AvatarGroup = /** @class */ (function (_super) {
                         isAvatar(item)
                             && item.displayName,
                         isAvatar(item)
-                            ? (React.createElement(avatar_1.Avatar, { size: 'small', imageUrl: item.imageUrl, initials: item.initials, displayName: item.displayName, icon: item.icon }))
+                            ? (React.createElement(avatar_1.Avatar, { size: 'small', imageUrl: item.imageUrl, initials: item.initials, displayName: item.displayName, icon: item.icon, statusDot: item.statusDot }))
                             : (React.createElement(avatar_placeholder_1.AvatarPlaceholder, { kind: 'plus-button', size: 'small', icon: item.icon, onClick: item.onClick })))
                     : React.createElement("div", null,
                         React.createElement(avatar_placeholder_1.AvatarPlaceholder, { kind: 'plus-button', size: 'small', icon: item.icon, onClick: isAvatar(item) ? undefined : item.onClick, key: index })));
@@ -84809,7 +84819,7 @@ var AvatarGroup = /** @class */ (function (_super) {
                 }
             }),
             itemsOverLimit > 0 && (React.createElement(PlusButtonWrapper, { onToggle: onToggle },
-                React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, isEmpty: false },
+                React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size },
                     React.createElement(avatar_number_1.AvatarContentNumber, { number: "".concat(itemsOverLimit) })))))); }));
     };
     return AvatarGroup;
@@ -84980,13 +84990,13 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "addMilliseconds", function() { return __WEBPACK_IMPORTED_MODULE_4__addMilliseconds_index_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__addMinutes_index_js__ = __webpack_require__(134);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "addMinutes", function() { return __WEBPACK_IMPORTED_MODULE_5__addMinutes_index_js__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__addMonths_index_js__ = __webpack_require__(62);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__addMonths_index_js__ = __webpack_require__(63);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "addMonths", function() { return __WEBPACK_IMPORTED_MODULE_6__addMonths_index_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__addQuarters_index_js__ = __webpack_require__(135);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "addQuarters", function() { return __WEBPACK_IMPORTED_MODULE_7__addQuarters_index_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__addSeconds_index_js__ = __webpack_require__(136);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "addSeconds", function() { return __WEBPACK_IMPORTED_MODULE_8__addSeconds_index_js__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__addWeeks_index_js__ = __webpack_require__(63);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__addWeeks_index_js__ = __webpack_require__(64);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "addWeeks", function() { return __WEBPACK_IMPORTED_MODULE_9__addWeeks_index_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__addYears_index_js__ = __webpack_require__(137);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "addYears", function() { return __WEBPACK_IMPORTED_MODULE_10__addYears_index_js__["a"]; });
@@ -85022,7 +85032,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "differenceInHours", function() { return __WEBPACK_IMPORTED_MODULE_25__differenceInHours_index_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_26__differenceInISOWeekYears_index_js__ = __webpack_require__(428);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "differenceInISOWeekYears", function() { return __WEBPACK_IMPORTED_MODULE_26__differenceInISOWeekYears_index_js__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_27__differenceInMilliseconds_index_js__ = __webpack_require__(65);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_27__differenceInMilliseconds_index_js__ = __webpack_require__(66);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "differenceInMilliseconds", function() { return __WEBPACK_IMPORTED_MODULE_27__differenceInMilliseconds_index_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_28__differenceInMinutes_index_js__ = __webpack_require__(429);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "differenceInMinutes", function() { return __WEBPACK_IMPORTED_MODULE_28__differenceInMinutes_index_js__["a"]; });
@@ -85204,11 +85214,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "isTomorrow", function() { return __WEBPACK_IMPORTED_MODULE_116__isTomorrow_index_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_117__isTuesday_index_js__ = __webpack_require__(500);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "isTuesday", function() { return __WEBPACK_IMPORTED_MODULE_117__isTuesday_index_js__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_118__isValid_index_js__ = __webpack_require__(64);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_118__isValid_index_js__ = __webpack_require__(65);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "isValid", function() { return __WEBPACK_IMPORTED_MODULE_118__isValid_index_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_119__isWednesday_index_js__ = __webpack_require__(501);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "isWednesday", function() { return __WEBPACK_IMPORTED_MODULE_119__isWednesday_index_js__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_120__isWeekend_index_js__ = __webpack_require__(60);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_120__isWeekend_index_js__ = __webpack_require__(61);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "isWeekend", function() { return __WEBPACK_IMPORTED_MODULE_120__isWeekend_index_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_121__isWithinInterval_index_js__ = __webpack_require__(502);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "isWithinInterval", function() { return __WEBPACK_IMPORTED_MODULE_121__isWithinInterval_index_js__["a"]; });
@@ -85274,7 +85284,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "setWeekYear", function() { return __WEBPACK_IMPORTED_MODULE_151__setWeekYear_index_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_152__setYear_index_js__ = __webpack_require__(534);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "setYear", function() { return __WEBPACK_IMPORTED_MODULE_152__setYear_index_js__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_153__startOfDay_index_js__ = __webpack_require__(61);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_153__startOfDay_index_js__ = __webpack_require__(62);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "startOfDay", function() { return __WEBPACK_IMPORTED_MODULE_153__startOfDay_index_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_154__startOfDecade_index_js__ = __webpack_require__(535);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "startOfDecade", function() { return __WEBPACK_IMPORTED_MODULE_154__startOfDecade_index_js__["a"]; });
@@ -85286,7 +85296,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "startOfISOWeekYear", function() { return __WEBPACK_IMPORTED_MODULE_157__startOfISOWeekYear_index_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_158__startOfMinute_index_js__ = __webpack_require__(172);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "startOfMinute", function() { return __WEBPACK_IMPORTED_MODULE_158__startOfMinute_index_js__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_159__startOfMonth_index_js__ = __webpack_require__(66);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_159__startOfMonth_index_js__ = __webpack_require__(67);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "startOfMonth", function() { return __WEBPACK_IMPORTED_MODULE_159__startOfMonth_index_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_160__startOfQuarter_index_js__ = __webpack_require__(175);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "startOfQuarter", function() { return __WEBPACK_IMPORTED_MODULE_160__startOfQuarter_index_js__["a"]; });
@@ -85848,8 +85858,8 @@ function compareDesc(dirtyDateLeft, dirtyDateRight) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = differenceInBusinessDays;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__isValid_index_js__ = __webpack_require__(64);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__isWeekend_index_js__ = __webpack_require__(60);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__isValid_index_js__ = __webpack_require__(65);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__isWeekend_index_js__ = __webpack_require__(61);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__toDate_index_js__ = __webpack_require__(2);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__differenceInCalendarDays_index_js__ = __webpack_require__(35);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__addDays_index_js__ = __webpack_require__(28);
@@ -86019,7 +86029,7 @@ function differenceInCalendarQuarters(dirtyDateLeft, dirtyDateRight) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = differenceInHours;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__differenceInMilliseconds_index_js__ = __webpack_require__(65);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__differenceInMilliseconds_index_js__ = __webpack_require__(66);
 
 var MILLISECONDS_IN_HOUR = 3600000;
 /**
@@ -86129,7 +86139,7 @@ function differenceInISOWeekYears(dirtyDateLeft, dirtyDateRight) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = differenceInMinutes;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__differenceInMilliseconds_index_js__ = __webpack_require__(65);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__differenceInMilliseconds_index_js__ = __webpack_require__(66);
 
 var MILLISECONDS_IN_MINUTE = 60000;
 /**
@@ -86306,7 +86316,7 @@ function differenceInYears(dirtyDateLeft, dirtyDateRight) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = eachWeekOfInterval;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__addWeeks_index_js__ = __webpack_require__(63);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__addWeeks_index_js__ = __webpack_require__(64);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfWeek_index_js__ = __webpack_require__(29);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__toDate_index_js__ = __webpack_require__(2);
 
@@ -86392,7 +86402,7 @@ function eachWeekOfInterval(dirtyInterval, options) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = eachWeekendOfMonth;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__eachWeekendOfInterval_index_js__ = __webpack_require__(85);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfMonth_index_js__ = __webpack_require__(66);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfMonth_index_js__ = __webpack_require__(67);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__endOfMonth_index_js__ = __webpack_require__(86);
 
 
@@ -88356,7 +88366,7 @@ function getUTCDayOfYear(dirtyDate) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = startOfUTCISOWeekYear;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getUTCISOWeekYear_index_js__ = __webpack_require__(152);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(67);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(68);
 
  // This function will be a part of public API when UTC function will be implemented.
 // See issue: https://github.com/date-fns/date-fns/issues/376
@@ -88382,7 +88392,7 @@ function startOfUTCISOWeekYear(dirtyDate) {
 /* harmony export (immutable) */ __webpack_exports__["a"] = startOfUTCWeekYear;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toInteger_index_js__ = __webpack_require__(4);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getUTCWeekYear_index_js__ = __webpack_require__(90);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCWeek_index_js__ = __webpack_require__(68);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCWeek_index_js__ = __webpack_require__(69);
 
 
  // This function will be a part of public API when UTC function will be implemented.
@@ -89111,7 +89121,7 @@ function getHours(dirtyDate) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getISOWeeksInYear;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__startOfISOWeekYear_index_js__ = __webpack_require__(45);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__addWeeks_index_js__ = __webpack_require__(63);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__addWeeks_index_js__ = __webpack_require__(64);
 
 
 var MILLISECONDS_IN_WEEK = 604800000;
@@ -89462,7 +89472,7 @@ function getUnixTime(dirtyDate) {
 /* harmony export (immutable) */ __webpack_exports__["a"] = getWeekOfMonth;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getDate_index_js__ = __webpack_require__(159);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getDay_index_js__ = __webpack_require__(160);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfMonth_index_js__ = __webpack_require__(66);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfMonth_index_js__ = __webpack_require__(67);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__lib_toInteger_index_js__ = __webpack_require__(4);
 
 
@@ -89542,7 +89552,7 @@ function getWeekOfMonth(date, dirtyOptions) {
 /* harmony export (immutable) */ __webpack_exports__["a"] = getWeeksInMonth;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__differenceInCalendarWeeks_index_js__ = __webpack_require__(141);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__lastDayOfMonth_index_js__ = __webpack_require__(167);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfMonth_index_js__ = __webpack_require__(66);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfMonth_index_js__ = __webpack_require__(67);
 
 
 
@@ -91055,7 +91065,7 @@ function lastDayOfYear(dirtyDate) {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toDate_index_js__ = __webpack_require__(2);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__lib_format_lightFormatters_index_js__ = __webpack_require__(149);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__lib_getTimezoneOffsetInMilliseconds_index_js__ = __webpack_require__(20);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__isValid_index_js__ = __webpack_require__(64);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__isValid_index_js__ = __webpack_require__(65);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__subMilliseconds_index_js__ = __webpack_require__(48);
 
 
@@ -91903,8 +91913,8 @@ function cleanEscapedString(input) {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__lib_setUTCISODay_index_js__ = __webpack_require__(515);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__lib_setUTCISOWeek_index_js__ = __webpack_require__(516);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__lib_setUTCWeek_index_js__ = __webpack_require__(517);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__lib_startOfUTCISOWeek_index_js__ = __webpack_require__(67);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__lib_startOfUTCWeek_index_js__ = __webpack_require__(68);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__lib_startOfUTCISOWeek_index_js__ = __webpack_require__(68);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__lib_startOfUTCWeek_index_js__ = __webpack_require__(69);
 
 
 
@@ -94779,7 +94789,7 @@ function startOfDecade(dirtyDate) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = startOfToday;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__startOfDay_index_js__ = __webpack_require__(61);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__startOfDay_index_js__ = __webpack_require__(62);
 
 /**
  * @name startOfToday
@@ -95018,7 +95028,7 @@ function subMinutes(dirtyDate, dirtyAmount) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = subMonths;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lib_toInteger_index_js__ = __webpack_require__(4);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__addMonths_index_js__ = __webpack_require__(62);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__addMonths_index_js__ = __webpack_require__(63);
 
 
 /**
@@ -95144,7 +95154,7 @@ function subSeconds(dirtyDate, dirtyAmount) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = subWeeks;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lib_toInteger_index_js__ = __webpack_require__(4);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__addWeeks_index_js__ = __webpack_require__(63);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__addWeeks_index_js__ = __webpack_require__(64);
 
 
 /**
@@ -119342,7 +119352,7 @@ function getOppositeVariationPlacement(placement) {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__getComputedStyle_js__ = __webpack_require__(42);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__instanceOf_js__ = __webpack_require__(16);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__getBoundingClientRect_js__ = __webpack_require__(50);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__getParentNode_js__ = __webpack_require__(69);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__getParentNode_js__ = __webpack_require__(70);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__contains_js__ = __webpack_require__(190);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__getNodeName_js__ = __webpack_require__(37);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__utils_rectToClientRect_js__ = __webpack_require__(197);
@@ -119515,7 +119525,7 @@ function getDocumentRect(element) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getScrollParent;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getParentNode_js__ = __webpack_require__(69);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getParentNode_js__ = __webpack_require__(70);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__isScrollParent_js__ = __webpack_require__(102);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getNodeName_js__ = __webpack_require__(37);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__instanceOf_js__ = __webpack_require__(16);
@@ -124462,7 +124472,7 @@ exports.RadioButtonGroup = void 0;
 var React = __importStar(__webpack_require__(0));
 var classnames_1 = __importDefault(__webpack_require__(3));
 var react_id_generator_1 = __importDefault(__webpack_require__(11));
-var FormLabel_1 = __webpack_require__(73);
+var FormLabel_1 = __webpack_require__(74);
 var RadioButtonGroup = /** @class */ (function (_super) {
     __extends(RadioButtonGroup, _super);
     function RadioButtonGroup(props) {
@@ -124715,7 +124725,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckButtonGroup = void 0;
 var React = __importStar(__webpack_require__(0));
 var classnames_1 = __importDefault(__webpack_require__(3));
-var FormLabel_1 = __webpack_require__(73);
+var FormLabel_1 = __webpack_require__(74);
 var CheckButtonGroup = /** @class */ (function (_super) {
     __extends(CheckButtonGroup, _super);
     function CheckButtonGroup() {
@@ -124794,7 +124804,7 @@ exports.NavButton = void 0;
 var React = __importStar(__webpack_require__(0));
 var classnames_1 = __importDefault(__webpack_require__(3));
 var Icon_1 = __webpack_require__(10);
-var Badge_1 = __webpack_require__(58);
+var Badge_1 = __webpack_require__(59);
 var NavButton = /** @class */ (function (_super) {
     __extends(NavButton, _super);
     function NavButton() {
@@ -144355,7 +144365,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Carousel = void 0;
 var React = __importStar(__webpack_require__(0));
 var carousel_1 = __webpack_require__(665);
-var Badge_1 = __webpack_require__(58);
+var Badge_1 = __webpack_require__(59);
 var Carousel = /** @class */ (function (_super) {
     __extends(Carousel, _super);
     function Carousel() {
@@ -147844,7 +147854,7 @@ exports.IconPicker = void 0;
 var React = __importStar(__webpack_require__(0));
 // @ts-ignore
 var iconFont = __importStar(__webpack_require__(378));
-var Button_1 = __webpack_require__(76);
+var Button_1 = __webpack_require__(58);
 var Icon_1 = __webpack_require__(10);
 var SelectGrid_1 = __webpack_require__(346);
 var IconPicker = /** @class */ (function (_super) {
@@ -151314,7 +151324,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationPanelFooter = exports.NotificationPanelContent = exports.NotificationPanelHeader = exports.NotificationPanelContainer = exports.NotificationPanel = void 0;
 var React = __importStar(__webpack_require__(0));
 var classnames_1 = __importDefault(__webpack_require__(3));
-var IconButton_1 = __webpack_require__(70);
+var IconButton_1 = __webpack_require__(71);
 var NotificationPanelContainer = /** @class */ (function (_super) {
     __extends(NotificationPanelContainer, _super);
     function NotificationPanelContainer() {
@@ -151544,7 +151554,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SideBarTabs = void 0;
 var React = __importStar(__webpack_require__(0));
 var Icon_1 = __webpack_require__(10);
-var Badge_1 = __webpack_require__(58);
+var Badge_1 = __webpack_require__(59);
 var classnames_1 = __importDefault(__webpack_require__(3));
 var SideBarTabs = /** @class */ (function (_super) {
     __extends(SideBarTabs, _super);
@@ -158414,7 +158424,7 @@ var React = __importStar(__webpack_require__(0));
 var index_1 = __webpack_require__(5);
 var Layout = __importStar(__webpack_require__(17));
 var Form = __importStar(__webpack_require__(14));
-var Nav = __importStar(__webpack_require__(74));
+var Nav = __importStar(__webpack_require__(75));
 var TableList_1 = __webpack_require__(113);
 var RundownEditor = /** @class */ (function (_super) {
     __extends(RundownEditor, _super);
@@ -158679,7 +158689,7 @@ exports.RundownEditor = RundownEditor;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__babel_runtime_helpers_esm_extends__ = __webpack_require__(24);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8_path_to_regexp__ = __webpack_require__(822);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8_path_to_regexp___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_8_path_to_regexp__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9_react_is__ = __webpack_require__(72);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9_react_is__ = __webpack_require__(73);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_9_react_is___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_9_react_is__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__babel_runtime_helpers_esm_objectWithoutPropertiesLoose__ = __webpack_require__(25);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_11_hoist_non_react_statics__ = __webpack_require__(370);
@@ -164297,63 +164307,83 @@ var pages = {
         items: {
             'buttons': {
                 name: 'Buttons',
+                component: Buttons_1.default,
             },
             'icon-buttons': {
-                name: 'Icon Buttons'
+                name: 'Icon Buttons',
+                component: IconButtons_1.default,
             },
             'button-groups': {
-                name: 'Button Group & Divider'
+                name: 'Button Group & Divider',
+                component: ButtonGroups_1.default,
             },
             'labels': {
                 name: 'Labels',
+                component: Labels_1.default,
             },
             'icon-labels': {
-                name: 'Icon Labels'
+                name: 'Icon Labels',
+                component: IconLabels_1.default,
             },
             'badges': {
                 name: 'Badges',
+                component: Badges_1.default,
             },
             'alerts': {
-                name: 'Alerts'
+                name: 'Alerts',
+                component: Alerts_1.default,
             },
             'avatar': {
                 name: 'Avatar',
+                component: Avatar_1.default,
             },
             'tooltips': {
-                name: 'Tooltips'
+                name: 'Tooltips',
+                component: Tooltips_1.default,
             },
             'tags': {
-                name: 'Tags'
+                name: 'Tags',
+                component: Tags_1.default,
             },
             'dropdowns': {
-                name: 'Dropdowns'
+                name: 'Dropdowns',
+                component: Dropdowns_1.default,
             },
             'nav-buttons': {
-                name: 'Nav buttons'
+                name: 'Nav buttons',
+                component: NavButtons_1.default,
             },
             'toast': {
-                name: 'Toasts'
+                name: 'Toasts',
+                component: Toasts_1.default,
             },
             'popover': {
-                name: 'Popover'
+                name: 'Popover',
+                component: Popover_1.PopoverDoc,
             },
             'modal': {
-                name: 'Modal'
+                name: 'Modal',
+                component: Modal_1.default,
             },
             'carousel': {
-                name: 'Carousel'
+                name: 'Carousel',
+                component: Carousel_1.default,
             },
             'menu': {
                 name: 'Menu',
+                component: Menu_1.MenuDocs,
             },
             'treemenu': {
                 name: 'TreeMenu',
+                component: TreeMenu_1.TreeMenuDocs,
             },
             "drag-handle": {
-                name: 'Drag handle'
+                name: 'Drag handle',
+                component: DragHandleDocs_1.default,
             },
             "illustration-button": {
-                name: 'Illustration Button'
+                name: 'Illustration Button',
+                component: IllustrationButton_1.IllustrationButtonDoc,
             }
         }
     },
@@ -164361,16 +164391,20 @@ var pages = {
         name: "Navigation",
         items: {
             'tab': {
-                name: 'Tabs'
+                name: 'Tabs',
+                component: Tabs_1.default,
             },
             'left-navigation': {
-                name: 'Left navigation'
+                name: 'Left navigation',
+                component: LeftNavigations_1.default,
             },
-            'Quick-navigation-bar': {
-                name: 'Quick navigation bar'
+            'quick-navigation-bar': {
+                name: 'Quick navigation bar',
+                component: QuickNavigationBar_1.default,
             },
             'sub-navigation': {
-                name: 'Sub navigation bar'
+                name: 'Sub navigation bar',
+                component: SubNav_1.default,
             },
         }
     },
@@ -164378,16 +164412,20 @@ var pages = {
         name: "Containers",
         items: {
             'container': {
-                name: 'Container component'
+                name: 'Container component',
+                component: Container_1.default,
             },
             'empty-states': {
-                name: 'Empty states'
+                name: 'Empty states',
+                component: EmptyStates_1.default,
             },
             'grid-item': {
-                name: 'Grid Item'
+                name: 'Grid Item',
+                component: GridItem_1.default,
             },
             'panel': {
-                name: 'Panel'
+                name: 'Panel',
+                component: Panel_1.default,
             },
         }
     },
@@ -164395,13 +164433,16 @@ var pages = {
         name: "Layout",
         items: {
             'content-divider': {
-                name: 'Content Divider'
+                name: 'Content Divider',
+                component: ContentDivider_1.default,
             },
             "togglebox": {
-                name: "Togglebox"
+                name: "Togglebox",
+                component: Togglebox_1.default,
             },
             "resizable-panels": {
-                name: "Resizable panels"
+                name: "Resizable panels",
+                component: ResizablePanels_1.ResizablePanelsDoc,
             },
         }
     },
@@ -164409,10 +164450,12 @@ var pages = {
         name: "Text",
         items: {
             'heading': {
-                name: 'Heading component'
+                name: 'Heading component',
+                component: Heading_1.default,
             },
             'text': {
-                name: 'Text component'
+                name: 'Text component',
+                component: Text_1.default,
             },
         }
     },
@@ -164420,25 +164463,32 @@ var pages = {
         name: "Lists",
         items: {
             'grid-list': {
-                name: 'Grid List'
+                name: 'Grid List',
+                component: GridList_1.default,
             },
             'list-items': {
-                name: 'List items'
+                name: 'List items',
+                component: ListItems_1.default,
             },
             'simple-list': {
-                name: 'Simple list'
+                name: 'Simple list',
+                component: SimpleList_1.default,
             },
             'boxed-list': {
-                name: 'Boxed list'
+                name: 'Boxed list',
+                component: BoxedList_1.default,
             },
             'table-list': {
-                name: 'Table list'
+                name: 'Table list',
+                component: TableList_1.default,
             },
             'content-list': {
-                name: 'Content list'
+                name: 'Content list',
+                component: ContentList_1.default,
             },
             'with-pagination': {
-                name: 'With pagination'
+                name: 'With pagination',
+                component: WithPaginationDocs_1.WithPaginationDocs,
             },
         }
     },
@@ -164447,57 +164497,75 @@ var pages = {
         items: {
             'inputs': {
                 name: 'Inputs',
+                component: Inputs_1.default,
             },
             'autocomplete': {
                 name: 'Autocomplete',
+                component: Autocomplete_1.default,
             },
             'tag-input': {
                 name: 'Tag Input',
+                component: TagInputDocs_1.default,
             },
             'select': {
                 name: 'Select',
+                component: Selects_1.default,
             },
             'select-grid': {
                 name: 'Select Grid',
+                component: SelectGrid_1.default,
             },
             'select-with-template': {
                 name: 'Select with template',
+                component: SelectWithTemplate_1.SelectWithTemplateDocs,
             },
             'with-size-observer': {
                 name: 'With size observer',
+                component: WithSizeObserver_1.WithSizeObserverDocs,
             },
             'multiselect': {
                 name: 'MultiSelect',
+                component: MultiSelect_1.MultiselectDocs,
             },
             'treeselect': {
                 name: 'TreeSelect',
+                component: TreeSelect_1.TreeSelectDocs,
             },
             'date-picker': {
                 name: 'Date Picker',
+                component: DatePicker_1.default,
             },
             'time-picker': {
                 name: 'Time Picker',
+                component: TimePicker_1.default,
             },
             'icon-picker': {
                 name: 'Icon Picker',
+                component: IconPicker_1.default,
             },
             'duration-input': {
                 name: 'Duration Input',
+                component: DurationInput_1.default,
             },
             'switch': {
-                name: 'Switch'
+                name: 'Switch',
+                component: Switch_1.default,
             },
             'radiogroup': {
-                name: 'RadioGroup'
+                name: 'RadioGroup',
+                component: RadioGroup_1.default,
             },
             'checkbox': {
-                name: 'Checkbox'
+                name: 'Checkbox',
+                component: Checkboxs_1.default,
             },
             'dropzone': {
-                name: 'DropZone'
+                name: 'DropZone',
+                component: DropZone_1.default,
             },
             'create-button': {
-                name: 'CreateButton'
+                name: 'CreateButton',
+                component: CreateButton_1.default,
             },
         }
     },
@@ -164506,9 +164574,11 @@ var pages = {
         items: {
             'icon-font': {
                 name: 'Icon font',
+                component: IconFont_1.default,
             },
             'big-icon-font': {
-                name: 'Big icon font'
+                name: 'Big icon font',
+                component: BigIconFont_1.default,
             }
         }
     },
@@ -164516,44 +164586,64 @@ var pages = {
         name: "Utility classes",
         items: {
             'border-utilities': {
-                name: 'Border'
+                name: 'Border',
+                component: BorderUtilities_1.BorderUtilitiesDoc,
             },
             'border-radius-utilities': {
-                name: 'Border Radius'
+                name: 'Border Radius',
+                component: BorderRadiusUtilities_1.BorderRadiusUtilitiesDoc,
             },
             'display-utilities': {
-                name: 'Display'
+                name: 'Display',
+                component: DisplayUtilities_1.DisplayUtilitiesDoc,
             },
             'flex-and-grid-utilities': {
-                name: 'Flex & Grid'
+                name: 'Flex & Grid',
+                component: FlexAndGridUtilities_1.FlexAndGridUtilitiesDoc,
             },
             'object-fit-utilities': {
-                name: 'Object Fit'
+                name: 'Object Fit',
+                component: ObjectFitUtilities_1.ObjectFitUtilitiesDoc,
             },
             'object-position-utilities': {
-                name: 'Object Position'
+                name: 'Object Position',
+                component: ObjectPositionUtilities_1.ObjectPositionUtilitiesDoc,
             },
             'opacity-utilities': {
-                name: 'Opacity'
+                name: 'Opacity',
+                component: OpacityUtilities_1.OpacityUtilitiesDoc,
             },
             'overflow-utilities': {
-                name: 'Overflow'
+                name: 'Overflow',
+                component: OverflowUtilities_1.OverflowUtilitiesDoc,
             },
             'position-utilities': {
-                name: 'Position'
+                name: 'Position',
+                component: PositionUtilities_1.PositionUtilitiesDoc,
             },
             'shadow-utilities': {
-                name: 'Shadow'
+                name: 'Shadow',
+                component: ShadowUtilities_1.ShadowUtilitiesDoc,
             },
             'spacing-utilities': {
                 name: 'Spacing',
+                component: SpacingUtilities_1.SpacingUtilitiesDoc,
             },
             'text-utilities': {
-                name: 'Text'
-            }
+                name: 'Text',
+                component: TextUtilities_1.TextUtilitiesDoc,
+            },
         }
     }
 };
+var routes = [];
+for (var _i = 0, _a = Object.values(pages); _i < _a.length; _i++) {
+    var group = _a[_i];
+    for (var _b = 0, _c = Object.entries(group.items); _b < _c.length; _b++) {
+        var _d = _c[_b], id = _d[0], value = _d[1];
+        routes.push({ path: "/components/".concat(id), component: value.component });
+    }
+}
 var ReactDoc = /** @class */ (function (_super) {
     __extends(ReactDoc, _super);
     function ReactDoc() {
@@ -164564,78 +164654,7 @@ var ReactDoc = /** @class */ (function (_super) {
             React.createElement(react_1.ReactNav, { pages: pages }),
             React.createElement("main", { className: "docs-page__content docs-page__container-fluid" },
                 React.createElement(react_router_dom_1.Switch, null,
-                    React.createElement(react_router_dom_1.Route, { path: "/components/buttons", component: Buttons_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/icon-buttons", component: IconButtons_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/button-groups", component: ButtonGroups_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/labels", component: Labels_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/icon-labels", component: IconLabels_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/badges", component: Badges_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/alerts", component: Alerts_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/avatar", component: Avatar_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/tooltips", component: Tooltips_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/tags", component: Tags_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/inputs", component: Inputs_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/autocomplete", component: Autocomplete_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/select", component: Selects_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/select-with-template", component: SelectWithTemplate_1.SelectWithTemplateDocs }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/with-size-observer", component: WithSizeObserver_1.WithSizeObserverDocs }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/multiselect", component: MultiSelect_1.MultiselectDocs }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/treeselect", component: TreeSelect_1.TreeSelectDocs }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/treemenu", component: TreeMenu_1.TreeMenuDocs }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/duration-input", component: DurationInput_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/with-pagination", component: WithPaginationDocs_1.WithPaginationDocs }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/popover", component: Popover_1.PopoverDoc }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/date-picker", component: DatePicker_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/time-picker", component: TimePicker_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/switch", component: Switch_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/radiogroup", component: RadioGroup_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/checkbox", component: Checkboxs_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/tab", component: Tabs_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/left-navigation", component: LeftNavigations_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/Quick-navigation-bar", component: QuickNavigationBar_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/nav-buttons", component: NavButtons_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/icon-font", component: IconFont_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/big-icon-font", component: BigIconFont_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/sub-navigation", component: SubNav_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/dropdowns", component: Dropdowns_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/toast", component: Toasts_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/drag-handle", component: DragHandleDocs_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/tag-input", component: TagInputDocs_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/empty-states", component: EmptyStates_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/grid-list", component: GridList_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/grid-item", component: GridItem_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/modal", component: Modal_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/carousel", component: Carousel_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/content-divider", component: ContentDivider_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/menu", component: Menu_1.MenuDocs }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/togglebox", component: Togglebox_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/list-items", component: ListItems_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/panel", component: Panel_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/select-grid", component: SelectGrid_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/icon-picker", component: IconPicker_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/simple-list", component: SimpleList_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/boxed-list", component: BoxedList_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/table-list", component: TableList_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/content-list", component: ContentList_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/heading", component: Heading_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/text", component: Text_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/container", component: Container_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/dropzone", component: DropZone_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/create-button", component: CreateButton_1.default }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/resizable-panels", component: ResizablePanels_1.ResizablePanelsDoc }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/illustration-button", component: IllustrationButton_1.IllustrationButtonDoc }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/spacing-utilities", component: SpacingUtilities_1.SpacingUtilitiesDoc }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/text-utilities", component: TextUtilities_1.TextUtilitiesDoc }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/shadow-utilities", component: ShadowUtilities_1.ShadowUtilitiesDoc }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/position-utilities", component: PositionUtilities_1.PositionUtilitiesDoc }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/overflow-utilities", component: OverflowUtilities_1.OverflowUtilitiesDoc }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/display-utilities", component: DisplayUtilities_1.DisplayUtilitiesDoc }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/flex-and-grid-utilities", component: FlexAndGridUtilities_1.FlexAndGridUtilitiesDoc }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/border-radius-utilities", component: BorderRadiusUtilities_1.BorderRadiusUtilitiesDoc }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/border-utilities", component: BorderUtilities_1.BorderUtilitiesDoc }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/opacity-utilities", component: OpacityUtilities_1.OpacityUtilitiesDoc }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/object-fit-utilities", component: ObjectFitUtilities_1.ObjectFitUtilitiesDoc }),
-                    React.createElement(react_router_dom_1.Route, { path: "/components/object-position-utilities", component: ObjectPositionUtilities_1.ObjectPositionUtilitiesDoc }),
+                    routes.map(function (route) { return React.createElement(react_router_dom_1.Route, { key: route.path, path: route.path, component: route.component }); }),
                     React.createElement(react_router_dom_1.Route, { path: "/", component: react_1.ReactDefault })))));
     };
     return ReactDoc;
@@ -169063,12 +169082,14 @@ var ButtonsDoc = /** @class */ (function (_super) {
                     React.createElement("div", { className: "docs-page__content-row" },
                         React.createElement(app_typescript_1.Button, { type: "warning", icon: "exclamation-sign", text: "exclamation-sign", size: "large", shape: "round", iconOnly: true, onClick: function () { return false; } }),
                         React.createElement(app_typescript_1.Button, { type: "primary", icon: "plus-large", text: "plus-large", style: "hollow", size: "large", shape: "round", iconOnly: true, onClick: function () { return false; } }),
+                        React.createElement(app_typescript_1.Button, { icon: "chevron-up-thin", text: "Pull up", style: "hollow", shape: "round", size: "large", iconOnly: true, onClick: function () { return false; } }),
                         React.createElement(app_typescript_1.Button, { type: "highlight", icon: "bell", text: "bell", size: "large", shape: "round", iconOnly: true, onClick: function () { return false; } }),
                         React.createElement(app_typescript_1.Button, { size: "normal", icon: "info-sign", text: "info-sign", shape: "round", iconOnly: true, onClick: function () { return false; } }),
                         React.createElement(app_typescript_1.Button, { type: "primary", icon: "plus-large", text: "plus-large", shape: "round", iconOnly: true, onClick: function () { return false; } }),
                         React.createElement(app_typescript_1.Button, { type: "success", icon: "ok", text: "ok", shape: "round", iconOnly: true, onClick: function () { return false; } }),
                         React.createElement(app_typescript_1.Button, { type: "alert", icon: "close-small", text: "close-small", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }),
-                        React.createElement(app_typescript_1.Button, { type: "primary", icon: "plus-large", text: "plus-large", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }),
+                        React.createElement(app_typescript_1.Button, { type: "primary", icon: "plus-large", text: "Add New", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }),
+                        React.createElement(app_typescript_1.Button, { icon: "chevron-up-thin", text: "Pull up", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }),
                         React.createElement(app_typescript_1.Button, { type: "sd-green", icon: "star", text: "star", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))),
                 React.createElement(Markup.ReactMarkupCode, null, "\n                        // Large default and small\n                        <Button type=\"primary\" icon=\"plus-sign\" text=\"plus-sign\" style=\"hollow\" size=\"large\" iconOnly={true} onClick={()=> false} />\n                        <Button type=\"highlight\" icon=\"bell\" text=\"bell\" size=\"large\" iconOnly={true} onClick={()=> false} />\n                        <Button icon=\"info-sign\" text=\"info-sign\" iconOnly={true} onClick={()=> false} />\n                        <Button type=\"primary\" icon=\"plus-sign\" text=\"plus-sign\" iconOnly={true} onClick={()=> false} />\n                        <Button type=\"success\" icon=\"ok\" text=\"ok\" iconOnly={true} onClick={()=> false} />\n                        <Button type=\"alert\" style=\"hollow\" icon=\"kill\" text=\"kill\" size=\"small\" iconOnly={true} onClick={()=> false} />\n                        <Button icon=\"calendar\" size=\"small\" text=\"calendar\" iconOnly={true} onClick={()=> false} />\n                        <Button type=\"primary\" style=\"hollow\" icon=\"refresh\" text=\"refresh\" size=\"small\" iconOnly={true} onClick={()=> false} />\n\n                        // // Circle (large, default and small)\n                        <Button type=\"primary\" icon=\"plus-large\" text=\"plus-large\" style=\"hollow\" size=\"large\" shape=\"round\" iconOnly={true} onClick={()=> false} />\n                        <Button type=\"highlight\" icon=\"bell\" text=\"bell\" size=\"large\" shape=\"round\" iconOnly={true} onClick={()=> false} />\n                        <Button size=\"normal\" icon=\"info-sign\" text=\"info-sign\" shape=\"round\" iconOnly={true} onClick={()=> false} />\n                        <Button type=\"primary\" icon=\"plus-large\" text=\"plus-large\" shape=\"round\" iconOnly={true} onClick={()=> false} />\n                        <Button type=\"success\" icon=\"ok\" text=\"ok\" shape=\"round\" iconOnly={true} onClick={()=> false} />\n                        <Button type=\"alert\" icon=\"close-small\" text=\"close-small\" size=\"small\" shape=\"round\" iconOnly={true} onClick={()=> false} />\n                        <Button type=\"primary\" icon=\"plus-large\" text=\"plus-large\" size=\"small\" shape=\"round\" iconOnly={true} onClick={()=> false} />\n                        <Button type=\"sd-green\" icon=\"star\" text=\"star\" size=\"small\" shape=\"round\" iconOnly={true} onClick={()=> false} />\n                    ")),
             React.createElement("h3", { className: "docs-page__h3" }, "Props"),
@@ -171154,8 +171175,8 @@ var AvatarDoc = /** @class */ (function (_super) {
                     React.createElement("p", { className: "docs-page__paragraph" }, "// Combo"),
                     React.createElement(app_typescript_1.Container, { gap: 'medium', className: 'sd-margin-b--3' },
                         React.createElement(app_typescript_1.Avatar, { displayName: "Jeffrey Lebowski", imageUrl: "/avatar.jpg", initials: 'Jeffrey Lebowski', size: "large", icon: { name: 'print', color: 'red' }, statusIndicator: "online", administratorIndicator: true }),
-                        React.createElement(app_typescript_1.Avatar, { displayName: "Jeffrey Lebowski", imageUrl: null, initials: "Jeffrey Lebowski", size: "large", icon: { name: 'print', color: 'red' }, statusIndicator: "offline", administratorIndicator: true }),
-                        React.createElement(app_typescript_1.Avatar, { displayName: "Jeffrey Lebowski", imageUrl: null, initials: 'Jeffrey Lebowski', size: "large", icon: { name: 'print', color: 'red' }, administratorIndicator: true })),
+                        React.createElement(app_typescript_1.Avatar, { displayName: "Jeffrey Lebowski", imageUrl: null, initials: "Jeffrey Lebowski", size: "large", icon: { name: 'print', color: 'var(--sd-colour-state--in-workflow)' }, statusIndicator: "offline", administratorIndicator: true }),
+                        React.createElement(app_typescript_1.Avatar, { displayName: "Jeffrey Lebowski", imageUrl: null, initials: 'Jeffrey Lebowski', size: "large", icon: { name: 'print', color: 'var(--sd-colour-state--done)' }, administratorIndicator: true })),
                     React.createElement("p", { className: "docs-page__paragraph" }, "// Basic with size variations"),
                     React.createElement(app_typescript_1.Container, { gap: 'medium', className: 'sd-margin-b--3' },
                         React.createElement(app_typescript_1.Avatar, { size: "x-small", imageUrl: "/avatar.jpg", initials: "JL", displayName: "Jeffrey Lebowski" }),
@@ -171175,10 +171196,16 @@ var AvatarDoc = /** @class */ (function (_super) {
                         React.createElement(app_typescript_1.Avatar, { size: "x-small", imageUrl: null, initials: "JL", displayName: "Jeffrey Lebowski", icon: { name: 'text' } }),
                         React.createElement(app_typescript_1.Avatar, { size: "small", imageUrl: "/avatar.jpg", initials: "JL", displayName: "Jeffrey Lebowski", icon: { name: 'text' } }),
                         React.createElement(app_typescript_1.Avatar, { size: "medium", imageUrl: "/avatar.jpg", initials: "JL", displayName: "Jeffrey Lebowski", icon: { name: 'audio', color: 'var(--sd-colour-state--done)' } }),
-                        React.createElement(app_typescript_1.Avatar, { size: "large", imageUrl: "/avatar.jpg", initials: "JL", displayName: "Jeffrey Lebowski", icon: { name: 'text', color: 'var(--sd-colour-state--in-progress)' } }),
-                        React.createElement(app_typescript_1.Avatar, { size: "x-large", imageUrl: "/avatar.jpg", initials: "JL", displayName: "Jeffrey Lebowski", icon: { name: 'text' } }),
-                        React.createElement(app_typescript_1.Avatar, { size: "xx-large", imageUrl: null, initials: "JL", displayName: "Jeffrey Lebowski", icon: { name: 'video-cancel', color: 'var(--sd-colour-state--in-progress)' } }))),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        // Combo\n\n                        <Avatar\n                            displayName=\"Jeffrey Lebowski\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials='Jeffrey Lebowski'\n                            size=\"large\"\n                            icon={{name: 'print', color: 'red'}}\n                            statusIndicator=\"online\"\n                            administratorIndicator\n                        />\n\n                        <Avatar\n                            displayName=\"Jeffrey Lebowski\"\n                            imageUrl={null}\n                            initials=\"Jeffrey Lebowski\"\n                            size=\"large\"\n                            icon={{name: 'print', color: 'red'}}\n                            statusIndicator=\"offline\"\n                            administratorIndicator\n                        />\n\n                        <Avatar\n                            displayName=\"Jeffrey Lebowski\"\n                            imageUrl={null}\n                            initials='Jeffrey Lebowski'\n                            size=\"large\"\n                            icon={{name: 'print', color: 'red'}}\n                            administratorIndicator\n                        />\n\n                        // Basic with size variations\n                        <Avatar\n                            size=\"x-small\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                        />\n\n                        <Avatar\n                            size=\"small\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                        />\n\n                        <Avatar\n                            size=\"medium\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                        />\n\n                        <Avatar\n                            size=\"large\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                        />\n\n                        <Avatar\n                            size=\"x-large\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                        />\n\n                        <Avatar\n                            size=\"xx-large\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                        />\n\n\n                        // With status indicator\n                        <Avatar\n                            size=\"x-small\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            statusIndicator=\"online\"\n                        />\n\n                        <Avatar\n                            size=\"x-small\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            statusIndicator=\"offline\"\n                        />\n\n                        <Avatar\n                            size=\"large\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            statusIndicator=\"online\"\n                        />\n\n                        <Avatar\n                            size=\"large\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            statusIndicator=\"offline\"\n                        />\n\n                        // With administrator indicator\n\n                        <Avatar\n                            size=\"large\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            administratorIndicator\n                        />\n\n                        // With icons\n\n                        <Avatar\n                            size=\"x-small\"\n                            imageUrl={null}\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            icon={{name: 'text'}}\n                        />\n\n                        <Avatar\n                            size=\"small\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            icon={{name: 'text'}}\n                        />\n\n                        <Avatar\n                            size=\"medium\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            icon={{name: 'audio', color: 'var(--sd-colour-state--done)'}}\n                        />\n\n                        <Avatar\n                            size=\"large\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            icon={{name: 'text', color: 'var(--sd-colour-state--in-progress)'}}\n                        />\n\n                        <Avatar\n                            size=\"x-large\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            icon={{name: 'text'}}\n                        />\n\n                        <Avatar\n                            size=\"xx-large\"\n                            imageUrl={null}\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            icon={{name: 'video-cancel', color: 'var(--sd-colour-state--in-progress)'}}\n                        />\n\n                        </AvatarWrapper>\n                    ")),
+                        React.createElement(app_typescript_1.Avatar, { size: "large", imageUrl: "/avatar.jpg", initials: "JL", displayName: "Jeffrey Lebowski", icon: { name: 'text', color: 'var(--sd-colour-state--in-workflow)' } }),
+                        React.createElement(app_typescript_1.Avatar, { size: "x-large", imageUrl: null, initials: null, displayName: "Unassigned", noAvatarPlaceholderColor: 'subtle', icon: { name: 'text', color: 'var(--sd-colour-state--canceled)' } }),
+                        React.createElement(app_typescript_1.AvatarPlaceholder, { kind: 'plus-button', size: 'x-large' }),
+                        React.createElement(app_typescript_1.Avatar, { size: "x-large", imageUrl: null, initials: null, displayName: "Unassigned", icon: { name: 'text', color: 'var(--sd-colour-state--canceled)' } }),
+                        React.createElement(app_typescript_1.Avatar, { size: "xx-large", imageUrl: null, initials: "JL", displayName: "Jeffrey Lebowski", icon: { name: 'video-cancel', color: 'var(--sd-colour-state--canceled)' } })),
+                    React.createElement("p", { className: "docs-page__paragraph" }, "// With icon and Coverage status indicator"),
+                    React.createElement(app_typescript_1.Container, { gap: 'medium', className: 'sd-margin-b--3' },
+                        React.createElement(app_typescript_1.Avatar, { displayName: "Unassigned", imageUrl: null, initials: null, size: "small", icon: { name: 'text', color: 'var(--sd-colour-state--assigned)' }, statusDot: { color: 'var(--sd-colour-coverage-state--on-merit)' } }),
+                        React.createElement(app_typescript_1.Avatar, { displayName: "Unassigned", imageUrl: null, initials: null, size: "small", icon: { name: 'photo', color: 'var(--sd-colour-state--assigned)' }, statusDot: { color: 'var(--sd-colour-coverage-state--not-covering)' } }))),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        // Combo\n\n                        <Avatar\n                            displayName=\"Jeffrey Lebowski\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials='Jeffrey Lebowski'\n                            size=\"large\"\n                            icon={{name: 'print', color: 'red'}}\n                            statusIndicator=\"online\"\n                            administratorIndicator\n                        />\n\n                        <Avatar\n                            displayName=\"Jeffrey Lebowski\"\n                            imageUrl={null}\n                            initials=\"Jeffrey Lebowski\"\n                            size=\"large\"\n                            icon={{name: 'print', color: 'var(--sd-colour-state--in-workflow)}}\n                            statusIndicator=\"offline\"\n                            administratorIndicator\n                        />\n\n                        <Avatar\n                            displayName=\"Jeffrey Lebowski\"\n                            imageUrl={null}\n                            initials='Jeffrey Lebowski'\n                            size=\"large\"\n                            icon={{name: 'print', color: 'var(--sd-colour-state--done)'}}\n                            administratorIndicator\n                        />\n\n                        // Basic with size variations\n                        <Avatar\n                            size=\"x-small\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                        />\n\n                        <Avatar\n                            size=\"small\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                        />\n\n                        <Avatar\n                            size=\"medium\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                        />\n\n                        <Avatar\n                            size=\"large\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                        />\n\n                        <Avatar\n                            size=\"x-large\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                        />\n\n                        <Avatar\n                            size=\"xx-large\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                        />\n\n\n                        // With status indicator\n                        <Avatar\n                            size=\"x-small\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            statusIndicator=\"online\"\n                        />\n\n                        <Avatar\n                            size=\"x-small\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            statusIndicator=\"offline\"\n                        />\n\n                        <Avatar\n                            size=\"large\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            statusIndicator=\"online\"\n                        />\n\n                        <Avatar\n                            size=\"large\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            statusIndicator=\"offline\"\n                        />\n\n                        // With administrator indicator\n\n                        <Avatar\n                            size=\"large\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            administratorIndicator\n                        />\n\n                        // With icons\n\n                        <Avatar\n                            size=\"x-small\"\n                            imageUrl={null}\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            icon={{name: 'text'}}\n                        />\n\n                        <Avatar\n                            size=\"small\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            icon={{name: 'text'}}\n                        />\n\n                        <Avatar\n                            size=\"medium\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            icon={{name: 'audio', color: 'var(--sd-colour-state--done)'}}\n                        />\n\n                        <Avatar\n                            size=\"large\"\n                            imageUrl=\"/avatar.jpg\"\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            icon={{name: 'text', color: 'var(--sd-colour-state--in-workflow)'}}\n                        />\n\n                        <Avatar\n                            size=\"x-large\"\n                            imageUrl={null}\n                            initials={null}\n                            displayName=\"Unassigned\"\n                            emptyLight\n                            icon={{name: 'text', color: 'var(--sd-colour-state--canceled)'}}\n                        />\n\n                        <Avatar\n                            size=\"x-large\"\n                            imageUrl={null}\n                            initials={null}\n                            displayName=\"Unassigned\"\n                            icon={{name: 'text', color: 'var(--sd-colour-state--canceled)'}}\n                        />\n\n                        <Avatar\n                            size=\"xx-large\"\n                            imageUrl={null}\n                            initials=\"JL\"\n                            displayName=\"Jeffrey Lebowski\"\n                            icon={{name: 'video-cancel', color: 'var(--sd-colour-state--canceled)'}}\n                        />\n\n                        // With icon and Coverage status indicator\n                        <Avatar \n                            displayName=\"Unassigned\"\n                            imageUrl={null}\n                            initials={null}\n                            size=\"small\"\n                            icon={{name: 'text', color: 'var(--sd-colour-state--assigned)'}}\n                            statusDot={{color: 'var(--sd-colour-coverage-state--on-merit)'}}\n                        />\n                        <Avatar \n                            displayName=\"Unassigned\"\n                            imageUrl={null}\n                            initials={null}\n                            size=\"small\"\n                            icon={{name: 'photo', color: 'var(--sd-colour-state--assigned)'}}\n                            statusDot={{color: 'var(--sd-colour-coverage-state--not-covering)'}}\n                        />\n\n                    ")),
             React.createElement("h3", { className: "docs-page__h3 docs-page__h3--small-top-m" }, "AvatarGroup"),
             React.createElement("p", { className: 'docs-page__paragraph' }),
             React.createElement(Markup.ReactMarkup, null,
@@ -171213,25 +171240,25 @@ var AvatarDoc = /** @class */ (function (_super) {
                                 imageUrl: null,
                                 initials: "U3",
                                 displayName: 'User3',
-                                icon: { name: 'print', color: 'blue' },
+                                icon: { name: 'print', color: 'var(--sd-colour-state--in-workflow)' },
                             },
                             {
                                 imageUrl: 'avatar-3.jpg',
                                 initials: "U4",
                                 displayName: 'User4',
-                                icon: { name: 'print', color: 'yellow' },
+                                icon: { name: 'print', color: 'var(--sd-colour-state--in-progress)' },
                             },
                             {
                                 imageUrl: 'avatar-4.jpg',
                                 initials: "U5",
                                 displayName: 'User5',
-                                icon: { name: 'print', color: 'orange' },
+                                icon: { name: 'print', color: 'var(--sd-colour-highlight)' },
                             },
                             {
                                 imageUrl: null,
                                 initials: "U6",
                                 displayName: 'User6',
-                                icon: { name: 'print', color: 'lime' },
+                                icon: { name: 'print', color: 'var(--sd-colour-state--in-progress)' },
                             },
                         ];
                         return (React.createElement(React.Fragment, null,
@@ -171248,7 +171275,7 @@ var AvatarDoc = /** @class */ (function (_super) {
                             React.createElement(app_typescript_1.AvatarGroup, { size: "xx-large", items: avatars }),
                             React.createElement("br", null)));
                     })()),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        // Various sizes\n\n                        <AvatarGroup\n                            size=\"x-small\"\n                            items={avatars}\n                        />\n\n                        <br />\n\n                        <AvatarGroup\n                            size=\"small\"\n                            items={avatars}\n                        />\n\n                        <br />\n\n                        <AvatarGroup\n                            size=\"medium\"\n                            items={avatars}\n                        />\n\n                        <br />\n\n                        <AvatarGroup\n                            size=\"large\"\n                            items={avatars}\n                            max={4}\n                        />\n\n                        <br />\n\n                        <AvatarGroup\n                            size=\"x-large\"\n                            items={avatars}\n                        />\n\n                        <AvatarGroup\n                            size=\"xx-large\"\n                            items={avatars}\n                        />\n\n                        // With icons\n\n                        {(() => {\n                            const avatars: Array<IAvatarInGroup> = [\n                                {\n                                    imageUrl: 'avatar.jpg',\n                                    initials: \"JL\",\n                                    displayName: null,\n                                    icon:{name: 'print', color: 'red'},\n                                },\n                                {\n                                    imageUrl: null,\n                                    initials: \"AB\",\n                                    displayName: null,\n                                    icon:{name: 'print', color: 'green'},\n                                },\n                                {\n                                    imageUrl: null,\n                                    initials: \"FG\",\n                                    displayName: null,\n                                    icon:{name: 'print', color: 'blue'},\n                                },\n                                {\n                                    imageUrl: 'avatar-3.jpg',\n                                    initials: \"JL\",\n                                    displayName: null,\n                                    icon:{name: 'print', color: 'yellow'},\n                                },\n                                {\n                                    imageUrl: 'avatar-4.jpg',\n                                    initials: \"JL\",\n                                    displayName: null,\n                                    icon:{name: 'print', color: 'orange'},\n                                },\n                                {\n                                    imageUrl: null,\n                                    initials: \"KU\",\n                                    displayName: null,\n                                    icon:{name: 'print', color: 'lime'},\n                                },\n                            ];\n\n                            return (\n                                <>\n                                    <AvatarGroup\n                                        size=\"x-small\"\n                                        items={avatars}\n                                    />\n\n                                    <br />\n\n                                    <AvatarGroup\n                                        size=\"small\"\n                                        items={avatars}\n                                    />\n\n                                    <br />\n\n                                    <AvatarGroup\n                                        size=\"medium\"\n                                        items={avatars}\n                                    />\n\n                                    <br />\n\n                                    <AvatarGroup\n                                        size=\"large\"\n                                        items={avatars}\n                                    />\n\n                                    <br />\n\n                                    <AvatarGroup\n                                        size=\"x-large\"\n                                        items={avatars}\n                                    />\n\n                                    <br />\n\n                                    <AvatarGroup\n                                        size=\"xx-large\"\n                                        items={avatars}\n                                    />\n\n                                    <br />\n                                </>\n                            );\n                        })()}\n                    "))));
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        // Various sizes\n\n                        <AvatarGroup\n                            size=\"x-small\"\n                            items={avatars}\n                        />\n\n                        <br />\n\n                        <AvatarGroup\n                            size=\"small\"\n                            items={avatars}\n                        />\n\n                        <br />\n\n                        <AvatarGroup\n                            size=\"medium\"\n                            items={avatars}\n                        />\n\n                        <br />\n\n                        <AvatarGroup\n                            size=\"large\"\n                            items={avatars}\n                            max={4}\n                        />\n\n                        <br />\n\n                        <AvatarGroup\n                            size=\"x-large\"\n                            items={avatars}\n                        />\n\n                        <AvatarGroup\n                            size=\"xx-large\"\n                            items={avatars}\n                        />\n\n                        // With icons\n\n                        {(() => {\n                            const avatars: Array<IAvatarInGroup> = [\n                                {\n                                    imageUrl: 'avatar.jpg',\n                                    initials: \"U1\",\n                                    displayName: 'User1',\n                                    icon:{name: 'print', color: 'red'},\n                                },\n                                {\n                                    imageUrl: null,\n                                    initials: \"U2\",\n                                    displayName: 'User2',\n                                    icon:{name: 'print', color: 'green'},\n                                },\n                                {\n                                    imageUrl: null,\n                                    initials: \"U3\",\n                                    displayName: 'User3',\n                                    icon:{name: 'print', color: 'var(--sd-colour-state--in-workflow)'},\n                                },\n                                {\n                                    imageUrl: 'avatar-3.jpg',\n                                    initials: \"U4\",\n                                    displayName: 'User4',\n                                    icon:{name: 'print', color: 'var(--sd-colour-state--in-progress)'},\n                                },\n                                {\n                                    imageUrl: 'avatar-4.jpg',\n                                    initials: \"U5\",\n                                    displayName: 'User5',\n                                    icon:{name: 'print', color: 'var(--sd-colour-highlight)'},\n                                },\n                                {\n                                    imageUrl: null,\n                                    initials: \"U6\",\n                                    displayName: 'User6',\n                                    icon:{name: 'print', color: 'var(--sd-colour-state--in-progress)'},\n                                },\n                            ];\n\n                            return (\n                                <>\n                                    <AvatarGroup\n                                        size=\"x-small\"\n                                        items={avatars}\n                                    />\n\n                                    <br />\n\n                                    <AvatarGroup\n                                        size=\"small\"\n                                        items={avatars}\n                                    />\n\n                                    <br />\n\n                                    <AvatarGroup\n                                        size=\"medium\"\n                                        items={avatars}\n                                    />\n\n                                    <br />\n\n                                    <AvatarGroup\n                                        size=\"large\"\n                                        items={avatars}\n                                    />\n\n                                    <br />\n\n                                    <AvatarGroup\n                                        size=\"x-large\"\n                                        items={avatars}\n                                    />\n\n                                    <br />\n\n                                    <AvatarGroup\n                                        size=\"xx-large\"\n                                        items={avatars}\n                                    />\n\n                                    <br />\n                                </>\n                            );\n                        })()}\n                    "))));
     };
     return AvatarDoc;
 }(React.PureComponent));
@@ -177563,7 +177590,7 @@ exports.TestGround = void 0;
 var React = __importStar(__webpack_require__(0));
 var Components = __importStar(__webpack_require__(55));
 var index_1 = __webpack_require__(5);
-var FormLabel_1 = __webpack_require__(73);
+var FormLabel_1 = __webpack_require__(74);
 var options2 = [
     {
         value: { name: 'A long category Category1' },
@@ -177629,29 +177656,37 @@ var TestGround = /** @class */ (function (_super) {
     TestGround.prototype.render = function () {
         var _this = this;
         var avatars = [
+            {
+                imageUrl: null,
+                initials: null,
+                displayName: 'Unassigned',
+                icon: { name: 'video', color: 'var(--sd-colour-state--default)' },
+                statusDot: { color: 'var(--sd-colour-coverage-state--not-covering)' }
+            },
+            {
+                imageUrl: null,
+                initials: null,
+                displayName: 'Unassigned',
+                icon: { name: 'file', color: 'var(--sd-colour-state--unassigned)' },
+                statusDot: { color: 'var(--sd-colour-coverage-state--on-merit)' }
+            },
             {
                 imageUrl: null,
                 initials: "VS",
                 displayName: 'Vladimir Stefanovic',
-                icon: { name: 'text', color: 'var(--sd-colour-highlight)' },
+                icon: { name: 'text', color: 'var(--sd-colour-state--in-progress)' },
             },
             {
                 imageUrl: null,
                 initials: "JL",
                 displayName: 'Jeffrey Lebowski',
-                icon: { name: 'photo', color: 'var(--sd-colour-highlight)' }
+                icon: { name: 'photo', color: 'var(--sd-colour-state--in-workflow)' }
             },
             {
                 imageUrl: null,
                 initials: "WS",
                 displayName: 'Walter Sobchak',
-                icon: { name: 'video', color: 'var(--sd-colour-highlight)' }
-            },
-            {
-                imageUrl: null,
-                initials: "ML",
-                displayName: 'Maude Lebowski',
-                icon: { name: 'file', color: 'var(--sd-colour-highlight)' }
+                icon: { name: 'text', color: 'var(--sd-colour-state--done)' },
             },
         ];
         var modalSaveEventFooterOne = (React.createElement(index_1.ButtonGroup, { align: "end" },
@@ -177669,6 +177704,8 @@ var TestGround = /** @class */ (function (_super) {
                     React.createElement(index_1.ButtonGroup, { align: 'end' },
                         React.createElement(index_1.IconButton, { icon: "adjust", ariaValue: "Toggle theme", onClick: this.toggleTheme, toolTipFlow: 'left' })),
                     React.createElement("hr", null),
+                    React.createElement(index_1.Avatar, { displayName: "Jeffrey Lebowski", imageUrl: null, initials: 'JL', size: "small", statusDot: { color: 'var(--sd-colour-coverage-state--on-merit)' }, icon: { name: 'text' } }),
+                    React.createElement("hr", null),
                     React.createElement("div", { style: { maxWidth: '600px' }, className: "sd-shadow--z1 new-collapse-box ".concat(this.state.openCollapsibleOne ? 'new-collapse-box--open' : '') },
                         React.createElement("div", { className: 'new-collapse-box__header' },
                             React.createElement("div", { className: 'new-collapse-box__header-inner' },
@@ -178847,7 +178884,7 @@ var React = __importStar(__webpack_require__(0));
 var index_1 = __webpack_require__(5);
 var Layout = __importStar(__webpack_require__(17));
 var Form = __importStar(__webpack_require__(14));
-var Nav = __importStar(__webpack_require__(74));
+var Nav = __importStar(__webpack_require__(75));
 var Lists_1 = __webpack_require__(117);
 var Lists_2 = __webpack_require__(117);
 var EditorTest = /** @class */ (function (_super) {
@@ -179119,7 +179156,7 @@ var React = __importStar(__webpack_require__(0));
 var index_1 = __webpack_require__(5);
 var Layout = __importStar(__webpack_require__(17));
 var Form = __importStar(__webpack_require__(14));
-var Nav = __importStar(__webpack_require__(74));
+var Nav = __importStar(__webpack_require__(75));
 var Lists_1 = __webpack_require__(117);
 var common_1 = __webpack_require__(115);
 var Multiedit = /** @class */ (function (_super) {
@@ -179675,7 +179712,7 @@ var index_1 = __webpack_require__(5);
 var Layout = __importStar(__webpack_require__(17));
 var Form = __importStar(__webpack_require__(14));
 var RundownEditor_1 = __webpack_require__(792);
-var Nav = __importStar(__webpack_require__(74));
+var Nav = __importStar(__webpack_require__(75));
 var ContentList_1 = __webpack_require__(118);
 var TableList_1 = __webpack_require__(113);
 var Rundowns = /** @class */ (function (_super) {
@@ -180239,7 +180276,7 @@ var React = __importStar(__webpack_require__(0));
 var index_1 = __webpack_require__(5);
 var Layout = __importStar(__webpack_require__(17));
 var Form = __importStar(__webpack_require__(14));
-var Nav = __importStar(__webpack_require__(74));
+var Nav = __importStar(__webpack_require__(75));
 var BottomNav_1 = __webpack_require__(380);
 var lodash_1 = __webpack_require__(21);
 var RundownEditor_1 = __webpack_require__(792);
@@ -185158,7 +185195,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
 /* 934 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.1.13","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.1.15","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3"}}
 
 /***/ }),
 /* 935 */