superdesk-ui-framework 3.0.1-beta.14 → 3.0.1-beta.15

package/dist/examples.bundle.js

@@ -5769,7 +5769,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
 
 })));
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(49)(module)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(50)(module)))
 
 /***/ }),
 /* 2 */
@@ -5860,7 +5860,7 @@ exports.TableListItem = exports.TableList = exports.TreeSelect = exports.BottomN
 exports.ContentListItem = void 0;
 var HelloWorld_1 = __webpack_require__(277);
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
-var Button_1 = __webpack_require__(51);
+var Button_1 = __webpack_require__(52);
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
 var Input_1 = __webpack_require__(278);
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
@@ -5891,15 +5891,15 @@ var IconLabel_1 = __webpack_require__(306);
 Object.defineProperty(exports, "IconLabel", { enumerable: true, get: function () { return IconLabel_1.IconLabel; } });
 var Tooltip_1 = __webpack_require__(36);
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
-var DurationInput_1 = __webpack_require__(56);
+var DurationInput_1 = __webpack_require__(75);
 Object.defineProperty(exports, "DurationInput", { enumerable: true, get: function () { return DurationInput_1.DurationInput; } });
-var DurationInput_2 = __webpack_require__(56);
+var DurationInput_2 = __webpack_require__(75);
 Object.defineProperty(exports, "getDurationString", { enumerable: true, get: function () { return DurationInput_2.getDurationString; } });
-var DatePicker_1 = __webpack_require__(57);
+var DatePicker_1 = __webpack_require__(56);
 Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
-var DatePicker_2 = __webpack_require__(57);
+var DatePicker_2 = __webpack_require__(56);
 Object.defineProperty(exports, "DatePickerISO", { enumerable: true, get: function () { return DatePicker_2.DatePickerISO; } });
-var DatePicker_3 = __webpack_require__(57);
+var DatePicker_3 = __webpack_require__(56);
 Object.defineProperty(exports, "DatePickerLocaleSettings", { enumerable: true, get: function () { return DatePicker_3.DatePickerLocaleSettings; } });
 var TimePicker_1 = __webpack_require__(264);
 Object.defineProperty(exports, "TimePicker", { enumerable: true, get: function () { return TimePicker_1.TimePicker; } });
@@ -5911,7 +5911,7 @@ var SwitchGroup_1 = __webpack_require__(339);
 Object.defineProperty(exports, "SwitchGroup", { enumerable: true, get: function () { return SwitchGroup_1.SwitchGroup; } });
 var ButtonGroup_1 = __webpack_require__(340);
 Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return ButtonGroup_1.ButtonGroup; } });
-var Loader_1 = __webpack_require__(60);
+var Loader_1 = __webpack_require__(59);
 Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return Loader_1.Loader; } });
 var RadioGroup_1 = __webpack_require__(341);
 Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return RadioGroup_1.RadioGroup; } });
@@ -5983,7 +5983,7 @@ var TagInputTest_1 = __webpack_require__(417);
 Object.defineProperty(exports, "TagInputTest", { enumerable: true, get: function () { return TagInputTest_1.TagInputTest; } });
 var GridList_1 = __webpack_require__(418);
 Object.defineProperty(exports, "GridList", { enumerable: true, get: function () { return GridList_1.GridList; } });
-var GridItem_1 = __webpack_require__(72);
+var GridItem_1 = __webpack_require__(71);
 Object.defineProperty(exports, "GridItem", { enumerable: true, get: function () { return GridItem_1.GridItem; } });
 Object.defineProperty(exports, "GridItemContent", { enumerable: true, get: function () { return GridItem_1.GridItemContent; } });
 Object.defineProperty(exports, "GridItemMedia", { enumerable: true, get: function () { return GridItem_1.GridItemMedia; } });
@@ -6025,7 +6025,7 @@ var Skeleton_1 = __webpack_require__(246);
 Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return Skeleton_1.Skeleton; } });
 var ListItemLoader_1 = __webpack_require__(479);
 Object.defineProperty(exports, "ListItemLoader", { enumerable: true, get: function () { return ListItemLoader_1.ListItemLoader; } });
-var Spinner_1 = __webpack_require__(52);
+var Spinner_1 = __webpack_require__(53);
 Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });
 Object.defineProperty(exports, "LoadingOverlay", { enumerable: true, get: function () { return Spinner_1.LoadingOverlay; } });
 var Text_1 = __webpack_require__(480);
@@ -7672,7 +7672,7 @@ var FormItem_1 = __webpack_require__(281);
 Object.defineProperty(exports, "FormItem", { enumerable: true, get: function () { return FormItem_1.FormItem; } });
 var FormText_1 = __webpack_require__(282);
 Object.defineProperty(exports, "FormText", { enumerable: true, get: function () { return FormText_1.FormText; } });
-var FormLabel_1 = __webpack_require__(53);
+var FormLabel_1 = __webpack_require__(49);
 Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return FormLabel_1.FormLabel; } });
 var InputWrapper_1 = __webpack_require__(283);
 Object.defineProperty(exports, "InputWrapper", { enumerable: true, get: function () { return InputWrapper_1.InputWrapper; } });
@@ -26208,7 +26208,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
   }
 }.call(this));
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35), __webpack_require__(49)(module)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35), __webpack_require__(50)(module)))
 
 /***/ }),
 /* 34 */
@@ -38021,6 +38021,75 @@ if (process.env.NODE_ENV === 'production') {
 
 /***/ }),
 /* 49 */
+/***/ (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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.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.FormLabel = void 0;
+var React = __importStar(__webpack_require__(0));
+var classnames_1 = __importDefault(__webpack_require__(2));
+var FormLabel = /** @class */ (function (_super) {
+    __extends(FormLabel, _super);
+    function FormLabel() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FormLabel.prototype.render = function () {
+        var _a;
+        var classes = (0, classnames_1.default)('form-label', (_a = {
+                'form-label--light': this.props.style === 'light',
+                'form-label--boxed': this.props.style === 'boxed',
+                'form-label--required': this.props.required,
+                'form-label--invalid': this.props.invalid
+            },
+            _a["form-label--".concat(this.props.state)] = this.props.state !== 'default' && this.props.state !== undefined,
+            _a));
+        return (React.createElement("label", { htmlFor: this.props.forId, className: classes }, this.props.text));
+    };
+    return FormLabel;
+}(React.PureComponent));
+exports.FormLabel = FormLabel;
+
+
+/***/ }),
+/* 50 */
 /***/ (function(module, exports) {
 
 module.exports = function(module) {
@@ -38048,7 +38117,7 @@ module.exports = function(module) {
 
 
 /***/ }),
-/* 50 */
+/* 51 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -38067,7 +38136,7 @@ module.exports = ReactPropTypesSecret;
 
 
 /***/ }),
-/* 51 */
+/* 52 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -38114,7 +38183,7 @@ exports.Button = void 0;
 var React = __importStar(__webpack_require__(0));
 var classnames_1 = __importDefault(__webpack_require__(2));
 var Icon_1 = __webpack_require__(7);
-var Spinner_1 = __webpack_require__(52);
+var Spinner_1 = __webpack_require__(53);
 var Button = /** @class */ (function (_super) {
     __extends(Button, _super);
     function Button() {
@@ -38145,7 +38214,7 @@ exports.Button = Button;
 
 
 /***/ }),
-/* 52 */
+/* 53 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -38222,69 +38291,6 @@ var Spinner = /** @class */ (function (_super) {
 exports.Spinner = Spinner;
 
 
-/***/ }),
-/* 53 */
-/***/ (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;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.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.FormLabel = void 0;
-var React = __importStar(__webpack_require__(0));
-var classnames_1 = __importDefault(__webpack_require__(2));
-var FormLabel = /** @class */ (function (_super) {
-    __extends(FormLabel, _super);
-    function FormLabel() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FormLabel.prototype.render = function () {
-        var classes = (0, classnames_1.default)('form-label', {
-            'form-label--light': this.props.style === 'light',
-        });
-        return (React.createElement("label", { htmlFor: this.props.forId, className: classes }, this.props.text));
-    };
-    return FormLabel;
-}(React.PureComponent));
-exports.FormLabel = FormLabel;
-
-
 /***/ }),
 /* 54 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -38950,366 +38956,6 @@ Transition.EXITING = EXITING;
 
 "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;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.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.getDurationString = exports.DurationInput = void 0;
-var React = __importStar(__webpack_require__(0));
-var classnames_1 = __importDefault(__webpack_require__(2));
-var moment_1 = __importDefault(__webpack_require__(1));
-var react_id_generator_1 = __importDefault(__webpack_require__(8));
-var Form_1 = __webpack_require__(14);
-var DurationInput = /** @class */ (function (_super) {
-    __extends(DurationInput, _super);
-    function DurationInput(props) {
-        var _this = _super.call(this, props) || this;
-        _this.htmlId = (0, react_id_generator_1.default)();
-        _this.state = {
-            hours: _this.stateUpdate('hours', _this.props.hours, _this.props.minutes, _this.props.seconds),
-            minutes: _this.stateUpdate('minutes', _this.props.minutes, _this.props.seconds),
-            seconds: _this.stateUpdate('seconds', _this.props.seconds),
-            blink: '',
-        };
-        _this.hourRef = React.createRef();
-        _this.minuteRef = React.createRef();
-        _this.secondRef = React.createRef();
-        _this.handleKeyDown = _this.handleKeyDown.bind(_this);
-        _this.zeroPad = _this.zeroPad.bind(_this);
-        _this.handleChange = _this.handleChange.bind(_this);
-        _this.handleFocusOnKeyUp = _this.handleFocusOnKeyUp.bind(_this);
-        _this.handleKeyValue = _this.handleKeyValue.bind(_this);
-        _this.valueUpdate = _this.valueUpdate.bind(_this);
-        _this.stateUpdate = _this.stateUpdate.bind(_this);
-        return _this;
-    }
-    DurationInput.prototype.stateUpdate = function (state, parametar1, parametar2, parametar3) {
-        var value;
-        if (state === 'hours') {
-            value = parametar1
-                ? parametar1 + Math.floor((parametar2 || 0) / 60) + Math.floor((parametar3 || 0) / 3600)
-                : Math.floor((parametar2 || 0) / 60) + Math.floor((parametar3 || 0) / 3600);
-        }
-        else if (state === 'minutes') {
-            value = parametar1
-                ? (parametar1 % 60) + Math.floor((parametar2 || 0) % 3600 / 60)
-                : Math.floor((parametar2 || 0) % 3600 / 60);
-        }
-        else {
-            value = parametar1 ? parametar1 % 60 : 0;
-        }
-        return this.zeroPad(value);
-    };
-    DurationInput.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _this = this;
-        if (!this.hourRef.current || !this.minuteRef.current || !this.secondRef.current) {
-            return;
-        }
-        if (this.state.hours !== prevState.hours) {
-            if (Number(this.hourRef.current.value) > 99) {
-                this.setState({
-                    hours: this.zeroPad(99),
-                });
-            }
-        }
-        if (this.state.minutes !== prevState.minutes) {
-            if (Number(this.minuteRef.current.value) > 59) {
-                this.setState({
-                    hours: this.zeroPad(Number(this.state.hours) + 1),
-                    minutes: this.zeroPad(this.state.minutes % 60),
-                });
-                this.setState({ blink: 'hour' });
-                setTimeout(function () {
-                    _this.setState({ blink: '' });
-                }, 500);
-            }
-            if (Number(this.minuteRef.current.value) < 0) {
-                this.setState({
-                    hours: this.zeroPad(Number(this.state.hours)) > 0
-                        ? this.zeroPad(Number(this.state.hours) - 1)
-                        : this.zeroPad(Number(this.state.hours)),
-                    minutes: 59,
-                });
-                this.setState({ blink: 'hour' });
-                setTimeout(function () {
-                    _this.setState({ blink: '' });
-                }, 500);
-            }
-        }
-        if (this.state.seconds !== prevState.seconds) {
-            if (Number(this.secondRef.current.value) > 59) {
-                this.setState({
-                    minutes: this.zeroPad(Number(this.state.minutes) + 1),
-                    seconds: this.zeroPad(this.state.seconds % 60),
-                });
-                this.setState({ blink: 'minute' });
-                setTimeout(function () {
-                    _this.setState({ blink: '' });
-                }, 500);
-            }
-            if (Number(this.secondRef.current.value) < 0) {
-                this.setState({
-                    minutes: this.zeroPad(Number(this.state.minutes) - 1),
-                    seconds: 59,
-                });
-                this.setState({ blink: 'minute' });
-                setTimeout(function () {
-                    _this.setState({ blink: '' });
-                }, 500);
-            }
-        }
-        if ((this.props.hours !== prevProps.hours)
-            || (this.props.minutes !== prevProps.minutes)
-            || (this.props.seconds !== prevProps.seconds)) {
-            this.setState({
-                hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
-                minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
-                seconds: this.stateUpdate('seconds', this.props.seconds),
-            });
-        }
-    };
-    DurationInput.prototype.valueUpdate = function () {
-        if (this.props.onChange) {
-            this.props.onChange(moment_1.default.duration("".concat(this.state.hours, ":").concat(this.state.minutes, ":").concat(this.state.seconds))
-                .asSeconds());
-        }
-    };
-    DurationInput.prototype.handleKeyDown = function (event) {
-        if (!(event.target instanceof HTMLInputElement)) {
-            return;
-        }
-        if (event.target.id === 'hours') {
-            if (event.key === 'ArrowRight') {
-                if (event.target.selectionEnd === event.target.value.length) {
-                    this.handleFocus(this.minuteRef.current, event.target.id);
-                }
-            }
-            if (event.key === 'ArrowLeft') {
-                if (event.target.selectionStart === 0) {
-                    this.handleFocus(this.secondRef.current, event.target.id);
-                }
-            }
-        }
-        if (event.target.id === 'minutes') {
-            if (event.key === 'ArrowRight') {
-                if (event.target.selectionEnd === event.target.value.length) {
-                    this.handleFocus(this.secondRef.current, event.target.id);
-                }
-            }
-            if (event.key === 'ArrowLeft') {
-                if (event.target.selectionStart === 0) {
-                    this.handleFocus(this.hourRef.current, event.target.id);
-                }
-            }
-        }
-        if (event.target.id === 'seconds') {
-            if (event.key === 'ArrowRight') {
-                if (event.target.selectionEnd === event.target.value.length) {
-                    this.handleFocus(this.hourRef.current, event.target.id);
-                }
-            }
-            if (event.key === 'ArrowLeft') {
-                if (event.target.selectionStart === 0) {
-                    this.handleFocus(this.minuteRef.current, event.target.id);
-                }
-            }
-        }
-        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-            this.handleKeyValue(event, event.target.id);
-            setTimeout(this.valueUpdate);
-        }
-        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
-            if (!this.state.hours || !this.state.minutes || !this.state.seconds) {
-                setTimeout(this.valueUpdate);
-            }
-        }
-    };
-    DurationInput.prototype.handleKeyValue = function (event, state) {
-        if (!(event.target instanceof HTMLInputElement)) {
-            return;
-        }
-        if (!this.state[state]) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        var stateClone = {};
-        if (event.key === 'ArrowUp') {
-            if (event.target.id === 'hours') {
-                stateClone[state] = this.state[state] < 99
-                    ? this.zeroPad(Number(this.state[state]) + 1)
-                    : this.zeroPad(99);
-            }
-            else {
-                stateClone[state] = this.zeroPad(Number(this.state[state]) + 1);
-            }
-        }
-        else if (event.key === 'ArrowDown') {
-            if (event.target.id === 'hours') {
-                stateClone[state] = this.state[state] > 0
-                    ? this.zeroPad(Number(this.state[state]) - 1)
-                    : this.zeroPad(0);
-            }
-            else {
-                stateClone[state] = this.zeroPad(Number(this.state[state]) - 1);
-            }
-        }
-        this.setState(stateClone);
-    };
-    DurationInput.prototype.zeroPad = function (value) {
-        if (value.toString().length === 1 || value === 0) {
-            return "0".concat(value);
-        }
-        else if (!value) {
-            return '00';
-        }
-        else {
-            return value;
-        }
-    };
-    DurationInput.prototype.handleChange = function (event, state) {
-        var stateClone = {};
-        if (event.target.value.length >= 2) {
-            if (event.target.selectionStart === 1 && event.target.selectionEnd === 1) {
-                stateClone[state] = event.target.value.slice(0, 1) + event.target.value.slice(2, 3);
-            }
-            else {
-                stateClone[state] = event.target.value.slice(0, 2);
-            }
-        }
-        else {
-            stateClone[state] = event.target.value;
-        }
-        this.setState(stateClone);
-        setTimeout(this.valueUpdate);
-    };
-    DurationInput.prototype.handleFocus = function (ref, state) {
-        ref === null || ref === void 0 ? void 0 : ref.focus();
-        setTimeout(function () {
-            ref === null || ref === void 0 ? void 0 : ref.setSelectionRange(0, 2);
-        });
-        var stateClone = {};
-        stateClone[state] = this.zeroPad(this.state[state]);
-        this.setState(stateClone);
-    };
-    DurationInput.prototype.handleFocusOnKeyUp = function (event, ref) {
-        if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft' && event.key !== 'ArrowUp' && event.key !== 'ArrowDown' && event.key !== 'Backspace') {
-            if ((event.keyCode > 46 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106)) {
-                var target = event.target;
-                if (target.value.length >= 2) {
-                    ref === null || ref === void 0 ? void 0 : ref.focus();
-                    setTimeout(function () {
-                        ref === null || ref === void 0 ? void 0 : ref.setSelectionRange(0, 2);
-                    });
-                }
-            }
-        }
-    };
-    DurationInput.prototype.render = function () {
-        var _this = this;
-        var InputClasses = (0, classnames_1.default)('sd-input__duration-input');
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.props.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
-            React.createElement("div", { className: InputClasses },
-                React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: 'text', id: 'hours', max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) { _this.handleChange(event, 'hours'); }, onBlur: function (event) { return _this.setState({ hours: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
-                        if (!/[0-9]/.test(event.key)) {
-                            event.preventDefault();
-                        }
-                    } }),
-                React.createElement("span", { className: 'sd-input__suffix' }, "h"),
-                React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'minute' ? 'blink_me' : ''), type: 'text', id: 'minutes', ref: this.minuteRef, value: this.state.minutes, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.secondRef.current); }, onChange: function (event) { _this.handleChange(event, 'minutes'); }, onBlur: function (event) { return _this.setState({ minutes: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
-                        if (!/[0-9]/.test(event.key)) {
-                            event.preventDefault();
-                        }
-                    } }),
-                React.createElement("span", { className: 'sd-input__suffix' }, "m"),
-                React.createElement("input", { className: 'duration-input', type: 'text', id: 'seconds', ref: this.secondRef, value: this.state.seconds, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.hourRef.current); }, onChange: function (event) { _this.handleChange(event, 'seconds'); }, onBlur: function (event) { return _this.setState({ seconds: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
-                        if (!/[0-9]/.test(event.key)) {
-                            event.preventDefault();
-                        }
-                    } }),
-                React.createElement("span", { className: 'sd-input__suffix' }, "s"))));
-    };
-    return DurationInput;
-}(React.PureComponent));
-exports.DurationInput = DurationInput;
-function getDurationString(seconds, zero) {
-    function zeroPad(value) {
-        if (value.toString().length === 1 || value === 0) {
-            return "0".concat(value);
-        }
-        else if (!value) {
-            return '00';
-        }
-        else {
-            return value;
-        }
-    }
-    var hour;
-    var minute;
-    var second;
-    if (zero) {
-        hour = zeroPad(Math.floor(seconds / 3600));
-        minute = zeroPad(Math.floor((seconds % 3600) / 60));
-        second = zeroPad(Math.floor(seconds % 60));
-    }
-    else {
-        hour = Math.floor(seconds / 3600);
-        minute = Math.floor((seconds % 3600) / 60);
-        second = Math.floor(seconds % 60);
-    }
-    if (Number(hour) === 0 && Number(minute) > 0) {
-        return "".concat(minute, "m ").concat(second, "s");
-    }
-    else if (Number(hour) === 0 && Number(minute) === 0) {
-        return "".concat(second, "s");
-    }
-    else {
-        return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
-    }
-}
-exports.getDurationString = getDurationString;
-
-
-/***/ }),
-/* 57 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -39495,7 +39141,7 @@ exports.DatePickerISO = DatePickerISO;
 
 
 /***/ }),
-/* 58 */
+/* 57 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39519,7 +39165,7 @@ function startOfUTCISOWeek(dirtyDate) {
 }
 
 /***/ }),
-/* 59 */
+/* 58 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39554,7 +39200,7 @@ function startOfUTCWeek(dirtyDate, dirtyOptions) {
 }
 
 /***/ }),
-/* 60 */
+/* 59 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -39615,7 +39261,7 @@ exports.Loader = Loader;
 
 
 /***/ }),
-/* 61 */
+/* 60 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39655,7 +39301,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "offset", function() { return __WEBPACK_IMPORTED_MODULE_1__modifiers_index_js__["g"]; });
 /* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "popperOffsets", function() { return __WEBPACK_IMPORTED_MODULE_1__modifiers_index_js__["h"]; });
 /* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "preventOverflow", function() { return __WEBPACK_IMPORTED_MODULE_1__modifiers_index_js__["i"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__createPopper_js__ = __webpack_require__(71);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__createPopper_js__ = __webpack_require__(70);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "popperGenerator", function() { return __WEBPACK_IMPORTED_MODULE_2__createPopper_js__["c"]; });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "detectOverflow", function() { return __WEBPACK_IMPORTED_MODULE_2__createPopper_js__["b"]; });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "createPopperBase", function() { return __WEBPACK_IMPORTED_MODULE_2__createPopper_js__["a"]; });
@@ -39673,7 +39319,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
 
 /***/ }),
-/* 62 */
+/* 61 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39765,7 +39411,7 @@ function effect(_ref2) {
 });
 
 /***/ }),
-/* 63 */
+/* 62 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39798,7 +39444,7 @@ function getLayoutRect(element) {
 }
 
 /***/ }),
-/* 64 */
+/* 63 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39808,7 +39454,7 @@ function getMainAxisFromPlacement(placement) {
 }
 
 /***/ }),
-/* 65 */
+/* 64 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -40005,7 +39651,7 @@ function computeStyles(_ref5) {
 /* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(4)))
 
 /***/ }),
-/* 66 */
+/* 65 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -40061,14 +39707,14 @@ function effect(_ref) {
 });
 
 /***/ }),
-/* 67 */
+/* 66 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getWindowScrollBarX;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getBoundingClientRect_js__ = __webpack_require__(37);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getDocumentElement_js__ = __webpack_require__(22);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getWindowScroll_js__ = __webpack_require__(68);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getWindowScroll_js__ = __webpack_require__(67);
 
 
 
@@ -40084,7 +39730,7 @@ function getWindowScrollBarX(element) {
 }
 
 /***/ }),
-/* 68 */
+/* 67 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -40102,7 +39748,7 @@ function getWindowScroll(node) {
 }
 
 /***/ }),
-/* 69 */
+/* 68 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -40120,7 +39766,7 @@ function isScrollParent(element) {
 }
 
 /***/ }),
-/* 70 */
+/* 69 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -40152,14 +39798,14 @@ function popperOffsets(_ref) {
 });
 
 /***/ }),
-/* 71 */
+/* 70 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* WEBPACK VAR INJECTION */(function(process) {/* harmony export (immutable) */ __webpack_exports__["c"] = popperGenerator;
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return createPopper; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__dom_utils_getCompositeRect_js__ = __webpack_require__(382);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__dom_utils_getLayoutRect_js__ = __webpack_require__(63);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__dom_utils_getLayoutRect_js__ = __webpack_require__(62);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__dom_utils_listScrollParents_js__ = __webpack_require__(235);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__dom_utils_getOffsetParent_js__ = __webpack_require__(38);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__dom_utils_getComputedStyle_js__ = __webpack_require__(34);
@@ -40435,7 +40081,7 @@ var createPopper = /*#__PURE__*/popperGenerator(); // eslint-disable-next-line i
 /* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(4)))
 
 /***/ }),
-/* 72 */
+/* 71 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -40657,7 +40303,7 @@ exports.default = GridItem;
 
 
 /***/ }),
-/* 73 */
+/* 72 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -40791,7 +40437,7 @@ function createSubscription(store, parentSub) {
 }
 
 /***/ }),
-/* 74 */
+/* 73 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -40810,7 +40456,7 @@ function createSubscription(store, parentSub) {
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? __WEBPACK_IMPORTED_MODULE_0_react__["useLayoutEffect"] : __WEBPACK_IMPORTED_MODULE_0_react__["useEffect"];
 
 /***/ }),
-/* 75 */
+/* 74 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -40833,6 +40479,361 @@ function invariant(condition, message) {
 
 /* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(4)))
 
+/***/ }),
+/* 75 */
+/***/ (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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.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.getDurationString = exports.DurationInput = void 0;
+var React = __importStar(__webpack_require__(0));
+var classnames_1 = __importDefault(__webpack_require__(2));
+var moment_1 = __importDefault(__webpack_require__(1));
+var react_id_generator_1 = __importDefault(__webpack_require__(8));
+var Form_1 = __webpack_require__(14);
+var DurationInput = /** @class */ (function (_super) {
+    __extends(DurationInput, _super);
+    function DurationInput(props) {
+        var _this = _super.call(this, props) || this;
+        _this.htmlId = (0, react_id_generator_1.default)();
+        _this.state = {
+            hours: _this.stateUpdate('hours', _this.props.hours, _this.props.minutes, _this.props.seconds),
+            minutes: _this.stateUpdate('minutes', _this.props.minutes, _this.props.seconds),
+            seconds: _this.stateUpdate('seconds', _this.props.seconds),
+            blink: '',
+        };
+        _this.hourRef = React.createRef();
+        _this.minuteRef = React.createRef();
+        _this.secondRef = React.createRef();
+        _this.handleKeyDown = _this.handleKeyDown.bind(_this);
+        _this.zeroPad = _this.zeroPad.bind(_this);
+        _this.handleChange = _this.handleChange.bind(_this);
+        _this.handleFocusOnKeyUp = _this.handleFocusOnKeyUp.bind(_this);
+        _this.handleKeyValue = _this.handleKeyValue.bind(_this);
+        _this.valueUpdate = _this.valueUpdate.bind(_this);
+        _this.stateUpdate = _this.stateUpdate.bind(_this);
+        return _this;
+    }
+    DurationInput.prototype.stateUpdate = function (state, parametar1, parametar2, parametar3) {
+        var value;
+        if (state === 'hours') {
+            value = parametar1
+                ? parametar1 + Math.floor((parametar2 || 0) / 60) + Math.floor((parametar3 || 0) / 3600)
+                : Math.floor((parametar2 || 0) / 60) + Math.floor((parametar3 || 0) / 3600);
+        }
+        else if (state === 'minutes') {
+            value = parametar1
+                ? (parametar1 % 60) + Math.floor((parametar2 || 0) % 3600 / 60)
+                : Math.floor((parametar2 || 0) % 3600 / 60);
+        }
+        else {
+            value = parametar1 ? parametar1 % 60 : 0;
+        }
+        return this.zeroPad(value);
+    };
+    DurationInput.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _this = this;
+        if (!this.hourRef.current || !this.minuteRef.current || !this.secondRef.current) {
+            return;
+        }
+        if (this.state.hours !== prevState.hours) {
+            if (Number(this.hourRef.current.value) > 99) {
+                this.setState({
+                    hours: this.zeroPad(99),
+                });
+            }
+        }
+        if (this.state.minutes !== prevState.minutes) {
+            if (Number(this.minuteRef.current.value) > 59) {
+                this.setState({
+                    hours: this.zeroPad(Number(this.state.hours) + 1),
+                    minutes: this.zeroPad(this.state.minutes % 60),
+                });
+                this.setState({ blink: 'hour' });
+                setTimeout(function () {
+                    _this.setState({ blink: '' });
+                }, 500);
+            }
+            if (Number(this.minuteRef.current.value) < 0) {
+                this.setState({
+                    hours: this.zeroPad(Number(this.state.hours)) > 0
+                        ? this.zeroPad(Number(this.state.hours) - 1)
+                        : this.zeroPad(Number(this.state.hours)),
+                    minutes: 59,
+                });
+                this.setState({ blink: 'hour' });
+                setTimeout(function () {
+                    _this.setState({ blink: '' });
+                }, 500);
+            }
+        }
+        if (this.state.seconds !== prevState.seconds) {
+            if (Number(this.secondRef.current.value) > 59) {
+                this.setState({
+                    minutes: this.zeroPad(Number(this.state.minutes) + 1),
+                    seconds: this.zeroPad(this.state.seconds % 60),
+                });
+                this.setState({ blink: 'minute' });
+                setTimeout(function () {
+                    _this.setState({ blink: '' });
+                }, 500);
+            }
+            if (Number(this.secondRef.current.value) < 0) {
+                this.setState({
+                    minutes: this.zeroPad(Number(this.state.minutes) - 1),
+                    seconds: 59,
+                });
+                this.setState({ blink: 'minute' });
+                setTimeout(function () {
+                    _this.setState({ blink: '' });
+                }, 500);
+            }
+        }
+        if ((this.props.hours !== prevProps.hours)
+            || (this.props.minutes !== prevProps.minutes)
+            || (this.props.seconds !== prevProps.seconds)) {
+            this.setState({
+                hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
+                minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
+                seconds: this.stateUpdate('seconds', this.props.seconds),
+            });
+        }
+    };
+    DurationInput.prototype.valueUpdate = function () {
+        if (this.props.onChange) {
+            this.props.onChange(moment_1.default.duration("".concat(this.state.hours, ":").concat(this.state.minutes, ":").concat(this.state.seconds))
+                .asSeconds());
+        }
+    };
+    DurationInput.prototype.handleKeyDown = function (event) {
+        if (!(event.target instanceof HTMLInputElement)) {
+            return;
+        }
+        if (event.target.id === 'hours') {
+            if (event.key === 'ArrowRight') {
+                if (event.target.selectionEnd === event.target.value.length) {
+                    this.handleFocus(this.minuteRef.current, event.target.id);
+                }
+            }
+            if (event.key === 'ArrowLeft') {
+                if (event.target.selectionStart === 0) {
+                    this.handleFocus(this.secondRef.current, event.target.id);
+                }
+            }
+        }
+        if (event.target.id === 'minutes') {
+            if (event.key === 'ArrowRight') {
+                if (event.target.selectionEnd === event.target.value.length) {
+                    this.handleFocus(this.secondRef.current, event.target.id);
+                }
+            }
+            if (event.key === 'ArrowLeft') {
+                if (event.target.selectionStart === 0) {
+                    this.handleFocus(this.hourRef.current, event.target.id);
+                }
+            }
+        }
+        if (event.target.id === 'seconds') {
+            if (event.key === 'ArrowRight') {
+                if (event.target.selectionEnd === event.target.value.length) {
+                    this.handleFocus(this.hourRef.current, event.target.id);
+                }
+            }
+            if (event.key === 'ArrowLeft') {
+                if (event.target.selectionStart === 0) {
+                    this.handleFocus(this.minuteRef.current, event.target.id);
+                }
+            }
+        }
+        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+            this.handleKeyValue(event, event.target.id);
+            setTimeout(this.valueUpdate);
+        }
+        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+            if (!this.state.hours || !this.state.minutes || !this.state.seconds) {
+                setTimeout(this.valueUpdate);
+            }
+        }
+    };
+    DurationInput.prototype.handleKeyValue = function (event, state) {
+        if (!(event.target instanceof HTMLInputElement)) {
+            return;
+        }
+        if (!this.state[state]) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        var stateClone = {};
+        if (event.key === 'ArrowUp') {
+            if (event.target.id === 'hours') {
+                stateClone[state] = this.state[state] < 99
+                    ? this.zeroPad(Number(this.state[state]) + 1)
+                    : this.zeroPad(99);
+            }
+            else {
+                stateClone[state] = this.zeroPad(Number(this.state[state]) + 1);
+            }
+        }
+        else if (event.key === 'ArrowDown') {
+            if (event.target.id === 'hours') {
+                stateClone[state] = this.state[state] > 0
+                    ? this.zeroPad(Number(this.state[state]) - 1)
+                    : this.zeroPad(0);
+            }
+            else {
+                stateClone[state] = this.zeroPad(Number(this.state[state]) - 1);
+            }
+        }
+        this.setState(stateClone);
+    };
+    DurationInput.prototype.zeroPad = function (value) {
+        if (value.toString().length === 1 || value === 0) {
+            return "0".concat(value);
+        }
+        else if (!value) {
+            return '00';
+        }
+        else {
+            return value;
+        }
+    };
+    DurationInput.prototype.handleChange = function (event, state) {
+        var stateClone = {};
+        if (event.target.value.length >= 2) {
+            if (event.target.selectionStart === 1 && event.target.selectionEnd === 1) {
+                stateClone[state] = event.target.value.slice(0, 1) + event.target.value.slice(2, 3);
+            }
+            else {
+                stateClone[state] = event.target.value.slice(0, 2);
+            }
+        }
+        else {
+            stateClone[state] = event.target.value;
+        }
+        this.setState(stateClone);
+        setTimeout(this.valueUpdate);
+    };
+    DurationInput.prototype.handleFocus = function (ref, state) {
+        ref === null || ref === void 0 ? void 0 : ref.focus();
+        setTimeout(function () {
+            ref === null || ref === void 0 ? void 0 : ref.setSelectionRange(0, 2);
+        });
+        var stateClone = {};
+        stateClone[state] = this.zeroPad(this.state[state]);
+        this.setState(stateClone);
+    };
+    DurationInput.prototype.handleFocusOnKeyUp = function (event, ref) {
+        if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft' && event.key !== 'ArrowUp' && event.key !== 'ArrowDown' && event.key !== 'Backspace') {
+            if ((event.keyCode > 46 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106)) {
+                var target = event.target;
+                if (target.value.length >= 2) {
+                    ref === null || ref === void 0 ? void 0 : ref.focus();
+                    setTimeout(function () {
+                        ref === null || ref === void 0 ? void 0 : ref.setSelectionRange(0, 2);
+                    });
+                }
+            }
+        }
+    };
+    DurationInput.prototype.render = function () {
+        var _this = this;
+        var InputClasses = (0, classnames_1.default)('sd-input__duration-input');
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.props.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+            React.createElement("div", { className: InputClasses },
+                React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: 'text', id: 'hours', max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) { _this.handleChange(event, 'hours'); }, onBlur: function (event) { return _this.setState({ hours: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
+                        if (!/[0-9]/.test(event.key)) {
+                            event.preventDefault();
+                        }
+                    } }),
+                React.createElement("span", { className: 'sd-input__suffix' }, "h"),
+                React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'minute' ? 'blink_me' : ''), type: 'text', id: 'minutes', ref: this.minuteRef, value: this.state.minutes, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.secondRef.current); }, onChange: function (event) { _this.handleChange(event, 'minutes'); }, onBlur: function (event) { return _this.setState({ minutes: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
+                        if (!/[0-9]/.test(event.key)) {
+                            event.preventDefault();
+                        }
+                    } }),
+                React.createElement("span", { className: 'sd-input__suffix' }, "m"),
+                React.createElement("input", { className: 'duration-input', type: 'text', id: 'seconds', ref: this.secondRef, value: this.state.seconds, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.hourRef.current); }, onChange: function (event) { _this.handleChange(event, 'seconds'); }, onBlur: function (event) { return _this.setState({ seconds: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
+                        if (!/[0-9]/.test(event.key)) {
+                            event.preventDefault();
+                        }
+                    } }),
+                React.createElement("span", { className: 'sd-input__suffix' }, "s"))));
+    };
+    return DurationInput;
+}(React.PureComponent));
+exports.DurationInput = DurationInput;
+function getDurationString(seconds, zero) {
+    function zeroPad(value) {
+        if (value.toString().length === 1 || value === 0) {
+            return "0".concat(value);
+        }
+        else if (!value) {
+            return '00';
+        }
+        else {
+            return value;
+        }
+    }
+    var hour = zeroPad(Math.floor(seconds / 3600));
+    var minute = zeroPad(Math.floor((seconds % 3600) / 60));
+    var second = zeroPad(Math.floor(seconds % 60));
+    if (zero) {
+        return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
+    }
+    else {
+        if (Number(hour) === 0 && Number(minute) > 0) {
+            return "".concat(minute, "m ").concat(second, "s");
+        }
+        else if (Number(hour) === 0 && Number(minute) === 0) {
+            return "".concat(second, "s");
+        }
+        else {
+            return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
+        }
+    }
+}
+exports.getDurationString = getDurationString;
+
+
 /***/ }),
 /* 76 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -41089,7 +41090,7 @@ var React = __importStar(__webpack_require__(0));
 var classnames_1 = __importDefault(__webpack_require__(2));
 var react_beautiful_dnd_1 = __webpack_require__(494);
 var Tooltip_1 = __webpack_require__(36);
-var Button_1 = __webpack_require__(51);
+var Button_1 = __webpack_require__(52);
 var Dropdown_1 = __webpack_require__(226);
 var reorder = function (list, startIndex, endIndex) {
     var result = Array.from(list);
@@ -56716,7 +56717,7 @@ function addLeadingZeros(number, targetLength) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getUTCISOWeekYear;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toDate_index_js__ = __webpack_require__(15);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(58);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(57);
 
  // 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
@@ -56754,7 +56755,7 @@ function getUTCISOWeekYear(dirtyDate) {
 /* harmony export (immutable) */ __webpack_exports__["a"] = getUTCWeekYear;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toInteger_index_js__ = __webpack_require__(27);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__toDate_index_js__ = __webpack_require__(15);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCWeek_index_js__ = __webpack_require__(59);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCWeek_index_js__ = __webpack_require__(58);
 
 
  // This function will be a part of public API when UTC function will be implemented.
@@ -57394,7 +57395,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
 var React = __importStar(__webpack_require__(0));
 var ReactDOM = __importStar(__webpack_require__(9));
-var core_1 = __webpack_require__(61);
+var core_1 = __webpack_require__(60);
 var react_id_generator_1 = __webpack_require__(8);
 var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
 var Dropdown = function (_a) {
@@ -57631,13 +57632,13 @@ var DropdownItemWithSubmenu = function (_a) {
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__applyStyles_js__ = __webpack_require__(62);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__applyStyles_js__ = __webpack_require__(61);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return __WEBPACK_IMPORTED_MODULE_0__applyStyles_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__arrow_js__ = __webpack_require__(228);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return __WEBPACK_IMPORTED_MODULE_1__arrow_js__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__computeStyles_js__ = __webpack_require__(65);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__computeStyles_js__ = __webpack_require__(64);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return __WEBPACK_IMPORTED_MODULE_2__computeStyles_js__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__eventListeners_js__ = __webpack_require__(66);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__eventListeners_js__ = __webpack_require__(65);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return __WEBPACK_IMPORTED_MODULE_3__eventListeners_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__flip_js__ = __webpack_require__(234);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return __WEBPACK_IMPORTED_MODULE_4__flip_js__["a"]; });
@@ -57645,7 +57646,7 @@ var DropdownItemWithSubmenu = function (_a) {
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return __WEBPACK_IMPORTED_MODULE_5__hide_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__offset_js__ = __webpack_require__(239);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return __WEBPACK_IMPORTED_MODULE_6__offset_js__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__popperOffsets_js__ = __webpack_require__(70);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__popperOffsets_js__ = __webpack_require__(69);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return __WEBPACK_IMPORTED_MODULE_7__popperOffsets_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__preventOverflow_js__ = __webpack_require__(240);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "i", function() { return __WEBPACK_IMPORTED_MODULE_8__preventOverflow_js__["a"]; });
@@ -57665,10 +57666,10 @@ var DropdownItemWithSubmenu = function (_a) {
 
 "use strict";
 /* WEBPACK VAR INJECTION */(function(process) {/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_getBasePlacement_js__ = __webpack_require__(21);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__dom_utils_getLayoutRect_js__ = __webpack_require__(63);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__dom_utils_getLayoutRect_js__ = __webpack_require__(62);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__dom_utils_contains_js__ = __webpack_require__(229);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__dom_utils_getOffsetParent_js__ = __webpack_require__(38);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_getMainAxisFromPlacement_js__ = __webpack_require__(64);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_getMainAxisFromPlacement_js__ = __webpack_require__(63);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__utils_within_js__ = __webpack_require__(230);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__utils_mergePaddingObject_js__ = __webpack_require__(231);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__utils_expandToHashMap_js__ = __webpack_require__(233);
@@ -58034,7 +58035,7 @@ function flip(_ref) {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getScrollParent_js__ = __webpack_require__(379);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getParentNode_js__ = __webpack_require__(46);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getWindow_js__ = __webpack_require__(19);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__isScrollParent_js__ = __webpack_require__(69);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__isScrollParent_js__ = __webpack_require__(68);
 
 
 
@@ -58085,7 +58086,7 @@ function rectToClientRect(rect) {
 /* harmony export (immutable) */ __webpack_exports__["a"] = computeOffsets;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getBasePlacement_js__ = __webpack_require__(21);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getVariation_js__ = __webpack_require__(39);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getMainAxisFromPlacement_js__ = __webpack_require__(64);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getMainAxisFromPlacement_js__ = __webpack_require__(63);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__enums_js__ = __webpack_require__(11);
 
 
@@ -58297,10 +58298,10 @@ function offset(_ref2) {
 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(11);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_getBasePlacement_js__ = __webpack_require__(21);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_getMainAxisFromPlacement_js__ = __webpack_require__(64);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_getMainAxisFromPlacement_js__ = __webpack_require__(63);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_getAltAxis_js__ = __webpack_require__(381);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_within_js__ = __webpack_require__(230);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__dom_utils_getLayoutRect_js__ = __webpack_require__(63);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__dom_utils_getLayoutRect_js__ = __webpack_require__(62);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__dom_utils_getOffsetParent_js__ = __webpack_require__(38);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__utils_detectOverflow_js__ = __webpack_require__(40);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__utils_getVariation_js__ = __webpack_require__(39);
@@ -58456,11 +58457,11 @@ function preventOverflow(_ref) {
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return createPopper; });
 /* unused harmony export defaultModifiers */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__createPopper_js__ = __webpack_require__(71);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__modifiers_eventListeners_js__ = __webpack_require__(66);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__modifiers_popperOffsets_js__ = __webpack_require__(70);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__modifiers_computeStyles_js__ = __webpack_require__(65);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__modifiers_applyStyles_js__ = __webpack_require__(62);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__createPopper_js__ = __webpack_require__(70);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__modifiers_eventListeners_js__ = __webpack_require__(65);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__modifiers_popperOffsets_js__ = __webpack_require__(69);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__modifiers_computeStyles_js__ = __webpack_require__(64);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__modifiers_applyStyles_js__ = __webpack_require__(61);
 /* unused harmony reexport popperGenerator */
 /* unused harmony reexport detectOverflow */
 
@@ -58532,7 +58533,7 @@ exports.SelectGrid = void 0;
 var React = __importStar(__webpack_require__(0));
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
 var overlaypanel_1 = __webpack_require__(429);
-var Loader_1 = __webpack_require__(60);
+var Loader_1 = __webpack_require__(59);
 var SelectGrid = /** @class */ (function (_super) {
     __extends(SelectGrid, _super);
     function SelectGrid(props) {
@@ -58739,7 +58740,7 @@ exports.PanelTools = exports.PanelHeaderSlidingToolbar = exports.PanelFooter = e
 var React = __importStar(__webpack_require__(0));
 var Icon_1 = __webpack_require__(7);
 var IconButton_1 = __webpack_require__(44);
-var Spinner_1 = __webpack_require__(52);
+var Spinner_1 = __webpack_require__(53);
 var classnames_1 = __importDefault(__webpack_require__(2));
 var Panel = /** @class */ (function (_super) {
     __extends(Panel, _super);
@@ -59066,8 +59067,8 @@ var getBatch = function getBatch() {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_react__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_react_is__ = __webpack_require__(501);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_react_is___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4_react_is__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__utils_Subscription__ = __webpack_require__(73);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__utils_useIsomorphicLayoutEffect__ = __webpack_require__(74);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__utils_Subscription__ = __webpack_require__(72);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__utils_useIsomorphicLayoutEffect__ = __webpack_require__(73);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__Context__ = __webpack_require__(30);
 
 
@@ -63255,11 +63256,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeSelect = void 0;
 var React = __importStar(__webpack_require__(0));
 var Icon_1 = __webpack_require__(7);
-var Loader_1 = __webpack_require__(60);
+var Loader_1 = __webpack_require__(59);
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
 var debounce_1 = __importDefault(__webpack_require__(483));
 var Form_1 = __webpack_require__(14);
-var core_1 = __webpack_require__(61);
+var core_1 = __webpack_require__(60);
 var lodash_1 = __webpack_require__(33);
 var TreeSelect = /** @class */ (function (_super) {
     __extends(TreeSelect, _super);
@@ -63734,7 +63735,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_tiny_warning__ = __webpack_require__(259);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__babel_runtime_helpers_esm_extends__ = __webpack_require__(24);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__babel_runtime_helpers_esm_objectWithoutPropertiesLoose__ = __webpack_require__(20);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8_tiny_invariant__ = __webpack_require__(75);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8_tiny_invariant__ = __webpack_require__(74);
 
 
 
@@ -64300,7 +64301,7 @@ exports.typeOf = typeOf;
 var ReactIs = __webpack_require__(48);
 var assign = __webpack_require__(274);
 
-var ReactPropTypesSecret = __webpack_require__(50);
+var ReactPropTypesSecret = __webpack_require__(51);
 var has = __webpack_require__(79);
 var checkPropTypes = __webpack_require__(275);
 
@@ -65015,7 +65016,7 @@ module.exports = shouldUseNative() ? Object.assign : function (target, source) {
 var printWarning = function() {};
 
 if (process.env.NODE_ENV !== 'production') {
-  var ReactPropTypesSecret = __webpack_require__(50);
+  var ReactPropTypesSecret = __webpack_require__(51);
   var loggedTypeFailures = {};
   var has = __webpack_require__(79);
 
@@ -65123,7 +65124,7 @@ module.exports = checkPropTypes;
 
 
 
-var ReactPropTypesSecret = __webpack_require__(50);
+var ReactPropTypesSecret = __webpack_require__(51);
 
 function emptyFunction() {}
 function emptyFunctionWithReset() {}
@@ -65631,103 +65632,107 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputWrapper = void 0;
-var React = __importStar(__webpack_require__(0));
-var classnames_1 = __importDefault(__webpack_require__(2));
-var InputWrapper = /** @class */ (function (_super) {
-    __extends(InputWrapper, _super);
-    function InputWrapper(props) {
-        var _a;
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            value: (_a = _this.props.value) !== null && _a !== void 0 ? _a : '',
-        };
-        return _this;
-    }
-    InputWrapper.prototype.render = function () {
-        var _a;
-        var _b;
-        var classes = (0, classnames_1.default)('sd-input', (_a = {
-                'sd-input--inline-label': this.props.inlineLabel,
-                'sd-input--required': this.props.required,
-                'sd-input--disabled': this.props.disabled,
-                'sd-input--full-width': this.props.fullWidth,
-                'sd-input--invalid': this.props.invalid,
-                'sd-input--medium': this.props.size === undefined
-            },
-            _a["sd-input--".concat(this.props.size)] = this.props.size || this.props.size !== undefined,
-            _a['sd-input--boxed-style'] = this.props.boxedStyle,
-            _a['sd-input--boxed-label'] = this.props.boxedLable,
-            _a));
-        var labelClasses = (0, classnames_1.default)('sd-input__label', {
-            'a11y-only': this.props.labelHidden,
-            'sd-input__label--boxed': this.props.boxedLable,
-        });
-        return (React.createElement("div", { className: classes },
-            React.createElement("label", { className: labelClasses, htmlFor: this.props.htmlId, id: this.props.htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
-            React.createElement("div", { className: "sd-input__input-container" }, this.props.children),
-            this.props.maxLength
-                ? React.createElement("div", { className: 'sd-input__char-count' }, (_b = this.props.value) === null || _b === void 0 ? void 0 :
-                    _b.toString().length,
-                    " / ",
-                    this.props.maxLength)
-                : null,
-            React.createElement("div", { className: 'sd-input__message-box' },
-                this.props.info && !this.props.invalid && !this.props.invalid
-                    ? React.createElement("div", { className: 'sd-input__hint' }, this.props.info)
-                    : null,
-                this.props.invalid || this.props.invalid
-                    ? React.createElement("div", { className: 'sd-input__message' }, this.props.error)
-                    : null)));
-    };
-    return InputWrapper;
-}(React.Component));
-exports.InputWrapper = InputWrapper;
-
-
-/***/ }),
-/* 284 */
-/***/ (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;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputWrapper = void 0;
+var React = __importStar(__webpack_require__(0));
+var classnames_1 = __importDefault(__webpack_require__(2));
+var InputWrapper = /** @class */ (function (_super) {
+    __extends(InputWrapper, _super);
+    function InputWrapper(props) {
+        var _a;
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            value: (_a = _this.props.value) !== null && _a !== void 0 ? _a : '',
+        };
+        return _this;
+    }
+    InputWrapper.prototype.render = function () {
+        var _a;
+        var _b;
+        var classes = (0, classnames_1.default)('sd-input', (_a = {
+                'sd-input--inline-label': this.props.inlineLabel,
+                'sd-input--required': this.props.required,
+                'sd-input--disabled': this.props.disabled,
+                'sd-input--full-width': this.props.fullWidth,
+                'sd-input--invalid': this.props.invalid,
+                'sd-input--medium': this.props.size === undefined
+            },
+            _a["sd-input--".concat(this.props.size)] = this.props.size || this.props.size !== undefined,
+            _a['sd-input--boxed-style'] = this.props.boxedStyle,
+            _a['sd-input--boxed-label'] = this.props.boxedLable,
+            _a));
+        var labelClasses = (0, classnames_1.default)('sd-input__label', {
+            'a11y-only': this.props.labelHidden,
+            'sd-input__label--boxed': this.props.boxedLable,
+        });
+        return (React.createElement("div", { className: classes },
+            React.createElement("label", { className: labelClasses, htmlFor: this.props.htmlId, id: this.props.htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
+            React.createElement("div", { className: "sd-input__input-container" }, this.props.children),
+            this.props.maxLength
+                ? React.createElement("div", { className: 'sd-input__char-count' }, (_b = this.props.value) === null || _b === void 0 ? void 0 :
+                    _b.toString().length,
+                    " / ",
+                    this.props.maxLength)
+                : null,
+            React.createElement("div", { className: 'sd-input__message-box' },
+                this.props.info && !this.props.invalid && !this.props.invalid
+                    ? React.createElement("div", { className: 'sd-input__hint' }, this.props.info)
+                    : null,
+                this.props.invalid || this.props.invalid
+                    ? React.createElement("div", { className: 'sd-input__message' }, this.props.error)
+                    : null)));
+    };
+    return InputWrapper;
+}(React.Component));
+exports.InputWrapper = InputWrapper;
+
+
+/***/ }),
+/* 284 */
+/***/ (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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.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.InputBase = void 0;
 var React = __importStar(__webpack_require__(0));
+var classnames_1 = __importDefault(__webpack_require__(2));
 var InputBase = /** @class */ (function (_super) {
     __extends(InputBase, _super);
     function InputBase(props) {
@@ -65757,7 +65762,17 @@ var InputBase = /** @class */ (function (_super) {
     };
     InputBase.prototype.render = function () {
         var _a;
-        return (React.createElement("input", { className: 'sd-input__input', type: (_a = this.props.type) !== null && _a !== void 0 ? _a : 'text', id: this.props.htmlId, value: this.state.value, "aria-describedby": this.props.htmlId + 'label', tabIndex: this.props.tabIndex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled }));
+        var _b;
+        var classes = (0, classnames_1.default)('sd-input__input', (_a = {
+                'sd-input__input--boxed-style': this.props.boxedStyle,
+                'sd-input__input--required': this.props.required,
+                'sd-input__input--invalid': this.props.invalid,
+                'sd-input__input--disabled': this.props.disabled,
+                'sd-input__input--medium': this.props.size === undefined
+            },
+            _a["sd-input__input--".concat(this.props.size)] = this.props.size || this.props.size !== undefined,
+            _a));
+        return (React.createElement("input", { className: classes, type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.props.htmlId, value: this.state.value, "aria-describedby": this.props.htmlId + 'label', tabIndex: this.props.tabIndex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled }));
     };
     return InputBase;
 }(React.Component));
@@ -71443,7 +71458,7 @@ function getUTCDayOfYear(dirtyDate) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getUTCISOWeek;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toDate_index_js__ = __webpack_require__(15);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(58);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(57);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCISOWeekYear_index_js__ = __webpack_require__(327);
 
 
@@ -71471,7 +71486,7 @@ function getUTCISOWeek(dirtyDate) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = startOfUTCISOWeekYear;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getUTCISOWeekYear_index_js__ = __webpack_require__(220);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(58);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(57);
 
  // 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
@@ -71496,7 +71511,7 @@ function startOfUTCISOWeekYear(dirtyDate) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getUTCWeek;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toDate_index_js__ = __webpack_require__(15);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCWeek_index_js__ = __webpack_require__(59);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCWeek_index_js__ = __webpack_require__(58);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCWeekYear_index_js__ = __webpack_require__(329);
 
 
@@ -71525,7 +71540,7 @@ function getUTCWeek(dirtyDate, options) {
 /* harmony export (immutable) */ __webpack_exports__["a"] = startOfUTCWeekYear;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toInteger_index_js__ = __webpack_require__(27);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getUTCWeekYear_index_js__ = __webpack_require__(221);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCWeek_index_js__ = __webpack_require__(59);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCWeek_index_js__ = __webpack_require__(58);
 
 
  // This function will be a part of public API when UTC function will be implemented.
@@ -75815,7 +75830,7 @@ exports.RadioButtonGroup = void 0;
 var React = __importStar(__webpack_require__(0));
 var classnames_1 = __importDefault(__webpack_require__(2));
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
-var FormLabel_1 = __webpack_require__(53);
+var FormLabel_1 = __webpack_require__(49);
 var RadioButtonGroup = /** @class */ (function (_super) {
     __extends(RadioButtonGroup, _super);
     function RadioButtonGroup(props) {
@@ -76050,7 +76065,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckButtonGroup = void 0;
 var React = __importStar(__webpack_require__(0));
 var classnames_1 = __importDefault(__webpack_require__(2));
-var FormLabel_1 = __webpack_require__(53);
+var FormLabel_1 = __webpack_require__(49);
 var CheckButtonGroup = /** @class */ (function (_super) {
     __extends(CheckButtonGroup, _super);
     function CheckButtonGroup() {
@@ -77311,7 +77326,7 @@ function getClippingRect(element, boundary, rootBoundary) {
 /* harmony export (immutable) */ __webpack_exports__["a"] = getViewportRect;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getWindow_js__ = __webpack_require__(19);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getDocumentElement_js__ = __webpack_require__(22);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getWindowScrollBarX_js__ = __webpack_require__(67);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getWindowScrollBarX_js__ = __webpack_require__(66);
 
 
 
@@ -77361,8 +77376,8 @@ function getViewportRect(element) {
 /* harmony export (immutable) */ __webpack_exports__["a"] = getDocumentRect;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getDocumentElement_js__ = __webpack_require__(22);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getComputedStyle_js__ = __webpack_require__(34);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getWindowScrollBarX_js__ = __webpack_require__(67);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__getWindowScroll_js__ = __webpack_require__(68);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getWindowScrollBarX_js__ = __webpack_require__(66);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__getWindowScroll_js__ = __webpack_require__(67);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_math_js__ = __webpack_require__(29);
 
 
@@ -77401,7 +77416,7 @@ function getDocumentRect(element) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getScrollParent;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getParentNode_js__ = __webpack_require__(46);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__isScrollParent_js__ = __webpack_require__(69);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__isScrollParent_js__ = __webpack_require__(68);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getNodeName_js__ = __webpack_require__(28);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__instanceOf_js__ = __webpack_require__(13);
 
@@ -77500,9 +77515,9 @@ function getAltAxis(axis) {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getNodeScroll_js__ = __webpack_require__(383);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getNodeName_js__ = __webpack_require__(28);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__instanceOf_js__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__getWindowScrollBarX_js__ = __webpack_require__(67);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__getWindowScrollBarX_js__ = __webpack_require__(66);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__getDocumentElement_js__ = __webpack_require__(22);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__isScrollParent_js__ = __webpack_require__(69);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__isScrollParent_js__ = __webpack_require__(68);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__utils_math_js__ = __webpack_require__(29);
 
 
@@ -77569,7 +77584,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getNodeScroll;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getWindowScroll_js__ = __webpack_require__(68);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getWindowScroll_js__ = __webpack_require__(67);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getWindow_js__ = __webpack_require__(19);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__instanceOf_js__ = __webpack_require__(13);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__getHTMLElementScroll_js__ = __webpack_require__(384);
@@ -77824,11 +77839,11 @@ function mergeByName(modifiers) {
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return createPopper; });
 /* unused harmony export defaultModifiers */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__createPopper_js__ = __webpack_require__(71);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__modifiers_eventListeners_js__ = __webpack_require__(66);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__modifiers_popperOffsets_js__ = __webpack_require__(70);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__modifiers_computeStyles_js__ = __webpack_require__(65);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__modifiers_applyStyles_js__ = __webpack_require__(62);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__createPopper_js__ = __webpack_require__(70);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__modifiers_eventListeners_js__ = __webpack_require__(65);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__modifiers_popperOffsets_js__ = __webpack_require__(69);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__modifiers_computeStyles_js__ = __webpack_require__(64);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__modifiers_applyStyles_js__ = __webpack_require__(61);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__modifiers_offset_js__ = __webpack_require__(239);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__modifiers_flip_js__ = __webpack_require__(234);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__modifiers_preventOverflow_js__ = __webpack_require__(240);
@@ -97382,7 +97397,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagInput = void 0;
 var React = __importStar(__webpack_require__(0));
 var classnames_1 = __importDefault(__webpack_require__(2));
-var core_1 = __webpack_require__(61);
+var core_1 = __webpack_require__(60);
 var lodash_1 = __webpack_require__(33);
 var TagInput = function (_a) {
     var items = _a.items, label = _a.label, freetype = _a.freetype;
@@ -98209,7 +98224,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TieredMenu = exports.LocationRetrieved = void 0;
+exports.TieredMenu = void 0;
 
 var _react = _interopRequireWildcard(__webpack_require__(0));
 
@@ -98235,8 +98250,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -98257,97 +98270,27 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-// interface IProps {
-//     children(args: {direction: 'left' | 'right'}): JSX.Element;
-// }
-// interface IState {
-//     direction: 'left' | 'right' | null;
-// }
-
-/**
- * Checks whether there is more space on the left or right,
- * in order to choose which direction submenus open to.
- */
-var LocationRetrieved = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(LocationRetrieved, _React$PureComponent);
-
-  var _super = _createSuper(LocationRetrieved);
-
-  // <IProps, IState>
-  function LocationRetrieved(props) {
-    var _this;
-
-    _classCallCheck(this, LocationRetrieved);
-
-    _this = _super.call(this, props);
-    _this.state = {
-      direction: null
-    };
-    _this.recompute = _this.recompute.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(LocationRetrieved, [{
-    key: "recompute",
-    value: function recompute(callback) {
-      // public, used in TieredMenu#show
-      this.setState({
-        direction: null
-      });
-      setTimeout(callback, 0);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      if (this.state.direction == null) {
-        return /*#__PURE__*/_react.default.createElement("span", {
-          ref: function ref(el) {
-            if (el != null) {
-              var rect = el.getBoundingClientRect();
-              var left = rect.left;
-              var availableSpaceH = document.body.offsetWidth;
-              var direction = left < availableSpaceH / 2 ? 'right' : 'left';
-
-              _this2.setState({
-                direction: direction
-              });
-            }
-          }
-        });
-      } else {
-        return this.props.children({
-          direction: this.state.direction
-        });
-      }
-    }
-  }]);
-
-  return LocationRetrieved;
-}(_react.default.PureComponent);
-
-exports.LocationRetrieved = LocationRetrieved;
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var TieredMenu = /*#__PURE__*/function (_Component) {
   _inherits(TieredMenu, _Component);
 
-  var _super2 = _createSuper(TieredMenu);
+  var _super = _createSuper(TieredMenu);
 
   function TieredMenu(props) {
-    var _this3;
+    var _this;
 
     _classCallCheck(this, TieredMenu);
 
-    _this3 = _super2.call(this, props);
-    _this3.state = {
+    _this = _super.call(this, props);
+    _this.state = {
       visible: !props.popup
     };
-    _this3.onEnter = _this3.onEnter.bind(_assertThisInitialized(_this3));
-    _this3.onEntered = _this3.onEntered.bind(_assertThisInitialized(_this3));
-    _this3.onExit = _this3.onExit.bind(_assertThisInitialized(_this3));
-    _this3.id = _this3.props.id || (0, _UniqueComponentId.default)();
-    return _this3;
+    _this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
+    _this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
+    _this.onExit = _this.onExit.bind(_assertThisInitialized(_this));
+    _this.id = _this.props.id || (0, _UniqueComponentId.default)();
+    return _this;
   }
 
   _createClass(TieredMenu, [{
@@ -98360,31 +98303,29 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "show",
     value: function show(event) {
-      var _this4 = this;
+      var _this2 = this;
 
       this.target = event.currentTarget;
       var currentEvent = event;
-      this.locator.recompute(function () {
-        _this4.setState({
-          visible: true
-        }, function () {
-          if (_this4.props.onShow) {
-            _this4.props.onShow(currentEvent);
-          }
-        });
+      this.setState({
+        visible: true
+      }, function () {
+        if (_this2.props.onShow) {
+          _this2.props.onShow(currentEvent);
+        }
       });
     }
   }, {
     key: "hide",
     value: function hide(event) {
-      var _this5 = this;
+      var _this3 = this;
 
       var currentEvent = event;
       this.setState({
         visible: false
       }, function () {
-        if (_this5.props.onHide) {
-          _this5.props.onHide(currentEvent);
+        if (_this3.props.onHide) {
+          _this3.props.onHide(currentEvent);
         }
       });
     }
@@ -98425,12 +98366,12 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "bindDocumentClickListener",
     value: function bindDocumentClickListener() {
-      var _this6 = this;
+      var _this4 = this;
 
       if (!this.documentClickListener) {
         this.documentClickListener = function (event) {
-          if (_this6.props.popup && _this6.state.visible && !_this6.container.contains(event.target)) {
-            _this6.hide(event);
+          if (_this4.props.popup && _this4.state.visible && !_this4.container.contains(event.target)) {
+            _this4.hide(event);
           }
         };
 
@@ -98448,12 +98389,12 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "bindDocumentResizeListener",
     value: function bindDocumentResizeListener() {
-      var _this7 = this;
+      var _this5 = this;
 
       if (!this.documentResizeListener) {
         this.documentResizeListener = function (event) {
-          if (_this7.state.visible) {
-            _this7.hide(event);
+          if (_this5.state.visible) {
+            _this5.hide(event);
           }
         };
 
@@ -98471,12 +98412,12 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "bindScrollListener",
     value: function bindScrollListener() {
-      var _this8 = this;
+      var _this6 = this;
 
       if (!this.scrollHandler) {
         this.scrollHandler = new _ConnectedOverlayScrollHandler.default(this.target, function (event) {
-          if (_this8.state.visible) {
-            _this8.hide(event);
+          if (_this6.state.visible) {
+            _this6.hide(event);
           }
         });
       }
@@ -98502,8 +98443,8 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "renderElement",
-    value: function renderElement(direction) {
-      var _this9 = this;
+    value: function renderElement() {
+      var _this7 = this;
 
       var className = (0, _ClassNames.classNames)('p-tieredmenu p-component', {
         'p-tieredmenu-overlay': this.props.popup
@@ -98521,7 +98462,7 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
         onExit: this.onExit
       }, /*#__PURE__*/_react.default.createElement("div", {
         ref: function ref(el) {
-          return _this9.container = el;
+          return _this7.container = el;
         },
         id: this.id,
         className: className,
@@ -98530,28 +98471,14 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react.default.createElement(_TieredMenuSub.TieredMenuSub, {
         model: this.props.model,
         root: true,
-        popup: this.props.popup,
-        direction: direction
+        popup: this.props.popup
       })));
     }
   }, {
     key: "render",
     value: function render() {
-      var _this10 = this;
-
-      return /*#__PURE__*/_react.default.createElement(LocationRetrieved, {
-        ref: function ref(instance) {
-          if (instance != null) {
-            _this10.locator = instance;
-          }
-        }
-      }, function (_ref) {
-        var direction = _ref.direction;
-
-        var element = _this10.renderElement(direction);
-
-        if (_this10.props.appendTo) return /*#__PURE__*/_reactDom.default.createPortal(element, _this10.props.appendTo);else return element;
-      });
+      var element = this.renderElement();
+      if (this.props.appendTo) return /*#__PURE__*/_reactDom.default.createPortal(element, this.props.appendTo);else return element;
     }
   }]);
 
@@ -98715,8 +98642,6 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
   }, {
     key: "onItemClick",
     value: function onItemClick(event, item) {
-      var _item$items$length, _item$items;
-
       if (item.disabled) {
         event.preventDefault();
         return;
@@ -98733,27 +98658,21 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
         });
       }
 
-      if (((_item$items$length = (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.length) !== null && _item$items$length !== void 0 ? _item$items$length : 0) > 0) {
-        if (this.state.activeItem && item === this.state.activeItem) {
-          this.setState({
-            activeItem: null
-          });
-        } else {
-          this.setState({
-            activeItem: item
-          });
+      if (this.props.root) {
+        if (item.items) {
+          if (this.state.activeItem && item === this.state.activeItem) {
+            this.setState({
+              activeItem: null
+            });
+          } else {
+            this.setState({
+              activeItem: item
+            });
+          }
         }
       }
 
-      var target = event.target;
-      var isKeyboardEvent = event.clientX === 0 && event.clientY === 0;
-
-      if (isKeyboardEvent) {
-        setTimeout(function () {
-          var el = target.parentElement.querySelectorAll('.p-submenu-list > .p-menuitem')[0].querySelector('button');
-          el.focus();
-        }, 0);
-      } else if (!item.items) {
+      if (!item.items) {
         this.onLeafClick();
       }
     }
@@ -98810,10 +98729,8 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
   }, {
     key: "onChildItemKeyDown",
     value: function onChildItemKeyDown(event, childListItem) {
-      var leftArrow = event.which === 37;
-      var escape = event.which === 27;
-
-      if (leftArrow || escape) {
+      //left
+      if (event.which === 37) {
         this.setState({
           activeItem: null
         });
@@ -98885,8 +98802,7 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
           onLeafClick: this.onLeafClick,
           popup: this.props.popup,
           onKeyDown: this.onChildItemKeyDown,
-          parentActive: item === this.state.activeItem,
-          direction: this.props.direction
+          parentActive: item === this.state.activeItem
         });
       }
 
@@ -98914,8 +98830,10 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
           return _this3.onItemMouseEnter(event, item);
         },
         role: "none"
-      }, /*#__PURE__*/_react.default.createElement("button", {
+      }, /*#__PURE__*/_react.default.createElement("a", {
+        href: item.url || '#',
         className: linkClassName,
+        target: item.target,
         role: "menuitem",
         "aria-haspopup": item.items != null,
         onClick: function onClick(event) {
@@ -98961,10 +98879,7 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
         },
         className: className,
         role: this.props.root ? 'menubar' : 'menu',
-        "aria-orientation": "horizontal",
-        style: {
-          left: this.props.direction === 'left' ? '-100%' : '100%'
-        }
+        "aria-orientation": "horizontal"
       }, submenu);
     }
   }]);
@@ -98991,8 +98906,7 @@ _defineProperty(TieredMenuSub, "propTypes", {
   popup: _propTypes.default.bool,
   onLeafClick: _propTypes.default.func,
   onKeyDown: _propTypes.default.func,
-  parentActive: _propTypes.default.bool,
-  direction: _propTypes.default.string
+  parentActive: _propTypes.default.bool
 });
 
 /***/ }),
@@ -99541,7 +99455,7 @@ exports.IconPicker = void 0;
 var React = __importStar(__webpack_require__(0));
 // @ts-ignore
 var iconFont = __importStar(__webpack_require__(265));
-var Button_1 = __webpack_require__(51);
+var Button_1 = __webpack_require__(52);
 var Icon_1 = __webpack_require__(7);
 var SelectGrid_1 = __webpack_require__(243);
 var IconPicker = /** @class */ (function (_super) {
@@ -113404,8 +113318,8 @@ Object(__WEBPACK_IMPORTED_MODULE_2__utils_batch__["b" /* setBatch */])(__WEBPACK
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types__ = __webpack_require__(5);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_prop_types__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Context__ = __webpack_require__(30);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_Subscription__ = __webpack_require__(73);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_useIsomorphicLayoutEffect__ = __webpack_require__(74);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_Subscription__ = __webpack_require__(72);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_useIsomorphicLayoutEffect__ = __webpack_require__(73);
 
 
 
@@ -114179,8 +114093,8 @@ var useDispatch = /*#__PURE__*/createDispatchHook();
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__useReduxContext__ = __webpack_require__(257);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_Subscription__ = __webpack_require__(73);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_useIsomorphicLayoutEffect__ = __webpack_require__(74);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_Subscription__ = __webpack_require__(72);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_useIsomorphicLayoutEffect__ = __webpack_require__(73);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__components_Context__ = __webpack_require__(30);
 
 
@@ -114424,7 +114338,7 @@ var useCallback = useCallbackOne;
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return offset; });
 /* unused harmony export shrink */
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return withScroll; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tiny_invariant__ = __webpack_require__(75);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tiny_invariant__ = __webpack_require__(74);
 
 
 var getRect = function getRect(_ref) {
@@ -114805,7 +114719,7 @@ exports.default = items;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_history__ = __webpack_require__(522);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_tiny_warning__ = __webpack_require__(259);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_mini_create_react_context__ = __webpack_require__(554);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_tiny_invariant__ = __webpack_require__(75);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_tiny_invariant__ = __webpack_require__(74);
 /* 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__(555);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8_path_to_regexp___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_8_path_to_regexp__);
@@ -115583,7 +115497,7 @@ if (process.env.NODE_ENV !== "production") {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_resolve_pathname__ = __webpack_require__(552);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_value_equal__ = __webpack_require__(553);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_tiny_warning__ = __webpack_require__(259);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_tiny_invariant__ = __webpack_require__(75);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_tiny_invariant__ = __webpack_require__(74);
 
 
 
@@ -116717,9 +116631,9 @@ var RundownEditor = /** @class */ (function (_super) {
                             { label: React.createElement(index_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' }), onSelect: function () { return 1; } },
                         ]; } }))),
             React.createElement(Layout.RightPanel, { open: this.state.rightPanelOpen },
-                React.createElement(Layout.Panel, { size: 'full', side: 'right' },
+                React.createElement(Layout.Panel, { size: 'x-large', side: 'right' },
                     React.createElement(Layout.PanelContent, null,
-                        React.createElement(Layout.AuthoringFrame, { main: React.createElement(Layout.AuthoringMain, { headerPadding: 'medium', toolbarCustom: true, toolBar: (React.createElement(React.Fragment, null,
+                        React.createElement(Layout.AuthoringFrame, { main: React.createElement(Layout.AuthoringMain, { headerPadding: 'medium', toolbarCustom: true, headerCollapsed: true, toolBar: (React.createElement(React.Fragment, null,
                                     React.createElement(index_1.SubNav, { className: 'sd-shadow--z0' },
                                         React.createElement(index_1.SlidingToolbar, null,
                                             React.createElement(index_1.ButtonGroup, { align: 'start' },
@@ -124744,7 +124658,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(__webpack_require__(0));
 var Markup = __importStar(__webpack_require__(6));
 var app_typescript_1 = __webpack_require__(3);
-var DurationInput_1 = __webpack_require__(56);
 var InputsDoc = /** @class */ (function (_super) {
     __extends(InputsDoc, _super);
     function InputsDoc(props) {
@@ -124789,25 +124702,21 @@ var InputsDoc = /** @class */ (function (_super) {
                         React.createElement("p", { className: "docs-page__paragraph" }, "// Hidden label"),
                         React.createElement("div", { className: 'form__row' },
                             React.createElement(app_typescript_1.Input, { label: 'Input label', value: '', maxLength: 25, type: 'text', placeholder: 'Placeholder', error: 'This is error message', info: 'Donec id elit non mi porta gravida at eget metus.', inlineLabel: true, labelHidden: true, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { return _this.setState({ value2: value }); } })),
+                        React.createElement("p", { className: "docs-page__paragraph" }, "// Boxed with hidden label"),
                         React.createElement("div", { className: 'form__row' },
-                            React.createElement(DurationInput_1.DurationInput, { onChange: function (e) {
-                                    console.log(e);
-                                } }),
-                            React.createElement("p", { className: "docs-page__paragraph" }, "// Boxed with hidden label"),
-                            React.createElement("div", { className: 'form__row' },
-                                React.createElement(app_typescript_1.Input, { label: 'Input label', value: '', boxedStyle: true, maxLength: 25, type: 'text', placeholder: 'Default boxed input', error: 'This is error message', inlineLabel: true, labelHidden: true, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { return _this.setState({ value2: value }); } })),
-                            React.createElement("div", { className: 'form__row' },
-                                React.createElement(app_typescript_1.Input, { label: 'Input label', value: '', boxedStyle: true, size: 'large', maxLength: 25, type: 'text', placeholder: 'Large boxed input', error: 'This is error message', inlineLabel: true, labelHidden: true, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { return _this.setState({ value2: value }); } })),
-                            React.createElement("div", { className: 'form__row' },
-                                React.createElement(app_typescript_1.Input, { label: 'Input label', value: '', boxedStyle: true, size: 'x-large', maxLength: 25, type: 'text', placeholder: 'Extra large boxed input', error: 'This is error message', inlineLabel: true, labelHidden: true, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { return _this.setState({ value2: value }); } })),
-                            React.createElement("p", { className: "docs-page__paragraph" }, "// Boxed with default label"),
-                            React.createElement("div", { className: 'form__row' },
-                                React.createElement(app_typescript_1.Input, { label: 'Input label', value: '', boxedStyle: true, size: 'large', maxLength: 25, placeholder: 'Placeholder', type: 'text', error: 'This is error message', required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { return _this.setState({ value2: value }); } })),
-                            React.createElement("p", { className: "docs-page__paragraph" }, "// Boxed with boxed label"),
-                            React.createElement("div", { className: 'form__row' },
-                                React.createElement(app_typescript_1.Input, { label: 'Input label', value: '', boxedStyle: true, boxedLable: true, size: 'large', maxLength: 25, placeholder: 'Placeholder', type: 'text', error: 'This is error message', required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { return _this.setState({ value2: value }); } })),
-                            React.createElement("div", { className: 'form__row' },
-                                React.createElement(app_typescript_1.Input, { label: 'Input label', value: '', boxedStyle: true, boxedLable: true, size: 'large', placeholder: 'Hide my label', labelHidden: true, type: 'text', error: 'This is error message', required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { return _this.setState({ value2: value }); } }))))),
+                            React.createElement(app_typescript_1.Input, { label: 'Input label', value: '', boxedStyle: true, maxLength: 25, type: 'text', placeholder: 'Default boxed input', error: 'This is error message', inlineLabel: true, labelHidden: true, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { return _this.setState({ value2: value }); } })),
+                        React.createElement("div", { className: 'form__row' },
+                            React.createElement(app_typescript_1.Input, { label: 'Input label', value: '', boxedStyle: true, size: 'large', maxLength: 25, type: 'text', placeholder: 'Large boxed input', error: 'This is error message', inlineLabel: true, labelHidden: true, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { return _this.setState({ value2: value }); } })),
+                        React.createElement("div", { className: 'form__row' },
+                            React.createElement(app_typescript_1.Input, { label: 'Input label', value: '', boxedStyle: true, size: 'x-large', maxLength: 25, type: 'text', placeholder: 'Extra large boxed input', error: 'This is error message', inlineLabel: true, labelHidden: true, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { return _this.setState({ value2: value }); } })),
+                        React.createElement("p", { className: "docs-page__paragraph" }, "// Boxed with default label"),
+                        React.createElement("div", { className: 'form__row' },
+                            React.createElement(app_typescript_1.Input, { label: 'Input label', value: '', boxedStyle: true, size: 'large', maxLength: 25, placeholder: 'Placeholder', type: 'text', error: 'This is error message', required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { return _this.setState({ value2: value }); } })),
+                        React.createElement("p", { className: "docs-page__paragraph" }, "// Boxed with boxed label"),
+                        React.createElement("div", { className: 'form__row' },
+                            React.createElement(app_typescript_1.Input, { label: 'Input label', value: '', boxedStyle: true, boxedLable: true, size: 'large', maxLength: 25, placeholder: 'Placeholder', type: 'text', error: 'This is error message', required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { return _this.setState({ value2: value }); } })),
+                        React.createElement("div", { className: 'form__row' },
+                            React.createElement(app_typescript_1.Input, { label: 'Input label', value: '', boxedStyle: true, boxedLable: true, size: 'large', placeholder: 'Hide my label', labelHidden: true, type: 'text', error: 'This is error message', required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { return _this.setState({ value2: value }); } })))),
                 React.createElement(Markup.ReactMarkupCode, null, "\n                        <Input label='Input label'\n                            value='This is some value'\n                            maxLength={30}\n                            error='This is error message'\n                            info='This is some hint message'\n                            inlineLabel={false}\n                            required={true}\n                            disabled={false}\n                            invalid={false}\n                            onChange={(value) => {}} />\n\n                        <Input label='Number Input'\n                            value={this.state.value}\n                            type='number'\n                            error='This is error message'\n                            info='Morbi leo risus porta ac consectetur ac.'\n                            inlineLabel={this.state.inlineLabel}\n                            required={this.state.required}\n                            disabled={this.state.disabled}\n                            invalid={this.state.invalid}\n                            tabindex={0}\n                            onChange={(value) => {}} />\n                        \n                        // Hidden label\n                        <Input label='Input label'\n                            value={''}\n                            maxLength={25}\n                            type='text'\n                            placeholder='Placeholder'\n                            error='This is error message'\n                            info='Donec id elit non mi porta gravida at eget metus.'\n                            inlineLabel={true}\n                            labelHidden={true}\n                            required={this.state.required}\n                            disabled={this.state.disabled}\n                            invalid={this.state.invalid}\n                            tabindex={0}\n                            onChange={(value) => {}} />\n\n                        // Boxed with hidden label\n                        <Input label='Input label'\n                            value={''}\n                            boxedStyle={true}\n                            maxLength={25}\n                            type='text'\n                            placeholder='Default boxed input'\n                            error='This is error message'\n                            inlineLabel={true}\n                            labelHidden={true}\n                            required={this.state.required}\n                            disabled={this.state.disabled}\n                            invalid={this.state.invalid}\n                            tabindex={0}\n                            onChange={(value) => {}} />\n\n                        <Input label='Input label'\n                            value={''}\n                            boxedStyle={true}\n                            size='large'\n                            maxLength={25}\n                            type='text'\n                            placeholder='Large boxed input'\n                            error='This is error message'\n                            inlineLabel={true}\n                            labelHidden={true}\n                            required={this.state.required}\n                            disabled={this.state.disabled}\n                            invalid={this.state.invalid}\n                            tabindex={0}\n                            onChange={(value) => {}} />\n\n                        <Input label='Input label'\n                            value={''}\n                            boxedStyle={true}\n                            size='x-large'\n                            maxLength={25}\n                            type='text'\n                            placeholder='Extra large boxed input'\n                            error='This is error message'\n                            inlineLabel={true}\n                            labelHidden={true}\n                            required={this.state.required}\n                            disabled={this.state.disabled}\n                            invalid={this.state.invalid}\n                            tabindex={0}\n                            onChange={(value) => {}} />\n\n                        // Boxed with default label\n                        <Input label='Input label'\n                            value={''}\n                            boxedStyle={true}\n                            size='large'\n                            maxLength={25}\n                            placeholder='Placeholder'\n                            type='text'\n                            error='This is error message'\n                            required={this.state.required}\n                            disabled={this.state.disabled}\n                            invalid={this.state.invalid}\n                            tabindex={0}\n                            onChange={(value) => {}} />\n                        \n                        // Boxed with boxed label\n                        <Input label='Input label'\n                            value={''}\n                            boxedStyle={true}\n                            boxedLable={true}\n                            size='large'\n                            maxLength={25}\n                            placeholder='Placeholder'\n                            type='text'\n                            error='This is error message'\n                            required={this.state.required}\n                            disabled={this.state.disabled}\n                            invalid={this.state.invalid}\n                            tabindex={0}\n                            onChange={(value) => {}} />\n                        \n                        <Input label='Input label'\n                            value={''}\n                            boxedStyle={true}\n                            boxedLable={true}\n                            size='large'\n                            placeholder='Hide my label'\n                            labelHidden={true}\n                            type='text'\n                            error='This is error message'\n                            required={this.state.required}\n                            disabled={this.state.disabled}\n                            invalid={this.state.invalid}\n                            tabindex={0}\n                            onChange={(value) => {}} />\n                    ")),
             React.createElement("h3", { className: 'docs-page__h3' }, "Props"),
             React.createElement(app_typescript_1.PropsList, null,
@@ -130673,7 +130582,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(__webpack_require__(0));
 var Markup = __importStar(__webpack_require__(6));
 var app_typescript_1 = __webpack_require__(3);
-var GridElements = __importStar(__webpack_require__(72));
+var GridElements = __importStar(__webpack_require__(71));
 var GridItemDoc = /** @class */ (function (_super) {
     __extends(GridItemDoc, _super);
     function GridItemDoc(props) {
@@ -131190,10 +131099,10 @@ var ContentDividerDoc = /** @class */ (function (_super) {
                 React.createElement(Markup.ReactMarkupCode, null, "\n                        // Basic\n\n                        <span>Option one</span>\n                        <ContentDivider orientation=\"vertical\" type=\"dotted\" />\n                        <span>Option two</span>\n                        <ContentDivider orientation=\"vertical\" type=\"dotted\" />\n                        <span>Option three</span>\n\n                        // With text\n\n                        <div>\n                            Cras justo odio, dapibus ac facilisis in, egestas eget quam...\n                        </div>\n\n                        <ContentDivider orientation=\"vertical\">\n                            or\n                        </ContentDivider>\n\n                        <div>\n                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et...\n                        </div>\n                    ")),
             React.createElement("h3", { className: "docs-page__h3" }, "Props"),
             React.createElement(app_typescript_1.PropsList, null,
-                React.createElement(app_typescript_1.Prop, { name: 'type', isRequered: false, type: 'dashed | dotted | solid', default: 'solid', description: 'Border style of the divider.' }),
-                React.createElement(app_typescript_1.Prop, { name: 'orientation', isRequered: false, type: 'horizontal | vertical', default: 'horizontal', description: 'Defines if the divider is horizontal or vertical. Default is horizontal.' }),
-                React.createElement(app_typescript_1.Prop, { name: 'align', isRequered: false, type: 'center | left | right', default: 'right', description: 'Text alignment inside the divider. Should not be used without any text inside the divider. The vertical divider has no alignment options.' }),
-                React.createElement(app_typescript_1.Prop, { name: 'border', isRequered: false, type: 'boolean', default: 'true', description: 'Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option.' }))));
+                React.createElement(app_typescript_1.Prop, { name: 'type', isRequired: false, type: 'dashed | dotted | solid', default: 'solid', description: 'Border style of the divider.' }),
+                React.createElement(app_typescript_1.Prop, { name: 'orientation', isRequired: false, type: 'horizontal | vertical', default: 'horizontal', description: 'Defines if the divider is horizontal or vertical. Default is horizontal.' }),
+                React.createElement(app_typescript_1.Prop, { name: 'align', isRequired: false, type: 'center | left | right', default: 'right', description: 'Text alignment inside the divider. Should not be used without any text inside the divider. The vertical divider has no alignment options.' }),
+                React.createElement(app_typescript_1.Prop, { name: 'border', isRequired: false, type: 'boolean', default: 'true', description: 'Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option.' }))));
     };
     return ContentDividerDoc;
 }(React.Component));
@@ -131251,6 +131160,7 @@ var ToggleboxDocs = function () {
             React.createElement(app_typescript_1.Prop, { name: 'hideUsingCSS', isRequired: false, type: 'boolean', default: 'false', description: 'Usefull when working with forms. Content of togglebox will be hidden but remain rendered.' }),
             React.createElement(app_typescript_1.Prop, { name: 'initiallyOpen', isRequired: false, type: 'boolean', default: 'false', description: 'Opens togglebox on initial render' }),
             React.createElement(app_typescript_1.Prop, { name: 'className', isRequired: false, type: 'string', default: 'null', description: 'Style class of the component' }),
+            React.createElement(app_typescript_1.Prop, { name: 'margin', isRequired: false, type: 'none | small | normal | large', default: 'normal', description: 'Defines the bottom margin of the toggle box.' }),
             React.createElement(app_typescript_1.Prop, { name: 'onOpen', isRequired: false, type: 'function', default: 'null', description: 'Callback on open event' }),
             React.createElement(app_typescript_1.Prop, { name: 'onClose', isRequired: false, type: 'function', default: 'null', description: 'Callback on close event' }))));
 };
@@ -132897,7 +132807,7 @@ exports.SamsPlayground = void 0;
 var React = __importStar(__webpack_require__(0));
 var Components = __importStar(__webpack_require__(47));
 var index_1 = __webpack_require__(3);
-var GridElements = __importStar(__webpack_require__(72));
+var GridElements = __importStar(__webpack_require__(71));
 var items_1 = __importDefault(__webpack_require__(519));
 var SamsPlayground = /** @class */ (function (_super) {
     __extends(SamsPlayground, _super);
@@ -133138,6 +133048,7 @@ exports.TestGround = void 0;
 var React = __importStar(__webpack_require__(0));
 var Components = __importStar(__webpack_require__(47));
 var index_1 = __webpack_require__(3);
+var FormLabel_1 = __webpack_require__(49);
 var TestGround = /** @class */ (function (_super) {
     __extends(TestGround, _super);
     function TestGround(props) {
@@ -133173,6 +133084,25 @@ var TestGround = /** @class */ (function (_super) {
         return (React.createElement(Components.Layout, { header: 'Testing Ground' },
             React.createElement(Components.LayoutContainer, null,
                 React.createElement(Components.MainPanel, null,
+                    React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0" }, "Form test"),
+                    React.createElement("hr", null),
+                    React.createElement("div", { className: "input-wrap" },
+                        React.createElement(FormLabel_1.FormLabel, { invalid: true, required: true, state: 'focused', text: "Form Label", forId: "input1" }),
+                        React.createElement(index_1.IconButton, { size: 'small', icon: "settings", ariaValue: "Screen-reader text", onClick: function () { return false; } }),
+                        React.createElement(index_1.InputBase, { placeholder: 'Test placeholder', boxedStyle: true, invalid: true, type: 'text', id: "input1", value: '', onChange: function (value) { } }),
+                        React.createElement("div", { className: "input-wrap__message-box" },
+                            React.createElement("div", { className: "sd-input__hint" }, "Error message")),
+                        React.createElement("span", { className: "sd-input__char-count" }, "0 / 40")),
+                    React.createElement("hr", null),
+                    React.createElement("div", { className: "input-wrap input-wrap--boxed" },
+                        React.createElement(FormLabel_1.FormLabel, { style: 'boxed', text: "Form Label", required: true, forId: "input2" }),
+                        React.createElement(index_1.IconButton, { size: 'small', icon: "settings", ariaValue: "Screen-reader text", onClick: function () { return false; } }),
+                        React.createElement(index_1.InputBase, { disabled: true, size: 'medium', placeholder: 'Test placeholder', boxedStyle: true, type: 'text', id: "input2", value: '', onChange: function (value) { } }),
+                        React.createElement("div", { className: "input-wrap__message-box" },
+                            React.createElement("div", { className: "sd-input__hint" }, "Error message")),
+                        React.createElement("span", { className: "sd-input__char-count" }, "0 / 40")),
+                    React.createElement("hr", null),
+                    React.createElement("hr", null),
                     React.createElement(index_1.InputNew, { label: 'test', value: '', onChange: function (value) { return false; }, placeholder: 'test', required: true, info: 'Nullam Sollicitudin', maxLength: 20, error: 'Error message', inlineLabel: true, labelHidden: true, type: 'text' }),
                     React.createElement("hr", null),
                     React.createElement("div", { className: 'form__group-new' },
@@ -133229,65 +133159,162 @@ var TestGround = /** @class */ (function (_super) {
                             } }),
                         React.createElement(index_1.Button, { text: "Save", type: 'primary', onClick: function () { return false; } })),
                     React.createElement("hr", null),
-                    React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0" }, "Table list"),
+                    React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0" }, "Table list (draggable)"),
                     React.createElement("hr", null),
-                    React.createElement("ul", { className: 'table-list' },
-                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable' },
+                    React.createElement("h4", { className: "docs-page__h4 sd-margin-y--1" }, "Handles visible"),
+                    React.createElement("ul", { className: 'table-list table-list--gap-s' },
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Uvod' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'prlg' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle visible. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Gost' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'prlg' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle visible. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always' },
+                            React.createElement("div", { style: { background: '#83cf7e', }, className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Podatak' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'Gost' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle visible. Mollis est non commodo luctus, nisi erat porttitor ligula.")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always table-list__item--selected' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Odjava' }),
+                                    React.createElement(index_1.Label, { type: 'warning', text: 'Slika' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle visible. Nullam id dolor id nibh ultricies vehicula ut id elit.")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } })))),
+                    React.createElement("hr", null),
+                    React.createElement("h4", { className: "docs-page__h4 sd-margin-y--1" }, "Handles hidden"),
+                    React.createElement("ul", { className: 'table-list table-list--gap-s' },
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Uvod' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'prlg' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle hidden. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Gost' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'prlg' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle hidden. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none' },
+                            React.createElement("div", { style: { background: '#83cf7e', }, className: 'table-list__item-border' }),
                             React.createElement("div", { className: 'table-list__item-content' },
                                 React.createElement("div", { className: 'table-list__item-content-block' },
-                                    React.createElement(index_1.Label, { style: 'translucent', text: 'aacc' }),
-                                    React.createElement(index_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' })),
+                                    React.createElement(index_1.Label, { text: 'Podatak' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'Gost' })),
                                 React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
-                                    React.createElement("span", null, "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.")),
+                                    React.createElement("span", null, "Handle hidden. Mollis est non commodo luctus, nisi erat porttitor ligula.")),
                                 React.createElement("div", { className: 'table-list__item-content-block' },
                                     React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
                             React.createElement("div", { className: 'table-list__slide-in-actions' },
                                 React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none table-list__item--selected' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Odjava' }),
+                                    React.createElement(index_1.Label, { type: 'warning', text: 'Slika' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle hidden. Nullam id dolor id nibh ultricies vehicula ut id elit.")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } })))),
+                    React.createElement("hr", null),
+                    React.createElement("h4", { className: "docs-page__h4 sd-margin-y--1" }, "Handles on hover"),
+                    React.createElement("ul", { className: 'table-list table-list--gap-s' },
                         React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
                             React.createElement("div", { className: 'table-list__item-content' },
                                 React.createElement("div", { className: 'table-list__item-content-block' },
-                                    React.createElement(index_1.Label, { style: 'translucent', type: 'warning', text: 'pokr' }),
-                                    React.createElement(index_1.Label, { style: 'translucent', text: 'slika' })),
+                                    React.createElement(index_1.Label, { text: 'Uvod' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'prlg' })),
                                 React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
-                                    React.createElement("span", null, "Nullam id dolor id nibh ultricies vehicula ut id elit.")),
+                                    React.createElement("span", null, "Handle on hover. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.")),
                                 React.createElement("div", { className: 'table-list__item-content-block' },
                                     React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
                             React.createElement("div", { className: 'table-list__slide-in-actions' },
                                 React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
-                        React.createElement("li", { className: 'table-list__item table-list__item--clickable' },
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
                             React.createElement("div", { className: 'table-list__item-content' },
                                 React.createElement("div", { className: 'table-list__item-content-block' },
-                                    React.createElement(index_1.Label, { style: 'translucent', type: 'warning', text: 'pokr' }),
-                                    React.createElement(index_1.Label, { style: 'translucent', text: 'slika' })),
+                                    React.createElement(index_1.Label, { text: 'Gost' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'prlg' })),
                                 React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
-                                    React.createElement("span", null, "Nullam id dolor id nibh ultricies vehicula ut id elit.")),
+                                    React.createElement("span", null, "Handle on hover. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..")),
                                 React.createElement("div", { className: 'table-list__item-content-block' },
                                     React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
                             React.createElement("div", { className: 'table-list__slide-in-actions' },
-                                React.createElement(index_1.IconButton, { icon: 'pencil', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }),
-                                React.createElement(index_1.IconButton, { icon: 'trash', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
-                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--selected' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable' },
+                            React.createElement("div", { style: { background: '#83cf7e', }, className: 'table-list__item-border' }),
                             React.createElement("div", { className: 'table-list__item-content' },
                                 React.createElement("div", { className: 'table-list__item-content-block' },
-                                    React.createElement(index_1.Label, { style: 'translucent', type: 'warning', text: 'pokr' }),
-                                    React.createElement(index_1.Label, { style: 'translucent', text: 'slika' })),
+                                    React.createElement(index_1.Label, { text: 'Podatak' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'Gost' })),
                                 React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
-                                    React.createElement("span", null, "Nullam id dolor id nibh ultricies vehicula ut id elit.")),
+                                    React.createElement("span", null, "Handle on hover. Mollis est non commodo luctus, nisi erat porttitor ligula.")),
                                 React.createElement("div", { className: 'table-list__item-content-block' },
                                     React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
                             React.createElement("div", { className: 'table-list__slide-in-actions' },
                                 React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
-                        React.createElement("li", { className: 'table-list__item table-list__item--clickable' },
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--selected' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
                             React.createElement("div", { className: 'table-list__item-content' },
                                 React.createElement("div", { className: 'table-list__item-content-block' },
-                                    React.createElement(index_1.Label, { style: 'translucent', type: 'warning', text: 'pokr' }),
-                                    React.createElement(index_1.Label, { style: 'translucent', text: 'slika' })),
+                                    React.createElement(index_1.Label, { text: 'Odjava' }),
+                                    React.createElement(index_1.Label, { type: 'warning', text: 'Slika' })),
                                 React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
-                                    React.createElement("span", null, "Nullam id dolor id nibh ultricies vehicula ut id elit.")),
+                                    React.createElement("span", null, "Handle on hover. Nullam id dolor id nibh ultricies vehicula ut id elit.")),
                                 React.createElement("div", { className: 'table-list__item-content-block' },
                                     React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
                             React.createElement("div", { className: 'table-list__slide-in-actions' },
                                 React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } })))),
+                    React.createElement("hr", null),
+                    React.createElement("hr", null),
                     React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0 sd-margin-t--3" }, "Table list with items between"),
                     React.createElement("hr", null),
                     React.createElement("ul", { className: 'table-list table-list--contained' },
@@ -133526,7 +133553,7 @@ exports.UiPlayground = void 0;
 var React = __importStar(__webpack_require__(0));
 var Components = __importStar(__webpack_require__(47));
 var index_1 = __webpack_require__(3);
-var GridElements = __importStar(__webpack_require__(72));
+var GridElements = __importStar(__webpack_require__(71));
 var items_1 = __importDefault(__webpack_require__(519));
 var UiPlayground = /** @class */ (function (_super) {
     __extends(UiPlayground, _super);
@@ -133767,7 +133794,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageLayoutTest = void 0;
 var React = __importStar(__webpack_require__(0));
 var index_1 = __webpack_require__(3);
-var GridElements = __importStar(__webpack_require__(72));
+var GridElements = __importStar(__webpack_require__(71));
 var Layout = __importStar(__webpack_require__(16));
 var items_1 = __importDefault(__webpack_require__(519));
 var PageLayoutTest = /** @class */ (function (_super) {
@@ -134597,6 +134624,9 @@ var Rundowns = /** @class */ (function (_super) {
             theme: newTheme
         });
     };
+    Rundowns.prototype.componentDidUpdate = function () {
+        console.log(this.state);
+    };
     Rundowns.prototype.changeStatus = function (item, status) {
         if (item.status.includes(status)) {
             item.status.splice(item.status.indexOf(status), 1);
@@ -134816,18 +134846,7 @@ var Rundowns = /** @class */ (function (_super) {
                                         React.createElement(index_1.Container, { direction: 'row', gap: 'small' },
                                             React.createElement(index_1.Text, { color: 'light' }, "Updated 3 hours ago by "),
                                             React.createElement(index_1.Text, { weight: 'medium' }, "John Doe"))),
-                                    React.createElement(index_1.Container, { className: 'sd-margin-s--auto sd-flex--items-center' },
-                                        React.createElement(index_1.Dropdown, { align: 'right', append: true, items: [
-                                                {
-                                                    type: 'group', label: 'Actions', items: [
-                                                        'divider',
-                                                        { label: 'Edit', icon: 'pencil', onSelect: function () { return _this.setState({ dropDownState: 'Edit ' }); } },
-                                                        { label: 'Download', icon: 'download', onSelect: function () { return _this.setState({ dropDownState: 'Download' }); } },
-                                                        { label: 'Delete', icon: 'trash', onSelect: function () { return _this.setState({ dropDownState: 'Delete' }); } },
-                                                    ]
-                                                }
-                                            ] },
-                                            React.createElement(index_1.IconButton, { ariaValue: 'dropdown-more-options', icon: 'dots-vertical', onClick: function () { return false; } })))),
+                                    React.createElement(index_1.Container, { className: 'sd-margin-s--auto sd-flex--items-center' })),
                                 React.createElement(Layout.PanelContentBlock, null,
                                     React.createElement(index_1.Container, { direction: 'row', gap: 'large', className: 'sd-margin-b--3' },
                                         React.createElement(index_1.Label, { size: 'large', text: 'Tabu', color: 'blue--800' }),
@@ -134850,7 +134869,7 @@ var Rundowns = /** @class */ (function (_super) {
                 React.createElement(Layout.ContentSplitter, { visible: this.state.openEditor }),
                 React.createElement(Layout.AuthoringContainer, { open: this.state.openEditor },
                     React.createElement(RundownEditor_1.RundownEditor, null))),
-            React.createElement(index_1.Modal, { headerTemplate: "Manage Templates", visible: this.state.modalManageTemplate, contentBg: 'medium', contentPadding: 'none', size: 'x-large', onHide: function () { _this.setState({ modalManageTemplate: false }); } },
+            React.createElement(index_1.Modal, { headerTemplate: "Manage Templates", visible: this.state.modalManageTemplate, zIndex: 1000, contentBg: 'medium', contentPadding: 'none', size: 'x-large', onHide: function () { _this.setState({ modalManageTemplate: false }); } },
                 React.createElement(Layout.LayoutContainer, null,
                     React.createElement(Layout.LeftPanel, { open: true },
                         React.createElement(Layout.Panel, { side: 'left', background: 'grey' },
@@ -134864,14 +134883,14 @@ var Rundowns = /** @class */ (function (_super) {
                                 React.createElement(index_1.EmptyState, { title: 'No show is selected', description: 'Please select a Show from the dropdown at the top.', size: "small", illustration: "1" })))),
                     React.createElement(Layout.MainPanel, null,
                         React.createElement(index_1.EmptyState, { title: 'No Template selected', description: 'Please select a Show and Template frome the side panel.', size: "large", illustration: "1" })))),
-            React.createElement(index_1.Modal, { headerTemplate: "Create new Show", visible: this.state.modalNewShow, footerTemplate: newShowFooter, contentBg: 'medium', size: 'medium', onHide: function () { _this.setState({ modalNewShow: false }); } },
+            React.createElement(index_1.Modal, { headerTemplate: "Create new Show", visible: this.state.modalNewShow, zIndex: 1000, footerTemplate: newShowFooter, contentBg: 'medium', size: 'medium', onHide: function () { _this.setState({ modalNewShow: false }); } },
                 React.createElement(Form.FormGroup, null,
                     React.createElement(Form.FormItem, null,
                         React.createElement(index_1.Input, { label: 'Show name', type: 'text', value: '', error: 'This is error message', required: true, onChange: function () { } }))),
                 React.createElement(Form.FormGroup, null,
                     React.createElement(Form.FormItem, null,
                         React.createElement(index_1.Input, { label: 'Description', type: 'text', value: '', error: 'This is error message', required: false, onChange: function () { } })))),
-            React.createElement(index_1.Modal, { headerTemplate: "Create new Show", visible: this.state.modalNewShowSuccess, footerTemplate: newShowFooter2, contentBg: 'medium', size: 'medium', onHide: function () { _this.setState({ modalNewShowSuccess: false }); } },
+            React.createElement(index_1.Modal, { headerTemplate: "Create new Show", visible: this.state.modalNewShowSuccess, zIndex: 1000, footerTemplate: newShowFooter2, contentBg: 'medium', size: 'medium', onHide: function () { _this.setState({ modalNewShowSuccess: false }); } },
                 React.createElement(index_1.Container, { direction: 'column', className: 'sd-flex--justify-center sd-flex--items-center sd-padding-y--2', gap: 'medium' },
                     React.createElement(index_1.Icon, { name: 'checkmark-circle', type: 'success', size: 'big', scale: '3x' }),
                     React.createElement(index_1.Text, { align: 'center', size: 'medium' },
@@ -134880,7 +134899,7 @@ var Rundowns = /** @class */ (function (_super) {
                         " has been successfully created.",
                         React.createElement("br", null),
                         "Do you want to cretate a template for this show right away?"))),
-            React.createElement(index_1.Modal, { headerTemplate: "Create new Template", visible: this.state.modalNewTemplate, contentBg: 'medium', contentPadding: 'none', size: 'x-large', onHide: function () { _this.setState({ modalNewTemplate: false }); } },
+            React.createElement(index_1.Modal, { headerTemplate: "Create new Template", visible: this.state.modalNewTemplate, zIndex: 1000, contentBg: 'medium', contentPadding: 'none', size: 'x-large', onHide: function () { _this.setState({ modalNewTemplate: false }); } },
                 React.createElement(Layout.LayoutContainer, null,
                     React.createElement(Layout.LeftPanel, { open: true },
                         React.createElement(Layout.Panel, { side: 'left', background: 'grey' },
@@ -134914,7 +134933,7 @@ var Rundowns = /** @class */ (function (_super) {
                                                 React.createElement("span", null, "Marker Special")))))))),
                     React.createElement(Layout.MainPanel, { padding: 'none' },
                         React.createElement(RundownEditor_1.RundownEditor, null)))),
-            React.createElement(index_1.Modal, { headerTemplate: "Manage Shows", visible: this.state.modalManageShow, contentBg: 'medium', contentPadding: 'none', size: 'x-large', onHide: function () { _this.setState({ modalManageShow: false }); } },
+            React.createElement(index_1.Modal, { headerTemplate: "Manage Shows", visible: this.state.modalManageShow, zIndex: 1000, contentBg: 'medium', contentPadding: 'none', size: 'x-large', onHide: function () { _this.setState({ modalManageShow: false }); } },
                 React.createElement(Layout.LayoutContainer, null,
                     React.createElement(Layout.HeaderPanel, null,
                         React.createElement(index_1.SubNav, { zIndex: 2 },
@@ -135083,7 +135102,7 @@ var CoreLayout = /** @class */ (function (_super) {
         });
     };
     CoreLayout.prototype.render = function () {
-        return (React.createElement(Layout.CoreLayout, { heading: 'Core Layout', menuOpen: this.state.mainMenuOpen, onClick: this.handleMainMenu, active: this.state.mainMenuOpen, ariaControls: 'main-menu', menuId: 'main-menu', editorFullWidth: true, slideInMenu: (React.createElement(Layout.MainMenu, { headerTitle: 'Main Menu', poweredBy: 'Powered by Superdesk technology', header: (null), footerContent: true, footer: (React.createElement("p", null, "Menu footer testing")) },
+        return (React.createElement(Layout.CoreLayout, { heading: 'Core Layout', menuOpen: this.state.mainMenuOpen, onClick: this.handleMainMenu, active: this.state.mainMenuOpen, ariaControls: 'main-menu', menuId: 'main-menu', editorFullWidth: false, slideInMenu: (React.createElement(Layout.MainMenu, { headerTitle: 'Main Menu', poweredBy: 'Powered by Superdesk technology', header: (null), footerContent: true, footer: (React.createElement("p", null, "Menu footer testing")) },
                 React.createElement(index_1.LeftMenu, { style: 'blanc', reverseItemBorder: true, size: 'large', ariaLabel: 'Left navigation', activeItemId: '1', groups: [
                         { label: 'MAIN SECTIONS', items: [
                                 { id: '1', label: 'Section 1', ref: 'section1' },
@@ -137401,7 +137420,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(__webpack_require__(0));
 var Markup = __importStar(__webpack_require__(6));
 var app_typescript_1 = __webpack_require__(3);
-var DurationInput_1 = __webpack_require__(56);
+var DurationInput_1 = __webpack_require__(75);
 var DurationInputDoc = /** @class */ (function (_super) {
     __extends(DurationInputDoc, _super);
     function DurationInputDoc(props) {
@@ -137747,7 +137766,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
 /* 649 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.14","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","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@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.14.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","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","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","tslint":"^5.18.0","typescript":"4.5.2","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":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.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","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@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.14.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","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","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","tslint":"^5.18.0","typescript":"4.5.2","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":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
 
 /***/ }),
 /* 650 */