@epam/uui 4.6.0 → 4.6.2-select-all-fix.1

package/index.js

@@ -638,7 +638,7 @@ function __classPrivateFieldSet(receiver, state, value, kind, f) {
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"line-height-12":"_16du_","lineHeight12":"_16du_","line-height-18":"_1PElp","lineHeight18":"_1PElp","line-height-24":"_2S5Kz","lineHeight24":"_2S5Kz","line-height-30":"NTwgg","lineHeight30":"NTwgg","font-size-10":"_2XcrR","fontSize10":"_2XcrR","font-size-12":"_2KGk0","fontSize12":"_2KGk0","font-size-14":"_2_589","fontSize14":"_2_589","font-size-16":"_1weOW","fontSize16":"_1weOW","font-size-18":"_3ZWmw","fontSize18":"_3ZWmw","font-size-24":"_31wZv","fontSize24":"_31wZv","v-padding-2":"qPuSd","vPadding2":"qPuSd","v-padding-3":"_1C_wc","vPadding3":"_1C_wc","v-padding-5":"_3pIOm","vPadding5":"_3pIOm","v-padding-6":"Ncr_Q","vPadding6":"Ncr_Q","v-padding-8":"_3nPVr","vPadding8":"_3nPVr","v-padding-9":"_1xv01","vPadding9":"_1xv01","v-padding-11":"_2ubDE","vPadding11":"_2ubDE","v-padding-12":"_1pb8t","vPadding12":"_1pb8t","v-padding-14":"PZDUk","vPadding14":"PZDUk","v-padding-15":"_2fhMt","vPadding15":"_2fhMt","v-padding-17":"WikQ7","vPadding17":"WikQ7","v-padding-18":"NueYl","vPadding18":"NueYl","v-padding-23":"BLIOk","vPadding23":"BLIOk","v-padding-24":"_2VTYy","vPadding24":"_2VTYy"};
+module.exports = {"line-height-12":"_3DM2P","lineHeight12":"_3DM2P","line-height-18":"_1U6ZB","lineHeight18":"_1U6ZB","line-height-24":"_2SzDk","lineHeight24":"_2SzDk","line-height-30":"_3PZeG","lineHeight30":"_3PZeG","font-size-10":"_3RbfR","fontSize10":"_3RbfR","font-size-12":"_2X2bJ","fontSize12":"_2X2bJ","font-size-14":"_2zP3m","fontSize14":"_2zP3m","font-size-16":"_2nTYO","fontSize16":"_2nTYO","font-size-18":"_3SzJ8","fontSize18":"_3SzJ8","font-size-24":"kpb-g","fontSize24":"kpb-g","v-padding-2":"_2ga2i","vPadding2":"_2ga2i","v-padding-3":"_2bSBN","vPadding3":"_2bSBN","v-padding-5":"_3KdsU","vPadding5":"_3KdsU","v-padding-6":"_5W_Ly","vPadding6":"_5W_Ly","v-padding-8":"_9iUli","vPadding8":"_9iUli","v-padding-9":"tDim7","vPadding9":"tDim7","v-padding-11":"_3IdFa","vPadding11":"_3IdFa","v-padding-12":"_1vzqx","vPadding12":"_1vzqx","v-padding-14":"_3VRXI","vPadding14":"_3VRXI","v-padding-15":"_2Ldxz","vPadding15":"_2Ldxz","v-padding-17":"_27WNm","vPadding17":"_27WNm","v-padding-18":"bKw5Q","vPadding18":"bKw5Q","v-padding-23":"_3Im9b","vPadding23":"_3Im9b","v-padding-24":"_1dK21","vPadding24":"_1dK21"};
 
 /***/ }),
 
@@ -892,7 +892,7 @@ module.exports = {"line-height-12":"_16du_","lineHeight12":"_16du_","line-height
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"srq9Y","mode-solid":"cWVCK","modeSolid":"cWVCK","mode-outline":"_2Gq9V","modeOutline":"_2Gq9V","mode-none":"_2-T9U","modeNone":"_2-T9U","mode-ghost":"_3IIvX","modeGhost":"_3IIvX","size-24":"_20Sb_","size24":"_20Sb_","size-30":"_2Sp4b","size30":"_2Sp4b","size-36":"_1ag3_","size36":"_1ag3_","size-42":"_2gI3B","size42":"_2gI3B","size-48":"_1pG_H","size48":"_1pG_H"};
+module.exports = {"root":"d6a-t","mode-solid":"_2V7_3","modeSolid":"_2V7_3","mode-outline":"_3KRIh","modeOutline":"_3KRIh","mode-none":"_2hhGL","modeNone":"_2hhGL","mode-ghost":"_19pmO","modeGhost":"_19pmO","size-24":"-v1rm","size24":"-v1rm","size-30":"_1fD3N","size30":"_1fD3N","size-36":"_3ZgLH","size36":"_3ZgLH","size-42":"_1_lh6","size42":"_1_lh6","size-48":"_1JMzr","size48":"_1JMzr"};
 
 /***/ }),
 
@@ -904,31 +904,31 @@ module.exports = {"root":"srq9Y","mode-solid":"cWVCK","modeSolid":"cWVCK","mode-
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = exports.applyButtonMods = exports.allButtonColors = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Button.scss */ "./components/buttons/Button.scss"));
-__webpack_require__(/*! ../../assets/styles/variables/buttons/button.scss */ "./assets/styles/variables/buttons/button.scss");
-exports.allButtonColors = ['accent', 'primary', 'secondary', 'negative'];
-var defaultSize = '36';
-function applyButtonMods(mods) {
-    return [
-        'button-vars',
-        "button-color-".concat(mods.color || 'primary'),
-        css.root,
-        css["size-".concat(mods.size || defaultSize)],
-        css["mode-".concat(mods.mode || 'solid')],
-    ];
-}
-exports.applyButtonMods = applyButtonMods;
-exports.Button = (0, uui_core_1.withMods)(uui_components_1.Button, applyButtonMods, function (props) { return ({
-    dropdownIcon: icons_1.systemIcons[props.size || defaultSize].foldingArrow,
-    clearIcon: icons_1.systemIcons[props.size || defaultSize].clear,
-}); });
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = exports.applyButtonMods = exports.allButtonColors = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Button.scss */ "./components/buttons/Button.scss"));
+__webpack_require__(/*! ../../assets/styles/variables/buttons/button.scss */ "./assets/styles/variables/buttons/button.scss");
+exports.allButtonColors = ['accent', 'primary', 'secondary', 'negative'];
+var defaultSize = '36';
+function applyButtonMods(mods) {
+    return [
+        'button-vars',
+        "button-color-".concat(mods.color || 'primary'),
+        css.root,
+        css["size-".concat(mods.size || defaultSize)],
+        css["mode-".concat(mods.mode || 'solid')],
+    ];
+}
+exports.applyButtonMods = applyButtonMods;
+exports.Button = (0, uui_core_1.withMods)(uui_components_1.Button, applyButtonMods, function (props) { return ({
+    dropdownIcon: icons_1.systemIcons[props.size || defaultSize].foldingArrow,
+    clearIcon: icons_1.systemIcons[props.size || defaultSize].clear,
+}); });
 
 
 /***/ }),
@@ -941,7 +941,7 @@ exports.Button = (0, uui_core_1.withMods)(uui_components_1.Button, applyButtonMo
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_3Mjbx"};
+module.exports = {"root":"_2gxEi"};
 
 /***/ }),
 
@@ -953,22 +953,22 @@ module.exports = {"root":"_3Mjbx"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButton = exports.allIconColors = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-__webpack_require__(/*! ../../assets/styles/variables/buttons/iconButton.scss */ "./assets/styles/variables/buttons/iconButton.scss");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./IconButton.scss */ "./components/buttons/IconButton.scss"));
-exports.allIconColors = ['info', 'success', 'warning', 'error', 'secondary', 'default'];
-function applyIconButtonMods(mods) {
-    return [
-        "icon-button-color-".concat(mods.color || 'default'),
-        css.root,
-    ];
-}
-exports.IconButton = (0, uui_core_1.withMods)(uui_components_1.IconButton, applyIconButtonMods);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconButton = exports.allIconColors = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+__webpack_require__(/*! ../../assets/styles/variables/buttons/iconButton.scss */ "./assets/styles/variables/buttons/iconButton.scss");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./IconButton.scss */ "./components/buttons/IconButton.scss"));
+exports.allIconColors = ['info', 'success', 'warning', 'error', 'secondary', 'default'];
+function applyIconButtonMods(mods) {
+    return [
+        "icon-button-color-".concat(mods.color || 'default'),
+        css.root,
+    ];
+}
+exports.IconButton = (0, uui_core_1.withMods)(uui_components_1.IconButton, applyIconButtonMods);
 
 
 /***/ }),
@@ -981,7 +981,7 @@ exports.IconButton = (0, uui_core_1.withMods)(uui_components_1.IconButton, apply
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_3Rq_x","size-18":"_2PyXT","size18":"_2PyXT","size-24":"_3LrWc","size24":"_3LrWc","size-30":"lqkT7","size30":"lqkT7","size-36":"_39noE","size36":"_39noE","size-42":"_35bU4","size42":"_35bU4","size-48":"-D0Nu","size48":"-D0Nu"};
+module.exports = {"root":"nmChl","size-18":"_2H0Oj","size18":"_2H0Oj","size-24":"_11v3l","size24":"_11v3l","size-30":"CySyM","size30":"CySyM","size-36":"srrvT","size36":"srrvT","size-42":"_15dYq","size42":"_15dYq","size-48":"_3STkO","size48":"_3STkO"};
 
 /***/ }),
 
@@ -993,28 +993,28 @@ module.exports = {"root":"_3Rq_x","size-18":"_2PyXT","size18":"_2PyXT","size-24"
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinkButton = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-var helper_1 = __webpack_require__(/*! ./helper */ "./components/buttons/helper.ts");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./LinkButton.scss */ "./components/buttons/LinkButton.scss"));
-__webpack_require__(/*! ../../assets/styles/variables/buttons/linkButton.scss */ "./assets/styles/variables/buttons/linkButton.scss");
-var defaultSize = '36';
-function applyLinkButtonMods(mods) {
-    return (0, tslib_1.__spreadArray)([
-        'link-button-vars',
-        css.root,
-        css['size-' + (mods.size || defaultSize)]
-    ], (0, helper_1.getIconClass)(mods), true);
-}
-exports.LinkButton = (0, uui_core_1.withMods)(uui_components_1.Button, applyLinkButtonMods, function (props) { return ({
-    dropdownIcon: icons_1.systemIcons[props.size || defaultSize].foldingArrow,
-    clearIcon: icons_1.systemIcons[props.size || defaultSize].clear,
-}); });
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkButton = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+var helper_1 = __webpack_require__(/*! ./helper */ "./components/buttons/helper.ts");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./LinkButton.scss */ "./components/buttons/LinkButton.scss"));
+__webpack_require__(/*! ../../assets/styles/variables/buttons/linkButton.scss */ "./assets/styles/variables/buttons/linkButton.scss");
+var defaultSize = '36';
+function applyLinkButtonMods(mods) {
+    return (0, tslib_1.__spreadArray)([
+        'link-button-vars',
+        css.root,
+        css['size-' + (mods.size || defaultSize)]
+    ], (0, helper_1.getIconClass)(mods), true);
+}
+exports.LinkButton = (0, uui_core_1.withMods)(uui_components_1.Button, applyLinkButtonMods, function (props) { return ({
+    dropdownIcon: icons_1.systemIcons[props.size || defaultSize].foldingArrow,
+    clearIcon: icons_1.systemIcons[props.size || defaultSize].clear,
+}); });
 
 
 /***/ }),
@@ -1027,7 +1027,7 @@ exports.LinkButton = (0, uui_core_1.withMods)(uui_components_1.Button, applyLink
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_3XiPh","uui-notification":"_25Muh","uuiNotification":"_25Muh","size-36":"hCNFg","size36":"hCNFg","size-48":"lXIbM","size48":"lXIbM","size-60":"x6J34","size60":"x6J34"};
+module.exports = {"root":"_2Obwg","uui-notification":"_2feU-","uuiNotification":"_2feU-","size-36":"_2IBWK","size36":"_2IBWK","size-48":"_1IAr5","size48":"_1IAr5","size-60":"_2UUOx","size60":"_2UUOx"};
 
 /***/ }),
 
@@ -1039,25 +1039,25 @@ module.exports = {"root":"_3XiPh","uui-notification":"_25Muh","uuiNotification":
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabButton = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-var helper_1 = __webpack_require__(/*! ./helper */ "./components/buttons/helper.ts");
-__webpack_require__(/*! ../../assets/styles/variables/buttons/tabButton.scss */ "./assets/styles/variables/buttons/tabButton.scss");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./TabButton.scss */ "./components/buttons/TabButton.scss"));
-function applyTabButtonMods(mods) {
-    return (0, tslib_1.__spreadArray)([
-        'tab-button-vars',
-        css.root,
-        css['size-' + (mods.size || '48')],
-        mods.withNotify && css.uuiNotification
-    ], (0, helper_1.getIconClass)(mods), true);
-}
-exports.TabButton = (0, uui_core_1.withMods)(uui_components_1.Button, applyTabButtonMods, function (props) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({ dropdownIcon: icons_1.systemIcons['36'].foldingArrow, clearIcon: icons_1.systemIcons['36'].clear, countPosition: 'right' }, props), { rawProps: (0, tslib_1.__assign)({ role: 'tab' }, props.rawProps) })); });
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabButton = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+var helper_1 = __webpack_require__(/*! ./helper */ "./components/buttons/helper.ts");
+__webpack_require__(/*! ../../assets/styles/variables/buttons/tabButton.scss */ "./assets/styles/variables/buttons/tabButton.scss");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./TabButton.scss */ "./components/buttons/TabButton.scss"));
+function applyTabButtonMods(mods) {
+    return (0, tslib_1.__spreadArray)([
+        'tab-button-vars',
+        css.root,
+        css['size-' + (mods.size || '48')],
+        mods.withNotify && css.uuiNotification
+    ], (0, helper_1.getIconClass)(mods), true);
+}
+exports.TabButton = (0, uui_core_1.withMods)(uui_components_1.Button, applyTabButtonMods, function (props) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({ dropdownIcon: icons_1.systemIcons['36'].foldingArrow, clearIcon: icons_1.systemIcons['36'].clear, countPosition: 'right' }, props), { rawProps: (0, tslib_1.__assign)({ role: 'tab' }, props.rawProps) })); });
 
 
 /***/ }),
@@ -1070,7 +1070,7 @@ exports.TabButton = (0, uui_core_1.withMods)(uui_components_1.Button, applyTabBu
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_2hVm2"};
+module.exports = {"root":"_1TuKl"};
 
 /***/ }),
 
@@ -1082,19 +1082,19 @@ module.exports = {"root":"_2hVm2"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerticalTabButton = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var VerticalTabButton_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./VerticalTabButton.scss */ "./components/buttons/VerticalTabButton.scss"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var TabButton_1 = __webpack_require__(/*! ./TabButton */ "./components/buttons/TabButton.tsx");
-function applyVerticalTabButtonMods() {
-    return [
-        VerticalTabButton_scss_1.default.root,
-    ];
-}
-exports.VerticalTabButton = (0, uui_core_1.withMods)(TabButton_1.TabButton, applyVerticalTabButtonMods);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerticalTabButton = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var VerticalTabButton_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./VerticalTabButton.scss */ "./components/buttons/VerticalTabButton.scss"));
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var TabButton_1 = __webpack_require__(/*! ./TabButton */ "./components/buttons/TabButton.tsx");
+function applyVerticalTabButtonMods() {
+    return [
+        VerticalTabButton_scss_1.default.root,
+    ];
+}
+exports.VerticalTabButton = (0, uui_core_1.withMods)(TabButton_1.TabButton, applyVerticalTabButtonMods);
 
 
 /***/ }),
@@ -1107,29 +1107,29 @@ exports.VerticalTabButton = (0, uui_core_1.withMods)(TabButton_1.TabButton, appl
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getIconClass = void 0;
-function getIconClass(props) {
-    var classList = {
-        'has-left-icon': false,
-        'has-right-icon': false,
-    };
-    if (props.onClear) {
-        classList['has-right-icon'] = true;
-    }
-    if (props.isDropdown) {
-        classList[props.dropdownIconPosition === 'left' ? 'has-left-icon' : 'has-right-icon'] = true;
-    }
-    if (props.icon) {
-        classList[props.iconPosition !== 'right' ? 'has-left-icon' : 'has-right-icon'] = true;
-    }
-    return [
-        classList['has-left-icon'] ? 'uui-has-left-icon' : 'uui-no-left-icon',
-        classList['has-right-icon'] ? 'uui-has-right-icon' : 'uui-no-right-icon',
-    ];
-}
-exports.getIconClass = getIconClass;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIconClass = void 0;
+function getIconClass(props) {
+    var classList = {
+        'has-left-icon': false,
+        'has-right-icon': false,
+    };
+    if (props.onClear) {
+        classList['has-right-icon'] = true;
+    }
+    if (props.isDropdown) {
+        classList[props.dropdownIconPosition === 'left' ? 'has-left-icon' : 'has-right-icon'] = true;
+    }
+    if (props.icon) {
+        classList[props.iconPosition !== 'right' ? 'has-left-icon' : 'has-right-icon'] = true;
+    }
+    return [
+        classList['has-left-icon'] ? 'uui-has-left-icon' : 'uui-no-left-icon',
+        classList['has-right-icon'] ? 'uui-has-right-icon' : 'uui-no-right-icon',
+    ];
+}
+exports.getIconClass = getIconClass;
 
 
 /***/ }),
@@ -1142,14 +1142,14 @@ exports.getIconClass = getIconClass;
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Button */ "./components/buttons/Button.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./IconButton */ "./components/buttons/IconButton.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./LinkButton */ "./components/buttons/LinkButton.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./TabButton */ "./components/buttons/TabButton.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./VerticalTabButton */ "./components/buttons/VerticalTabButton.tsx"), exports);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Button */ "./components/buttons/Button.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./IconButton */ "./components/buttons/IconButton.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./LinkButton */ "./components/buttons/LinkButton.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./TabButton */ "./components/buttons/TabButton.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./VerticalTabButton */ "./components/buttons/VerticalTabButton.tsx"), exports);
 
 
 /***/ }),
@@ -1162,18 +1162,18 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./buttons */ "./components/buttons/index.ts"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./inputs */ "./components/inputs/index.ts"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./layout */ "./components/layout/index.ts"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./overlays */ "./components/overlays/index.ts"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./pickers */ "./components/pickers/index.ts"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./typography */ "./components/typography/index.ts"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./widgets */ "./components/widgets/index.ts"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./tables */ "./components/tables/index.ts"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./types */ "./components/types.ts"), exports);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./buttons */ "./components/buttons/index.ts"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./inputs */ "./components/inputs/index.ts"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./layout */ "./components/layout/index.ts"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./overlays */ "./components/overlays/index.ts"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./pickers */ "./components/pickers/index.ts"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./typography */ "./components/typography/index.ts"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./widgets */ "./components/widgets/index.ts"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./tables */ "./components/tables/index.ts"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./types */ "./components/types.ts"), exports);
 
 
 /***/ }),
@@ -1186,7 +1186,7 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_1AaC_","size-18":"_1NSzd","size18":"_1NSzd","size-12":"_20Mzv","size12":"_20Mzv"};
+module.exports = {"root":"_239Br","size-18":"F79I2","size18":"F79I2","size-12":"UBmil","size12":"UBmil"};
 
 /***/ }),
 
@@ -1198,30 +1198,30 @@ module.exports = {"root":"_1AaC_","size-18":"_1NSzd","size18":"_1NSzd","size-12"
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = exports.applyCheckboxMods = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Checkbox.scss */ "./components/inputs/Checkbox.scss"));
-var check_12_svg_1 = __webpack_require__(/*! ../../icons/check-12.svg */ "./icons/check-12.svg");
-var check_18_svg_1 = __webpack_require__(/*! ../../icons/check-18.svg */ "./icons/check-18.svg");
-var partly_select_12_svg_1 = __webpack_require__(/*! ../../icons/partly-select-12.svg */ "./icons/partly-select-12.svg");
-var partly_select_18_svg_1 = __webpack_require__(/*! ../../icons/partly-select-18.svg */ "./icons/partly-select-18.svg");
-__webpack_require__(/*! ../../assets/styles/variables/inputs/checkbox.scss */ "./assets/styles/variables/inputs/checkbox.scss");
-function applyCheckboxMods(mods) {
-    return [
-        'checkbox-vars',
-        css.root,
-        css['size-' + (mods.size || '18')],
-    ];
-}
-exports.applyCheckboxMods = applyCheckboxMods;
-exports.Checkbox = (0, uui_core_1.withMods)(uui_components_1.Checkbox, applyCheckboxMods, function (props) { return ({
-    icon: (props.size === '12') ? check_12_svg_1.ReactComponent : check_18_svg_1.ReactComponent,
-    indeterminateIcon: (props.size === '12') ? partly_select_12_svg_1.ReactComponent : partly_select_18_svg_1.ReactComponent,
-}); });
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = exports.applyCheckboxMods = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Checkbox.scss */ "./components/inputs/Checkbox.scss"));
+var check_12_svg_1 = __webpack_require__(/*! ../../icons/check-12.svg */ "./icons/check-12.svg");
+var check_18_svg_1 = __webpack_require__(/*! ../../icons/check-18.svg */ "./icons/check-18.svg");
+var partly_select_12_svg_1 = __webpack_require__(/*! ../../icons/partly-select-12.svg */ "./icons/partly-select-12.svg");
+var partly_select_18_svg_1 = __webpack_require__(/*! ../../icons/partly-select-18.svg */ "./icons/partly-select-18.svg");
+__webpack_require__(/*! ../../assets/styles/variables/inputs/checkbox.scss */ "./assets/styles/variables/inputs/checkbox.scss");
+function applyCheckboxMods(mods) {
+    return [
+        'checkbox-vars',
+        css.root,
+        css['size-' + (mods.size || '18')],
+    ];
+}
+exports.applyCheckboxMods = applyCheckboxMods;
+exports.Checkbox = (0, uui_core_1.withMods)(uui_components_1.Checkbox, applyCheckboxMods, function (props) { return ({
+    icon: (props.size === '12') ? check_12_svg_1.ReactComponent : check_18_svg_1.ReactComponent,
+    indeterminateIcon: (props.size === '12') ? partly_select_12_svg_1.ReactComponent : partly_select_18_svg_1.ReactComponent,
+}); });
 
 
 /***/ }),
@@ -1234,7 +1234,7 @@ exports.Checkbox = (0, uui_core_1.withMods)(uui_components_1.Checkbox, applyChec
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_1xnkv","size-18":"_2vYt_","size18":"_2vYt_","size-12":"_4pgu1","size12":"_4pgu1"};
+module.exports = {"root":"_2pO5i","size-18":"_7W-de","size18":"_7W-de","size-12":"_28l3R","size12":"_28l3R"};
 
 /***/ }),
 
@@ -1246,23 +1246,23 @@ module.exports = {"root":"_1xnkv","size-18":"_2vYt_","size18":"_2vYt_","size-12"
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioInput = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-__webpack_require__(/*! ../../assets/styles/variables/inputs/radioInput.scss */ "./assets/styles/variables/inputs/radioInput.scss");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./RadioInput.scss */ "./components/inputs/RadioInput.scss"));
-var radio_point_svg_1 = __webpack_require__(/*! ../../icons/radio-point.svg */ "./icons/radio-point.svg");
-function applyRadioInputMods(mods) {
-    return [
-        'radio-input-vars',
-        css.root,
-        css['size-' + (mods.size || '18')],
-    ];
-}
-exports.RadioInput = (0, uui_core_1.withMods)(uui_components_1.RadioInput, applyRadioInputMods, function () { return ({ icon: radio_point_svg_1.ReactComponent }); });
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioInput = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+__webpack_require__(/*! ../../assets/styles/variables/inputs/radioInput.scss */ "./assets/styles/variables/inputs/radioInput.scss");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./RadioInput.scss */ "./components/inputs/RadioInput.scss"));
+var radio_point_svg_1 = __webpack_require__(/*! ../../icons/radio-point.svg */ "./icons/radio-point.svg");
+function applyRadioInputMods(mods) {
+    return [
+        'radio-input-vars',
+        css.root,
+        css['size-' + (mods.size || '18')],
+    ];
+}
+exports.RadioInput = (0, uui_core_1.withMods)(uui_components_1.RadioInput, applyRadioInputMods, function () { return ({ icon: radio_point_svg_1.ReactComponent }); });
 
 
 /***/ }),
@@ -1275,7 +1275,7 @@ exports.RadioInput = (0, uui_core_1.withMods)(uui_components_1.RadioInput, apply
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_2NMs_","size-12":"_13Ln1","size12":"_13Ln1","size-18":"_3DxW1","size18":"_3DxW1","size-24":"rjHOg","size24":"rjHOg"};
+module.exports = {"root":"i3mOv","size-12":"_3lei-","size12":"_3lei-","size-18":"_1hMyM","size18":"_1hMyM","size-24":"_2W1ww","size24":"_2W1ww"};
 
 /***/ }),
 
@@ -1287,23 +1287,23 @@ module.exports = {"root":"_2NMs_","size-12":"_13Ln1","size12":"_13Ln1","size-18"
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Switch = exports.applySwitchMods = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Switch.scss */ "./components/inputs/Switch.scss"));
-__webpack_require__(/*! ../../assets/styles/variables/inputs/switch.scss */ "./assets/styles/variables/inputs/switch.scss");
-function applySwitchMods(mods) {
-    return [
-        'switch-vars',
-        css.root,
-        css['size-' + (mods.size || '18')],
-    ];
-}
-exports.applySwitchMods = applySwitchMods;
-exports.Switch = (0, uui_core_1.withMods)(uui_components_1.Switch, applySwitchMods);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = exports.applySwitchMods = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Switch.scss */ "./components/inputs/Switch.scss"));
+__webpack_require__(/*! ../../assets/styles/variables/inputs/switch.scss */ "./assets/styles/variables/inputs/switch.scss");
+function applySwitchMods(mods) {
+    return [
+        'switch-vars',
+        css.root,
+        css['size-' + (mods.size || '18')],
+    ];
+}
+exports.applySwitchMods = applySwitchMods;
+exports.Switch = (0, uui_core_1.withMods)(uui_components_1.Switch, applySwitchMods);
 
 
 /***/ }),
@@ -1316,7 +1316,7 @@ exports.Switch = (0, uui_core_1.withMods)(uui_components_1.Switch, applySwitchMo
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"EWDDJ","mode-form":"_17n32","modeForm":"_17n32","mode-cell":"_1A6q_","modeCell":"_1A6q_","size-24":"_1IYe9","size24":"_1IYe9","size-30":"_17Zhn","size30":"_17Zhn","size-36":"_3jr8V","size36":"_3jr8V","size-42":"_2q2DC","size42":"_2q2DC","size-48":"_3Fepd","size48":"_3Fepd"};
+module.exports = {"root":"_1sQHH","mode-form":"_3UK6W","modeForm":"_3UK6W","mode-cell":"_24fwj","modeCell":"_24fwj","size-24":"_1pLq-","size24":"_1pLq-","size-30":"_2Dk3w","size30":"_2Dk3w","size-36":"_27jOC","size36":"_27jOC","size-42":"_3PbM3","size42":"_3PbM3","size-48":"_38mie","size48":"_38mie"};
 
 /***/ }),
 
@@ -1328,50 +1328,50 @@ module.exports = {"root":"EWDDJ","mode-form":"_17n32","modeForm":"_17n32","mode-
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchInput = exports.TextInput = exports.applyTextInputMods = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var types_1 = __webpack_require__(/*! ../types */ "./components/types.ts");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./TextInput.scss */ "./components/inputs/TextInput.scss"));
-__webpack_require__(/*! ../../assets/styles/variables/inputs/textInput.scss */ "./assets/styles/variables/inputs/textInput.scss");
-var defaultSize = '36';
-var defaultMode = types_1.EditMode.FORM;
-function applyTextInputMods(mods) {
-    return [
-        'text-input-vars',
-        css.root,
-        css['size-' + (mods.size || defaultSize)],
-        css['mode-' + (mods.mode || defaultMode)],
-    ];
-}
-exports.applyTextInputMods = applyTextInputMods;
-exports.TextInput = (0, uui_core_1.withMods)(uui_components_1.TextInput, applyTextInputMods, function (props) { return ({
-    acceptIcon: icons_1.systemIcons[props.size || defaultSize].accept,
-    cancelIcon: icons_1.systemIcons[props.size || defaultSize].clear,
-    dropdownIcon: icons_1.systemIcons[props.size || defaultSize].foldingArrow,
-}); });
-var SearchInput = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(SearchInput, _super);
-    function SearchInput() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SearchInput.prototype.render = function () {
-        var _this = this;
-        // analytics events are sending in IEditableDebouncer, so we need to avoid sending events in TextInput
-        var textInputProps = (0, tslib_1.__assign)({}, this.props);
-        delete textInputProps.getValueChangeAnalyticsEvent;
-        return react_1.default.createElement(uui_core_1.IEditableDebouncer, (0, tslib_1.__assign)({}, this.props, { render: (function (iEditable) {
-                return react_1.default.createElement(exports.TextInput, (0, tslib_1.__assign)({ icon: icons_1.systemIcons[_this.props.size || defaultSize].search, onCancel: !!_this.props.value ? (function () { return iEditable.onValueChange(''); }) : undefined, type: "search", inputMode: "search" }, textInputProps, iEditable));
-            }) }));
-    };
-    return SearchInput;
-}(react_1.default.Component));
-exports.SearchInput = SearchInput;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchInput = exports.TextInput = exports.applyTextInputMods = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var types_1 = __webpack_require__(/*! ../types */ "./components/types.ts");
+var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./TextInput.scss */ "./components/inputs/TextInput.scss"));
+__webpack_require__(/*! ../../assets/styles/variables/inputs/textInput.scss */ "./assets/styles/variables/inputs/textInput.scss");
+var defaultSize = '36';
+var defaultMode = types_1.EditMode.FORM;
+function applyTextInputMods(mods) {
+    return [
+        'text-input-vars',
+        css.root,
+        css['size-' + (mods.size || defaultSize)],
+        css['mode-' + (mods.mode || defaultMode)],
+    ];
+}
+exports.applyTextInputMods = applyTextInputMods;
+exports.TextInput = (0, uui_core_1.withMods)(uui_components_1.TextInput, applyTextInputMods, function (props) { return ({
+    acceptIcon: icons_1.systemIcons[props.size || defaultSize].accept,
+    cancelIcon: icons_1.systemIcons[props.size || defaultSize].clear,
+    dropdownIcon: icons_1.systemIcons[props.size || defaultSize].foldingArrow,
+}); });
+var SearchInput = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(SearchInput, _super);
+    function SearchInput() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SearchInput.prototype.render = function () {
+        var _this = this;
+        // analytics events are sending in IEditableDebouncer, so we need to avoid sending events in TextInput
+        var textInputProps = (0, tslib_1.__assign)({}, this.props);
+        delete textInputProps.getValueChangeAnalyticsEvent;
+        return react_1.default.createElement(uui_core_1.IEditableDebouncer, (0, tslib_1.__assign)({}, this.props, { render: (function (iEditable) {
+                return react_1.default.createElement(exports.TextInput, (0, tslib_1.__assign)({ icon: icons_1.systemIcons[_this.props.size || defaultSize].search, onCancel: !!_this.props.value ? (function () { return iEditable.onValueChange(''); }) : undefined, type: "search", inputMode: "search" }, textInputProps, iEditable));
+            }) }));
+    };
+    return SearchInput;
+}(react_1.default.Component));
+exports.SearchInput = SearchInput;
 
 
 /***/ }),
@@ -1384,13 +1384,13 @@ exports.SearchInput = SearchInput;
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Checkbox */ "./components/inputs/Checkbox.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./RadioInput */ "./components/inputs/RadioInput.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Switch */ "./components/inputs/Switch.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./TextInput */ "./components/inputs/TextInput.tsx"), exports);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Checkbox */ "./components/inputs/Checkbox.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./RadioInput */ "./components/inputs/RadioInput.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Switch */ "./components/inputs/Switch.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./TextInput */ "./components/inputs/TextInput.tsx"), exports);
 
 
 /***/ }),
@@ -1403,7 +1403,7 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_2bFj0","mode-block":"_3WDK0","modeBlock":"_3WDK0","mode-inline":"_2zKq2","modeInline":"_2zKq2","padding-0":"_1_iFJ","padding0":"_1_iFJ","padding-6":"_2hLG1","padding6":"_2hLG1","padding-12":"_2F25e","padding12":"_2F25e","padding-18":"_2_MgH","padding18":"_2_MgH"};
+module.exports = {"root":"_19-mc","mode-block":"KGwfD","modeBlock":"KGwfD","mode-inline":"_3zi_V","modeInline":"_3zi_V","padding-0":"_2LXLE","padding0":"_2LXLE","padding-6":"_2svbb","padding6":"_2svbb","padding-12":"_2A5Ph","padding12":"_2A5Ph","padding-18":"_2EbP0","padding18":"_2EbP0"};
 
 /***/ }),
 
@@ -1415,26 +1415,26 @@ module.exports = {"root":"_2bFj0","mode-block":"_3WDK0","modeBlock":"_3WDK0","mo
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Accordion = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-__webpack_require__(/*! ../../assets/styles/variables/layout/accordion.scss */ "./assets/styles/variables/layout/accordion.scss");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Accordion.scss */ "./components/layout/Accordion.scss"));
-function applyAccordionMods(mods) {
-    return [
-        'accordion-vars',
-        css.root,
-        css['mode-' + (mods.mode || 'block')],
-        mods.padding && css['padding-' + mods.padding],
-    ];
-}
-exports.Accordion = (0, uui_core_1.withMods)(uui_components_1.Accordion, applyAccordionMods, function (mods) { return ({
-    dropdownIcon: icons_1.systemIcons[mods.mode === 'block' ? '60' : '30'].foldingArrow,
-}); });
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+__webpack_require__(/*! ../../assets/styles/variables/layout/accordion.scss */ "./assets/styles/variables/layout/accordion.scss");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Accordion.scss */ "./components/layout/Accordion.scss"));
+function applyAccordionMods(mods) {
+    return [
+        'accordion-vars',
+        css.root,
+        css['mode-' + (mods.mode || 'block')],
+        mods.padding && css['padding-' + mods.padding],
+    ];
+}
+exports.Accordion = (0, uui_core_1.withMods)(uui_components_1.Accordion, applyAccordionMods, function (mods) { return ({
+    dropdownIcon: icons_1.systemIcons[mods.mode === 'block' ? '60' : '30'].foldingArrow,
+}); });
 
 
 /***/ }),
@@ -1447,7 +1447,7 @@ exports.Accordion = (0, uui_core_1.withMods)(uui_components_1.Accordion, applyAc
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_1QnUD"};
+module.exports = {"root":"_1IxNb"};
 
 /***/ }),
 
@@ -1459,14 +1459,14 @@ module.exports = {"root":"_1QnUD"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ControlGroup = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./ControlGroup.scss */ "./components/layout/ControlGroup.scss"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-exports.ControlGroup = (0, uui_core_1.withMods)(uui_components_1.ControlGroup, function () { return [css.root]; });
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlGroup = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./ControlGroup.scss */ "./components/layout/ControlGroup.scss"));
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+exports.ControlGroup = (0, uui_core_1.withMods)(uui_components_1.ControlGroup, function () { return [css.root]; });
 
 
 /***/ }),
@@ -1479,16 +1479,16 @@ exports.ControlGroup = (0, uui_core_1.withMods)(uui_components_1.ControlGroup, f
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlexCell = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./FlexRow.scss */ "./components/layout/FlexItems/FlexRow.scss"));
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-exports.FlexCell = (0, uui_core_1.withMods)(uui_components_1.FlexCell, function (props) { return [
-    css.flexCell,
-]; });
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexCell = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./FlexRow.scss */ "./components/layout/FlexItems/FlexRow.scss"));
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+exports.FlexCell = (0, uui_core_1.withMods)(uui_components_1.FlexCell, function (props) { return [
+    css.flexCell,
+]; });
 
 
 /***/ }),
@@ -1501,7 +1501,7 @@ exports.FlexCell = (0, uui_core_1.withMods)(uui_components_1.FlexCell, function
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_3zcH2","top-shadow":"_2GMaC","topShadow":"_2GMaC","size-24":"_1yvWe","size24":"_1yvWe","size-30":"_3VAam","size30":"_3VAam","size-36":"_2sCxM","size36":"_2sCxM","size-42":"_3o5g8","size42":"_3o5g8","size-48":"_3lBc1","size48":"_3lBc1","padding-6":"_1W2jQ","padding6":"_1W2jQ","padding-12":"Mzl0p","padding12":"Mzl0p","padding-18":"_3OLSN","padding18":"_3OLSN","padding-24":"_3K9cV","padding24":"_3K9cV","margin-24":"_2nKie","margin24":"_2nKie","margin-12":"_4BRag","margin12":"_4BRag","vPadding-12":"_1EqYo","vPadding12":"_1EqYo","vPadding-18":"yYvKn","vPadding18":"yYvKn","vPadding-24":"_2pU07","vPadding24":"_2pU07","vPadding-36":"rgb_a","vPadding36":"rgb_a","vPadding-48":"_1gfAE","vPadding48":"_1gfAE","spacing-6":"ib8M0","spacing6":"ib8M0","spacing-12":"_3W5M3","spacing12":"_3W5M3","spacing-18":"_3mbww","spacing18":"_3mbww","border-bottom":"dRhAm","borderBottom":"dRhAm"};
+module.exports = {"root":"_2bc3g","top-shadow":"_2yPa1","topShadow":"_2yPa1","size-24":"_2Bz-I","size24":"_2Bz-I","size-30":"_1Bs02","size30":"_1Bs02","size-36":"_2shlB","size36":"_2shlB","size-42":"H211Q","size42":"H211Q","size-48":"T8Cet","size48":"T8Cet","padding-6":"_1CJOi","padding6":"_1CJOi","padding-12":"_3QYPo","padding12":"_3QYPo","padding-18":"_1bYfn","padding18":"_1bYfn","padding-24":"_1vUMs","padding24":"_1vUMs","margin-24":"_1Ak7J","margin24":"_1Ak7J","margin-12":"_21ipv","margin12":"_21ipv","vPadding-12":"_3_Ja7","vPadding12":"_3_Ja7","vPadding-18":"_13Pl4","vPadding18":"_13Pl4","vPadding-24":"_2-Ynh","vPadding24":"_2-Ynh","vPadding-36":"_1Ckgr","vPadding36":"_1Ckgr","vPadding-48":"_1MRR3","vPadding48":"_1MRR3","spacing-6":"_3yFvr","spacing6":"_3yFvr","spacing-12":"_3GSUW","spacing12":"_3GSUW","spacing-18":"_1lJuV","spacing18":"_1lJuV","border-bottom":"_2Urr2","borderBottom":"_2Urr2"};
 
 /***/ }),
 
@@ -1513,25 +1513,25 @@ module.exports = {"root":"_3zcH2","top-shadow":"_2GMaC","topShadow":"_2GMaC","si
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlexRow = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./FlexRow.scss */ "./components/layout/FlexItems/FlexRow.scss"));
-exports.FlexRow = (0, uui_core_1.withMods)(uui_components_1.FlexRow, function (props) {
-    return [
-        css.root,
-        props.size !== null && css['size-' + (props.size || '36')],
-        props.padding && css['padding-' + props.padding],
-        props.vPadding && css['vPadding-' + props.vPadding],
-        props.margin && css['margin-' + props.margin],
-        props.topShadow && css.topShadow,
-        props.borderBottom && css['border-bottom'],
-        props.spacing && css['spacing-' + props.spacing],
-    ];
-});
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexRow = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./FlexRow.scss */ "./components/layout/FlexItems/FlexRow.scss"));
+exports.FlexRow = (0, uui_core_1.withMods)(uui_components_1.FlexRow, function (props) {
+    return [
+        css.root,
+        props.size !== null && css['size-' + (props.size || '36')],
+        props.padding && css['padding-' + props.padding],
+        props.vPadding && css['vPadding-' + props.vPadding],
+        props.margin && css['margin-' + props.margin],
+        props.topShadow && css.topShadow,
+        props.borderBottom && css['border-bottom'],
+        props.spacing && css['spacing-' + props.spacing],
+    ];
+});
 
 
 /***/ }),
@@ -1544,11 +1544,11 @@ exports.FlexRow = (0, uui_core_1.withMods)(uui_components_1.FlexRow, function (p
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlexSpacer = void 0;
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-exports.FlexSpacer = uui_components_1.FlexSpacer;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexSpacer = void 0;
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+exports.FlexSpacer = uui_components_1.FlexSpacer;
 
 
 /***/ }),
@@ -1561,7 +1561,7 @@ exports.FlexSpacer = uui_components_1.FlexSpacer;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_3AQyv","background":"KDhL6","margin-24":"_2uVPu","margin24":"_2uVPu","padding-12":"_9gAXu","padding12":"_9gAXu","padding-24":"_2ztNN","padding24":"_2ztNN","shadow":"_28e4L"};
+module.exports = {"root":"_2_JPr","background":"_3evR2","margin-24":"hq_A_","margin24":"hq_A_","padding-12":"LCOPD","padding12":"LCOPD","padding-24":"_3GG_G","padding24":"_3GG_G","shadow":"_4_McR"};
 
 /***/ }),
 
@@ -1573,21 +1573,21 @@ module.exports = {"root":"_3AQyv","background":"KDhL6","margin-24":"_2uVPu","mar
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Panel = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-__webpack_require__(/*! ../../../assets/styles/variables/layout/panel.scss */ "./assets/styles/variables/layout/panel.scss");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Panel.scss */ "./components/layout/FlexItems/Panel.scss"));
-exports.Panel = (0, uui_core_1.withMods)(uui_components_1.VPanel, function (props) { return [
-    'panel-vars',
-    css.root,
-    props.shadow && css.shadow,
-    props.background && css.background,
-    props.margin && css['margin-' + props.margin],
-]; });
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Panel = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+__webpack_require__(/*! ../../../assets/styles/variables/layout/panel.scss */ "./assets/styles/variables/layout/panel.scss");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Panel.scss */ "./components/layout/FlexItems/Panel.scss"));
+exports.Panel = (0, uui_core_1.withMods)(uui_components_1.VPanel, function (props) { return [
+    'panel-vars',
+    css.root,
+    props.shadow && css.shadow,
+    props.background && css.background,
+    props.margin && css['margin-' + props.margin],
+]; });
 
 
 /***/ }),
@@ -1600,13 +1600,13 @@ exports.Panel = (0, uui_core_1.withMods)(uui_components_1.VPanel, function (prop
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./FlexCell */ "./components/layout/FlexItems/FlexCell.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./FlexRow */ "./components/layout/FlexItems/FlexRow.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./FlexSpacer */ "./components/layout/FlexItems/FlexSpacer.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Panel */ "./components/layout/FlexItems/Panel.tsx"), exports);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./FlexCell */ "./components/layout/FlexItems/FlexCell.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./FlexRow */ "./components/layout/FlexItems/FlexRow.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./FlexSpacer */ "./components/layout/FlexItems/FlexSpacer.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Panel */ "./components/layout/FlexItems/Panel.tsx"), exports);
 
 
 /***/ }),
@@ -1619,7 +1619,7 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_1wBJS"};
+module.exports = {"root":"UsvX6"};
 
 /***/ }),
 
@@ -1631,22 +1631,22 @@ module.exports = {"root":"_1wBJS"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconContainer = exports.applyIconContainerMods = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./IconContainer.scss */ "./components/layout/IconContainer.scss"));
-__webpack_require__(/*! ../../assets/styles/variables/layout/iconContainer.scss */ "./assets/styles/variables/layout/iconContainer.scss");
-function applyIconContainerMods(mods) {
-    return [
-        "icon-container-color-".concat(mods.color || 'default'),
-        css.root,
-    ];
-}
-exports.applyIconContainerMods = applyIconContainerMods;
-exports.IconContainer = (0, uui_core_1.withMods)(uui_components_1.IconContainer, applyIconContainerMods, function () { return ({ tabIndex: 0 }); });
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconContainer = exports.applyIconContainerMods = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./IconContainer.scss */ "./components/layout/IconContainer.scss"));
+__webpack_require__(/*! ../../assets/styles/variables/layout/iconContainer.scss */ "./assets/styles/variables/layout/iconContainer.scss");
+function applyIconContainerMods(mods) {
+    return [
+        "icon-container-color-".concat(mods.color || 'default'),
+        css.root,
+    ];
+}
+exports.applyIconContainerMods = applyIconContainerMods;
+exports.IconContainer = (0, uui_core_1.withMods)(uui_components_1.IconContainer, applyIconContainerMods, function () { return ({ tabIndex: 0 }); });
 
 
 /***/ }),
@@ -1659,7 +1659,7 @@ exports.IconContainer = (0, uui_core_1.withMods)(uui_components_1.IconContainer,
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_1AtsR","size-24":"E52hK","size24":"E52hK","size-30":"_3Lkyh","size30":"_3Lkyh","size-36":"_3r7HX","size36":"_3r7HX","size-42":"D4Nyo","size42":"D4Nyo","size-48":"_2hAmJ","size48":"_2hAmJ"};
+module.exports = {"root":"-tDyR","size-24":"_-9c8L","size24":"_-9c8L","size-30":"_38IiU","size30":"_38IiU","size-36":"_3KbpD","size36":"_3KbpD","size-42":"_1bljF","size42":"_1bljF","size-48":"_1P7Vp","size48":"_1P7Vp"};
 
 /***/ }),
 
@@ -1671,28 +1671,28 @@ module.exports = {"root":"_1AtsR","size-24":"E52hK","size24":"E52hK","size-30":"
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LabeledInput = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var overlays_1 = __webpack_require__(/*! ../overlays */ "./components/overlays/index.ts");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-__webpack_require__(/*! ../../assets/styles/variables/layout/labeledInput.scss */ "./assets/styles/variables/layout/labeledInput.scss");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./LabeledInput.scss */ "./components/layout/LabeledInput.scss"));
-var defaultSize = '36';
-function applyLabeledInputMods(mods) {
-    return [
-        'labeled-input-color',
-        css.root,
-        css['size-' + (mods.size || defaultSize)],
-    ];
-}
-exports.LabeledInput = (0, uui_core_1.withMods)(uui_components_1.LabeledInput, applyLabeledInputMods, function (props) { return ({
-    Tooltip: overlays_1.Tooltip,
-    infoIcon: icons_1.systemIcons[props.size || defaultSize].help,
-}); });
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabeledInput = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var overlays_1 = __webpack_require__(/*! ../overlays */ "./components/overlays/index.ts");
+var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+__webpack_require__(/*! ../../assets/styles/variables/layout/labeledInput.scss */ "./assets/styles/variables/layout/labeledInput.scss");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./LabeledInput.scss */ "./components/layout/LabeledInput.scss"));
+var defaultSize = '36';
+function applyLabeledInputMods(mods) {
+    return [
+        'labeled-input-color',
+        css.root,
+        css['size-' + (mods.size || defaultSize)],
+    ];
+}
+exports.LabeledInput = (0, uui_core_1.withMods)(uui_components_1.LabeledInput, applyLabeledInputMods, function (props) { return ({
+    Tooltip: overlays_1.Tooltip,
+    infoIcon: icons_1.systemIcons[props.size || defaultSize].help,
+}); });
 
 
 /***/ }),
@@ -1705,7 +1705,7 @@ exports.LabeledInput = (0, uui_core_1.withMods)(uui_components_1.LabeledInput, a
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_1mJll"};
+module.exports = {"root":"sjoEL"};
 
 /***/ }),
 
@@ -1717,15 +1717,15 @@ module.exports = {"root":"_1mJll"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioGroup = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./RadioGroup.scss */ "./components/layout/RadioGroup.scss"));
-exports.RadioGroup = (0, uui_core_1.withMods)(uui_components_1.RadioGroup, function () { return [css.root]; }, function () { return ({ RadioInput: inputs_1.RadioInput }); });
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./RadioGroup.scss */ "./components/layout/RadioGroup.scss"));
+exports.RadioGroup = (0, uui_core_1.withMods)(uui_components_1.RadioGroup, function () { return [css.root]; }, function () { return ({ RadioInput: inputs_1.RadioInput }); });
 
 
 /***/ }),
@@ -1749,19 +1749,19 @@ exports.RadioGroup = (0, uui_core_1.withMods)(uui_components_1.RadioGroup, funct
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollBars = void 0;
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-__webpack_require__(/*! ./ScrollBars.scss */ "./components/layout/ScrollBars.scss");
-__webpack_require__(/*! ../../assets/styles/variables/layout/scrollBars.scss */ "./assets/styles/variables/layout/scrollBars.scss");
-function applyScrollBarsMods() {
-    return [
-        'scroll-bars-vars',
-    ];
-}
-exports.ScrollBars = (0, uui_core_1.withMods)(uui_components_1.ScrollBars, applyScrollBarsMods);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollBars = void 0;
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+__webpack_require__(/*! ./ScrollBars.scss */ "./components/layout/ScrollBars.scss");
+__webpack_require__(/*! ../../assets/styles/variables/layout/scrollBars.scss */ "./assets/styles/variables/layout/scrollBars.scss");
+function applyScrollBarsMods() {
+    return [
+        'scroll-bars-vars',
+    ];
+}
+exports.ScrollBars = (0, uui_core_1.withMods)(uui_components_1.ScrollBars, applyScrollBarsMods);
 
 
 /***/ }),
@@ -1785,19 +1785,19 @@ exports.ScrollBars = (0, uui_core_1.withMods)(uui_components_1.ScrollBars, apply
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VirtualList = void 0;
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-__webpack_require__(/*! ../../assets/styles/variables/layout/scrollBars.scss */ "./assets/styles/variables/layout/scrollBars.scss");
-__webpack_require__(/*! ./VirtualList.scss */ "./components/layout/VirtualList.scss");
-function applyVirtualListMods() {
-    return [
-        'scroll-bars-vars',
-    ];
-}
-exports.VirtualList = (0, uui_core_1.withMods)(uui_components_1.VirtualList, applyVirtualListMods);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualList = void 0;
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+__webpack_require__(/*! ../../assets/styles/variables/layout/scrollBars.scss */ "./assets/styles/variables/layout/scrollBars.scss");
+__webpack_require__(/*! ./VirtualList.scss */ "./components/layout/VirtualList.scss");
+function applyVirtualListMods() {
+    return [
+        'scroll-bars-vars',
+    ];
+}
+exports.VirtualList = (0, uui_core_1.withMods)(uui_components_1.VirtualList, applyVirtualListMods);
 
 
 /***/ }),
@@ -1810,17 +1810,17 @@ exports.VirtualList = (0, uui_core_1.withMods)(uui_components_1.VirtualList, app
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Accordion */ "./components/layout/Accordion.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./ControlGroup */ "./components/layout/ControlGroup.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./FlexItems */ "./components/layout/FlexItems/index.ts"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./IconContainer */ "./components/layout/IconContainer.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./LabeledInput */ "./components/layout/LabeledInput.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./RadioGroup */ "./components/layout/RadioGroup.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./ScrollBars */ "./components/layout/ScrollBars.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./VirtualList */ "./components/layout/VirtualList.tsx"), exports);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Accordion */ "./components/layout/Accordion.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./ControlGroup */ "./components/layout/ControlGroup.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./FlexItems */ "./components/layout/FlexItems/index.ts"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./IconContainer */ "./components/layout/IconContainer.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./LabeledInput */ "./components/layout/LabeledInput.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./RadioGroup */ "./components/layout/RadioGroup.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./ScrollBars */ "./components/layout/ScrollBars.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./VirtualList */ "./components/layout/VirtualList.tsx"), exports);
 
 
 /***/ }),
@@ -1833,23 +1833,23 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dropdown = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var Dropdown = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Dropdown, _super);
-    function Dropdown() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Dropdown.prototype.render = function () {
-        return (React.createElement(uui_components_1.Dropdown, (0, tslib_1.__assign)({}, this.props)));
-    };
-    return Dropdown;
-}(React.Component));
-exports.Dropdown = Dropdown;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var Dropdown = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(Dropdown, _super);
+    function Dropdown() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Dropdown.prototype.render = function () {
+        return (React.createElement(uui_components_1.Dropdown, (0, tslib_1.__assign)({}, this.props)));
+    };
+    return Dropdown;
+}(React.Component));
+exports.Dropdown = Dropdown;
 
 
 /***/ }),
@@ -1862,7 +1862,7 @@ exports.Dropdown = Dropdown;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_2_FxU"};
+module.exports = {"root":"_3LIbc"};
 
 /***/ }),
 
@@ -1874,21 +1874,21 @@ module.exports = {"root":"_2_FxU"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownContainer = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-__webpack_require__(/*! ../../assets/styles/variables/overlays/dropdownContainer.scss */ "./assets/styles/variables/overlays/dropdownContainer.scss");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DropdownContainer.scss */ "./components/overlays/DropdownContainer.scss"));
-function applyDropdownContainerMods(mods) {
-    return [
-        'dropdown-container-vars',
-        css.root,
-    ];
-}
-exports.DropdownContainer = (0, uui_core_1.withMods)(uui_components_1.DropdownContainer, applyDropdownContainerMods);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownContainer = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+__webpack_require__(/*! ../../assets/styles/variables/overlays/dropdownContainer.scss */ "./assets/styles/variables/overlays/dropdownContainer.scss");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DropdownContainer.scss */ "./components/overlays/DropdownContainer.scss"));
+function applyDropdownContainerMods(mods) {
+    return [
+        'dropdown-container-vars',
+        css.root,
+    ];
+}
+exports.DropdownContainer = (0, uui_core_1.withMods)(uui_components_1.DropdownContainer, applyDropdownContainerMods);
 
 
 /***/ }),
@@ -1901,7 +1901,7 @@ exports.DropdownContainer = (0, uui_core_1.withMods)(uui_components_1.DropdownCo
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"menuRoot":"_33aFx","bodyRoot":"uX3PA","submenuRootItem":"_1KUxp","iconAfter":"_21zmN","iconCheck":"_36Nne","splitterRoot":"_1u-W1","splitter":"_2JeII","headerRoot":"_2gYVN","itemRoot":"hbcNQ","icon":"_1PROp","link":"_1oklT"};
+module.exports = {"menuRoot":"p7mnd","bodyRoot":"_2vrIA","submenuRootItem":"_3F7vN","iconAfter":"_1M1TP","iconCheck":"KOd2t","splitterRoot":"_1Sw4f","splitter":"P1vv6","headerRoot":"_2rT51","itemRoot":"_4Y0sF","icon":"_10MRt","link":"CJiU3"};
 
 /***/ }),
 
@@ -1913,136 +1913,136 @@ module.exports = {"menuRoot":"_33aFx","bodyRoot":"uX3PA","submenuRootItem":"_1KU
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownMenuSwitchButton = exports.DropdownSubMenu = exports.DropdownMenuHeader = exports.DropdownMenuSplitter = exports.DropdownMenuButton = exports.DropdownMenuBody = exports.DropdownControlKeys = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var react_focus_lock_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react-focus-lock */ "react-focus-lock"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DropdownMenu.scss */ "./components/overlays/DropdownMenu.scss"));
-var icons = icons_1.systemIcons['36'];
-exports.DropdownControlKeys = {
-    ENTER: 'Enter',
-    ESCAPE: 'Escape',
-    LEFT_ARROW: 'ArrowLeft',
-    RIGHT_ARROW: 'ArrowRight',
-    UP_ARROW: 'ArrowUp',
-    DOWN_ARROW: 'ArrowDown',
-};
-var DropdownMenuContainer = function (_a) {
-    var onClose = _a.onClose, _b = _a.closeOnKey, closeOnKey = _b === void 0 ? exports.DropdownControlKeys.ESCAPE : _b, props = (0, tslib_1.__rest)(_a, ["onClose", "closeOnKey"]);
-    var menuRef = (0, react_1.useRef)(null);
-    var _c = (0, react_1.useState)(-1), currentlyFocused = _c[0], setFocused = _c[1];
-    var menuItems = menuRef.current ? Array.from(menuRef.current.querySelectorAll("[role=\"menuitem\"]:not(.".concat(uui_core_1.uuiMod.disabled, ")"))) : [];
-    (0, react_1.useEffect)(function () {
-        var _a;
-        (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [menuRef.current]);
-    var changeFocus = function (nextFocusedIndex) {
-        if (menuItems.length > 0) {
-            setFocused(nextFocusedIndex);
-            menuItems[nextFocusedIndex].focus();
-        }
-    };
-    var handleArrowKeys = function (e) {
-        e.stopPropagation();
-        var lastMenuItemsIndex = menuItems.length - 1;
-        if (e.key === exports.DropdownControlKeys.UP_ARROW) {
-            changeFocus(currentlyFocused > 0 ? currentlyFocused - 1 : lastMenuItemsIndex);
-        }
-        else if (e.key === exports.DropdownControlKeys.DOWN_ARROW) {
-            changeFocus(currentlyFocused < lastMenuItemsIndex ? currentlyFocused + 1 : 0);
-        }
-        else if (e.key === closeOnKey && onClose) {
-            onClose();
-        }
-    };
-    return (react_1.default.createElement(react_focus_lock_1.default, { as: "menu", className: css.menuRoot, returnFocus: true, autoFocus: false, ref: menuRef, lockProps: { onKeyDown: handleArrowKeys, tabIndex: -1 } },
-        react_1.default.createElement(uui_components_1.DropdownContainer, (0, tslib_1.__assign)({}, props, { rawProps: { tabIndex: -1 } }))));
-};
-exports.DropdownMenuBody = (0, uui_core_1.withMods)(DropdownMenuContainer, function () { return [css.bodyRoot]; }, function (_a) {
-    var style = _a.style;
-    return ({ style: style });
-});
-var DropdownMenuButton = function (props) {
-    var context = (0, react_1.useContext)(uui_core_1.UuiContext);
-    var icon = props.icon, iconPosition = props.iconPosition, caption = props.caption, isDisabled = props.isDisabled, isSelected = props.isSelected, link = props.link, href = props.href, onClick = props.onClick, toggleDropdownOpening = props.toggleDropdownOpening, isDropdown = props.isDropdown;
-    var handleClick = function (event) {
-        if (isDisabled || !onClick)
-            return;
-        onClick(event);
-        context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
-    };
-    var handleOpenDropdown = function (event) {
-        if (event.key === exports.DropdownControlKeys.RIGHT_ARROW && isDropdown) {
-            toggleDropdownOpening(true);
-        }
-        else if (event.key === exports.DropdownControlKeys.ENTER && onClick) {
-            onClick(event);
-        }
-    };
-    var getMenuButtonContent = function () {
-        var isIconBefore = Boolean(icon && iconPosition !== "right");
-        var isIconAfter = Boolean(icon && iconPosition === "right");
-        var iconElement = react_1.default.createElement(uui_components_1.IconContainer, { icon: icon, cx: (0, uui_core_1.cx)(css.icon, iconPosition === "right" ? css.iconAfter : css.iconBefore) });
-        return react_1.default.createElement(react_1.default.Fragment, null,
-            isIconBefore && iconElement,
-            react_1.default.createElement(uui_components_1.Text, { cx: css.caption }, caption),
-            isIconAfter && react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(uui_components_1.FlexSpacer, null),
-                iconElement));
-    };
-    var isAnchor = Boolean(link || href);
-    var itemClassNames = (0, uui_core_1.cx)(props.cx, css.itemRoot, isDisabled && uui_core_1.uuiMod.disabled, isSelected && uui_core_1.uuiMod.selected);
-    return isAnchor ? (react_1.default.createElement(uui_components_1.Anchor, { cx: (0, uui_core_1.cx)(css.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isDisabled: isDisabled }, getMenuButtonContent())) : (react_1.default.createElement(uui_components_1.FlexRow, { rawProps: {
-            tabIndex: isDisabled ? -1 : 0,
-            role: 'menuitem',
-            onKeyDown: isDisabled ? null : handleOpenDropdown,
-        }, cx: itemClassNames, onClick: handleClick }, getMenuButtonContent()));
-};
-exports.DropdownMenuButton = DropdownMenuButton;
-exports.DropdownMenuButton.displayName = 'DropdownMenuButton';
-var DropdownMenuSplitter = function (props) { return (react_1.default.createElement("div", { className: (0, uui_core_1.cx)(props.cx, css.splitterRoot) },
-    react_1.default.createElement("hr", { className: css.splitter }))); };
-exports.DropdownMenuSplitter = DropdownMenuSplitter;
-var DropdownMenuHeader = function (props) { return (react_1.default.createElement("div", { className: (0, uui_core_1.cx)(props.cx, css.headerRoot) },
-    react_1.default.createElement("span", { className: css.header }, props.caption))); };
-exports.DropdownMenuHeader = DropdownMenuHeader;
-var DropdownSubMenu = function (props) {
-    return (react_1.default.createElement(uui_components_1.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", placement: "right-start", renderBody: function (_a) {
-            var onClose = _a.onClose;
-            return (react_1.default.createElement(exports.DropdownMenuBody, (0, tslib_1.__assign)({}, props, { closeOnKey: exports.DropdownControlKeys.LEFT_ARROW, onClose: onClose })));
-        }, renderTarget: function (_a) {
-            var toggleDropdownOpening = _a.toggleDropdownOpening;
-            return (react_1.default.createElement(exports.DropdownMenuButton, (0, tslib_1.__assign)({ cx: (0, uui_core_1.cx)(css.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props)));
-        } }));
-};
-exports.DropdownSubMenu = DropdownSubMenu;
-var DropdownMenuSwitchButton = function (props) {
-    var context = (0, react_1.useContext)(uui_core_1.UuiContext);
-    var icon = props.icon, caption = props.caption, isDisabled = props.isDisabled, isSelected = props.isSelected, onValueChange = props.onValueChange;
-    var onHandleValueChange = function (value) {
-        if (isDisabled || !onValueChange)
-            return;
-        onValueChange(value);
-        context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
-    };
-    var handleKeySelect = function (e) {
-        if (e.key === exports.DropdownControlKeys.ENTER) {
-            onHandleValueChange(!isSelected);
-        }
-    };
-    return (react_1.default.createElement(uui_components_1.FlexRow, { cx: (0, uui_core_1.cx)(props.cx, css.itemRoot, isDisabled && uui_core_1.uuiMod.disabled), onClick: function () { return onHandleValueChange(!isSelected); }, rawProps: { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } },
-        icon && react_1.default.createElement(uui_components_1.IconContainer, { icon: icon, cx: css.iconBefore }),
-        react_1.default.createElement(uui_components_1.Text, { cx: css.caption }, caption),
-        react_1.default.createElement(uui_components_1.FlexSpacer, null),
-        react_1.default.createElement(inputs_1.Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
-};
-exports.DropdownMenuSwitchButton = DropdownMenuSwitchButton;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenuSwitchButton = exports.DropdownSubMenu = exports.DropdownMenuHeader = exports.DropdownMenuSplitter = exports.DropdownMenuButton = exports.DropdownMenuBody = exports.DropdownControlKeys = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var react_1 = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+var react_focus_lock_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react-focus-lock */ "react-focus-lock"));
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
+var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DropdownMenu.scss */ "./components/overlays/DropdownMenu.scss"));
+var icons = icons_1.systemIcons['36'];
+exports.DropdownControlKeys = {
+    ENTER: 'Enter',
+    ESCAPE: 'Escape',
+    LEFT_ARROW: 'ArrowLeft',
+    RIGHT_ARROW: 'ArrowRight',
+    UP_ARROW: 'ArrowUp',
+    DOWN_ARROW: 'ArrowDown',
+};
+var DropdownMenuContainer = function (_a) {
+    var onClose = _a.onClose, _b = _a.closeOnKey, closeOnKey = _b === void 0 ? exports.DropdownControlKeys.ESCAPE : _b, props = (0, tslib_1.__rest)(_a, ["onClose", "closeOnKey"]);
+    var menuRef = (0, react_1.useRef)(null);
+    var _c = (0, react_1.useState)(-1), currentlyFocused = _c[0], setFocused = _c[1];
+    var menuItems = menuRef.current ? Array.from(menuRef.current.querySelectorAll("[role=\"menuitem\"]:not(.".concat(uui_core_1.uuiMod.disabled, ")"))) : [];
+    (0, react_1.useEffect)(function () {
+        var _a;
+        (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [menuRef.current]);
+    var changeFocus = function (nextFocusedIndex) {
+        if (menuItems.length > 0) {
+            setFocused(nextFocusedIndex);
+            menuItems[nextFocusedIndex].focus();
+        }
+    };
+    var handleArrowKeys = function (e) {
+        e.stopPropagation();
+        var lastMenuItemsIndex = menuItems.length - 1;
+        if (e.key === exports.DropdownControlKeys.UP_ARROW) {
+            changeFocus(currentlyFocused > 0 ? currentlyFocused - 1 : lastMenuItemsIndex);
+        }
+        else if (e.key === exports.DropdownControlKeys.DOWN_ARROW) {
+            changeFocus(currentlyFocused < lastMenuItemsIndex ? currentlyFocused + 1 : 0);
+        }
+        else if (e.key === closeOnKey && onClose) {
+            onClose();
+        }
+    };
+    return (react_1.default.createElement(react_focus_lock_1.default, { as: "menu", className: css.menuRoot, returnFocus: true, autoFocus: false, ref: menuRef, lockProps: { onKeyDown: handleArrowKeys, tabIndex: -1 } },
+        react_1.default.createElement(uui_components_1.DropdownContainer, (0, tslib_1.__assign)({}, props, { rawProps: { tabIndex: -1 } }))));
+};
+exports.DropdownMenuBody = (0, uui_core_1.withMods)(DropdownMenuContainer, function () { return [css.bodyRoot]; }, function (_a) {
+    var style = _a.style;
+    return ({ style: style });
+});
+var DropdownMenuButton = function (props) {
+    var context = (0, react_1.useContext)(uui_core_1.UuiContext);
+    var icon = props.icon, iconPosition = props.iconPosition, caption = props.caption, isDisabled = props.isDisabled, isSelected = props.isSelected, link = props.link, href = props.href, onClick = props.onClick, toggleDropdownOpening = props.toggleDropdownOpening, isDropdown = props.isDropdown;
+    var handleClick = function (event) {
+        if (isDisabled || !onClick)
+            return;
+        onClick(event);
+        context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
+    };
+    var handleOpenDropdown = function (event) {
+        if (event.key === exports.DropdownControlKeys.RIGHT_ARROW && isDropdown) {
+            toggleDropdownOpening(true);
+        }
+        else if (event.key === exports.DropdownControlKeys.ENTER && onClick) {
+            onClick(event);
+        }
+    };
+    var getMenuButtonContent = function () {
+        var isIconBefore = Boolean(icon && iconPosition !== "right");
+        var isIconAfter = Boolean(icon && iconPosition === "right");
+        var iconElement = react_1.default.createElement(uui_components_1.IconContainer, { icon: icon, cx: (0, uui_core_1.cx)(css.icon, iconPosition === "right" ? css.iconAfter : css.iconBefore) });
+        return react_1.default.createElement(react_1.default.Fragment, null,
+            isIconBefore && iconElement,
+            react_1.default.createElement(uui_components_1.Text, { cx: css.caption }, caption),
+            isIconAfter && react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(uui_components_1.FlexSpacer, null),
+                iconElement));
+    };
+    var isAnchor = Boolean(link || href);
+    var itemClassNames = (0, uui_core_1.cx)(props.cx, css.itemRoot, isDisabled && uui_core_1.uuiMod.disabled, isSelected && uui_core_1.uuiMod.selected);
+    return isAnchor ? (react_1.default.createElement(uui_components_1.Anchor, { cx: (0, uui_core_1.cx)(css.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isDisabled: isDisabled }, getMenuButtonContent())) : (react_1.default.createElement(uui_components_1.FlexRow, { rawProps: {
+            tabIndex: isDisabled ? -1 : 0,
+            role: 'menuitem',
+            onKeyDown: isDisabled ? null : handleOpenDropdown,
+        }, cx: itemClassNames, onClick: handleClick }, getMenuButtonContent()));
+};
+exports.DropdownMenuButton = DropdownMenuButton;
+exports.DropdownMenuButton.displayName = 'DropdownMenuButton';
+var DropdownMenuSplitter = function (props) { return (react_1.default.createElement("div", { className: (0, uui_core_1.cx)(props.cx, css.splitterRoot) },
+    react_1.default.createElement("hr", { className: css.splitter }))); };
+exports.DropdownMenuSplitter = DropdownMenuSplitter;
+var DropdownMenuHeader = function (props) { return (react_1.default.createElement("div", { className: (0, uui_core_1.cx)(props.cx, css.headerRoot) },
+    react_1.default.createElement("span", { className: css.header }, props.caption))); };
+exports.DropdownMenuHeader = DropdownMenuHeader;
+var DropdownSubMenu = function (props) {
+    return (react_1.default.createElement(uui_components_1.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", placement: "right-start", renderBody: function (_a) {
+            var onClose = _a.onClose;
+            return (react_1.default.createElement(exports.DropdownMenuBody, (0, tslib_1.__assign)({}, props, { closeOnKey: exports.DropdownControlKeys.LEFT_ARROW, onClose: onClose })));
+        }, renderTarget: function (_a) {
+            var toggleDropdownOpening = _a.toggleDropdownOpening;
+            return (react_1.default.createElement(exports.DropdownMenuButton, (0, tslib_1.__assign)({ cx: (0, uui_core_1.cx)(css.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props)));
+        } }));
+};
+exports.DropdownSubMenu = DropdownSubMenu;
+var DropdownMenuSwitchButton = function (props) {
+    var context = (0, react_1.useContext)(uui_core_1.UuiContext);
+    var icon = props.icon, caption = props.caption, isDisabled = props.isDisabled, isSelected = props.isSelected, onValueChange = props.onValueChange;
+    var onHandleValueChange = function (value) {
+        if (isDisabled || !onValueChange)
+            return;
+        onValueChange(value);
+        context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
+    };
+    var handleKeySelect = function (e) {
+        if (e.key === exports.DropdownControlKeys.ENTER) {
+            onHandleValueChange(!isSelected);
+        }
+    };
+    return (react_1.default.createElement(uui_components_1.FlexRow, { cx: (0, uui_core_1.cx)(props.cx, css.itemRoot, isDisabled && uui_core_1.uuiMod.disabled), onClick: function () { return onHandleValueChange(!isSelected); }, rawProps: { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } },
+        icon && react_1.default.createElement(uui_components_1.IconContainer, { icon: icon, cx: css.iconBefore }),
+        react_1.default.createElement(uui_components_1.Text, { cx: css.caption }, caption),
+        react_1.default.createElement(uui_components_1.FlexSpacer, null),
+        react_1.default.createElement(inputs_1.Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
+};
+exports.DropdownMenuSwitchButton = DropdownMenuSwitchButton;
 
 
 /***/ }),
@@ -2055,7 +2055,7 @@ exports.DropdownMenuSwitchButton = DropdownMenuSwitchButton;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"modal-blocker":"peBa1","modalBlocker":"peBa1","animateModalBlocker":"uGyIT","blocker-overlay":"_1jD-P","blockerOverlay":"_1jD-P","modal":"Exhd2","modal-footer":"_3SmsH","modalFooter":"_3SmsH","border-top":"_2r1t2","borderTop":"_2r1t2","modal-header":"_2iIXc","modalHeader":"_2iIXc"};
+module.exports = {"modal-blocker":"_17jSp","modalBlocker":"_17jSp","animateModalBlocker":"vF09_","blocker-overlay":"_64Xo7","blockerOverlay":"_64Xo7","modal":"_3TDE8","modal-footer":"_3GZah","modalFooter":"_3GZah","border-top":"_16oSN","borderTop":"_16oSN","modal-header":"_1feXL","modalHeader":"_1feXL"};
 
 /***/ }),
 
@@ -2067,58 +2067,58 @@ module.exports = {"modal-blocker":"peBa1","modalBlocker":"peBa1","animateModalBl
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalFooter = exports.ModalHeader = exports.ModalWindow = exports.ModalBlocker = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var navigation_close_24_svg_1 = __webpack_require__(/*! ../../icons/navigation-close-24.svg */ "./icons/navigation-close-24.svg");
-__webpack_require__(/*! ../../assets/styles/variables/overlays/modals.scss */ "./assets/styles/variables/overlays/modals.scss");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Modals.scss */ "./components/overlays/Modals.scss"));
-exports.ModalBlocker = (0, uui_core_1.withMods)(uui_components_1.ModalBlocker, function (mods) { return [
-    'modals-vars',
-    css.modalBlocker,
-    mods.overlay && css['blocker-overlay'],
-]; });
-exports.ModalWindow = (0, uui_core_1.withMods)(uui_components_1.ModalWindow, function () { return ['modals-vars', css.modal]; }, function (props) { return ({ rawProps: {
-        style: {
-            width: "".concat(props.width || 480, "px"),
-            height: props.height ? "".concat(props.height, "px") : '',
-        },
-    },
-}); });
-var ModalHeader = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ModalHeader, _super);
-    function ModalHeader() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ModalHeader.prototype.render = function () {
-        return (React.createElement(layout_1.FlexRow, { padding: this.props.padding || '24', vPadding: '12', borderBottom: true, cx: ['modals-vars', css.modalHeader, this.props.cx], spacing: '12', rawProps: this.props.rawProps },
-            this.props.title && React.createElement(typography_1.Text, { size: '48', fontSize: '18', font: 'semibold' }, this.props.title),
-            this.props.children,
-            this.props.onClose && React.createElement(layout_1.FlexSpacer, null),
-            this.props.onClose && React.createElement(layout_1.FlexCell, { shrink: 0, width: 'auto' },
-                React.createElement(buttons_1.IconButton, { icon: navigation_close_24_svg_1.ReactComponent, onClick: this.props.onClose }))));
-    };
-    return ModalHeader;
-}(React.Component));
-exports.ModalHeader = ModalHeader;
-var ModalFooter = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ModalFooter, _super);
-    function ModalFooter() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ModalFooter.prototype.render = function () {
-        return (React.createElement(layout_1.FlexRow, { spacing: this.props.spacing || '12', cx: ['modals-vars', css.modalFooter, this.props.borderTop && css.borderTop, this.props.cx], padding: this.props.padding || '24', vPadding: this.props.vPadding || '24', rawProps: this.props.rawProps }, this.props.children));
-    };
-    return ModalFooter;
-}(React.Component));
-exports.ModalFooter = ModalFooter;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalFooter = exports.ModalHeader = exports.ModalWindow = exports.ModalBlocker = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
+var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
+var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+var navigation_close_24_svg_1 = __webpack_require__(/*! ../../icons/navigation-close-24.svg */ "./icons/navigation-close-24.svg");
+__webpack_require__(/*! ../../assets/styles/variables/overlays/modals.scss */ "./assets/styles/variables/overlays/modals.scss");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Modals.scss */ "./components/overlays/Modals.scss"));
+exports.ModalBlocker = (0, uui_core_1.withMods)(uui_components_1.ModalBlocker, function (mods) { return [
+    'modals-vars',
+    css.modalBlocker,
+    mods.overlay && css['blocker-overlay'],
+]; });
+exports.ModalWindow = (0, uui_core_1.withMods)(uui_components_1.ModalWindow, function () { return ['modals-vars', css.modal]; }, function (props) { return ({ rawProps: {
+        style: {
+            width: "".concat(props.width || 480, "px"),
+            height: props.height ? "".concat(props.height, "px") : '',
+        },
+    },
+}); });
+var ModalHeader = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ModalHeader, _super);
+    function ModalHeader() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ModalHeader.prototype.render = function () {
+        return (React.createElement(layout_1.FlexRow, { padding: this.props.padding || '24', vPadding: '12', borderBottom: true, cx: ['modals-vars', css.modalHeader, this.props.cx], spacing: '12', rawProps: this.props.rawProps },
+            this.props.title && React.createElement(typography_1.Text, { size: '48', fontSize: '18', font: 'semibold' }, this.props.title),
+            this.props.children,
+            this.props.onClose && React.createElement(layout_1.FlexSpacer, null),
+            this.props.onClose && React.createElement(layout_1.FlexCell, { shrink: 0, width: 'auto' },
+                React.createElement(buttons_1.IconButton, { icon: navigation_close_24_svg_1.ReactComponent, onClick: this.props.onClose }))));
+    };
+    return ModalHeader;
+}(React.Component));
+exports.ModalHeader = ModalHeader;
+var ModalFooter = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ModalFooter, _super);
+    function ModalFooter() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ModalFooter.prototype.render = function () {
+        return (React.createElement(layout_1.FlexRow, { spacing: this.props.spacing || '12', cx: ['modals-vars', css.modalFooter, this.props.borderTop && css.borderTop, this.props.cx], padding: this.props.padding || '24', vPadding: this.props.vPadding || '24', rawProps: this.props.rawProps }, this.props.children));
+    };
+    return ModalFooter;
+}(React.Component));
+exports.ModalFooter = ModalFooter;
 
 
 /***/ }),
@@ -2131,7 +2131,7 @@ exports.ModalFooter = ModalFooter;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_1oPqn","icon-wrapper":"EzIBO","iconWrapper":"EzIBO","notification-wrapper":"_1A-Zk","notificationWrapper":"_1A-Zk","action-wrapper":"_1MAFh","actionWrapper":"_1MAFh","action-link":"_2imvW","actionLink":"_2imvW","close-icon":"aZZwY","closeIcon":"aZZwY","main-path":"_1N3rz","mainPath":"_1N3rz","content":"_35HmF","clear-button":"_3EhPL","clearButton":"_3EhPL"};
+module.exports = {"root":"_3kdCJ","icon-wrapper":"_2UPaF","iconWrapper":"_2UPaF","notification-wrapper":"_1jvZj","notificationWrapper":"_1jvZj","action-wrapper":"_7fplo","actionWrapper":"_7fplo","action-link":"_2ouvX","actionLink":"_2ouvX","close-icon":"_391-n","closeIcon":"_391-n","main-path":"G9cr5","mainPath":"G9cr5","content":"xacbs","clear-button":"_3JvcB","clearButton":"_3JvcB"};
 
 /***/ }),
 
@@ -2143,86 +2143,86 @@ module.exports = {"root":"_1oPqn","icon-wrapper":"EzIBO","iconWrapper":"EzIBO","
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClearNotification = exports.ErrorNotification = exports.HintNotification = exports.SuccessNotification = exports.WarningNotification = exports.NotificationCard = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var classnames_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! classnames */ "classnames"));
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-var i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
-var notification_check_circle_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-check_circle-fill-24.svg */ "./icons/notification-check_circle-fill-24.svg");
-var notification_warning_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-warning-fill-24.svg */ "./icons/notification-warning-fill-24.svg");
-var notification_error_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-error-fill-24.svg */ "./icons/notification-error-fill-24.svg");
-var notification_help_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-help-fill-24.svg */ "./icons/notification-help-fill-24.svg");
-var cross_svg_1 = __webpack_require__(/*! ../../icons/snackbar/cross.svg */ "./icons/snackbar/cross.svg");
-__webpack_require__(/*! ../../assets/styles/variables/overlays/notificationCard.scss */ "./assets/styles/variables/overlays/notificationCard.scss");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./NotificationCard.scss */ "./components/overlays/NotificationCard.scss"));
-var NotificationCard = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(NotificationCard, _super);
-    function NotificationCard() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.notificationCardNode = null;
-        return _this;
-    }
-    NotificationCard.prototype.componentDidMount = function () {
-        var _a, _b;
-        (_a = this.notificationCardNode) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.props.clearTimer);
-        (_b = this.notificationCardNode) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.props.refreshTimer);
-    };
-    NotificationCard.prototype.componentWillUnmount = function () {
-        var _a, _b;
-        (_a = this.notificationCardNode) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.props.clearTimer);
-        (_b = this.notificationCardNode) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.props.refreshTimer);
-    };
-    NotificationCard.prototype.render = function () {
-        var _this = this;
-        return (react_1.default.createElement("div", { role: 'alert', className: (0, classnames_1.default)(css.notificationWrapper, 'notification-card-vars', "notification-card-color-".concat(this.props.color), css.root, this.props.cx), ref: function (el) { return _this.notificationCardNode = el; } },
-            react_1.default.createElement("div", { className: css.mainPath },
-                this.props.icon && react_1.default.createElement("div", { className: css.iconWrapper },
-                    react_1.default.createElement(uui_components_1.IconContainer, { icon: this.props.icon, cx: css.actionIcon })),
-                react_1.default.createElement("div", { className: css.content },
-                    this.props.children,
-                    this.props.actions && react_1.default.createElement("div", { className: css.actionWrapper }, this.props.actions.map(function (action) {
-                        return react_1.default.createElement(buttons_1.LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css.actionLink, size: '36' });
-                    }))),
-                this.props.onClose && react_1.default.createElement(buttons_1.IconButton, { icon: cross_svg_1.ReactComponent, color: 'default', onClick: this.props.onClose, cx: css.closeIcon }))));
-    };
-    return NotificationCard;
-}(react_1.default.Component));
-exports.NotificationCard = NotificationCard;
-var WarningNotification = function (props) {
-    return react_1.default.createElement(NotificationCard, (0, tslib_1.__assign)({ icon: notification_warning_fill_24_svg_1.ReactComponent, color: 'warning' }, props, { cx: (0, classnames_1.default)(props.cx) }));
-};
-exports.WarningNotification = WarningNotification;
-var SuccessNotification = function (props) {
-    return react_1.default.createElement(NotificationCard, (0, tslib_1.__assign)({ icon: notification_check_circle_fill_24_svg_1.ReactComponent, color: 'success' }, props, { cx: (0, classnames_1.default)(props.cx) }));
-};
-exports.SuccessNotification = SuccessNotification;
-var HintNotification = function (props) {
-    return react_1.default.createElement(NotificationCard, (0, tslib_1.__assign)({ icon: notification_help_fill_24_svg_1.ReactComponent, color: 'info' }, props, { cx: (0, classnames_1.default)(props.cx) }));
-};
-exports.HintNotification = HintNotification;
-var ErrorNotification = function (props) {
-    return react_1.default.createElement(NotificationCard, (0, tslib_1.__assign)({ icon: notification_error_fill_24_svg_1.ReactComponent, color: 'error' }, props, { cx: (0, classnames_1.default)(props.cx) }));
-};
-exports.ErrorNotification = ErrorNotification;
-var ClearNotification = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ClearNotification, _super);
-    function ClearNotification() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ClearNotification.prototype.render = function () {
-        var _this = this;
-        return react_1.default.createElement("div", { className: (0, classnames_1.default)(css.notificationWrapper, css.clearButton) },
-            react_1.default.createElement(buttons_1.LinkButton, { caption: i18n_1.i18n.notificationCard.closeAllNotificationsButton, onClick: function () { return _this.context.uuiNotifications.clearAll(); } }));
-    };
-    ClearNotification.contextType = uui_core_1.UuiContext;
-    return ClearNotification;
-}(react_1.default.Component));
-exports.ClearNotification = ClearNotification;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearNotification = exports.ErrorNotification = exports.HintNotification = exports.SuccessNotification = exports.WarningNotification = exports.NotificationCard = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+var classnames_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! classnames */ "classnames"));
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
+var i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
+var notification_check_circle_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-check_circle-fill-24.svg */ "./icons/notification-check_circle-fill-24.svg");
+var notification_warning_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-warning-fill-24.svg */ "./icons/notification-warning-fill-24.svg");
+var notification_error_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-error-fill-24.svg */ "./icons/notification-error-fill-24.svg");
+var notification_help_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-help-fill-24.svg */ "./icons/notification-help-fill-24.svg");
+var cross_svg_1 = __webpack_require__(/*! ../../icons/snackbar/cross.svg */ "./icons/snackbar/cross.svg");
+__webpack_require__(/*! ../../assets/styles/variables/overlays/notificationCard.scss */ "./assets/styles/variables/overlays/notificationCard.scss");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./NotificationCard.scss */ "./components/overlays/NotificationCard.scss"));
+var NotificationCard = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(NotificationCard, _super);
+    function NotificationCard() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.notificationCardNode = null;
+        return _this;
+    }
+    NotificationCard.prototype.componentDidMount = function () {
+        var _a, _b;
+        (_a = this.notificationCardNode) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.props.clearTimer);
+        (_b = this.notificationCardNode) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.props.refreshTimer);
+    };
+    NotificationCard.prototype.componentWillUnmount = function () {
+        var _a, _b;
+        (_a = this.notificationCardNode) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.props.clearTimer);
+        (_b = this.notificationCardNode) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.props.refreshTimer);
+    };
+    NotificationCard.prototype.render = function () {
+        var _this = this;
+        return (react_1.default.createElement("div", { role: 'alert', className: (0, classnames_1.default)(css.notificationWrapper, 'notification-card-vars', "notification-card-color-".concat(this.props.color), css.root, this.props.cx), ref: function (el) { return _this.notificationCardNode = el; } },
+            react_1.default.createElement("div", { className: css.mainPath },
+                this.props.icon && react_1.default.createElement("div", { className: css.iconWrapper },
+                    react_1.default.createElement(uui_components_1.IconContainer, { icon: this.props.icon, cx: css.actionIcon })),
+                react_1.default.createElement("div", { className: css.content },
+                    this.props.children,
+                    this.props.actions && react_1.default.createElement("div", { className: css.actionWrapper }, this.props.actions.map(function (action) {
+                        return react_1.default.createElement(buttons_1.LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css.actionLink, size: '36' });
+                    }))),
+                this.props.onClose && react_1.default.createElement(buttons_1.IconButton, { icon: cross_svg_1.ReactComponent, color: 'default', onClick: this.props.onClose, cx: css.closeIcon }))));
+    };
+    return NotificationCard;
+}(react_1.default.Component));
+exports.NotificationCard = NotificationCard;
+var WarningNotification = function (props) {
+    return react_1.default.createElement(NotificationCard, (0, tslib_1.__assign)({ icon: notification_warning_fill_24_svg_1.ReactComponent, color: 'warning' }, props, { cx: (0, classnames_1.default)(props.cx) }));
+};
+exports.WarningNotification = WarningNotification;
+var SuccessNotification = function (props) {
+    return react_1.default.createElement(NotificationCard, (0, tslib_1.__assign)({ icon: notification_check_circle_fill_24_svg_1.ReactComponent, color: 'success' }, props, { cx: (0, classnames_1.default)(props.cx) }));
+};
+exports.SuccessNotification = SuccessNotification;
+var HintNotification = function (props) {
+    return react_1.default.createElement(NotificationCard, (0, tslib_1.__assign)({ icon: notification_help_fill_24_svg_1.ReactComponent, color: 'info' }, props, { cx: (0, classnames_1.default)(props.cx) }));
+};
+exports.HintNotification = HintNotification;
+var ErrorNotification = function (props) {
+    return react_1.default.createElement(NotificationCard, (0, tslib_1.__assign)({ icon: notification_error_fill_24_svg_1.ReactComponent, color: 'error' }, props, { cx: (0, classnames_1.default)(props.cx) }));
+};
+exports.ErrorNotification = ErrorNotification;
+var ClearNotification = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ClearNotification, _super);
+    function ClearNotification() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ClearNotification.prototype.render = function () {
+        var _this = this;
+        return react_1.default.createElement("div", { className: (0, classnames_1.default)(css.notificationWrapper, css.clearButton) },
+            react_1.default.createElement(buttons_1.LinkButton, { caption: i18n_1.i18n.notificationCard.closeAllNotificationsButton, onClick: function () { return _this.context.uuiNotifications.clearAll(); } }));
+    };
+    ClearNotification.contextType = uui_core_1.UuiContext;
+    return ClearNotification;
+}(react_1.default.Component));
+exports.ClearNotification = ClearNotification;
 
 
 /***/ }),
@@ -2235,7 +2235,7 @@ exports.ClearNotification = ClearNotification;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_1bHrx"};
+module.exports = {"root":"kbWQN"};
 
 /***/ }),
 
@@ -2247,21 +2247,21 @@ module.exports = {"root":"_1bHrx"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-__webpack_require__(/*! ../../assets/styles/variables/overlays/tooltip.scss */ "./assets/styles/variables/overlays/tooltip.scss");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Tooltip.scss */ "./components/overlays/Tooltip.scss"));
-function applyTooltipMods(mods) {
-    return [
-        'tooltip-vars',
-        css.root,
-    ];
-}
-exports.Tooltip = (0, uui_core_1.withMods)(uui_components_1.Tooltip, applyTooltipMods);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+__webpack_require__(/*! ../../assets/styles/variables/overlays/tooltip.scss */ "./assets/styles/variables/overlays/tooltip.scss");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Tooltip.scss */ "./components/overlays/Tooltip.scss"));
+function applyTooltipMods(mods) {
+    return [
+        'tooltip-vars',
+        css.root,
+    ];
+}
+exports.Tooltip = (0, uui_core_1.withMods)(uui_components_1.Tooltip, applyTooltipMods);
 
 
 /***/ }),
@@ -2274,15 +2274,15 @@ exports.Tooltip = (0, uui_core_1.withMods)(uui_components_1.Tooltip, applyToolti
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Dropdown */ "./components/overlays/Dropdown.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./DropdownContainer */ "./components/overlays/DropdownContainer.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./DropdownMenu */ "./components/overlays/DropdownMenu.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Modals */ "./components/overlays/Modals.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./NotificationCard */ "./components/overlays/NotificationCard.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Tooltip */ "./components/overlays/Tooltip.tsx"), exports);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Dropdown */ "./components/overlays/Dropdown.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./DropdownContainer */ "./components/overlays/DropdownContainer.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./DropdownMenu */ "./components/overlays/DropdownMenu.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Modals */ "./components/overlays/Modals.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./NotificationCard */ "./components/overlays/NotificationCard.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Tooltip */ "./components/overlays/Tooltip.tsx"), exports);
 
 
 /***/ }),
@@ -2295,7 +2295,7 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"body":"_3BQn4","modal":"_1HgAt","search":"_3SHLT","checkbox":"BIAem","search-wrapper":"_2KEr9","searchWrapper":"_2KEr9","search-size-24":"_11BKt","searchSize24":"_11BKt","search-size-30":"YlKNe","searchSize30":"YlKNe","search-size-36":"YQzSQ","searchSize36":"YQzSQ","search-size-42":"_1m7PN","searchSize42":"_1m7PN","no-found-size-24":"_7aNNW","noFoundSize24":"_7aNNW","no-found-size-30":"_1j5AM","noFoundSize30":"_1j5AM","no-found-size-36":"_21NAQ","noFoundSize36":"_21NAQ","no-found-size-42":"_2VkZo","noFoundSize42":"_2VkZo"};
+module.exports = {"body":"_1w_6i","modal":"_2iln0","search":"_1F3xh","checkbox":"_1Gtym","search-wrapper":"mDmYg","searchWrapper":"mDmYg","search-size-24":"_3echr","searchSize24":"_3echr","search-size-30":"_3uhvi","searchSize30":"_3uhvi","search-size-36":"_3tVK8","searchSize36":"_3tVK8","search-size-42":"_2OPzm","searchSize42":"_2OPzm","no-found-size-24":"_1yAkC","noFoundSize24":"_1yAkC","no-found-size-30":"GsOUD","noFoundSize30":"GsOUD","no-found-size-36":"_39r0G","noFoundSize36":"_39r0G","no-found-size-42":"_21F26","noFoundSize42":"_21F26"};
 
 /***/ }),
 
@@ -2307,48 +2307,48 @@ module.exports = {"body":"_3BQn4","modal":"_1HgAt","search":"_3SHLT","checkbox":
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataPickerBody = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DataPickerBody.scss */ "./components/pickers/DataPickerBody.scss"));
-var DataPickerBody = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(DataPickerBody, _super);
-    function DataPickerBody() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.lens = uui_core_1.Lens.onEditableComponent(_this);
-        _this.searchLens = _this.lens.prop('search');
-        return _this;
-    }
-    DataPickerBody.prototype.renderNoFound = function () {
-        if (this.props.renderNotFound) {
-            return this.props.renderNotFound();
-        }
-        return react_1.default.createElement(uui_components_1.FlexCell, { cx: css["no-found-size-".concat(this.props.searchSize || 36)], grow: 1, textAlign: 'center' },
-            react_1.default.createElement(typography_1.Text, { size: this.props.searchSize || '36' }, i18n_1.i18n.dataPickerBody.noRecordsMessage));
-    };
-    DataPickerBody.prototype.render = function () {
-        var value = this.props.value;
-        var searchSize = (0, uui_core_1.isMobile)() ? '48' : (this.props.searchSize || '36');
-        var searchClass = (0, uui_core_1.cx)(css.searchWrapper, css["search-size-".concat(searchSize)]);
-        return react_1.default.createElement(react_1.default.Fragment, null,
-            this.showSearch() && (react_1.default.createElement("div", { key: 'search', className: searchClass },
-                react_1.default.createElement(uui_components_1.FlexCell, { grow: 1 },
-                    react_1.default.createElement(inputs_1.SearchInput, (0, tslib_1.__assign)({ cx: css.search, placeholder: i18n_1.i18n.dataPickerBody.searchPlaceholder }, this.searchLens.toProps(), { onKeyDown: this.searchKeyDown, size: searchSize }))))),
-            react_1.default.createElement(layout_1.FlexRow, { key: 'body', cx: (0, uui_core_1.cx)(css.body, css[this.props.editMode]), rawProps: { style: { maxHeight: this.props.maxHeight } } }, this.props.rowsCount > 0
-                ? react_1.default.createElement(layout_1.VirtualList, (0, tslib_1.__assign)({}, this.lens.toProps(), { rows: this.props.rows, role: "listbox", rawProps: this.props.rawProps, rowsCount: this.props.rowsCount, focusedIndex: value && value.focusedIndex || 0 }))
-                : this.renderNoFound()));
-    };
-    return DataPickerBody;
-}(uui_components_1.PickerBodyBase));
-exports.DataPickerBody = DataPickerBody;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataPickerBody = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
+var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
+var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+var i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DataPickerBody.scss */ "./components/pickers/DataPickerBody.scss"));
+var DataPickerBody = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(DataPickerBody, _super);
+    function DataPickerBody() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.lens = uui_core_1.Lens.onEditableComponent(_this);
+        _this.searchLens = _this.lens.prop('search');
+        return _this;
+    }
+    DataPickerBody.prototype.renderNoFound = function () {
+        if (this.props.renderNotFound) {
+            return this.props.renderNotFound();
+        }
+        return react_1.default.createElement(uui_components_1.FlexCell, { cx: css["no-found-size-".concat(this.props.searchSize || 36)], grow: 1, textAlign: 'center' },
+            react_1.default.createElement(typography_1.Text, { size: this.props.searchSize || '36' }, i18n_1.i18n.dataPickerBody.noRecordsMessage));
+    };
+    DataPickerBody.prototype.render = function () {
+        var value = this.props.value;
+        var searchSize = (0, uui_core_1.isMobile)() ? '48' : (this.props.searchSize || '36');
+        var searchClass = (0, uui_core_1.cx)(css.searchWrapper, css["search-size-".concat(searchSize)]);
+        return react_1.default.createElement(react_1.default.Fragment, null,
+            this.showSearch() && (react_1.default.createElement("div", { key: 'search', className: searchClass },
+                react_1.default.createElement(uui_components_1.FlexCell, { grow: 1 },
+                    react_1.default.createElement(inputs_1.SearchInput, (0, tslib_1.__assign)({ cx: css.search, placeholder: i18n_1.i18n.dataPickerBody.searchPlaceholder }, this.searchLens.toProps(), { onKeyDown: this.searchKeyDown, size: searchSize }))))),
+            react_1.default.createElement(layout_1.FlexRow, { key: 'body', cx: (0, uui_core_1.cx)(css.body, css[this.props.editMode]), rawProps: { style: { maxHeight: this.props.maxHeight } } }, this.props.rowsCount > 0
+                ? react_1.default.createElement(layout_1.VirtualList, (0, tslib_1.__assign)({}, this.lens.toProps(), { rows: this.props.rows, role: "listbox", rawProps: this.props.rawProps, rowsCount: this.props.rowsCount, focusedIndex: value && value.focusedIndex || 0 }))
+                : this.renderNoFound()));
+    };
+    return DataPickerBody;
+}(uui_components_1.PickerBodyBase));
+exports.DataPickerBody = DataPickerBody;
 
 
 /***/ }),
@@ -2361,7 +2361,7 @@ exports.DataPickerBody = DataPickerBody;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"footer-wrapper":"_1uSoB","footerWrapper":"_1uSoB"};
+module.exports = {"footer-wrapper":"_29wE8","footerWrapper":"_29wE8"};
 
 /***/ }),
 
@@ -2373,44 +2373,44 @@ module.exports = {"footer-wrapper":"_1uSoB","footerWrapper":"_1uSoB"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataPickerFooter = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var classnames_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! classnames */ "classnames"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
-var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-var DataPickerFooter_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./DataPickerFooter.scss */ "./components/pickers/DataPickerFooter.scss"));
-var switchSizes = {
-    '24': '12',
-    '36': '18',
-    '42': '24',
-    '48': '24',
-};
-var DataPickerFooterImpl = function (props) {
-    var clearSelection = props.clearSelection, view = props.view, showSelected = props.showSelected;
-    var size = (0, uui_core_1.isMobile)() ? '48' : (props.size || '36');
-    var switchSize = switchSizes[size];
-    var hasSelection = view.getSelectedRows().length > 0;
-    var handleKeyDown = function (e) {
-        if (!e.shiftKey && e.key === 'Tab')
-            e.preventDefault();
-    };
-    return (react_1.default.createElement(layout_1.FlexRow, { padding: '12', cx: (0, classnames_1.default)(DataPickerFooter_scss_1.default.footerWrapper) },
-        !props.hideShowOnlySelected && react_1.default.createElement(inputs_1.Switch, { size: switchSize, value: showSelected.value, isDisabled: !hasSelection, onValueChange: showSelected.onValueChange, label: i18n_1.i18n.pickerInput.showOnlySelectedLabel }),
-        react_1.default.createElement(layout_1.FlexSpacer, null),
-        view.selectAll && (react_1.default.createElement(layout_1.FlexCell, { width: 'auto', alignSelf: 'center' },
-            react_1.default.createElement(buttons_1.LinkButton, { size: size, caption: hasSelection
-                    ? i18n_1.i18n.pickerInput.clearSelectionButton
-                    : i18n_1.i18n.pickerInput.selectAllButton, onClick: hasSelection
-                    ? clearSelection
-                    : function () { return view.selectAll.onValueChange(true); }, rawProps: { onKeyDown: handleKeyDown } })))));
-};
-exports.DataPickerFooter = react_1.default.memo(DataPickerFooterImpl);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataPickerFooter = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+var classnames_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! classnames */ "classnames"));
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
+var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
+var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
+var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
+var DataPickerFooter_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./DataPickerFooter.scss */ "./components/pickers/DataPickerFooter.scss"));
+var switchSizes = {
+    '24': '12',
+    '36': '18',
+    '42': '24',
+    '48': '24',
+};
+var DataPickerFooterImpl = function (props) {
+    var clearSelection = props.clearSelection, view = props.view, showSelected = props.showSelected;
+    var size = (0, uui_core_1.isMobile)() ? '48' : (props.size || '36');
+    var switchSize = switchSizes[size];
+    var hasSelection = view.getSelectedRows().length > 0;
+    var handleKeyDown = function (e) {
+        if (!e.shiftKey && e.key === 'Tab')
+            e.preventDefault();
+    };
+    return (react_1.default.createElement(layout_1.FlexRow, { padding: '12', cx: (0, classnames_1.default)(DataPickerFooter_scss_1.default.footerWrapper) },
+        !props.hideShowOnlySelected && react_1.default.createElement(inputs_1.Switch, { size: switchSize, value: showSelected.value, isDisabled: !hasSelection, onValueChange: showSelected.onValueChange, label: i18n_1.i18n.pickerInput.showOnlySelectedLabel }),
+        react_1.default.createElement(layout_1.FlexSpacer, null),
+        view.selectAll && (react_1.default.createElement(layout_1.FlexCell, { width: 'auto', alignSelf: 'center' },
+            react_1.default.createElement(buttons_1.LinkButton, { size: size, caption: hasSelection
+                    ? i18n_1.i18n.pickerInput.clearSelectionButton
+                    : i18n_1.i18n.pickerInput.selectAllButton, onClick: hasSelection
+                    ? clearSelection
+                    : function () { return view.selectAll.onValueChange(true); }, rawProps: { onKeyDown: handleKeyDown } })))));
+};
+exports.DataPickerFooter = react_1.default.memo(DataPickerFooterImpl);
 
 
 /***/ }),
@@ -2423,7 +2423,7 @@ exports.DataPickerFooter = react_1.default.memo(DataPickerFooterImpl);
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"header":"_3n59A","close":"_1K59J"};
+module.exports = {"header":"_2bMuS","close":"_2HSnN"};
 
 /***/ }),
 
@@ -2435,23 +2435,23 @@ module.exports = {"header":"_3n59A","close":"_1K59J"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataPickerHeader = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var DataPickerHeader_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./DataPickerHeader.scss */ "./components/pickers/DataPickerHeader.scss"));
-var navigation_close_24_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/navigation-close-24.svg */ "../epam-assets/icons/common/navigation-close-24.svg");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-var DataPickerHeaderImpl = function (props) {
-    var title = props.title ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
-    return (react_1.default.createElement(layout_1.FlexRow, { alignItems: 'center', borderBottom: true, size: "48", cx: DataPickerHeader_scss_1.default.header },
-        react_1.default.createElement(typography_1.Text, { font: 'semibold' }, title),
-        react_1.default.createElement(buttons_1.IconButton, { icon: navigation_close_24_svg_1.ReactComponent, onClick: function () { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: DataPickerHeader_scss_1.default.close })));
-};
-exports.DataPickerHeader = react_1.default.memo(DataPickerHeaderImpl);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataPickerHeader = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+var DataPickerHeader_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./DataPickerHeader.scss */ "./components/pickers/DataPickerHeader.scss"));
+var navigation_close_24_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/navigation-close-24.svg */ "../epam-assets/icons/common/navigation-close-24.svg");
+var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
+var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
+var DataPickerHeaderImpl = function (props) {
+    var title = props.title ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
+    return (react_1.default.createElement(layout_1.FlexRow, { alignItems: 'center', borderBottom: true, size: "48", cx: DataPickerHeader_scss_1.default.header },
+        react_1.default.createElement(typography_1.Text, { font: 'semibold' }, title),
+        react_1.default.createElement(buttons_1.IconButton, { icon: navigation_close_24_svg_1.ReactComponent, onClick: function () { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: DataPickerHeader_scss_1.default.close })));
+};
+exports.DataPickerHeader = react_1.default.memo(DataPickerHeaderImpl);
 
 
 /***/ }),
@@ -2464,7 +2464,7 @@ exports.DataPickerHeader = react_1.default.memo(DataPickerHeaderImpl);
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"render-item":"_1hlXk","renderItem":"_1hlXk","icon-wrapper":"_3Bblx","iconWrapper":"_3Bblx","picker-row":"_1C_7h","pickerRow":"_1C_7h"};
+module.exports = {"render-item":"_10_h5","renderItem":"_10_h5","icon-wrapper":"_2KJsb","iconWrapper":"_2KJsb","picker-row":"_2fy5a","pickerRow":"_2fy5a"};
 
 /***/ }),
 
@@ -2476,51 +2476,51 @@ module.exports = {"render-item":"_1hlXk","renderItem":"_1hlXk","icon-wrapper":"_
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataPickerRow = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-var tables_1 = __webpack_require__(/*! ../tables */ "./components/tables/index.ts");
-var notification_done_24_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/notification-done-24.svg */ "../epam-assets/icons/common/notification-done-24.svg");
-var notification_done_18_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/notification-done-18.svg */ "../epam-assets/icons/common/notification-done-18.svg");
-var notification_done_12_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/notification-done-12.svg */ "../epam-assets/icons/common/notification-done-12.svg");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DataPickerRow.scss */ "./components/pickers/DataPickerRow.scss"));
-var DataPickerRow = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(DataPickerRow, _super);
-    function DataPickerRow() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.getIcon = function (size) {
-            switch (size) {
-                case '24': return notification_done_12_svg_1.ReactComponent;
-                case '30': return notification_done_18_svg_1.ReactComponent;
-                case '36': return notification_done_18_svg_1.ReactComponent;
-                case '42': return notification_done_24_svg_1.ReactComponent;
-                default: return notification_done_18_svg_1.ReactComponent;
-            }
-        };
-        _this.column = {
-            key: 'name',
-            grow: 1,
-            render: function (item, rowProps) { return React.createElement("div", { key: rowProps.id, className: css.renderItem },
-                _this.props.renderItem(item, rowProps),
-                React.createElement(layout_1.FlexSpacer, null),
-                (rowProps.isChildrenSelected || rowProps.isSelected) && React.createElement("div", { className: css.iconWrapper },
-                    React.createElement(layout_1.IconContainer, { icon: _this.getIcon(_this.props.size), color: rowProps.isChildrenSelected ? 'default' : 'info' }))); },
-        };
-        _this.renderContent = function () {
-            return React.createElement(tables_1.DataTableCell, { key: 'name', size: _this.props.size || '36', padding: _this.props.padding || '24', isFirstColumn: true, isLastColumn: false, tabIndex: -1, column: _this.column, rowProps: _this.props, alignActions: _this.props.alignActions || 'top' });
-        };
-        return _this;
-    }
-    DataPickerRow.prototype.render = function () {
-        return React.createElement(uui_components_1.DataPickerRow, (0, tslib_1.__assign)({}, this.props, { cx: [css.pickerRow, this.props.cx], renderContent: this.renderContent }));
-    };
-    return DataPickerRow;
-}(React.Component));
-exports.DataPickerRow = DataPickerRow;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataPickerRow = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
+var tables_1 = __webpack_require__(/*! ../tables */ "./components/tables/index.ts");
+var notification_done_24_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/notification-done-24.svg */ "../epam-assets/icons/common/notification-done-24.svg");
+var notification_done_18_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/notification-done-18.svg */ "../epam-assets/icons/common/notification-done-18.svg");
+var notification_done_12_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/notification-done-12.svg */ "../epam-assets/icons/common/notification-done-12.svg");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DataPickerRow.scss */ "./components/pickers/DataPickerRow.scss"));
+var DataPickerRow = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(DataPickerRow, _super);
+    function DataPickerRow() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.getIcon = function (size) {
+            switch (size) {
+                case '24': return notification_done_12_svg_1.ReactComponent;
+                case '30': return notification_done_18_svg_1.ReactComponent;
+                case '36': return notification_done_18_svg_1.ReactComponent;
+                case '42': return notification_done_24_svg_1.ReactComponent;
+                default: return notification_done_18_svg_1.ReactComponent;
+            }
+        };
+        _this.column = {
+            key: 'name',
+            grow: 1,
+            render: function (item, rowProps) { return React.createElement("div", { key: rowProps.id, className: css.renderItem },
+                _this.props.renderItem(item, rowProps),
+                React.createElement(layout_1.FlexSpacer, null),
+                (rowProps.isChildrenSelected || rowProps.isSelected) && React.createElement("div", { className: css.iconWrapper },
+                    React.createElement(layout_1.IconContainer, { icon: _this.getIcon(_this.props.size), color: rowProps.isChildrenSelected ? 'default' : 'info' }))); },
+        };
+        _this.renderContent = function () {
+            return React.createElement(tables_1.DataTableCell, { key: 'name', size: _this.props.size || '36', padding: _this.props.padding || '24', isFirstColumn: true, isLastColumn: false, tabIndex: -1, column: _this.column, rowProps: _this.props, alignActions: _this.props.alignActions || 'top' });
+        };
+        return _this;
+    }
+    DataPickerRow.prototype.render = function () {
+        return React.createElement(uui_components_1.DataPickerRow, (0, tslib_1.__assign)({}, this.props, { cx: [css.pickerRow, this.props.cx], renderContent: this.renderContent }));
+    };
+    return DataPickerRow;
+}(React.Component));
+exports.DataPickerRow = DataPickerRow;
 
 
 /***/ }),
@@ -2533,7 +2533,7 @@ exports.DataPickerRow = DataPickerRow;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"done":"_3MWlw"};
+module.exports = {"done":"_16jfK"};
 
 /***/ }),
 
@@ -2545,24 +2545,24 @@ module.exports = {"done":"_3MWlw"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileDropdownWrapper = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var MobileDropdownWrapper_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./MobileDropdownWrapper.scss */ "./components/pickers/MobileDropdownWrapper.scss"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-var DataPickerHeader_1 = __webpack_require__(/*! ./DataPickerHeader */ "./components/pickers/DataPickerHeader.tsx");
-var MobileDropdownWrapper = function (props) {
-    var isVisible = (0, uui_core_1.isMobile)();
-    (0, uui_core_1.useAppMobileHeight)();
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        isVisible && react_1.default.createElement(DataPickerHeader_1.DataPickerHeader, { title: props.title, close: props.close }),
-        props.children,
-        isVisible && (react_1.default.createElement(buttons_1.LinkButton, { caption: 'DONE', onClick: function () { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: MobileDropdownWrapper_scss_1.default.done, size: '48' }))));
-};
-exports.MobileDropdownWrapper = MobileDropdownWrapper;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileDropdownWrapper = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+var MobileDropdownWrapper_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./MobileDropdownWrapper.scss */ "./components/pickers/MobileDropdownWrapper.scss"));
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
+var DataPickerHeader_1 = __webpack_require__(/*! ./DataPickerHeader */ "./components/pickers/DataPickerHeader.tsx");
+var MobileDropdownWrapper = function (props) {
+    var isVisible = (0, uui_core_1.isMobile)();
+    (0, uui_core_1.useAppMobileHeight)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        isVisible && react_1.default.createElement(DataPickerHeader_1.DataPickerHeader, { title: props.title, close: props.close }),
+        props.children,
+        isVisible && (react_1.default.createElement(buttons_1.LinkButton, { caption: 'DONE', onClick: function () { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: MobileDropdownWrapper_scss_1.default.done, size: '48' }))));
+};
+exports.MobileDropdownWrapper = MobileDropdownWrapper;
 
 
 /***/ }),
@@ -2575,7 +2575,7 @@ exports.MobileDropdownWrapper = MobileDropdownWrapper;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"panel":"_3ne8u","footer-wrapper":"_17Rq7","footerWrapper":"_17Rq7","footer-size-24":"_3B2gX","footerSize24":"_3B2gX","footer-size-30":"_2Wnkk","footerSize30":"_2Wnkk","footer-size-36":"LC6Dm","footerSize36":"LC6Dm","footer-size-42":"_12N-L","footerSize42":"_12N-L","footer-size-48":"_2jRU_","footerSize48":"_2jRU_"};
+module.exports = {"panel":"O_Em0","footer-wrapper":"_1UNHH","footerWrapper":"_1UNHH","footer-size-24":"WwAjC","footerSize24":"WwAjC","footer-size-30":"_3VbgH","footerSize30":"_3VbgH","footer-size-36":"_3BbcU","footerSize36":"_3BbcU","footer-size-42":"_8hnO0","footerSize42":"_8hnO0","footer-size-48":"dJR0O","footerSize48":"dJR0O"};
 
 /***/ }),
 
@@ -2587,83 +2587,83 @@ module.exports = {"panel":"_3ne8u","footer-wrapper":"_17Rq7","footerWrapper":"_1
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PickerInput = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var PickerModal_1 = __webpack_require__(/*! ./PickerModal */ "./components/pickers/PickerModal.tsx");
-var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-var PickerToggler_1 = __webpack_require__(/*! ./PickerToggler */ "./components/pickers/PickerToggler.tsx");
-var DataPickerRow_1 = __webpack_require__(/*! ./DataPickerRow */ "./components/pickers/DataPickerRow.tsx");
-var PickerItem_1 = __webpack_require__(/*! ./PickerItem */ "./components/pickers/PickerItem.tsx");
-var DataPickerBody_1 = __webpack_require__(/*! ./DataPickerBody */ "./components/pickers/DataPickerBody.tsx");
-var DataPickerFooter_1 = __webpack_require__(/*! ./DataPickerFooter */ "./components/pickers/DataPickerFooter.tsx");
-var MobileDropdownWrapper_1 = __webpack_require__(/*! ./MobileDropdownWrapper */ "./components/pickers/MobileDropdownWrapper.tsx");
-var types_1 = __webpack_require__(/*! ../types */ "./components/types.ts");
-var PickerInput_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./PickerInput.scss */ "./components/pickers/PickerInput.scss"));
-var pickerHeight = 300;
-var pickerWidth = 360;
-var PickerInput = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PickerInput, _super);
-    function PickerInput() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.renderItem = function (item, rowProps) {
-            return react_1.default.createElement(PickerItem_1.PickerItem, (0, tslib_1.__assign)({ title: _this.getName(item), size: _this.getRowSize() }, rowProps));
-        };
-        _this.renderRow = function (rowProps) {
-            if (rowProps.isSelectable && _this.isSingleSelect() && _this.props.editMode !== 'modal') {
-                rowProps.onSelect = _this.onSelect;
-            }
-            return _this.props.renderRow ? _this.props.renderRow(rowProps) : (react_1.default.createElement(DataPickerRow_1.DataPickerRow, (0, tslib_1.__assign)({}, rowProps, { key: rowProps.rowKey, borderBottom: 'none', size: _this.getRowSize(), rawProps: { 'aria-selected': rowProps.isSelectable && rowProps.isSelected, role: 'option' }, padding: _this.props.editMode === 'modal' ? '24' : '12', renderItem: _this.renderItem })));
-        };
-        return _this;
-    }
-    PickerInput.prototype.toggleModalOpening = function (opened) {
-        var _this = this;
-        this.context.uuiModals.show(function (props) { return react_1.default.createElement(PickerModal_1.PickerModal, (0, tslib_1.__assign)({}, _this.props, props, { caption: _this.getPlaceholder(), initialValue: _this.props.value, renderRow: _this.renderRow, selectionMode: _this.props.selectionMode, valueType: _this.props.valueType })); })
-            .then(function (newSelection) { return _this.handleSelectionValueChange(newSelection); })
-            .catch(function () { return null; });
-    };
-    PickerInput.prototype.getRowSize = function () {
-        return (0, uui_core_1.isMobile)()
-            ? '48'
-            : this.props.editMode === 'modal'
-                ? '36'
-                : this.props.size;
-    };
-    PickerInput.prototype.getTogglerMods = function () {
-        return {
-            size: this.props.size,
-            mode: this.props.mode ? this.props.mode : types_1.EditMode.FORM,
-        };
-    };
-    PickerInput.prototype.renderFooter = function () {
-        var footerProps = this.getFooterProps();
-        return this.props.renderFooter
-            ? this.props.renderFooter(footerProps)
-            : react_1.default.createElement(DataPickerFooter_1.DataPickerFooter, (0, tslib_1.__assign)({}, footerProps, { size: this.props.size }));
-    };
-    PickerInput.prototype.renderTarget = function (targetProps) {
-        var _this = this;
-        var renderTarget = this.props.renderToggler || (function (props) { return react_1.default.createElement(PickerToggler_1.PickerToggler, (0, tslib_1.__assign)({}, props)); });
-        return (react_1.default.createElement(uui_core_1.IEditableDebouncer, { value: this.state.dataSourceState.search, onValueChange: this.handleTogglerSearchChange, render: function (editableProps) { return renderTarget((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.getTogglerMods()), targetProps), editableProps)); } }));
-    };
-    PickerInput.prototype.renderBody = function (props, rows) {
-        var _this = this;
-        var renderedDataRows = rows.map(function (props) { return _this.renderRow(props); });
-        var maxHeight = (0, uui_core_1.isMobile)() ? document.documentElement.clientHeight : (this.props.dropdownHeight || pickerHeight);
-        var minBodyWidth = (0, uui_core_1.isMobile)() ? document.documentElement.clientWidth : (this.props.minBodyWidth || pickerWidth);
-        return (react_1.default.createElement(layout_1.Panel, { shadow: true, style: { width: props.togglerWidth > minBodyWidth ? props.togglerWidth : minBodyWidth }, rawProps: { tabIndex: -1 }, cx: [PickerInput_scss_1.default.panel, uui_core_1.uuiMarkers.lockFocus], background: true },
-            react_1.default.createElement(MobileDropdownWrapper_1.MobileDropdownWrapper, { title: this.props.entityName, close: function () { return _this.toggleBodyOpening(false); } },
-                react_1.default.createElement(DataPickerBody_1.DataPickerBody, (0, tslib_1.__assign)({}, props, { rows: renderedDataRows, maxHeight: maxHeight, searchSize: this.props.size, editMode: 'dropdown' })),
-                !this.isSingleSelect() && this.renderFooter())));
-    };
-    return PickerInput;
-}(uui_components_1.PickerInputBase));
-exports.PickerInput = PickerInput;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PickerInput = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var PickerModal_1 = __webpack_require__(/*! ./PickerModal */ "./components/pickers/PickerModal.tsx");
+var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
+var PickerToggler_1 = __webpack_require__(/*! ./PickerToggler */ "./components/pickers/PickerToggler.tsx");
+var DataPickerRow_1 = __webpack_require__(/*! ./DataPickerRow */ "./components/pickers/DataPickerRow.tsx");
+var PickerItem_1 = __webpack_require__(/*! ./PickerItem */ "./components/pickers/PickerItem.tsx");
+var DataPickerBody_1 = __webpack_require__(/*! ./DataPickerBody */ "./components/pickers/DataPickerBody.tsx");
+var DataPickerFooter_1 = __webpack_require__(/*! ./DataPickerFooter */ "./components/pickers/DataPickerFooter.tsx");
+var MobileDropdownWrapper_1 = __webpack_require__(/*! ./MobileDropdownWrapper */ "./components/pickers/MobileDropdownWrapper.tsx");
+var types_1 = __webpack_require__(/*! ../types */ "./components/types.ts");
+var PickerInput_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./PickerInput.scss */ "./components/pickers/PickerInput.scss"));
+var pickerHeight = 300;
+var pickerWidth = 360;
+var PickerInput = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(PickerInput, _super);
+    function PickerInput() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.renderItem = function (item, rowProps) {
+            return react_1.default.createElement(PickerItem_1.PickerItem, (0, tslib_1.__assign)({ title: _this.getName(item), size: _this.getRowSize() }, rowProps));
+        };
+        _this.renderRow = function (rowProps) {
+            if (rowProps.isSelectable && _this.isSingleSelect() && _this.props.editMode !== 'modal') {
+                rowProps.onSelect = _this.onSelect;
+            }
+            return _this.props.renderRow ? _this.props.renderRow(rowProps) : (react_1.default.createElement(DataPickerRow_1.DataPickerRow, (0, tslib_1.__assign)({}, rowProps, { key: rowProps.rowKey, borderBottom: 'none', size: _this.getRowSize(), rawProps: { 'aria-selected': rowProps.isSelectable && rowProps.isSelected, role: 'option' }, padding: _this.props.editMode === 'modal' ? '24' : '12', renderItem: _this.renderItem })));
+        };
+        return _this;
+    }
+    PickerInput.prototype.toggleModalOpening = function (opened) {
+        var _this = this;
+        this.context.uuiModals.show(function (props) { return react_1.default.createElement(PickerModal_1.PickerModal, (0, tslib_1.__assign)({}, _this.props, props, { caption: _this.getPlaceholder(), initialValue: _this.props.value, renderRow: _this.renderRow, selectionMode: _this.props.selectionMode, valueType: _this.props.valueType })); })
+            .then(function (newSelection) { return _this.handleSelectionValueChange(newSelection); })
+            .catch(function () { return null; });
+    };
+    PickerInput.prototype.getRowSize = function () {
+        return (0, uui_core_1.isMobile)()
+            ? '48'
+            : this.props.editMode === 'modal'
+                ? '36'
+                : this.props.size;
+    };
+    PickerInput.prototype.getTogglerMods = function () {
+        return {
+            size: this.props.size,
+            mode: this.props.mode ? this.props.mode : types_1.EditMode.FORM,
+        };
+    };
+    PickerInput.prototype.renderFooter = function () {
+        var footerProps = this.getFooterProps();
+        return this.props.renderFooter
+            ? this.props.renderFooter(footerProps)
+            : react_1.default.createElement(DataPickerFooter_1.DataPickerFooter, (0, tslib_1.__assign)({}, footerProps, { size: this.props.size }));
+    };
+    PickerInput.prototype.renderTarget = function (targetProps) {
+        var _this = this;
+        var renderTarget = this.props.renderToggler || (function (props) { return react_1.default.createElement(PickerToggler_1.PickerToggler, (0, tslib_1.__assign)({}, props)); });
+        return (react_1.default.createElement(uui_core_1.IEditableDebouncer, { value: this.state.dataSourceState.search, onValueChange: this.handleTogglerSearchChange, render: function (editableProps) { return renderTarget((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.getTogglerMods()), targetProps), editableProps)); } }));
+    };
+    PickerInput.prototype.renderBody = function (props, rows) {
+        var _this = this;
+        var renderedDataRows = rows.map(function (props) { return _this.renderRow(props); });
+        var maxHeight = (0, uui_core_1.isMobile)() ? document.documentElement.clientHeight : (this.props.dropdownHeight || pickerHeight);
+        var minBodyWidth = (0, uui_core_1.isMobile)() ? document.documentElement.clientWidth : (this.props.minBodyWidth || pickerWidth);
+        return (react_1.default.createElement(layout_1.Panel, { shadow: true, style: { width: props.togglerWidth > minBodyWidth ? props.togglerWidth : minBodyWidth }, rawProps: { tabIndex: -1 }, cx: [PickerInput_scss_1.default.panel, uui_core_1.uuiMarkers.lockFocus], background: true },
+            react_1.default.createElement(MobileDropdownWrapper_1.MobileDropdownWrapper, { title: this.props.entityName, close: function () { return _this.toggleBodyOpening(false); } },
+                react_1.default.createElement(DataPickerBody_1.DataPickerBody, (0, tslib_1.__assign)({}, props, { rows: renderedDataRows, maxHeight: maxHeight, searchSize: this.props.size, editMode: 'dropdown' })),
+                !this.isSingleSelect() && this.renderFooter())));
+    };
+    return PickerInput;
+}(uui_components_1.PickerInputBase));
+exports.PickerInput = PickerInput;
 
 
 /***/ }),
@@ -2676,7 +2676,7 @@ exports.PickerInput = PickerInput;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"ehRSn","multiline-vertical-padding-24":"_2AcvR","multilineVerticalPadding24":"_2AcvR","multiline-vertical-padding-30":"_3FHji","multilineVerticalPadding30":"_3FHji","multiline-vertical-padding-36":"_3nyem","multilineVerticalPadding36":"_3nyem","multiline-vertical-padding-42":"_2lhUZ","multilineVerticalPadding42":"_2lhUZ","multiline-vertical-padding-48":"_3pgmM","multilineVerticalPadding48":"_3pgmM"};
+module.exports = {"root":"_3m3Bc","multiline-vertical-padding-24":"_3YpMu","multilineVerticalPadding24":"_3YpMu","multiline-vertical-padding-30":"_3DHJE","multilineVerticalPadding30":"_3DHJE","multiline-vertical-padding-36":"_2UoxP","multilineVerticalPadding36":"_2UoxP","multiline-vertical-padding-42":"VuZ-u","multilineVerticalPadding42":"VuZ-u","multiline-vertical-padding-48":"_2Wm1O","multilineVerticalPadding48":"_2Wm1O"};
 
 /***/ }),
 
@@ -2688,39 +2688,39 @@ module.exports = {"root":"ehRSn","multiline-vertical-padding-24":"_2AcvR","multi
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PickerItem = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var FlexItems_1 = __webpack_require__(/*! ../layout/FlexItems */ "./components/layout/FlexItems/index.ts");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var widgets_1 = __webpack_require__(/*! ../widgets */ "./components/widgets/index.ts");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./PickerItem.scss */ "./components/pickers/PickerItem.scss"));
-var defaultSize = '36';
-var PickerItem = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PickerItem, _super);
-    function PickerItem() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.getAvatarSize = function (size, isMultiline) {
-            return isMultiline ? size : +size - 6;
-        };
-        return _this;
-    }
-    PickerItem.prototype.render = function () {
-        var _a = this.props, size = _a.size, avatarUrl = _a.avatarUrl, title = _a.title, subtitle = _a.subtitle, isLoading = _a.isLoading, isDisabled = _a.isDisabled;
-        var itemSize = size && size !== 'none' ? size : defaultSize;
-        var isMultiline = !!(title && subtitle);
-        return (React.createElement(FlexItems_1.FlexCell, { width: 'auto', cx: css.root },
-            React.createElement(FlexItems_1.FlexRow, { size: itemSize, cx: isMultiline && css["multiline-vertical-padding-".concat(itemSize)], spacing: '12' },
-                avatarUrl && React.createElement(widgets_1.Avatar, { isLoading: isLoading, img: avatarUrl, size: this.getAvatarSize(itemSize, isMultiline).toString() }),
-                React.createElement(FlexItems_1.FlexCell, { width: 'auto' },
-                    title && React.createElement(typography_1.Text, { size: itemSize, cx: css.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React.createElement(typography_1.TextPlaceholder, { wordsCount: 2 }) : title),
-                    subtitle && React.createElement(typography_1.Text, { size: itemSize, color: 'disabled', cx: css.text }, isLoading ? React.createElement(typography_1.TextPlaceholder, { wordsCount: 2 }) : subtitle)))));
-    };
-    return PickerItem;
-}(React.Component));
-exports.PickerItem = PickerItem;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PickerItem = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+var FlexItems_1 = __webpack_require__(/*! ../layout/FlexItems */ "./components/layout/FlexItems/index.ts");
+var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+var widgets_1 = __webpack_require__(/*! ../widgets */ "./components/widgets/index.ts");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./PickerItem.scss */ "./components/pickers/PickerItem.scss"));
+var defaultSize = '36';
+var PickerItem = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(PickerItem, _super);
+    function PickerItem() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.getAvatarSize = function (size, isMultiline) {
+            return isMultiline ? size : +size - 6;
+        };
+        return _this;
+    }
+    PickerItem.prototype.render = function () {
+        var _a = this.props, size = _a.size, avatarUrl = _a.avatarUrl, title = _a.title, subtitle = _a.subtitle, isLoading = _a.isLoading, isDisabled = _a.isDisabled;
+        var itemSize = size && size !== 'none' ? size : defaultSize;
+        var isMultiline = !!(title && subtitle);
+        return (React.createElement(FlexItems_1.FlexCell, { width: 'auto', cx: css.root },
+            React.createElement(FlexItems_1.FlexRow, { size: itemSize, cx: isMultiline && css["multiline-vertical-padding-".concat(itemSize)], spacing: '12' },
+                avatarUrl && React.createElement(widgets_1.Avatar, { isLoading: isLoading, img: avatarUrl, size: this.getAvatarSize(itemSize, isMultiline).toString() }),
+                React.createElement(FlexItems_1.FlexCell, { width: 'auto' },
+                    title && React.createElement(typography_1.Text, { size: itemSize, cx: css.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React.createElement(typography_1.TextPlaceholder, { wordsCount: 2 }) : title),
+                    subtitle && React.createElement(typography_1.Text, { size: itemSize, color: 'disabled', cx: css.text }, isLoading ? React.createElement(typography_1.TextPlaceholder, { wordsCount: 2 }) : subtitle)))));
+    };
+    return PickerItem;
+}(React.Component));
+exports.PickerItem = PickerItem;
 
 
 /***/ }),
@@ -2733,58 +2733,58 @@ exports.PickerItem = PickerItem;
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PickerList = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-var PickerListItem_1 = __webpack_require__(/*! ./PickerListItem */ "./components/pickers/PickerListItem.tsx");
-var PickerModal_1 = __webpack_require__(/*! ./PickerModal */ "./components/pickers/PickerModal.tsx");
-var PickerList = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PickerList, _super);
-    function PickerList() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.sessionStartTime = (new Date()).getTime();
-        _this.renderRow = function (row) {
-            return react_1.default.createElement(PickerListItem_1.PickerListItem, (0, tslib_1.__assign)({ getName: function (item) { return _this.getName(item); } }, row, { key: row.rowKey }));
-        };
-        _this.handleShowPicker = function () {
-            _this.context.uuiModals
-                .show(function (props) { return (react_1.default.createElement(PickerModal_1.PickerModal, (0, tslib_1.__assign)({}, props, _this.props, { caption: _this.props.placeholder || "Please select ".concat(_this.getEntityName() ? _this.getEntityName() : ""), initialValue: _this.props.value, selectionMode: _this.props.selectionMode, valueType: _this.props.valueType }))); })
-                .then(function (value) {
-                _this.appendLastSelected((0, tslib_1.__spreadArray)([], _this.getSelectedIdsArray(value), true));
-                _this.props.onValueChange(value);
-            });
-        };
-        _this.defaultRenderToggler = function (props) { return (react_1.default.createElement(buttons_1.LinkButton, (0, tslib_1.__assign)({ caption: 'Show all' }, props))); };
-        return _this;
-    }
-    PickerList.prototype.render = function () {
-        var view = this.getView();
-        var viewProps = view.getListProps();
-        var selectedRows = view.getSelectedRows();
-        var rows = this.buildRowsList();
-        var showPicker = viewProps.totalCount == null || viewProps.totalCount > this.getMaxDefaultItems();
-        var renderToggler = this.props.renderModalToggler || this.defaultRenderToggler;
-        var renderRow = this.props.renderRow || this.renderRow;
-        return (react_1.default.createElement("div", null,
-            !rows.length && (this.props.noOptionsMessage ?
-                this.props.noOptionsMessage :
-                react_1.default.createElement(typography_1.Text, { color: 'secondary', size: this.props.size }, "No options available")),
-            rows.map(function (row) { return renderRow(row); }),
-            showPicker && renderToggler({
-                onClick: this.handleShowPicker,
-                caption: this.getModalTogglerCaption(viewProps.totalCount, selectedRows.length),
-            }, selectedRows)));
-    };
-    PickerList.contextType = uui_core_1.UuiContext;
-    return PickerList;
-}(uui_components_1.PickerListBase));
-exports.PickerList = PickerList;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PickerList = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
+var PickerListItem_1 = __webpack_require__(/*! ./PickerListItem */ "./components/pickers/PickerListItem.tsx");
+var PickerModal_1 = __webpack_require__(/*! ./PickerModal */ "./components/pickers/PickerModal.tsx");
+var PickerList = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(PickerList, _super);
+    function PickerList() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.sessionStartTime = (new Date()).getTime();
+        _this.renderRow = function (row) {
+            return react_1.default.createElement(PickerListItem_1.PickerListItem, (0, tslib_1.__assign)({ getName: function (item) { return _this.getName(item); } }, row, { key: row.rowKey }));
+        };
+        _this.handleShowPicker = function () {
+            _this.context.uuiModals
+                .show(function (props) { return (react_1.default.createElement(PickerModal_1.PickerModal, (0, tslib_1.__assign)({}, props, _this.props, { caption: _this.props.placeholder || "Please select ".concat(_this.getEntityName() ? _this.getEntityName() : ""), initialValue: _this.props.value, selectionMode: _this.props.selectionMode, valueType: _this.props.valueType }))); })
+                .then(function (value) {
+                _this.appendLastSelected((0, tslib_1.__spreadArray)([], _this.getSelectedIdsArray(value), true));
+                _this.props.onValueChange(value);
+            });
+        };
+        _this.defaultRenderToggler = function (props) { return (react_1.default.createElement(buttons_1.LinkButton, (0, tslib_1.__assign)({ caption: 'Show all' }, props))); };
+        return _this;
+    }
+    PickerList.prototype.render = function () {
+        var view = this.getView();
+        var viewProps = view.getListProps();
+        var selectedRows = view.getSelectedRows();
+        var rows = this.buildRowsList();
+        var showPicker = viewProps.totalCount == null || viewProps.totalCount > this.getMaxDefaultItems();
+        var renderToggler = this.props.renderModalToggler || this.defaultRenderToggler;
+        var renderRow = this.props.renderRow || this.renderRow;
+        return (react_1.default.createElement("div", null,
+            !rows.length && (this.props.noOptionsMessage ?
+                this.props.noOptionsMessage :
+                react_1.default.createElement(typography_1.Text, { color: 'secondary', size: this.props.size }, "No options available")),
+            rows.map(function (row) { return renderRow(row); }),
+            showPicker && renderToggler({
+                onClick: this.handleShowPicker,
+                caption: this.getModalTogglerCaption(viewProps.totalCount, selectedRows.length),
+            }, selectedRows)));
+    };
+    PickerList.contextType = uui_core_1.UuiContext;
+    return PickerList;
+}(uui_components_1.PickerListBase));
+exports.PickerList = PickerList;
 
 
 /***/ }),
@@ -2797,7 +2797,7 @@ exports.PickerList = PickerList;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"row":"_2kB6c"};
+module.exports = {"row":"TiSCC"};
 
 /***/ }),
 
@@ -2809,40 +2809,40 @@ module.exports = {"row":"_2kB6c"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PickerListItem = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var PickerListItem_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./PickerListItem.scss */ "./components/pickers/PickerListItem.scss"));
-var PickerListItem = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PickerListItem, _super);
-    function PickerListItem() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    PickerListItem.prototype.render = function () {
-        var _this = this;
-        var label;
-        if (this.props.isLoading) {
-            label = react_1.default.createElement(typography_1.TextPlaceholder, { wordsCount: 2 });
-        }
-        else {
-            label = this.props.getName(this.props.value);
-        }
-        var component;
-        if (this.props.checkbox) {
-            component = react_1.default.createElement(inputs_1.Checkbox, (0, tslib_1.__assign)({}, this.props.checkbox, { isDisabled: this.props.isLoading || this.props.checkbox.isDisabled, label: label, value: this.props.isChecked, onValueChange: function () { return _this.props.onCheck(_this.props); } }));
-        }
-        else {
-            component = react_1.default.createElement(inputs_1.RadioInput, { label: label, value: this.props.isSelected, isDisabled: this.props.isLoading || !this.props.isSelectable, onValueChange: function () { return _this.props.onSelect(_this.props); } });
-        }
-        return react_1.default.createElement("div", { className: PickerListItem_scss_1.default.row }, component);
-    };
-    return PickerListItem;
-}(react_1.default.Component));
-exports.PickerListItem = PickerListItem;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PickerListItem = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
+var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+var PickerListItem_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./PickerListItem.scss */ "./components/pickers/PickerListItem.scss"));
+var PickerListItem = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(PickerListItem, _super);
+    function PickerListItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PickerListItem.prototype.render = function () {
+        var _this = this;
+        var label;
+        if (this.props.isLoading) {
+            label = react_1.default.createElement(typography_1.TextPlaceholder, { wordsCount: 2 });
+        }
+        else {
+            label = this.props.getName(this.props.value);
+        }
+        var component;
+        if (this.props.checkbox) {
+            component = react_1.default.createElement(inputs_1.Checkbox, (0, tslib_1.__assign)({}, this.props.checkbox, { isDisabled: this.props.isLoading || this.props.checkbox.isDisabled, label: label, value: this.props.isChecked, onValueChange: function () { return _this.props.onCheck(_this.props); } }));
+        }
+        else {
+            component = react_1.default.createElement(inputs_1.RadioInput, { label: label, value: this.props.isSelected, isDisabled: this.props.isLoading || !this.props.isSelectable, onValueChange: function () { return _this.props.onSelect(_this.props); } });
+        }
+        return react_1.default.createElement("div", { className: PickerListItem_scss_1.default.row }, component);
+    };
+    return PickerListItem;
+}(react_1.default.Component));
+exports.PickerListItem = PickerListItem;
 
 
 /***/ }),
@@ -2855,7 +2855,7 @@ exports.PickerListItem = PickerListItem;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"sub-header-wrapper":"_2JQIM","subHeaderWrapper":"_2JQIM","switch":"_29Vth"};
+module.exports = {"sub-header-wrapper":"_1wDIF","subHeaderWrapper":"_1wDIF","switch":"_164Nb"};
 
 /***/ }),
 
@@ -2867,91 +2867,91 @@ module.exports = {"sub-header-wrapper":"_2JQIM","subHeaderWrapper":"_2JQIM","swi
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PickerModal = exports.PickerModalImpl = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./PickerModal.scss */ "./components/pickers/PickerModal.scss"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var DataPickerBody_1 = __webpack_require__(/*! ./DataPickerBody */ "./components/pickers/DataPickerBody.tsx");
-var FlexItems_1 = __webpack_require__(/*! ../layout/FlexItems */ "./components/layout/FlexItems/index.ts");
-var overlays_1 = __webpack_require__(/*! ../overlays */ "./components/overlays/index.ts");
-var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-var DataPickerRow_1 = __webpack_require__(/*! ./DataPickerRow */ "./components/pickers/DataPickerRow.tsx");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
-var PickerModalImpl = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PickerModalImpl, _super);
-    function PickerModalImpl() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    PickerModalImpl.prototype.renderRow = function (rowProps) {
-        var _this = this;
-        return this.props.renderRow ? this.props.renderRow(rowProps) : (React.createElement(DataPickerRow_1.DataPickerRow, (0, tslib_1.__assign)({}, rowProps, { key: rowProps.rowKey, borderBottom: 'none', padding: '24', size: '36', renderItem: function (i) { return React.createElement(typography_1.Text, { size: '36' }, rowProps.isLoading ? React.createElement(typography_1.TextPlaceholder, { wordsCount: 2 }) : _this.getName(i)); } })));
-    };
-    PickerModalImpl.prototype.renderFooter = function (selectedDataRows) {
-        var _this = this;
-        var hasSelection = selectedDataRows.length > 0;
-        var view = this.getView();
-        return React.createElement(React.Fragment, null,
-            view.selectAll && React.createElement(buttons_1.LinkButton, { caption: hasSelection ? i18n_1.i18n.pickerModal.clearAllButton : i18n_1.i18n.pickerModal.selectAllButton, onClick: hasSelection ? function () { return _this.clearSelection(); } : function () { return view.selectAll.onValueChange(true); } }),
-            React.createElement(FlexItems_1.FlexSpacer, null),
-            React.createElement(buttons_1.Button, { mode: 'outline', color: 'secondary', caption: i18n_1.i18n.pickerModal.cancelButton, onClick: function () { return _this.props.abort(); } }),
-            React.createElement(buttons_1.Button, { color: 'accent', caption: i18n_1.i18n.pickerModal.selectButton, onClick: function () { return _this.props.success(null); } }));
-    };
-    PickerModalImpl.prototype.render = function () {
-        var _this = this;
-        var view = this.getView();
-        var dataRows = this.getRows();
-        var selectedDataRows = view.getSelectedRows();
-        var rows = dataRows.map(function (props) { return _this.renderRow(props); });
-        return (React.createElement(overlays_1.ModalBlocker, (0, tslib_1.__assign)({}, this.props),
-            React.createElement(overlays_1.ModalWindow, { width: 600, height: 700 },
-                React.createElement(overlays_1.ModalHeader, { borderBottom: true, title: this.props.caption || i18n_1.i18n.pickerModal.headerTitle, onClose: function () { return _this.props.abort(); } }),
-                React.createElement(FlexItems_1.FlexCell, { cx: css.subHeaderWrapper },
-                    React.createElement(FlexItems_1.FlexRow, { vPadding: '24' },
-                        React.createElement(inputs_1.SearchInput, (0, tslib_1.__assign)({}, this.lens.prop('dataSourceState').prop('search').toProps(), { onKeyDown: function (e) { return (0, uui_components_1.handleDataSourceKeyboard)({
-                                value: _this.getDataSourceState(),
-                                onValueChange: _this.handleDataSourceValueChange,
-                                listView: view,
-                                rows: dataRows,
-                                editMode: 'modal',
-                            }, e); }, autoFocus: true, placeholder: i18n_1.i18n.pickerModal.searchPlaceholder }))),
-                    !this.isSingleSelect() && React.createElement(inputs_1.Switch, (0, tslib_1.__assign)({ cx: css.switch, size: '18' }, this.stateLens.prop('showSelected').toProps(), { isDisabled: selectedDataRows.length < 1, label: 'Show only selected' })),
-                    this.props.renderFilter && React.createElement(FlexItems_1.FlexCell, { grow: 2 }, this.props.renderFilter(this.lens.prop('dataSourceState').prop('filter').toProps()))),
-                React.createElement(DataPickerBody_1.DataPickerBody, (0, tslib_1.__assign)({}, this.getListProps(), { value: this.getDataSourceState(), onValueChange: this.handleDataSourceValueChange, search: this.lens.prop('dataSourceState').prop('search').toProps(), showSearch: false, rows: rows, renderNotFound: this.props.renderNotFound && (function () { return _this.props.renderNotFound({
-                        search: _this.state.dataSourceState.search,
-                        onClose: function () { return _this.props.success(selectedDataRows); },
-                    }); }), editMode: 'modal' })),
-                React.createElement(overlays_1.ModalFooter, { borderTop: true, padding: '24', vPadding: '24' }, this.props.renderFooter
-                    ? this.props.renderFooter({
-                        view: view,
-                        showSelected: this.lens.prop('showSelected').toProps(),
-                        clearSelection: this.clearSelection,
-                    })
-                    : this.renderFooter(selectedDataRows)))));
-    };
-    return PickerModalImpl;
-}(uui_components_1.PickerModalBase));
-exports.PickerModalImpl = PickerModalImpl;
-var PickerModal = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PickerModal, _super);
-    function PickerModal() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = { selection: _this.props.initialValue };
-        _this.lens = uui_core_1.Lens.onState(_this);
-        return _this;
-    }
-    PickerModal.prototype.render = function () {
-        var _this = this;
-        return React.createElement(PickerModalImpl, (0, tslib_1.__assign)({}, this.props, this.lens.prop('selection').toProps(), { success: function () { return _this.props.success(_this.state.selection); } }));
-    };
-    return PickerModal;
-}(React.Component));
-exports.PickerModal = PickerModal;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PickerModal = exports.PickerModalImpl = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./PickerModal.scss */ "./components/pickers/PickerModal.scss"));
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var DataPickerBody_1 = __webpack_require__(/*! ./DataPickerBody */ "./components/pickers/DataPickerBody.tsx");
+var FlexItems_1 = __webpack_require__(/*! ../layout/FlexItems */ "./components/layout/FlexItems/index.ts");
+var overlays_1 = __webpack_require__(/*! ../overlays */ "./components/overlays/index.ts");
+var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
+var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
+var DataPickerRow_1 = __webpack_require__(/*! ./DataPickerRow */ "./components/pickers/DataPickerRow.tsx");
+var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+var i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
+var PickerModalImpl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(PickerModalImpl, _super);
+    function PickerModalImpl() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PickerModalImpl.prototype.renderRow = function (rowProps) {
+        var _this = this;
+        return this.props.renderRow ? this.props.renderRow(rowProps) : (React.createElement(DataPickerRow_1.DataPickerRow, (0, tslib_1.__assign)({}, rowProps, { key: rowProps.rowKey, borderBottom: 'none', padding: '24', size: '36', renderItem: function (i) { return React.createElement(typography_1.Text, { size: '36' }, rowProps.isLoading ? React.createElement(typography_1.TextPlaceholder, { wordsCount: 2 }) : _this.getName(i)); } })));
+    };
+    PickerModalImpl.prototype.renderFooter = function (selectedDataRows) {
+        var _this = this;
+        var hasSelection = selectedDataRows.length > 0;
+        var view = this.getView();
+        return React.createElement(React.Fragment, null,
+            view.selectAll && React.createElement(buttons_1.LinkButton, { caption: hasSelection ? i18n_1.i18n.pickerModal.clearAllButton : i18n_1.i18n.pickerModal.selectAllButton, onClick: hasSelection ? function () { return _this.clearSelection(); } : function () { return view.selectAll.onValueChange(true); } }),
+            React.createElement(FlexItems_1.FlexSpacer, null),
+            React.createElement(buttons_1.Button, { mode: 'outline', color: 'secondary', caption: i18n_1.i18n.pickerModal.cancelButton, onClick: function () { return _this.props.abort(); } }),
+            React.createElement(buttons_1.Button, { color: 'accent', caption: i18n_1.i18n.pickerModal.selectButton, onClick: function () { return _this.props.success(null); } }));
+    };
+    PickerModalImpl.prototype.render = function () {
+        var _this = this;
+        var view = this.getView();
+        var dataRows = this.getRows();
+        var selectedDataRows = view.getSelectedRows();
+        var rows = dataRows.map(function (props) { return _this.renderRow(props); });
+        return (React.createElement(overlays_1.ModalBlocker, (0, tslib_1.__assign)({}, this.props),
+            React.createElement(overlays_1.ModalWindow, { width: 600, height: 700 },
+                React.createElement(overlays_1.ModalHeader, { borderBottom: true, title: this.props.caption || i18n_1.i18n.pickerModal.headerTitle, onClose: function () { return _this.props.abort(); } }),
+                React.createElement(FlexItems_1.FlexCell, { cx: css.subHeaderWrapper },
+                    React.createElement(FlexItems_1.FlexRow, { vPadding: '24' },
+                        React.createElement(inputs_1.SearchInput, (0, tslib_1.__assign)({}, this.lens.prop('dataSourceState').prop('search').toProps(), { onKeyDown: function (e) { return (0, uui_components_1.handleDataSourceKeyboard)({
+                                value: _this.getDataSourceState(),
+                                onValueChange: _this.handleDataSourceValueChange,
+                                listView: view,
+                                rows: dataRows,
+                                editMode: 'modal',
+                            }, e); }, autoFocus: true, placeholder: i18n_1.i18n.pickerModal.searchPlaceholder }))),
+                    !this.isSingleSelect() && React.createElement(inputs_1.Switch, (0, tslib_1.__assign)({ cx: css.switch, size: '18' }, this.stateLens.prop('showSelected').toProps(), { isDisabled: selectedDataRows.length < 1, label: 'Show only selected' })),
+                    this.props.renderFilter && React.createElement(FlexItems_1.FlexCell, { grow: 2 }, this.props.renderFilter(this.lens.prop('dataSourceState').prop('filter').toProps()))),
+                React.createElement(DataPickerBody_1.DataPickerBody, (0, tslib_1.__assign)({}, this.getListProps(), { value: this.getDataSourceState(), onValueChange: this.handleDataSourceValueChange, search: this.lens.prop('dataSourceState').prop('search').toProps(), showSearch: false, rows: rows, renderNotFound: this.props.renderNotFound && (function () { return _this.props.renderNotFound({
+                        search: _this.state.dataSourceState.search,
+                        onClose: function () { return _this.props.success(selectedDataRows); },
+                    }); }), editMode: 'modal' })),
+                React.createElement(overlays_1.ModalFooter, { borderTop: true, padding: '24', vPadding: '24' }, this.props.renderFooter
+                    ? this.props.renderFooter({
+                        view: view,
+                        showSelected: this.lens.prop('showSelected').toProps(),
+                        clearSelection: this.clearSelection,
+                    })
+                    : this.renderFooter(selectedDataRows)))));
+    };
+    return PickerModalImpl;
+}(uui_components_1.PickerModalBase));
+exports.PickerModalImpl = PickerModalImpl;
+var PickerModal = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(PickerModal, _super);
+    function PickerModal() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { selection: _this.props.initialValue };
+        _this.lens = uui_core_1.Lens.onState(_this);
+        return _this;
+    }
+    PickerModal.prototype.render = function () {
+        var _this = this;
+        return React.createElement(PickerModalImpl, (0, tslib_1.__assign)({}, this.props, this.lens.prop('selection').toProps(), { success: function () { return _this.props.success(_this.state.selection); } }));
+    };
+    return PickerModal;
+}(React.Component));
+exports.PickerModal = PickerModal;
 
 
 /***/ }),
@@ -2964,7 +2964,7 @@ exports.PickerModal = PickerModal;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_2F4yZ","mode-form":"_2U-GG","modeForm":"_2U-GG","mode-cell":"xy9VY","modeCell":"xy9VY","size-24":"_2B4pQ","size24":"_2B4pQ","size-30":"_2p5iZ","size30":"_2p5iZ","size-36":"_3g2bW","size36":"_3g2bW","size-42":"_3NKMZ","size42":"_3NKMZ","size-48":"yGgJz","size48":"yGgJz"};
+module.exports = {"root":"_2sWYI","mode-form":"_3fUSZ","modeForm":"_3fUSZ","mode-cell":"_1tjES","modeCell":"_1tjES","size-24":"_2aLMH","size24":"_2aLMH","size-30":"_15sAT","size30":"_15sAT","size-36":"H38F_","size36":"H38F_","size-42":"fYfV2","size42":"fYfV2","size-48":"_1eRFO","size48":"_1eRFO"};
 
 /***/ }),
 
@@ -2976,63 +2976,63 @@ module.exports = {"root":"_2F4yZ","mode-form":"_2U-GG","modeForm":"_2U-GG","mode
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PickerToggler = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-var widgets_1 = __webpack_require__(/*! ../widgets */ "./components/widgets/index.ts");
-var types = (0, tslib_1.__importStar)(__webpack_require__(/*! ../types */ "./components/types.ts"));
-__webpack_require__(/*! ../../assets/styles/variables/pickers/pickerToggler.scss */ "./assets/styles/variables/pickers/pickerToggler.scss");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./PickerToggler.scss */ "./components/pickers/PickerToggler.scss"));
-var defaultSize = '36';
-var defaultMode = types.EditMode.FORM;
-function applyPickerTogglerMods(mods) {
-    return [
-        'picker-toggler-vars',
-        css.root,
-        css['size-' + (mods.size || defaultSize)],
-        css['mode-' + (mods.mode || defaultMode)],
-    ];
-}
-function PickerTogglerComponent(props, ref) {
-    var getPickerTogglerButtonSize = function (propSize) {
-        switch (propSize) {
-            case '48':
-                return '42';
-            case '42':
-                return '36';
-            case '36':
-                return '30';
-            case '30':
-                return '24';
-            case '24':
-                return '18';
-        }
-    };
-    var getCaption = function (row) {
-        var _a;
-        var maxItems = (props.maxItems || props.maxItems === 0) ? props.maxItems : 100;
-        if (row.isLoading) {
-            return React.createElement(typography_1.TextPlaceholder, null);
-        }
-        else if (!props.getName || ((_a = props.selection) === null || _a === void 0 ? void 0 : _a.length) > maxItems) {
-            return row.value;
-        }
-        else {
-            return props.getName(row.value);
-        }
-    };
-    var renderItem = function (row) { return (React.createElement(widgets_1.Tag, { key: row.id, caption: getCaption(row), tabIndex: -1, size: props.size ? getPickerTogglerButtonSize(props.size) : '30', onClear: function (e) {
-            row.onCheck && row.onCheck(row);
-            e.stopPropagation();
-        } })); };
-    return (React.createElement(uui_components_1.PickerToggler, (0, tslib_1.__assign)({}, props, { ref: ref, cx: [applyPickerTogglerMods(props), props.cx], renderItem: !!props.renderItem ? props.renderItem : renderItem, getName: function (row) { return props.getName ? props.getName(row.value) : row.value; }, cancelIcon: icons_1.systemIcons[props.size || defaultSize].clear, dropdownIcon: icons_1.systemIcons[props.size || defaultSize].foldingArrow })));
-}
-exports.PickerToggler = React.forwardRef(PickerTogglerComponent);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PickerToggler = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+var widgets_1 = __webpack_require__(/*! ../widgets */ "./components/widgets/index.ts");
+var types = (0, tslib_1.__importStar)(__webpack_require__(/*! ../types */ "./components/types.ts"));
+__webpack_require__(/*! ../../assets/styles/variables/pickers/pickerToggler.scss */ "./assets/styles/variables/pickers/pickerToggler.scss");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./PickerToggler.scss */ "./components/pickers/PickerToggler.scss"));
+var defaultSize = '36';
+var defaultMode = types.EditMode.FORM;
+function applyPickerTogglerMods(mods) {
+    return [
+        'picker-toggler-vars',
+        css.root,
+        css['size-' + (mods.size || defaultSize)],
+        css['mode-' + (mods.mode || defaultMode)],
+    ];
+}
+function PickerTogglerComponent(props, ref) {
+    var getPickerTogglerButtonSize = function (propSize) {
+        switch (propSize) {
+            case '48':
+                return '42';
+            case '42':
+                return '36';
+            case '36':
+                return '30';
+            case '30':
+                return '24';
+            case '24':
+                return '18';
+        }
+    };
+    var getCaption = function (row) {
+        var _a;
+        var maxItems = (props.maxItems || props.maxItems === 0) ? props.maxItems : 100;
+        if (row.isLoading) {
+            return React.createElement(typography_1.TextPlaceholder, null);
+        }
+        else if (!props.getName || ((_a = props.selection) === null || _a === void 0 ? void 0 : _a.length) > maxItems) {
+            return row.value;
+        }
+        else {
+            return props.getName(row.value);
+        }
+    };
+    var renderItem = function (row) { return (React.createElement(widgets_1.Tag, { key: row.id, caption: getCaption(row), tabIndex: -1, size: props.size ? getPickerTogglerButtonSize(props.size) : '30', onClear: function (e) {
+            row.onCheck && row.onCheck(row);
+            e.stopPropagation();
+        } })); };
+    return (React.createElement(uui_components_1.PickerToggler, (0, tslib_1.__assign)({}, props, { ref: ref, cx: [applyPickerTogglerMods(props), props.cx], renderItem: !!props.renderItem ? props.renderItem : renderItem, getName: function (row) { return props.getName ? props.getName(row.value) : row.value; }, cancelIcon: icons_1.systemIcons[props.size || defaultSize].clear, dropdownIcon: icons_1.systemIcons[props.size || defaultSize].foldingArrow })));
+}
+exports.PickerToggler = React.forwardRef(PickerTogglerComponent);
 
 
 /***/ }),
@@ -3045,20 +3045,20 @@ exports.PickerToggler = React.forwardRef(PickerTogglerComponent);
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./DataPickerBody */ "./components/pickers/DataPickerBody.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./DataPickerFooter */ "./components/pickers/DataPickerFooter.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./DataPickerHeader */ "./components/pickers/DataPickerHeader.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./DataPickerRow */ "./components/pickers/DataPickerRow.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./MobileDropdownWrapper */ "./components/pickers/MobileDropdownWrapper.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./PickerInput */ "./components/pickers/PickerInput.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./PickerItem */ "./components/pickers/PickerItem.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./PickerList */ "./components/pickers/PickerList.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./PickerListItem */ "./components/pickers/PickerListItem.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./PickerModal */ "./components/pickers/PickerModal.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./PickerToggler */ "./components/pickers/PickerToggler.tsx"), exports);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./DataPickerBody */ "./components/pickers/DataPickerBody.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./DataPickerFooter */ "./components/pickers/DataPickerFooter.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./DataPickerHeader */ "./components/pickers/DataPickerHeader.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./DataPickerRow */ "./components/pickers/DataPickerRow.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./MobileDropdownWrapper */ "./components/pickers/MobileDropdownWrapper.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./PickerInput */ "./components/pickers/PickerInput.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./PickerItem */ "./components/pickers/PickerItem.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./PickerList */ "./components/pickers/PickerList.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./PickerListItem */ "./components/pickers/PickerListItem.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./PickerModal */ "./components/pickers/PickerModal.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./PickerToggler */ "./components/pickers/PickerToggler.tsx"), exports);
 
 
 /***/ }),
@@ -3071,7 +3071,7 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"cell":"_29rEX","wrapper":"_3hI9K","align-widgets-top":"_1dxrc","alignWidgetsTop":"_1dxrc","size-24":"_3Rp3B","size24":"_3Rp3B","folding-arrow":"_1qItk","foldingArrow":"_1qItk","size-30":"CqqlN","size30":"CqqlN","size-36":"_3dp77","size36":"_3dp77","size-42":"V4fbV","size42":"V4fbV","size-48":"b2TVp","size48":"b2TVp","size-60":"BXKva","size60":"BXKva","align-widgets-center":"_1lqkp","alignWidgetsCenter":"_1lqkp","padding-12":"_1-qJW","padding12":"_1-qJW","padding-24":"_1i0M7","padding24":"_1i0M7","padding-left-12":"_36nYk","paddingLeft12":"_36nYk","padding-left-24":"_8K705","paddingLeft24":"_8K705","padding-right-24":"_3l8Zq","paddingRight24":"_3l8Zq","drag-handle":"_3QQk9","dragHandle":"_3QQk9","checkbox":"hJVOX","indent":"_1SU7I","folding-arrow-12":"Alrfc","foldingArrow12":"Alrfc","folding-arrow-18":"_16fl3","foldingArrow18":"_16fl3"};
+module.exports = {"cell":"_2TaeE","wrapper":"_3JLiI","align-widgets-top":"_1XCUA","alignWidgetsTop":"_1XCUA","size-24":"_2AyPy","size24":"_2AyPy","folding-arrow":"_2LUe_","foldingArrow":"_2LUe_","size-30":"_2MiU-","size30":"_2MiU-","size-36":"HdQUn","size36":"HdQUn","size-42":"_33MIS","size42":"_33MIS","size-48":"_1hfbP","size48":"_1hfbP","size-60":"_1ARaN","size60":"_1ARaN","align-widgets-center":"_1I_ky","alignWidgetsCenter":"_1I_ky","padding-12":"tZd1n","padding12":"tZd1n","padding-24":"_1pmye","padding24":"_1pmye","padding-left-12":"n-jzT","paddingLeft12":"n-jzT","padding-left-24":"lifVy","paddingLeft24":"lifVy","padding-right-24":"_3O2yK","paddingRight24":"_3O2yK","drag-handle":"_2l0ao","dragHandle":"_2l0ao","checkbox":"_3F2al","indent":"_2KrZ9","folding-arrow-12":"_2pyhR","foldingArrow12":"_2pyhR","folding-arrow-18":"_1Iy6G","foldingArrow18":"_1Iy6G"};
 
 /***/ }),
 
@@ -3083,48 +3083,48 @@ module.exports = {"cell":"_29rEX","wrapper":"_3hI9K","align-widgets-top":"_1dxrc
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataTableCell = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-var tree_folding_arrow_svg_1 = __webpack_require__(/*! ../../icons/tree_folding_arrow.svg */ "./icons/tree_folding_arrow.svg");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DataTableCell.scss */ "./components/tables/DataTableCell.scss"));
-var DataTableCell = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(DataTableCell, _super);
-    function DataTableCell() {
-        var _a, _b, _c;
-        var _this = _super.apply(this, arguments) || this;
-        _this.hasDepsWidgets = !!(((_b = (_a = _this.props.rowProps) === null || _a === void 0 ? void 0 : _a.checkbox) === null || _b === void 0 ? void 0 : _b.isVisible) || ((_c = _this.props.rowProps) === null || _c === void 0 ? void 0 : _c.indent));
-        _this.isDraggable = function () { var _a, _b; return !!((_b = (_a = _this.props.rowProps) === null || _a === void 0 ? void 0 : _a.dnd) === null || _b === void 0 ? void 0 : _b.srcData); };
-        _this.getContent = function () {
-            var _a;
-            var row = _this.props.rowProps;
-            var additionalItemSize = +_this.props.size < 30 ? '12' : '18';
-            var cellContent = row.isLoading
-                ? React.createElement(typography_1.Text, { size: _this.props.size != '60' ? _this.props.size : '48' },
-                    React.createElement(typography_1.TextPlaceholder, null))
-                : _this.props.column.render(_this.props.rowProps.value, _this.props.rowProps);
-            return (React.createElement(React.Fragment, null,
-                _this.props.isFirstColumn && _this.isDraggable() && React.createElement(uui_components_1.DragHandle, { cx: css.dragHandle }),
-                _this.props.isFirstColumn && ((_a = row === null || row === void 0 ? void 0 : row.checkbox) === null || _a === void 0 ? void 0 : _a.isVisible) && React.createElement(inputs_1.Checkbox, { key: 'cb', cx: css.checkbox, tabIndex: _this.props.tabIndex, size: additionalItemSize, value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: function () { return row.onCheck(row); }, isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid }),
-                _this.props.isFirstColumn && row.indent > 0 && (React.createElement("div", { key: 'fold', className: css.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable &&
-                    React.createElement(uui_components_1.IconContainer, { key: 'icon', icon: tree_folding_arrow_svg_1.ReactComponent, cx: [css.foldingArrow, css["folding-arrow-".concat(additionalItemSize)], uui_core_1.uuiMarkers.clickable], rotate: row.isFolded ? '90ccw' : '0', onClick: function () { return row.onFold(row); } }))),
-                cellContent));
-        };
-        return _this;
-    }
-    DataTableCell.prototype.render = function () {
-        return (React.createElement(layout_1.FlexCell, (0, tslib_1.__assign)({}, this.props.column, { rawProps: { role: this.props.role }, cx: (0, uui_core_1.cx)(css.cell, this.props.isFirstColumn && this.hasDepsWidgets && css.wrapper, css['size-' + (this.props.size || '36')], css["padding-".concat(this.props.padding || '12')], this.props.isFirstColumn && css["padding-left-".concat(this.props.padding || '24')], this.props.isLastColumn && css['padding-right-24'], this.props.column.cx, css["align-widgets-".concat(this.props.alignActions || 'top')]) }), this.getContent()));
-    };
-    return DataTableCell;
-}(React.Component));
-exports.DataTableCell = DataTableCell;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTableCell = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
+var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
+var tree_folding_arrow_svg_1 = __webpack_require__(/*! ../../icons/tree_folding_arrow.svg */ "./icons/tree_folding_arrow.svg");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DataTableCell.scss */ "./components/tables/DataTableCell.scss"));
+var DataTableCell = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(DataTableCell, _super);
+    function DataTableCell() {
+        var _a, _b, _c;
+        var _this = _super.apply(this, arguments) || this;
+        _this.hasDepsWidgets = !!(((_b = (_a = _this.props.rowProps) === null || _a === void 0 ? void 0 : _a.checkbox) === null || _b === void 0 ? void 0 : _b.isVisible) || ((_c = _this.props.rowProps) === null || _c === void 0 ? void 0 : _c.indent));
+        _this.isDraggable = function () { var _a, _b; return !!((_b = (_a = _this.props.rowProps) === null || _a === void 0 ? void 0 : _a.dnd) === null || _b === void 0 ? void 0 : _b.srcData); };
+        _this.getContent = function () {
+            var _a;
+            var row = _this.props.rowProps;
+            var additionalItemSize = +_this.props.size < 30 ? '12' : '18';
+            var cellContent = row.isLoading
+                ? React.createElement(typography_1.Text, { size: _this.props.size != '60' ? _this.props.size : '48' },
+                    React.createElement(typography_1.TextPlaceholder, null))
+                : _this.props.column.render(_this.props.rowProps.value, _this.props.rowProps);
+            return (React.createElement(React.Fragment, null,
+                _this.props.isFirstColumn && _this.isDraggable() && React.createElement(uui_components_1.DragHandle, { cx: css.dragHandle }),
+                _this.props.isFirstColumn && ((_a = row === null || row === void 0 ? void 0 : row.checkbox) === null || _a === void 0 ? void 0 : _a.isVisible) && React.createElement(inputs_1.Checkbox, { key: 'cb', cx: css.checkbox, tabIndex: _this.props.tabIndex, size: additionalItemSize, value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: function () { return row.onCheck(row); }, isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid }),
+                _this.props.isFirstColumn && row.indent > 0 && (React.createElement("div", { key: 'fold', className: css.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable &&
+                    React.createElement(uui_components_1.IconContainer, { key: 'icon', icon: tree_folding_arrow_svg_1.ReactComponent, cx: [css.foldingArrow, css["folding-arrow-".concat(additionalItemSize)], uui_core_1.uuiMarkers.clickable], rotate: row.isFolded ? '90ccw' : '0', onClick: function () { return row.onFold(row); } }))),
+                cellContent));
+        };
+        return _this;
+    }
+    DataTableCell.prototype.render = function () {
+        return (React.createElement(layout_1.FlexCell, (0, tslib_1.__assign)({}, this.props.column, { rawProps: { role: this.props.role }, cx: (0, uui_core_1.cx)(css.cell, this.props.isFirstColumn && this.hasDepsWidgets && css.wrapper, css['size-' + (this.props.size || '36')], css["padding-".concat(this.props.padding || '12')], this.props.isFirstColumn && css["padding-left-".concat(this.props.padding || '24')], this.props.isLastColumn && css['padding-right-24'], this.props.column.cx, css["align-widgets-".concat(this.props.alignActions || 'top')]) }), this.getContent()));
+    };
+    return DataTableCell;
+}(React.Component));
+exports.DataTableCell = DataTableCell;
 
 
 /***/ }),
@@ -3137,7 +3137,7 @@ exports.DataTableCell = DataTableCell;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"container":"_1pu2g","target":"_1EnC3","panel":"_1R-Sm","divider":"VoHY9","input":"IN50z","notification":"_2R4Rw"};
+module.exports = {"container":"_1N2lQ","target":"_2Fjjz","panel":"eFjl6","divider":"_27ocj","input":"_3DwkO","notification":"XV29c"};
 
 /***/ }),
 
@@ -3149,70 +3149,70 @@ module.exports = {"container":"_1pu2g","target":"_1EnC3","panel":"_1R-Sm","divid
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Preset = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var __1 = __webpack_require__(/*! ../../ */ "./components/index.ts");
-var navigation_more_vert_12_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/navigation-more_vert-12.svg */ "../epam-assets/icons/common/navigation-more_vert-12.svg");
-var Preset_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./Preset.scss */ "./components/tables/Presets/Preset.scss"));
-var Preset = function (_a) {
-    var preset = _a.preset, isActive = _a.isActive, hasChanged = _a.hasChanged, choosePreset = _a.choosePreset, duplicatePreset = _a.duplicatePreset, deletePreset = _a.deletePreset, updatePreset = _a.updatePreset, resetToDefault = _a.resetToDefault;
-    var _b = (0, react_1.useState)(false), isRenaming = _b[0], setIsRenaming = _b[1];
-    var _c = (0, react_1.useState)(""), renamingValue = _c[0], setRenamingValue = _c[1];
-    var handleChoose = (0, react_1.useCallback)(function () { return choosePreset(preset); }, [preset, choosePreset]);
-    var handleUpdate = (0, react_1.useCallback)(function () { return updatePreset(preset); }, [preset, updatePreset]);
-    var acceptRenaming = (0, react_1.useCallback)(function () {
-        if (renamingValue) {
-            var newPreset = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, preset), { name: renamingValue });
-            updatePreset(newPreset);
-        }
-        setIsRenaming(false);
-    }, [renamingValue, updatePreset]);
-    var renderBody = (0, react_1.useCallback)(function (props) {
-        var handleDuplicate = function () {
-            duplicatePreset(preset);
-            props.onClose();
-        };
-        var startRenaming = function () {
-            setIsRenaming(true);
-            setRenamingValue(preset.name);
-            props.onClose();
-        };
-        var handleDelete = function () {
-            deletePreset(preset);
-            if (isActive) {
-                resetToDefault();
-            }
-            props.onClose();
-        };
-        var update = function () {
-            handleUpdate();
-            props.onClose();
-        };
-        var choose = function () {
-            choosePreset(preset);
-            props.onClose();
-        };
-        return (react_1.default.createElement(__1.DropdownMenuBody, (0, tslib_1.__assign)({}, props),
-            react_1.default.createElement(__1.DropdownMenuButton, { caption: 'Duplicate', onClick: handleDuplicate }),
-            react_1.default.createElement(__1.DropdownMenuButton, { caption: 'Rename', onClick: startRenaming }),
-            react_1.default.createElement(__1.DropdownMenuButton, { caption: 'Update', onClick: update, isDisabled: !hasChanged }),
-            react_1.default.createElement(__1.DropdownMenuButton, { caption: 'Delete', onClick: handleDelete }),
-            react_1.default.createElement(__1.DropdownMenuSplitter, null),
-            react_1.default.createElement(__1.DropdownMenuButton, { caption: 'Discard all changes', onClick: choose, isDisabled: !hasChanged })));
-    }, [preset, duplicatePreset, deletePreset, isActive, choosePreset, hasChanged]);
-    var renderTarget = (0, react_1.useCallback)(function (props) {
-        return (react_1.default.createElement(__1.Button, (0, tslib_1.__assign)({}, props, { icon: navigation_more_vert_12_svg_1.ReactComponent, size: '24', isDropdown: false, mode: isActive ? 'solid' : 'outline', cx: [Preset_scss_1.default.target, hasChanged && Preset_scss_1.default.notification] })));
-    }, [preset, isActive, hasChanged]);
-    return (react_1.default.createElement(react_1.default.Fragment, null, isRenaming
-        ? (react_1.default.createElement(__1.TextInput, { value: renamingValue, onValueChange: setRenamingValue, size: '24', onAccept: acceptRenaming, onBlur: acceptRenaming, cx: Preset_scss_1.default.input, autoFocus: true }))
-        : (react_1.default.createElement(__1.ControlGroup, { cx: Preset_scss_1.default.container },
-            react_1.default.createElement(__1.Button, { key: preset.id, size: '24', caption: preset.name, mode: isActive ? 'solid' : 'outline', onClick: isActive ? null : handleChoose }),
-            !preset.isReadonly && (react_1.default.createElement(__1.Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: 'bottom-end' }))))));
-};
-exports.Preset = Preset;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Preset = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var react_1 = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+var __1 = __webpack_require__(/*! ../../ */ "./components/index.ts");
+var navigation_more_vert_12_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/navigation-more_vert-12.svg */ "../epam-assets/icons/common/navigation-more_vert-12.svg");
+var Preset_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./Preset.scss */ "./components/tables/Presets/Preset.scss"));
+var Preset = function (_a) {
+    var preset = _a.preset, isActive = _a.isActive, hasChanged = _a.hasChanged, choosePreset = _a.choosePreset, duplicatePreset = _a.duplicatePreset, deletePreset = _a.deletePreset, updatePreset = _a.updatePreset, resetToDefault = _a.resetToDefault;
+    var _b = (0, react_1.useState)(false), isRenaming = _b[0], setIsRenaming = _b[1];
+    var _c = (0, react_1.useState)(""), renamingValue = _c[0], setRenamingValue = _c[1];
+    var handleChoose = (0, react_1.useCallback)(function () { return choosePreset(preset); }, [preset, choosePreset]);
+    var handleUpdate = (0, react_1.useCallback)(function () { return updatePreset(preset); }, [preset, updatePreset]);
+    var acceptRenaming = (0, react_1.useCallback)(function () {
+        if (renamingValue) {
+            var newPreset = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, preset), { name: renamingValue });
+            updatePreset(newPreset);
+        }
+        setIsRenaming(false);
+    }, [renamingValue, updatePreset]);
+    var renderBody = (0, react_1.useCallback)(function (props) {
+        var handleDuplicate = function () {
+            duplicatePreset(preset);
+            props.onClose();
+        };
+        var startRenaming = function () {
+            setIsRenaming(true);
+            setRenamingValue(preset.name);
+            props.onClose();
+        };
+        var handleDelete = function () {
+            deletePreset(preset);
+            if (isActive) {
+                resetToDefault();
+            }
+            props.onClose();
+        };
+        var update = function () {
+            handleUpdate();
+            props.onClose();
+        };
+        var choose = function () {
+            choosePreset(preset);
+            props.onClose();
+        };
+        return (react_1.default.createElement(__1.DropdownMenuBody, (0, tslib_1.__assign)({}, props),
+            react_1.default.createElement(__1.DropdownMenuButton, { caption: 'Duplicate', onClick: handleDuplicate }),
+            react_1.default.createElement(__1.DropdownMenuButton, { caption: 'Rename', onClick: startRenaming }),
+            react_1.default.createElement(__1.DropdownMenuButton, { caption: 'Update', onClick: update, isDisabled: !hasChanged }),
+            react_1.default.createElement(__1.DropdownMenuButton, { caption: 'Delete', onClick: handleDelete }),
+            react_1.default.createElement(__1.DropdownMenuSplitter, null),
+            react_1.default.createElement(__1.DropdownMenuButton, { caption: 'Discard all changes', onClick: choose, isDisabled: !hasChanged })));
+    }, [preset, duplicatePreset, deletePreset, isActive, choosePreset, hasChanged]);
+    var renderTarget = (0, react_1.useCallback)(function (props) {
+        return (react_1.default.createElement(__1.Button, (0, tslib_1.__assign)({}, props, { icon: navigation_more_vert_12_svg_1.ReactComponent, size: '24', isDropdown: false, mode: isActive ? 'solid' : 'outline', cx: [Preset_scss_1.default.target, hasChanged && Preset_scss_1.default.notification] })));
+    }, [preset, isActive, hasChanged]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, isRenaming
+        ? (react_1.default.createElement(__1.TextInput, { value: renamingValue, onValueChange: setRenamingValue, size: '24', onAccept: acceptRenaming, onBlur: acceptRenaming, cx: Preset_scss_1.default.input, autoFocus: true }))
+        : (react_1.default.createElement(__1.ControlGroup, { cx: Preset_scss_1.default.container },
+            react_1.default.createElement(__1.Button, { key: preset.id, size: '24', caption: preset.name, mode: isActive ? 'solid' : 'outline', onClick: isActive ? null : handleChoose }),
+            !preset.isReadonly && (react_1.default.createElement(__1.Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: 'bottom-end' }))))));
+};
+exports.Preset = Preset;
 
 
 /***/ }),
@@ -3225,7 +3225,7 @@ exports.Preset = Preset;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"row":"_1CdDF"};
+module.exports = {"row":"_1NrN6"};
 
 /***/ }),
 
@@ -3237,33 +3237,33 @@ module.exports = {"row":"_1CdDF"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Presets = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var index_1 = __webpack_require__(/*! ../../index */ "./components/index.ts");
-var layout_1 = __webpack_require__(/*! ../../layout */ "./components/layout/index.ts");
-var Preset_1 = __webpack_require__(/*! ./Preset */ "./components/tables/Presets/Preset.tsx");
-var Presets_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./Presets.scss */ "./components/tables/Presets/Presets.scss"));
-var PresetsImpl = function (_a) {
-    var tableState = _a.tableState, presets = _a.presets, createNewPreset = _a.createNewPreset, getActivePresetId = _a.getActivePresetId, isDefaultPresetActive = _a.isDefaultPresetActive, hasPresetChanged = _a.hasPresetChanged, resetToDefault = _a.resetToDefault, choosePreset = _a.choosePreset, duplicatePreset = _a.duplicatePreset, deletePreset = _a.deletePreset, updatePreset = _a.updatePreset;
-    var newPresetTitle = 'New preset';
-    var activePresetId = getActivePresetId();
-    var saveNewPreset = (0, react_1.useCallback)(function () {
-        createNewPreset(newPresetTitle);
-    }, [createNewPreset, newPresetTitle]);
-    var activePreset = presets.find(function (p) { return p.id === activePresetId; });
-    var hasActivePresetChanged = (0, react_1.useMemo)(function () {
-        return !isDefaultPresetActive()
-            && hasPresetChanged(activePreset);
-    }, [isDefaultPresetActive, activePreset, tableState.filter]);
-    return (react_1.default.createElement(layout_1.FlexRow, { spacing: '6', size: '48', padding: '18', cx: Presets_scss_1.default.row },
-        react_1.default.createElement(index_1.Button, { size: '24', caption: 'Default', mode: isDefaultPresetActive() ? 'solid' : 'outline', onClick: isDefaultPresetActive() ? null : resetToDefault }),
-        presets.map(function (preset) { return (react_1.default.createElement(Preset_1.Preset, { preset: preset, isActive: preset.id === activePresetId, hasChanged: preset.id === activePresetId && hasActivePresetChanged, choosePreset: choosePreset, duplicatePreset: duplicatePreset, deletePreset: deletePreset, updatePreset: updatePreset, resetToDefault: resetToDefault, key: preset.id })); }),
-        hasActivePresetChanged && (react_1.default.createElement(index_1.Button, { caption: "Save as ".concat(newPresetTitle), onClick: saveNewPreset, color: 'accent', mode: 'solid', size: '24' }))));
-};
-exports.Presets = react_1.default.memo(PresetsImpl);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Presets = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var react_1 = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+var index_1 = __webpack_require__(/*! ../../index */ "./components/index.ts");
+var layout_1 = __webpack_require__(/*! ../../layout */ "./components/layout/index.ts");
+var Preset_1 = __webpack_require__(/*! ./Preset */ "./components/tables/Presets/Preset.tsx");
+var Presets_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./Presets.scss */ "./components/tables/Presets/Presets.scss"));
+var PresetsImpl = function (_a) {
+    var tableState = _a.tableState, presets = _a.presets, createNewPreset = _a.createNewPreset, getActivePresetId = _a.getActivePresetId, isDefaultPresetActive = _a.isDefaultPresetActive, hasPresetChanged = _a.hasPresetChanged, resetToDefault = _a.resetToDefault, choosePreset = _a.choosePreset, duplicatePreset = _a.duplicatePreset, deletePreset = _a.deletePreset, updatePreset = _a.updatePreset;
+    var newPresetTitle = 'New preset';
+    var activePresetId = getActivePresetId();
+    var saveNewPreset = (0, react_1.useCallback)(function () {
+        createNewPreset(newPresetTitle);
+    }, [createNewPreset, newPresetTitle]);
+    var activePreset = presets.find(function (p) { return p.id === activePresetId; });
+    var hasActivePresetChanged = (0, react_1.useMemo)(function () {
+        return !isDefaultPresetActive()
+            && hasPresetChanged(activePreset);
+    }, [isDefaultPresetActive, activePreset, tableState.filter]);
+    return (react_1.default.createElement(layout_1.FlexRow, { spacing: '6', size: '48', padding: '18', cx: Presets_scss_1.default.row },
+        react_1.default.createElement(index_1.Button, { size: '24', caption: 'Default', mode: isDefaultPresetActive() ? 'solid' : 'outline', onClick: isDefaultPresetActive() ? null : resetToDefault }),
+        presets.map(function (preset) { return (react_1.default.createElement(Preset_1.Preset, { preset: preset, isActive: preset.id === activePresetId, hasChanged: preset.id === activePresetId && hasActivePresetChanged, choosePreset: choosePreset, duplicatePreset: duplicatePreset, deletePreset: deletePreset, updatePreset: updatePreset, resetToDefault: resetToDefault, key: preset.id })); }),
+        hasActivePresetChanged && (react_1.default.createElement(index_1.Button, { caption: "Save as ".concat(newPresetTitle), onClick: saveNewPreset, color: 'accent', mode: 'solid', size: '24' }))));
+};
+exports.Presets = react_1.default.memo(PresetsImpl);
 
 
 /***/ }),
@@ -3276,11 +3276,11 @@ exports.Presets = react_1.default.memo(PresetsImpl);
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Presets */ "./components/tables/Presets/Presets.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Preset */ "./components/tables/Presets/Preset.tsx"), exports);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Presets */ "./components/tables/Presets/Presets.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Preset */ "./components/tables/Presets/Preset.tsx"), exports);
 
 
 /***/ }),
@@ -3293,12 +3293,12 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./DataTableCell */ "./components/tables/DataTableCell.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Presets */ "./components/tables/Presets/index.ts"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./types */ "./components/tables/types.ts"), exports);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./DataTableCell */ "./components/tables/DataTableCell.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Presets */ "./components/tables/Presets/index.ts"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./types */ "./components/tables/types.ts"), exports);
 
 
 /***/ }),
@@ -3311,8 +3311,8 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", { value: true });
 
 
 /***/ }),
@@ -3325,20 +3325,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditMode = exports.allFontStyles = exports.allTextSizes = exports.allEpamSemanticColors = exports.allRowSizes = exports.allSizes = exports.allButtonModes = void 0;
-exports.allButtonModes = ['solid', 'outline', 'ghost', 'none'];
-exports.allSizes = ['24', '30', '36', '42', '48'];
-exports.allRowSizes = [null, '24', '30', '36', '42', '48'];
-exports.allEpamSemanticColors = ['accent', 'primary', 'secondary', 'negative'];
-exports.allTextSizes = ['18', '24', '30', '36', '48'];
-exports.allFontStyles = ['regular', 'semibold', 'italic', 'primary', 'promo'];
-var EditMode;
-(function (EditMode) {
-    EditMode["FORM"] = "form";
-    EditMode["CELL"] = "cell";
-})(EditMode = exports.EditMode || (exports.EditMode = {}));
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditMode = exports.allFontStyles = exports.allTextSizes = exports.allEpamSemanticColors = exports.allRowSizes = exports.allSizes = exports.allButtonModes = void 0;
+exports.allButtonModes = ['solid', 'outline', 'ghost', 'none'];
+exports.allSizes = ['24', '30', '36', '42', '48'];
+exports.allRowSizes = [null, '24', '30', '36', '42', '48'];
+exports.allEpamSemanticColors = ['accent', 'primary', 'secondary', 'negative'];
+exports.allTextSizes = ['18', '24', '30', '36', '48'];
+exports.allFontStyles = ['regular', 'semibold', 'italic', 'primary', 'promo'];
+var EditMode;
+(function (EditMode) {
+    EditMode["FORM"] = "form";
+    EditMode["CELL"] = "cell";
+})(EditMode = exports.EditMode || (exports.EditMode = {}));
 
 
 /***/ }),
@@ -3351,7 +3351,7 @@ var EditMode;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_2iat0"};
+module.exports = {"root":"_1iXjz"};
 
 /***/ }),
 
@@ -3363,29 +3363,29 @@ module.exports = {"root":"_2iat0"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Text.scss */ "./components/typography/Text.scss"));
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var textLayout_1 = __webpack_require__(/*! ../../helpers/textLayout */ "./helpers/textLayout.tsx");
-__webpack_require__(/*! ../../assets/styles/variables/typography/text.scss */ "./assets/styles/variables/typography/text.scss");
-__webpack_require__(/*! ../../assets/styles/fonts-variables.scss */ "./assets/styles/fonts-variables.scss");
-function applyTextMods(mods) {
-    var textClasses = (0, textLayout_1.getTextClasses)({
-        size: mods.size || '36',
-        lineHeight: mods.lineHeight,
-        fontSize: mods.fontSize,
-    }, false);
-    return [
-        "font-".concat(mods.font || 'regular'),
-        "text-color-".concat(mods.color || 'primary'),
-        css.root,
-    ].concat(textClasses);
-}
-exports.Text = (0, uui_core_1.withMods)(uui_components_1.Text, applyTextMods);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Text.scss */ "./components/typography/Text.scss"));
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var textLayout_1 = __webpack_require__(/*! ../../helpers/textLayout */ "./helpers/textLayout.tsx");
+__webpack_require__(/*! ../../assets/styles/variables/typography/text.scss */ "./assets/styles/variables/typography/text.scss");
+__webpack_require__(/*! ../../assets/styles/fonts-variables.scss */ "./assets/styles/fonts-variables.scss");
+function applyTextMods(mods) {
+    var textClasses = (0, textLayout_1.getTextClasses)({
+        size: mods.size || '36',
+        lineHeight: mods.lineHeight,
+        fontSize: mods.fontSize,
+    }, false);
+    return [
+        "font-".concat(mods.font || 'regular'),
+        "text-color-".concat(mods.color || 'primary'),
+        css.root,
+    ].concat(textClasses);
+}
+exports.Text = (0, uui_core_1.withMods)(uui_components_1.Text, applyTextMods);
 
 
 /***/ }),
@@ -3398,7 +3398,7 @@ exports.Text = (0, uui_core_1.withMods)(uui_components_1.Text, applyTextMods);
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"container":"mXSQJ","loading-word":"_2BcXk","loadingWord":"_2BcXk","animated-loading":"cv9FX","animatedLoading":"cv9FX","skeleton_loading":"_2cPh3","skeletonLoading":"_2cPh3"};
+module.exports = {"container":"_3EQb1","loading-word":"_2-Uj4","loadingWord":"_2-Uj4","animated-loading":"_2M_2m","animatedLoading":"_2M_2m","skeleton_loading":"_1kdUG","skeletonLoading":"_1kdUG"};
 
 /***/ }),
 
@@ -3410,31 +3410,31 @@ module.exports = {"container":"mXSQJ","loading-word":"_2BcXk","loadingWord":"_2B
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextPlaceholder = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var classnames_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! classnames */ "classnames"));
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./TextPlaceholder.scss */ "./components/typography/TextPlaceholder.scss"));
-__webpack_require__(/*! ../../assets/styles/variables/typography/textPlaceholder.scss */ "./assets/styles/variables/typography/textPlaceholder.scss");
-var TextPlaceholder = function (props) {
-    var pattern = "0";
-    var text = React.useMemo(function () {
-        var words = [];
-        for (var i = 0; i < (props.wordsCount || 1); i++) {
-            var lengthWord = Math.floor(Math.random() * 10 + 8);
-            words.push(pattern.repeat(lengthWord));
-        }
-        return words;
-    }, [props.wordsCount]);
-    return (React.createElement("div", { "aria-busy": true, className: css.container }, text.map(function (it, index) { return (React.createElement("span", { key: index, className: (0, classnames_1.default)([
-            'text-placeholder-vars',
-            css.loadingWord,
-            !props.isNotAnimated && css.animatedLoading,
-        ]), dangerouslySetInnerHTML: { __html: it } })); })));
-};
-exports.TextPlaceholder = TextPlaceholder;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextPlaceholder = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+var classnames_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! classnames */ "classnames"));
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./TextPlaceholder.scss */ "./components/typography/TextPlaceholder.scss"));
+__webpack_require__(/*! ../../assets/styles/variables/typography/textPlaceholder.scss */ "./assets/styles/variables/typography/textPlaceholder.scss");
+var TextPlaceholder = function (props) {
+    var pattern = "0";
+    var text = React.useMemo(function () {
+        var words = [];
+        for (var i = 0; i < (props.wordsCount || 1); i++) {
+            var lengthWord = Math.floor(Math.random() * 10 + 8);
+            words.push(pattern.repeat(lengthWord));
+        }
+        return words;
+    }, [props.wordsCount]);
+    return (React.createElement("div", { "aria-busy": true, className: css.container }, text.map(function (it, index) { return (React.createElement("span", { key: index, className: (0, classnames_1.default)([
+            'text-placeholder-vars',
+            css.loadingWord,
+            !props.isNotAnimated && css.animatedLoading,
+        ]), dangerouslySetInnerHTML: { __html: it } })); })));
+};
+exports.TextPlaceholder = TextPlaceholder;
 
 
 /***/ }),
@@ -3447,11 +3447,11 @@ exports.TextPlaceholder = TextPlaceholder;
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Text */ "./components/typography/Text.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./TextPlaceholder */ "./components/typography/TextPlaceholder.tsx"), exports);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Text */ "./components/typography/Text.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./TextPlaceholder */ "./components/typography/TextPlaceholder.tsx"), exports);
 
 
 /***/ }),
@@ -3464,12 +3464,12 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = void 0;
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-exports.Avatar = (0, uui_core_1.withMods)(uui_components_1.Avatar, function () { return []; });
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+exports.Avatar = (0, uui_core_1.withMods)(uui_components_1.Avatar, function () { return []; });
 
 
 /***/ }),
@@ -3482,7 +3482,7 @@ exports.Avatar = (0, uui_core_1.withMods)(uui_components_1.Avatar, function () {
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_2fNNq","size-18":"_2o1qW","size18":"_2o1qW","fill-transparent":"_2ZMXj","fillTransparent":"_2ZMXj","size-24":"_2_p-F","size24":"_2_p-F","size-30":"_24Mok","size30":"_24Mok","size-36":"_3NFQZ","size36":"_3NFQZ","size-42":"_6qYpq","size42":"_6qYpq","size-48":"_3rmKn","size48":"_3rmKn","fill-solid":"_335ZJ","fillSolid":"_335ZJ"};
+module.exports = {"root":"_3bD5j","size-18":"_95gBb","size18":"_95gBb","fill-transparent":"CduFD","fillTransparent":"CduFD","size-24":"kGvsr","size24":"kGvsr","size-30":"_2aTq8","size30":"_2aTq8","size-36":"_7TsXU","size36":"_7TsXU","size-42":"_2tNgB","size42":"_2tNgB","size-48":"AUSQ3","size48":"AUSQ3","fill-solid":"_2Wruj","fillSolid":"_2Wruj"};
 
 /***/ }),
 
@@ -3494,40 +3494,40 @@ module.exports = {"root":"_2fNNq","size-18":"_2o1qW","size18":"_2o1qW","fill-tra
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Badge = exports.applyBadgeMods = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-var buttonCss = (0, tslib_1.__importStar)(__webpack_require__(/*! ../buttons/Button.scss */ "./components/buttons/Button.scss"));
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Badge.scss */ "./components/widgets/Badge.scss"));
-__webpack_require__(/*! ../../assets/styles/variables/widgets/badge.scss */ "./assets/styles/variables/widgets/badge.scss");
-var defaultSize = '36';
-var mapSize = {
-    '48': '48',
-    '42': '48',
-    '36': '36',
-    '30': '30',
-    '24': '30',
-    '18': '18',
-};
-function applyBadgeMods(mods) {
-    return [
-        "badge-color-".concat((mods.color || 'info')),
-        buttonCss.root,
-        css['size-' + (mods.size || defaultSize)],
-        css['fill-' + (mods.fill || 'solid')],
-        css.root,
-    ];
-}
-exports.applyBadgeMods = applyBadgeMods;
-exports.Badge = (0, uui_core_1.withMods)(uui_components_1.Button, applyBadgeMods, function (props) { return ({
-    dropdownIcon: icons_1.systemIcons[props.size && mapSize[props.size] || defaultSize].foldingArrow,
-    clearIcon: icons_1.systemIcons[props.size && mapSize[props.size] || defaultSize].clear,
-    countPosition: 'left',
-}); });
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = exports.applyBadgeMods = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+var buttonCss = (0, tslib_1.__importStar)(__webpack_require__(/*! ../buttons/Button.scss */ "./components/buttons/Button.scss"));
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Badge.scss */ "./components/widgets/Badge.scss"));
+__webpack_require__(/*! ../../assets/styles/variables/widgets/badge.scss */ "./assets/styles/variables/widgets/badge.scss");
+var defaultSize = '36';
+var mapSize = {
+    '48': '48',
+    '42': '48',
+    '36': '36',
+    '30': '30',
+    '24': '30',
+    '18': '18',
+};
+function applyBadgeMods(mods) {
+    return [
+        "badge-color-".concat((mods.color || 'info')),
+        buttonCss.root,
+        css['size-' + (mods.size || defaultSize)],
+        css['fill-' + (mods.fill || 'solid')],
+        css.root,
+    ];
+}
+exports.applyBadgeMods = applyBadgeMods;
+exports.Badge = (0, uui_core_1.withMods)(uui_components_1.Button, applyBadgeMods, function (props) { return ({
+    dropdownIcon: icons_1.systemIcons[props.size && mapSize[props.size] || defaultSize].foldingArrow,
+    clearIcon: icons_1.systemIcons[props.size && mapSize[props.size] || defaultSize].clear,
+    countPosition: 'left',
+}); });
 
 
 /***/ }),
@@ -3540,7 +3540,7 @@ exports.Badge = (0, uui_core_1.withMods)(uui_components_1.Button, applyBadgeMods
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_3NvLH","size-18":"_3tZxY","size18":"_3tZxY","size-24":"_3lYAv","size24":"_3lYAv","size-30":"_2zzE6","size30":"_2zzE6","size-36":"_7BTIu","size36":"_7BTIu","size-42":"_29HPd","size42":"_29HPd","size-48":"_3v2qW","size48":"_3v2qW"};
+module.exports = {"root":"_2OjV8","size-18":"_3a3zm","size18":"_3a3zm","size-24":"egGis","size24":"egGis","size-30":"_1GYm5","size30":"_1GYm5","size-36":"_2lAq9","size36":"_2lAq9","size-42":"_3loZl","size42":"_3loZl","size-48":"_2f2fC","size48":"_2f2fC"};
 
 /***/ }),
 
@@ -3552,38 +3552,38 @@ module.exports = {"root":"_3NvLH","size-18":"_3tZxY","size18":"_3tZxY","size-24"
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = exports.applyTagMods = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-var buttonCss = (0, tslib_1.__importStar)(__webpack_require__(/*! ../buttons/Button.scss */ "./components/buttons/Button.scss"));
-__webpack_require__(/*! ../../assets/styles/variables/widgets/tag.scss */ "./assets/styles/variables/widgets/tag.scss");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Tag.scss */ "./components/widgets/Tag.scss"));
-var defaultSize = '36';
-var mapSize = {
-    '48': '48',
-    '42': '48',
-    '36': '36',
-    '30': '30',
-    '24': '30',
-    '18': '18',
-};
-function applyTagMods(mods) {
-    return [
-        buttonCss.root,
-        'tag-vars',
-        css['size-' + (mods.size || defaultSize)],
-        css.root,
-    ];
-}
-exports.applyTagMods = applyTagMods;
-exports.Tag = (0, uui_core_1.withMods)(uui_components_1.Button, applyTagMods, function (props) { return ({
-    dropdownIcon: icons_1.systemIcons[mapSize[props.size] || defaultSize].foldingArrow,
-    clearIcon: icons_1.systemIcons[mapSize[props.size] || defaultSize].clear,
-}); });
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = exports.applyTagMods = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+var buttonCss = (0, tslib_1.__importStar)(__webpack_require__(/*! ../buttons/Button.scss */ "./components/buttons/Button.scss"));
+__webpack_require__(/*! ../../assets/styles/variables/widgets/tag.scss */ "./assets/styles/variables/widgets/tag.scss");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Tag.scss */ "./components/widgets/Tag.scss"));
+var defaultSize = '36';
+var mapSize = {
+    '48': '48',
+    '42': '48',
+    '36': '36',
+    '30': '30',
+    '24': '30',
+    '18': '18',
+};
+function applyTagMods(mods) {
+    return [
+        buttonCss.root,
+        'tag-vars',
+        css['size-' + (mods.size || defaultSize)],
+        css.root,
+    ];
+}
+exports.applyTagMods = applyTagMods;
+exports.Tag = (0, uui_core_1.withMods)(uui_components_1.Button, applyTagMods, function (props) { return ({
+    dropdownIcon: icons_1.systemIcons[mapSize[props.size] || defaultSize].foldingArrow,
+    clearIcon: icons_1.systemIcons[mapSize[props.size] || defaultSize].clear,
+}); });
 
 
 /***/ }),
@@ -3596,12 +3596,12 @@ exports.Tag = (0, uui_core_1.withMods)(uui_components_1.Button, applyTagMods, fu
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Avatar */ "./components/widgets/Avatar.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Badge */ "./components/widgets/Badge.tsx"), exports);
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Tag */ "./components/widgets/Tag.tsx"), exports);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Avatar */ "./components/widgets/Avatar.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Badge */ "./components/widgets/Badge.tsx"), exports);
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./Tag */ "./components/widgets/Tag.tsx"), exports);
 
 
 /***/ }),
@@ -3614,40 +3614,40 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTextClasses = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ../assets/styles/text-layout.scss */ "./assets/styles/text-layout.scss"));
-var defaultTextSettings = {
-    18: { lineHeight: 12, fontSize: 10 },
-    24: { lineHeight: 18, fontSize: 12 },
-    30: { lineHeight: 18, fontSize: 14 },
-    36: { lineHeight: 18, fontSize: 14 },
-    42: { lineHeight: 24, fontSize: 16 },
-    48: { lineHeight: 24, fontSize: 16 },
-    60: { lineHeight: 30, fontSize: 24 },
-};
-function getTextClasses(props, border) {
-    if (props.size === 'none') {
-        return [
-            css['line-height-' + props.lineHeight],
-            css['font-size-' + props.fontSize],
-        ];
-    }
-    var setting = {
-        size: props.size,
-        lineHeight: props.lineHeight || defaultTextSettings[props.size].lineHeight,
-        fontSize: props.fontSize || defaultTextSettings[props.size].fontSize,
-    };
-    var vPadding = (+setting.size - +setting.lineHeight - (border ? 2 : 0)) / 2;
-    return [
-        css['line-height-' + setting.lineHeight],
-        css['font-size-' + setting.fontSize],
-        css['v-padding-' + vPadding],
-    ];
-}
-exports.getTextClasses = getTextClasses;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTextClasses = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ../assets/styles/text-layout.scss */ "./assets/styles/text-layout.scss"));
+var defaultTextSettings = {
+    18: { lineHeight: 12, fontSize: 10 },
+    24: { lineHeight: 18, fontSize: 12 },
+    30: { lineHeight: 18, fontSize: 14 },
+    36: { lineHeight: 18, fontSize: 14 },
+    42: { lineHeight: 24, fontSize: 16 },
+    48: { lineHeight: 24, fontSize: 16 },
+    60: { lineHeight: 30, fontSize: 24 },
+};
+function getTextClasses(props, border) {
+    if (props.size === 'none') {
+        return [
+            css['line-height-' + props.lineHeight],
+            css['font-size-' + props.fontSize],
+        ];
+    }
+    var setting = {
+        size: props.size,
+        lineHeight: props.lineHeight || defaultTextSettings[props.size].lineHeight,
+        fontSize: props.fontSize || defaultTextSettings[props.size].fontSize,
+    };
+    var vPadding = (+setting.size - +setting.lineHeight - (border ? 2 : 0)) / 2;
+    return [
+        css['line-height-' + setting.lineHeight],
+        css['font-size-' + setting.fontSize],
+        css['v-padding-' + vPadding],
+    ];
+}
+exports.getTextClasses = getTextClasses;
 
 
 /***/ }),
@@ -3660,59 +3660,59 @@ exports.getTextClasses = getTextClasses;
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.i18n = void 0;
-exports.i18n = {
-    dataPickerBody: {
-        searchPlaceholder: 'Search',
-        noRecordsMessage: 'No records found',
-    },
-    pickerModal: {
-        headerTitle: 'Please select',
-        searchPlaceholder: 'Type text for quick search',
-        cancelButton: 'Cancel',
-        selectButton: 'Select',
-        clearAllButton: 'CLEAR ALL',
-        selectAllButton: 'SELECT ALL',
-    },
-    pickerInput: {
-        showOnlySelectedLabel: 'Show only selected',
-        clearSelectionButton: 'CLEAR ALL',
-        selectAllButton: 'SELECT ALL',
-    },
-    notificationCard: {
-        closeAllNotificationsButton: 'CLOSE ALL NOTIFICATIONS',
-    },
-    form: {
-        notifications: {
-            actionButtonCaption: 'Restore',
-            unsavedChangesMessage: 'You have unsaved changes. Click Restore button if you would like to recover the data',
-        },
-        modals: {
-            beforeLeaveMessage: 'Your data may be lost. Do you want to save data?',
-            discardButton: 'Discard',
-            saveButton: 'Save',
-        },
-    },
-    rangeDatePicker: {
-        pickerPlaceholderFrom: 'From:',
-        pickerPlaceholderTo: 'To:',
-    },
-    tables: {
-        columnsConfigurationModal: {
-            applyButton: 'Apply',
-            checkAllButton: 'CHECK ALL',
-            uncheckAllButton: 'UNCHECK ALL',
-            configureColumnsTitle: 'Configure columns',
-            resetToDefaultButton: 'Reset to Default',
-        },
-    },
-    pickerFilterHeader: {
-        sortAscending: 'Sort Ascending',
-        sortDescending: 'Sort Descending',
-    },
-};
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+exports.i18n = {
+    dataPickerBody: {
+        searchPlaceholder: 'Search',
+        noRecordsMessage: 'No records found',
+    },
+    pickerModal: {
+        headerTitle: 'Please select',
+        searchPlaceholder: 'Type text for quick search',
+        cancelButton: 'Cancel',
+        selectButton: 'Select',
+        clearAllButton: 'CLEAR ALL',
+        selectAllButton: 'SELECT ALL',
+    },
+    pickerInput: {
+        showOnlySelectedLabel: 'Show only selected',
+        clearSelectionButton: 'CLEAR ALL',
+        selectAllButton: 'SELECT ALL',
+    },
+    notificationCard: {
+        closeAllNotificationsButton: 'CLOSE ALL NOTIFICATIONS',
+    },
+    form: {
+        notifications: {
+            actionButtonCaption: 'Restore',
+            unsavedChangesMessage: 'You have unsaved changes. Click Restore button if you would like to recover the data',
+        },
+        modals: {
+            beforeLeaveMessage: 'Your data may be lost. Do you want to save data?',
+            discardButton: 'Discard',
+            saveButton: 'Save',
+        },
+    },
+    rangeDatePicker: {
+        pickerPlaceholderFrom: 'From:',
+        pickerPlaceholderTo: 'To:',
+    },
+    tables: {
+        columnsConfigurationModal: {
+            applyButton: 'Apply',
+            checkAllButton: 'CHECK ALL',
+            uncheckAllButton: 'UNCHECK ALL',
+            configureColumnsTitle: 'Configure columns',
+            resetToDefaultButton: 'Reset to Default',
+        },
+    },
+    pickerFilterHeader: {
+        sortAscending: 'Sort Ascending',
+        sortDescending: 'Sort Descending',
+    },
+};
 
 
 /***/ }),
@@ -4202,7 +4202,7 @@ var ForwardRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.forwa
     svgRef: ref
   }, props));
 });
-/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "11307d1a2e75df3e85e86f245e610a8e.svg");
+/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "8c22fc9b8cbf04371e4f5bf1027a1214.svg");
 
 
 /***/ }),
@@ -4251,7 +4251,7 @@ var ForwardRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.forwa
     svgRef: ref
   }, props));
 });
-/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "202f6af5ee2dd821281cf1e45c2f83c0.svg");
+/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "3dbfe2a24bf6fd3beb06518cc8b302b6.svg");
 
 
 /***/ }),
@@ -4446,7 +4446,7 @@ var ForwardRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.forwa
     svgRef: ref
   }, props));
 });
-/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "061e2086aa65c874e6a1700986fc0143.svg");
+/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "2d55a1b593695615b326b4ec6cbb305b.svg");
 
 
 /***/ }),
@@ -4494,7 +4494,7 @@ var ForwardRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.forwa
     svgRef: ref
   }, props));
 });
-/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "4378bc48485978a258c355821108dd24.svg");
+/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "936b8cd53f40395c4e581f4718a5cc2f.svg");
 
 
 /***/ }),
@@ -4507,103 +4507,103 @@ var ForwardRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.forwa
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.systemIcons = void 0;
-var btn_cross_12_svg_1 = __webpack_require__(/*! ./btn-cross-12.svg */ "./icons/btn-cross-12.svg");
-var btn_cross_18_svg_1 = __webpack_require__(/*! ./btn-cross-18.svg */ "./icons/btn-cross-18.svg");
-var btn_cross_24_svg_1 = __webpack_require__(/*! ./btn-cross-24.svg */ "./icons/btn-cross-24.svg");
-var folding_arrow_12_svg_1 = __webpack_require__(/*! ./folding-arrow-12.svg */ "./icons/folding-arrow-12.svg");
-var folding_arrow_18_svg_1 = __webpack_require__(/*! ./folding-arrow-18.svg */ "./icons/folding-arrow-18.svg");
-var folding_arrow_24_svg_1 = __webpack_require__(/*! ./folding-arrow-24.svg */ "./icons/folding-arrow-24.svg");
-var accept_12_svg_1 = __webpack_require__(/*! ./accept-12.svg */ "./icons/accept-12.svg");
-var accept_18_svg_1 = __webpack_require__(/*! ./accept-18.svg */ "./icons/accept-18.svg");
-var accept_24_svg_1 = __webpack_require__(/*! ./accept-24.svg */ "./icons/accept-24.svg");
-var search_12_svg_1 = __webpack_require__(/*! ./search-12.svg */ "./icons/search-12.svg");
-var search_18_svg_1 = __webpack_require__(/*! ./search-18.svg */ "./icons/search-18.svg");
-var search_24_svg_1 = __webpack_require__(/*! ./search-24.svg */ "./icons/search-24.svg");
-var calendar_12_svg_1 = __webpack_require__(/*! ./calendar-12.svg */ "./icons/calendar-12.svg");
-var calendar_18_svg_1 = __webpack_require__(/*! ./calendar-18.svg */ "./icons/calendar-18.svg");
-var calendar_24_svg_1 = __webpack_require__(/*! ./calendar-24.svg */ "./icons/calendar-24.svg");
-var info_12_svg_1 = __webpack_require__(/*! ./info-12.svg */ "./icons/info-12.svg");
-var info_18_svg_1 = __webpack_require__(/*! ./info-18.svg */ "./icons/info-18.svg");
-var info_24_svg_1 = __webpack_require__(/*! ./info-24.svg */ "./icons/info-24.svg");
-var help_fill_10_svg_1 = __webpack_require__(/*! ./help-fill-10.svg */ "./icons/help-fill-10.svg");
-var help_fill_16_svg_1 = __webpack_require__(/*! ./help-fill-16.svg */ "./icons/help-fill-16.svg");
-exports.systemIcons = {
-    '18': {
-        clear: btn_cross_12_svg_1.ReactComponent,
-        foldingArrow: folding_arrow_12_svg_1.ReactComponent,
-        accept: accept_12_svg_1.ReactComponent,
-        search: search_12_svg_1.ReactComponent,
-        calendar: calendar_12_svg_1.ReactComponent,
-        info: info_12_svg_1.ReactComponent,
-        help: help_fill_10_svg_1.ReactComponent,
-    },
-    '24': {
-        clear: btn_cross_12_svg_1.ReactComponent,
-        foldingArrow: folding_arrow_12_svg_1.ReactComponent,
-        accept: accept_12_svg_1.ReactComponent,
-        search: search_12_svg_1.ReactComponent,
-        calendar: calendar_12_svg_1.ReactComponent,
-        info: info_12_svg_1.ReactComponent,
-        help: help_fill_10_svg_1.ReactComponent,
-    },
-    '30': {
-        clear: btn_cross_18_svg_1.ReactComponent,
-        foldingArrow: folding_arrow_18_svg_1.ReactComponent,
-        accept: accept_18_svg_1.ReactComponent,
-        search: search_18_svg_1.ReactComponent,
-        calendar: calendar_18_svg_1.ReactComponent,
-        info: info_18_svg_1.ReactComponent,
-        help: help_fill_10_svg_1.ReactComponent,
-    },
-    '36': {
-        clear: btn_cross_18_svg_1.ReactComponent,
-        foldingArrow: folding_arrow_18_svg_1.ReactComponent,
-        accept: accept_18_svg_1.ReactComponent,
-        search: search_18_svg_1.ReactComponent,
-        calendar: calendar_18_svg_1.ReactComponent,
-        info: info_18_svg_1.ReactComponent,
-        help: help_fill_16_svg_1.ReactComponent,
-    },
-    '42': {
-        clear: btn_cross_18_svg_1.ReactComponent,
-        foldingArrow: folding_arrow_18_svg_1.ReactComponent,
-        accept: accept_18_svg_1.ReactComponent,
-        search: search_18_svg_1.ReactComponent,
-        calendar: calendar_18_svg_1.ReactComponent,
-        info: info_18_svg_1.ReactComponent,
-        help: help_fill_16_svg_1.ReactComponent,
-    },
-    '48': {
-        clear: btn_cross_24_svg_1.ReactComponent,
-        foldingArrow: folding_arrow_24_svg_1.ReactComponent,
-        accept: accept_24_svg_1.ReactComponent,
-        search: search_24_svg_1.ReactComponent,
-        calendar: calendar_24_svg_1.ReactComponent,
-        info: info_24_svg_1.ReactComponent,
-        help: help_fill_16_svg_1.ReactComponent,
-    },
-    '60': {
-        clear: btn_cross_24_svg_1.ReactComponent,
-        foldingArrow: folding_arrow_24_svg_1.ReactComponent,
-        accept: accept_24_svg_1.ReactComponent,
-        search: search_24_svg_1.ReactComponent,
-        calendar: calendar_24_svg_1.ReactComponent,
-        info: info_24_svg_1.ReactComponent,
-        help: help_fill_16_svg_1.ReactComponent,
-    },
-    'none': {
-        clear: btn_cross_18_svg_1.ReactComponent,
-        foldingArrow: folding_arrow_18_svg_1.ReactComponent,
-        accept: accept_18_svg_1.ReactComponent,
-        search: search_18_svg_1.ReactComponent,
-        calendar: calendar_18_svg_1.ReactComponent,
-        info: info_18_svg_1.ReactComponent,
-        help: help_fill_16_svg_1.ReactComponent,
-    },
-};
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.systemIcons = void 0;
+var btn_cross_12_svg_1 = __webpack_require__(/*! ./btn-cross-12.svg */ "./icons/btn-cross-12.svg");
+var btn_cross_18_svg_1 = __webpack_require__(/*! ./btn-cross-18.svg */ "./icons/btn-cross-18.svg");
+var btn_cross_24_svg_1 = __webpack_require__(/*! ./btn-cross-24.svg */ "./icons/btn-cross-24.svg");
+var folding_arrow_12_svg_1 = __webpack_require__(/*! ./folding-arrow-12.svg */ "./icons/folding-arrow-12.svg");
+var folding_arrow_18_svg_1 = __webpack_require__(/*! ./folding-arrow-18.svg */ "./icons/folding-arrow-18.svg");
+var folding_arrow_24_svg_1 = __webpack_require__(/*! ./folding-arrow-24.svg */ "./icons/folding-arrow-24.svg");
+var accept_12_svg_1 = __webpack_require__(/*! ./accept-12.svg */ "./icons/accept-12.svg");
+var accept_18_svg_1 = __webpack_require__(/*! ./accept-18.svg */ "./icons/accept-18.svg");
+var accept_24_svg_1 = __webpack_require__(/*! ./accept-24.svg */ "./icons/accept-24.svg");
+var search_12_svg_1 = __webpack_require__(/*! ./search-12.svg */ "./icons/search-12.svg");
+var search_18_svg_1 = __webpack_require__(/*! ./search-18.svg */ "./icons/search-18.svg");
+var search_24_svg_1 = __webpack_require__(/*! ./search-24.svg */ "./icons/search-24.svg");
+var calendar_12_svg_1 = __webpack_require__(/*! ./calendar-12.svg */ "./icons/calendar-12.svg");
+var calendar_18_svg_1 = __webpack_require__(/*! ./calendar-18.svg */ "./icons/calendar-18.svg");
+var calendar_24_svg_1 = __webpack_require__(/*! ./calendar-24.svg */ "./icons/calendar-24.svg");
+var info_12_svg_1 = __webpack_require__(/*! ./info-12.svg */ "./icons/info-12.svg");
+var info_18_svg_1 = __webpack_require__(/*! ./info-18.svg */ "./icons/info-18.svg");
+var info_24_svg_1 = __webpack_require__(/*! ./info-24.svg */ "./icons/info-24.svg");
+var help_fill_10_svg_1 = __webpack_require__(/*! ./help-fill-10.svg */ "./icons/help-fill-10.svg");
+var help_fill_16_svg_1 = __webpack_require__(/*! ./help-fill-16.svg */ "./icons/help-fill-16.svg");
+exports.systemIcons = {
+    '18': {
+        clear: btn_cross_12_svg_1.ReactComponent,
+        foldingArrow: folding_arrow_12_svg_1.ReactComponent,
+        accept: accept_12_svg_1.ReactComponent,
+        search: search_12_svg_1.ReactComponent,
+        calendar: calendar_12_svg_1.ReactComponent,
+        info: info_12_svg_1.ReactComponent,
+        help: help_fill_10_svg_1.ReactComponent,
+    },
+    '24': {
+        clear: btn_cross_12_svg_1.ReactComponent,
+        foldingArrow: folding_arrow_12_svg_1.ReactComponent,
+        accept: accept_12_svg_1.ReactComponent,
+        search: search_12_svg_1.ReactComponent,
+        calendar: calendar_12_svg_1.ReactComponent,
+        info: info_12_svg_1.ReactComponent,
+        help: help_fill_10_svg_1.ReactComponent,
+    },
+    '30': {
+        clear: btn_cross_18_svg_1.ReactComponent,
+        foldingArrow: folding_arrow_18_svg_1.ReactComponent,
+        accept: accept_18_svg_1.ReactComponent,
+        search: search_18_svg_1.ReactComponent,
+        calendar: calendar_18_svg_1.ReactComponent,
+        info: info_18_svg_1.ReactComponent,
+        help: help_fill_10_svg_1.ReactComponent,
+    },
+    '36': {
+        clear: btn_cross_18_svg_1.ReactComponent,
+        foldingArrow: folding_arrow_18_svg_1.ReactComponent,
+        accept: accept_18_svg_1.ReactComponent,
+        search: search_18_svg_1.ReactComponent,
+        calendar: calendar_18_svg_1.ReactComponent,
+        info: info_18_svg_1.ReactComponent,
+        help: help_fill_16_svg_1.ReactComponent,
+    },
+    '42': {
+        clear: btn_cross_18_svg_1.ReactComponent,
+        foldingArrow: folding_arrow_18_svg_1.ReactComponent,
+        accept: accept_18_svg_1.ReactComponent,
+        search: search_18_svg_1.ReactComponent,
+        calendar: calendar_18_svg_1.ReactComponent,
+        info: info_18_svg_1.ReactComponent,
+        help: help_fill_16_svg_1.ReactComponent,
+    },
+    '48': {
+        clear: btn_cross_24_svg_1.ReactComponent,
+        foldingArrow: folding_arrow_24_svg_1.ReactComponent,
+        accept: accept_24_svg_1.ReactComponent,
+        search: search_24_svg_1.ReactComponent,
+        calendar: calendar_24_svg_1.ReactComponent,
+        info: info_24_svg_1.ReactComponent,
+        help: help_fill_16_svg_1.ReactComponent,
+    },
+    '60': {
+        clear: btn_cross_24_svg_1.ReactComponent,
+        foldingArrow: folding_arrow_24_svg_1.ReactComponent,
+        accept: accept_24_svg_1.ReactComponent,
+        search: search_24_svg_1.ReactComponent,
+        calendar: calendar_24_svg_1.ReactComponent,
+        info: info_24_svg_1.ReactComponent,
+        help: help_fill_16_svg_1.ReactComponent,
+    },
+    'none': {
+        clear: btn_cross_18_svg_1.ReactComponent,
+        foldingArrow: folding_arrow_18_svg_1.ReactComponent,
+        accept: accept_18_svg_1.ReactComponent,
+        search: search_18_svg_1.ReactComponent,
+        calendar: calendar_18_svg_1.ReactComponent,
+        info: info_18_svg_1.ReactComponent,
+        help: help_fill_16_svg_1.ReactComponent,
+    },
+};
 
 
 /***/ }),
@@ -4652,7 +4652,7 @@ var ForwardRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.forwa
     svgRef: ref
   }, props));
 });
-/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "10d963a41893dff812561ad9c06e8c8e.svg");
+/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "77b7c4fba164c58228be2d8d0d6dec98.svg");
 
 
 /***/ }),
@@ -5044,7 +5044,7 @@ var ForwardRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.forwa
     svgRef: ref
   }, props));
 });
-/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "186bde10a8ddfabd7f88203aa781fd01.svg");
+/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "35106eb8a4be4afeb326f2926347d63c.svg");
 
 
 /***/ }),
@@ -5093,7 +5093,7 @@ var ForwardRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.forwa
     svgRef: ref
   }, props));
 });
-/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "e36f18168e01c9d3ec6bcfea2c198694.svg");
+/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "77e60738884942dab88dae51d3dbccd2.svg");
 
 
 /***/ }),
@@ -5143,7 +5143,7 @@ var ForwardRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.forwa
     svgRef: ref
   }, props));
 });
-/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "fdb597ac9240648084098a063c313975.svg");
+/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "e0a2a4521d4572e6b2c97c177d398463.svg");
 
 
 /***/ }),
@@ -5394,7 +5394,7 @@ var ForwardRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.forwa
     svgRef: ref
   }, props));
 });
-/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "eb8234f2be3ac730458ef8c9334067db.svg");
+/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "4a0775e7f6abd130329c74c2eba659c7.svg");
 
 
 /***/ }),
@@ -5407,13 +5407,13 @@ var ForwardRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.forwa
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-__webpack_require__(/*! ./assets/styles/font-faces.scss */ "./assets/styles/font-faces.scss");
-(0, tslib_1.__exportStar)(__webpack_require__(/*! ./components */ "./components/index.ts"), exports);
-// export * from './i18n';
-(0, tslib_1.__exportStar)(__webpack_require__(/*! @epam/uui-core */ "@epam/uui-core"), exports);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+__webpack_require__(/*! ./assets/styles/font-faces.scss */ "./assets/styles/font-faces.scss");
+(0, tslib_1.__exportStar)(__webpack_require__(/*! ./components */ "./components/index.ts"), exports);
+// export * from './i18n';
+(0, tslib_1.__exportStar)(__webpack_require__(/*! @epam/uui-core */ "@epam/uui-core"), exports);
 
 
 /***/ }),
@@ -5425,7 +5425,7 @@ __webpack_require__(/*! ./assets/styles/font-faces.scss */ "./assets/styles/font
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-module.exports = __webpack_require__(/*! /Users/Aliaksei_Manetau/WebstormProjects/UUI/uui/index.tsx */"./index.tsx");
+module.exports = __webpack_require__(/*! D:\dev\UUI-4.6.1patch\uui\index.tsx */"./index.tsx");
 
 
 /***/ }),