@epam/uui 4.7.0 → 4.8.0-beta.0

package/index.js

@@ -648,7 +648,7 @@ function __classPrivateFieldIn(state, receiver) {
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"line-height-12":"H1tT_","lineHeight12":"H1tT_","line-height-18":"_27PmC","lineHeight18":"_27PmC","line-height-24":"_2Frmo","lineHeight24":"_2Frmo","line-height-30":"_2sbVK","lineHeight30":"_2sbVK","font-size-10":"_1md6d","fontSize10":"_1md6d","font-size-12":"_1l1Y1","fontSize12":"_1l1Y1","font-size-14":"MkUj5","fontSize14":"MkUj5","font-size-16":"_3T4cM","fontSize16":"_3T4cM","font-size-18":"_144GN","fontSize18":"_144GN","font-size-24":"_2qW74","fontSize24":"_2qW74","v-padding-2":"_2AF0V","vPadding2":"_2AF0V","v-padding-3":"_3YwfN","vPadding3":"_3YwfN","v-padding-5":"_1JVWd","vPadding5":"_1JVWd","v-padding-6":"_1m-x8","vPadding6":"_1m-x8","v-padding-8":"_1e1i6","vPadding8":"_1e1i6","v-padding-9":"_1gF2M","vPadding9":"_1gF2M","v-padding-11":"_2fqJN","vPadding11":"_2fqJN","v-padding-12":"_3UK01","vPadding12":"_3UK01","v-padding-14":"_1HMTB","vPadding14":"_1HMTB","v-padding-15":"_1pGWY","vPadding15":"_1pGWY","v-padding-17":"_1D9vw","vPadding17":"_1D9vw","v-padding-18":"_1Tq4y","vPadding18":"_1Tq4y","v-padding-23":"_11uuG","vPadding23":"_11uuG","v-padding-24":"_2lhSk","vPadding24":"_2lhSk"};
+module.exports = {"line-height-12":"_35Qvs","lineHeight12":"_35Qvs","line-height-18":"_1Q_oJ","lineHeight18":"_1Q_oJ","line-height-24":"_1-b2Z","lineHeight24":"_1-b2Z","line-height-30":"_1UI4S","lineHeight30":"_1UI4S","font-size-10":"_3RUfN","fontSize10":"_3RUfN","font-size-12":"_3-qQu","fontSize12":"_3-qQu","font-size-14":"_3qDRU","fontSize14":"_3qDRU","font-size-16":"_3pgZ-","fontSize16":"_3pgZ-","font-size-18":"_2oxtD","fontSize18":"_2oxtD","font-size-24":"sbPyP","fontSize24":"sbPyP","v-padding-2":"_1seO1","vPadding2":"_1seO1","v-padding-3":"_1LOPP","vPadding3":"_1LOPP","v-padding-5":"_2FGMh","vPadding5":"_2FGMh","v-padding-6":"_2ERcM","vPadding6":"_2ERcM","v-padding-8":"_18K7h","vPadding8":"_18K7h","v-padding-9":"_1N3GS","vPadding9":"_1N3GS","v-padding-11":"ztmDB","vPadding11":"ztmDB","v-padding-12":"_1O8pc","vPadding12":"_1O8pc","v-padding-14":"bbjUq","vPadding14":"bbjUq","v-padding-15":"_18HAU","vPadding15":"_18HAU","v-padding-17":"_2vRSm","vPadding17":"_2vRSm","v-padding-18":"_11h-6","vPadding18":"_11h-6","v-padding-23":"_2Epiv","vPadding23":"_2Epiv","v-padding-24":"_3igLU","vPadding24":"_3igLU"};
 
 /***/ }),
 
@@ -902,7 +902,7 @@ module.exports = {"line-height-12":"H1tT_","lineHeight12":"H1tT_","line-height-1
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_2bUM_","mode-solid":"_3ZhQS","modeSolid":"_3ZhQS","mode-outline":"GjfXF","modeOutline":"GjfXF","mode-none":"ExCph","modeNone":"ExCph","mode-ghost":"_2c-MK","modeGhost":"_2c-MK","size-24":"_1Gx2b","size24":"_1Gx2b","size-30":"_1ruXd","size30":"_1ruXd","size-36":"_1uL_U","size36":"_1uL_U","size-42":"_5-L-F","size42":"_5-L-F","size-48":"X0JbP","size48":"X0JbP"};
+module.exports = {"root":"_1qKFr","mode-solid":"_33TYP","modeSolid":"_33TYP","mode-outline":"XLbiQ","modeOutline":"XLbiQ","mode-none":"_1jdiM","modeNone":"_1jdiM","mode-ghost":"_2WO5r","modeGhost":"_2WO5r","size-24":"_2WG5J","size24":"_2WG5J","size-30":"_1aVZ8","size30":"_1aVZ8","size-36":"_25Gjz","size36":"_25Gjz","size-42":"_2Va7m","size42":"_2Va7m","size-48":"_3QV_w","size48":"_3QV_w"};
 
 /***/ }),
 
@@ -914,31 +914,31 @@ module.exports = {"root":"_2bUM_","mode-solid":"_3ZhQS","modeSolid":"_3ZhQS","mo
 /***/ (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,
+}); });
 
 
 /***/ }),
@@ -951,7 +951,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":"_2rC_h"};
+module.exports = {"root":"_1s_Eo"};
 
 /***/ }),
 
@@ -963,22 +963,22 @@ module.exports = {"root":"_2rC_h"};
 /***/ (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);
 
 
 /***/ }),
@@ -991,7 +991,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":"_2prnk","size-18":"FCCTg","size18":"FCCTg","size-24":"_11hM8","size24":"_11hM8","size-30":"_1gmiU","size30":"_1gmiU","size-36":"ZIciN","size36":"ZIciN","size-42":"_10iUF","size42":"_10iUF","size-48":"_1gFnc","size48":"_1gFnc"};
+module.exports = {"root":"_3CJRl","size-18":"_2wYRl","size18":"_2wYRl","size-24":"_2ahMf","size24":"_2ahMf","size-30":"_1s_cK","size30":"_1s_cK","size-36":"_3Nne3","size36":"_3Nne3","size-42":"uCltz","size42":"uCltz","size-48":"_3_7XR","size48":"_3_7XR"};
 
 /***/ }),
 
@@ -1003,28 +1003,28 @@ module.exports = {"root":"_2prnk","size-18":"FCCTg","size18":"FCCTg","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,
+}); });
 
 
 /***/ }),
@@ -1037,7 +1037,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":"_1qtdh","uui-notification":"_1yJeo","uuiNotification":"_1yJeo","size-36":"_2KfWi","size36":"_2KfWi","size-48":"Y25NT","size48":"Y25NT","size-60":"_385k0","size60":"_385k0"};
+module.exports = {"root":"nBKxj","uui-notification":"QU4pL","uuiNotification":"QU4pL","size-36":"oghbC","size36":"oghbC","size-48":"_2hwmv","size48":"_2hwmv","size-60":"ekrg9","size60":"ekrg9"};
 
 /***/ }),
 
@@ -1049,25 +1049,25 @@ module.exports = {"root":"_1qtdh","uui-notification":"_1yJeo","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) })); });
 
 
 /***/ }),
@@ -1080,7 +1080,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":"_1bQaA"};
+module.exports = {"root":"gIAEL"};
 
 /***/ }),
 
@@ -1092,19 +1092,19 @@ module.exports = {"root":"_1bQaA"};
 /***/ (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);
 
 
 /***/ }),
@@ -1117,29 +1117,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;
 
 
 /***/ }),
@@ -1152,14 +1152,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);
 
 
 /***/ }),
@@ -1172,18 +1172,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);
 
 
 /***/ }),
@@ -1196,7 +1196,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":"_2lKIq","size-18":"_3h7pH","size18":"_3h7pH","size-12":"_1LUa5","size12":"_1LUa5"};
+module.exports = {"root":"_1ZVhf","size-18":"_56aFw","size18":"_56aFw","size-12":"_3HOuv","size12":"_3HOuv"};
 
 /***/ }),
 
@@ -1208,30 +1208,30 @@ module.exports = {"root":"_2lKIq","size-18":"_3h7pH","size18":"_3h7pH","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,
+}); });
 
 
 /***/ }),
@@ -1244,7 +1244,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":"_AOwZ","size-18":"_1ukad","size18":"_1ukad","size-12":"_2h0dc","size12":"_2h0dc"};
+module.exports = {"root":"_3h4NR","size-18":"_2n_ak","size18":"_2n_ak","size-12":"_1imGq","size12":"_1imGq"};
 
 /***/ }),
 
@@ -1256,23 +1256,23 @@ module.exports = {"root":"_AOwZ","size-18":"_1ukad","size18":"_1ukad","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 }); });
 
 
 /***/ }),
@@ -1285,7 +1285,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":"_3C2Tc","size-12":"_2bNT4","size12":"_2bNT4","size-18":"_3GEi3","size18":"_3GEi3","size-24":"_2rp7b","size24":"_2rp7b"};
+module.exports = {"root":"_3rHDX","size-12":"OAK6I","size12":"OAK6I","size-18":"_1qbfU","size18":"_1qbfU","size-24":"_3AnSA","size24":"_3AnSA"};
 
 /***/ }),
 
@@ -1297,23 +1297,23 @@ module.exports = {"root":"_3C2Tc","size-12":"_2bNT4","size12":"_2bNT4","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);
 
 
 /***/ }),
@@ -1326,7 +1326,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":"_2MxFu","mode-form":"vTBZY","modeForm":"vTBZY","mode-cell":"_3nQZk","modeCell":"_3nQZk","size-24":"_3bKS3","size24":"_3bKS3","size-30":"_3eL1O","size30":"_3eL1O","size-36":"_3moFW","size36":"_3moFW","size-42":"_1M4qh","size42":"_1M4qh","size-48":"LQBsl","size48":"LQBsl"};
+module.exports = {"root":"vkmSi","mode-form":"Y03lK","modeForm":"Y03lK","mode-cell":"_22h6q","modeCell":"_22h6q","size-24":"Rkkeo","size24":"Rkkeo","size-30":"JpM-n","size30":"JpM-n","size-36":"_1bd-2","size36":"_1bd-2","size-42":"_3ttD3","size42":"_3ttD3","size-48":"NQiFm","size48":"NQiFm"};
 
 /***/ }),
 
@@ -1338,50 +1338,50 @@ module.exports = {"root":"_2MxFu","mode-form":"vTBZY","modeForm":"vTBZY","mode-c
 /***/ (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;
 
 
 /***/ }),
@@ -1394,13 +1394,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);
 
 
 /***/ }),
@@ -1413,7 +1413,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":"Gq27a","mode-block":"_2IDUo","modeBlock":"_2IDUo","mode-inline":"HM59Z","modeInline":"HM59Z","padding-0":"_2SNcE","padding0":"_2SNcE","padding-6":"_25SsH","padding6":"_25SsH","padding-12":"_17m3z","padding12":"_17m3z","padding-18":"_2gxVM","padding18":"_2gxVM"};
+module.exports = {"root":"_3hMvN","mode-block":"jU9zB","modeBlock":"jU9zB","mode-inline":"_3-Vg2","modeInline":"_3-Vg2","padding-0":"_6kCOx","padding0":"_6kCOx","padding-6":"_3zLlj","padding6":"_3zLlj","padding-12":"_25oZy","padding12":"_25oZy","padding-18":"_2KVG2","padding18":"_2KVG2"};
 
 /***/ }),
 
@@ -1425,26 +1425,26 @@ module.exports = {"root":"Gq27a","mode-block":"_2IDUo","modeBlock":"_2IDUo","mod
 /***/ (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,
+}); });
 
 
 /***/ }),
@@ -1457,7 +1457,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":"_1qOBt"};
+module.exports = {"root":"_1HVAZ"};
 
 /***/ }),
 
@@ -1469,14 +1469,14 @@ module.exports = {"root":"_1qOBt"};
 /***/ (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]; });
 
 
 /***/ }),
@@ -1489,16 +1489,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,
+]; });
 
 
 /***/ }),
@@ -1511,7 +1511,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":"_3ey8k","top-shadow":"_56yqR","topShadow":"_56yqR","size-24":"_2sR8E","size24":"_2sR8E","size-30":"_2tO5N","size30":"_2tO5N","size-36":"_2RsfA","size36":"_2RsfA","size-42":"A8jo6","size42":"A8jo6","size-48":"_16Nm0","size48":"_16Nm0","padding-6":"_17st5","padding6":"_17st5","padding-12":"_1sGyR","padding12":"_1sGyR","padding-18":"_1FkkS","padding18":"_1FkkS","padding-24":"_2Mf-H","padding24":"_2Mf-H","margin-24":"_1Av7v","margin24":"_1Av7v","margin-12":"_3MC-S","margin12":"_3MC-S","vPadding-12":"Q1_c-","vPadding12":"Q1_c-","vPadding-18":"_6UOCX","vPadding18":"_6UOCX","vPadding-24":"_2Q8Ml","vPadding24":"_2Q8Ml","vPadding-36":"_2g0or","vPadding36":"_2g0or","vPadding-48":"aNiPg","vPadding48":"aNiPg","spacing-6":"_36NB8","spacing6":"_36NB8","spacing-12":"_1-C01","spacing12":"_1-C01","spacing-18":"_28vza","spacing18":"_28vza","border-bottom":"sWNaJ","borderBottom":"sWNaJ"};
+module.exports = {"root":"iKySE","top-shadow":"_3AHqC","topShadow":"_3AHqC","size-24":"_1Uubr","size24":"_1Uubr","size-30":"_1VJiJ","size30":"_1VJiJ","size-36":"_20Ob3","size36":"_20Ob3","size-42":"_1YV5y","size42":"_1YV5y","size-48":"m0Ip0","size48":"m0Ip0","padding-6":"_1NZsP","padding6":"_1NZsP","padding-12":"_3iTR5","padding12":"_3iTR5","padding-18":"_2Ohfj","padding18":"_2Ohfj","padding-24":"r6qLP","padding24":"r6qLP","margin-24":"_2vyrE","margin24":"_2vyrE","margin-12":"JyKv2","margin12":"JyKv2","vPadding-12":"mAe7N","vPadding12":"mAe7N","vPadding-18":"NXeyJ","vPadding18":"NXeyJ","vPadding-24":"_1en7j","vPadding24":"_1en7j","vPadding-36":"_3NwpY","vPadding36":"_3NwpY","vPadding-48":"_2p4AP","vPadding48":"_2p4AP","spacing-6":"_1TvA6","spacing6":"_1TvA6","spacing-12":"_1enEU","spacing12":"_1enEU","spacing-18":"_2g-rw","spacing18":"_2g-rw","border-bottom":"_1yGe4","borderBottom":"_1yGe4"};
 
 /***/ }),
 
@@ -1523,25 +1523,25 @@ module.exports = {"root":"_3ey8k","top-shadow":"_56yqR","topShadow":"_56yqR","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],
+    ];
+});
 
 
 /***/ }),
@@ -1554,11 +1554,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;
 
 
 /***/ }),
@@ -1571,7 +1571,7 @@ exports.FlexSpacer = uui_components_1.FlexSpacer;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_2u4ZL","background":"_1RDfT","margin-24":"_3x5uG","margin24":"_3x5uG","padding-12":"_1QU8L","padding12":"_1QU8L","padding-24":"_1dtZN","padding24":"_1dtZN","shadow":"_2QB_h"};
+module.exports = {"root":"IEt2r","background":"_2VAhC","margin-24":"_2i0K6","margin24":"_2i0K6","padding-12":"_27MTi","padding12":"_27MTi","padding-24":"_1xQVY","padding24":"_1xQVY","shadow":"_24KxZ"};
 
 /***/ }),
 
@@ -1583,21 +1583,21 @@ module.exports = {"root":"_2u4ZL","background":"_1RDfT","margin-24":"_3x5uG","ma
 /***/ (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],
+]; });
 
 
 /***/ }),
@@ -1610,13 +1610,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);
 
 
 /***/ }),
@@ -1629,7 +1629,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":"_2-2nR"};
+module.exports = {"root":"_2fyS4"};
 
 /***/ }),
 
@@ -1641,22 +1641,22 @@ module.exports = {"root":"_2-2nR"};
 /***/ (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 }); });
 
 
 /***/ }),
@@ -1669,7 +1669,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":"_2KGem","size-24":"_26tCr","size24":"_26tCr","size-30":"_1rQn3","size30":"_1rQn3","size-36":"_2TV9l","size36":"_2TV9l","size-42":"_30uUo","size42":"_30uUo","size-48":"_2aIwn","size48":"_2aIwn"};
+module.exports = {"root":"_1xd0Q","size-24":"hgAxi","size24":"hgAxi","size-30":"_1AsFO","size30":"_1AsFO","size-36":"_1TpO8","size36":"_1TpO8","size-42":"_1fzcy","size42":"_1fzcy","size-48":"_3olDq","size48":"_3olDq"};
 
 /***/ }),
 
@@ -1681,28 +1681,28 @@ module.exports = {"root":"_2KGem","size-24":"_26tCr","size24":"_26tCr","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-vars',
-        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-vars',
+        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,
+}); });
 
 
 /***/ }),
@@ -1715,7 +1715,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":"_3lHrl"};
+module.exports = {"root":"_1ED2B"};
 
 /***/ }),
 
@@ -1727,15 +1727,15 @@ module.exports = {"root":"_3lHrl"};
 /***/ (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 }); });
 
 
 /***/ }),
@@ -1759,19 +1759,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);
 
 
 /***/ }),
@@ -1795,19 +1795,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);
 
 
 /***/ }),
@@ -1820,17 +1820,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);
 
 
 /***/ }),
@@ -1843,23 +1843,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;
 
 
 /***/ }),
@@ -1872,7 +1872,7 @@ exports.Dropdown = Dropdown;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"szqB4"};
+module.exports = {"root":"ddmij"};
 
 /***/ }),
 
@@ -1884,21 +1884,21 @@ module.exports = {"root":"szqB4"};
 /***/ (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);
 
 
 /***/ }),
@@ -1911,7 +1911,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":"p-rrU","bodyRoot":"WPQRc","submenuRootItem":"cFXVN","iconAfter":"_3sQie","iconCheck":"_2NzFv","splitterRoot":"_3yL5a","splitter":"_1mL0L","headerRoot":"_3mcU5","itemRoot":"_17Rcu","icon":"lyKCz","link":"_3Miyh"};
+module.exports = {"menuRoot":"_1Yydx","bodyRoot":"_2oj9X","submenuRootItem":"_2hwhR","iconAfter":"MK3ld","iconCheck":"_15d-D","splitterRoot":"_3eQAx","splitter":"_9hJ0U","headerRoot":"_1tZSd","itemRoot":"iNrnt","icon":"xn710","link":"hF_Tg"};
 
 /***/ }),
 
@@ -1923,136 +1923,136 @@ module.exports = {"menuRoot":"p-rrU","bodyRoot":"WPQRc","submenuRootItem":"cFXVN
 /***/ (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;
 
 
 /***/ }),
@@ -2065,7 +2065,7 @@ exports.DropdownMenuSwitchButton = DropdownMenuSwitchButton;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"modal-blocker":"_2Ud58","modalBlocker":"_2Ud58","animateModalBlocker":"_2FqAB","blocker-overlay":"_2_Bex","blockerOverlay":"_2_Bex","modal":"_3w_hq","modal-footer":"fqH29","modalFooter":"fqH29","border-top":"_1u4s4","borderTop":"_1u4s4","modal-header":"_22zRj","modalHeader":"_22zRj"};
+module.exports = {"modal-blocker":"_1aB-1","modalBlocker":"_1aB-1","animateModalBlocker":"_1Yr7r","blocker-overlay":"_2XuA0","blockerOverlay":"_2XuA0","modal":"_1UC6G","modal-footer":"_3bstD","modalFooter":"_3bstD","border-top":"_15mEL","borderTop":"_15mEL","modal-header":"_1C9OQ","modalHeader":"_1C9OQ"};
 
 /***/ }),
 
@@ -2077,58 +2077,58 @@ module.exports = {"modal-blocker":"_2Ud58","modalBlocker":"_2Ud58","animateModal
 /***/ (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;
 
 
 /***/ }),
@@ -2141,7 +2141,7 @@ exports.ModalFooter = ModalFooter;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_1KXrC","icon-wrapper":"aIYj4","iconWrapper":"aIYj4","notification-wrapper":"_3K5OS","notificationWrapper":"_3K5OS","action-wrapper":"_3_0nI","actionWrapper":"_3_0nI","action-link":"_3ql1y","actionLink":"_3ql1y","close-icon":"_2f0uw","closeIcon":"_2f0uw","main-path":"_3yCPq","mainPath":"_3yCPq","content":"_3DVba","clear-button":"Tg6fI","clearButton":"Tg6fI"};
+module.exports = {"root":"_3ej33","icon-wrapper":"_1uX_5","iconWrapper":"_1uX_5","notification-wrapper":"_2DmkX","notificationWrapper":"_2DmkX","action-wrapper":"_1TkcS","actionWrapper":"_1TkcS","action-link":"_2Bl-C","actionLink":"_2Bl-C","close-icon":"_3jvty","closeIcon":"_3jvty","main-path":"_3E2cM","mainPath":"_3E2cM","content":"_3LZJM","clear-button":"_3f6WJ","clearButton":"_3f6WJ"};
 
 /***/ }),
 
@@ -2153,86 +2153,86 @@ module.exports = {"root":"_1KXrC","icon-wrapper":"aIYj4","iconWrapper":"aIYj4","
 /***/ (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;
 
 
 /***/ }),
@@ -2245,7 +2245,7 @@ exports.ClearNotification = ClearNotification;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"xxQX9"};
+module.exports = {"root":"_1LVjq"};
 
 /***/ }),
 
@@ -2257,21 +2257,21 @@ module.exports = {"root":"xxQX9"};
 /***/ (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);
 
 
 /***/ }),
@@ -2284,15 +2284,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);
 
 
 /***/ }),
@@ -2305,7 +2305,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":"_3MOF8","modal":"_2DLR0","search":"_3Kls7","checkbox":"_3nSUq","search-wrapper":"_2sUeE","searchWrapper":"_2sUeE","search-size-24":"_1ztp6","searchSize24":"_1ztp6","search-size-30":"_3uivT","searchSize30":"_3uivT","search-size-36":"EyFlL","searchSize36":"EyFlL","search-size-42":"_2szga","searchSize42":"_2szga","no-found-size-24":"_1IFwg","noFoundSize24":"_1IFwg","no-found-size-30":"_2AOjW","noFoundSize30":"_2AOjW","no-found-size-36":"_3P9cM","noFoundSize36":"_3P9cM","no-found-size-42":"_1-T8z","noFoundSize42":"_1-T8z"};
+module.exports = {"body":"_2mX7N","modal":"tC-vF","search":"_1cRY-","checkbox":"_3MoGX","search-wrapper":"_598rG","searchWrapper":"_598rG","search-size-24":"_2MveJ","searchSize24":"_2MveJ","search-size-30":"_3vh4b","searchSize30":"_3vh4b","search-size-36":"_10Q6o","searchSize36":"_10Q6o","search-size-42":"_1tBNQ","searchSize42":"_1tBNQ","no-found-size-24":"_3hx9E","noFoundSize24":"_3hx9E","no-found-size-30":"_3aQfL","noFoundSize30":"_3aQfL","no-found-size-36":"_3bYlZ","noFoundSize36":"_3bYlZ","no-found-size-42":"_3HxZG","noFoundSize42":"_3HxZG"};
 
 /***/ }),
 
@@ -2317,48 +2317,48 @@ module.exports = {"body":"_3MOF8","modal":"_2DLR0","search":"_3Kls7","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 }))
-                : 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 }))
+                : this.renderNoFound()));
+    };
+    return DataPickerBody;
+}(uui_components_1.PickerBodyBase));
+exports.DataPickerBody = DataPickerBody;
 
 
 /***/ }),
@@ -2371,7 +2371,7 @@ exports.DataPickerBody = DataPickerBody;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"footer-wrapper":"_1fUj1","footerWrapper":"_1fUj1"};
+module.exports = {"footer-wrapper":"_3IwKV","footerWrapper":"_3IwKV"};
 
 /***/ }),
 
@@ -2383,44 +2383,44 @@ module.exports = {"footer-wrapper":"_1fUj1","footerWrapper":"_1fUj1"};
 /***/ (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);
 
 
 /***/ }),
@@ -2433,7 +2433,7 @@ exports.DataPickerFooter = react_1.default.memo(DataPickerFooterImpl);
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"header":"_1Za3U","close":"_1qPTw"};
+module.exports = {"header":"_3YObp","close":"_10B-4"};
 
 /***/ }),
 
@@ -2445,23 +2445,23 @@ module.exports = {"header":"_1Za3U","close":"_1qPTw"};
 /***/ (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);
 
 
 /***/ }),
@@ -2474,7 +2474,7 @@ exports.DataPickerHeader = react_1.default.memo(DataPickerHeaderImpl);
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"render-item":"E5Njb","renderItem":"E5Njb","icon-wrapper":"_1fLaD","iconWrapper":"_1fLaD","picker-row":"UX5id","pickerRow":"UX5id"};
+module.exports = {"render-item":"_3Gj26","renderItem":"_3Gj26","icon-wrapper":"_1BARa","iconWrapper":"_1BARa","picker-row":"_3na2b","pickerRow":"_3na2b"};
 
 /***/ }),
 
@@ -2486,51 +2486,52 @@ module.exports = {"render-item":"E5Njb","renderItem":"E5Njb","icon-wrapper":"_1f
 /***/ (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,
+            width: 0,
+            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;
 
 
 /***/ }),
@@ -2543,7 +2544,7 @@ exports.DataPickerRow = DataPickerRow;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"done":"_1wOkk"};
+module.exports = {"done":"_1cK02"};
 
 /***/ }),
 
@@ -2555,24 +2556,24 @@ module.exports = {"done":"_1wOkk"};
 /***/ (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;
 
 
 /***/ }),
@@ -2585,7 +2586,7 @@ exports.MobileDropdownWrapper = MobileDropdownWrapper;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"panel":"fgS5w","footer-wrapper":"_3C4sv","footerWrapper":"_3C4sv","footer-size-24":"_2OOB5","footerSize24":"_2OOB5","footer-size-30":"_9h_9q","footerSize30":"_9h_9q","footer-size-36":"_25HVs","footerSize36":"_25HVs","footer-size-42":"jzRIJ","footerSize42":"jzRIJ","footer-size-48":"_3AANd","footerSize48":"_3AANd"};
+module.exports = {"panel":"_3c9r2","footer-wrapper":"_2Ch9R","footerWrapper":"_2Ch9R","footer-size-24":"_2_exV","footerSize24":"_2_exV","footer-size-30":"_2m6l-","footerSize30":"_2m6l-","footer-size-36":"_2Guhj","footerSize36":"_2Guhj","footer-size-42":"_2-sGr","footerSize42":"_2-sGr","footer-size-48":"_2faKF","footerSize48":"_2faKF"};
 
 /***/ }),
 
@@ -2597,84 +2598,84 @@ module.exports = {"panel":"fgS5w","footer-wrapper":"_3C4sv","footerWrapper":"_3C
 /***/ (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;
-        var _a = this.props, renderFooter = _a.renderFooter, restProps = (0, tslib_1.__rest)(_a, ["renderFooter"]);
-        this.context.uuiModals.show(function (props) { return react_1.default.createElement(PickerModal_1.PickerModal, (0, tslib_1.__assign)({}, restProps, 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;
+        var _a = this.props, renderFooter = _a.renderFooter, restProps = (0, tslib_1.__rest)(_a, ["renderFooter"]);
+        this.context.uuiModals.show(function (props) { return react_1.default.createElement(PickerModal_1.PickerModal, (0, tslib_1.__assign)({}, restProps, 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;
 
 
 /***/ }),
@@ -2687,7 +2688,7 @@ exports.PickerInput = PickerInput;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"csvdy","multiline-vertical-padding-24":"_1H0D8","multilineVerticalPadding24":"_1H0D8","multiline-vertical-padding-30":"_1HF2O","multilineVerticalPadding30":"_1HF2O","multiline-vertical-padding-36":"V8Nyc","multilineVerticalPadding36":"V8Nyc","multiline-vertical-padding-42":"_3MLK1","multilineVerticalPadding42":"_3MLK1","multiline-vertical-padding-48":"_2tB-7","multilineVerticalPadding48":"_2tB-7"};
+module.exports = {"root":"_1jSlo","multiline-vertical-padding-24":"GnRhh","multilineVerticalPadding24":"GnRhh","multiline-vertical-padding-30":"qlSYe","multilineVerticalPadding30":"qlSYe","multiline-vertical-padding-36":"HvFpi","multilineVerticalPadding36":"HvFpi","multiline-vertical-padding-42":"HgkW7","multilineVerticalPadding42":"HgkW7","multiline-vertical-padding-48":"_3CsEz","multilineVerticalPadding48":"_3CsEz"};
 
 /***/ }),
 
@@ -2699,39 +2700,39 @@ module.exports = {"root":"csvdy","multiline-vertical-padding-24":"_1H0D8","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;
 
 
 /***/ }),
@@ -2744,58 +2745,56 @@ 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 PickerModal_1 = __webpack_require__(/*! ./PickerModal */ "./components/pickers/PickerModal.tsx");
+var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
+var PickerListItem_1 = __webpack_require__(/*! ./PickerListItem */ "./components/pickers/PickerListItem.tsx");
+var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+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);
+            })
+                .catch(function () { return null; });
+        };
+        _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();
+        // This is incorrect condition to hide Show More, it won't work for small tree. Added as a temporary solution.
+        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;
 
 
 /***/ }),
@@ -2808,7 +2807,7 @@ exports.PickerList = PickerList;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"row":"_2ySVH"};
+module.exports = {"row":"PdUoY"};
 
 /***/ }),
 
@@ -2820,40 +2819,40 @@ module.exports = {"row":"_2ySVH"};
 /***/ (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;
 
 
 /***/ }),
@@ -2866,7 +2865,7 @@ exports.PickerListItem = PickerListItem;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"sub-header-wrapper":"_1Ulk6","subHeaderWrapper":"_1Ulk6","switch":"_2L7KH"};
+module.exports = {"sub-header-wrapper":"_1c4tS","subHeaderWrapper":"_1c4tS","switch":"_3xtpd"};
 
 /***/ }),
 
@@ -2878,87 +2877,87 @@ module.exports = {"sub-header-wrapper":"_1Ulk6","subHeaderWrapper":"_1Ulk6","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(this.getFooterProps())
-                    : 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(this.getFooterProps())
+                    : 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;
 
 
 /***/ }),
@@ -2971,7 +2970,7 @@ exports.PickerModal = PickerModal;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"Z2ifj","mode-form":"gBRRi","modeForm":"gBRRi","mode-cell":"_3Mzok","modeCell":"_3Mzok","size-24":"_3U9K6","size24":"_3U9K6","size-30":"_3HHuB","size30":"_3HHuB","size-36":"_1D8YU","size36":"_1D8YU","size-42":"HcmC0","size42":"HcmC0","size-48":"_11iI1","size48":"_11iI1"};
+module.exports = {"root":"h70iL","mode-form":"_2bAZr","modeForm":"_2bAZr","mode-cell":"_1RdyQ","modeCell":"_1RdyQ","size-24":"_3aRNV","size24":"_3aRNV","size-30":"pWhZv","size30":"pWhZv","size-36":"_2OKPB","size36":"_2OKPB","size-42":"_1PcVk","size42":"_1PcVk","size-48":"_1Ihbr","size48":"_1Ihbr"};
 
 /***/ }),
 
@@ -2983,63 +2982,63 @@ module.exports = {"root":"Z2ifj","mode-form":"gBRRi","modeForm":"gBRRi","mode-ce
 /***/ (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);
 
 
 /***/ }),
@@ -3052,20 +3051,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);
 
 
 /***/ }),
@@ -3078,7 +3077,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":"UmgNF","wrapper":"_26rkh","align-widgets-top":"_3urju","alignWidgetsTop":"_3urju","size-24":"_3BRay","size24":"_3BRay","folding-arrow":"_3caQk","foldingArrow":"_3caQk","size-30":"_2ygOh","size30":"_2ygOh","size-36":"_2kqBu","size36":"_2kqBu","size-42":"_5P7iU","size42":"_5P7iU","size-48":"SST9d","size48":"SST9d","size-60":"uvspP","size60":"uvspP","align-widgets-center":"_3KflV","alignWidgetsCenter":"_3KflV","padding-12":"_32AEQ","padding12":"_32AEQ","padding-24":"_27_ot","padding24":"_27_ot","padding-left-12":"_1APax","paddingLeft12":"_1APax","padding-left-24":"_1UMZX","paddingLeft24":"_1UMZX","padding-right-24":"_1P0GY","paddingRight24":"_1P0GY","drag-handle":"_2kfiE","dragHandle":"_2kfiE","checkbox":"fbDKa","indent":"_19Wkr","folding-arrow-12":"WQYzu","foldingArrow12":"WQYzu","folding-arrow-18":"_3BdKS","foldingArrow18":"_3BdKS"};
+module.exports = {"cell":"_1nf0e","wrapper":"_1Jfop","align-widgets-top":"_22NR8","alignWidgetsTop":"_22NR8","size-24":"_2gKNR","size24":"_2gKNR","folding-arrow":"_3uWDG","foldingArrow":"_3uWDG","size-30":"_3igDI","size30":"_3igDI","size-36":"_3jn-h","size36":"_3jn-h","size-42":"_3T20x","size42":"_3T20x","size-48":"_2uMT3","size48":"_2uMT3","size-60":"Ck5Lb","size60":"Ck5Lb","align-widgets-center":"_1nF70","alignWidgetsCenter":"_1nF70","padding-12":"_1YF8T","padding12":"_1YF8T","padding-24":"dbMzH","padding24":"dbMzH","padding-left-12":"_2grl-","paddingLeft12":"_2grl-","padding-left-24":"_34Fle","paddingLeft24":"_34Fle","padding-right-24":"_14-K4","paddingRight24":"_14-K4","drag-handle":"xeNYe","dragHandle":"xeNYe","checkbox":"_2l4jU","indent":"_23Whv","folding-arrow-12":"_3SKo3","foldingArrow12":"_3SKo3","folding-arrow-18":"_3CqTU","foldingArrow18":"_3CqTU"};
 
 /***/ }),
 
@@ -3090,48 +3089,48 @@ module.exports = {"cell":"UmgNF","wrapper":"_26rkh","align-widgets-top":"_3urju"
 /***/ (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;
 
 
 /***/ }),
@@ -3144,7 +3143,7 @@ exports.DataTableCell = DataTableCell;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"container":"_3KTB1","target":"_2aKgu","panel":"_1okVM","divider":"_1JqNT","input":"_2NcTM","notification":"_1Flze"};
+module.exports = {"container":"h5cGx","target":"Q0H77","panel":"_3OIE9","divider":"_1dx2D","input":"zQdcx","notification":"_2Ttdo"};
 
 /***/ }),
 
@@ -3156,70 +3155,70 @@ module.exports = {"container":"_3KTB1","target":"_2aKgu","panel":"_1okVM","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;
 
 
 /***/ }),
@@ -3232,7 +3231,7 @@ exports.Preset = Preset;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"row":"_1avdL"};
+module.exports = {"row":"_1EYzE"};
 
 /***/ }),
 
@@ -3244,31 +3243,31 @@ module.exports = {"row":"_1avdL"};
 /***/ (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, activePresetId = _a.activePresetId, 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 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, activePresetId = _a.activePresetId, 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 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);
 
 
 /***/ }),
@@ -3281,11 +3280,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);
 
 
 /***/ }),
@@ -3298,12 +3297,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);
 
 
 /***/ }),
@@ -3316,8 +3315,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 });
 
 
 /***/ }),
@@ -3330,20 +3329,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 = {}));
 
 
 /***/ }),
@@ -3356,7 +3355,7 @@ var EditMode;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_1VL4r"};
+module.exports = {"root":"_1c6kD"};
 
 /***/ }),
 
@@ -3368,29 +3367,29 @@ module.exports = {"root":"_1VL4r"};
 /***/ (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);
 
 
 /***/ }),
@@ -3403,7 +3402,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":"_1VfR_","loading-word":"_1X4m8","loadingWord":"_1X4m8","animated-loading":"_3k3rt","animatedLoading":"_3k3rt","skeleton_loading":"_1Gn2j","skeletonLoading":"_1Gn2j"};
+module.exports = {"container":"_3VflS","loading-word":"_1Az0l","loadingWord":"_1Az0l","animated-loading":"_2W0Hr","animatedLoading":"_2W0Hr","skeleton_loading":"_2mnnk","skeletonLoading":"_2mnnk"};
 
 /***/ }),
 
@@ -3415,31 +3414,31 @@ module.exports = {"container":"_1VfR_","loading-word":"_1X4m8","loadingWord":"_1
 /***/ (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;
 
 
 /***/ }),
@@ -3452,11 +3451,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);
 
 
 /***/ }),
@@ -3469,12 +3468,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 []; });
 
 
 /***/ }),
@@ -3487,7 +3486,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":"dSdxc","size-18":"_2PY5C","size18":"_2PY5C","fill-transparent":"_2URFB","fillTransparent":"_2URFB","size-24":"_2dybX","size24":"_2dybX","size-30":"_1Go0v","size30":"_1Go0v","size-36":"PKtUW","size36":"PKtUW","size-42":"yFZVT","size42":"yFZVT","size-48":"_24Tcv","size48":"_24Tcv","fill-solid":"AUubX","fillSolid":"AUubX"};
+module.exports = {"root":"_11RnI","size-18":"_1_d9Q","size18":"_1_d9Q","fill-transparent":"_1HdCz","fillTransparent":"_1HdCz","size-24":"_2lQHG","size24":"_2lQHG","size-30":"_1gNGv","size30":"_1gNGv","size-36":"zYRk6","size36":"zYRk6","size-42":"_2cCcy","size42":"_2cCcy","size-48":"_3DQaU","size48":"_3DQaU","fill-solid":"_3GxNx","fillSolid":"_3GxNx"};
 
 /***/ }),
 
@@ -3499,40 +3498,40 @@ module.exports = {"root":"dSdxc","size-18":"_2PY5C","size18":"_2PY5C","fill-tran
 /***/ (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',
+}); });
 
 
 /***/ }),
@@ -3545,7 +3544,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":"_3-uKo","size-18":"_34qf-","size18":"_34qf-","size-24":"_3omlV","size24":"_3omlV","size-30":"Ku_dw","size30":"Ku_dw","size-36":"_2nDtK","size36":"_2nDtK","size-42":"_27OXL","size42":"_27OXL","size-48":"qA-Yt","size48":"qA-Yt"};
+module.exports = {"root":"_1n8m1","size-18":"_1EBzJ","size18":"_1EBzJ","size-24":"_1Ynyw","size24":"_1Ynyw","size-30":"_3GD1H","size30":"_3GD1H","size-36":"_3aXvY","size36":"_3aXvY","size-42":"Ev5Mj","size42":"Ev5Mj","size-48":"_2dHsC","size48":"_2dHsC"};
 
 /***/ }),
 
@@ -3557,38 +3556,38 @@ module.exports = {"root":"_3-uKo","size-18":"_34qf-","size18":"_34qf-","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,
+}); });
 
 
 /***/ }),
@@ -3601,12 +3600,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);
 
 
 /***/ }),
@@ -3619,40 +3618,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;
 
 
 /***/ }),
@@ -3665,59 +3664,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',
+    },
+};
 
 
 /***/ }),
@@ -4207,7 +4206,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");
 
 
 /***/ }),
@@ -4256,7 +4255,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");
 
 
 /***/ }),
@@ -4451,7 +4450,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");
 
 
 /***/ }),
@@ -4499,7 +4498,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");
 
 
 /***/ }),
@@ -4512,103 +4511,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,
+    },
+};
 
 
 /***/ }),
@@ -4657,7 +4656,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");
 
 
 /***/ }),
@@ -5049,7 +5048,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");
 
 
 /***/ }),
@@ -5098,7 +5097,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");
 
 
 /***/ }),
@@ -5148,7 +5147,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");
 
 
 /***/ }),
@@ -5399,7 +5398,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");
 
 
 /***/ }),
@@ -5412,13 +5411,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);
 
 
 /***/ }),
@@ -5430,7 +5429,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__(/*! C:\Users\Aliaksei_Manetau\WebstormProjects\uui\uui\index.tsx */"./index.tsx");
 
 
 /***/ }),